/* ═══════════════════════════════════════════════════════════
   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;
}
/* Chaque vue occupe toute la bannière et attend son tour hors cadre, à
   droite. Elle entre, tient l'écran, puis sort par la gauche. Le décalage
   d'un cran par vue suffit à enchaîner : les images-clés, dont les
   pourcentages dépendent du nombre de vues, sont posées par la page. */
/* La scène tient les vues et masque ce qui déborde. Elle se place au
   fond de la pile par un z-index positif, jamais négatif : un enfant en
   z-index négatif promu en couche par will-change peut disparaître
   derrière le fond de son parent, selon le navigateur. */
.ac-hero__scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

/* Le nom de l'animation lui est propre : le bandeau des partenaires en
   utilise une autre, et deux @keyframes de même nom s'écrasent. */
.ac-hero__vue {
  position: absolute; inset: 0;
  background: center / cover no-repeat;
  transform: translateX(100%);
  animation: ac-hero-glisse calc(var(--diapos) * var(--duree)) ease-in-out infinite;
  animation-delay: calc(var(--i) * var(--duree) - var(--transition));
  will-change: transform;
}
/* Filet : animations coupées, la première vue reste en place. */
.ac-hero__vue:first-of-type { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .ac-hero__vue { animation: none; transform: translateX(100%); }
  .ac-hero__vue:first-of-type { transform: translateX(0); }
}

/* Chaque vue porte le nom de la formation qu'elle montre. L'étiquette
   glisse avec sa photo : c'est ce qui rend le défilement lisible, même
   pour qui n'a pas vu passer la vue précédente. */
.ac-hero__etiquette {
  position: absolute; bottom: var(--esp-6);
  /* Alignée sur la marge du conteneur, comme le reste de la page. */
  right: max(var(--esp-4), calc(50% - var(--largeur) / 2 + var(--esp-4)));
  max-width: min(20rem, 62vw);
  padding: .5rem 1rem;
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
  background: rgba(8,12,26,.62);
  backdrop-filter: blur(6px);
  font-size: var(--t-xs); font-weight: 600; line-height: 1.35;
  color: #fff; text-align: right;
}
.ac-hero__etiquette em {
  display: block; margin-bottom: 2px;
  font-style: normal; font-weight: 700;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange-clair);
}
/* Sur telephone, l'étiquette passe à gauche, au-dessus des repères de
   défilement : c'est elle qui dit quelle formation on regarde, elle ne
   peut pas disparaître. La flèche du bas lui cède la place. */
@media (max-width: 767px) {
  .ac-hero__etiquette {
    right: auto; left: var(--esp-4); bottom: calc(var(--esp-5) + 16px);
    max-width: calc(100% - 2 * var(--esp-4));
    padding: .3rem .7rem;
    text-align: left;
    font-size: .74rem;
  }
  .ac-hero__etiquette em { display: none; }
  .ac-hero__descendre { display: none; }
  /* De quoi loger l'étiquette et les repères sous les chiffres. */
  .ac-hero { padding-bottom: 5rem; }
}

/* Le voile n'est plus là pour cacher la photo mais pour rendre le texte
   lisible par-dessus. Il se concentre donc là où les mots se posent, en
   haut à gauche, et s'efface partout ailleurs : sur plus de la moitié de
   la bannière, la photo se voit telle qu'elle est. */
.ac-hero__voile {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(118% 96% at 2% 44%,
      rgba(8,12,26,.74) 0%, rgba(8,12,26,.52) 26%,
      rgba(8,12,26,.20) 52%, rgba(8,12,26,0) 74%),
    linear-gradient(180deg,
      rgba(8,12,26,.30) 0%, rgba(8,12,26,0) 34%, rgba(8,12,26,.50) 100%);
}
/* Sur téléphone, le texte occupe toute la largeur : le voile redevient
   uniforme, sans quoi les mots passent sur des zones claires. */
@media (max-width: 767px) {
  .ac-hero__voile {
    background: linear-gradient(180deg,
      rgba(8,12,26,.66) 0%, rgba(8,12,26,.56) 40%, rgba(8,12,26,.74) 100%);
  }
}

/* Repères de défilement : autant de traits que de vues, celui de la vue
   à l'écran s'allume. Ils disent qu'il y a une suite, et où l'on en est. */
/* Posés à gauche, sur la marge du conteneur : le centre du bas est déjà
   pris par la flèche qui invite à descendre. */
.ac-hero__puces {
  position: absolute; z-index: 2;
  left: max(var(--esp-4), calc(50% - var(--largeur) / 2 + var(--esp-4)));
  bottom: var(--esp-5);
  display: flex; gap: 6px;
}
.ac-hero__puces span {
  display: block; width: 26px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.35);
  animation: ac-hero-puce calc(var(--diapos) * var(--duree)) linear infinite;
  animation-delay: calc(var(--i) * var(--duree) - var(--transition));
}
@media (prefers-reduced-motion: reduce) {
  .ac-hero__puces span { animation: none; }
  .ac-hero__puces span:first-child { background: var(--orange); }
}
/* Le texte croise des zones claires de la photo : une ombre discrète le
   tient lisible sans avoir à noircir toute la bannière. */
.ac-hero__inner { position: relative; z-index: 2; text-shadow: 0 1px 14px rgba(6, 10, 22, .55); }
.ac-hero__descendre { z-index: 2; }
.ac-hero__inner .bouton { text-shadow: none; }

.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 ─────────────────────────────────────── */
/* Le centre défile derrière le texte, sur le même principe que la flotte
   de la page à propos : la piste porte deux fois la série et se décale de
   la moitié de sa largeur, ce qui reboucle sans saut visible. */
.ac-preuve { position: relative; overflow: hidden; }
.ac-preuve__defile {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center;
}
.ac-preuve__piste {
  display: flex; align-items: center;
  width: max-content;
  animation: ac-preuve-glisse 80s linear infinite;
}
.ac-preuve__piste img {
  height: 24rem; width: 36rem; max-width: none;
  object-fit: cover;
  /* Décor, pas sujet : les photos sont atténuées pour que les mots
     posés par-dessus restent les premiers lus. */
  filter: saturate(.78) brightness(.95);
}
@keyframes ac-preuve-glisse { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ac-preuve__piste { animation: none; } }

.ac-preuve__voile {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(22,33,62,.93) 0%, rgba(22,33,62,.72) 44%, rgba(22,33,62,.42) 100%),
    linear-gradient(180deg, rgba(22,33,62,.45) 0%, rgba(22,33,62,.22) 45%, rgba(22,33,62,.50) 100%);
}
.ac-preuve__grille { position: relative; z-index: 2; }

.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 ───────────────────────────────────────── */
/* La photo coiffe la section : le recadrage est très panoramique, ce
   qui en fait un bandeau. Sur téléphone il deviendrait une bande de
   120 px, illisible : on y resserre le cadrage sur le téléphone. */
/* La photo accompagne le texte par la gauche. Elle reste petite : c'est
   une illustration du geste, pas le sujet de la section. */
.ac-verif__photo { max-width: min(100%, 22rem); }
.ac-verif__photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--rayon);
}

.ac-verif { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) and (max-width: 1099px) {
  .ac-verif { grid-template-columns: 1fr 1fr; gap: var(--esp-7); }
  .ac-verif__photo { grid-row: span 2; }
}
@media (min-width: 1100px) {
  .ac-verif {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--esp-7);
  }
}
.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); }

/* ── Carnet de vol ──────────────────────────────────────── */
/* La photo montre l'application en situation, pas une interface hors
   sol : c'est elle qui rend le bloc crédible. */
.ac-carnet__grille {
  display: grid; gap: var(--esp-7); grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .ac-carnet__grille { grid-template-columns: 1.15fr .85fr; gap: var(--esp-8); }
}
@media (min-width: 1200px) {
  .ac-carnet__grille { grid-template-columns: 1.05fr .95fr; }
}
.ac-carnet__texte { margin-top: var(--esp-4); max-width: 52ch; color: #c3cbdb; }

.ac-carnet__points { margin-top: var(--esp-6); }
.ac-carnet__points li {
  position: relative; padding-left: 1.6rem;
  font-size: var(--t-sm); color: #a9b2c5;
}
.ac-carnet__points li + li { margin-top: var(--esp-4); }
.ac-carnet__points li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; background: var(--orange); border-radius: 1px;
}
.ac-carnet__points strong { display: block; color: #fff; font-weight: 700; }

.ac-carnet__photo { max-width: min(100%, 24rem); margin-left: auto; }
.ac-carnet__photo img {
  width: 100%; height: auto;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-fort);
}
.ac-carnet__photo figcaption {
  margin-top: var(--esp-3);
  font-size: var(--t-xs); color: #97a1b7; line-height: 1.45;
}

/* ── 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-defile-piste 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-defile-piste { 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,.26) 0%, rgba(22,33,62,.56) 46%, rgba(22,33,62,.90) 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); }

/* ── Introduction d'une formation, en deux colonnes ─────── */
/* Le texte seul s'arrêtait à 68 caractères et laissait la moitié droite
   vide sur écran large. L'illustration occupe cette place. */
.fo-intro { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .fo-intro { grid-template-columns: 1.1fr .9fr; gap: var(--esp-8); } }
.fo-intro .prose { max-width: none; }
.fo-intro__visuel img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--rayon);
}

/* ── Un texte, une photo à côté ──────────────────────────── */
/* Grille réutilisable : le texte garde sa colonne, la photo occupe la
   place restée vide à droite. Jamais une image en pleine largeur. */
.cote-duo { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
  .cote-duo { grid-template-columns: minmax(0, 1fr) minmax(0, .68fr); gap: var(--esp-8); }
}
.cote-duo .section__intro { margin-bottom: 0; }
.cote-photo { max-width: min(100%, 26rem); margin-inline: auto; }
.cote-photo--pleine { max-width: none; margin-bottom: var(--esp-5); }
.cote-photo img {
  display: block; width: 100%; height: auto;
  border-radius: var(--rayon);
}

/* ── Bandeaux photographiques ────────────────────────────── */
/* Même principe partout : la photo derrière le titre, un voile qui
   s'appuie à gauche, là où le texte se pose, et s'allège vers la droite
   pour qu'on voie enfin ce qui est photographié. */
.se-tete--photo,
.va-tete--photo,
.ct-tete--inscription {
  padding-block: var(--esp-8);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-blend-mode: normal;
}
.se-tete--photo {
  background-image:
    linear-gradient(100deg, rgba(22,33,62,.86) 0%, rgba(22,33,62,.58) 42%, rgba(22,33,62,.16) 100%),
    url("/Images/salle-informatique-vue.webp");
}
.va-tete--photo {
  background-image:
    linear-gradient(100deg, rgba(22,33,62,.86) 0%, rgba(22,33,62,.58) 42%, rgba(22,33,62,.16) 100%),
    url("/Images/remise-materiel.webp");
}
.ct-tete--inscription {
  background-image:
    linear-gradient(100deg, rgba(22,33,62,.88) 0%, rgba(22,33,62,.60) 42%, rgba(22,33,62,.18) 100%),
    url("/Images/briefing-sous-arbre.webp");
}

.ac-tete--photo {
  background-image:
    linear-gradient(100deg, rgba(22,33,62,.90) 0%, rgba(22,33,62,.64) 42%, rgba(22,33,62,.22) 100%),
    url("/Images/cours-salle-table-u.webp");
  background-size: cover; background-position: center;
}

.rg-tete--textes {
  background-image:
    linear-gradient(100deg, rgba(22,33,62,.88) 0%, rgba(22,33,62,.60) 42%, rgba(22,33,62,.18) 100%),
    url("/Images/salle-lecture-ecran.webp");
  background-size: cover; background-position: center;
}

/* ── Contact : le formulaire posé sur une photo du centre ─── */
.ct-fond {
  position: relative; isolation: isolate;
  background: #101729 url("/Images/equipe-devant-centre.webp") center / cover no-repeat;
}
.ct-fond::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, rgba(16,23,41,.72) 0%, rgba(16,23,41,.52) 55%, rgba(16,23,41,.40) 100%);
}
/* Les deux colonnes deviennent des cartes : sans elles, le texte
   noir se poserait à même la photo et deviendrait illisible. */
.ct-fond .ct-colonne,
.ct-fond .ct-coordonnees {
  background: #fff;
  border: 0; border-radius: var(--rayon);
  padding: var(--esp-5);
  box-shadow: var(--ombre-fort);
}
@media (min-width: 768px) { .ct-fond .ct-colonne { padding: var(--esp-6); } }

/* ── Programme : le déroulé, et une photo de séance à côté ── */
.fo-programme__tete { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .fo-programme__tete {
    grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
    gap: var(--esp-8); align-items: center;
  }
}
.fo-programme__tete .section__intro { margin-bottom: 0; }
.fo-programme__visuel {
  max-width: min(100%, var(--largeur-img, 26rem));
  margin-inline: auto;
}
.fo-programme__visuel img {
  display: block; width: 100%; height: auto;
  border-radius: var(--rayon);
}

/* ── Appel final : la photo passe derrière le texte ───────── */
/* Le fond n'est pas là pour être regardé mais pour donner de la
   profondeur : le voile reste franc, le texte prime. */
.fo-final--photo {
  position: relative; isolation: isolate;
  background-image: var(--fond);
  background-size: cover; background-position: center;
}
.fo-final--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(16, 24, 44, .70) 0%, rgba(16, 24, 44, .84) 100%);
}

/* ── Questions du catalogue, en deux colonnes ───────────── */
.fo-faq__grille { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .fo-faq__grille { grid-template-columns: 1.1fr .9fr; gap: var(--esp-8); } }
.fo-faq__grille .fo-faq { max-width: none; }
.fo-faq__visuel img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--rayon);
}
.fo-faq__visuel figcaption {
  margin-top: var(--esp-3);
  font-size: var(--t-xs); color: var(--gris); line-height: 1.45;
}
/* L'image reste en vue quand les questions se déplient et allongent
   la colonne de gauche. */
@media (min-width: 1024px) { .fo-faq__visuel { position: sticky; top: 6rem; } }

/* ── 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 ────────────────────────────────────────────── */
/* Les quatre appareils défilent derrière le texte. Les visuels sont sur
   fond noir, la section prend donc un bleu nuit plus sombre que le
   standard pour que le raccord ne se voie pas. */
.ap-flotte-section {
  position: relative;
  overflow: hidden;
  background: #0d1524;
}
.ap-flotte__defile {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  z-index: 0;
}
.ap-flotte__piste {
  display: flex; align-items: center;
  width: max-content;
  animation: ap-glisse 70s linear infinite;
}
.ap-flotte__piste img {
  height: 26rem; width: auto; max-width: none;
  object-fit: contain;
}
/* La piste porte deux fois la série : la décaler de moitié reboucle
   exactement sur la même image, sans saut visible. */
@keyframes ap-glisse { to { transform: translateX(-50%); } }

/* Voile : les drones doivent rester lisibles comme décor, jamais
   concurrencer le texte posé par-dessus. */
.ap-flotte__voile {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(13,21,36,.92) 0%, rgba(13,21,36,.55) 38%, rgba(13,21,36,.28) 100%),
    linear-gradient(180deg, rgba(13,21,36,.30) 0%, rgba(13,21,36,.08) 45%, rgba(13,21,36,.42) 100%);
}

.ap-flotte__grille {
  position: relative; z-index: 2;
  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: #c3cbdb; }
.ap-flotte__grille .bouton { margin-top: var(--esp-5); }

.ap-flotte {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--rayon);
  background: rgba(9, 15, 27, .72);
  backdrop-filter: blur(3px);
  overflow: hidden;
}
.ap-flotte > div { padding: var(--esp-4) var(--esp-5); border-bottom: 1px solid rgba(255,255,255,.10); }
.ap-flotte > div:last-child { border-bottom: 0; }
.ap-flotte dt { font-weight: 700; color: #fff; font-size: var(--t-sm); }
.ap-flotte dd { margin: var(--esp-1) 0 0; font-size: var(--t-sm); color: #a9b2c5; }

@media (prefers-reduced-motion: reduce) {
  .ap-flotte__piste { animation: none; }
}

/* ── 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; }


/* ── 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-color: 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-color: var(--nuit); color: #cfd6e6; padding-block: var(--esp-7); }

/* Contact seulement : /inscription partage .ct-tete et reste uni.
   Le cliché est un ciel très clair, il lui faut un voile appuyé côté
   texte, dégradé vers la droite pour laisser respirer l'appareil. */
.ct-tete--photo {
  background:
    linear-gradient(100deg,
      rgba(22, 33, 62, .97) 0%,
      rgba(22, 33, 62, .90) 42%,
      rgba(22, 33, 62, .55) 100%),
    url("/Images/contact-matrice-400.webp") center / cover no-repeat;
  padding-block: var(--esp-8);
}
.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.25fr .75fr; 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-color: var(--nuit); color: #cfd6e6; padding-block: var(--esp-7); }

/* Sommaire et pages thématiques de réglementation. La FAQ reprend la
   même classe sans le modificateur : elle garde son fond uni.
   Le sujet de la photo se tient à droite, le voile est donc opaque à
   gauche, là où se pose le texte, et s'allège vers lui. */
.rg-tete--photo {
  background:
    linear-gradient(100deg,
      rgba(22, 33, 62, .97) 0%,
      rgba(22, 33, 62, .92) 40%,
      rgba(22, 33, 62, .58) 100%),
    url("/Images/reglementation-lecture.webp") center / cover no-repeat;
  padding-block: var(--esp-8);
}
.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); }

/* ── Renvoi vers un outil du site ───────────────────────── */
/* Le règlement pose une obligation, nous fournissons de quoi la tenir.
   Cerclé d'orange comme la brochure des formations : c'est la même
   promesse, un document ou un outil qu'on emporte. */
.rg-outil {
  display: grid; gap: var(--esp-5);
  grid-template-columns: 1fr;
  align-items: center;
  margin-top: var(--esp-5);
  padding: var(--esp-5);
  background: var(--fond);
  border: 1px solid var(--orange);
  border-radius: var(--rayon);
}
@media (min-width: 768px) {
  .rg-outil { grid-template-columns: 1fr auto; gap: var(--esp-6); padding: var(--esp-6); }
}
.rg-outil h3 { font-size: var(--t-md); }
.rg-outil p { margin-top: var(--esp-3); font-size: var(--t-sm); color: var(--gris); }
.rg-outil__lien { white-space: nowrap; }

/* ── Photo du centre, dans la colonne des coordonnées ───── */
.ct-coordonnees__photo { margin-bottom: var(--esp-5); }
.ct-coordonnees__photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--rayon);
}

/* ── Illustrations des actualités ───────────────────────── */
/* L'article s'ouvrait sur un chapeau seul. Une photo du centre le
   situe avant la première ligne. Elle reste dans la colonne de
   lecture : ce n'est pas une bannière, c'est une illustration. */
.ac-article__visuel { margin-bottom: var(--esp-6); }
.ac-article__visuel img {
  display: block; width: 100%; height: auto;
  border-radius: var(--rayon);
}

/* La une des actualités passe en deux colonnes dès qu'elle est
   illustrée : le texte à gauche, la photo à droite. */
.ac-une--illustree { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .ac-une--illustree {
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: var(--esp-8); align-items: center;
  }
  .ac-une--illustree .ac-une__visuel { order: 2; }
}
.ac-une__visuel img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--rayon);
}

/* ── Ouverture d'une page thématique ────────────────────── */
/* Le chapeau seul tenait sur une colonne de lecture et laissait la
   moitié droite vide. L'illustration prend cette place. La largeur du
   fichier, passée en variable, empêche tout agrandissement : ces
   visuels font 384 à 768 px de large, pas davantage. */
.rg-ouverture { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .rg-ouverture {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: var(--esp-8); align-items: center;
  }
  .rg-ouverture--couchee { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.rg-ouverture .prose,
.rg-ouverture .section__intro { max-width: var(--lecture); margin-bottom: 0; }
.rg-ouverture__visuel {
  max-width: min(100%, var(--largeur-img, 480px));
  margin-inline: auto;
}
.rg-ouverture__visuel img {
  display: block; width: 100%; height: auto;
  border-radius: var(--rayon);
}

/* ── 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); }

/* Une image debout se range à droite du texte et la section s'élargit
   d'autant ; une image couchée se pose sous le texte, à sa largeur
   naturelle. Le gabarit lit l'orientation dans le fichier. */
.rg-section__colonne {
  display: grid; gap: var(--esp-5);
  margin-top: var(--esp-5);
}

/* Deux visuels ou plus : une bande sous le texte, à la largeur du
   conteneur. Le texte, lui, garde sa colonne de lecture. */
.rg-section--galerie { max-width: none; }
.rg-section--galerie > *:not(.rg-section__colonne) { max-width: var(--lecture); }
@media (min-width: 768px) {
  .rg-section--galerie > .rg-section__colonne {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
  }
}
.rg-section__visuel { max-width: min(100%, var(--largeur-img, 480px)); }
.rg-section__visuel img {
  display: block; width: 100%; height: auto;
  border-radius: var(--rayon);
}
.rg-section__visuel figcaption {
  margin-top: var(--esp-3);
  font-size: var(--t-xs); color: var(--gris);
}

@media (min-width: 1024px) {
  /* La section illustrée s'élargit au conteneur : le texte garde sa
     colonne de lecture, l'image occupe le reste. C'est ce qui casse la
     colonne unique qui alignait toute la page sur son bord gauche. */
  .rg-section--debout,
  .rg-section--couchee {
    max-width: none;
    display: grid; align-items: start;
    grid-template-columns: minmax(0, var(--lecture)) minmax(0, 1fr);
    column-gap: var(--esp-6);
  }
  .rg-section--debout > *,
  .rg-section--couchee > * { grid-column: 1; }
  /* La colonne d'images couvre toutes les lignes existantes ; les lignes
     implicites au-delà restent vides, donc de hauteur nulle. */
  .rg-section--debout > .rg-section__colonne,
  .rg-section--couchee > .rg-section__colonne {
    grid-column: 2; grid-row: 1 / span 20; margin-top: 0;
    /* Une image debout est plus étroite que sa colonne : elle se cale à
       droite, pour que toutes les figures de la page partagent un bord. */
    justify-items: end;
  }
}

/* ── 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-color: 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-color: 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;
  }
}

/* ═══════════════════════════════════════════════════════════
   PLACE DES PHOTOS
   Règle du site : une photo se pose à gauche ou à droite d'un
   texte, ou passe en fond de section. Jamais un bloc d'image
   seul qui occupe la page.

   Les grilles s'en chargent sur grand écran ; elles retombent
   sur une colonne unique sur téléphone, et la photo y reprend
   toute la largeur. Ce garde-fou la retient dans les deux cas,
   quelle que soit la page.
   ═══════════════════════════════════════════════════════════ */
.ac-verif__photo,
.ac-carnet__photo,
.fo-intro__visuel,
.fo-programme__visuel,
.fo-faq__visuel,
.ap-hero__photo,
.ap-mission__photo,
.ap-centre__photo,
.fm-entree__photo,
.ac-une__visuel,
.ac-article__visuel,
.rg-ouverture__visuel,
.rg-section__visuel,
.ct-coordonnees__photo,
.cote-photo,
.cote-photo--pleine {
  /* Trois plafonds : la colonne qui l'accueille, la largeur propre du
     fichier quand la page la connaît, et une limite absolue. */
  max-width: min(100%, var(--largeur-img, 24rem), 24rem);
}

/* Photo d'appoint : elle occupe toute sa colonne, pas davantage. C'est
   la grille qui la dimensionne, ce qui évite un blanc entre la figure et
   le bord de sa colonne. */
.ac-verif__photo,
.ac-carnet__photo { max-width: 100%; }

/* Sur téléphone, une seule colonne : la photo garde la largeur du texte
   mais perd sa hauteur. Une bande de 180 px accompagne, une image de
   400 px de haut occupe l'écran entier. */
@media (max-width: 767px) {
  .ac-verif__photo img,
  .ac-carnet__photo img,
  .fo-intro__visuel img,
  .fo-programme__visuel img,
  .fo-faq__visuel img,
  .ap-hero__photo img,
  .ap-mission__photo img,
  .ap-centre__photo img,
  .fm-entree__photo img,
  .ac-une__visuel img,
  .ac-article__visuel img,
  .rg-ouverture__visuel img,
  .rg-section__visuel img,
  .ct-coordonnees__photo img,
  .cote-photo img {
    max-height: 200px;
    object-fit: cover;
  }
  /* Les figures d'appoint se rangent à droite, comme sur grand écran.
     Largeur imposée et non plafonnée : une figure dont l'image n'est pas
     encore chargée n'a aucune largeur propre à plafonner. */
  .ac-verif__photo,
  .ac-carnet__photo { width: 80%; margin-left: auto; }
}

/* ── La formation en images ──────────────────────────────── */
/* Une bande par moment de la formation : la photo d'un côté, ce qu'elle
   montre de l'autre, et l'on change de côté à chaque bande. La photo
   garde sa colonne, le fond sombre lui donne le relief que la taille ne
   lui donne plus. */
.fo-scenes__liste {
  display: grid; gap: var(--esp-7);
  margin-top: var(--esp-7);
}
.fo-scene {
  display: grid; gap: var(--esp-5);
  grid-template-columns: 1fr;
  align-items: center;
  padding-top: var(--esp-6);
  border-top: 1px solid rgba(255,255,255,.12);
}
.fo-scene:first-child { padding-top: 0; border-top: 0; }
@media (min-width: 768px) {
  .fo-scene {
    grid-template-columns: minmax(0, .58fr) minmax(0, 1fr);
    gap: var(--esp-7);
  }
  /* Une bande sur deux renvoie la photo de l'autre côté. Les colonnes
     s'inversent avec elle : sans quoi le texte se retrouverait coincé
     dans la colonne étroite, et la bande paraîtrait tassée à gauche. */
  .fo-scene:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, .58fr); }
  .fo-scene:nth-child(even) .fo-scene__photo { order: 2; margin-left: auto; }
}
/* La photo se cale sur le bord extérieur de la bande, jamais au milieu. */
.fo-scene__photo { margin: 0 auto 0 0; max-width: min(100%, 24rem); }
.fo-scene__photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-fort);
}
.fo-scene__num {
  display: block; margin-bottom: var(--esp-2);
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .16em;
  color: var(--orange);
}
.fo-scene__texte h3 { color: #fff; font-size: var(--t-lg); }
.fo-scene__texte p {
  margin-top: var(--esp-3);
  max-width: 64ch; color: #b6bfd1; font-size: var(--t-sm);
}
@media (max-width: 767px) {
  .fo-scene__photo { max-width: 72%; margin-left: auto; }
  .fo-scene__photo img { max-height: 180px; }
}

/* ── Sommaire d'une page de formation ────────────────────── */
/* Une page de formation fait plusieurs écrans de haut. Cette barre suit
   la lecture sous l'en-tête et ramène en un geste au programme, aux
   photos, aux prérequis ou à l'inscription. */
.fo-sommaire {
  position: sticky; top: 68px; z-index: 40;
  background: var(--nuit-2);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.fo-sommaire__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-4);
  min-height: 52px;
}
.fo-sommaire ul {
  display: flex; align-items: center; gap: var(--esp-5);
  margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fo-sommaire ul::-webkit-scrollbar { display: none; }
.fo-sommaire li { margin: 0; }
.fo-sommaire a {
  display: block; padding: .35rem 0;
  white-space: nowrap;
  font-size: var(--t-sm); font-weight: 600;
  color: #c6cede; text-decoration: none;
  border-bottom: 2px solid transparent;
}
.fo-sommaire a:hover { color: #fff; border-bottom-color: var(--orange); }
.fo-sommaire__action { flex: none; padding: .5rem 1.1rem; font-size: var(--t-xs); }
@media (max-width: 640px) { .fo-sommaire__action { display: none; } }

/* Une ancre visée ne doit pas se retrouver sous l'en-tête, ni sous le
   sommaire d'une page de formation quand celui-ci s'y ajoute. */
[id] { scroll-margin-top: 88px; }
.fo-sommaire ~ section[id],
.fo-sommaire ~ * [id] { scroll-margin-top: 128px; }

/* Une carte deux fois plus large montre une image deux fois plus grande.
   Le visuel s'y aplatit donc en bandeau : la carte reste une carte. */
@media (min-width: 900px) {
  .grille-formations--duo .carte-formation__visuel { aspect-ratio: 21 / 9; }
  .grille--2 .carte__image { aspect-ratio: 2 / 1; }
}

/* ── Réglementation : occuper la largeur ─────────────────── */
/* Toutes les sections se rangeaient dans une colonne de lecture calée à
   gauche : la page entière penchait du même côté. Trois dispositions
   s'y substituent, selon ce que la section contient. */

/* 1. Section illustrée : une fois sur deux, l'image passe à gauche et le
      texte à droite. La grille est déjà posée plus haut ; on n'échange
      ici que les colonnes. */
@media (min-width: 1024px) {
  .rg-section--inversee {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--lecture));
  }
  .rg-section--inversee > * { grid-column: 2; }
  .rg-section--inversee > .rg-section__colonne {
    grid-column: 1; justify-items: start;
  }
}

/* 2. Section sans image mais avec une liste, une citation ou un outil :
      le propos à gauche, ce qui l'appuie à droite. */
@media (min-width: 1024px) {
  .rg-section--duo {
    max-width: none;
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--esp-7);
  }
  .rg-section--duo > h2,
  .rg-section--duo > .rg-section__texte { grid-column: 1; }
  .rg-section--duo > .fo-liste,
  .rg-section--duo > .reglement,
  .rg-section--duo > .rg-outil {
    grid-column: 2; grid-row: 1 / span 20; margin-top: 0;
  }
  /* Une section inversée sur deux, ici aussi : l'appui passe à gauche. */
  .rg-section--duo.rg-section--duo-inverse > h2,
  .rg-section--duo.rg-section--duo-inverse > .rg-section__texte { grid-column: 2; }
  .rg-section--duo.rg-section--duo-inverse > .fo-liste,
  .rg-section--duo.rg-section--duo-inverse > .reglement,
  .rg-section--duo.rg-section--duo-inverse > .rg-outil { grid-column: 1; }
}

/* 3. Deux sections nues, côte à côte : ni image ni liste, elles
      n'avaient aucune raison de s'étirer l'une sous l'autre. */
.rg-paire { display: grid; gap: var(--esp-6); }
@media (min-width: 900px) {
  .rg-paire { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--esp-7); }
  .rg-paire > .rg-section { max-width: none; margin-top: var(--esp-8); }
}

/* ── Qui sommes-nous : la salle de cours en fond ──────────── */
/* La photo était posée au-dessus de la carte d'identité et coupait la
   colonne de droite en deux. Elle passe derrière la section : le texte
   garde son fond clair, la photo se découvre vers la droite. */
.ap-recit-section {
  position: relative; isolation: isolate;
  background: #fff url("/Images/salle-cours-centre.webp") right center / cover no-repeat;
}
.ap-recit-section::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(255,255,255,.985) 0%, rgba(255,255,255,.96) 38%,
    rgba(255,255,255,.80) 66%, rgba(255,255,255,.58) 100%);
}
/* Sur téléphone le texte occupe toute la largeur : le voile redevient
   franc, sans quoi les mots passeraient sur la photo. */
@media (max-width: 899px) {
  .ap-recit-section::before {
    background: linear-gradient(180deg,
      rgba(255,255,255,.97) 0%, rgba(255,255,255,.94) 70%, rgba(255,255,255,.88) 100%);
  }
}
/* La fiche reste opaque : posée sur la photo, elle doit rester lisible. */
.ap-recit-section .ap-fiche { background: rgba(255,255,255,.94); backdrop-filter: blur(2px); }

/* ── Les deux règles cardinales, et le schéma des zones ───── */
/* Les citations tenaient dans une colonne de lecture et laissaient toute
   la droite vide. Le schéma des zones d'exclusion l'occupe : il est en
   portrait, sa colonne est donc taillée à sa largeur, et il la remplit. */
.rg-cardinales { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; }
/* Le schéma se met à côté du texte dès 900 px : plus bas, il passait
   sous les citations et la bande paraissait coupée en deux. Sa colonne
   s'élargit ensuite, quand la page en a la place. */
@media (min-width: 900px) {
  .rg-cardinales {
    grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
    gap: var(--esp-7); align-items: center;
  }
}
@media (min-width: 1200px) {
  .rg-cardinales {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: var(--esp-8);
  }
}
.rg-cardinales__texte > .section__intro { margin-bottom: var(--esp-5); }
.rg-cardinales__visuel { margin: 0; max-width: 100%; }
.rg-cardinales__visuel img {
  display: block; width: 100%; height: auto;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.rg-cardinales__visuel figcaption {
  margin-top: var(--esp-3);
  font-size: var(--t-xs); color: var(--gris); line-height: 1.45;
}
/* Sur téléphone, la figure se range à droite comme les autres. */
@media (max-width: 767px) {
  .rg-cardinales__visuel { width: 72%; margin-left: auto; }
  /* Ce visuel porte ses propres légendes : le recadrer en couperait le
     titre et les pictogrammes. Il garde donc sa hauteur. */
  .rg-cardinales__visuel img { max-height: none; }
}

/* ═══════════════════════════════════════════════════════════
   E-LEARNING
   ═══════════════════════════════════════════════════════════ */

/* Tête : même facture que les autres têtes de page, avec la salle
   informatique en fond puisque c'est là que la théorie se révise. */
.el-tete {
  background-color: var(--nuit);
  background-image:
    linear-gradient(100deg, rgba(22,33,62,.94) 0%, rgba(22,33,62,.72) 45%, rgba(22,33,62,.34) 100%),
    url("/Images/salle-informatique-large.webp");
  background-size: cover; background-position: center;
  color: #cfd6e6; padding-block: var(--esp-8);
}
.el-tete h1 { color: #fff; max-width: 20ch; }
.el-tete__chapo {
  margin-top: var(--esp-4);
  max-width: 58ch; font-size: var(--t-md); color: #cfd6e6;
}
.el-tete__actions { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-6); }

/* Les quatre chiffres qui disent le volume réel du parcours. */
.el-chiffres { display: grid; gap: var(--esp-5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .el-chiffres { grid-template-columns: repeat(4, 1fr); } }
.el-chiffres strong {
  display: block; font-size: var(--t-2xl); font-weight: 800; line-height: 1;
  color: var(--orange-fonce); font-variant-numeric: tabular-nums;
}
.el-chiffres span { display: block; margin-top: var(--esp-2); font-size: var(--t-sm); color: var(--gris); }

/* Les dix modules. La lettre reste en filigrane : elle situe le module
   sans concurrencer son titre. */
.el-modules {
  display: grid; gap: var(--esp-5); grid-template-columns: 1fr;
  margin-top: var(--esp-7); list-style: none; padding: 0;
}
@media (min-width: 640px) { .el-modules { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .el-modules { grid-template-columns: repeat(3, 1fr); } }
.el-module {
  position: relative; overflow: hidden;
  padding: var(--esp-5);
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--fond-doux);
}
.el-module__lettre {
  position: absolute; top: -.35em; right: .12em;
  font-size: 5.5rem; font-weight: 800; line-height: 1;
  color: var(--orange); opacity: .12;
}
.el-module h3 { position: relative; font-size: var(--t-base); max-width: 22ch; }
.el-module p { margin-top: var(--esp-3); font-size: var(--t-sm); color: var(--gris); }
.el-module__chapitres {
  display: inline-block; margin-top: var(--esp-4);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--orange-fonce);
}
.el-note { margin-top: var(--esp-6); font-size: var(--t-sm); color: var(--gris); max-width: 62ch; }

/* Comment cela se passe : le propos à gauche, les quatre étapes à droite. */
.el-marche__grille { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .el-marche__grille { grid-template-columns: 1fr 1fr; gap: var(--esp-8); align-items: center; }
}
.el-marche__texte { margin-top: var(--esp-4); max-width: 52ch; color: #c3cbdb; }
.el-etapes { counter-reset: etape; list-style: none; padding: 0; margin: 0; }
.el-etapes li {
  position: relative; counter-increment: etape;
  padding-left: 3.2rem; font-size: var(--t-sm); color: #a9b2c5;
}
.el-etapes li + li { margin-top: var(--esp-5); }
.el-etapes li::before {
  content: counter(etape);
  position: absolute; left: 0; top: -.15em;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(232,73,29,.16); color: var(--orange-clair);
  font-size: var(--t-sm); font-weight: 700;
}
.el-etapes strong { display: block; color: #fff; font-weight: 700; margin-bottom: var(--esp-1); }

/* Ce que la plateforme ne remplace pas : photo à gauche, propos à droite. */
.el-valeur { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
  .el-valeur { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: var(--esp-8); }
}
.el-valeur__photo { margin: 0; }
.el-valeur__photo img {
  display: block; width: 100%; height: auto;
  border-radius: var(--rayon); box-shadow: var(--ombre);
}
.el-valeur p { margin-top: var(--esp-4); color: var(--gris); max-width: 58ch; }
.el-valeur .lien-fleche { margin-top: var(--esp-2); }

.el-final { text-align: center; }
.el-final p { margin: var(--esp-3) auto 0; max-width: 56ch; color: var(--gris); }
.el-final .ac-hero__actions { justify-content: center; }

/* Les trois temps de la formation : avant, en salle, avant de voler.
   Numérotés comme une progression, pas comme une liste d'arguments. */
.el-temps {
  display: grid; gap: var(--esp-5); grid-template-columns: 1fr;
  margin-top: var(--esp-7); counter-reset: temps; list-style: none; padding: 0;
}
@media (min-width: 900px) { .el-temps { grid-template-columns: repeat(3, 1fr); gap: var(--esp-6); } }
.el-temps li {
  counter-increment: temps;
  padding: var(--esp-5);
  background: #fff;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  border-top: 3px solid var(--orange);
}
.el-temps__quand {
  display: block; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--orange-fonce);
}
.el-temps h3 { margin-top: var(--esp-3); font-size: var(--t-base); max-width: 24ch; }
.el-temps p { margin-top: var(--esp-3); font-size: var(--t-sm); color: var(--gris); }

/* ═══════════════════════════════════════════════════════════
   CARNET DE VOL — page produit
   ═══════════════════════════════════════════════════════════ */

.cv-tete { background: var(--nuit); color: #cfd6e6; padding-block: var(--esp-8); }
.cv-tete__grille { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
  .cv-tete__grille { grid-template-columns: 1.05fr .95fr; gap: var(--esp-8); }
}
.cv-tete h1 { color: #fff; max-width: 18ch; }
.cv-tete__chapo { margin-top: var(--esp-4); max-width: 54ch; font-size: var(--t-md); color: #cfd6e6; }
.cv-tete__actions { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-6); }
.cv-tete__note { margin-top: var(--esp-4); font-size: var(--t-sm); color: #a9b2c5; }
.cv-tete__note a { color: var(--orange-clair); }
.cv-tete__photo { margin: 0; }
.cv-tete__photo img {
  display: block; width: 100%; height: auto;
  border-radius: var(--rayon); box-shadow: var(--ombre);
}

/* Les six écrans : captures verticales, donc une grille dense. */
.cv-ecrans {
  display: grid; gap: var(--esp-6); grid-template-columns: repeat(2, 1fr);
  margin-top: var(--esp-7); list-style: none; padding: 0;
}
@media (min-width: 768px) { .cv-ecrans { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .cv-ecrans { grid-template-columns: repeat(6, 1fr); gap: var(--esp-5); } }
.cv-ecrans figure { margin: 0; }
.cv-ecrans img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: #fff;
}
.cv-ecrans h3 { margin-top: var(--esp-3); font-size: var(--t-sm); }
.cv-ecrans p { margin-top: var(--esp-2); font-size: var(--t-xs); color: var(--gris); line-height: 1.45; }

/* Fonctions, sur fond nuit. */
.cv-fonctions {
  display: grid; gap: var(--esp-5); grid-template-columns: 1fr;
  margin-top: var(--esp-7); list-style: none; padding: 0;
}
@media (min-width: 700px) { .cv-fonctions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cv-fonctions { grid-template-columns: repeat(3, 1fr); } }
.cv-fonctions li {
  padding: var(--esp-5);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--rayon);
  font-size: var(--t-sm); color: #a9b2c5;
}
.cv-fonctions strong { display: block; color: #fff; font-weight: 700; margin-bottom: var(--esp-2); }

/* Installation et données. */
.cv-installer { display: grid; gap: var(--esp-7); grid-template-columns: 1fr; }
@media (min-width: 900px) { .cv-installer { grid-template-columns: 1fr 1fr; gap: var(--esp-8); } }
.cv-installer p { margin-top: var(--esp-4); color: var(--gris); max-width: 52ch; }
.cv-paquet {
  margin-top: var(--esp-5); padding: var(--esp-5);
  background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon);
}
.cv-paquet__fiche { margin-top: var(--esp-5); display: grid; gap: var(--esp-3); }
@media (min-width: 560px) { .cv-paquet__fiche { grid-template-columns: repeat(3, 1fr); } }
.cv-paquet__fiche dt {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gris);
}
.cv-paquet__fiche dd { margin: var(--esp-1) 0 0; font-size: var(--t-sm); color: var(--encre); }
.cv-paquet__sha { grid-column: 1 / -1; }
.cv-paquet__sha code {
  display: block; margin-top: var(--esp-1);
  font-size: .72rem; line-height: 1.5; color: var(--gris-fonce);
  word-break: break-all;
}
.cv-paquet__note { margin-top: var(--esp-4); font-size: var(--t-xs); color: var(--gris); }

.cv-conformite { margin-top: var(--esp-6); }
.cv-reperes {
  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: 700px) { .cv-reperes { grid-template-columns: repeat(4, 1fr); } }
.cv-reperes dt {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--orange-fonce);
}
.cv-reperes dd { margin: var(--esp-2) 0 0; font-size: var(--t-sm); color: var(--gris); }