/* ═══════════════════════════════════════════════════════════
   DRONE ACADÉMIE — feuille de style unique
   Charte : orange #e8491d, bleu nuit #16213e.
   Écrit en mobile d'abord : le socle vaut pour le téléphone,
   les media queries n'ajoutent que ce qu'un écran large permet.

   Aucune police téléchargée : sur une connexion 3G, une famille
   système s'affiche instantanément là où un fichier distant
   coûte 30 à 100 Ko et un texte invisible le temps du chargement.
   ═══════════════════════════════════════════════════════════ */

/* ── Jetons ─────────────────────────────────────────────── */
:root {
  --orange:        #e8491d;
  --orange-fonce:  #c73a12;
  --orange-clair:  #fdeee9;

  --nuit:          #16213e;
  --nuit-2:        #1f2c4d;
  --encre:         #1a1a2e;
  --gris-fonce:    #454b5c;
  --gris:          #6b7280;
  --gris-clair:    #9aa1ad;
  --trait:         #e2e5ea;
  --fond:          #ffffff;
  --fond-doux:     #f6f7f9;

  --valide:        #136f45;
  --valide-fond:   #e6f4ec;
  --alerte:        #b3261e;
  --alerte-fond:   #fbeae8;
  --vigilance:     #8a5a00;
  --vigilance-fond:#fdf3e0;

  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-titre: var(--police);

  /* Échelle typographique — ratio 1.25, fluide */
  --t-xs:   0.78rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.45rem);
  --t-xl:   clamp(1.5rem,  1.3rem + 1vw,   2rem);
  --t-2xl:  clamp(1.9rem,  1.5rem + 1.8vw, 2.6rem);
  --t-3xl:  clamp(2.2rem,  1.7rem + 2.6vw, 3.2rem);

  --esp-1: 0.25rem;  --esp-2: 0.5rem;   --esp-3: 0.75rem;
  --esp-4: 1rem;     --esp-5: 1.5rem;   --esp-6: 2rem;
  --esp-7: 3rem;     --esp-8: 4rem;     --esp-9: 6rem;

  --rayon:    10px;
  --rayon-sm: 6px;
  --ombre:    0 1px 2px rgba(22,33,62,.06), 0 6px 20px -8px rgba(22,33,62,.14);
  --ombre-fort: 0 2px 4px rgba(22,33,62,.08), 0 16px 40px -12px rgba(22,33,62,.22);

  --largeur: 1180px;
  --lecture: 68ch;
}

/* ── Remise à zéro ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--police);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--gris-fonce);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  color: var(--encre);
  line-height: 1.15;
  text-wrap: balance;
  font-weight: 700;
}
h1 { font-size: var(--t-3xl); letter-spacing: -0.025em; }
h2 { font-size: var(--t-2xl); letter-spacing: -0.02em; }
h3 { font-size: var(--t-lg);  letter-spacing: -0.01em; }
h4 { font-size: var(--t-md); }

p, li { text-wrap: pretty; }

a { color: var(--orange-fonce); text-underline-offset: 2px; }
a:hover { color: var(--orange); }

ul, ol { padding: 0; list-style: none; }

button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Utilitaires ────────────────────────────────────────── */
.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--esp-4);
}
@media (min-width: 768px) { .conteneur { padding-inline: var(--esp-6); } }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.saut-contenu {
  position: absolute; top: -100%; left: var(--esp-4);
  z-index: 100; padding: var(--esp-3) var(--esp-4);
  background: var(--orange); color: #fff; font-weight: 600;
  border-radius: 0 0 var(--rayon-sm) var(--rayon-sm);
}
.saut-contenu:focus { top: 0; color: #fff; }

/* Repère des informations manquantes. Volontairement voyant :
   il doit sauter aux yeux en relecture, jamais passer en ligne. */
.a-completer {
  background: var(--vigilance-fond);
  color: var(--vigilance);
  border: 1px dashed var(--vigilance);
  padding: 0.05em 0.4em;
  border-radius: 3px;
  font-size: 0.85em;
  font-weight: 600;
}

.prose { max-width: var(--lecture); }
.prose > * + * { margin-top: var(--esp-4); }
.prose h2 { margin-top: var(--esp-7); }
.prose h3 { margin-top: var(--esp-6); }
.prose ul { list-style: disc; padding-left: 1.35em; }
.prose ol { list-style: decimal; padding-left: 1.35em; }
.prose li + li { margin-top: var(--esp-2); }

.section { padding-block: var(--esp-7); }
@media (min-width: 768px) { .section { padding-block: var(--esp-8); } }
.section--douce { background: var(--fond-doux); }
.section--nuit  { background: var(--nuit); color: #d6dbe6; }
.section--nuit h2, .section--nuit h3 { color: #fff; }

.section__intro { max-width: 60ch; margin-bottom: var(--esp-6); }
.section__intro p { margin-top: var(--esp-3); font-size: var(--t-md); color: var(--gris); }

.surtitre {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--esp-2);
}

/* ── Boutons ────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--esp-2);
  padding: 0.8rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--rayon-sm);
  font-weight: 600;
  font-size: var(--t-sm);
  text-decoration: none;
  transition: background-color .18s, color .18s, border-color .18s;
}
.bouton--principal { background: var(--orange); color: #fff; }
.bouton--principal:hover { background: var(--orange-fonce); color: #fff; }
.bouton--contour { border-color: var(--orange); color: var(--orange-fonce); }
.bouton--contour:hover { background: var(--orange); color: #fff; }
.bouton--blanc { background: #fff; color: var(--encre); }
.bouton--blanc:hover { background: var(--fond-doux); color: var(--encre); }
.bouton--large { width: 100%; }

.lien-discret {
  font-size: var(--t-sm);
  color: var(--gris);
  text-decoration: none;
}
.lien-discret:hover { color: var(--orange-fonce); text-decoration: underline; }

/* ── Barre de contact ───────────────────────────────────── */
.barre-contact {
  background: var(--nuit);
  color: #b9c1d1;
  font-size: var(--t-xs);
}
.barre-contact__inner {
  display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5);
  justify-content: space-between; align-items: center;
  padding-block: var(--esp-2);
}
.barre-contact__liens { display: flex; flex-wrap: wrap; gap: var(--esp-4); }
.barre-contact a { color: #b9c1d1; text-decoration: none; }
.barre-contact a:hover { color: #fff; }
@media (max-width: 599px) { .barre-contact__lieu { display: none; } }

/* ── En-tête et navigation ──────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--trait);
}
.entete__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-4);
  min-height: 68px;
}
.entete__logo img { width: auto; height: 40px; }

.entete__bascule {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--trait);
  border-radius: var(--rayon-sm);
}
.entete__bascule-barres,
.entete__bascule-barres::before,
.entete__bascule-barres::after {
  content: ""; display: block;
  width: 20px; height: 2px;
  background: var(--encre);
  transition: transform .2s, opacity .2s;
}
.entete__bascule-barres { position: relative; }
.entete__bascule-barres::before { position: absolute; top: -6px; }
.entete__bascule-barres::after  { position: absolute; top: 6px; }
.entete__bascule[aria-expanded="true"] .entete__bascule-barres { background: transparent; }
.entete__bascule[aria-expanded="true"] .entete__bascule-barres::before { transform: translateY(6px) rotate(45deg); }
.entete__bascule[aria-expanded="true"] .entete__bascule-barres::after  { transform: translateY(-6px) rotate(-45deg); }

/* Menu — téléphone : replié, déroulé au clic */
.nav {
  display: none;
  position: absolute; inset-inline: 0; top: 100%;
  background: #fff;
  border-bottom: 1px solid var(--trait);
  box-shadow: var(--ombre);
  padding: var(--esp-3) var(--esp-4) var(--esp-5);
  max-height: calc(100vh - 68px);
  overflow-y: auto;
}
.nav.est-ouverte { display: block; }

.nav__item { border-bottom: 1px solid var(--trait); position: relative; }
.nav__lien {
  display: block; padding: var(--esp-3) 0;
  color: var(--encre); font-weight: 600; text-decoration: none;
}
.nav__lien.est-actif { color: var(--orange-fonce); }

.nav__ouvrir {
  position: absolute; top: 0; right: 0;
  width: 48px; height: 48px;
  background: none; border: 0;
}
.nav__ouvrir::after {
  content: ""; display: block;
  width: 9px; height: 9px; margin-inline: auto;
  border-right: 2px solid var(--gris);
  border-bottom: 2px solid var(--gris);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s;
}
.nav__ouvrir[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }

.nav__sous-liste { display: none; padding: 0 0 var(--esp-3) var(--esp-4); }
.nav__sous-liste.est-ouverte { display: block; }
.nav__sous-liste a {
  display: block; padding: var(--esp-2) 0;
  color: var(--gris-fonce); font-size: var(--t-sm); text-decoration: none;
}
.nav__sous-liste a:hover,
.nav__sous-liste a[aria-current] { color: var(--orange-fonce); }

.nav__actions {
  display: flex; flex-direction: column; gap: var(--esp-3);
  margin-top: var(--esp-4);
}

/* Menu — écran large : barre horizontale, sous-menus au survol */
@media (min-width: 1024px) {
  .entete__bascule { display: none; }

  .nav {
    display: flex; align-items: center; gap: var(--esp-5);
    position: static; padding: 0; border: 0; box-shadow: none;
    max-height: none; overflow: visible;
  }
  .nav__liste { display: flex; align-items: center; gap: var(--esp-1); }
  .nav__item { border: 0; }
  .nav__lien { padding: var(--esp-2) var(--esp-3); font-size: var(--t-sm); }
  .nav__lien.est-actif { box-shadow: inset 0 -2px 0 var(--orange); }

  .nav__ouvrir { display: none; }

  .nav__item--deroulant > .nav__lien { padding-right: 1.5rem; }
  .nav__item--deroulant > .nav__lien::after {
    content: ""; position: absolute; top: 50%; right: 0.55rem;
    width: 6px; height: 6px; margin-top: -4px;
    border-right: 2px solid var(--gris-clair);
    border-bottom: 2px solid var(--gris-clair);
    transform: rotate(45deg);
  }

  .nav__sous-liste {
    display: block;
    position: absolute; top: calc(100% + 2px); left: 0;
    min-width: 240px; padding: var(--esp-2);
    background: #fff;
    border: 1px solid var(--trait);
    border-radius: var(--rayon-sm);
    box-shadow: var(--ombre-fort);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
  }
  .nav__item--deroulant:hover  .nav__sous-liste,
  .nav__item--deroulant:focus-within .nav__sous-liste {
    opacity: 1; visibility: visible; transform: none;
  }
  .nav__sous-liste a { padding: var(--esp-2) var(--esp-3); border-radius: var(--rayon-sm); }
  .nav__sous-liste a:hover { background: var(--orange-clair); }

  .nav__actions { flex-direction: row; align-items: center; margin: 0; margin-left: auto; }
}

/* ── Fil d'Ariane ───────────────────────────────────────── */
.fil { border-bottom: 1px solid var(--trait); background: var(--fond-doux); }
.fil__liste {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2);
  padding-block: var(--esp-3);
  font-size: var(--t-xs); color: var(--gris);
}
.fil__liste li + li::before { content: "›"; margin-right: var(--esp-2); color: var(--gris-clair); }
.fil__liste a { color: var(--gris); text-decoration: none; }
.fil__liste a:hover { color: var(--orange-fonce); text-decoration: underline; }

/* ── Bannière d'accueil ─────────────────────────────────── */
.banniere {
  position: relative;
  display: grid; align-items: center;
  min-height: 30rem;
  padding-block: var(--esp-8);
  background: var(--nuit) center / cover no-repeat;
  color: #fff;
}
.banniere::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(22,33,62,.94) 0%, rgba(22,33,62,.78) 45%, rgba(22,33,62,.45) 100%);
}
.banniere > * { position: relative; z-index: 1; }
.banniere h1 { color: #fff; max-width: 16ch; }
.banniere__contenu { max-width: 40rem; }
.banniere__accroche {
  margin-top: var(--esp-4);
  font-size: var(--t-md);
  color: #d3d9e6;
  max-width: 46ch;
}
.banniere__actions {
  display: flex; flex-wrap: wrap; gap: var(--esp-3);
  margin-top: var(--esp-6);
}
.etiquette {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  background: rgba(232,73,29,.16);
  border: 1px solid var(--orange);
  border-radius: 999px;
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: #ffb59c;
  margin-bottom: var(--esp-4);
}

/* ── Bandeau de confiance ───────────────────────────────── */
.confiance {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-5);
  padding-block: var(--esp-6);
  border-bottom: 1px solid var(--trait);
}
@media (min-width: 768px) { .confiance { grid-template-columns: repeat(4, 1fr); } }
.confiance__item { text-align: center; }
.confiance__nombre {
  display: block;
  font-size: var(--t-xl); font-weight: 800; color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.confiance__libelle { font-size: var(--t-sm); color: var(--gris); }

/* ── Cartes ─────────────────────────────────────────────── */
.grille {
  display: grid; gap: var(--esp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .grille--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px)  { .grille--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grille--3 { grid-template-columns: repeat(3, 1fr); } }

.carte {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.carte:hover { box-shadow: var(--ombre-fort); transform: translateY(-2px); }
.carte__image { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; background: var(--fond-doux); }
.carte__corps { display: flex; flex-direction: column; flex: 1; padding: var(--esp-5); gap: var(--esp-3); }
.carte__corps h3 a { color: inherit; text-decoration: none; }
.carte__corps h3 a:hover { color: var(--orange-fonce); }
.carte__resume { font-size: var(--t-sm); color: var(--gris); }
.carte__meta {
  display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4);
  font-size: var(--t-xs); color: var(--gris);
  margin-top: auto; padding-top: var(--esp-3);
  border-top: 1px solid var(--trait);
}
.carte--phare { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.insigne {
  position: absolute; top: var(--esp-3); left: var(--esp-3);
  padding: 0.2rem 0.6rem;
  background: var(--orange); color: #fff;
  border-radius: 999px;
  font-size: var(--t-xs); font-weight: 700;
}
.carte { position: relative; }

/* ── Encadré réglementaire ──────────────────────────────── */
/* Porte l'autorité du site : une citation, sa référence exacte,
   et le lien vers le texte officiel. Jamais de paraphrase seule. */
.reglement {
  border-left: 4px solid var(--orange);
  background: var(--fond-doux);
  border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
  padding: var(--esp-5);
  margin-block: var(--esp-5);
  max-width: var(--lecture);
}
.reglement__source {
  display: block;
  margin-top: var(--esp-3);
  font-size: var(--t-xs);
  color: var(--gris);
}
.reglement__source a { color: var(--orange-fonce); }

/* ── États de vérification ──────────────────────────────── */
.statut {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: var(--t-sm); font-weight: 700;
}
.statut--valide  { background: var(--valide-fond); color: var(--valide); }
.statut--expire  { background: var(--vigilance-fond); color: var(--vigilance); }
.statut--absent  { background: var(--alerte-fond); color: var(--alerte); }

/* ── Pied de page ───────────────────────────────────────── */
.pied {
  background: var(--nuit);
  color: #a8b1c4;
  font-size: var(--t-sm);
  padding-top: var(--esp-7);
  margin-top: var(--esp-8);
}
.pied__grille {
  display: grid; gap: var(--esp-6);
  grid-template-columns: 1fr;
  padding-bottom: var(--esp-7);
}
@media (min-width: 640px)  { .pied__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.pied h2 {
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; margin-bottom: var(--esp-3);
}
.pied__marque img { height: 42px; width: auto; margin-bottom: var(--esp-4); }
.pied__marque p + p { margin-top: var(--esp-3); }
.pied__agrement { font-size: var(--t-xs); color: var(--gris-clair); }
.pied__colonne li + li { margin-top: var(--esp-2); }
.pied a { color: #a8b1c4; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied__reseaux { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-4); }

.pied__bas {
  display: flex; flex-wrap: wrap; gap: var(--esp-3) var(--esp-5);
  justify-content: space-between; align-items: center;
  padding-block: var(--esp-4);
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: var(--t-xs);
}
.pied__legal { display: flex; flex-wrap: wrap; gap: var(--esp-4); }

/* ── Catalogue de documents réglementaires ──────────────── */
.docs { display: grid; gap: var(--esp-3); margin-top: var(--esp-5); }

.doc {
  display: flex; flex-direction: column; gap: var(--esp-4);
  padding: var(--esp-5);
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
@media (min-width: 768px) {
  .doc { flex-direction: row; align-items: center; justify-content: space-between; }
  .doc__lien { flex-shrink: 0; }
}

.doc--phare { border-color: var(--orange); background: var(--orange-clair); }

.doc__ref {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-3);
  font-size: var(--t-sm); font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--orange-fonce);
}
.doc__edition {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--gris);
}
.doc__titre { margin-top: var(--esp-2); font-size: var(--t-md); }
.doc__resume { margin-top: var(--esp-2); font-size: var(--t-sm); color: var(--gris); max-width: 60ch; }

.doc__meta {
  display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4);
  margin-top: var(--esp-3);
  font-size: var(--t-xs); color: var(--gris-clair);
}
/* Le poids est mis en avant : sur une connexion mobile, lancer
   30 Mo sans le savoir n'est pas une expérience acceptable. */
.doc__poids { font-weight: 700; color: var(--gris-fonce); font-variant-numeric: tabular-nums; }

.doc__absent { font-size: var(--t-sm); color: var(--alerte); }

/* ═══════════════════════════════════════════════════════════
   ACCUEIL
   ═══════════════════════════════════════════════════════════ */

/* ── Bannière ───────────────────────────────────────────── */
.ac-hero {
  position: relative; isolation: isolate;
  display: grid; align-items: center;
  min-height: min(92vh, 54rem);
  padding-block: var(--esp-9) var(--esp-8);
  background: var(--nuit);
  color: #fff; overflow: hidden;
}
.ac-hero__fond {
  position: absolute; inset: -4% 0 0;
  background: center / cover no-repeat;
  z-index: -2;
  /* Une lente dérive donne de la profondeur sans distraire. */
  animation: ac-derive 26s ease-in-out infinite alternate;
}
@keyframes ac-derive {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}
.ac-hero__voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 12% 22%, rgba(22,33,62,.30) 0%, rgba(22,33,62,.92) 62%),
    linear-gradient(180deg, rgba(10,15,30,.55) 0%, rgba(10,15,30,.72) 55%, rgba(10,15,30,.96) 100%);
}

.ac-hero__sceau {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  padding: .4rem .9rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em;
  color: #e6ebf5;
}
.ac-hero__sceau span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 4px rgba(232,73,29,.25);
}

.ac-hero__titre {
  margin-top: var(--esp-5);
  font-size: clamp(2.4rem, 1.4rem + 5.2vw, 5.4rem);
  line-height: 1.02; letter-spacing: -.035em; font-weight: 800;
  color: #fff; max-width: 15ch;
}
.ac-mot { display: inline-block; }
.ac-mot--accent { color: var(--orange-clair); }

.ac-hero__accroche {
  margin-top: var(--esp-5);
  max-width: 46ch; font-size: var(--t-md); color: #cfd6e6;
}
.ac-hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--esp-3);
  margin-top: var(--esp-6);
}
.bouton--grand { padding: 1rem 1.8rem; font-size: var(--t-base); }
.bouton--fantome {
  border-color: rgba(255,255,255,.4); color: #fff;
  backdrop-filter: blur(4px);
}
.bouton--fantome:hover { background: rgba(255,255,255,.12); color: #fff; }

.ac-hero__preuves {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-5);
  margin-top: var(--esp-8);
  padding-top: var(--esp-5);
  border-top: 1px solid rgba(255,255,255,.14);
  max-width: 46rem;
}
@media (min-width: 768px) { .ac-hero__preuves { grid-template-columns: repeat(4, 1fr); } }
.ac-hero__preuves strong {
  display: block; font-size: var(--t-2xl); font-weight: 800; line-height: 1;
  color: var(--orange-clair); font-variant-numeric: tabular-nums;
}
.ac-hero__preuves span {
  display: block; margin-top: var(--esp-2);
  font-size: var(--t-xs); color: #aab3c6; line-height: 1.35;
}

.ac-hero__descendre {
  position: absolute; left: 50%; bottom: var(--esp-5);
  width: 26px; height: 42px; margin-left: -13px;
  border: 2px solid rgba(255,255,255,.35); border-radius: 999px;
}
.ac-hero__descendre span {
  position: absolute; left: 50%; top: 8px; margin-left: -2px;
  width: 4px; height: 7px; border-radius: 2px; background: #fff;
  animation: ac-molette 1.9s ease-in-out infinite;
}
@keyframes ac-molette {
  0%, 100% { transform: translateY(0);    opacity: 1; }
  70%      { transform: translateY(14px); opacity: 0; }
}

/* Entrée du titre, mot par mot. Ne s'active que si le script
   a posé .js-anime : sans JavaScript, tout reste visible. */
.js-anime .ac-mot {
  opacity: 0; transform: translateY(.5em);
  animation: ac-entree .7s cubic-bezier(.2,.75,.3,1) forwards;
  animation-delay: calc(var(--i) * 75ms + 120ms);
}
.js-anime .ac-hero__sceau,
.js-anime .ac-hero__accroche,
.js-anime .ac-hero__actions,
.js-anime .ac-hero__preuves {
  opacity: 0; animation: ac-entree .8s ease-out forwards;
}
.js-anime .ac-hero__sceau    { animation-delay: 60ms; }
.js-anime .ac-hero__accroche { animation-delay: 620ms; }
.js-anime .ac-hero__actions  { animation-delay: 730ms; }
.js-anime .ac-hero__preuves  { animation-delay: 840ms; }
@keyframes ac-entree { to { opacity: 1; transform: none; } }

.section__intro--centre { margin-inline: auto; text-align: center; }

/* ── Grille des formations ──────────────────────────────── */
.grille-formations {
  display: grid; gap: var(--esp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .grille-formations { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grille-formations { grid-template-columns: repeat(3, 1fr); } }
/* Variante à deux cartes : les familles de spécialisations en comptent
   deux, et une troisième colonne vide déséquilibrerait la rangée. */
@media (min-width: 640px)  { .grille-formations--duo { grid-template-columns: repeat(2, 1fr); } }

.carte-formation { position: relative; }
.carte-formation__lien {
  display: flex; flex-direction: column; height: 100%;
  background: var(--fond); border: 1px solid var(--trait);
  border-radius: var(--rayon); overflow: hidden; text-decoration: none;
  transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s, border-color .28s;
}
.carte-formation__lien:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombre-fort);
  border-color: var(--orange);
}
.carte-formation__visuel { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--fond-doux); }
.carte-formation__visuel img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.8,.3,1);
}
.carte-formation__lien:hover .carte-formation__visuel img { transform: scale(1.06); }

.carte-formation__corps {
  display: flex; flex-direction: column; flex: 1;
  padding: var(--esp-5); gap: var(--esp-2);
}
.carte-formation__insigne {
  align-self: flex-start; font-style: normal;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--orange-fonce);
}
.carte-formation h3,
.carte-formation h4 { font-size: var(--t-md); color: var(--encre); }
.carte-formation p { font-size: var(--t-sm); color: var(--gris); }
.carte-formation__pied {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: var(--esp-4);
  border-top: 1px solid var(--trait);
}
.carte-formation__duree { font-size: var(--t-xs); font-weight: 700; color: var(--gris-fonce); }
.carte-formation__fleche {
  width: 22px; height: 8px; position: relative;
  transition: transform .25s;
}
.carte-formation__fleche::before,
.carte-formation__fleche::after {
  content: ""; position: absolute; background: var(--orange);
}
.carte-formation__fleche::before { left: 0; top: 3px; width: 100%; height: 2px; }
.carte-formation__fleche::after  { right: 0; top: 0; width: 8px; height: 8px;
  border-top: 2px solid var(--orange); border-right: 2px solid var(--orange);
  transform: rotate(45deg); }
.carte-formation__lien:hover .carte-formation__fleche { transform: translateX(5px); }

.carte-formation--phare .carte-formation__lien { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }

/* ── Bloc de preuve ─────────────────────────────────────── */
.ac-preuve__grille { display: grid; gap: var(--esp-7); grid-template-columns: 1fr; }
@media (min-width: 900px) { .ac-preuve__grille { grid-template-columns: 1.05fr .95fr; gap: var(--esp-8); } }
.ac-preuve__texte { color: #c3cbdb; margin-top: var(--esp-4); max-width: 48ch; }
.ac-preuve .bouton { margin-top: var(--esp-5); }
.ac-atouts { display: grid; gap: var(--esp-4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .ac-atouts { grid-template-columns: repeat(2, 1fr); } }
.ac-atouts li {
  padding: var(--esp-5);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--rayon);
}
.ac-atouts h3 { font-size: var(--t-base); color: #fff; }
.ac-atouts p { margin-top: var(--esp-2); font-size: var(--t-sm); color: #a9b2c5; }

/* ── Réglementation ─────────────────────────────────────── */
.ac-regle__grille { display: grid; gap: var(--esp-7); grid-template-columns: 1fr; }
@media (min-width: 900px) { .ac-regle__grille { grid-template-columns: 1.1fr .9fr; gap: var(--esp-8); } }
.ac-regle p { margin-top: var(--esp-4); }
.ac-regle__actions { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-5); }
.ac-regle__liste {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--fond-doux); overflow: hidden;
}
.ac-regle__liste li {
  padding: var(--esp-4) var(--esp-5);
  border-bottom: 1px solid var(--trait);
  font-size: var(--t-sm); color: var(--gris-fonce);
}
.ac-regle__liste li:last-child { border-bottom: 0; }
.ac-regle__liste span {
  display: block; font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .08em; color: var(--orange-fonce); margin-bottom: 3px;
}
.ac-regle__plus { text-align: center; background: var(--fond); }
.ac-regle__plus a { font-weight: 600; text-decoration: none; }

/* ── Vérification ───────────────────────────────────────── */
.ac-verif { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .ac-verif { grid-template-columns: 1fr 1fr; gap: var(--esp-8); } }
.ac-verif p { margin-top: var(--esp-3); color: var(--gris); max-width: 46ch; }
.ac-verif__form {
  background: var(--fond); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: var(--esp-5); box-shadow: var(--ombre);
}
.ac-verif__form label {
  display: block; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
  margin-bottom: var(--esp-2);
}
.ac-verif__ligne { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.ac-verif__ligne input {
  flex: 1 1 12rem; min-width: 0;
  padding: .8rem 1rem; font: inherit;
  border: 2px solid var(--trait); border-radius: var(--rayon-sm);
  background: var(--fond); color: var(--encre);
}
.ac-verif__ligne input:focus { border-color: var(--orange); outline: none; }
.ac-verif__note { margin-top: var(--esp-3); font-size: var(--t-xs); color: var(--gris-clair); }

/* ── Bandeau partenaires ────────────────────────────────── */
.ac-partenaires { padding-bottom: var(--esp-7); }
.ac-partenaires__titre {
  text-align: center; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris-clair);
  margin-bottom: var(--esp-6);
}
.ac-defile { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
             mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ac-defile__piste {
  display: flex; align-items: center; gap: var(--esp-8);
  width: max-content;
  animation: ac-glisse 46s linear infinite;
}
.ac-defile:hover .ac-defile__piste { animation-play-state: paused; }
.ac-defile__piste img {
  height: 42px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .55;
  transition: filter .3s, opacity .3s;
}
.ac-defile__piste img:hover { filter: none; opacity: 1; }
@keyframes ac-glisse { to { transform: translateX(-50%); } }

/* ── Appel final ────────────────────────────────────────── */
.ac-final { text-align: center; background: var(--fond-doux); }
.ac-final p { margin: var(--esp-3) auto 0; max-width: 50ch; color: var(--gris); }
.ac-final .ac-hero__actions { justify-content: center; }

/* ═══════════════════════════════════════════════════════════
   PAGES DE FORMATION
   ═══════════════════════════════════════════════════════════ */

/* ── Bannière ───────────────────────────────────────────── */
.fo-hero {
  position: relative;
  display: grid; align-items: end;
  min-height: 26rem;
  padding-block: var(--esp-8) var(--esp-7);
  background: var(--nuit) center / cover no-repeat;
  color: #fff;
}
.fo-hero__voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,33,62,.62) 0%, rgba(22,33,62,.90) 62%, rgba(22,33,62,.97) 100%);
}
.fo-hero__inner { position: relative; z-index: 1; }
.fo-hero h1 { color: #fff; max-width: 18ch; margin-top: var(--esp-2); }
.fo-hero__resume {
  margin-top: var(--esp-4);
  max-width: 52ch; font-size: var(--t-md); color: #d3d9e6;
}

/* ── Bandeau de repères ─────────────────────────────────── */
.fo-reperes { background: var(--nuit-2); color: #cdd4e2; }
.fo-reperes__grille {
  display: grid; gap: var(--esp-4);
  grid-template-columns: repeat(2, 1fr);
  padding-block: var(--esp-5);
}
@media (min-width: 768px) { .fo-reperes__grille { grid-template-columns: repeat(4, 1fr); } }
.fo-repere__cle {
  display: block; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--orange-clair);
  opacity: .85; margin-bottom: 2px;
}
.fo-repere__val { font-size: var(--t-sm); color: #fff; }

.fo-chapo { font-size: var(--t-md); color: var(--encre); }

/* ── Atouts numérotés ───────────────────────────────────── */
.fo-atouts {
  display: grid; gap: var(--esp-5);
  grid-template-columns: 1fr; counter-reset: none;
}
@media (min-width: 640px)  { .fo-atouts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fo-atouts { grid-template-columns: repeat(4, 1fr); } }
.fo-atouts li { margin: 0; padding-top: var(--esp-4); border-top: 3px solid var(--orange); }
.fo-atouts__num {
  display: block; font-size: var(--t-lg); font-weight: 800;
  color: var(--orange); font-variant-numeric: tabular-nums; line-height: 1;
}
.fo-atouts h3 { margin-top: var(--esp-3); font-size: var(--t-base); }
.fo-atouts p { margin-top: var(--esp-2); font-size: var(--t-sm); color: var(--gris); }

/* ── Deux colonnes ──────────────────────────────────────── */
.fo-duo { display: grid; gap: var(--esp-7); grid-template-columns: 1fr; }
@media (min-width: 900px) { .fo-duo { grid-template-columns: repeat(2, 1fr); gap: var(--esp-8); } }
.fo-duo h2 { margin-top: var(--esp-2); font-size: var(--t-xl); }

.fo-liste { margin-top: var(--esp-4); }
.fo-liste li {
  position: relative; padding-left: 1.6rem; margin-top: var(--esp-3);
  color: var(--gris-fonce);
}
.fo-liste li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; background: var(--orange); border-radius: 1px;
}
.fo-liste--serree li { margin-top: var(--esp-2); font-size: var(--t-sm); }

/* ── Programme ──────────────────────────────────────────── */
.fo-bloc {
  background: var(--fond); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: var(--esp-5);
  margin-top: var(--esp-5);
}
@media (min-width: 768px) { .fo-bloc { padding: var(--esp-6); } }
.fo-bloc__tete {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--esp-3);
  padding-bottom: var(--esp-3); border-bottom: 2px solid var(--orange);
}
.fo-bloc__tete h3 { font-size: var(--t-lg); color: var(--orange-fonce); }
.fo-bloc__duree {
  font-size: var(--t-sm); font-weight: 700; color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.fo-bloc__note { margin-top: var(--esp-3); font-size: var(--t-sm); color: var(--gris); }

.fo-modules { margin-top: var(--esp-2); }
.fo-module {
  display: grid; gap: var(--esp-1);
  padding-block: var(--esp-4); border-bottom: 1px solid var(--trait);
}
.fo-module:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 768px) {
  .fo-module { grid-template-columns: 15rem 1fr; gap: var(--esp-5); align-items: start; }
}
.fo-module dt { font-weight: 700; color: var(--encre); font-size: var(--t-sm); }
.fo-module dd { margin: 0; color: var(--gris); font-size: var(--t-sm); }

/* ── Brochure ───────────────────────────────────────────── */
.fo-brochure {
  display: grid; gap: var(--esp-5);
  grid-template-columns: 1fr;
  align-items: center;
  margin-top: var(--esp-6);
  padding: var(--esp-5);
  background: var(--fond);
  border: 1px solid var(--orange);
  border-radius: var(--rayon);
}
@media (min-width: 768px) {
  .fo-brochure { grid-template-columns: 1fr auto; gap: var(--esp-6); padding: var(--esp-6); }
}
.fo-brochure h3 { font-size: var(--t-md); }
.fo-brochure p { margin-top: var(--esp-3); font-size: var(--t-sm); color: var(--gris); max-width: 60ch; }
.fo-brochure__lien { white-space: nowrap; }
.fo-brochure__lien span { font-weight: 400; opacity: .85; }

/* ── Validation ─────────────────────────────────────────── */
.fo-validation {
  margin-top: var(--esp-6);
  border-left: 4px solid var(--orange);
  background: var(--orange-clair);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: var(--esp-5) var(--esp-6);
  max-width: var(--lecture);
}
.fo-validation h3 { margin-top: var(--esp-2); font-size: var(--t-md); }
.fo-validation p { margin-top: var(--esp-3); font-size: var(--t-sm); }
.fo-validation__note { color: var(--gris); }

/* ── FAQ dépliable ──────────────────────────────────────── */
.fo-faq { display: grid; gap: var(--esp-3); max-width: var(--lecture); }
.fo-faq__item {
  background: var(--fond); border: 1px solid var(--trait);
  border-radius: var(--rayon-sm); overflow: hidden;
}
.fo-faq__item summary {
  cursor: pointer; list-style: none;
  padding: var(--esp-4) var(--esp-5); padding-right: 3rem;
  font-weight: 700; color: var(--encre); position: relative;
}
.fo-faq__item summary::-webkit-details-marker { display: none; }
.fo-faq__item summary::after {
  content: ""; position: absolute; right: var(--esp-5); top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: rotate(45deg); transition: transform .2s;
}
.fo-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.fo-faq__item summary:hover { background: var(--fond-doux); }
.fo-faq__item p {
  padding: 0 var(--esp-5) var(--esp-5);
  color: var(--gris-fonce); font-size: var(--t-sm);
}

/* ── Appel final ────────────────────────────────────────── */
.fo-final { text-align: center; }
.fo-final p { margin-inline: auto; max-width: 52ch; color: #cdd4e2; }
.fo-final .banniere__actions { justify-content: center; align-items: center; }
.fo-final .lien-discret { color: #a8b1c4; }

/* ═══════════════════════════════════════════════════════════
   À PROPOS
   ═══════════════════════════════════════════════════════════ */

/* ── Bannière ───────────────────────────────────────────── */
/* Volontairement différente des pages de formation : pas de photo
   plein cadre assombrie, mais un texte et une image côte à côte.
   La page parle du centre, pas d'un produit. */
.ap-hero {
  background: var(--nuit);
  color: #cfd6e6;
  padding-block: var(--esp-7);
}
@media (min-width: 768px) { .ap-hero { padding-block: var(--esp-8); } }

.ap-hero__grille { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
  .ap-hero__grille { grid-template-columns: 1.05fr .95fr; gap: var(--esp-8); }
}
.ap-hero h1 { color: #fff; max-width: 18ch; }
.ap-hero__chapo {
  margin-top: var(--esp-4);
  max-width: 48ch; font-size: var(--t-md); color: #cfd6e6;
}
.ap-hero__photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-fort);
}

/* ── Bandeau de repères ─────────────────────────────────── */
.ap-chiffres { background: var(--nuit-2); color: #cdd4e2; }
.ap-chiffres__grille {
  display: grid; gap: var(--esp-5);
  grid-template-columns: repeat(2, 1fr);
  padding-block: var(--esp-6);
}
@media (min-width: 900px) { .ap-chiffres__grille { grid-template-columns: repeat(4, 1fr); } }
.ap-chiffres strong {
  display: block; font-size: var(--t-2xl); font-weight: 800; line-height: 1;
  color: var(--orange-clair); font-variant-numeric: tabular-nums;
}
.ap-chiffres span {
  display: block; margin-top: var(--esp-2);
  font-size: var(--t-xs); color: #a9b2c5; line-height: 1.35;
}

/* ── Récit et carte d'identité ──────────────────────────── */
.ap-recit { display: grid; gap: var(--esp-7); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .ap-recit { grid-template-columns: 1.35fr .65fr; gap: var(--esp-8); } }
.ap-recit .prose { margin-top: var(--esp-4); }

.ap-fiche {
  background: var(--fond-doux);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: var(--esp-5);
}
.ap-fiche h3 {
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--orange-fonce);
  padding-bottom: var(--esp-3); border-bottom: 1px solid var(--trait);
}
.ap-fiche dt {
  margin-top: var(--esp-4);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gris);
}
.ap-fiche dd { margin: var(--esp-1) 0 0; font-size: var(--t-sm); color: var(--encre); }
.ap-fiche dd span { color: var(--gris); }

/* ── Mission ────────────────────────────────────────────── */
.ap-mission__grille { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .ap-mission__grille { grid-template-columns: .9fr 1.1fr; gap: var(--esp-8); } }
.ap-mission__photo img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--rayon);
}
.ap-mission p { margin-top: var(--esp-4); max-width: 52ch; color: #c3cbdb; }

/* ── Agréments ──────────────────────────────────────────── */
.ap-agrement__cle {
  font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--orange-fonce);
}
.ap-agrement__cle + h3 { font-size: var(--t-md); }

/* ── Méthode ────────────────────────────────────────────── */
.ap-methode { display: grid; gap: var(--esp-5); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .ap-methode { grid-template-columns: repeat(2, 1fr); gap: var(--esp-6); } }
@media (min-width: 1024px) { .ap-methode { grid-template-columns: repeat(4, 1fr); } }
.ap-methode li { padding-top: var(--esp-4); border-top: 3px solid var(--orange); }
.ap-methode__num {
  display: block; font-size: var(--t-lg); font-weight: 800;
  color: var(--orange); font-variant-numeric: tabular-nums; line-height: 1;
}
.ap-methode h3 { margin-top: var(--esp-3); font-size: var(--t-base); }
.ap-methode p { margin-top: var(--esp-2); font-size: var(--t-sm); color: var(--gris); }

/* ── Flotte ─────────────────────────────────────────────── */
.ap-flotte__grille { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; }
@media (min-width: 900px) { .ap-flotte__grille { grid-template-columns: .9fr 1.1fr; gap: var(--esp-8); } }
.ap-flotte__texte { margin-top: var(--esp-4); max-width: 46ch; color: var(--gris); }
.ap-flotte__grille .bouton { margin-top: var(--esp-5); }

.ap-flotte {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--fond-doux); overflow: hidden;
}
.ap-flotte > div { padding: var(--esp-4) var(--esp-5); border-bottom: 1px solid var(--trait); }
.ap-flotte > div:last-child { border-bottom: 0; }
.ap-flotte dt { font-weight: 700; color: var(--encre); font-size: var(--t-sm); }
.ap-flotte dd { margin: var(--esp-1) 0 0; font-size: var(--t-sm); color: var(--gris); }

/* ── Le centre ──────────────────────────────────────────── */
.ap-centre__grille { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .ap-centre__grille { grid-template-columns: 1.1fr .9fr; gap: var(--esp-8); } }
.ap-centre__texte { margin-top: var(--esp-4); max-width: 52ch; }

.ap-acces {
  display: grid; gap: var(--esp-4);
  grid-template-columns: 1fr;
  margin-top: var(--esp-6);
  padding-top: var(--esp-5);
  border-top: 1px solid var(--trait);
}
@media (min-width: 560px) { .ap-acces { grid-template-columns: repeat(2, 1fr); } }
.ap-acces dt {
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
}
.ap-acces dd { margin: var(--esp-2) 0 0; font-size: var(--t-sm); color: var(--encre); }
.ap-acces a { text-decoration: none; }
.ap-acces a:hover { text-decoration: underline; }

.ap-centre__photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--rayon);
}
.ap-centre__photo figcaption,
.ap-galerie figcaption {
  margin-top: var(--esp-3);
  font-size: var(--t-xs); color: var(--gris); line-height: 1.45;
}

/* ── Équipe ─────────────────────────────────────────────── */
/* Le centre tient à l'anonymat de ses instructeurs : pas de portraits
   ni de biographies, mais la liste des titres et de leurs émetteurs.
   Une qualification sans organisme émetteur ne prouve rien. */
.ap-equipe { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .ap-equipe { grid-template-columns: 1fr 1fr; gap: var(--esp-8); } }
.ap-equipe__texte { max-width: 52ch; }
.ap-equipe__texte p + p { margin-top: var(--esp-4); }
.ap-equipe__note {
  margin-top: var(--esp-5);
  padding-left: var(--esp-4);
  border-left: 3px solid var(--orange);
  font-size: var(--t-sm); color: var(--gris);
}

.ap-qualifs {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--fond-doux); overflow: hidden;
}
.ap-qualifs li {
  padding: var(--esp-4) var(--esp-5);
  border-bottom: 1px solid var(--trait);
  font-size: var(--t-sm); color: var(--gris-fonce);
}
.ap-qualifs li:last-child { border-bottom: 0; }
.ap-qualifs span {
  display: block; font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--orange-fonce); margin-bottom: 3px;
}

/* ── Galerie ────────────────────────────────────────────── */
.ap-galerie {
  display: grid; gap: var(--esp-5);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.ap-galerie img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--rayon-sm);
  background: var(--trait);
}

/* ── Partenaires ────────────────────────────────────────── */
/* Grille sobre plutôt que le bandeau défilant de l'accueil : ici,
   la liste se lit et se vérifie, elle ne se regarde pas passer. */
.ap-partenaires {
  display: grid; gap: var(--esp-5);
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  align-items: center;
}
.ap-partenaires img {
  height: 46px; width: auto; margin-inline: auto; object-fit: contain;
  filter: grayscale(1); opacity: .6;
  transition: filter .3s, opacity .3s;
}
.ap-partenaires img:hover { filter: none; opacity: 1; }

.ap-partenaires__note {
  margin: var(--esp-6) auto 0;
  max-width: 60ch; text-align: center;
  font-size: var(--t-sm); color: var(--gris);
}
.ap-partenaires__note strong { color: var(--gris-fonce); font-weight: 600; }

/* ── Appel final ────────────────────────────────────────── */
.ap-final { text-align: center; }
.ap-final p { margin: var(--esp-3) auto 0; max-width: 52ch; color: #cdd4e2; }
.ap-final .banniere__actions { justify-content: center; align-items: center; }
.ap-final .lien-discret { color: #a8b1c4; }

/* ═══════════════════════════════════════════════════════════
   CATALOGUE DES FORMATIONS
   ═══════════════════════════════════════════════════════════ */

/* ── Bannière ───────────────────────────────────────────── */
.fm-hero {
  position: relative;
  display: grid; align-items: end;
  min-height: 24rem;
  padding-block: var(--esp-8) var(--esp-7);
  background: var(--nuit) center / cover no-repeat;
  color: #fff;
}
.fm-hero__voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,33,62,.55) 0%, rgba(22,33,62,.88) 60%, rgba(22,33,62,.96) 100%);
}
.fm-hero__inner { position: relative; z-index: 1; }
.fm-hero h1 { color: #fff; max-width: 20ch; margin-top: var(--esp-2); }
.fm-hero__chapo {
  margin-top: var(--esp-4);
  max-width: 54ch; font-size: var(--t-md); color: #d3d9e6;
}

/* ── Les trois temps du parcours ────────────────────────── */
.fm-parcours { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; }
@media (min-width: 900px) { .fm-parcours { grid-template-columns: repeat(3, 1fr); gap: var(--esp-7); } }
.fm-parcours li { position: relative; padding-top: var(--esp-5); border-top: 3px solid var(--orange); }
.fm-parcours__num {
  position: absolute; top: calc(-1 * var(--esp-5)); left: 0;
  display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem;
  background: var(--orange); color: #fff;
  border-radius: 50%;
  font-size: var(--t-sm); font-weight: 800;
}
.fm-parcours h3 { font-size: var(--t-md); }
.fm-parcours p { margin-top: var(--esp-3); font-size: var(--t-sm); color: var(--gris); }

/* Petit lien fléché, pour renvoyer sans peser comme un bouton. */
.lien-fleche {
  display: inline-block; margin-top: var(--esp-4);
  font-size: var(--t-sm); font-weight: 600; text-decoration: none;
}
.lien-fleche::after { content: " \2192"; transition: margin-left .2s; }
.lien-fleche:hover::after { margin-left: .25rem; }

/* ── La formation d'entrée ──────────────────────────────── */
.fm-entree__grille { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .fm-entree__grille { grid-template-columns: .95fr 1.05fr; gap: var(--esp-8); } }
.fm-entree__photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--rayon);
}
.fm-entree__resume { margin-top: var(--esp-4); max-width: 48ch; color: #c3cbdb; }

.fm-entree__reperes {
  display: grid; gap: var(--esp-4);
  margin-top: var(--esp-6);
  padding-top: var(--esp-5);
  border-top: 1px solid rgba(255,255,255,.14);
}
.fm-entree__reperes strong { display: block; color: #fff; font-size: var(--t-sm); }
.fm-entree__reperes span {
  display: block; margin-top: 2px;
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: #97a1b7;
}

/* ── Familles de spécialisations ────────────────────────── */
.fm-famille + .fm-famille { margin-top: var(--esp-8); }
.fm-famille__tete {
  padding-bottom: var(--esp-4); margin-bottom: var(--esp-5);
  border-bottom: 2px solid var(--orange);
}
.fm-famille__tete h3 { font-size: var(--t-xl); }
.fm-famille__tete p { margin-top: var(--esp-2); color: var(--gris); max-width: 60ch; }

.fm-cle {
  font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--orange-fonce);
}

/* ── Tableau comparatif ─────────────────────────────────── */
/* Le tableau garde sa largeur utile et défile horizontalement sur
   téléphone : le comprimer rendrait chaque colonne illisible. */
.fm-tableau {
  overflow-x: auto;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--fond);
}
.fm-tableau table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: var(--t-sm); }
.fm-tableau th, .fm-tableau td {
  padding: var(--esp-4) var(--esp-5);
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--trait);
}
.fm-tableau thead th {
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris); background: var(--fond-doux);
  border-bottom: 2px solid var(--orange);
  white-space: nowrap;
}
.fm-tableau tbody th { font-weight: 700; color: var(--encre); }
.fm-tableau tbody th a { text-decoration: none; }
.fm-tableau tbody th a:hover { text-decoration: underline; }
.fm-tableau tbody td { color: var(--gris); }
.fm-tableau tbody tr:last-child th,
.fm-tableau tbody tr:last-child td { border-bottom: 0; }
.fm-tableau__phare { background: var(--orange-clair); }
.fm-tableau__phare td { color: var(--gris-fonce); }

/* ── Financement ────────────────────────────────────────── */
.fm-fdfp { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .fm-fdfp { grid-template-columns: 1.15fr .85fr; gap: var(--esp-8); } }
.fm-fdfp p { margin-top: var(--esp-4); max-width: 54ch; }
.fm-fdfp__points {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--fond); overflow: hidden;
}
.fm-fdfp__points li {
  padding: var(--esp-4) var(--esp-5);
  border-bottom: 1px solid var(--trait);
  font-size: var(--t-sm); color: var(--gris);
}
.fm-fdfp__points li:last-child { border-bottom: 0; }
.fm-fdfp__points strong { display: block; color: var(--encre); }

/* ── Appel final ────────────────────────────────────────── */
.fm-final { text-align: center; }
.fm-final p { margin: var(--esp-3) auto 0; max-width: 54ch; color: #cdd4e2; }
.fm-final .banniere__actions { justify-content: center; align-items: center; }
.fm-final .lien-discret { color: #a8b1c4; }

/* ═══════════════════════════════════════════════════════════
   VÉRIFICATION D'ATTESTATION
   Page consultée le plus souvent depuis un téléphone, QR code en
   main, parfois dans le navigateur réduit d'une application photo.
   D'où la colonne unique, les gros caractères et l'absence totale
   de dépendance au JavaScript.
   ═══════════════════════════════════════════════════════════ */

.va-tete {
  background: var(--nuit);
  color: #cfd6e6;
  padding-block: var(--esp-7);
}
.va-tete h1 { color: #fff; max-width: 20ch; }
.va-tete__chapo {
  margin-top: var(--esp-4);
  max-width: 52ch; font-size: var(--t-md); color: #cfd6e6;
}

.va-colonne { max-width: 46rem; }

/* ── Formulaire ─────────────────────────────────────────── */
.va-form {
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: var(--esp-5);
  box-shadow: var(--ombre);
}
.va-form label {
  display: block; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
  margin-bottom: var(--esp-2);
}
.va-form__ligne { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.va-form__ligne input {
  flex: 1 1 14rem; min-width: 0;
  padding: .9rem 1rem;
  font: inherit; font-size: var(--t-md);
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
  border: 2px solid var(--trait); border-radius: var(--rayon-sm);
  background: var(--fond); color: var(--encre);
}
.va-form__ligne input:focus { border-color: var(--orange); outline: none; }
.va-form__note { margin-top: var(--esp-3); font-size: var(--t-xs); color: var(--gris-clair); }

/* ── Résultat ───────────────────────────────────────────── */
/* La couleur ne porte jamais seule le sens : le bandeau l'écrit. */
.va-resultat {
  margin-top: var(--esp-5);
  border: 1px solid var(--trait);
  border-left-width: 5px;
  border-radius: var(--rayon);
  background: var(--fond);
  overflow: hidden;
}
.va-resultat__bandeau {
  padding: var(--esp-4) var(--esp-5);
  font-size: var(--t-md); font-weight: 700;
  line-height: 1.3;
}
.va-resultat__texte {
  padding: 0 var(--esp-5) var(--esp-4);
  font-size: var(--t-sm); color: var(--gris-fonce);
}
.va-resultat__texte + .va-resultat__texte { padding-top: 0; }
.va-resultat__horodatage {
  padding: var(--esp-3) var(--esp-5);
  border-top: 1px solid var(--trait);
  font-size: var(--t-xs); color: var(--gris);
}

.va-statut--valide  { border-left-color: var(--valide); }
.va-statut--valide  .va-resultat__bandeau { background: var(--valide-fond); color: var(--valide); }
.va-statut--expire  { border-left-color: var(--vigilance); }
.va-statut--expire  .va-resultat__bandeau { background: var(--vigilance-fond); color: var(--vigilance); }
.va-statut--absent  { border-left-color: var(--alerte); }
.va-statut--absent  .va-resultat__bandeau { background: var(--alerte-fond); color: var(--alerte); }
.va-statut--attente { border-left-color: var(--gris); }
.va-statut--attente .va-resultat__bandeau { background: var(--fond-doux); color: var(--gris-fonce); }

/* ── Fiche du titulaire ─────────────────────────────────── */
.va-fiche { border-top: 1px solid var(--trait); }
.va-fiche > div {
  display: grid; gap: var(--esp-1);
  padding: var(--esp-3) var(--esp-5);
  border-bottom: 1px solid var(--trait);
}
@media (min-width: 560px) {
  .va-fiche > div { grid-template-columns: 11rem 1fr; gap: var(--esp-4); align-items: baseline; }
}
.va-fiche dt {
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gris);
}
.va-fiche dd { margin: 0; font-size: var(--t-md); color: var(--encre); }

/* ═══════════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════════ */

.ct-tete { background: var(--nuit); color: #cfd6e6; padding-block: var(--esp-7); }
.ct-tete h1 { color: #fff; max-width: 18ch; }
.ct-tete__chapo {
  margin-top: var(--esp-4);
  max-width: 54ch; font-size: var(--t-md); color: #cfd6e6;
}

.ct-grille { display: grid; gap: var(--esp-7); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .ct-grille { grid-template-columns: 1.4fr .6fr; gap: var(--esp-8); } }

/* ── Formulaire ─────────────────────────────────────────── */
.form { margin-top: var(--esp-5); }
.champ + .champ,
.champ-duo + .champ,
.champ + .champ-duo { margin-top: var(--esp-5); }

.champ-duo { display: grid; gap: var(--esp-5); grid-template-columns: 1fr; }
@media (min-width: 560px) { .champ-duo { grid-template-columns: repeat(2, 1fr); } }

.champ label {
  display: block; margin-bottom: var(--esp-2);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
}
.champ label span { color: var(--orange); }

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: .8rem 1rem;
  font: inherit; font-size: var(--t-md);
  color: var(--encre); background: var(--fond);
  border: 2px solid var(--trait); border-radius: var(--rayon-sm);
}
.champ textarea { resize: vertical; min-height: 9rem; line-height: 1.6; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus { border-color: var(--orange); outline: none; }
.champ [aria-invalid="true"] { border-color: var(--alerte); }

.champ__erreur { margin-top: var(--esp-2); font-size: var(--t-sm); color: var(--alerte); font-weight: 600; }

/* ── Groupes de choix ───────────────────────────────────── */
/* Boutons radio et cases à cocher : la zone cliquable couvre tout
   le libellé, ce qui compte au doigt sur un téléphone. */
.champ-groupe { border: 0; padding: 0; margin-inline: 0; }
.champ-groupe legend {
  padding: 0; margin-bottom: var(--esp-3);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
}
.champ-options { display: grid; gap: var(--esp-2); }
@media (min-width: 560px) { .champ-options { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }

.option {
  display: flex; align-items: flex-start; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border: 2px solid var(--trait); border-radius: var(--rayon-sm);
  background: var(--fond);
  font-size: var(--t-sm); color: var(--gris-fonce);
  cursor: pointer;
  transition: border-color .18s, background-color .18s;
}
.option:hover { border-color: var(--gris-clair); }
.option input { flex: 0 0 auto; margin-top: .15em; accent-color: var(--orange); }
.option:has(input:checked) { border-color: var(--orange); background: var(--orange-clair); }
.option:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 2px; }
.option--seule { align-items: flex-start; }

.form__separateur {
  margin-top: var(--esp-6);
  border: 0; border-top: 1px solid var(--trait);
}
.form__separateur + .champ { margin-top: var(--esp-5); }

.form button[type="submit"] { margin-top: var(--esp-6); }
.form__note { margin-top: var(--esp-4); font-size: var(--t-xs); color: var(--gris); max-width: 52ch; }

/* Piège à robots : hors écran plutôt que display:none, que certains
   remplisseurs automatiques savent détecter. */
.form-piege {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.form-alerte {
  margin-top: var(--esp-5);
  border-left: 4px solid var(--alerte);
  background: var(--alerte-fond);
  border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
  padding: var(--esp-4) var(--esp-5);
  font-size: var(--t-sm); color: var(--gris-fonce);
}

.form-recu {
  border-left: 4px solid var(--valide);
  background: var(--valide-fond);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: var(--esp-6);
}
.form-recu__titre { font-size: var(--t-xl); font-weight: 700; color: var(--valide); }
.form-recu p + p { margin-top: var(--esp-4); }

/* ── Coordonnées ────────────────────────────────────────── */
.ct-coordonnees {
  background: var(--fond-doux);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: var(--esp-5);
}
.ct-coordonnees h2 {
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--orange-fonce);
  padding-bottom: var(--esp-3); border-bottom: 1px solid var(--trait);
}
.ct-coordonnees dt {
  margin-top: var(--esp-4);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gris);
}
.ct-coordonnees dd { margin: var(--esp-1) 0 0; font-size: var(--t-sm); color: var(--encre); }
.ct-coordonnees a { text-decoration: none; }
.ct-coordonnees a:hover { text-decoration: underline; }

.ct-coordonnees__cle {
  margin-top: var(--esp-5);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gris);
}
.ct-reseaux { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-2); font-size: var(--t-sm); }
.ct-coordonnees__note {
  margin-top: var(--esp-5); padding-top: var(--esp-4);
  border-top: 1px solid var(--trait);
  font-size: var(--t-xs); color: var(--gris);
}

/* ── Inscription : colonne latérale ─────────────────────── */
.ins-etapes { counter-reset: etape; margin-top: var(--esp-4); }
.ins-etapes li {
  counter-increment: etape;
  position: relative; padding-left: 2rem;
  font-size: var(--t-sm); color: var(--gris-fonce);
}
.ins-etapes li + li { margin-top: var(--esp-4); }
.ins-etapes li::before {
  content: counter(etape);
  position: absolute; left: 0; top: .1em;
  display: grid; place-items: center;
  width: 1.4rem; height: 1.4rem;
  background: var(--orange); color: #fff;
  border-radius: 50%;
  font-size: var(--t-xs); font-weight: 800;
}
.ins-etapes strong { color: var(--encre); }

.ins-choisie, .ins-joindre { margin-top: var(--esp-2); font-size: var(--t-sm); }
.ins-choisie span, .ins-joindre span { color: var(--gris); }

/* ═══════════════════════════════════════════════════════════
   RÉGLEMENTATION
   ═══════════════════════════════════════════════════════════ */

.rg-tete { background: var(--nuit); color: #cfd6e6; padding-block: var(--esp-7); }
.rg-tete h1 { color: #fff; max-width: 22ch; }
.rg-tete__chapo {
  margin-top: var(--esp-4);
  max-width: 60ch; font-size: var(--t-md); color: #cfd6e6;
}
.rg-tete__revu { margin-top: var(--esp-4); font-size: var(--t-xs); color: #97a1b7; }

.rg-cle {
  font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--orange-fonce);
}
.rg-cle + h2 { font-size: var(--t-lg); }
.rg-cle + h3 { font-size: var(--t-md); }

.rg-note {
  margin-top: var(--esp-6);
  max-width: var(--lecture);
  font-size: var(--t-sm); color: var(--gris);
}

/* ── Chronologie du texte ───────────────────────────────── */
/* Trois dates que tout le monde confond : la mise en colonne les
   sépare visuellement, et la dernière est marquée comme à venir. */
.rg-chrono { display: grid; gap: var(--esp-5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .rg-chrono { grid-template-columns: repeat(3, 1fr); gap: var(--esp-6); } }
.rg-chrono li {
  padding-top: var(--esp-4);
  border-top: 3px solid var(--orange);
  background: var(--fond);
}
/* L'échéance à venir se distingue par un trait discontinu : elle n'a
   pas le même poids qu'une date déjà passée. */
.rg-chrono li.rg-chrono--futur { border-top-style: dashed; }
.rg-chrono__date {
  display: block;
  font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--orange-fonce);
}
.rg-chrono h3 { margin-top: var(--esp-2); font-size: var(--t-base); }
.rg-chrono p { margin-top: var(--esp-2); font-size: var(--t-sm); color: var(--gris); }

.rg-nouveautes {
  margin-top: var(--esp-7);
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: var(--esp-5);
}
@media (min-width: 768px) { .rg-nouveautes { padding: var(--esp-6); } }
.rg-nouveautes h3 { font-size: var(--t-md); }
.rg-nouveautes ul { margin-top: var(--esp-4); max-width: var(--lecture); }
.rg-nouveautes li {
  position: relative; padding-left: 1.6rem; margin-top: var(--esp-3);
  font-size: var(--t-sm); color: var(--gris-fonce);
}
.rg-nouveautes li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; background: var(--orange); border-radius: 1px;
}
.rg-nouveautes__source {
  margin-top: var(--esp-5); padding-top: var(--esp-4);
  border-top: 1px solid var(--trait);
  font-size: var(--t-xs); color: var(--gris);
}

/* ── Catégories et classes ──────────────────────────────── */
.rg-duo { display: grid; gap: var(--esp-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .rg-duo { grid-template-columns: repeat(2, 1fr); gap: var(--esp-6); } }
.rg-bloc {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--fond-doux);
  padding: var(--esp-5);
}
.rg-bloc h3 { font-size: var(--t-md); }
.rg-bloc__intro { margin-top: var(--esp-2); font-size: var(--t-sm); color: var(--gris); }
.rg-bloc dl { margin-top: var(--esp-4); }
.rg-bloc dl > div { padding-block: var(--esp-3); border-top: 1px solid var(--trait); }
.rg-bloc dt { font-weight: 700; color: var(--orange-fonce); font-size: var(--t-sm); }
.rg-bloc dd { margin: var(--esp-1) 0 0; font-size: var(--t-sm); color: var(--gris-fonce); }

/* ── Renvoi vers les textes ─────────────────────────────── */
.rg-textes__grille { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .rg-textes__grille { grid-template-columns: 1.15fr .85fr; gap: var(--esp-8); } }
.rg-textes p { margin-top: var(--esp-4); max-width: 54ch; color: #c3cbdb; }
.rg-groupes {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--rayon);
  background: rgba(255,255,255,.045);
  overflow: hidden;
}
.rg-groupes li {
  display: flex; align-items: baseline; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-5);
  border-bottom: 1px solid rgba(255,255,255,.10);
  font-size: var(--t-sm); color: #c3cbdb;
}
.rg-groupes li:last-child { border-bottom: 0; }
.rg-groupes span {
  flex: 0 0 1.6rem;
  font-weight: 800; color: var(--orange-clair);
  font-variant-numeric: tabular-nums;
}

/* ── Bandeau d'applicabilité ────────────────────────────── */
/* Présent sur les cinq pages thématiques : elles citent une édition
   qui n'est pas encore exigible, et le lecteur doit le savoir avant
   de lire une seule règle. */
.rg-avis {
  background: var(--vigilance-fond);
  border-bottom: 1px solid rgba(138, 90, 0, .25);
}
.rg-avis p {
  padding-block: var(--esp-4);
  font-size: var(--t-sm); color: var(--vigilance);
  max-width: 80ch;
}
.rg-avis strong { color: var(--vigilance); }
.rg-avis a { color: var(--vigilance); }

/* ── Sections d'une page thématique ─────────────────────── */
.rg-section { margin-top: var(--esp-8); max-width: var(--lecture); }
.rg-section h2 { font-size: var(--t-xl); }
.rg-section__texte { margin-top: var(--esp-4); }
.rg-section .fo-liste { margin-top: var(--esp-4); }
.rg-section .reglement { margin-top: var(--esp-5); }

/* ── Appel final ────────────────────────────────────────── */
.rg-final { text-align: center; background: var(--fond-doux); }
.rg-final p { margin: var(--esp-3) auto 0; max-width: 56ch; color: var(--gris); }
.rg-final .banniere__actions { justify-content: center; }
.rg-final--nuit { background: var(--nuit); }
.rg-final--nuit p { color: #cdd4e2; }

/* ═══════════════════════════════════════════════════════════
   SESSIONS
   ═══════════════════════════════════════════════════════════ */

.se-tete { background: var(--nuit); color: #cfd6e6; padding-block: var(--esp-7); }
.se-tete h1 { color: #fff; max-width: 18ch; }
.se-tete__chapo {
  margin-top: var(--esp-4);
  max-width: 54ch; font-size: var(--t-md); color: #cfd6e6;
}

.se-liste { display: grid; gap: var(--esp-6); }

/* L'affiche est le document que le centre diffuse déjà sur les réseaux :
   la reprendre telle quelle évite au visiteur de douter qu'il s'agit
   bien de la même session. */
.se-carte {
  display: grid; gap: 0; grid-template-columns: 1fr;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
}
@media (min-width: 800px) { .se-carte { grid-template-columns: 20rem 1fr; } }
.se-carte__affiche { background: var(--fond-doux); }
.se-carte__affiche img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
@media (min-width: 800px) { .se-carte__affiche img { aspect-ratio: auto; } }

.se-carte__corps { padding: var(--esp-5); }
@media (min-width: 768px) { .se-carte__corps { padding: var(--esp-6); } }

.se-carte__tete {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3);
  margin-bottom: var(--esp-2);
}
.se-numero {
  font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--orange-fonce);
}
.se-etat {
  padding: .2rem .6rem;
  background: var(--valide-fond); color: var(--valide);
  border-radius: 999px;
  font-size: var(--t-xs); font-weight: 700;
}
.se-etat--encours { background: var(--vigilance-fond); color: var(--vigilance); }

.se-carte h3 { font-size: var(--t-xl); }

.se-details {
  display: grid; gap: var(--esp-3);
  grid-template-columns: 1fr;
  margin-top: var(--esp-5);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--trait);
}
@media (min-width: 560px) { .se-details { grid-template-columns: repeat(2, 1fr); } }
.se-details dt {
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gris);
}
.se-details dd { margin: 2px 0 0; font-size: var(--t-sm); color: var(--encre); }

.se-carte__formation { margin-top: var(--esp-4); font-size: var(--t-sm); color: var(--gris); }
.se-carte .banniere__actions { margin-top: var(--esp-5); align-items: center; }

/* ── Archives ───────────────────────────────────────────── */
.se-passees {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--fond-doux); overflow: hidden;
  max-width: var(--lecture);
}
.se-passees li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-2) var(--esp-4);
  padding: var(--esp-3) var(--esp-5);
  border-bottom: 1px solid var(--trait);
  font-size: var(--t-sm); color: var(--gris-fonce);
}
.se-passees li:last-child { border-bottom: 0; }
.se-passees span {
  flex: 0 0 6rem;
  font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gris-clair);
}
.se-passees em { font-style: normal; color: var(--gris); }

/* ── Appel final ────────────────────────────────────────── */
.se-final { text-align: center; }
.se-final p { margin: var(--esp-3) auto 0; max-width: 54ch; color: #cdd4e2; }
.se-final .banniere__actions { justify-content: center; }

/* ═══════════════════════════════════════════════════════════
   ACTUALITÉS
   ═══════════════════════════════════════════════════════════ */

.ac-tete { background: var(--nuit); color: #cfd6e6; padding-block: var(--esp-7); }
.ac-tete h1 { color: #fff; max-width: 20ch; }
.ac-tete__chapo {
  margin-top: var(--esp-4);
  max-width: 58ch; font-size: var(--t-md); color: #cfd6e6;
}

.ac-article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4);
  font-size: var(--t-xs); color: var(--gris);
}
.ac-article__cat {
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange-fonce);
}

/* ── Article en une ─────────────────────────────────────── */
.ac-une {
  border-left: 4px solid var(--orange);
  background: var(--fond-doux);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: var(--esp-5);
  margin-bottom: var(--esp-6);
}
@media (min-width: 768px) { .ac-une { padding: var(--esp-6) var(--esp-7); } }
.ac-une h2 { margin-top: var(--esp-3); font-size: var(--t-2xl); max-width: 26ch; }
.ac-une h2 a { color: inherit; text-decoration: none; }
.ac-une h2 a:hover { color: var(--orange-fonce); }
.ac-une__resume { margin-top: var(--esp-4); max-width: 62ch; color: var(--gris-fonce); }
.ac-une .bouton { margin-top: var(--esp-5); }

.ac-suite__grille .carte h3 a { color: inherit; text-decoration: none; }
.ac-suite__grille .carte h3 a:hover { color: var(--orange-fonce); }

/* ── Page d'article ─────────────────────────────────────── */
.ac-article__tete {
  background: var(--nuit); color: #cfd6e6;
  padding-block: var(--esp-7);
}
.ac-article__tete h1 { color: #fff; margin-top: var(--esp-3); max-width: 24ch; }
.ac-article__tete .ac-article__meta { color: #97a1b7; }
.ac-article__tete .ac-article__cat { color: var(--orange-clair); }

/* Colonne de lecture : un article long se lit à cette largeur, pas
   sur toute la page. */
.ac-article { max-width: var(--lecture); }
.ac-article h2 { margin-top: var(--esp-8); font-size: var(--t-xl); }
.ac-article h3 { margin-top: var(--esp-6); font-size: var(--t-md); }
.ac-article p { margin-top: var(--esp-4); }
.ac-article .fo-liste { margin-top: var(--esp-4); }

.ac-retenir {
  margin-top: var(--esp-6);
  border: 1px solid var(--orange);
  border-radius: var(--rayon);
  background: var(--orange-clair);
  padding: var(--esp-5);
}
.ac-retenir h2 {
  margin-top: 0;
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--orange-fonce);
}
.ac-retenir ol { margin-top: var(--esp-3); counter-reset: point; }
.ac-retenir li {
  counter-increment: point;
  position: relative; padding-left: 1.8rem;
  font-size: var(--t-sm); color: var(--gris-fonce);
}
.ac-retenir li + li { margin-top: var(--esp-3); }
.ac-retenir li::before {
  content: counter(point) ".";
  position: absolute; left: 0;
  font-weight: 800; color: var(--orange-fonce);
}

.ac-defs { margin-top: var(--esp-5); border-top: 1px solid var(--trait); }
.ac-defs > div {
  display: grid; gap: var(--esp-1);
  padding-block: var(--esp-4);
  border-bottom: 1px solid var(--trait);
}
@media (min-width: 640px) {
  .ac-defs > div { grid-template-columns: 9rem 1fr; gap: var(--esp-5); align-items: start; }
}
.ac-defs dt { font-weight: 700; color: var(--encre); font-size: var(--t-sm); }
.ac-defs dd { margin: 0; font-size: var(--t-sm); color: var(--gris); }

.ac-sources { margin-top: var(--esp-8); }
.ac-sources p { margin-top: 0; font-size: var(--t-sm); }
.ac-suite { margin-top: var(--esp-6); }

/* ── Questions fréquentes et pages légales ──────────────── */
.faq-bloc + .faq-bloc { margin-top: var(--esp-7); }
.faq-bloc__tete {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--esp-3);
  padding-bottom: var(--esp-3); margin-bottom: var(--esp-4);
  border-bottom: 2px solid var(--orange);
  max-width: var(--lecture);
}
.faq-bloc__tete h3 { font-size: var(--t-lg); }
.faq-bloc__tete h3 a { color: inherit; text-decoration: none; }
.faq-bloc__tete h3 a:hover { color: var(--orange-fonce); }
.faq-bloc__tete span { font-size: var(--t-sm); font-weight: 700; color: var(--gris); }

.mentions-maj {
  margin-top: var(--esp-7); padding-top: var(--esp-4);
  border-top: 1px solid var(--trait);
  font-size: var(--t-xs); color: var(--gris);
}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
   Révélation à l'entrée dans le champ de vision. Le contenu
   est visible par défaut : si le script ne s'exécute pas,
   rien ne disparaît. C'est .js-anime, posée par le script,
   qui masque avant révélation.
   ═══════════════════════════════════════════════════════════ */
.js-anime [data-anime] {
  opacity: 0;
  transform: translateY(18px);
}
.js-anime [data-anime].est-visible {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease-out var(--retard, 0ms),
              transform .55s cubic-bezier(.22, .8, .3, 1) var(--retard, 0ms);
}

/* ── Mouvement réduit ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}