/* ============================================================================
   Compléments serveur — messages d'erreur du formulaire et bloc de référence.

   Fichier distinct à dessein : assets/css/dist/site.css est assemblé par
   inc/assets.php à partir de assets/css/src/ et serait écrasé au prochain
   build. Les fragments source n'accompagnent pas la page publiée ; ces
   quelques règles vivent donc à côté, chargées après la feuille principale.

   Aucune couleur ni mesure en dur : uniquement les jetons de :root.
   ========================================================================= */

/* ── Récapitulatif d'erreur, en tête de formulaire ────────────────────────── */

.form__alerte {
  display: flex;
  gap: var(--sp-1);
  align-items: flex-start;
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2);
  border: 1px solid var(--rouge);
  border-inline-start: 4px solid var(--rouge);
  border-radius: var(--rayon-s);
  background: #FFF6F6;
  color: var(--encre);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.form__alerte::before {
  content: "!";
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--rouge);
  color: var(--blanc);
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}

/* ── Message rattaché à un champ ──────────────────────────────────────────── */

/* Le liseré rouge de la saisie est déjà fourni par .champ__saisie[aria-invalid]. */
.champ__erreur {
  display: block;
  margin-top: calc(var(--sp-1) / 2);
  color: var(--rouge);
  font-size: var(--t-xs);
  line-height: 1.4;
}

.consentement .champ__erreur {
  margin-top: var(--sp-1);
}


/* ── Cartes « Nos formations » ────────────────────────────────────────────── */

/*
 * Le visuel portait un sigle de deux ou trois signes (« Aa », « 1:1 ») à
 * 2.6rem ; il porte désormais un libellé (« Ateliers innovants »), qui à cette
 * taille déborderait de la carte. Taille fluide, retour à la ligne autorisé,
 * et une réserve en haut pour ne pas passer sous la pastille de niveau, qui
 * est positionnée en absolu.
 */
.formation__glyphe--texte {
  max-width: 88%;
  padding-top: 1.6rem;
  font-size: clamp(1.15rem, 0.85rem + 1.1vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
}

/* Le tarif ayant disparu, le bouton « Choisir » reste seul : on le recentre. */
.formation__pied--centre {
  justify-content: center;
}

/*
 * Sur les cartes bien remplies, le filet du pied venait toucher la dernière
 * étiquette : la liste ne réservait aucune marge basse (margin:.75rem 0 0).
 * Le pied reste poussé en bas par margin-top:auto, cette marge n'ajoute donc
 * de l'espace que là où le contenu arrive au ras du filet.
 */
.formation__meta {
  margin-bottom: var(--sp-2);
}

/* ── Pastille du bandeau ──────────────────────────────────────────────────── */

/*
 * Elle était rouge (var(--rouge)), la même couleur que les erreurs de
 * formulaire : sur un badge, un point rouge clignotant se lit comme une alerte
 * ou un enregistrement en cours, alors qu'il annonce une bonne nouvelle
 * (« centre d'examens agréé », « places limitées »).
 *
 * Le vert n'existait pas dans la palette — elle est bleu/rouge, aux couleurs
 * françaises. On l'ajoute donc comme jeton, pour ne pas semer un code
 * hexadécimal isolé dans la feuille.
 */
:root {
  --vert: #34C77B;
  --vert-halo: rgba(52, 199, 123, .28);
}

.hero__pastille {
  background: var(--vert);
  box-shadow: 0 0 0 4px var(--vert-halo);
}

/* ── Boutons de la page de remerciement ───────────────────────────────────── */

/*
 * merci.php reprend la coquille des pages légales, qui souligne tous ses liens
 * (.legal a). Utile pour un lien dans un paragraphe, mais un bouton souligné
 * ressemble à un lien mal stylé : .btn ne remet jamais text-decoration à none,
 * la règle de contexte l'emportait donc.
 */
.legal a.btn,
.legal a.btn:hover,
.legal a.btn:focus {
  text-decoration: none;
}

/* ── Cibles d'ancre sous l'en-tête fixe ───────────────────────────────────── */

/*
 * L'en-tête est en position:fixed sur 84 px. Sans marge de défilement, le
 * navigateur amène la cible d'une ancre à ras du haut de la fenêtre : le haut
 * de l'élément passe alors SOUS l'en-tête, et son padding semble avoir disparu.
 *
 * site.css ne pose la règle que sur .section, et #inscription n'en est pas une :
 * la carte du formulaire, où inscription.php renvoie après une erreur, arrivait
 * donc à moitié sous l'en-tête, alerte comprise. C'est le cas réellement visible.
 *
 * #hero et #contenu sont ajoutés par prudence : ils ouvrent le document, le
 * navigateur ne peut pas défiler plus haut, la marge y reste donc sans effet
 * tant que rien ne les précède.
 */
#inscription,
#hero,
#contenu {
  scroll-margin-top: calc(var(--entete-h) + var(--sp-2));
}

/* ── Menu mobile ouvert : garder la barre d'en-tête visible ───────────────── */

@media (max-width: 960px) {
  /*
   * Le panneau de navigation est en position:fixed, ancré à inset:0 0 auto :
   * il descend donc depuis le haut de l'écran et recouvrait la barre
   * d'en-tête, puisqu'un élément positionné se peint au-dessus des éléments
   * statiques voisins. Son padding supérieur réserve pourtant la hauteur de
   * l'en-tête : l'intention était bien de laisser la barre visible.
   */
  .logo,
  .outils {
    position: relative;
    z-index: 1;
  }

  /*
   * Reste la lisibilité : le panneau est blanc, alors que l'en-tête est
   * habillé pour la bannière sombre (logo blanc, libellés de langue clairs).
   * Une fois au-dessus, tout serait blanc sur blanc. On bascule donc sur la
   * déclinaison sombre, exactement celle de l'en-tête collé.
   */
  .entete:has(.nav[data-ouvert="true"]) .logo__image--clair { display: none; }
  .entete:has(.nav[data-ouvert="true"]) .logo__image--fonce { display: block; }

  .entete:has(.nav[data-ouvert="true"]) .langues { background: var(--gris-100); }
  .entete:has(.nav[data-ouvert="true"]) .langues__lien { color: var(--gris-500); }
  .entete:has(.nav[data-ouvert="true"]) .langues__lien[aria-current="true"] {
    background: var(--bleu-700);
    color: #fff;
  }

  .entete:has(.nav[data-ouvert="true"]) .burger span { background: var(--bleu-800); }
}

/* ── Grilles de 4 sur petit écran ─────────────────────────────────────────── */

/*
 * site.css fait retomber .grille--4 sur deux colonnes à 1080 px, mais la règle
 * de 640 px qui repasse les grilles sur une seule colonne ne liste que
 * .grille--2 et .grille--3 : .grille--4 y a été oublié. Les cartes de
 * « Pourquoi nous » et « Nos formations » restaient donc à deux colonnes sur
 * mobile, bien trop étroites pour leur contenu.
 */
@media (max-width: 640px) {
  .grille--4 {
    grid-template-columns: 1fr;
  }
}

/* ── Espace entre la pastille et le titre du bandeau ──────────────────────── */

/*
 * La règle .hero__titre de site.css se contredit : elle déclare
 * margin-top:var(--sp-3), puis un margin:0 plus loin dans le même bloc, qui
 * l'annule. L'écart voulu par la maquette n'a donc jamais été appliqué et le
 * titre venait toucher la pastille.
 *
 * On rétablit la valeur d'origine plutôt que d'en inventer une.
 */
.hero__titre {
  margin-top: var(--sp-3);
}

/* ── Nom de domaine dans le pied de page ──────────────────────────────────── */

/*
 * « if-maroc.org » se coupait sur son trait d'union en fin de ligne, donnant
 * « if- » puis « maroc.org » : on doute alors de l'adresse exacte. Le lien
 * reste d'un seul tenant, la phrase autour continue de se replier normalement.
 */
.pied__contact a {
  white-space: nowrap;
}