/* ============================================================
   AIRLISE FORMATION — Design system
   Palette bleu lagon, dérivée du site actuel (#0C71C3 / #2EA3F2 / #22B0B5)
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Bleus de marque */
  --navy-900:#052236;
  --navy-800:#083452;
  --navy-700:#0B4A72;
  --blue-600:#0C71C3;   /* primaire historique */
  --blue-500:#1E8DDB;
  --blue-400:#2EA3F2;
  --blue-100:#DCEEFB;
  --blue-50:#EFF7FE;

  /* Lagon (accent secondaire) */
  --lagoon-600:#0E8F94;
  --lagoon-500:#22B0B5;
  --lagoon-100:#D6F3F4;

  /* Corail (CTA chaud, usage rare) */
  --coral-600:#E2543A;
  --coral-500:#FF6B4A;
  --coral-100:#FFE7E1;

  /* Vert (bloc candidature) et rouge (agenda) */
  --green-700:#0B6B47;
  --green-600:#128C5E;
  --green-200:#C7EBD8;
  --green-100:#E6F7EF;
  --red-600:#D93A2B;

  /* Neutres */
  --ink:#0D2233;
  --body:#42586B;
  --muted:#6E8397;
  --line:#E4ECF3;
  --line-soft:#F0F5F9;
  --surface:#FFFFFF;
  --canvas:#F6F9FC;
  --sand:#FBF7F0;

  /* Typo */
  --font-display:"Satoshi","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"Satoshi","Segoe UI",system-ui,-apple-system,sans-serif;

  /* Rythme */
  --radius-sm:10px;
  --radius:18px;
  --radius-lg:26px;
  --radius-xl:36px;
  /* ombres diffuses plutôt que marquées : le relief se devine, il ne pèse pas */
  --shadow-sm:0 1px 2px rgba(8,52,82,.04),0 2px 8px rgba(8,52,82,.05);
  --shadow:0 6px 20px rgba(8,52,82,.07),0 1px 3px rgba(8,52,82,.03);
  --shadow-lg:0 20px 52px rgba(8,52,82,.10),0 4px 14px rgba(8,52,82,.05);
  --shadow-brand:0 10px 26px rgba(12,113,195,.22);
  --wrap:1200px;
  --gutter:clamp(20px,4vw,40px);
  --sp-section:clamp(64px,8vw,112px);
  --ease:cubic-bezier(.4,.14,.3,1);

  /* La coche des listes : un SVG dont le tracé est centré dans son viewBox,
     donc centré dans la pastille quelle que soit sa taille. Le dessin au trait
     CSS — deux bordures pivotées — ne l'était pas, il tirait vers le haut. */
  --coche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-8.5' fill='none' stroke='%230E8F94' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{
  margin:0;font-family:var(--font-body);color:var(--body);background:var(--surface);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--ink);margin:0 0 .5em;line-height:1.15;letter-spacing:-.021em;font-weight:800}
h1{font-size:clamp(2.15rem,1.2rem + 3.6vw,3.9rem);letter-spacing:-.03em}
h2{font-size:clamp(1.7rem,1.05rem + 2.2vw,2.75rem);letter-spacing:-.025em}
h3{font-size:clamp(1.16rem,1rem + .6vw,1.45rem);font-weight:750}
h4{font-size:1.02rem;font-weight:750}
p{margin:0 0 1.1em}
a{color:var(--blue-600);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{margin:0 0 1.1em;padding-left:1.15em}
li{margin-bottom:.4em}
strong{color:var(--ink);font-weight:650}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
:focus-visible{outline:3px solid var(--blue-400);outline-offset:2px;border-radius:4px}
::selection{background:var(--blue-100);color:var(--navy-800)}

/* ---------- 3. Utilitaires ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:820px;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sp-section)}
.section--tight{padding-block:clamp(44px,5vw,72px)}
/* Les chiffres clés respirent en haut, mais pas en bas : la section
   suivante commence juste après, avec son propre rembourrage. */
.section--chiffres{padding-bottom:clamp(8px,1vw,16px)}
/* Le fond des sections claires n'est pas un aplat : trois halos très pâles —
   lagon, vert d'eau, bleu de ciel — posés sur un gris à peine teinté. Rien
   de saturé : à cette opacité la couleur ne se nomme pas, elle se sent.
   Le haut s'ouvre en blanc pour qu'aucune marche ne se voie avec la section
   précédente. */
.section--canvas{
  background:
    /* Un fondu blanc sur les 190 premiers pixels : les teintes radiales
       demarraient des le bord haut et dessinaient une marche nette avec le
       blanc de la section precedente. */
    linear-gradient(180deg,#fff 0,rgba(255,255,255,.72) 64px,rgba(255,255,255,0) 190px),
    radial-gradient(88% 62% at 8% 4%,rgba(34,176,181,.13) 0%,rgba(34,176,181,0) 60%),
    radial-gradient(74% 58% at 96% 26%,rgba(126,196,143,.13) 0%,rgba(126,196,143,0) 62%),
    radial-gradient(110% 70% at 50% 108%,rgba(30,141,219,.10) 0%,rgba(30,141,219,0) 64%),
    linear-gradient(180deg,#FFFFFF 0%,var(--canvas) 22%,var(--canvas) 100%);
}
/* Le catalogue de l'accueil se dégrise aussi vers le bas : sa dernière ligne
   de cartes se pose sur du blanc, et la section suivante prend le relais sans
   marche d'escalier. */
#formations.section--canvas{
  background:
    /* Un fondu blanc sur les 190 premiers pixels : les teintes radiales
       demarraient des le bord haut et dessinaient une marche nette avec le
       blanc de la section precedente. */
    linear-gradient(180deg,#fff 0,rgba(255,255,255,.72) 64px,rgba(255,255,255,0) 190px),
    radial-gradient(88% 56% at 8% 6%,rgba(34,176,181,.14) 0%,rgba(34,176,181,0) 58%),
    radial-gradient(70% 50% at 96% 24%,rgba(126,196,143,.13) 0%,rgba(126,196,143,0) 60%),
    linear-gradient(180deg,#FFFFFF 0%,var(--canvas) 20%,var(--canvas) 48%,#fff 100%);
}
.section--sand{background:var(--sand)}
.section--navy{background:var(--navy-900);color:#C7DAE8}
/* Bande lagon : même famille que le sous-menu de fiche. Elle annonce la
   bande sombre des résultats, à laquelle elle se raccorde par le navy. */
.section--lagoon{
  background:linear-gradient(105deg,#0A7A82 0%,#0A6480 46%,var(--navy-800) 100%);
  color:#DCF1F3;
}
/* ---------- Certifications + résultats : un seul dégradé ----------
   Les deux sections se suivent ; au lieu de deux aplats qui se heurtent,
   chacune porte une tranche de la même descente lagon → bleu nuit, avec la
   même couleur exacte de part et d'autre de la jonction (#0B4A72). */
#certifications.section--lagoon{
  background:linear-gradient(180deg,#0C8288 0%,#0A6480 52%,#0B4A72 100%);
}
#resultats.section--navy{
  background:linear-gradient(180deg,#0B4A72 0%,#083452 38%,var(--navy-900) 100%);
}
.section--lagoon h2,.section--lagoon h3{color:#fff}
.section--navy h2,.section--navy h3{color:#fff}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--navy-900);color:#fff;padding:12px 20px;border-radius:0 0 10px 0}
.skip-link:focus{left:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);
  font-size:.775rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--lagoon-600);margin-bottom:.85rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px;opacity:.65}
.section--navy .eyebrow{color:var(--lagoon-500)}
.lede{font-size:clamp(1.02rem,.98rem + .28vw,1.16rem);color:var(--muted);max-width:64ch}
.section-head{max-width:66ch;margin-bottom:clamp(32px,4vw,52px)}
.section-head.center{margin-inline:auto}
/* Titre centré, sans le tiret du surtitre : l'axe central suffit à poser la section. */
.section-head--centre{text-align:center;margin-inline:auto}
.section-head--centre .eyebrow{justify-content:center;gap:0}
.section-head--centre .eyebrow::before{display:none}
.section-head--centre .lede{margin-inline:auto}
.section-head p:last-child{margin-bottom:0}

/* ---------- 4. Boutons ---------- */
.btn{
  --btn-bg:var(--blue-600);--btn-fg:#fff;--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-display);font-size:.95rem;font-weight:750;line-height:1;
  padding:14px 24px;border-radius:999px;border:1.5px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;text-decoration:none;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--primary{box-shadow:var(--shadow-brand)}
.btn--primary:hover{background:var(--blue-500);box-shadow:0 14px 32px rgba(12,113,195,.34)}
.btn--coral{--btn-bg:var(--coral-500);box-shadow:0 10px 26px rgba(226,84,58,.3)}
.btn--coral:hover{--btn-bg:var(--coral-600)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--navy-800);--btn-bd:var(--line)}
.btn--ghost:hover{--btn-bd:var(--blue-400);--btn-fg:var(--blue-600);background:var(--blue-50)}
.btn--white{--btn-bg:#fff;--btn-fg:var(--navy-800);box-shadow:0 10px 30px rgba(3,26,43,.22)}
.btn--outline-light{--btn-bg:rgba(255,255,255,.08);--btn-fg:#fff;--btn-bd:rgba(255,255,255,.45);backdrop-filter:blur(6px)}
.btn--outline-light:hover{--btn-bg:rgba(255,255,255,.18)}
.btn--sm{padding:10px 18px;font-size:.875rem}
.btn--lg{padding:17px 32px;font-size:1.02rem}
.btn--block{width:100%}
.btn svg{width:1.05em;height:1.05em;flex:none}

.link-arrow{
  display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-display);
  font-weight:750;font-size:.94rem;color:var(--blue-600);
}
.link-arrow::after{content:"→";transition:transform .2s var(--ease)}
.link-arrow:hover{text-decoration:none}
.link-arrow:hover::after{transform:translateX(4px)}

/* ---------- 5. Badges & pastilles ---------- */
.badge{
  display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-display);
  font-size:.775rem;font-weight:750;padding:5px 12px;border-radius:999px;
  background:var(--blue-50);color:var(--navy-700);border:1px solid var(--blue-100);
}
.badge--lagoon{background:var(--lagoon-100);color:#0A6F73;border-color:#B7E7E9}
.badge--coral{background:var(--coral-100);color:#B23A23;border-color:#FFD2C7}
.badge--solid{background:var(--navy-800);color:#fff;border-color:transparent}
.badge--ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3)}

/* ---------- 6. Cartes ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px;box-shadow:var(--shadow-sm);transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--blue-100)}
.card h3{margin-bottom:.35em}
.card p:last-child{margin-bottom:0}

.grid{display:grid;gap:clamp(16px,2vw,24px)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr))}

/* ---------- 7. En-tête ---------- */
.topbar{background:var(--navy-900);color:#9FBDD3;font-size:.82rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:40px;flex-wrap:wrap}
.topbar a{color:#CDE2F1}
.topbar-left{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.topbar-item{display:inline-flex;align-items:center;gap:7px}
.topbar-item svg{width:15px;height:15px;opacity:.8}

.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);transition:box-shadow .25s var(--ease)}
.site-header.is-stuck{box-shadow:0 6px 22px rgba(8,52,82,.09)}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,34px);min-height:76px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{height:38px;width:auto}
.nav-menu{display:flex;align-items:center;gap:clamp(6px,1.4vw,22px);list-style:none;margin:0;padding:0;flex:1}
.nav-menu > li{position:relative;margin:0}
.nav-link{
  display:flex;align-items:center;gap:5px;font-family:var(--font-display);font-weight:650;
  font-size:.94rem;color:var(--navy-800);padding:10px 4px;border-radius:8px;white-space:nowrap;
}
.nav-link:hover,.nav-link[aria-expanded="true"]{color:var(--blue-600);text-decoration:none}
.nav-link .chev{width:11px;height:11px;transition:transform .2s var(--ease);opacity:.6}
.nav-link[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-actions{display:flex;align-items:center;gap:10px;flex:none}
.lang{display:flex;align-items:center;gap:2px;font-family:var(--font-display);font-size:.82rem;font-weight:750;color:var(--muted)}
.lang a{padding:5px 7px;border-radius:7px;color:var(--muted)}
.lang a[aria-current]{background:var(--blue-50);color:var(--blue-600)}
.lang span{opacity:.35}

.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:19px;height:2px;background:var(--navy-800);border-radius:2px;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:inherit;border-radius:2px}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ---------- 8. Hero ---------- */
.hero{position:relative;background:var(--navy-900);color:#fff;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(104deg,rgba(5,34,54,.94) 0%,rgba(8,52,82,.86) 42%,rgba(11,74,114,.42) 72%,rgba(34,176,181,.18) 100%);
}
.hero-inner{padding-block:clamp(66px,9vw,124px) clamp(56px,7vw,96px);max-width:720px}
.hero h1{color:#fff;margin-bottom:.35em}
.hero h1 .accent{
  background:linear-gradient(96deg,var(--lagoon-500),var(--blue-400));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{font-size:clamp(1.04rem,1rem + .42vw,1.24rem);color:#CFE3F1;max-width:56ch;margin-bottom:1.9rem}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:2.4rem}
/* Plus de filet au-dessus du sceau : le bloc remonte à sa place. Le
   rembourrage qui séparait le trait du logo n'a plus d'objet. */
.hero-trust{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:0;border-top:0}
.hero-trust img{height:52px;background:#fff;border-radius:10px;padding:6px}
.hero-trust p{margin:0;font-size:.85rem;color:#B7D0E2;max-width:42ch;line-height:1.5}

/* Barre de recherche de formation */
.finder{
  position:relative;z-index:5;margin-top:-42px;margin-bottom:0;
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:20px;display:grid;gap:14px;grid-template-columns:2fr 1fr 1fr auto;align-items:end;
}
.finder-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.finder-field label{font-family:var(--font-display);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;
  font-family:var(--font-body);font-size:.95rem;color:var(--ink);background:#fff;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field:focus{border-color:var(--blue-400);box-shadow:0 0 0 4px var(--blue-50);outline:none}
select.field{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%236E8397' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:12px;padding-right:34px}
/* La liste ouverte d'un <select> est dessinee par le systeme, pas par la
   page : aucune regle CSS ne l'atteint. Tout ce qui suit habille donc le
   bouton ferme -- le seul morceau qui nous appartienne. Il se tient au plus
   pres des champs de saisie : meme contour, meme arrondi, meme halo au
   focus, pour qu'un formulaire se lise d'un bloc. */
select.field{text-overflow:ellipsis;cursor:pointer}
select.field:hover{border-color:var(--blue-100)}
select.field:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%230C71C3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
select.field:disabled{background-color:var(--line-soft);color:var(--muted);cursor:not-allowed}
/* Les intitules de groupes : la ou le navigateur les laisse peindre. */
select.field optgroup{font-weight:700;color:var(--muted)}
select.field option{color:var(--ink)}
/* Le petit selecteur des fiches suit la meme grammaire, en plus discret. */
.select-soft{transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.select-soft:hover{border-color:var(--blue-100)}
.select-soft:focus{box-shadow:0 0 0 4px var(--blue-50);outline:none}

textarea.field{min-height:118px;resize:vertical}

/* ---------- 9. Bandeau chiffres ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;background:var(--line-soft);border-radius:var(--radius-lg);overflow:hidden}
.stat{background:#fff;padding:26px 20px;text-align:center}
.stat-num{font-family:var(--font-display);font-size:clamp(1.85rem,1.4rem + 1.5vw,2.6rem);font-weight:850;color:var(--blue-600);line-height:1;letter-spacing:-.03em}
.stat-num .unit{font-size:.55em;color:var(--lagoon-600)}
.stat-label{font-size:.85rem;color:var(--muted);margin:.55em 0 0;line-height:1.4}

/* ---------- 10. Cartes formation ---------- */
.formation-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.formation-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--blue-100)}
.fc-media{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,var(--navy-800),var(--lagoon-600));overflow:hidden}
.fc-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.formation-card:hover .fc-media img{transform:scale(1.07)}

/* ---------- Pastille « lecture » sur les fiches qui ont une vidéo ----------
   Le survol fait respirer l'image ; la pastille dit qu'il y a une vidéo, et
   c'est le clic — pas le survol — qui la charge. */
.fc-play{
  position:absolute;right:14px;top:14px;z-index:5;
  width:44px;height:44px;display:grid;place-items:center;padding:0;
  border:0;border-radius:50%;cursor:pointer;color:var(--navy-900);
  background:rgba(255,255,255,.92);backdrop-filter:blur(2px);
  box-shadow:0 6px 18px rgba(5,34,54,.28);
  transform:scale(.92);opacity:.92;
  transition:transform .25s var(--ease),opacity .25s var(--ease),background .25s var(--ease);
}
.fc-play svg{width:20px;height:20px;margin-left:2px}
.formation-card:hover .fc-play{transform:scale(1);opacity:1}
.fc-play:hover{background:#fff;transform:scale(1.08)}
.fc-play:focus-visible{outline:2px solid var(--lagoon-500);outline-offset:3px;opacity:1;transform:scale(1)}

/* ---------- La vidéo, en grand ---------- */
.vid-modal{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:clamp(16px,4vw,48px);background:rgba(5,34,54,.86);
  animation:vid-fond .22s var(--ease) both;
}
@keyframes vid-fond{from{opacity:0}to{opacity:1}}
.vid-box{
  position:relative;width:min(1040px,100%);
  animation:vid-boite .28s var(--ease) both;
}
@keyframes vid-boite{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.vid-box .video-frame{border:3px solid #fff;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.vid-titre{margin:14px 0 0;color:#fff;font-family:var(--font-display);font-weight:750;font-size:1.02rem}
.vid-close{
  position:absolute;top:-46px;right:0;width:38px;height:38px;display:grid;place-items:center;
  border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;
  transition:background .2s var(--ease);
}
.vid-close:hover{background:rgba(255,255,255,.3)}
.vid-close svg{width:18px;height:18px}
/* Sur les listes compactes, la vignette fait 86 px : la pastille se pose au
   milieu de l'image, seul endroit où elle reste lisible. */
@media (max-width:760px){
  .fc-play{
    width:30px;height:30px;inset:0;margin:auto;
    transform:scale(1);opacity:1;box-shadow:0 3px 10px rgba(5,34,54,.35);
  }
  .fc-play svg{width:14px;height:14px}
  .vid-close{top:-42px}
}
@media (prefers-reduced-motion:reduce){
  .fc-play,.vid-modal,.vid-box{transition:none;animation:none}
}
.fc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,34,54,0) 45%,rgba(5,34,54,.62) 100%)}
.fc-tags{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:6px;flex-wrap:wrap;z-index:2}
.fc-body{padding:22px;display:flex;flex-direction:column;flex:1}
.fc-body h3{margin-bottom:.4em;font-size:1.12rem}
.fc-body h3 a{color:inherit}
.fc-body h3 a:hover{color:var(--blue-600);text-decoration:none}
.fc-body p{font-size:.925rem;color:var(--muted);margin-bottom:1.1em}
.fc-meta{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fc-meta dl{display:flex;gap:16px;margin:0;flex-wrap:wrap}
.fc-meta div{display:flex;flex-direction:column}
.fc-meta dt{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;font-family:var(--font-display)}
.fc-meta dd{margin:0;font-family:var(--font-display);font-weight:800;color:var(--navy-800);font-size:.98rem}

/* Filtres à onglets */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.filter{
  font-family:var(--font-display);font-size:.9rem;font-weight:700;padding:10px 18px;
  border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--body);cursor:pointer;
  transition:.18s var(--ease);
}
.filter:hover{border-color:var(--blue-400);color:var(--blue-600)}
.filter[aria-pressed="true"]{background:var(--navy-800);border-color:var(--navy-800);color:#fff}

/* ---------- 11. Parcours / profils ---------- */
.profile-card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 24px;box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.profile-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.profile-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--blue-500),var(--lagoon-500))}
.profile-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--blue-50);color:var(--blue-600);margin-bottom:16px}
.profile-icon svg{width:23px;height:23px}
.profile-card h3{font-size:1.06rem}
.profile-card p{font-size:.925rem;color:var(--muted)}

/* ---------- 12. Financement ---------- */
.funding{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));gap:14px}
.funding-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px;text-align:center;
  transition:.2s var(--ease);
}
.funding-item:hover{border-color:var(--lagoon-500);box-shadow:var(--shadow)}
.funding-item strong{display:block;font-family:var(--font-display);font-size:1rem;color:var(--navy-800);margin-bottom:3px}
.funding-item span{font-size:.83rem;color:var(--muted)}

/* ---------- 13. Bloc e-learning ---------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(28px,4vw,64px);align-items:center}
.split-media{position:relative}
.split-media img{border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}
.float-card{
  position:absolute;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:16px 18px;display:flex;align-items:center;gap:13px;max-width:250px;
}
.float-card--br{right:-8px;bottom:-22px}
.float-card .fc-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--lagoon-100);color:var(--lagoon-600);flex:none}
.float-card strong{display:block;font-family:var(--font-display);font-size:.94rem;color:var(--ink)}
.float-card span{font-size:.8rem;color:var(--muted)}
.check-list{list-style:none;padding:0;margin:0 0 1.8em}
.check-list li{display:flex;gap:11px;align-items:flex-start;margin-bottom:.75em;font-size:.98rem}
.check-list li::before{
  content:"";flex:none;width:21px;height:21px;border-radius:50%;margin-top:2px;
  background:var(--lagoon-100) var(--coche) center / 13px 13px no-repeat;
}

/* ---------- 14. Indicateurs Qualiopi ---------- */
/* Les chiffres se lisent seuls : pas de cadre, de l'air entre les colonnes,
   le libellé collé sous le nombre auquel il se rapporte. */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:clamp(24px,3.4vw,46px)}
.kpi{background:none;border:0;border-radius:0;padding:0;max-width:26ch}
.kpi-val{margin:0;font-family:var(--font-display);font-size:clamp(2.2rem,1.8rem + 1.5vw,2.9rem);font-weight:850;color:#fff;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi-label{font-size:1.02rem;line-height:1.4;color:#C3DAEC;margin:.34em 0 1em}
.meter{height:6px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--lagoon-500),var(--blue-400))}

/* ---------- 15. Témoignages ---------- */
.quote-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.stars{display:flex;gap:3px;color:#F5A623;margin-bottom:14px}
.stars svg{width:17px;height:17px}
.quote-card blockquote{margin:0 0 18px;font-size:1rem;color:var(--body);line-height:1.62}
.quote-foot{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line-soft)}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue-500),var(--lagoon-500));display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:800;font-size:.95rem;flex:none}
.quote-foot strong{display:block;font-size:.92rem;color:var(--ink)}
.quote-foot span{font-size:.82rem;color:var(--muted)}

/* ---------- 16. CTA de fin ---------- */
.cta-band{
  position:relative;border-radius:var(--radius-xl);overflow:hidden;isolation:isolate;
  background:linear-gradient(118deg,var(--navy-900),var(--navy-700) 55%,var(--lagoon-600));
  color:#fff;padding:clamp(38px,5vw,64px);
}
.cta-band::after{
  content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(46,163,242,.4),transparent 68%);z-index:-1;
}
.cta-band h2{color:#fff}
.cta-band p{color:#C9DEEE;max-width:52ch}

/* ---------- Les avions qui prennent leur envol ----------
   Décor pur. Trois silhouettes de tailles différentes montent à droite du
   bandeau et disparaissent, décalées dans le temps : il y en a presque
   toujours une en vol, jamais trois de front. Très pâles — c'est une
   respiration, pas une illustration. */
.cta-avions,.erp-vols{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  border-radius:inherit;
}
.cta-avions{z-index:-1}
.erp-vols{z-index:-1}

/* Trois appareils, trois routes fixes — pas un tirage au sort : deux avions
   qui tombent sur la meme trajectoire se superposent, et on voit le truc.
   Chacun a son cap, sa taille, son altitude (lire : son opacite) et sa place
   dans le cycle. Leurs routes se croisent, jamais leurs positions : les
   phases sont decalees d'un tiers de cycle, et les bandes de vol different.
   Le deplacement se fait en pourcentages du cadre, pas en pixels : le meme
   reglage sert le grand bandeau et la bande d'appel. */
.cta-avions i,.erp-vols i{
  position:absolute;display:block;opacity:0;aspect-ratio:1;
  left:var(--x1);top:var(--y1);
  transform:rotate(var(--cap,84deg));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5L21 16z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:vol-route var(--dur,38s) linear infinite;
  animation-delay:var(--dly,0s);
}

/* 1 — gros porteur, haut, cap a l'est, presque a plat. Loin, donc pale. */
.cta-avions i:nth-child(1),.erp-vols i:nth-child(1){
  --x1:-28%;--y1:11%;--x2:106%;--y2:1%;--cap:86deg;--op:.10;--dly:0s;
}
/* 2 — moyen-courrier, bas, cap a l'ouest, il monte legerement. */
.cta-avions i:nth-child(2),.erp-vols i:nth-child(2){
  --x1:104%;--y1:58%;--x2:-26%;--y2:31%;--cap:-76deg;--op:.17;--dly:-14s;
}
/* 3 — petit appareil, plus pres, il grimpe en diagonale et coupe les deux
       autres routes — a un moment ou elles sont vides. */
.cta-avions i:nth-child(3),.erp-vols i:nth-child(3){
  --x1:2%;--y1:92%;--x2:76%;--y2:-18%;--cap:44deg;--op:.26;--dly:-26s;
}

.erp-vols i:nth-child(1){width:clamp(120px,15vw,215px)}
.erp-vols i:nth-child(2){width:clamp(58px,7.5vw,112px)}
.erp-vols i:nth-child(3){width:clamp(28px,3.8vw,58px)}
.cta-avions i:nth-child(1){width:clamp(84px,11vw,150px)}
.cta-avions i:nth-child(2){width:clamp(44px,5.5vw,82px)}
.cta-avions i:nth-child(3){width:clamp(24px,3vw,46px)}

/* Il entre, traverse, sort. La brume du milieu de trajet evite l'effet
   « sticker qui glisse » : un avion lointain n'a pas une densite constante. */
@keyframes vol-route{
  0%   {left:var(--x1);top:var(--y1);opacity:0}
  7%   {opacity:var(--op,.16)}
  38%  {opacity:calc(var(--op,.16) * .72)}
  60%  {opacity:var(--op,.16)}
  72%  {left:var(--x2);top:var(--y2);opacity:0}
  100% {left:var(--x2);top:var(--y2);opacity:0}
}

@media (max-width:700px){
  /* sur un bandeau etroit, ils passeraient sur le texte */
  .cta-avions{display:none}
  .erp-vols i:nth-child(1){display:none}
}
@media (prefers-reduced-motion:reduce){
  .cta-avions i,.erp-vols i{animation:none;opacity:calc(var(--op,.16) * .8)}
  .cta-avions i:nth-child(3),.erp-vols i:nth-child(3){display:none}
}


/* ---------- 17. Pied de page ---------- */
.site-footer{background:var(--navy-900);color:#9FBDD3;padding-block:clamp(48px,6vw,76px) 0;margin-top:0}
.site-footer h4{color:#fff;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.site-footer a{color:#B9D3E5}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin-bottom:9px;font-size:.92rem}
.footer-brand img{height:40px;margin-bottom:16px}
.footer-brand p{font-size:.92rem;line-height:1.6;max-width:38ch}
.socials{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,1.7vw,20px);margin-top:18px}
.socials a{display:inline-flex;padding:0;border:0;background:none;color:inherit;transition:opacity .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)}
.socials svg{width:24px;height:24px;display:block}
.footer-bottom{margin-top:44px;border-top:1px solid rgba(255,255,255,.12);padding-block:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem}
.footer-bottom ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap}

/* ---------- 18. Fiche formation ---------- */
.breadcrumb{font-size:.86rem;color:#A9C6DC;padding-block:18px}
.breadcrumb ol{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0}
.breadcrumb li{margin:0}
.breadcrumb li+li::before{content:"/";margin-right:8px;opacity:.5}
.breadcrumb a{color:#CFE3F1}

/* Le degrade du hero part du meme bleu nuit, mais chaque arret est tire
   d'un cran vers le lagon : la fiche reste serieuse, elle respire un peu
   plus l'ocean. Le titre reste blanc, mais d'un cran moins gras que les
   autres h1 : a cette taille le 800 du jeu de titres ecrasait le fond. */
.fiche-hero{background:linear-gradient(120deg,#05283C,#0A5273 70%,#0E7089);color:#fff;position:relative;overflow:hidden}
.fiche-hero::after{content:"";position:absolute;right:-140px;bottom:-160px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(34,176,181,.34),transparent 66%)}
.fiche-hero-inner{padding-bottom:clamp(44px,6vw,72px);max-width:690px;position:relative;z-index:2}
.fiche-hero h1{color:#fff;font-weight:700;font-size:clamp(1.85rem,1.2rem + 2.4vw,3rem)}
.fiche-hero .lede{color:#CFE3F1}
.fiche-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.fiche-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:20px clamp(20px,3vw,40px);margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16)}
.fact{display:flex;align-items:center;gap:11px}
.fact-ico{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center;flex:none}
.fact-ico svg{width:18px;height:18px;color:#8FE3E6}
.fact small{display:block;font-size:.76rem;color:#A9C6DC;letter-spacing:.04em}
.fact strong{font-family:var(--font-display);font-size:1rem;color:#fff}

.fiche-layout{display:grid;grid-template-columns:minmax(0,1fr) 366px;gap:clamp(28px,4vw,56px);align-items:start}
.fiche-main > section{padding-block:clamp(30px,3.5vw,46px);border-bottom:1px solid var(--line-soft)}
.fiche-main > section:first-child{padding-top:clamp(34px,4vw,52px)}
.fiche-main > section:last-child{border-bottom:0}
.fiche-main h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem)}

.aside-card{position:sticky;top:100px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;margin-top:-90px}
.price-head{background:linear-gradient(135deg,var(--navy-800),var(--navy-700));color:#fff;padding:24px}
.price-head small{display:block;font-size:.74rem;color:#A9C6DC;letter-spacing:.06em;text-transform:uppercase;font-weight:700;font-family:var(--font-display)}
.price-val{font-family:var(--font-display);font-size:2.3rem;font-weight:850;letter-spacing:-.03em;line-height:1.1;margin-top:4px}
.price-val span{font-size:.42em;font-weight:700;color:#A9C6DC}
.price-note{font-size:.85rem;color:#B7D0E2;margin:8px 0 0}
.price-body{padding:22px 24px 26px}
.price-lines{list-style:none;margin:0 0 20px;padding:0}
.price-lines li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.price-lines li:last-child{border-bottom:0}
.price-lines span{color:var(--muted)}
.price-lines strong{font-family:var(--font-display);color:var(--navy-800)}
.aside-help{background:var(--blue-50);border-top:1px solid var(--blue-100);padding:18px 24px;display:flex;gap:13px;align-items:center}
.aside-help .avatar{width:44px;height:44px}
.aside-help strong{display:block;font-size:.9rem;color:var(--ink)}
.aside-help a{font-size:.88rem;font-weight:700;font-family:var(--font-display)}

/* Blocs de compétences (accordéon) */
.accordion{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.accordion + .accordion{margin-top:14px}
/* Le texte d'introduction ne colle pas au premier volet. */
.prose + .accordion{margin-top:clamp(20px,2.6vw,32px)}
.acc-head{
  width:100%;display:flex;align-items:center;gap:16px;padding:20px 22px;background:#fff;border:0;
  cursor:pointer;text-align:left;font-family:var(--font-display);font-weight:750;color:var(--ink);font-size:1rem;
}
/* Le titre prend la place disponible : sur deux lignes il respire, et il ne
   vient pas coller le volume horaire à sa droite. */
.acc-titre{flex:1 1 auto;min-width:0;line-height:1.42;padding-right:6px}
.acc-head:hover{background:var(--blue-50)}
.acc-num{width:34px;height:34px;border-radius:10px;background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center;font-size:.85rem;font-weight:800;flex:none}
.acc-head .chev{margin-left:auto;width:14px;height:14px;color:var(--muted);transition:transform .22s var(--ease);flex:none}
.acc-head[aria-expanded="true"] .chev{transform:rotate(180deg)}
.acc-head[aria-expanded="true"]{background:var(--blue-50)}
.acc-hours{font-family:var(--font-body);font-weight:600;font-size:.85rem;color:var(--muted);margin-left:auto;padding-left:18px;flex:none}
.acc-head .chev{margin-left:14px}
.acc-panel{padding:22px 22px 26px 72px;border-top:1px solid var(--line-soft)}
.acc-panel ul{margin:0}
/* Le premier et le dernier élément ne doublent pas le rembourrage du panneau. */
.acc-panel > .prose > :first-child{margin-top:0}
.acc-panel > .prose > :last-child{margin-bottom:0}
.acc-panel li{font-size:.94rem}
.acc-panel[hidden]{display:none}

/* Programme en étapes */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--line)}
.timeline li{position:relative;padding-left:50px;margin-bottom:22px}
.timeline li::before{
  content:"";position:absolute;left:8px;top:5px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--blue-400);
}
.timeline strong{display:block;font-family:var(--font-display);color:var(--ink);margin-bottom:2px}
.timeline span{font-size:.92rem;color:var(--muted)}

/* Sessions */
.sessions{width:100%;border-collapse:separate;border-spacing:0;font-size:.94rem}
.sessions th{
  text-align:left;font-family:var(--font-display);font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);padding:0 14px 10px;font-weight:800;
}
.sessions td{background:#fff;padding:15px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sessions tr td:first-child{border-left:1px solid var(--line);border-radius:12px 0 0 12px}
.sessions tr td:last-child{border-right:1px solid var(--line);border-radius:0 12px 12px 0}
.sessions tbody tr + tr td{padding-top:15px}

/* ---------- Une ligne de session se survole d'un bloc ----------
   « Candidater » n'apparaît qu'au survol : sur six lignes, six fois le même
   lien attirait l'œil plus que les dates. Il reste dans le flux (visibilité
   seule, pas display) pour que la colonne ne saute pas, et il réapparaît au
   clavier comme à la souris. */
.sessions tbody tr td{transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
/* La spécificité doit dépasser celle de la règle qui repeint les tableaux en
   blanc sur les sections bleu pâle des fiches, sinon le survol ne se voit pas. */
.fiche-main .sessions tbody tr:hover td,
.fiche-main .sessions tbody tr:focus-within td,
.sessions tbody tr:hover td,
.sessions tbody tr:focus-within td{
  background:var(--navy-800);border-color:var(--navy-800);color:#fff;
}
.sessions tbody tr:hover strong,
.sessions tbody tr:focus-within strong,
.sessions tbody tr:hover .terr-nom,
.sessions tbody tr:focus-within .terr-nom{color:#fff}
.sessions tbody tr:hover small,
.sessions tbody tr:focus-within small{color:#BBD3E6}
.sessions tbody tr:hover .badge--lagoon,
.sessions tbody tr:focus-within .badge--lagoon{background:rgba(255,255,255,.16);color:#fff;border-color:transparent}
.sessions tbody tr:hover .badge--coral,
.sessions tbody tr:focus-within .badge--coral{background:var(--coral-500);color:#fff;border-color:transparent}
/* La pastille de date porte ses couleurs en dur — sans quoi elle resterait
   bleu nuit sur bleu nuit des que la ligne se teinte. Elle bascule donc en
   blanc avec la ligne : chiffre et mois pleins, annee en retrait, contour
   du carre juste assez marque pour se detacher du fond. */
.sessions tbody tr:hover .dpast-j,
.sessions tbody tr:focus-within .dpast-j{color:#fff;border-color:rgba(255,255,255,.55)}
.sessions tbody tr:hover .dpast-my b,
.sessions tbody tr:focus-within .dpast-my b{color:#fff}
.sessions tbody tr:hover .dpast-my i,
.sessions tbody tr:focus-within .dpast-my i{color:#BBD3E6}
.sessions tbody tr:hover .dplage-fl,
.sessions tbody tr:focus-within .dplage-fl{color:rgba(255,255,255,.6)}

.ses-cta .link-arrow{
  visibility:hidden;opacity:0;transform:translateX(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
  color:#fff;
}
.sessions tbody tr:hover .ses-cta .link-arrow,
.sessions tbody tr:focus-within .ses-cta .link-arrow{visibility:visible;opacity:1;transform:none}
/* Au doigt, il n'y a pas de survol : le lien reste visible. */
@media (hover:none){
  .ses-cta .link-arrow{visibility:visible;opacity:1;transform:none;color:var(--blue-600)}
}
/* Sous 1100 px la colonne « Candidater » saute : la quatrieme colonne
   passait derriere le bord de l'ecran et le tableau partait en defilement
   horizontal pour un lien que la barre collante du bas propose deja. */
@media (max-width:1100px){
  .sessions thead th:nth-child(4),
  .sessions tbody td.ses-cta{display:none}
}
/* Au telephone, les trois colonnes restantes depassaient encore. La plage de
   dates s'y empile : la seconde borne passe sous la premiere, et la fleche,
   tournee d'un quart de tour, descend entre les deux. La colonne ne fait plus
   que la largeur d'une pastille, et rien n'est perdu au passage. */
@media (max-width:620px){
  .sessions td{padding:12px 8px}
  .sessions th{padding:0 8px 10px}
  .sessions .dplage{flex-direction:column;align-items:flex-start;gap:5px}
  .sessions .dplage-fl{transform:rotate(90deg);margin-left:11px;width:18px}
  .sessions .dpast-j{min-width:32px;height:32px;border-radius:9px;font-size:.92rem}
  .sessions .dpast-my b{font-size:.92rem}
  .sessions .dpast-my i{font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
  .sessions tbody tr td,.ses-cta .link-arrow{transition:none}
}
.sessions strong{font-family:var(--font-display);color:var(--ink)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- 19. Formulaire de candidature ---------- */
.apply{background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-xl);padding:clamp(24px,3.5vw,44px)}
.steps{display:flex;gap:8px;margin-bottom:30px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:.88rem;font-weight:700;color:var(--muted);padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.step b{width:22px;height:22px;border-radius:50%;background:var(--line-soft);color:var(--muted);display:grid;place-items:center;font-size:.76rem}
.step[aria-current="step"]{color:#fff;background:var(--navy-800);border-color:var(--navy-800)}
.step[aria-current="step"] b{background:var(--lagoon-500);color:#fff}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px}
.form-field{display:flex;flex-direction:column;gap:7px}
.form-field.full{grid-column:1/-1}
.form-field label{font-family:var(--font-display);font-size:.88rem;font-weight:700;color:var(--ink)}
.form-field label .req{color:var(--coral-600)}
.form-field .hint{font-size:.82rem;color:var(--muted)}
.upload{
  border:2px dashed var(--line);border-radius:var(--radius);padding:24px;text-align:center;background:#fff;
  transition:.18s var(--ease);cursor:pointer;
}
.upload:hover{border-color:var(--blue-400);background:var(--blue-50)}
.upload svg{width:28px;height:28px;color:var(--blue-500);margin:0 auto 8px}
.upload strong{display:block;font-family:var(--font-display);font-size:.94rem;color:var(--ink)}
.upload span{font-size:.83rem;color:var(--muted)}
.radio-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr));gap:10px}
.radio-card{
  display:flex;align-items:center;gap:10px;padding:13px 15px;background:#fff;border:1.5px solid var(--line);
  border-radius:12px;cursor:pointer;font-size:.92rem;transition:.16s var(--ease);
}
.radio-card:hover{border-color:var(--blue-400)}
.radio-card input{accent-color:var(--blue-600);width:17px;height:17px;flex:none}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;color:var(--muted);margin-top:6px}
.consent input{margin-top:3px;width:17px;height:17px;accent-color:var(--blue-600);flex:none}
.form-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}

/* ---------- 20. Bandeau cookies ---------- */
.cookie{
  position:fixed;left:var(--gutter);right:var(--gutter);bottom:20px;z-index:80;max-width:520px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:22px;
}
.cookie h4{margin-bottom:6px}
.cookie p{font-size:.88rem;color:var(--muted);margin-bottom:14px}
.cookie-actions{display:flex;gap:9px;flex-wrap:wrap}

/* ---------- 21. Responsive ---------- */
@media (max-width:1080px){
  .fiche-layout{grid-template-columns:1fr}
  .aside-card{position:static;margin-top:0}
  .finder{grid-template-columns:1fr 1fr;margin-top:-30px}
  .finder .btn{width:100%}
  .footer-grid{grid-template-columns:1fr 1fr}
}
/* Le menu reste déployé tant que les items tiennent réellement. */
@media (max-width:1000px){
  .nav-menu{display:none}
  .burger{display:flex}
  .nav{min-height:66px}
  .mega{display:none}
}
/* Palier intermédiaire : on resserre plutôt que de basculer en burger. */
@media (max-width:1150px) and (min-width:1001px){
  .nav-menu{gap:0}
  .nav-menu .nav-link{padding-inline:11px;font-size:.93rem}
  .nav-actions{gap:8px}
  .nav-actions .btn--ghost .btn-label{display:none}
  .nav-actions .btn--ghost{padding-inline:11px}
}
@media (max-width:620px){
  body{font-size:16px}
  .finder{grid-template-columns:1fr;margin-top:-24px;padding:18px}
  /* Le pied garde deux colonnes : empilées, « Formations » et « Airlise »
     forçaient à dérouler trois écrans de liens. La marque, elle, tient la
     largeur entière. */
  .footer-grid{grid-template-columns:1fr 1fr;gap:26px 22px}
  .footer-brand{grid-column:1 / -1}
  .float-card--br{position:static;margin-top:14px;max-width:none}
  .acc-panel{padding-left:20px}
  .steps{gap:6px}
  .step{font-size:.8rem;padding:7px 12px}
  .topbar-left .topbar-item:not(:first-child){display:none}
}

/* ---------- 22. Impression ---------- */
@media print{
  .site-header,.topbar,.site-footer,.cookie,.finder,.btn{display:none!important}
  body{font-size:11pt}
  .fiche-hero{background:none;color:#000}
  .fiche-hero h1,.fiche-hero .lede{color:#000}
}

/* ---------- 23. Ajouts application ---------- */
/* menu mobile : voir section 49 */
.alert{
  border-radius:var(--radius);padding:16px 20px;margin-bottom:22px;font-size:.96rem;
  border:1px solid var(--lagoon-100);background:var(--lagoon-100);color:#0A6F73;
}
.alert--err{background:var(--coral-100);border-color:#FFD2C7;color:#B23A23}

.prose > :first-child{margin-top:0}
.prose > :last-child{margin-bottom:0}
.prose h3{margin-top:1.6em}
.prose ul{padding-left:1.2em}
.prose a{text-decoration:underline;text-underline-offset:2px}
.prose figure{margin:1.6em 0}
.prose figcaption{font-size:.86rem;color:var(--muted);margin-top:.6em}
.prose table{width:100%;border-collapse:collapse;font-size:.94rem;margin:1.4em 0}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.prose th{background:var(--canvas);font-family:var(--font-display);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}

/* Liste à coches dans le contenu éditorial */
.prose--check ul{list-style:none;padding:0}
.prose--check li{display:flex;gap:11px;align-items:flex-start;margin-bottom:.75em}
.prose--check li::before{
  content:"";flex:none;width:21px;height:21px;border-radius:50%;margin-top:2px;
  background:var(--lagoon-100) var(--coche) center / 13px 13px no-repeat;
}

a.filter{text-decoration:none;display:inline-flex;align-items:center}
a.filter[aria-pressed="true"]{background:var(--navy-800);border-color:var(--navy-800);color:#fff}

/* ---------- 24. Formulaire embarqué depuis l'app ---------- */
/* L'app sert sa propre page dans l'iframe : sa mise en page fait 560 px de large
   et porte deja sa carte blanche. On lui laisse cette largeur naturelle plutot
   que de l'etirer, et on ne rajoute ni bordure ni ombre par-dessus. */
.crm-embed{
  max-width:840px;margin-inline:auto;background:transparent;border:0;border-radius:0;box-shadow:none;
}
.crm-embed iframe{
  display:block;width:100%;height:780px;border:0;color-scheme:light;
}
@media (max-width:620px){ .crm-embed iframe{height:880px} }
.crm-embed-fallback{
  margin-top:14px;font-size:.86rem;color:var(--muted);text-align:center;
}

/* ---------- 25. Page « bientôt disponible » ---------- */
.soon{
  position:relative;min-height:100svh;display:grid;place-items:center;
  background:var(--navy-900);color:#fff;overflow:hidden;isolation:isolate;padding:clamp(28px,6vw,64px) 0;
}
.soon-media{position:absolute;inset:0;z-index:-2}
.soon-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.soon::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(150deg,rgba(5,34,54,.95) 0%,rgba(8,52,82,.9) 45%,rgba(14,143,148,.55) 100%);
}
.soon-inner{
  width:min(760px,92vw);margin-inline:auto;text-align:center;
}
.soon-logo{height:52px;width:auto;margin:0 auto clamp(24px,4vw,38px)}
.soon h1{
  color:#fff;font-size:clamp(2rem,1.2rem + 3.2vw,3.4rem);margin:1rem 0 .6em;
}
.soon-sub{
  font-size:clamp(1.02rem,.98rem + .35vw,1.18rem);color:#CFE3F1;
  max-width:56ch;margin-inline:auto;margin-bottom:2.2rem;
}
.soon-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.soon-foot{
  margin-top:clamp(34px,5vw,54px);padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;gap:22px;flex-wrap:wrap;justify-content:center;font-size:.88rem;color:#A9C6DC;
}
@media (max-width:620px){ .soon-cta .btn{width:100%} }

/* Bandeau d'aperçu, visible uniquement par les personnes autorisées */
.preview-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--coral-600);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:9px 16px;font-family:var(--font-display);font-size:.84rem;font-weight:700;
}
.preview-bar a{color:#fff;text-decoration:underline;font-weight:600}

/* ---------- 26. Méga-menu pleine largeur ---------- */
.site-header{position:sticky;top:0;z-index:60}
.nav-main{flex:1;display:flex;justify-content:center}
.nav-menu{gap:clamp(2px,1vw,14px)}
.nav-menu > li{position:static}
.nav-link{
  white-space:nowrap;border:0;background:none;cursor:pointer;font-family:var(--font-display);
  font-weight:650;font-size:.95rem;color:var(--navy-800);padding:11px 14px;border-radius:10px;
  display:flex;align-items:center;gap:6px;transition:background .16s var(--ease),color .16s var(--ease);
}
.nav-link:hover{background:var(--blue-50);color:var(--blue-600);text-decoration:none}
.nav-link[aria-expanded="true"]{background:var(--navy-800);color:#fff}
.nav-link[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-link .chev{width:11px;height:11px;opacity:.7;transition:transform .2s var(--ease)}

.mega{
  position:absolute;left:0;right:0;top:100%;background:#fff;
  border-top:1px solid var(--line-soft);box-shadow:0 24px 48px rgba(8,52,82,.13);
  animation:megaIn .18s var(--ease);
}
@keyframes megaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mega-inner{
  display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:clamp(22px,2.4vw,40px);
  padding-block:clamp(22px,2.4vw,34px);align-items:start;
}
.mega-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,26px)}
.mega-cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mega-col h3{
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lagoon-600);
  margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line-soft);
}
.mega-col ul{list-style:none;margin:0 0 12px;padding:0}
.mega-col li{margin:0}
.mega-col li a{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:6px 9px;margin-left:-9px;border-radius:8px;color:var(--navy-800);
  font-size:.83rem;font-weight:500;line-height:1.3;
}
/* Les intitulés longs sont coupés à deux lignes : le menu reste lisible */
.mega-col li a > span:not(.svc-ico){
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-width:0;
}
.mega-col li a:hover{background:var(--blue-50);color:var(--blue-600);text-decoration:none}
.mega-col li a small{color:var(--muted);font-size:.73rem;font-weight:600;white-space:nowrap}
.mega-col li a:hover small{color:var(--blue-500)}
.mega-more{
  display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-display);
  font-size:.78rem;font-weight:750;color:var(--blue-600);margin-top:2px;
}
.mega-more::after{content:"→";transition:transform .2s var(--ease)}
.mega-more:hover{text-decoration:none}
.mega-more:hover::after{transform:translateX(3px)}
.mega-col--alt{background:var(--canvas);border-radius:var(--radius);padding:14px 16px;margin:-6px}

.mega-side{
  background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 20px;display:flex;flex-direction:column;gap:9px;align-items:flex-start;
}
.mega-side h3{font-size:.98rem;margin:0;line-height:1.28}
.mega-side p{font-size:.82rem;color:var(--muted);margin:0;line-height:1.5}
.mega-side .btn{margin-top:4px;padding:10px 18px;font-size:.86rem}
.mega-side--lagoon{
  background:linear-gradient(150deg,var(--navy-800),var(--lagoon-600));border-color:transparent;color:#fff;
}
.mega-side--lagoon h3{color:#fff}
.mega-side--lagoon p{color:#CFE3F1}
.link-arrow--light{color:#fff}

.mega-backdrop{position:fixed;inset:0;top:0;background:rgba(5,34,54,.25);z-index:-1;animation:megaIn .2s var(--ease)}

.topbar-item--wide{display:inline-flex}
@media (max-width:1250px){ .topbar-item--wide{display:none} }
@media (max-width:1000px){
  .nav-main{display:none}
  .mega{display:none!important}
}

/* ---------- 27. Catalogue e-learning ---------- */
.el-hero{
  position:relative;background:linear-gradient(135deg,var(--navy-900),var(--navy-700) 60%,var(--lagoon-600));
  color:#fff;overflow:hidden;isolation:isolate;
}
.el-hero::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(46,163,242,.34),transparent 68%);z-index:-1}
.el-hero-inner{padding-block:clamp(50px,7vw,86px);max-width:760px}
.el-hero h1{color:#fff;margin:1rem 0 .5em}
.el-hero .accent{background:linear-gradient(96deg,var(--lagoon-500),var(--blue-400));-webkit-background-clip:text;background-clip:text;color:transparent}
.el-hero .lede{color:#CFE3F1}
.el-hero-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px;margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.el-hero-facts strong{
  display:block;font-family:var(--font-display);font-size:1.8rem;font-weight:850;
  letter-spacing:-.03em;line-height:1.1;
  /* le chiffre héritait de la couleur d'encre : illisible sur le fond marine */
  color:var(--lagoon-500);
}
.el-hero-facts span{display:block;margin-top:5px;font-size:.98rem;color:#CFE3F1;line-height:1.35}

.pill-n{display:inline-block;margin-left:6px;background:var(--line-soft);color:var(--muted);border-radius:99px;padding:1px 8px;font-size:.76rem}
.filter[aria-pressed="true"] .pill-n{background:rgba(255,255,255,.2);color:#fff}

.el-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(18px,2vw,26px)}
.el-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
.el-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--blue-100)}
.el-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--navy-800)}
.el-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.el-card:hover .el-media img{transform:scale(1.05)}
.el-tag{position:absolute;top:12px;left:12px;background:rgba(5,34,54,.82);color:#fff;backdrop-filter:blur(4px);
  border-radius:99px;padding:5px 12px;font-family:var(--font-display);font-size:.74rem;font-weight:750}
.el-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.el-body h3{font-size:1.06rem;margin-bottom:.4em}
.el-body h3 a{color:inherit}
.el-body h3 a:hover{color:var(--blue-600);text-decoration:none}
.el-body > p{font-size:.9rem;color:var(--muted);margin-bottom:1em}
.el-meta{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;padding:0;margin:0 0 16px}
.el-meta li{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted)}
.el-meta svg{width:14px;height:14px;color:var(--lagoon-600)}
.el-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:12px}
.el-price s{color:var(--muted);font-size:.82rem;margin-right:6px}
.el-price strong{font-family:var(--font-display);font-size:1.15rem;color:var(--navy-800)}

.step-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}
.step-n{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;margin-bottom:14px;
  background:linear-gradient(135deg,var(--blue-500),var(--lagoon-500));color:#fff;font-family:var(--font-display);font-weight:850}
.step-card h3{font-size:1rem}
.step-card p{font-size:.9rem;color:var(--muted);margin:0}

.lesson-list{list-style:none;padding:0;margin:0}
.lesson-list li{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:.94rem}
.lesson-list li:last-child{border-bottom:0}
.lesson-list small{margin-left:auto;color:var(--muted);font-size:.8rem}
.lesson-ico{width:26px;height:26px;border-radius:8px;background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center;flex:none}
.lesson-ico svg{width:14px;height:14px}

/* ---------- 28. Connexion apprenant ---------- */
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 116px)}
.auth-card{display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,5vw,64px);max-width:520px;margin-inline:auto;width:100%}
.auth-logo{height:40px;width:auto;margin-bottom:26px}
.auth-card h1{font-size:1.8rem;margin-bottom:.3em}
.auth-card > p{color:var(--muted);margin-bottom:1.8em;letter-spacing:normal;line-height:1.5;max-width:44ch}
.auth-card .form-field{margin-bottom:16px}
.auth-foot{font-size:.86rem;color:var(--muted);margin-top:24px}
.auth-oubli{font-size:.88rem;margin:14px 0 0}
.auth-oubli a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.auth-oubli a:hover{color:var(--blue-600)}
.auth-card .alert{margin-bottom:18px}
/* ---------- Œil « révéler le mot de passe » ---------- */
.mdp-boite{position:relative;display:block}
.mdp-boite > input{width:100%;padding-right:48px}
.mdp-oeil{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;display:grid;place-items:center;
  background:none;border:0;border-radius:9px;cursor:pointer;color:var(--muted);padding:0;
}
.mdp-oeil svg{width:19px;height:19px}
.mdp-oeil:hover{color:var(--blue-600);background:var(--blue-50)}
.mdp-oeil:focus-visible{outline:2px solid var(--lagoon-500);outline-offset:1px}
.mdp-oeil[aria-pressed="true"]{color:var(--blue-600)}
.auth-side{position:relative;overflow:hidden;background:var(--navy-900)}
.auth-side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.auth-side-in{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;padding:clamp(28px,4vw,52px);color:#fff;
  /* Le voile suit le texte : il s'assombrit au milieu, là où le bloc est posé. */
  background:linear-gradient(180deg,rgba(5,34,54,.24),rgba(5,34,54,.66) 38%,rgba(5,34,54,.66) 72%,rgba(5,34,54,.42))}
/* Sans cela, la pastille s'étire sur toute la largeur de la colonne. */
.auth-side-in .badge{align-self:flex-start;width:auto;flex:0 0 auto}
.auth-side-in h2{color:#fff;margin:.6em 0 .3em}
.auth-side-in p{color:#CFE3F1;max-width:40ch;margin:0}
@media (max-width:900px){ .auth{grid-template-columns:1fr} .auth-side{display:none} }

/* ---------- 29. Tableau de bord apprenant ---------- */
.dash-head{background:linear-gradient(135deg,var(--navy-900),var(--navy-700));color:#fff;padding-block:clamp(34px,4vw,56px)}
.dash-head h1{color:#fff;margin:.7rem 0 .3em;font-size:clamp(1.7rem,1.2rem + 1.8vw,2.5rem)}
.dash-head .lede{color:#CFE3F1;margin:0}
.dash-head-in{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-top:32px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.dash-stats strong{display:block;font-family:var(--font-display);font-size:1.7rem;font-weight:850;letter-spacing:-.03em}
.dash-stats span{font-size:.85rem;color:#A9C6DC}

.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:20px}
.dash-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.dash-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.dash-card-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy-800)}
.dash-card-media img{width:100%;height:100%;object-fit:cover}
.dash-pct{position:absolute;right:12px;bottom:12px;background:rgba(5,34,54,.85);color:#fff;border-radius:99px;
  padding:4px 12px;font-family:var(--font-display);font-weight:800;font-size:.82rem}
.dash-card-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.dash-card-body h3{font-size:1rem;margin:0}
.dash-card-body .btn{margin-top:auto}
.dash-sub{font-size:.85rem;color:var(--muted);margin:0}
.dash-card .meter{height:7px}

/* ---------- 30. Lecteur de parcours ---------- */
.player{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:100vh;background:var(--canvas)}
.player-side{background:var(--navy-900);color:#B9D3E5;padding:24px 20px;position:sticky;top:0;height:100vh;overflow:auto}
/* La barre « Sommaire » et son voile ne servent qu'au mobile. */
.player-bar,.player-fond{display:none}
.player-back{display:inline-flex;align-items:center;gap:8px;color:#B9D3E5;font-size:.86rem;font-weight:650;margin-bottom:20px}
.player-back svg{width:15px;height:15px}
.player-side h2{color:#fff;font-size:1.02rem;margin-bottom:14px}
.player-side .meter{background:rgba(255,255,255,.14)}
.player-progress{font-size:.8rem;color:#8FAFC7;margin:8px 0 22px}
/* Titres de module du sommaire : petits, en capitales espacées. Le sélecteur
   est renforcé car « body.espace h3 » (plus loin) les remettait à 1rem. */
body .player-side .player-nav h3{color:#7FA6C4;font-size:.72rem;line-height:1.35;letter-spacing:.1em;font-weight:700;text-transform:uppercase;margin:22px 0 10px}
.player-nav ul{list-style:none;margin:0;padding:0}
.pl-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:#CDE2F1;font-size:.88rem;line-height:1.35}
.pl-item:hover{background:rgba(255,255,255,.08);text-decoration:none;color:#fff}
.pl-item.is-on{background:var(--blue-600);color:#fff}
.pl-item.is-done .pl-ico{background:var(--lagoon-500);color:#fff;border-color:transparent}
.pl-item.is-locked{opacity:.42;cursor:not-allowed}
.pl-ico{width:24px;height:24px;border-radius:7px;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;flex:none}
.pl-ico svg{width:13px;height:13px}
.pl-item small{margin-left:auto;font-size:.74rem;opacity:.7}
/* La marge du lecteur est une variable : les supports qui doivent aller
   d'un bord à l'autre sur mobile s'en servent pour l'annuler. */
.player-main{--player-pad:clamp(24px,3.5vw,48px);padding:var(--player-pad);max-width:1120px;width:100%;min-width:0}
/* La colonne s'élargit pour les documents, mais le texte garde une
   longueur de ligne lisible : on ne lit pas confortablement sur 90 caractères. */
.player-main .prose{max-width:70ch}
.player-main h1{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);margin-bottom:1rem}
.player-crumb{font-size:.82rem;color:var(--muted);margin-bottom:.4rem;font-family:var(--font-display);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.player-video{aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:#000;box-shadow:var(--shadow-lg);margin-bottom:26px}
.player-video iframe{width:100%;height:100%;border:0}
.player-pdf{height:min(86vh,1000px);min-height:520px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin-bottom:18px;background:#fff}
.player-pdf object{width:100%;height:100%}
/* Le corps d'une leçon est du texte, pas une carte : un encadré autour d'une
   ligne de consigne n'apporte rien et casse la lecture. */
.player-text{margin-bottom:26px}
.player-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.player-toggle{display:none}

.quiz{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,3vw,32px)}
.quiz-q{border:0;padding:0;margin:0 0 28px;text-align:left}
.quiz-q legend{display:flex;align-items:center;justify-content:flex-start;gap:11px;text-align:left;
  font-family:var(--font-display);font-weight:750;color:var(--ink);font-size:1rem;margin-bottom:12px}
.quiz-n{width:26px;height:26px;border-radius:8px;background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center;font-size:.8rem;flex:none}
.quiz-answers{display:flex;flex-direction:column;gap:9px}
.quiz-a{display:flex;align-items:center;gap:11px;padding:13px 16px;border:1.5px solid var(--line);
  border-radius:12px;cursor:pointer;font-size:.95rem;font-weight:500;text-align:left;transition:.15s}
.quiz-a span{font-weight:500}
.quiz-a:hover{border-color:var(--blue-400);background:var(--blue-50)}
.quiz-a input{width:18px;height:18px;accent-color:var(--blue-600);flex:none}
.quiz-a:has(input:checked){border-color:var(--blue-600);background:var(--blue-50)}
.quiz-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line-soft)}
.quiz-foot .hint{font-size:.84rem;color:var(--muted)}
.quiz-result{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:var(--radius);margin-bottom:20px;
  background:var(--blue-50);border:1px solid var(--blue-100)}
.quiz-result strong{font-family:var(--font-display)}
.quiz-result span{color:var(--muted);font-size:.9rem}
.quiz-result--ok{background:var(--lagoon-100);border-color:#B7E7E9;color:#0A6F73}
.quiz-result--ko{background:var(--coral-100);border-color:#FFD2C7;color:#B23A23}

@media (max-width:900px){
  /* minmax(0,1fr) et non 1fr : sans le minimum à zéro, un support large
     (présentation, PDF) fait enfler la colonne et déborder l'écran. */
  .player{grid-template-columns:minmax(0,1fr)}
  /* Le sommaire devient un menu qui descend du haut, sur les deux tiers de
     l'écran au plus. Ce qui reste en dessous est un vide : on y clique pour
     refermer. */
  .player-side{
    position:fixed;left:0;right:0;top:0;z-index:80;
    height:auto;max-height:66vh;overflow:auto;padding:18px 20px 22px;
    border-radius:0 0 18px 18px;box-shadow:0 22px 50px rgba(3,20,34,.45);
    transform:translateY(-101%);
    transition:transform .32s cubic-bezier(.22,.61,.36,1);
    overscroll-behavior:contain;
  }
  .player-side.is-open{transform:none}
  /* le bouton de fermeture flotte au-dessus : on lui réserve sa place */
  .player-side .player-back,
  .player-side h2{padding-right:56px}

  .player-fond{
    position:fixed;inset:0;z-index:79;background:rgba(3,20,34,.55);
    opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
  }
  .player-fond.is-on{opacity:1;pointer-events:auto}
  html.sommaire-ouvert{overflow:hidden}

  /* La barre du haut : le libellé à gauche, le bouton à droite. */
  .player-bar{display:flex !important;align-items:center;justify-content:flex-end;gap:12px;margin-bottom:18px}
  .player-fond{display:block}
  .player-bar-lib{font-family:var(--font-display);font-weight:750;font-size:.92rem;color:var(--ink)}
  .player-toggle{
    display:grid;place-items:center;width:44px;height:44px;flex:none;
    padding:0;border-radius:13px;border:1.5px solid var(--line);
    background:#fff;color:var(--ink);cursor:pointer;
    transition:background .18s var(--ease),border-color .18s var(--ease);
  }
  .player-toggle svg{width:22px;height:22px}
  .player-toggle .ico-x{display:none}
  .player-toggle[aria-expanded="true"]{
    position:relative;z-index:81;background:var(--ink);border-color:var(--ink);color:#fff;
  }
  .player-toggle[aria-expanded="true"] .ico-menu{display:none}
  .player-toggle[aria-expanded="true"] .ico-x{display:block}
}

/* ---------- 31. Attestation ---------- */
.cert{min-height:100vh;background:var(--canvas);display:grid;place-items:center;padding:clamp(20px,4vw,48px)}
.cert-sheet{background:#fff;width:min(820px,100%);padding:clamp(34px,5vw,68px);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);text-align:center;border-top:6px solid var(--blue-600)}
.cert-logo{height:44px;width:auto;margin:0 auto 26px}
.cert-kicker{font-family:var(--font-display);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lagoon-600);margin-bottom:1.4rem}
.cert-sheet h1{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.4rem);margin-bottom:.6rem}
.cert-txt{color:var(--muted);margin:0 0 .6rem}
.cert-course{font-family:var(--font-display);font-size:1.3rem;font-weight:800;color:var(--navy-700);margin:.4rem 0 1rem}
.cert-date{font-size:.95rem;color:var(--body);margin-bottom:2.4rem}
.cert-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;border-top:1px solid var(--line);text-align:left}
.cert-foot strong{display:block;font-family:var(--font-display);color:var(--ink)}
.cert-foot span{display:block;font-size:.8rem;color:var(--muted)}
.cert-seal{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--blue-600),var(--lagoon-500));color:#fff;font-family:var(--font-display);font-weight:850;font-size:.82rem;letter-spacing:.06em}
.cert-ref{font-size:.74rem;color:var(--muted);margin:18px 0 0;letter-spacing:.08em}
.cert-print{margin-top:24px}
@media print{
  .cert{background:#fff;padding:0}
  .cert-sheet{box-shadow:none;width:100%}
  .cert-print{display:none}
}

/* ============================================================
   32. Méga-menu « Accompagnement »
   ============================================================ */
.svc-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:10px;
}
.svc-card{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;border:1px solid var(--line-soft);border-radius:12px;
  background:#fff;color:var(--navy-800);text-decoration:none;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.svc-card:hover{
  border-color:var(--lagoon-500);text-decoration:none;
  box-shadow:0 6px 20px rgba(11,58,92,.09);transform:translateY(-1px);
}
.svc-ico{
  flex:0 0 40px;width:40px;height:40px;border-radius:11px;
  display:grid;place-items:center;
  background:var(--lagoon-100);color:var(--lagoon-600);
}
.svc-ico svg{width:21px;height:21px}
.svc-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.svc-txt strong{font-family:var(--font-display);font-size:.9rem;font-weight:600;line-height:1.25}
.svc-txt span{
  font-size:.775rem;color:var(--muted);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.svc-arrow{
  flex:0 0 16px;width:16px;height:16px;color:var(--lagoon-600);
  opacity:0;transform:translateX(-4px);transition:opacity .16s ease,transform .16s ease;
}
.svc-card:hover .svc-arrow{opacity:1;transform:none}

/* sous-groupes du menu mobile : voir section 49 */
/* ============================================================
   33. En-tête escamotable + sous-menu de page
   ============================================================ */
.site-header{will-change:transform;transition:box-shadow .25s var(--ease),transform .28s var(--ease)}
html.hdr-hidden .site-header{transform:translateY(-102%)}
html.hdr-hidden .topbar{pointer-events:none}

.pagenav{
  position:sticky;top:var(--hdr-h,68px);z-index:55;
  background:rgba(255,255,255,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:top .28s var(--ease),opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.pagenav.is-on{opacity:1;visibility:visible;transform:none}
html.hdr-hidden .pagenav{top:0}
.pagenav-inner{display:flex;align-items:center;gap:18px;min-height:54px}
.pagenav-title{
  font-family:var(--font-display);font-weight:750;font-size:.88rem;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;flex:none;
  padding-right:18px;border-right:1px solid var(--line-soft);
}
.pagenav ul{
  list-style:none;display:flex;align-items:center;gap:2px;margin:0;padding:0;
  overflow-x:auto;scrollbar-width:none;flex:1 1 auto;
}
.pagenav ul::-webkit-scrollbar{display:none}
.pagenav li{margin:0}
.pagenav ul a{
  display:block;white-space:nowrap;padding:7px 11px;border-radius:8px;
  font-size:.83rem;font-weight:500;color:var(--body);position:relative;
}
.pagenav ul a:hover{background:var(--blue-50);color:var(--blue-600);text-decoration:none}
.pagenav ul a.is-current{color:var(--blue-600);font-weight:650;background:var(--blue-50)}
.pagenav-cta{flex:none}
@media (max-width:900px){
  .pagenav-title,.pagenav-cta{display:none}
  .pagenav-inner{min-height:48px}
}
.fiche-main > section{scroll-margin-top:calc(var(--hdr-h,68px) + 66px)}
@media (prefers-reduced-motion:reduce){
  .site-header,.pagenav{transition:none}
  html.hdr-hidden .site-header{transform:none}
}

/* ============================================================
   34. Prochaines sessions : filtre par territoire
   ============================================================ */
.sessions-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:18px;
}
.sessions-head h2{margin:0}
h2.with-ico{display:flex;align-items:center;gap:11px}
.ico-cal{
  flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:#FDEAE7;color:var(--red-600);
}
.ico-cal svg{width:19px;height:19px}
.sessions-filter{display:flex;align-items:center;gap:9px}
.sessions-filter label{font-size:.8rem;font-weight:650;color:var(--muted);font-family:var(--font-display)}
.select-soft{
  appearance:none;-webkit-appearance:none;
  padding:9px 34px 9px 13px;border:1px solid var(--line);border-radius:10px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236E8397' stroke-width='1.8'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5'/%3E%3C/svg%3E") no-repeat right 12px center/11px;
  font-family:var(--font-body);font-size:.87rem;color:var(--ink);cursor:pointer;
}
.select-soft:focus{outline:2px solid var(--blue-400);outline-offset:1px;border-color:var(--blue-400)}
/* Le territoire : son contour en petit, son nom en noir, pas de pastille —
   la pastille faisait concurrence aux dates, qui sont l'information. */
.terr-nom{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--ink);font-size:.88rem;font-weight:650;font-family:var(--font-display);
}
.terr-ico{width:17px;height:17px;flex:none;opacity:.85}
.terr-tag{
  display:inline-block;padding:2px 9px;border-radius:999px;
  background:var(--blue-50);color:var(--navy-700);
  font-size:.74rem;font-weight:650;font-family:var(--font-display);
}
/* « .sessions » EST la table : « .sessions table td » cherchait une table
   dans la table et ne s'appliquait jamais. Le lieu exact restait donc en
   ligne, tantôt à côté du territoire, tantôt renvoyé dessous selon la
   longueur du nom. Il se place maintenant toujours en dessous. */
.sessions td small{
  display:block;margin-top:4px;color:var(--muted);font-size:.79rem;line-height:1.4;
}
/* Les deux lignes de la colonne « Lieu » démarrent au même niveau que la
   date : sans cela, une cellule à deux lignes décalait tout le reste. */
.sessions tbody td{vertical-align:top}
.sessions tbody td .badge,
.sessions tbody td .link-arrow{margin-top:1px}
.sessions-empty{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:22px 24px;border:1px dashed var(--line);border-radius:var(--radius);
  background:var(--canvas);color:var(--muted);
}
.sessions-empty p{margin:0}

/* ============================================================
   35. Bloc candidature (fond vert)
   ============================================================ */
.apply-block{
  border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(152deg,#E2F6EC,#CDEDDD 58%,#BFE7D2);
  border:1px solid #A8DCC2;
}
.apply-inner{padding:clamp(24px,3.4vw,42px)}
.apply-inner h2{margin:12px 0 0;color:#0A3E2C}
.apply-inner .lede{color:#2F6B55;margin:.6rem 0 1.4rem;max-width:58ch}
/* Le métier visé : plus grand que le chapô, plus petit que le titre. */
/* Dans le cadre blanc, au-dessus des champs. */
.apply-pret{
  margin:0;padding:0 2px clamp(14px,1.6vw,18px);
  font-family:var(--font-display);color:#07301F;font-weight:800;
  font-size:clamp(1.15rem,1rem + .8vw,1.5rem);line-height:1.3;letter-spacing:-.015em;
}
.apply-pret strong{font-weight:800;color:#07301F}
.badge--apply{background:var(--green-600);color:#fff;border:0}
.apply-frame{
  background:#fff;border-radius:var(--radius-lg);padding:clamp(14px,1.8vw,24px);
  box-shadow:0 10px 30px rgba(11,107,71,.10);
}
.apply-frame iframe{display:block;border:0;width:100%;border-radius:calc(var(--radius) - 6px)}
/* Le cadre blanc déborde un peu dans la gouttière verte : le formulaire y
   gagne en largeur sans que le texte au-dessus ne bouge d'un pixel. */
/* Le cadre déborde un peu plus, de quoi loger le rembourrage sans rétrécir
   le formulaire lui-même. */
.apply-frame{max-width:none;margin-inline:calc(-1 * clamp(14px,2.6vw,40px))}
@media (max-width:620px){ .apply-frame{margin-inline:-10px;padding:12px} }
.apply-frame .crm-embed{max-width:none}
.apply-frame .crm-embed-fallback{margin:10px 0 4px;color:#4A7D68}
.apply-frame .crm-embed-fallback a{color:var(--green-700);text-decoration:underline}

/* --- ajustements sessions / sous-menu --- */
.sessions-empty[hidden]{display:none}
.fiche-layout > *{min-width:0}
.table-scroll{min-width:0;max-width:100%}
@media (min-width:760px){.sessions{min-width:560px}}
.sessions td{padding:14px 10px}
.sessions th{padding:0 10px 10px}
.sessions{font-size:.9rem}
.sessions td:last-child{white-space:nowrap}
.sessions td .badge{white-space:nowrap}
/* Un lieu long doit pouvoir passer à la ligne plutôt que déborder. */
  .sessions td small{white-space:normal}
.terr-tag,.terr-nom{white-space:nowrap;margin-right:7px}
.sessions tr td:first-child strong{white-space:nowrap}
.pagenav ul{min-width:0}
.pagenav-cta{margin-left:auto}
.pagenav-inner{position:relative}
.pagenav ul{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
}

/* ============================================================
   36. Visuel de bandeau + vidéo de présentation
   ============================================================ */
.fiche-hero--img{position:relative;isolation:isolate}
.fiche-hero--img::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--hero);background-size:cover;background-position:center;
}
.fiche-hero--img::after{
  content:"";position:absolute;inset:0;z-index:-1;
  width:auto;height:auto;right:0;bottom:0;border-radius:0;
  background:linear-gradient(100deg,rgba(8,52,82,.95),rgba(8,52,82,.82) 52%,rgba(11,90,110,.72));
}
.video-frame{
  position:relative;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;
  background:var(--navy-900);box-shadow:0 12px 34px rgba(8,52,82,.16);
}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ============================================================
   37. Méga-menu « Nos services » — colonnes par groupe
   ============================================================ */
.mega-cols--auto{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
#mega-services .mega-col li a{align-items:center;justify-content:flex-start;gap:10px}
#mega-services .mega-col li a > span:last-child{flex:1 1 auto}
.svc-ico--sm{
  flex:0 0 28px;width:28px;height:28px;border-radius:8px;
  background:var(--lagoon-100);color:var(--lagoon-600);
  display:grid;place-items:center;
}
.svc-ico--sm svg{width:15px;height:15px}
.mega-col li a:hover .svc-ico--sm{background:var(--blue-100);color:var(--blue-600)}

/* --- En-tête mobile : la ligne débordait, le bouton menu sortait de l'écran --- */
@media (max-width:720px){
  .nav-actions .btn--primary,.lang{display:none}
  .brand img{height:32px}
  .nav{gap:10px}
  .topbar-left span:not(:first-child),.topbar-right{display:none}
}
@media (max-width:900px){
  .wrap,.wrap-narrow{overflow-x:clip}
}
.player-attach{margin-top:20px}
.player-attach .btn svg{width:17px;height:17px}

/* ---------- Correction d'un quiz ---------- */
.quiz-corr{margin-top:22px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:6px 20px 18px}
.quiz-corr summary{cursor:pointer;font-family:var(--font-display);font-weight:700;color:var(--navy-700);padding:12px 0}
.corr-q{padding:16px 0;border-top:1px solid var(--line-soft)}
.corr-head{display:flex;gap:10px;align-items:flex-start;font-family:var(--font-display);font-weight:650;color:var(--ink);margin:0 0 10px}
.corr-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.corr-list li{display:flex;gap:9px;align-items:baseline;padding:7px 11px;border-radius:9px;background:var(--canvas);font-size:.92rem}
.corr-list li.is-good{background:var(--green-100);color:#0A4B34}
.corr-list li.is-bad{background:#FDEAE7;color:#8C2A1D}
.corr-list li em{margin-left:auto;font-size:.76rem;color:var(--muted);font-style:normal}
.corr-mark{flex:none;width:16px;font-weight:800}
.corr-expl{margin-top:10px;padding:11px 14px;border-left:3px solid var(--lagoon-500);background:var(--blue-50);border-radius:0 9px 9px 0;font-size:.92rem}
.corr-expl p{margin:0 0 .4em}
.corr-mine,.corr-note{font-size:.92rem;background:var(--canvas);padding:10px 13px;border-radius:9px;margin:0 0 8px}

/* ============================================================
   38. Méga-menu formations : colonne de droite et alignement
   ============================================================ */
/* « Tout le secteur » toujours collé en bas, quelle que soit la hauteur */
.mega-col{display:flex;flex-direction:column;min-height:100%}
.mega-col ul{flex:1 1 auto}
.mega-col .mega-more{margin-top:auto;padding-top:10px}

.mega-aside{display:flex;flex-direction:column;gap:14px}

/* Encart Erasmus+ avec photo */
.mega-promo{
  position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  min-height:132px;color:#fff;text-decoration:none;isolation:isolate;
}
.mega-promo-img{
  position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;
  transition:transform .5s var(--ease);
}
.mega-promo::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,52,82,.28),rgba(8,52,82,.86));
}
.mega-promo:hover{text-decoration:none}
.mega-promo:hover .mega-promo-img{transform:scale(1.05)}
.mega-promo-in{display:flex;flex-direction:column;gap:5px;padding:14px 16px 15px;height:100%;justify-content:flex-end}
.mega-promo-in strong{font-family:var(--font-display);font-size:.98rem;font-weight:750;line-height:1.25;color:#fff}
.mega-promo-in > span:last-child{font-size:.79rem;line-height:1.45;color:#CFE3F1}
.badge--white{align-self:flex-start;background:rgba(255,255,255,.92);color:var(--navy-800);border:0;font-size:.7rem}

/* Le bloc « Vous hésitez ? » prend le vert d'eau de son badge */
.mega-side--soft{
  background:linear-gradient(160deg,var(--lagoon-100),#E4F5F6 60%,#DCF1F2);
  border:1px solid #B9E6E8;
}
.mega-side--soft h3{color:#07484B}
.mega-side--soft p{color:#3F7376}
.mega-side--soft .badge--lagoon{background:#fff;color:var(--lagoon-600)}
.mega-side--soft .link-arrow{color:var(--lagoon-600)}

/* ============================================================
   39. Bandeau de fiche : vidéo à droite, repères sur toute la ligne
   ============================================================ */
.fiche-hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 366px;
  gap:clamp(28px,4vw,56px);align-items:center;
  padding-bottom:clamp(26px,3vw,38px);position:relative;z-index:2;
}
.fiche-hero-grid .fiche-hero-inner{padding-bottom:0;max-width:none}
.fiche-hero-media .video-frame{
  /* Un liseré blanc de 3 px : sur le bandeau sombre, il détache la vidéo. */
  box-shadow:0 18px 44px rgba(0,0,0,.34);border:3px solid #fff;
}
/* La ligne de reperes se tient entre deux traits : le filet qui la separe du
   titre, et l'arete du bandeau de sections juste dessous. Elle se tient
   serree contre les deux -- 25 px en haut, un rien de plus en bas pour que
   le bloc tarif garde son degagement. */
.fiche-facts--wide{
  grid-template-columns:repeat(var(--n,4),minmax(0,1fr));
  margin-top:0;position:relative;z-index:2;
  /* Le bas garde toujours quelques pixels d'avance sur le haut : c'est de
     ce cote que le bandeau de sections mord de 6 px sur la ligne, sans quoi
     l'ecart du bas passerait sous celui du haut des 1100 px. */
  padding-top:clamp(22px,1.8vw,25px);padding-bottom:clamp(31px,2.4vw,34px);
  gap:18px clamp(14px,1.6vw,26px);
}
.fiche-facts--wide .fact{align-items:flex-start}
.fiche-facts--wide .fact-ico{width:34px;height:34px;border-radius:10px}
.fiche-facts--wide .fact-ico svg{width:17px;height:17px}
.fiche-facts--wide .fact small{font-size:.69rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fiche-facts--wide .fact strong{font-size:.92rem;line-height:1.25;display:block}
.fiche-facts--wide .fact > span{min-width:0}
@media (max-width:1100px){
  .fiche-hero-grid{grid-template-columns:1fr;align-items:start}
  .fiche-hero-media{max-width:540px}
  .fiche-facts--wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr))}
}

/* Le bloc tarif suit le défilement, sous la barre de sections */
.fiche-layout > aside{align-self:stretch}
/* 24 px sous le bandeau de sections, et non 74 : l'ecart laissait une
   bande blanche entre les deux alors qu'ils se suivent. */
.aside-card{top:calc(var(--hdr-h,68px) + 24px)}
/* le bloc tarif ne doit plus mordre sur la ligne de repères */
/* Les gouttieres de la ligne de reperes sont desormais les memes a toutes
   les largeurs : plus de reprise ici, seul le bloc tarif remonte. */
@media (min-width:1101px){
  .aside-card{margin-top:-34px}
}
/* l'icône reste une grille centrée, quoi qu'il arrive aux libellés voisins */
.mega-col li a > span.svc-ico{display:grid;place-items:center;overflow:visible}

/* ---------- En-tête compact : marque, langue, espace, menu ---------- */
@media (max-width:720px){
  /* la langue et l'accès à l'espace restent accessibles au doigt */
  .lang{display:flex}
  .nav-actions .btn--ghost{display:inline-flex}
}
@media (max-width:620px){
  .nav-actions .btn--ghost .btn-label{display:none}
  .nav-actions .btn--ghost{padding:9px 11px}
  .nav-actions{gap:7px}
  .lang{font-size:.78rem}
  .lang a{padding:4px 5px}
}
@media (max-width:400px){
  .brand img{height:28px}
  .nav{gap:8px}
}
@media (max-width:365px){
  .wrap{padding-inline:14px}
  .lang span{display:none}
  .lang a{padding:3px 4px}
  .nav-actions .btn--ghost{padding:8px}
  .burger{width:40px;height:40px}
}

/* ============================================================
   40. Accueil : bandeau resserré, recherche intuitive, filtres collants
   ============================================================ */
.hero-inner{
  padding-block:clamp(34px,4.6vw,62px) clamp(38px,4.4vw,62px);
  /* même retrait des deux côtés : le bandeau ne penche plus à droite */
  max-width:var(--wrap);padding-inline:calc(var(--gutter) + 50px);
}
/* le texte est décalé de 50 px et ne s'étale pas */
.hero-text{max-width:720px}
.hero h1{font-size:clamp(1.85rem,1.25rem + 2vw,2.85rem);margin-bottom:.3em}
.hero-sub{font-size:clamp(1rem,.97rem + .3vw,1.14rem);margin-bottom:1.3rem;max-width:52ch}
.hero-cta{margin-bottom:1.5rem}
.hero-trust{padding-top:0}
.hero-trust img{height:42px}
.hero-trust p{font-size:.8rem}
@media (max-width:900px){ .hero-inner{padding-inline:var(--gutter)} }

/* Grille du catalogue sur quatre colonnes */
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* on tient les quatre colonnes le plus longtemps possible : la gouttière entre
   les cartes se resserre avant qu'on en retire une. */
@media (max-width:1150px){ .grid-4{gap:14px} }
@media (max-width:1040px){ .grid-4{gap:11px} }
@media (max-width:980px){ .grid-4{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} }
@media (max-width:760px){ .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .grid-4{grid-template-columns:1fr} }
.grid-4 .f-card h3{font-size:1rem;line-height:1.3}
.grid-4 .f-card p{font-size:.86rem}

/* Saisie intuitive */
.ac{position:relative}
.ac-list{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:70;
  list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 16px 40px rgba(8,52,82,.16);max-height:340px;overflow:auto;
}
.ac-list[hidden]{display:none}
.ac-list li{margin:0}
.ac-list a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 11px;border-radius:9px;color:var(--navy-800);font-size:.9rem;line-height:1.3;
}
.ac-list a small{color:var(--muted);font-size:.78rem;flex:none}
.ac-list li.is-on a,.ac-list a:hover{background:var(--blue-50);color:var(--blue-600);text-decoration:none}
.ac-list mark{background:#DCEEFB;color:inherit;border-radius:3px;padding:0 1px}

/* Barre de filtres collante */
.cat-bar-sentinel{height:1px}
.cat-bar{
  position:sticky;top:calc(var(--hdr-h,68px) + 8px);z-index:56;margin-bottom:26px;
  transition:box-shadow .2s var(--ease),background .2s var(--ease),padding .2s var(--ease);
  border-radius:var(--radius);padding:4px 0;
}
html.hdr-hidden .cat-bar{top:8px}
.cat-bar.is-stuck{
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  box-shadow:0 8px 24px rgba(8,52,82,.10);padding:9px 14px;
  border:1px solid var(--line-soft);
}
.cat-bar-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cat-search{position:relative;flex:0 1 320px;display:flex;align-items:center}
.cat-search > svg{position:absolute;left:12px;width:17px;height:17px;color:var(--muted);pointer-events:none}
.cat-search .field{padding:10px 12px 10px 36px;font-size:.9rem;border-radius:11px}
.cat-bar .filters{margin:0;flex:1 1 auto}
.cat-bar.is-stuck .filter{padding:7px 13px;font-size:.83rem}
.cat-bar.is-stuck .cat-search .field{padding-block:8px;font-size:.86rem}
[data-filter-grid].is-empty::after{
  content:"Aucune de ces formations ne correspond — le catalogue complet en compte davantage.";
  grid-column:1/-1;text-align:center;color:var(--muted);padding:34px 16px;
  border:1px dashed var(--line);border-radius:var(--radius);background:#fff;
}
@media (max-width:700px){ .cat-search{flex:1 1 100%} }

/* ============================================================
   41. QCM d'orientation
   ============================================================ */
.quiz-home{
  max-width:840px;margin-inline:auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:clamp(24px,3.2vw,40px);
}
.quiz-steps{display:flex;gap:6px;justify-content:center;margin-bottom:22px}
.quiz-steps span{width:44px;height:4px;border-radius:2px;background:var(--line);transition:background .25s var(--ease)}
.quiz-steps span.is-on{background:var(--blue-600)}
/* Portée au quiz d'accueil : « .quiz-q » désigne aussi le <fieldset> du
   lecteur de parcours, qui n'a rien à voir et héritait de ce centrage. */
.quiz-home .quiz-q{
  font-family:var(--font-display);font-weight:750;font-size:clamp(1.15rem,1rem + .7vw,1.5rem);
  color:var(--ink);text-align:center;margin:0 0 22px;line-height:1.3;
}
.quiz-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
.quiz-opt{
  display:flex;flex-direction:column;gap:5px;text-align:left;cursor:pointer;
  padding:16px 18px;border:1.5px solid var(--line);border-radius:var(--radius);
  background:var(--canvas);font-family:var(--font-body);
  transition:border-color .16s var(--ease),background .16s var(--ease),transform .16s var(--ease);
}
.quiz-opt:hover{border-color:var(--blue-400);background:var(--blue-50);transform:translateY(-2px)}
.quiz-opt:focus-visible{outline:2px solid var(--blue-400);outline-offset:2px}
.quiz-opt strong{font-family:var(--font-display);font-size:.98rem;font-weight:700;color:var(--ink);line-height:1.25}
.quiz-opt span{font-size:.85rem;color:var(--muted);line-height:1.45}
.quiz-end{text-align:center}
.quiz-end p{color:var(--body);max-width:56ch;margin:0 auto 1.6rem}
.quiz-foot{display:flex;justify-content:center;gap:10px;margin-top:22px;min-height:36px}
.quiz-foot .btn[hidden]{display:none}
.quiz-opts[hidden],.quiz-end[hidden]{display:none}

/* ============================================================
   42. Accueil : vidéo de présentation et organismes financeurs
   ============================================================ */
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 420px;
  gap:clamp(26px,3.4vw,52px);align-items:center;
}
.hero-grid--solo{grid-template-columns:1fr}
.hero-text{min-width:0;max-width:720px}
.hero-video .video-frame{
  box-shadow:0 20px 50px rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.16);
}
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr}
  .hero-video{max-width:520px}
}

/* Financeurs : trois colonnes, logo au-dessus du nom */
.funding--logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
@media (max-width:900px){ .funding--logos{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .funding--logos{grid-template-columns:1fr} }
.funding--logos .funding-item{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:24px 20px;
}
.funding-logo{
  display:grid;place-items:center;height:52px;margin-bottom:8px;width:100%;
}
.funding-logo img{max-height:52px;width:auto;object-fit:contain}
.funding--logos .funding-item strong{font-size:1.02rem;margin:0;color:var(--navy-800)}
/* sans logo, le nom porte la carte à lui seul */
.funding--logos .funding-item:not(:has(.funding-logo)) strong{font-size:1.12rem}
.funding--logos .funding-item span{font-size:.85rem;line-height:1.45}

/* Témoignages : la vidéo occupe le tiers gauche, les avis défilent à droite */
.reviews-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(22px,3vw,42px);align-items:center}
.reviews-layout--solo{grid-template-columns:1fr}
.reviews-video .video-frame{box-shadow:0 12px 32px rgba(8,52,82,.16)}
.reviews-video p{margin:12px 0 0;font-size:.9rem;line-height:1.45;color:var(--muted)}
.reviews-video .rev-legal{margin-top:18px;font-size:.78rem;line-height:1.5;color:var(--muted);opacity:.85}
.grid-reviews{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------- Carrousel d'avis ----------
   Le rail défile à l'horizontale ; chaque carte s'efface et recule à mesure
   qu'elle s'éloigne du centre. La variable --p vaut 0 au centre, 1 au bord :
   elle est posée par le script, au fil du défilement. */
.rev-carrousel{position:relative}
.rev-rail{
  display:flex;gap:clamp(14px,1.8vw,22px);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  /* surtout pas « smooth » : le script anime scrollLeft image par image, et
     chaque affectation relancerait un défilement lissé par-dessus — le rail
     poursuivrait une cible mouvante et mettrait des secondes à arriver. */
  scroll-behavior:auto;scrollbar-width:none;
  /* Assez de place sous les cartes pour que leur ombre tienne entière :
     overflow-y:hidden coupe net ce qui dépasse, et l'ombre passait sous les
     flèches. Les marges négatives rendent l'espace pris au voisinage. */
  padding:12px 2px 40px;margin:-12px -2px -16px;
  /* Le fondu se fait sur le rail lui-même : une carte qui s'arrête net au
     bord, même pâlie, se voit comme une carte coupée. Les côtés fondus
     n'apparaissent que du côté où il reste quelque chose à faire défiler. */
  --rev-fondu:linear-gradient(90deg,transparent 0,#000 7%,#000 88%,transparent 100%);
  -webkit-mask-image:var(--rev-fondu);mask-image:var(--rev-fondu);
}
.rev-rail.au-debut{--rev-fondu:linear-gradient(90deg,#000 0,#000 86%,transparent 100%)}
.rev-rail.a-la-fin{--rev-fondu:linear-gradient(90deg,transparent 0,#000 9%,#000 100%)}
.rev-rail.au-debut.a-la-fin{--rev-fondu:linear-gradient(90deg,#000,#000)}
/* pendant le glissement piloté, l'accroche est levée : elle tirerait le rail
   en sens inverse à chaque image. Elle revient pour le doigt et la molette. */
.rev-rail.rev-anime{scroll-snap-type:none}
.rev-rail::-webkit-scrollbar{display:none}
.rev-rail:focus-visible{outline:2px solid var(--lagoon-500);outline-offset:4px;border-radius:var(--radius-lg)}
.rev-card{
  flex:0 0 clamp(255px,44%,360px);scroll-snap-align:start;
  opacity:calc(1 - var(--p,0) * .8);
  transform:scale(calc(1 - var(--p,0) * .06)) translateY(calc(var(--p,0) * 10px));
  transition:opacity .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
  will-change:opacity,transform;
}
/* la carte du milieu se détache un peu du fond */
.rev-card{box-shadow:0 10px 30px rgba(8,52,82,calc(.12 - var(--p,0) * .1))}

.rev-nav{display:flex;align-items:center;gap:12px;margin-top:10px;position:relative;z-index:2}
.rev-arrow{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--navy-700);
  cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.rev-arrow svg{width:17px;height:17px}
.rev-arrow:hover{background:var(--blue-50);border-color:var(--blue-100);color:var(--blue-600)}
.rev-arrow:disabled{opacity:.35;cursor:default;background:#fff;border-color:var(--line);color:var(--navy-700)}
.rev-dots{display:flex;gap:7px;align-items:center}
.rev-dot{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--line);
  cursor:pointer;transition:width .25s var(--ease),background .25s var(--ease);
}
.rev-dot[aria-current="true"]{width:22px;border-radius:99px;background:var(--blue-600)}
.rev-legal{margin-top:22px;font-size:.83rem;color:var(--muted);max-width:76ch}

@media (max-width:1050px){
  /* minmax(0,1fr) et non 1fr : sans le zéro, la colonne prend la largeur
     minimale de son contenu — la vidéo imposait 460 px sur un écran de
     390 et débordait, en emportant sa légende avec elle. */
  .reviews-layout{grid-template-columns:minmax(0,1fr)}
  .reviews-video{max-width:min(460px,100%)}
  .rev-card{flex-basis:min(78%,340px)}
}
@media (max-width:700px){
  .grid-reviews{grid-template-columns:1fr}
  .rev-card{flex-basis:min(86%,330px)}
}
@media (prefers-reduced-motion:reduce){
  .rev-rail{scroll-behavior:auto}
  .rev-card{transition:none}
}

/* ============================================================
   43. Bandeau : colonne vidéo + logos institutionnels, partenaires
   ============================================================ */
/* Vidéo et logos ne font qu'une seule carte blanche */
.hero-side{
  background:#fff;border-radius:var(--radius-lg);padding:10px;
  box-shadow:0 22px 54px rgba(0,0,0,.34);overflow:hidden;
}
.hero-video .video-frame{border:0;border-radius:calc(var(--radius-lg) - 10px);box-shadow:none}
.hero-logos{
  display:flex;align-items:center;justify-content:space-around;
  gap:clamp(12px,1.8vw,24px);flex-wrap:wrap;padding:16px 12px 10px;
}
.hero-logos img{max-height:52px;width:auto;object-fit:contain}
/* ce logo est large et bas : il a besoin de plus de hauteur pour peser autant */
.hero-logos img[src*="investir"]{max-height:68px}
/* sans vidéo, la carte se referme sur les seuls logos */
.hero-side:not(:has(.hero-video)) .hero-logos{padding:6px 10px}

/* Sous 1100 px l'écran ne permet plus d'afficher la vidéo correctement :
   on la retire et on ne garde que les logos, sur toute la largeur. */
@media (max-width:1100px){
  .hero-video{display:none}
  /* Sans la vidéo, la grande carte blanche n'entoure plus que des logos et
     laisse un vide à droite : chaque logo reprend sa propre pastille et la
     carte s'efface — c'est la section 62 qui le fait, après les règles de
     mise en avant du hero qui redonnent une ombre à cette carte. */
  .hero-logos{justify-content:flex-start;padding:8px 0 2px}
}
@media (max-width:520px){ .hero-logos img{max-height:36px} }

/* Partenaires */
.partners-title{
  text-align:center;font-family:var(--font-display);font-size:.74rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 26px;
}
.partners{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(20px,3vw,44px);
}
.partner{display:grid;place-items:center;height:128px}
.partner img{
  max-height:128px;max-width:320px;width:auto;object-fit:contain;
  /* Les logos restent en couleur ; le survol les rapproche. */
  transition:transform .25s var(--ease),filter .25s var(--ease);
}
.partner:hover img,.partner:focus-visible img{transform:scale(1.12)}
.partner--lien{cursor:pointer;border-radius:12px}
.partner--lien:focus-visible{outline:2px solid var(--blue-500);outline-offset:4px}
@media (max-width:600px){
  .partner{height:80px}
  .partner img{max-height:80px;max-width:220px}
}

/* La barre de filtres tient sur une ligne, collée ou non */
.cat-bar-in{flex-wrap:nowrap}
.cat-bar .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.cat-bar .filters::-webkit-scrollbar{display:none}
.cat-bar .filter{white-space:nowrap;flex:none}
@media (max-width:820px){
  .cat-bar-in{flex-wrap:wrap}
  .cat-search{flex:1 1 100%}
}
/* même densité avant et après le collage : tout tient sur une ligne */
.cat-search{flex:0 1 272px}
.cat-bar .filter{padding:7px 13px;font-size:.83rem}
.cat-bar .cat-search .field{padding-block:9px;font-size:.87rem}
.cat-bar-in{gap:12px}

/* ============================================================
   44. Fiche : sous-menu lagon et bloc tarif resserré
   ============================================================ */
.pagenav{
  background:linear-gradient(100deg,var(--lagoon-600),#0B7E86 55%,var(--navy-700));
  border-bottom:0;box-shadow:0 6px 18px rgba(8,52,82,.14);
}
.pagenav.is-on{backdrop-filter:none}
.pagenav-title{color:#fff;border-right-color:rgba(255,255,255,.22)}
.pagenav ul a{color:#D8F1F2}
.pagenav ul a:hover{background:rgba(255,255,255,.14);color:#fff}
.pagenav ul a.is-current{background:rgba(5,34,54,.55);color:#fff;font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.pagenav ul a.is-current:hover{background:rgba(5,34,54,.7);color:#fff}
.pagenav .btn--primary{background:#fff;color:var(--navy-800);border-color:#fff}
.pagenav .btn--primary:hover{background:#EAF7F8;color:var(--navy-900)}
.pagenav ul{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
}

/* Bloc tarif : moins d'air, tout est visible plus haut */
@media (min-width:1101px){ .aside-card{margin-top:-64px} }
.price-head{padding:18px 22px}
.price-val{font-size:2rem;margin:2px 0 0}
.price-note{font-size:.8rem;margin:7px 0 0;line-height:1.45}
.price-body{padding:14px 22px 18px}
.price-lines{margin-bottom:14px}
.price-lines li{padding:8px 0;font-size:.88rem}
.price-body .btn--block{padding-block:13px}
.price-body .btn--ghost{margin-top:8px!important;padding-block:11px}
.price-body > p:last-child{margin-top:12px!important;font-size:.78rem}

/* « Une question ? » et le numéro sur la même ligne */
.aside-help{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:13px 22px;background:var(--blue-50);border-top:1px solid var(--blue-100);
  color:var(--ink);text-decoration:none;
}
.aside-help:hover{background:var(--blue-100);text-decoration:none}
.aside-help-ico{
  flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue-500),var(--lagoon-500));color:#fff;
}
.aside-help-ico svg{width:16px;height:16px}
.aside-help > span:not(.aside-help-ico){font-size:.85rem;color:var(--muted)}
.aside-help strong{
  margin-left:auto;font-family:var(--font-display);font-size:.95rem;
  font-weight:750;color:var(--blue-600);white-space:nowrap;
}

/* ---------- Nos valeurs ajoutées ----------
   Quatre promesses, numérotées : on les lit dans l'ordre, et le chiffre tient
   lieu d'illustration là où une icône générique n'aurait rien dit. */
.valeurs{
  display:grid;gap:clamp(16px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
}
.valeur{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(22px,2.6vw,30px);
  box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.valeur:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--blue-100)}
.valeur-n{
  display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:var(--blue-50);color:var(--blue-600);
  font-family:var(--font-display);font-weight:800;font-size:.9rem;margin-bottom:14px;
}
.valeur:nth-child(2) .valeur-n{background:var(--lagoon-100);color:var(--lagoon-600)}
.valeur:nth-child(3) .valeur-n{background:var(--sand);color:#B4762A}
.valeur:nth-child(4) .valeur-n{background:var(--green-100);color:var(--green-600)}
.valeur h3{font-size:1.06rem;margin:0 0 .5em;letter-spacing:-.015em}
.valeur p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.6}

/* ---------- Bande des certifications ----------
   Les logos sont blancs sur fond transparent : ils demandent le fond sombre
   pour lequel ils ont été dessinés. */
.certif-bande{
  display:block;width:100%;max-width:900px;height:auto;margin:clamp(14px,2vw,24px) auto 0;
}
.partners-title--clair{color:#8FB4CE}
.section--lagoon .partners-title--clair{color:rgba(255,255,255,.82)}
.partners-title--2{margin-top:clamp(30px,4vw,52px)}

/* ---------- Bandeau défilant des partenaires ---------- */
/* Le bandeau défile tout seul, mais on peut le faire glisser à la souris ou
   au doigt, et le mouvement horizontal du pointeur en pousse la vitesse.
   C'est le script qui déplace le défilement : une animation CSS ne se laisse
   pas empoigner en cours de route. */
.marquee{
  overflow-x:auto;overflow-y:hidden;position:relative;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
  overscroll-behavior-x:contain;
  /* Le survol agrandit le logo de 12 % : sans cette réserve verticale, le
     défilement horizontal le rognerait en haut et en bas. */
  padding-block:12px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee::-webkit-scrollbar{display:none}
.marquee.is-drag{cursor:grabbing}
.marquee.is-drag .partner{pointer-events:none}   /* on glisse, on ne clique pas */
.marquee:focus-visible{outline:2px solid var(--blue-500);outline-offset:4px;border-radius:14px}
.marquee-track{
  display:flex;align-items:center;width:max-content;
  gap:clamp(28px,4vw,56px);
}
.marquee .partner{flex:none}
@media (prefers-reduced-motion:reduce){
  .marquee-track{flex-wrap:nowrap}
  .partner img{transition:none}
}

/* ============================================================
   45. Fiche formation : rythme bleu / blanc et titres à icône
   ============================================================ */
.fiche-main > section{
  border-bottom:0;border-radius:var(--radius-lg);
  padding:clamp(26px,3vw,38px) clamp(22px,2.6vw,34px);
  margin-bottom:clamp(14px,1.8vw,22px);
}
.fiche-main > section:first-child{padding-top:clamp(26px,3vw,38px)}
/* une section sur deux prend le bleu pâle de la charte */
.fiche-main > section:nth-of-type(odd){background:var(--blue-50);border:1px solid #DCEAF7}
.fiche-main > section:nth-of-type(even){background:#fff;border:1px solid var(--line-soft)}
.fiche-main > section.apply-block{
  border:1px solid #A8DCC2;
  background:linear-gradient(152deg,#E2F6EC,#CDEDDD 58%,#BFE7D2);
}

/* Titre de section : l'icône seule, dans la couleur qui était celle de la
   pastille. Le carré plein alourdissait chaque intertitre et attirait l'œil
   plus que le titre lui-même ; le trait suffit à donner le repère. */
.sec-h{display:flex;align-items:center;gap:12px;margin-bottom:.7em}
.sec-ico{
  flex:none;display:grid;place-items:center;
  color:var(--blue-600);
}
.sec-ico svg{width:30px;height:30px}
/* on alterne aussi la couleur pour appuyer le rythme des sections */
.fiche-main > section:nth-of-type(even) .sec-ico{color:var(--lagoon-600)}
.sec-ico.ico-cal{color:var(--coral-600)}
.sec-ico.ico-cal svg{width:30px;height:30px}

/* les cartes internes restent lisibles sur le fond bleu */
.fiche-main > section:nth-of-type(odd) .card,
.fiche-main > section:nth-of-type(odd) .accordion,
.fiche-main > section:nth-of-type(odd) .sessions td{background:#fff}
.fiche-main > section:nth-of-type(odd) .sessions-empty{background:#fff;border-color:#CFE2F3}
.fiche-main > section:nth-of-type(odd) .stats{background:#DCEAF7}
@media (max-width:620px){
  .sec-h{gap:10px}
  .sec-ico svg,.sec-ico.ico-cal svg{width:25px;height:25px}
}

/* ============================================================
   46. Barre de filtres du catalogue en bleu foncé
   ============================================================ */
.cat-bar{
  background:linear-gradient(100deg,var(--navy-900),var(--navy-700) 62%,#0F5F84);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 26px rgba(5,34,54,.20);
  /* La barre déborde dans la gouttière : elle gagne en largeur, et le
     rembourrage compense pour que les pastilles ne bougent pas. */
  --debord:clamp(10px,1.8vw,30px);
  margin-inline:calc(-1 * var(--debord));
  padding:11px calc(14px + var(--debord));
}
@media (max-width:620px){ .cat-bar{--debord:0px} }
.cat-bar.is-stuck{
  background:linear-gradient(100deg,var(--navy-900),var(--navy-700) 62%,#0F5F84);
  backdrop-filter:none;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 30px rgba(5,34,54,.32);
}
/* les pastilles se posent sur le fond sombre */
.cat-bar .filter{
  background:transparent;border-color:rgba(255,255,255,.30);color:#DCEAF7;
}
.cat-bar .filter:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);color:#fff}
.cat-bar .filter[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--navy-900)}
/* le champ de recherche reste clair pour rester lisible à la saisie */
.cat-bar .cat-search .field{
  background:rgba(255,255,255,.97);border-color:transparent;color:var(--ink);
}
.cat-bar .cat-search .field::placeholder{color:#7A93A8}
.cat-bar .cat-search .field:focus{
  background:#fff;border-color:var(--lagoon-500);box-shadow:0 0 0 4px rgba(34,176,181,.28);
}
.cat-bar .cat-search > svg{color:#6E8397}
/* sans cette règle, [hidden] ne masque rien : la carte a un display explicite */
.formation-card[hidden],.f-card[hidden],[data-filter-grid] > [hidden]{display:none!important}

/* ---------- Accordéon ouvert : on passe au vert lagon ---------- */
.acc-head[aria-expanded="true"]{
  background:var(--lagoon-100);color:#07484B;
}
.acc-head[aria-expanded="true"] .acc-num{
  background:var(--lagoon-600);color:#fff;
}
.acc-head[aria-expanded="true"] .chev{color:var(--lagoon-600)}
.acc-head[aria-expanded="true"] .acc-hours{color:#3F7376}
.acc-head[aria-expanded="true"]:hover{background:#CFEFF0}
.accordion:has(.acc-head[aria-expanded="true"]){border-color:#B9E6E8}
/* sur les sections bleu pâle des fiches, le vert reste lisible */
.fiche-main > section:nth-of-type(odd) .acc-head[aria-expanded="true"]{background:var(--lagoon-100)}

/* Au survol, un bloc fermé annonce déjà la couleur qu'il prendra une fois
   ouvert : le même vert lagon, en beaucoup plus pâle. Le bleu d'avant
   n'avait aucun rapport avec l'état ouvert — on changeait de famille de
   couleur au moment du clic. */
.acc-head[aria-expanded="false"]:hover,
.acc-head[aria-expanded="false"]:focus-visible{background:#EDFAFB}
.acc-head[aria-expanded="false"]:hover .acc-num,
.acc-head[aria-expanded="false"]:focus-visible .acc-num{
  background:#CFEFF0;color:var(--lagoon-600);
}
.acc-head[aria-expanded="false"]:hover .chev,
.acc-head[aria-expanded="false"]:focus-visible .chev{color:var(--lagoon-600)}

/* ---------- Bloc tarif d'un parcours e-learning ---------- */
.price-head--promo{
  background:linear-gradient(140deg,#0B6B47,var(--green-600) 55%,#17A46E);
}
.price-head--promo small{color:#BFEBD5}
.price-head--promo .price-val span{color:#BFEBD5}
.price-head--promo .price-note{color:#DFF5E9}
.price-head--promo .price-note s{color:#9FD9BC}
.price-head--promo .price-note strong{color:#fff;font-weight:750}
.price-foot{font-size:.78rem;color:var(--muted);margin:11px 0 0;text-align:center;line-height:1.45}

/* ============================================================
   46 bis. Carte formation — photo pleine
   L'image porte la carte, le texte se pose dessus dans un dégradé.
   Placée avant la section 47 : en mobile, la carte compacte des pages
   de liste garde le dernier mot, et le carrousel de l'accueil est traité
   en section 48.
   ============================================================ */
@media (min-width:761px){
  .formation-card{
    position:relative;display:flex;flex-direction:column;
    aspect-ratio:4/5;border:0;overflow:hidden;
    border-radius:var(--radius-lg);background:var(--navy-800);
    box-shadow:var(--shadow-sm);
  }
  .formation-card:hover{box-shadow:var(--shadow-lg)}

  .fc-media{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
  .fc-media img{width:100%;height:100%;object-fit:cover}
  .fc-media::after{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(180deg,
        rgba(5,34,54,.48) 0%,
        rgba(5,34,54,.06) 24%,
        rgba(5,34,54,.42) 48%,
        rgba(5,34,54,.80) 72%,
        rgba(5,34,54,.96) 100%);
  }

  /* Les étiquettes se posent en haut, en verre */
  .formation-card .fc-tags{
    position:absolute;top:14px;left:14px;right:14px;z-index:3;
    display:flex;gap:6px;flex-wrap:wrap;
  }
  /* on laisse la place à la pastille vidéo, en haut à droite */
  .formation-card:has(.fc-play) .fc-tags{right:68px}
  .formation-card .fc-tags .badge{
    background:rgba(255,255,255,.94);color:var(--navy-900);
    border:0;font-weight:750;backdrop-filter:blur(6px);
  }
  .formation-card .fc-tags .badge--lagoon{
    background:var(--lagoon-600);color:#fff;
  }

  .fc-body{
    position:static;z-index:2;margin-top:auto;
    padding:18px;display:flex;flex-direction:column;gap:8px;flex:0 0 auto;
    color:#fff;
  }
  /* le titre porte la carte : c'est lui qu'on lit en premier */
  .fc-body h3{
    margin:0;color:#fff;
    font-size:clamp(1.2rem,1.02rem + .55vw,1.42rem);
    line-height:1.2;letter-spacing:-.022em;font-weight:800;
    text-shadow:0 1px 12px rgba(3,26,43,.5);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .fc-body h3 a{color:#fff}
  .fc-body h3 a:hover{color:#fff;text-decoration:none}
  /* la photo remplace le résumé */
  .fc-body > p{display:none}

  .fc-meta{
    margin:0;padding:0;border-top:0;
    display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  }
  .fc-meta dl{display:flex;align-items:baseline;gap:9px;margin:0;flex-wrap:wrap}
  .fc-meta .fc-m{flex-direction:row;align-items:baseline;gap:.35em}
  .fc-meta .fc-m + .fc-m::before{
    content:"";width:3px;height:3px;border-radius:50%;
    background:currentColor;opacity:.55;margin-right:.55em;align-self:center;
  }
  .fc-meta dt{
    font-size:.8rem;font-weight:650;letter-spacing:0;text-transform:lowercase;
    color:#CFE6F7;font-family:var(--font-display);
  }
  .fc-meta .fc-m--h dt{display:none}
  .fc-meta dd{margin:0;font-size:.88rem;font-weight:800;color:#EAF4FC}
  .fc-meta .link-arrow{display:none}
  /* toute la carte est cliquable */
  .fc-link::after{content:"";position:absolute;inset:0;z-index:4}
}

/* ============================================================
   47. Mobile : densité, rythme et cibles tactiles
   Référence de densité : une carte = une ligne, pas un écran.
   ============================================================ */

/* La carte formation est cliquable en entier ; les étiquettes vivent
   désormais dans le corps et se posent sur l'image en grand écran. */
.formation-card{position:relative}
/* sur quatre colonnes les étiquettes doivent tenir sur une seule ligne */
.grid-4 .fc-tags .badge{font-size:.66rem;padding:3px 9px;letter-spacing:.03em}
.fc-link::after{content:"";position:absolute;inset:0;z-index:4}
.fc-body .fc-tags{position:absolute;top:12px;left:12px;right:12px}

@media (max-width:760px){
  :root{
    --gutter:18px;
    --sp-section:clamp(46px,10vw,68px);
  }

  /* ---------- Bandeau ---------- */
  .hero-inner{padding-block:26px 30px}
  .hero .badge--ghost{
    font-size:.7rem;letter-spacing:.02em;padding:7px 13px;line-height:1.35;
    text-align:left;
  }
  .hero h1{
    font-size:max(2.05rem,min(1.1rem + 6.2vw,2.7rem));
    line-height:1.05;letter-spacing:-.034em;margin-bottom:.34em;
  }
  .hero-sub{font-size:1rem;line-height:1.55;margin-bottom:1.1rem;max-width:36ch}
  /* le bouton s'arrête au bout de son libellé : une pleine largeur en fait
     une barre, et une barre ne se lit plus comme un bouton */
  .hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:1.1rem}
  .hero-cta .btn{width:auto;padding:15px 24px;font-size:1rem}
  .hero-trust{display:flex;align-items:center;gap:12px;padding-top:0}
  .hero-trust img{height:34px;flex:none}
  .hero-trust p{font-size:.72rem;line-height:1.42;margin:0;color:#CBDEEC;text-shadow:0 1px 2px rgba(3,26,43,.55)}
  .hero-sub{text-shadow:0 1px 3px rgba(3,26,43,.45)}
  .hero h1{text-shadow:0 2px 10px rgba(3,26,43,.35)}

  /* la carte des logos institutionnels défile au doigt */
  .hero-side{padding:8px 10px;border-radius:var(--radius)}
  .hero-logos{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    gap:22px;padding:6px 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .hero-logos::-webkit-scrollbar{display:none}
  .hero-logos img{max-height:32px;flex:none}
  .hero-logos img[src*="investir"]{max-height:42px}

  /* ---------- Recherche ---------- */
  .finder{margin-top:-24px;padding:16px;gap:12px;grid-template-columns:1fr}
  .finder-field label{font-size:.68rem}
  /* 16 px : iOS ne zoome plus à la saisie */
  .finder .field{padding:13px 14px;font-size:16px}
  .finder .btn{width:100%;padding:15px 20px;font-size:1rem}

  /* ---------- Titres ---------- */
  .section-head{margin-bottom:22px}
  .eyebrow{font-size:.7rem;margin-bottom:.55rem}
  .eyebrow::before{width:20px}
  .lede{font-size:1rem}

  /* ---------- Filtres : une ligne qui glisse, bord à bord ---------- */
  .cat-bar{margin-bottom:16px}
  .cat-bar-in{flex-wrap:wrap;gap:10px}
  .cat-search{flex:1 1 100%}
  .cat-search .field{font-size:16px;padding:11px 12px 11px 36px}
  /* la ligne de pastilles va jusqu'au bord de la barre et s'estompe :
     l'oeil comprend qu'elle continue */
  .cat-bar{padding:10px 12px}
  .cat-bar .filters{
    margin-inline:-12px;padding-inline:12px;
    scroll-snap-type:x proximity;flex:1 1 100%;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  }
  .cat-bar .filter{scroll-snap-align:start;padding:9px 15px;font-size:.85rem;min-height:38px}
  .cat-bar.is-stuck{padding:10px 12px;border-radius:var(--radius)}

  /* ---------- QCM ---------- */
  .quiz-home{padding:20px 16px;border-radius:var(--radius)}
  .quiz-q{font-size:1.14rem;margin-bottom:16px}
  .quiz-opts{grid-template-columns:1fr;gap:9px}
  .quiz-opt{padding:13px 15px}
  .quiz-opt strong{font-size:.95rem}
  .quiz-opt span{font-size:.82rem}

  /* ---------- Financement : logo, nom, précision sur une ligne ---------- */
  .funding--logos{grid-template-columns:1fr;gap:8px}
  .funding--logos .funding-item{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:14px;row-gap:2px;align-items:center;text-align:left;padding:14px 16px;
  }
  .funding--logos .funding-item .funding-logo{
    /* la colonne doit être nommée : sans elle, la grille la calculait à 0 */
    grid-column:1;grid-row:1 / span 2;height:44px;width:44px;margin:0;
  }
  .funding-logo img{max-height:38px}
  .funding--logos .funding-item > strong,
  .funding--logos .funding-item > span{grid-column:2}
  .funding--logos .funding-item:not(:has(.funding-logo)){display:block}
  .funding--logos .funding-item strong,
  .funding--logos .funding-item:not(:has(.funding-logo)) strong{font-size:.98rem}
  .funding--logos .funding-item span{font-size:.82rem}

  /* ---------- Chiffres ---------- */
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:18px 12px}
  .stat-label{font-size:.78rem}

  /* ---------- Avis et partenaires ---------- */
  .quote-card{padding:18px 16px}
  .reviews-video p{font-size:.82rem}
  .partner{height:80px}
  .partner img{max-height:80px;max-width:216px}
  .partners-title{margin-bottom:16px;font-size:.7rem}
  .marquee-track{gap:26px}

  /* les appels à l'action gardent la largeur de leur libellé ; centrés, ils
     restent atteignables au pouce sans devenir des barres */
  .section > .wrap > .center > .btn{width:100%}
  #formations .center .btn{width:auto;padding-inline:26px}

  /* ---------- Bandeau d'appel ---------- */
  .cta-band{padding:26px 20px}
  .cta-band .btn{width:100%}
  .cta-band h2{font-size:max(1.6rem,min(1rem + 4.4vw,2rem));line-height:1.12}

  /* ---------- Cibles tactiles ---------- */
  .btn{min-height:46px}
  .btn--sm{min-height:40px}
}

/* Catalogue en une seule colonne : vignette à gauche, essentiel à droite.
   Sous 760 px les listes passent sur une colonne : la carte compacte y a
   toute la largeur qu'il lui faut. L'accueil, lui, bascule en carrousel. */
@media (max-width:760px){
  .grid-3{grid-template-columns:1fr}
}
@media (max-width:760px){
  .grid-4,.grid-cards{gap:10px}
  .formation-card{
    display:grid;grid-template-columns:112px minmax(0,1fr);
    border-radius:var(--radius);align-items:stretch;
  }
  .formation-card:hover{transform:none;box-shadow:var(--shadow-sm)}
  .fc-media{aspect-ratio:auto;height:100%;min-height:120px}
  .fc-media::after{display:none}
  .formation-card:hover .fc-media img{transform:none}
  .fc-body{padding:12px 14px}
  .fc-body .fc-tags{position:static;margin-bottom:6px;gap:5px}
  .fc-tags .badge{font-size:.62rem;padding:3px 8px;letter-spacing:.04em}
  .fc-body h3{
    font-size:.98rem;line-height:1.28;margin-bottom:.25em;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .fc-body p{display:none}
  .fc-meta{padding-top:8px;border-top:0;gap:10px;flex-wrap:nowrap;align-items:baseline}
  .fc-meta dl{gap:12px;flex-wrap:nowrap}
  .fc-meta div{flex-direction:row;align-items:baseline;gap:5px;flex:none}
  .fc-meta dt,.fc-meta dd{white-space:nowrap}
  .fc-meta dt{font-size:.62rem;letter-spacing:.06em}
  .fc-meta dd{font-size:.88rem}
  .fc-meta .link-arrow{font-size:0;margin-left:auto;flex:none}
  .fc-meta .link-arrow::after{font-size:1.1rem;color:var(--blue-600)}
}

/* Au doigt, les pastilles de filtre gardent une cible confortable */
@media (pointer:coarse){
  .cat-bar .filter{min-height:38px}
  .btn--sm{min-height:38px}
}

/* Très petits écrans : la vignette rétrécit avant le texte */
@media (max-width:380px){
  .hero .badge--ghost{font-size:.64rem;padding:6px 11px}
  .formation-card{grid-template-columns:92px minmax(0,1fr)}
  .fc-media{min-height:108px}
  .fc-body{padding:11px 12px}
  .fc-meta dl{gap:9px}
}

/* ============================================================
   48. Accueil, mobile : le catalogue devient un carrousel
   Les cartes gardent la photo pleine ; seule la mise en rail change.
   ============================================================ */
@media (max-width:760px){
  #formation-grid{
    display:flex;flex-wrap:nowrap;gap:12px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);
    padding:4px var(--gutter) 16px;
    scroll-padding-inline:var(--gutter);
  }
  #formation-grid::-webkit-scrollbar{display:none}

  #formation-grid > .formation-card{
    flex:0 0 78%;max-width:310px;scroll-snap-align:start;
    display:flex;flex-direction:column;aspect-ratio:4/5;
    border:0;background:var(--navy-800);border-radius:var(--radius-lg);
  }
  #formation-grid .fc-media{position:absolute;inset:0;height:auto;min-height:0;aspect-ratio:auto}
  #formation-grid .fc-media::after{display:block}
  #formation-grid .fc-body{
    position:static;z-index:2;margin-top:auto;flex:0 0 auto;
    padding:18px 17px;gap:8px;color:#fff;
  }
  #formation-grid .fc-body .fc-tags{
    position:absolute;top:13px;left:13px;right:13px;margin:0;flex-wrap:wrap;
  }
  #formation-grid .fc-tags .badge{
    font-size:.68rem;padding:4px 10px;border:0;font-weight:750;
    background:rgba(255,255,255,.94);color:var(--navy-900);
  }
  #formation-grid .fc-tags .badge--lagoon{background:var(--lagoon-600);color:#fff}
  #formation-grid .fc-body h3{
    font-size:1.32rem;line-height:1.18;margin:0;color:#fff;
    text-shadow:0 1px 12px rgba(3,26,43,.5);-webkit-line-clamp:3;
  }
  #formation-grid .fc-body h3 a{color:#fff}
  #formation-grid .fc-body p{display:none}
  #formation-grid .fc-meta{
    margin:0;padding:0;border-top:0;flex-wrap:wrap;gap:9px;align-items:baseline;
  }
  #formation-grid .fc-meta dl{gap:9px;flex-wrap:wrap}
  #formation-grid .fc-meta .fc-m{flex-direction:row;align-items:baseline;gap:.35em;flex:none}
  #formation-grid .fc-meta dt{font-size:.82rem;font-weight:650;text-transform:lowercase;letter-spacing:0;color:#CFE6F7}
  #formation-grid .fc-meta .fc-m--h dt{display:none}
  #formation-grid .fc-meta dd{font-size:.9rem;font-weight:800;color:#EAF4FC}
  #formation-grid .fc-meta .link-arrow{display:none}

  /* le message « aucun résultat » occupe toute la largeur du rail */
  [data-filter-grid].is-empty::after{flex:1 0 100%;margin:0}
}

/* ============================================================
   49. Menu mobile — panneau plein écran, entrées larges, accordéons
   Le doigt vise de grandes zones ; la hiérarchie tient à la taille
   du texte, pas à des filets.
   ============================================================ */

/* Le bouton devient un rond clair, puis une croix à l'ouverture */
.burger{
  border-radius:50%;border-color:transparent;background:var(--blue-50);
  width:44px;height:44px;transition:background .18s var(--ease);
}
.burger:hover{background:var(--blue-100)}
.burger span,.burger span::before,.burger span::after{
  transition:transform .22s var(--ease),opacity .16s var(--ease);
}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:120;background:#fff;
  display:flex;flex-direction:column;
  padding:0;max-height:none;overflow:hidden;border-top:0;
  animation:mnav-in .26s var(--ease);
}
.mobile-nav[hidden]{display:none!important}
@keyframes mnav-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
html.mnav-open,html.mnav-open body{overflow:hidden}

.mnav-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--gutter);flex:none;
}
.mnav-head .brand img{height:30px}
.mnav-close{
  width:44px;height:44px;border:0;border-radius:50%;background:var(--blue-50);
  color:var(--navy-800);display:grid;place-items:center;cursor:pointer;
  transition:background .18s var(--ease);
}
.mnav-close:hover{background:var(--blue-100)}
.mnav-close svg{width:20px;height:20px}

.mnav-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px var(--gutter) 8px}
.mnav-list{list-style:none;margin:0;padding:0}
.mnav-item{margin:0}

/* Une entrée principale : grande, sans filet, tout le rang est cliquable */
.mnav-link,
.mnav-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:15px 0;border:0;background:none;text-align:left;cursor:pointer;
  font-family:var(--font-display);font-size:1.42rem;font-weight:700;line-height:1.2;
  letter-spacing:-.02em;color:var(--ink);
}
.mnav-link:hover,.mnav-toggle:hover{color:var(--blue-600);text-decoration:none}
.mnav-chev{width:17px;height:17px;flex:none;color:var(--muted);transition:transform .24s var(--ease)}
.mnav-toggle[aria-expanded="true"]{color:var(--blue-600)}
.mnav-toggle[aria-expanded="true"] .mnav-chev{transform:rotate(180deg);color:var(--blue-600)}

/* Le volet déplié : pastille colorée, intitulé, précision */
.mnav-panel{padding:2px 0 14px}
.mnav-panel[hidden]{display:none}
.mnav-sub{
  display:flex;align-items:center;gap:13px;padding:9px 0;color:var(--navy-800);
}
.mnav-sub:hover{text-decoration:none}
.mnav-sub:hover .mnav-txt strong{color:var(--blue-600)}
.mnav-ico{
  width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--blue-50);color:var(--blue-600);
}
.mnav-ico svg{width:19px;height:19px}
.mnav-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.mnav-txt strong{font-family:var(--font-display);font-size:.98rem;font-weight:700;color:var(--ink);line-height:1.3}
.mnav-txt small{font-size:.79rem;color:var(--muted);line-height:1.35}
.mnav-all{
  display:inline-flex;align-items:center;gap:.4em;margin:6px 0 0 51px;
  font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--blue-600);
}
.mnav-all::after{content:"→"}

/* Le pied reste visible : c'est là que se prend la décision */
.mnav-foot{
  flex:none;padding:16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-soft);background:#fff;
}
.mnav-meta{
  display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;
  font-family:var(--font-display);font-size:.88rem;font-weight:650;
}
.mnav-meta > a{display:inline-flex;align-items:center;gap:7px;color:var(--navy-800)}
.mnav-meta svg{width:16px;height:16px;color:var(--lagoon-600)}
.mnav-meta .lang{font-size:.85rem}

@media (min-width:1151px){.mobile-nav{display:none!important}}

/* ============================================================
   50. Accueil — allègement : plus rond, moins d'ombre, plus d'air
   ============================================================ */
/* Le carrousel s'aligne sur la gouttière, pas sur le bord de l'écran */
@media (max-width:760px){
  #formation-grid{scroll-padding-inline:var(--gutter)}
}

/* Champs et pastilles suivent le nouveau rythme des angles */
.field{border-radius:14px}
.badge{border-radius:999px}
.finder{border-radius:var(--radius-xl);box-shadow:0 18px 44px rgba(8,52,82,.10),0 3px 10px rgba(8,52,82,.04)}
.cat-bar{border-radius:var(--radius-lg);box-shadow:0 8px 22px rgba(5,34,54,.14)}
.cat-bar.is-stuck{border-radius:var(--radius-lg);box-shadow:0 10px 26px rgba(5,34,54,.22)}
.cat-bar .filter{border-radius:999px}
.cat-bar .cat-search .field{border-radius:999px}
.quiz-home{border-radius:var(--radius-xl)}
.quiz-opt{border-radius:var(--radius)}
.funding-item{border-radius:var(--radius)}
.quote-card{border-radius:var(--radius-lg)}
.hero-side{border-radius:var(--radius-lg);box-shadow:0 18px 44px rgba(0,0,0,.26)}
.hero .badge--ghost{border-radius:999px}
.stat{border-radius:0}

/* Les survols se contentent d'un souffle, plus d'un bond */
.formation-card:hover{transform:translateY(-3px)}
.profile-card:hover,.funding-item:hover{transform:translateY(-2px)}

@media (max-width:760px){
  /* respirer entre les blocs plutôt que les empiler */
  .section-head{margin-bottom:24px}
  .quiz-home{padding:22px 18px}
  .funding--logos .funding-item{padding:15px 16px}
  #formation-grid > .formation-card{border-radius:var(--radius-lg)}
  .finder{border-radius:var(--radius-lg)}
}

/* ============================================================
   51. Barre mobile : marque à gauche, espace au centre, menu à droite
   ============================================================ */
.btn-label-short{display:none}

@media (max-width:760px){
  .nav{position:relative;min-height:62px}
  /* La marque garde la taille qu'elle a dans le menu déplié : elle
     rétrécissait à l'ouverture, et le logo semblait sauter. */
  .brand img{height:30px}

  /* « Mon espace » reste dans le flux, à droite : centré sur l'écran, il
     passait sous la marque dès que celle-ci a repris sa taille normale. */
  .nav-actions{margin-left:auto;gap:6px}
  .nav-actions .btn--ghost{
    position:static;transform:none;
    padding:10px 12px;font-size:.83rem;white-space:nowrap;gap:0;
  }
  .nav-actions .btn--ghost .btn-label{display:none}
  .nav-actions .btn--ghost .btn-label-short{display:inline}
  /* au centre, le mot suffit : l'icône ne ferait que voler de la place */
  .nav-actions .btn--ghost svg{display:none}
  .burger{order:9}

  /* la langue quitte la barre : elle est reprise en pied de menu */
  .nav-actions .lang{display:none}
}

/* Écrans étroits : l'icône seule — avec la marque à sa vraie taille, le mot
   « Mon espace » poussait le bouton menu hors de l'écran. */
@media (max-width:430px){
  .nav-actions .btn--ghost .btn-label-short{display:none}
  .nav-actions .btn--ghost svg{display:block;width:17px;height:17px}
  .nav-actions .btn--ghost{padding:10px 12px}
}

/* ============================================================
   52. Bandeau des chiffres clés
   Une pastille colorée, le chiffre en grand, le libellé dessous.
   Les colonnes sont séparées par un filet, pas par des cartes.
   ============================================================ */
.stats{
  /* Quatre colonnes sur ordinateur, deux sur mobile : une rangée de quatre
     chiffres se lit d'un coup d'œil, trois plus un orphelin non. */
  /* Autant de colonnes que de chiffres, cinq au plus : quatre chiffres plus un
     orphelin sur la ligne suivante, c'est une grille qui a l'air cassée. */
  display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));
  gap:0;background:none;border:0;border-radius:0;overflow:visible;
}
.stat{
  background:none;padding:clamp(26px,3vw,38px) clamp(14px,2vw,24px);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:0;
  position:relative;
}
/* le filet vit entre les colonnes, jamais aux extrémités */
.stat + .stat::before{
  content:"";position:absolute;left:0;top:clamp(20px,2.6vw,30px);bottom:clamp(20px,2.6vw,30px);
  width:1px;background:var(--line-soft);
}
.stat-ico{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  margin-bottom:clamp(14px,1.8vw,20px);
  background:var(--blue-50);color:var(--blue-600);
}
.stat-ico svg{width:24px;height:24px}
/* chaque colonne prend sa teinte : la couleur vient des pastilles */
.stat:nth-child(5n+1) .stat-ico{background:var(--blue-50);color:var(--blue-600)}
.stat:nth-child(5n+2) .stat-ico{background:var(--lagoon-100);color:var(--lagoon-600)}
.stat:nth-child(5n+3) .stat-ico{background:var(--sand);color:#B4762A}
.stat:nth-child(5n+4) .stat-ico{background:var(--green-100);color:var(--green-600)}
.stat:nth-child(5n+5) .stat-ico{background:var(--blue-100);color:var(--navy-700)}

.stat-num{
  font-family:var(--font-display);
  font-size:clamp(1.95rem,1.45rem + 1.7vw,2.9rem);
  font-weight:800;line-height:1;letter-spacing:-.04em;
  color:var(--ink);margin:0;font-variant-numeric:tabular-nums;
}
.stat-num .unit{font-size:.5em;color:var(--lagoon-600);letter-spacing:-.02em;margin-left:.04em}
.stat-label{
  margin:clamp(12px,1.6vw,18px) 0 0;font-size:.96rem;line-height:1.45;
  color:var(--muted);max-width:22ch;
}

@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* en deux colonnes, le filet ne doit plus courir en début de rangée */
  .stat:nth-child(odd)::before{display:none}
  .stat:nth-child(n+3)::after{
    content:"";position:absolute;top:0;left:clamp(14px,2vw,24px);right:clamp(14px,2vw,24px);
    height:1px;background:var(--line-soft);
  }
}
@media (max-width:520px){
  .stat{padding:22px 14px}
  .stat-ico{width:44px;height:44px;margin-bottom:12px}
  .stat-ico svg{width:21px;height:21px}
  .stat-label{font-size:.88rem}
}

/* ============================================================
   53. Bloc tarif à onglets — une situation, un tarif
   Le visiteur désigne sa situation ; le bloc lui répond avec le
   chiffre qui le concerne et la phrase qui va avec.
   ============================================================ */
.tarif-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);
  box-shadow:var(--shadow);padding:22px;overflow:hidden;
}

.tarif-tabs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:3px;
  background:var(--canvas);border-radius:999px;padding:4px;margin-bottom:20px;
}
.tarif-tab{
  border:0;background:none;cursor:pointer;padding:9px 6px;border-radius:999px;
  font-family:var(--font-display);font-size:.8rem;font-weight:700;line-height:1.2;
  color:var(--muted);transition:background .18s var(--ease),color .18s var(--ease);
}
.tarif-tab:hover{color:var(--ink)}
.tarif-tab[aria-selected="true"]{background:var(--navy-800);color:#fff}

.tarif-pane[hidden]{display:none}
.tarif-eyb{
  margin:0;font-family:var(--font-display);font-size:.73rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.tarif-val{
  display:flex;align-items:baseline;gap:.4em;flex-wrap:wrap;margin:10px 0 0;
}
.tarif-val b{
  font-family:var(--font-display);font-size:clamp(1.1rem,.95rem + .5vw,1.35rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.tarif-val span{font-family:var(--font-display);font-size:.82rem;font-weight:650;color:var(--muted)}
/* la hauteur est réservée pour trois lignes : changer d'onglet ne doit pas
   faire sauter le bouton de candidature sous le doigt */
.tarif-help{margin:12px 0 0;font-size:.86rem;line-height:1.5;color:var(--muted);min-height:calc(.86rem * 1.5 * 3)}

.tarif-card .btn--primary{margin-top:20px}
.tarif-dl{margin-top:10px}
.tarif-delay{margin:12px 0 0;text-align:center;font-size:.81rem;color:var(--muted)}

.tarif-fin{
  list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--line-soft);
  display:grid;gap:10px;
}
.tarif-fin li{
  display:flex;align-items:flex-start;gap:10px;margin:0;
  font-size:.88rem;line-height:1.45;color:var(--body);
}
.tarif-fin svg{width:15px;height:15px;flex:none;color:var(--lagoon-600);margin-top:.28em}

.tarif-tel{
  display:flex;align-items:center;gap:9px;margin:18px -22px -22px;padding:15px 22px;
  background:var(--blue-50);font-size:.9rem;color:var(--muted);
}
.tarif-tel:hover{text-decoration:none;background:var(--blue-100)}
.tarif-tel svg{width:16px;height:16px;flex:none;color:var(--lagoon-600)}
.tarif-tel strong{
  margin-left:auto;font-family:var(--font-display);font-weight:800;color:var(--blue-600);
  font-variant-numeric:tabular-nums;
}

@media (max-width:1100px){
  .tarif-card{padding:20px}
  .tarif-tel{margin:18px -20px -20px;padding:15px 20px}
}

/* ============================================================
   54. Barre de catalogue — une ligne, pleine largeur, collée en haut
   Recherche à gauche, thématiques à droite qui glissent au doigt.
   ============================================================ */
.catbar-sentinel{height:1px}
.catbar{
  position:sticky;top:var(--hdr-h,68px);z-index:58;
  background:rgba(255,255,255,.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
  transition:top .28s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
/* quand l'en-tête s'efface, la barre prend sa place tout en haut */
html.hdr-hidden .catbar{top:0}
.catbar.is-stuck{box-shadow:0 8px 24px rgba(8,52,82,.09)}

.catbar-in{
  max-width:var(--wrap);margin-inline:auto;padding:10px var(--gutter);
  display:grid;grid-template-columns:minmax(200px,32%) minmax(0,1fr);
  align-items:center;gap:14px;
}

/* Recherche */
.catbar-search{position:relative;display:flex;align-items:center;min-width:0}
.catbar-search > svg{
  position:absolute;left:14px;width:17px;height:17px;color:var(--muted);pointer-events:none;z-index:2;
}
.catbar-search .field{
  width:100%;padding:11px 14px 11px 40px;border-radius:999px;font-size:.92rem;
  background:var(--canvas);border-color:transparent;
}
.catbar-search .field:focus{background:#fff;border-color:var(--blue-400)}
.catbar-search .ac-list{top:calc(100% + 8px)}

/* Thématiques : un rail qui glisse, estompé à droite */
.catbar-tabs{
  display:flex;align-items:center;gap:7px;min-width:0;
  overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;padding:2px 0;
  /* estompé des deux côtés : on voit qu'il y a de la matière avant et après */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 30px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 30px),transparent);
}
.catbar-tabs::-webkit-scrollbar{display:none}
.catbar-tab{
  flex:none;scroll-snap-align:start;white-space:nowrap;
  font-family:var(--font-display);font-size:.87rem;font-weight:700;
  padding:9px 16px;border-radius:999px;color:var(--body);
  border:1.5px solid var(--line);background:#fff;
  transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease);
}
.catbar-tab:hover{border-color:var(--blue-400);color:var(--blue-600);text-decoration:none}
.catbar-tab.is-on{background:var(--navy-800);border-color:var(--navy-800);color:#fff}

/* La barre se resserre une fois collée : on gagne de la hauteur de lecture */
.catbar.is-stuck .catbar-in{padding-block:7px}
.catbar.is-stuck .catbar-search .field{padding-block:9px}
.catbar.is-stuck .catbar-tab{padding-block:7px}

@media (max-width:760px){
  .catbar-in{
    grid-template-columns:minmax(140px,43%) minmax(0,1fr);
    gap:12px;padding:8px var(--gutter);
  }
  .catbar-search .field{padding:10px 12px 10px 34px;font-size:16px}
  .catbar-search > svg{left:11px;width:15px;height:15px}
  .catbar-tab{font-size:.8rem;padding:8px 13px}
  .catbar-tabs{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 22px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 22px),transparent);
  }
}

/* le bandeau de titre se resserre : la barre lui a pris son rôle d'entrée */
.fiche-hero--slim .fiche-hero-inner{padding-block:clamp(26px,3.4vw,44px)}
.catalog-count{
  font-family:var(--font-display);font-size:.9rem;font-weight:700;
  color:var(--muted);margin:0 0 20px;
}

/* ============================================================
   55. Carte de liste — vignette carrée détachée
   ============================================================ */
@media (max-width:760px){
  .grid-3,.grid-cards,.grid-catalogue{gap:11px}
  .grid-3 .formation-card,
  .grid-cards .formation-card,
  .grid-catalogue .formation-card{
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;gap:0;padding:10px;
    background:var(--surface);border:1px solid var(--line-soft);
    border-radius:22px;box-shadow:var(--shadow-sm);
  }
  .grid-3 .fc-media,
  .grid-cards .fc-media,
  .grid-catalogue .fc-media{
    width:86px;height:86px;min-height:0;border-radius:16px;overflow:hidden;flex:none;
  }
  .grid-3 .fc-body,
  .grid-cards .fc-body,
  .grid-catalogue .fc-body{padding:0 4px 0 14px;gap:0;justify-content:center}
  .grid-3 .fc-body .fc-tags,
  .grid-cards .fc-body .fc-tags,
  .grid-catalogue .fc-body .fc-tags{margin-bottom:5px}
  .grid-3 .fc-meta,
  .grid-cards .fc-meta,
  .grid-catalogue .fc-meta{padding-top:6px;margin-top:6px}
}
@media (max-width:380px){
  .grid-3 .formation-card,.grid-cards .formation-card,.grid-catalogue .formation-card{padding:9px}
  .grid-3 .fc-media,.grid-cards .fc-media,.grid-catalogue .fc-media{width:74px;height:74px;border-radius:14px}
  .grid-3 .fc-body,.grid-cards .fc-body,.grid-catalogue .fc-body{padding-left:11px}
}

/* ============================================================
   56. Mouvement — apparitions au défilement, menu en cascade
   Rien n'est masqué tant que le script n'a pas pris la main :
   sans JavaScript, la page reste entièrement lisible.
   ============================================================ */
html.js-anim .reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:var(--d,0ms);will-change:opacity,transform;
}
html.js-anim .reveal.is-in{opacity:1;transform:none}

/* Les cartes du catalogue arrivent nettement plus petites et se déploient
   vite, avec un dépassement de 4 % avant de se poser : c'est ce petit rebond
   qui donne le ressort. Une image-clé plutôt qu'une transition — le
   dépassement se règle au centième, ce qu'une courbe de Bézier ne permet pas
   à ce niveau de finesse. L'échelle ne touche pas à la mise en page : rien
   ne bouge autour, la grille ne saute pas. */
html.js-anim .grid-catalogue > .reveal,
html.js-anim [data-filter-grid] > .reveal{
  opacity:0;transform:none;transition:none;transform-origin:50% 58%;
}
html.js-anim .grid-catalogue > .reveal.is-in,
html.js-anim [data-filter-grid] > .reveal.is-in{
  animation:carte-arrive .46s cubic-bezier(.22,.68,.3,1) both;
  animation-delay:var(--d,0ms);
}
@keyframes carte-arrive{
  0%  {opacity:0;transform:translateY(18px) scale(.74)}
  45% {opacity:1}
  62% {transform:translateY(0) scale(1.04)}
  80% {transform:scale(.99)}
  100%{opacity:1;transform:none}
}

/* Chiffres clés : chaque colonne entre à son tour, puis sa jauge se remplit.
   Sans script, tout est déjà visible et la jauge est à sa valeur. */
[data-kpi] .meter i{width:var(--v,0)}
html.js-anim [data-kpi] .kpi{
  opacity:0;transform:translateY(16px);
  transition:opacity .42s var(--ease),transform .42s var(--ease);
}
html.js-anim [data-kpi] .kpi.is-in{opacity:1;transform:none}
html.js-anim [data-kpi] .meter i{width:0;transition:width .85s cubic-bezier(.22,.61,.36,1) .12s}
html.js-anim [data-kpi] .kpi.is-in .meter i{width:var(--v)}

/* Le menu mobile entre en cascade, chaque rubrique après la précédente */
html.js-anim .mobile-nav:not([hidden]) .mnav-item{
  animation:mnav-item .42s var(--ease) both;
  animation-delay:calc(60ms + var(--i,0) * 45ms);
}
@keyframes mnav-item{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
html.js-anim .mobile-nav:not([hidden]) .mnav-foot{
  animation:mnav-item .42s var(--ease) both;animation-delay:.3s;
}
/* le volet d'un accordéon se déplie en fondu */
html.js-anim .mnav-panel:not([hidden]){animation:mnav-panel .3s var(--ease) both}
@keyframes mnav-panel{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  html.js-anim .reveal,
  html.js-anim .grid-catalogue > .reveal,
  html.js-anim [data-filter-grid] > .reveal{opacity:1;transform:none;transition:none}
  html.js-anim .grid-catalogue > .reveal.is-in,
  html.js-anim [data-filter-grid] > .reveal.is-in{animation:none}
  html.js-anim [data-kpi] .kpi{opacity:1;transform:none;transition:none}
  html.js-anim [data-kpi] .meter i{width:var(--v);transition:none}
  html.js-anim .mobile-nav .mnav-item,
  html.js-anim .mobile-nav .mnav-foot,
  html.js-anim .mnav-panel{animation:none}
}

/* ============================================================
   57. Carte formation au survol — la carte ne bouge plus
   Un cadre clair s'ouvre autour d'elle, et les chiffres montent
   du bas en poussant le titre. Rien de tout cela au doigt :
   sans survol, durée et tarif restent visibles.
   ============================================================ */
@media (hover:hover) and (min-width:761px){
  .formation-card{
    transform:none;
    transition:box-shadow .3s var(--ease);
  }
  /* le cadre est une ombre à écartement : il déborde sans toucher au calque */
  .formation-card:hover{
    transform:none;
    box-shadow:0 0 0 11px rgba(12,113,195,.11);
  }
  .formation-card:focus-within{box-shadow:0 0 0 11px rgba(12,113,195,.18)}
  /* l'image ne respire plus : la carte est figée */
  .formation-card:hover .fc-media img{transform:none}

  .fc-body{gap:0}
  .fc-body h3{margin-bottom:0}
  .fc-meta{
    display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;
    transition:grid-template-rows .34s var(--ease),
               opacity .24s var(--ease),
               margin-top .34s var(--ease);
  }
  .fc-meta > dl{overflow:hidden;min-height:0}
  .formation-card:hover .fc-meta,
  .formation-card:focus-within .fc-meta{
    grid-template-rows:1fr;opacity:1;margin-top:10px;
  }
}

@media (prefers-reduced-motion:reduce){
  .formation-card,.fc-meta{transition:none}
}

/* ============================================================
   58. Barres de filtres bord à bord, et carrousel à 2,5 cartes
   ============================================================ */
/* La barre de catalogue occupe toute la largeur de l'écran */
.catbar-in{max-width:none;padding-inline:clamp(14px,2.4vw,30px)}

/* Sur l'accueil, recherche et thématiques tiennent aussi sur une seule ligne */
@media (max-width:820px){
  .cat-bar-in{flex-wrap:nowrap;gap:10px}
  .cat-search{flex:0 1 44%;min-width:124px}
  .cat-bar .filters{flex:1 1 auto;min-width:0}
}
@media (max-width:760px){
  .cat-bar{padding:8px 10px}
  .cat-bar .filters{margin-inline:-10px;padding-inline:10px}
  .cat-bar .cat-search .field{font-size:16px;padding:9px 12px 9px 32px}
  .cat-bar .cat-search > svg{left:11px;width:15px;height:15px}
  .cat-bar .filter{padding:8px 13px;font-size:.8rem}
}

/* Carrousel : deux cartes et demie, pour qu'on devine la suite.
   La carte rétrécit en largeur : elle s'allonge pour garder de la photo
   sous le titre, et ne montre plus qu'une étiquette. */
@media (max-width:760px){
  #formation-grid{gap:10px}
  #formation-grid > .formation-card{
    flex:0 0 calc((100% - 20px) / 2.5);max-width:none;aspect-ratio:2/3;
    border-radius:20px;
  }
  #formation-grid .fc-body{padding:12px 11px;gap:5px}
  #formation-grid .fc-body .fc-tags{top:9px;left:9px;right:9px;gap:4px}
  #formation-grid .fc-tags .badge{font-size:.6rem;padding:3px 7px;letter-spacing:.02em}
  /* deux étiquettes ne tiennent pas sur 134 px : la première suffit */
  #formation-grid .fc-tags .badge:nth-child(n+2){display:none}
  /* la carte est plus haute : le voile doit remonter d'autant */
  #formation-grid .fc-media::after{
    background:linear-gradient(180deg,
      rgba(5,34,54,.42) 0%,
      rgba(5,34,54,.04) 20%,
      rgba(5,34,54,.46) 44%,
      rgba(5,34,54,.86) 68%,
      rgba(5,34,54,.97) 100%);
  }
  #formation-grid .fc-body h3{
    font-size:.9rem;line-height:1.22;letter-spacing:-.016em;-webkit-line-clamp:2;
    text-shadow:0 1px 10px rgba(3,26,43,.6);
  }
  #formation-grid .fc-meta{gap:0;flex-wrap:nowrap;align-items:baseline}
  #formation-grid .fc-meta dl{gap:0;flex-wrap:nowrap}
  #formation-grid .fc-meta .fc-m{flex-direction:row;gap:.25em;flex:none;min-width:0}
  #formation-grid .fc-meta .fc-m + .fc-m::before{
    content:"·";width:auto;height:auto;background:none;border-radius:0;
    opacity:.6;margin:0 .35em;align-self:baseline;
  }
  #formation-grid .fc-meta dt{font-size:.7rem;font-weight:600}
  #formation-grid .fc-meta dd{font-size:.76rem;white-space:nowrap}
}
/* Écrans très étroits : deux cartes, la lisibilité passe avant le nombre */
@media (max-width:360px){
  #formation-grid > .formation-card{flex:0 0 calc((100% - 10px) / 2.15)}
}

/* ============================================================
   59. Réglages mobile — densité et alignements
   ============================================================ */

/* Le pied du QCM ne réserve plus de place quand il n'a aucun bouton */
.quiz-foot:not(:has(.btn:not([hidden]))){display:none}

/* Financeurs : à défaut de logo, un pictogramme tient le rôle */
.funding-logo--ico{
  background:var(--blue-50);color:var(--blue-600);border-radius:14px;
  height:46px;width:46px;
}
.funding-logo--ico svg{width:23px;height:23px}
.funding--logos .funding-item:not(:has(.funding-logo)) strong,
.funding--logos .funding-item strong{font-size:1.02rem}

@media (max-width:760px){
  /* ---------- Le bandeau de coordonnées disparaît : trois lignes gagnées ---------- */
  .topbar{display:none}

  /* ---------- Bandeau ---------- */
  .hero h1{font-size:max(1.85rem,min(1rem + 5.4vw,2.4rem))}
  .hero-sub{line-height:1.45;margin-bottom:1rem}
  /* un seul appel à l'action : le second vit déjà dans le menu et plus bas */
  .hero-cta .btn--outline-light{display:none}

  /* Les logos institutionnels prennent la même pastille blanche que Qualiopi */
  .hero-side{background:none;box-shadow:none;padding:0;border-radius:0}
  .hero-logos{gap:10px;padding:14px 0 0;justify-content:flex-start}
  .hero-logos img{
    background:#fff;border-radius:10px;padding:6px 9px;
    max-height:38px;box-sizing:content-box;
  }
  .hero-logos img[src*="investir"]{max-height:38px}

  /* ---------- Barre de filtres de l'accueil : bord à bord ---------- */
  .cat-bar{
    margin-inline:calc(var(--gutter) * -1);border-radius:0;border-inline:0;
    padding:7px var(--gutter);
  }
  .cat-bar.is-stuck{border-radius:0}
  .cat-bar .filters{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  /* pastilles réduites d'un tiers — l'état collé compris */
  .cat-bar .filter,
  .cat-bar.is-stuck .filter{padding:6px 10px;font-size:.7rem;min-height:30px;border-width:1px}
  .cat-bar .cat-search .field,
  .cat-bar.is-stuck .cat-search .field{padding:8px 11px 8px 30px;font-size:16px}
  .cat-bar .cat-search > svg{left:10px;width:14px;height:14px}
  .cat-search{flex:0 1 50%;min-width:132px}

  /* ---------- Carrousel : durée et tarif sur la même ligne de base ---------- */
  #formation-grid .fc-meta dt{display:none}
  #formation-grid .fc-meta dd{font-size:.72rem;font-weight:750}
  #formation-grid .fc-meta .fc-m + .fc-m::before{margin:0 .3em}

  /* ---------- Chiffres clés sur deux colonnes ---------- */
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:20px 8px}
  .stat::before,.stat::after{display:none!important}
  .stat + .stat::before{display:block!important}
  .stat:nth-child(odd)::before{display:none!important}
  .stat:nth-child(n+3)::after{
    display:block!important;content:"";position:absolute;top:0;
    left:10px;right:10px;height:1px;background:var(--line-soft);
  }
  .stat-ico{width:38px;height:38px;margin-bottom:10px}
  .stat-ico svg{width:19px;height:19px}
  .stat-num{font-size:clamp(1.3rem,.95rem + 1.35vw,1.65rem)}
  .stat-label{font-size:.82rem;line-height:1.35;margin-top:8px}

  /* ---------- Résultats : deux colonnes, titre sur une ligne ---------- */
  .section--navy .section-head h2{font-size:1.05rem;letter-spacing:-.022em;line-height:1.25}
  .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px}
  .kpi{padding:0}
  .kpi-val{font-size:1.75rem}
  .kpi-label{font-size:.92rem;margin:.3em 0 .8em;line-height:1.35}
  .meter{height:5px}

  /* ---------- Partenaires : quatre logos visibles, plus grands ---------- */
  .marquee-track{gap:14px}
  .partner{height:110px}
  .partner img{max-height:110px;max-width:150px}
}

/* ============================================================
   60. Catalogue : une recherche, rien d'autre
   ============================================================ */
.catbar{
  background:linear-gradient(100deg,var(--navy-900),var(--navy-700) 62%,#0F5F84);
  backdrop-filter:none;border-bottom:0;
  box-shadow:0 6px 20px rgba(5,34,54,.16);
}
.catbar.is-stuck{box-shadow:0 10px 28px rgba(5,34,54,.30)}
.catbar-in{
  grid-template-columns:minmax(0,1fr);
  max-width:var(--wrap);padding-block:11px;
}
.catbar-search{max-width:640px;margin-inline:auto}
.catbar-search .field{
  background:rgba(255,255,255,.97);border-color:transparent;border-radius:999px;
}
.catbar-search .field:focus{
  background:#fff;border-color:var(--lagoon-500);box-shadow:0 0 0 4px rgba(34,176,181,.28);
}
.catbar-search .field::placeholder{color:#7A93A8}
.catbar-search > svg{color:#6E8397}
.catbar.is-stuck .catbar-in{padding-block:8px}

/* Le niveau quitte les listes latérales, où la vignette fait 86 px et où le
   titre suffit. Dans le catalogue, en revanche, il distingue un titre
   professionnel d'un module court : c'est le premier critère de tri du
   visiteur, il reste. */
.grid-3 .fc-tags .badge--solid,
.grid-cards .fc-tags .badge--solid{display:none}
.grid-3 .fc-tags:empty,.grid-cards .fc-tags:empty,.grid-catalogue .fc-tags:empty{display:none}

/* ============================================================
   61. Fiche : bandeau allégé au doigt, sous-menu qui suit la lecture
   ============================================================ */
/* Le sous-menu descend en place au lieu d'apparaître d'un bloc */
.pagenav{animation:pagenav-in .32s var(--ease)}
@keyframes pagenav-in{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:none}
}
.pagenav ul{scroll-behavior:smooth}

@media (max-width:760px){
  /* le fil d'Ariane et les repères doublent ce que dit déjà la page */
  .fiche-hero .breadcrumb{display:none}
  .fiche-facts--wide{display:none}
  .fiche-hero-inner{padding-top:clamp(20px,4vw,30px);text-align:left}
  .fiche-hero-inner .badges{justify-content:flex-start}
}

/* ============================================================
   62. Bloc tarif : barre fixée en bas au doigt
   ============================================================ */
.tarif-bar{display:none}

@media (max-width:1100px){
  .tarif-bar{
    display:flex;align-items:center;gap:8px;
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    box-shadow:0 -8px 26px rgba(8,52,82,.12);
  }
  .tarif-bar[hidden]{display:none}
  .tarif-bar-price{display:flex;align-items:baseline;gap:.3em;min-width:0;flex:0 1 auto;margin-right:auto}
  .tarif-bar-price b{
    font-family:var(--font-display);font-size:.98rem;font-weight:800;color:var(--ink);
    font-variant-numeric:tabular-nums;white-space:nowrap;
  }
  /* sous 400 px, le suffixe « net de taxe » cède la place aux actions */
  .tarif-bar-price span{font-size:.7rem;color:var(--muted);white-space:nowrap}
  @media (max-width:420px){ .tarif-bar-price span{display:none} }
  .tarif-bar .btn{flex:none;padding:10px 13px;font-size:.8rem;min-height:40px;white-space:nowrap}
  .tarif-bar .btn--primary{box-shadow:none}
  .tarif-bar-more{
    flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
    background:#fff;color:var(--navy-800);display:grid;place-items:center;cursor:pointer;
    transition:transform .25s var(--ease),background .18s var(--ease);
  }
  .tarif-bar-more svg{width:17px;height:17px}
  .tarif-bar-more[aria-expanded="true"]{background:var(--blue-50);transform:rotate(180deg)}

  /* La carte complète devient le tiroir qui se déplie au-dessus de la barre */
  .tarif-card{
    position:fixed;left:0;right:0;bottom:0;z-index:89;
    margin:0;border-radius:22px 22px 0 0;border-bottom:0;
    max-height:min(78vh,640px);overflow-y:auto;
    padding-bottom:calc(74px + env(safe-area-inset-bottom));
    transform:translateY(101%);opacity:0;pointer-events:none;
    transition:transform .34s var(--ease),opacity .24s var(--ease);
    box-shadow:0 -18px 44px rgba(8,52,82,.22);
  }
  .tarif-card.is-open{transform:none;opacity:1;pointer-events:auto}
  .tarif-card .tarif-tel{margin-inline:-22px}
  /* le fond de page s'assombrit derrière le tiroir */
  .tarif-veil{
    position:fixed;inset:0;z-index:88;background:rgba(5,34,54,.42);
    opacity:0;pointer-events:none;transition:opacity .28s var(--ease);
  }
  .tarif-veil.is-on{opacity:1;pointer-events:auto}
  /* la page garde de quoi respirer sous son dernier bloc */
  body.has-tarif-bar{padding-bottom:72px}
}

/* ============================================================
   63. Sélecteur de langue à drapeau
   ============================================================ */
.langpick{position:relative;flex:none}
.langpick-btn{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  padding:8px 9px;border-radius:999px;border:1px solid var(--line);background:#fff;
  font-family:var(--font-display);font-size:.8rem;font-weight:750;color:var(--navy-800);
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.langpick-btn:hover{border-color:var(--blue-400);background:var(--blue-50)}
.langpick-btn[aria-expanded="true"]{border-color:var(--blue-400);background:var(--blue-50)}
.flag{width:19px;height:13px;border-radius:2.5px;display:block;flex:none;box-shadow:0 0 0 1px rgba(8,52,82,.10)}
.langpick-chev{width:10px;height:10px;opacity:.6;transition:transform .2s var(--ease)}
.langpick-btn[aria-expanded="true"] .langpick-chev{transform:rotate(180deg)}

.langpick-list{
  position:absolute;top:calc(100% + 8px);right:0;z-index:80;min-width:158px;
  list-style:none;margin:0;padding:6px;background:#fff;
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 42px rgba(8,52,82,.18);
  animation:langpick-in .2s var(--ease);
}
.langpick-list[hidden]{display:none}
@keyframes langpick-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.langpick-list li{margin:0}
.langpick-list a{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;
  font-family:var(--font-display);font-size:.88rem;font-weight:700;color:var(--navy-800);
}
.langpick-list a:hover{background:var(--blue-50);color:var(--blue-600);text-decoration:none}
.langpick-list [aria-selected="true"] a{background:var(--canvas)}

/* l'ancienne liste FR / EN disparaît partout où le sélecteur la remplace */
.nav-actions .lang{display:none}

/* Au doigt, trois éléments se partagent la barre : chacun cède du gras */
@media (max-width:760px){
  .langpick-btn{padding:7px 9px;gap:5px;font-size:.76rem}
  .langpick-chev{display:none}
  .flag{width:18px;height:12px}
  .nav-actions .btn--ghost{padding:9px 13px;font-size:.8rem}
  .langpick-list{min-width:150px}
}
@media (max-width:345px){ .langpick-btn span{display:none} }

/* ============================================================
   64. Pages éditoriales — sections, sommaire et colonne d'action
   Les blocs plats du back-office deviennent une page rythmée :
   une section par titre, un sommaire qui suit, une colonne d'appel.
   ============================================================ */
.page-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(28px,4vw,64px);align-items:start;
  padding-block:clamp(34px,5vw,64px) clamp(20px,3vw,40px);
}
.page-main{min-width:0}
/* Sans colonne d'appel, le texte prend toute la largeur : on le borne, sinon
   les lignes s'étirent jusqu'à devenir pénibles à lire. */
.page-layout--seul{grid-template-columns:minmax(0,1fr)}
.page-layout--seul .page-main{max-width:940px;margin-inline:auto}

/* L'introduction porte la voix de la page : plus grande, plus aérée */
.page-intro{
  font-size:clamp(1.06rem,1rem + .35vw,1.22rem);line-height:1.68;color:var(--body);
  padding-bottom:clamp(20px,2.6vw,32px);margin-bottom:clamp(8px,1.4vw,18px);
  border-bottom:1px solid var(--line-soft);
}
.page-intro .prose p:last-child{margin-bottom:0}

/* Une section par titre, avec son rythme clair / crème alterné */
.page-sec{
  padding:clamp(26px,3.4vw,42px) 0;
  border-bottom:1px solid var(--line-soft);
  scroll-margin-top:calc(var(--hdr-h,68px) + 76px);
}
.page-sec:last-of-type{border-bottom:0}
.page-sec > .prose:last-child > :last-child{margin-bottom:0}
.page-sec .sec-h{margin-bottom:clamp(16px,2vw,24px)}

/* Le contenu rédigé au back-office */
.prose h3{
  font-size:clamp(1.06rem,1rem + .35vw,1.22rem);font-weight:750;color:var(--ink);
  margin:1.7em 0 .55em;letter-spacing:-.015em;
}
.prose > :first-child{margin-top:0}
.prose p{margin:0 0 1.05em}
.prose a{color:var(--blue-600);text-decoration:underline;text-underline-offset:2px}
/* Un paragraphe reduit a un lien se presente en bouton : c'est liens_en_boutons()
   (inc/helpers.php) qui pose les classes, le WYSIWYG ne change pas. */
.prose .prose-btns{display:flex;flex-wrap:wrap;gap:12px;margin:1.3em 0}
.prose a.btn{color:var(--btn-fg);text-decoration:none;white-space:normal;text-align:center;line-height:1.25}
.prose a.btn--ghost:hover{color:var(--blue-600)}

/* Listes : la puce reste la puce. La version cochée est une option, posée
   depuis l'éditeur (bouton « Liste cochée ») — elle ajoute class="check". */
.prose ul{list-style:disc;margin:0 0 1.2em;padding-left:1.35em;display:block}
.prose ul li{
  position:relative;margin:0 0 .5em;line-height:1.55;
}
.prose ul li::marker{color:var(--blue-600)}
.prose ul.check{list-style:none;padding-left:0;display:grid;gap:11px}
.prose ul.check li{margin:0;padding-left:32px}
.prose ul.check li::marker{content:""}
.prose ul.check li::before{
  content:"";position:absolute;left:0;top:.12em;width:21px;height:21px;border-radius:50%;
  background:var(--lagoon-100) var(--coche) center / 13px 13px no-repeat;
}
/* Les listes déjà cochées par leur contexte gardent la main sur le style. */
.prose--check ul{list-style:none;padding-left:0}
/* Tailles de texte choisies dans l'éditeur. Relatives : le texte reste
   accordé au contexte et suit les tailles d'écran comme le reste. */
.prose .txt-s{font-size:.88em;line-height:1.6}
.prose .txt-l{font-size:1.16em;line-height:1.62}
.prose .txt-xl{font-size:1.34em;line-height:1.5;letter-spacing:-.01em}
.prose p.txt-l,.prose p.txt-xl{color:var(--body)}
.prose ul li strong{color:var(--ink)}
.prose ol{margin:0 0 1.2em;padding-left:1.3em;display:grid;gap:10px}

/* Un déroulé en étapes : la liste devient un chemin numéroté */
[data-sec*="deroul"] .prose ul,
[data-sec*="etape"] .prose ul{counter-reset:etape;gap:0;list-style:none;padding-left:0}
[data-sec*="deroul"] .prose ul li,
[data-sec*="etape"] .prose ul li{
  counter-increment:etape;padding:0 0 26px 54px;
}
[data-sec*="deroul"] .prose ul li::before,
[data-sec*="etape"] .prose ul li::before{
  content:counter(etape);left:0;top:0;width:34px;height:34px;
  background:var(--blue-600);color:#fff;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:.92rem;font-weight:800;
}
/* le trait qui relie les étapes s'arrête à la dernière */
[data-sec*="deroul"] .prose ul li::after,
[data-sec*="etape"] .prose ul li::after{
  content:"";left:16px;top:38px;bottom:6px;width:2px;height:auto;
  background:var(--blue-100);border:0;transform:none;border-radius:2px;
}
[data-sec*="deroul"] .prose ul li:last-child,
[data-sec*="etape"] .prose ul li:last-child{padding-bottom:0}
[data-sec*="deroul"] .prose ul li:last-child::after,
[data-sec*="etape"] .prose ul li:last-child::after{display:none}
[data-sec*="deroul"] .prose ul li strong,
[data-sec*="etape"] .prose ul li strong{
  display:block;font-family:var(--font-display);font-size:1.02rem;
  font-weight:750;color:var(--ink);margin-bottom:2px;
}

/* Les indicateurs se lisent en chiffres, pas en liste */
[data-sec*="indicateur"] .prose ul,
[data-sec*="resultat"] .prose ul{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:14px;list-style:none;padding-left:0;
}
[data-sec*="indicateur"] .prose ul li,
[data-sec*="resultat"] .prose ul li{
  padding:22px 20px;background:var(--canvas);border-radius:var(--radius-lg);
  border:1px solid var(--line-soft);text-align:center;color:var(--muted);font-size:.92rem;
}
[data-sec*="indicateur"] .prose ul li::before,
[data-sec*="indicateur"] .prose ul li::after,
[data-sec*="resultat"] .prose ul li::before,
[data-sec*="resultat"] .prose ul li::after{display:none}
[data-sec*="indicateur"] .prose ul li strong,
[data-sec*="resultat"] .prose ul li strong{
  display:block;font-family:var(--font-display);
  font-size:clamp(1.9rem,1.5rem + 1.4vw,2.5rem);font-weight:800;line-height:1;
  letter-spacing:-.035em;color:var(--blue-600);margin-bottom:8px;
  font-variant-numeric:tabular-nums;
}

/* Le financement se détache : c'est souvent la question qui reste */
[data-sec*="financ"]{
  background:var(--sand);border:1px solid #F0E6D6;border-radius:var(--radius-xl);
  padding:clamp(24px,3vw,34px);border-bottom:1px solid #F0E6D6;
  margin-block:clamp(10px,1.6vw,18px);
}
[data-sec*="financ"] .sec-ico{color:#B4762A}

.page-fig{margin:0 0 1.6em}
.page-fig img{width:100%;border-radius:var(--radius-lg)}
.page-fig figcaption{margin-top:10px;font-size:.85rem;color:var(--muted)}

/* ---------- La colonne d'appel ---------- */
.page-aside{position:sticky;top:calc(var(--hdr-h,68px) + 78px)}
.page-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);
  box-shadow:var(--shadow);padding:24px;overflow:hidden;
}
.page-card-eyebrow{
  margin:0 0 8px;font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--lagoon-600);
}
.page-card h2{font-size:1.28rem;margin:0 0 10px;letter-spacing:-.024em}
.page-card-lede{margin:0 0 20px;font-size:.92rem;line-height:1.55;color:var(--muted)}
.page-card-alt{margin-top:10px}
.page-card-list{
  list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--line-soft);
  display:grid;gap:10px;
}
.page-card-list li{
  display:flex;align-items:flex-start;gap:10px;margin:0;
  font-size:.88rem;line-height:1.45;color:var(--body);
}
.page-card-list svg{width:15px;height:15px;flex:none;color:var(--lagoon-600);margin-top:.28em}
.page-card .tarif-tel{margin:18px -24px -24px;padding:15px 24px}

@media (max-width:1000px){
  .page-layout{grid-template-columns:minmax(0,1fr)}
  .page-aside{position:static;max-width:520px}
}
@media (max-width:760px){
  .page-layout{padding-block:clamp(24px,4vw,34px) 10px;gap:26px}
  .page-sec{padding:24px 0}
  .page-card{padding:20px}
  .page-card .tarif-tel{margin:18px -20px -20px;padding:15px 20px}
  [data-sec*="deroul"] .prose ul li,[data-sec*="etape"] .prose ul li{padding-left:46px}
  [data-sec*="deroul"] .prose ul li::before,[data-sec*="etape"] .prose ul li::before{width:30px;height:30px;font-size:.86rem}
  [data-sec*="deroul"] .prose ul li::after,[data-sec*="etape"] .prose ul li::after{left:14px;top:34px}
}

/* ============================================================
   65. Accueil — le bandeau occupe l'écran, la recherche passe en lagon
   ============================================================ */
/* Le bandeau prend exactement ce que l'habillage haut lui laisse.
   min-height et non height : un contenu plus long fait grandir la zone
   au lieu de déborder. */
.hero{
  min-height:calc(100svh - var(--chrome-h,124px));
  display:flex;flex-direction:column;justify-content:center;
}
@supports not (height:100svh){
  .hero{min-height:calc(100vh - var(--chrome-h,124px))}
}
.hero .hero-inner{width:100%}

/* Recherche : fond lagon, elle ne se confond plus avec la page */
.finder{
  background:linear-gradient(118deg,var(--lagoon-600),var(--lagoon-500) 62%,#2BC3C8);
  box-shadow:0 20px 46px rgba(14,143,148,.30),0 3px 10px rgba(8,52,82,.10);
  border:1px solid rgba(255,255,255,.18);
}
.finder-field label{color:rgba(255,255,255,.92)}
.finder .field{border-color:transparent}
.finder .field:focus{
  border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.35);
}
/* le bouton doit trancher sur le lagon : on descend vers le bleu nuit */
.finder .btn--primary{
  --btn-bg:var(--navy-800);
  box-shadow:0 10px 24px rgba(5,34,54,.28);
}
.finder .btn--primary:hover{--btn-bg:var(--navy-900);background:var(--navy-900)}

/* La liste de suggestions reste claire, posée au-dessus du lagon */
.finder .ac-list{box-shadow:0 18px 44px rgba(5,34,54,.30)}

/* « Tous les financements » frôlait le chevron : la colonne s'élargit */
@media (min-width:761px){
  .finder{grid-template-columns:2fr 1fr 1.18fr auto}
}
@media (max-width:760px){
  .finder-field label{font-size:.68rem}
}

/* ============================================================
   66. La recherche se pose sur l'image, dans le premier écran
   Le bandeau réserve la hauteur exacte de la carte (--finder-h,
   mesurée en JS) et la carte remonte d'autant : plus besoin de
   défiler pour la voir.
   ============================================================ */
.hero .hero-inner{padding-bottom:calc(var(--finder-h,120px) + 34px)}
.finder{
  margin-top:calc(-1 * var(--finder-h,120px) - 26px);
  position:relative;z-index:6;
}

@media (max-width:760px){
  /* Au doigt, la carte doit tenir dans l'écran avec le reste du bandeau :
     les deux menus déroulants partagent une ligne. */
  .finder{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 10px;padding:14px;
  }
  .finder-field:first-child{grid-column:1 / -1}
  .finder .btn{grid-column:1 / -1;padding:13px 18px}
  .finder-field label{font-size:.64rem;letter-spacing:.06em}
  .finder .field{padding:11px 12px;font-size:16px}
  .finder select.field{padding-right:30px;background-position:right 10px center}

  /* le bandeau se resserre pour laisser la place à la carte */
  .hero-inner{padding-block:18px 0}
  .hero .badge--ghost{margin-bottom:2px}
  .hero h1{margin-bottom:.28em}
  .hero-sub{margin-bottom:.9rem}
  .hero-cta{margin-bottom:.9rem}
  .hero-trust{padding-top:0;gap:10px}
  .hero-trust img{height:30px}
  .hero-trust p{font-size:.68rem;line-height:1.35}
  .hero-logos{padding:10px 0 0;gap:8px}
  .hero-logos img{max-height:30px;padding:5px 7px}
}

/* Écrans courts : la mention Qualiopi cède sa place pour que la carte de
   recherche reste dans le premier écran. Le logo, lui, demeure. */
@media (max-width:760px) and (max-height:820px){
  .hero-trust p{display:none}
  .hero-trust{padding-top:0}
  .hero-logos{padding-top:8px}
  .hero-logos img{max-height:26px}
  .hero-sub{margin-bottom:.75rem}
}

/* Écrans très courts (iPhone SE et assimilés) : on garde ce qui fait agir —
   titre, promesse, action, recherche. Les logos institutionnels et la mention
   Qualiopi reviennent dès qu'il y a de la hauteur. */
@media (max-width:760px) and (max-height:700px){
  .hero-side{display:none}
  .hero h1{font-size:max(1.62rem,min(1rem + 4.6vw,2rem));line-height:1.08}
  .hero-sub{
    font-size:.94rem;margin-bottom:.7rem;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .hero-trust{padding-top:0}
  .hero-cta .btn{padding:13px 18px;min-height:44px}
  .finder{padding:12px;gap:8px}
}

/* ============================================================
   67. Catalogue — recherche dans le bandeau, quatre colonnes
   ============================================================ */
/* La barre a quitté le haut de page : plus de sentinelle ni de collage */
.catbar,.catbar-sentinel{display:none}

/* Recherche posée sous la promesse, un cinquième plus grande que la barre
   qu'elle remplace, et intuitive comme sur l'accueil. */
/* ---------- Bandeau de recherche du catalogue ----------
   Pleine largeur, fond bleu, collé sous l'en-tête dès qu'on descend. Quand
   l'en-tête s'efface, il remonte prendre sa place : deux barres empilées
   mangeraient un tiers de l'écran sur un portable. */
.catsticky{
  position:sticky;top:var(--hdr-h,68px);z-index:55;
  background:linear-gradient(100deg,var(--navy-900),var(--navy-700) 62%,#0F5F84);
  transition:top .28s var(--ease),box-shadow .25s var(--ease),padding .2s var(--ease);
  padding-block:clamp(12px,1.5vw,18px);
}
html.hdr-hidden .catsticky{top:0}
.catsticky.is-stuck{box-shadow:0 12px 30px rgba(5,34,54,.32)}
.catsticky .catsearch{margin-top:0;max-width:760px}
.catsticky.is-stuck .catsearch .field{padding-block:13px;font-size:1rem}
.catsticky.is-stuck .catsearch .btn{padding-block:13px}
.catsticky-sentinel{height:1px;margin:0}
@media (max-width:700px){
  .catsticky{padding-block:10px}
  .catsticky .catsearch{max-width:none}
}
@media (prefers-reduced-motion:reduce){ .catsticky{transition:none} }

.catsearch{
  position:relative;display:flex;align-items:center;gap:10px;
  margin-top:clamp(22px,2.6vw,32px);max-width:660px;
}
.catsearch > svg{
  position:absolute;left:20px;width:21px;height:21px;color:var(--muted);
  pointer-events:none;z-index:2;
}
.catsearch .field{
  flex:1 1 auto;min-width:0;
  padding:17px 18px 17px 52px;border-radius:999px;
  font-size:1.06rem;background:rgba(255,255,255,.97);border-color:transparent;
}
.catsearch .field::placeholder{color:#7A93A8}
.catsearch .field:focus{
  background:#fff;border-color:var(--lagoon-500);
  box-shadow:0 0 0 4px rgba(34,176,181,.32);
}
.catsearch .btn{flex:none;padding:16px 26px;font-size:1rem}
.catsearch .ac-list{
  top:calc(100% + 8px);left:0;right:0;
  box-shadow:0 20px 48px rgba(5,34,54,.34);
}

/* Le bandeau du catalogue laisse déborder la liste de suggestions.
   Le halo décoratif est reclipé pour ne pas s'échapper avec elle. */
.fiche-hero--slim{overflow:visible;z-index:20}
.fiche-hero--slim::after{display:none}
.fiche-hero--slim > .wrap{position:relative;z-index:2}

/* Le catalogue s'affiche sur quatre colonnes, puis se replie */
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* on tient les quatre colonnes le plus longtemps possible : la gouttière entre
   les cartes se resserre avant qu'on en retire une. */
@media (max-width:1150px){ .grid-4{gap:14px} }
@media (max-width:1040px){ .grid-4{gap:11px} }
@media (max-width:980px){ .grid-4{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} }
@media (max-width:760px){ .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .grid-catalogue{grid-template-columns:1fr} }
@media (max-width:560px){ .grid-4{grid-template-columns:1fr} }
/* la première rangée n'a pas besoin d'un écran de blanc au-dessus */
.fiche-hero--slim + .section{padding-top:clamp(34px,4vw,56px)}

@media (max-width:760px){
  .catsearch{margin-top:18px;gap:8px}
  .catsearch > svg{left:16px;width:18px;height:18px}
  .catsearch .field{padding:14px 14px 14px 44px;font-size:16px}
  .catsearch .btn{padding:14px 18px;font-size:.9rem}
}
@media (max-width:430px){
  /* le mot « Rechercher » cède la place au champ : la loupe suffit */
  .catsearch .btn{padding:14px;font-size:0;min-width:48px}
  .catsearch .btn::after{
    content:"";width:18px;height:18px;display:block;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") center/contain no-repeat;
  }
}

/* ============================================================
   68. Parcours e-learning — nouveaux contenus et devoirs
   ============================================================ */
/* Cours audio */
.player-audio{
  display:flex;align-items:center;gap:16px;
  padding:20px 22px;margin-bottom:22px;
  background:linear-gradient(120deg,var(--navy-900),var(--navy-700) 70%,#0F5F84);
  border-radius:var(--radius-lg);color:#fff;
}
.player-audio > svg{width:34px;height:34px;flex:none;color:var(--lagoon-500)}
.player-audio audio{width:100%;min-width:0}

/* Support intégré (Gamma, Genially…) */
.player-embed{
  /* Largeur d'abord : sans elle, la hauteur minimale peut faire enfler la
     boîte par le rapport d'image et déborder de l'écran. */
  position:relative;width:100%;aspect-ratio:16/10;min-height:min(74vh,780px);margin-bottom:12px;
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--canvas);
}
.player-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-embed-out{margin:0 0 22px;font-size:.88rem}
.player-embed-out a{font-weight:650}

/* Dépôt d'une copie */
.quiz-upload{
  margin-top:14px;padding:14px 16px;border:1.5px dashed var(--line);
  border-radius:var(--radius);background:var(--canvas);
  /* le bloc quiz centre son contenu : le dépôt, lui, se lit aligné à gauche */
  text-align:left;
}
.quiz-upload label{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:8px;
  font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--ink);cursor:pointer;
}
.quiz-upload label svg{width:19px;height:19px;color:var(--blue-600)}
.quiz-upload input[type=file]{
  display:block;width:100%;font-size:.88rem;color:var(--body);
}
.quiz-upload input[type=file]::file-selector-button{
  margin-right:12px;padding:9px 15px;border:0;border-radius:999px;cursor:pointer;
  background:var(--navy-800);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.85rem;
}
.quiz-upload .hint{display:block;margin-top:8px;font-size:.82rem;font-weight:400;color:var(--muted);text-align:left}

/* Minuteur */
.quiz-timer{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
  padding:10px 18px;border-radius:999px;
  background:var(--blue-50);color:var(--navy-800);
  font-family:var(--font-display);font-weight:700;font-size:.92rem;
}
.quiz-timer svg{width:18px;height:18px;color:var(--blue-600)}
.quiz-timer strong{font-variant-numeric:tabular-nums;font-size:1.06rem;letter-spacing:-.01em}
.quiz-timer.is-urgent{background:#FDECEA;color:#8C2318}
.quiz-timer.is-urgent svg{color:var(--red-600)}
.quiz-timer.is-over{background:var(--red-600);color:#fff}
.quiz-timer.is-over svg{color:#fff}

/* Corrigé d'un devoir */
.player-solution{
  margin-top:26px;padding:24px 26px;
  background:var(--green-100);border:1px solid var(--green-200);
  border-radius:var(--radius-lg);
}
.player-solution h2{
  display:flex;align-items:center;gap:11px;margin:0 0 14px;
  font-size:1.16rem;color:var(--green-700);
}
.player-solution h2 svg{width:21px;height:21px;flex:none}
.player-solution .prose :last-child{margin-bottom:0}

.player-locked{
  display:flex;align-items:center;gap:11px;margin-top:26px;
  padding:16px 20px;border:1.5px dashed var(--line);border-radius:var(--radius);
  color:var(--muted);font-size:.92rem;background:var(--canvas);
}
.player-locked svg{width:19px;height:19px;flex:none;color:var(--muted)}

@media (max-width:720px){
  .player-audio{flex-direction:column;align-items:stretch;gap:12px;padding:16px}
  .player-solution{padding:18px}

  /* Support intégré et PDF : bord à bord, et aussi haut que l'écran le
     permet. Une présentation lue dans un timbre-poste ne se lit pas. */
  .player-embed,.player-pdf,.player-video{
    margin-inline:calc(var(--player-pad,24px) * -1);
    width:auto;border-radius:0;border-left:0;border-right:0;
  }
  .player-embed,.player-pdf{
    aspect-ratio:auto;
    height:78vh;height:calc(100dvh - 180px);
    min-height:460px;
  }
  .player-embed-out,.player-pdf + p{margin-top:14px}
}

/* Aperçu formateur : un bandeau discret rappelle qu'on regarde, sans jouer */
.player-preview{
  display:flex;align-items:center;gap:11px;margin-bottom:20px;
  padding:12px 18px;border-radius:var(--radius);
  background:var(--sand);border:1px solid #F0E6D6;
  font-size:.9rem;color:#7A5A22;
}
.player-preview svg{width:19px;height:19px;flex:none;color:#B4762A}
.player-preview strong{color:#5E4416}

/* ============================================================
   69. Tunnel d'achat
   ============================================================ */
/* ============================================================
   Tunnel d'inscription — informations, paiement, confirmation.
   Le bleu conduit, le vert rassure : il n'apparait que la ou
   l'acheteur se demande « et si ca tourne mal ? » — avant de
   payer, et juste apres.
   ============================================================ */
.ck{padding:clamp(24px,4vw,48px) 0 clamp(48px,7vw,90px);
  background:linear-gradient(180deg,var(--blue-50),var(--canvas) 260px)}
.ck-wrap{max-width:1140px}
.ck-wrap--seul{max-width:760px}

/* ---------- Le fil des etapes ---------- */
.ck-fil{margin:0 0 clamp(24px,4vw,40px)}
.ck-fil-compte{margin:0 0 12px;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--blue-600)}
.ck-fil-compte strong{color:var(--blue-600)}
.ck-steps{position:relative;display:flex;align-items:flex-start;gap:0;list-style:none;margin:0;padding:0}
.ck-steps-rail{position:absolute;left:21px;right:21px;top:21px;height:3px;border-radius:3px;
  background:var(--line);overflow:hidden}
.ck-steps-rail i{display:block;height:100%;width:var(--avance,0%);border-radius:3px;
  background:linear-gradient(90deg,var(--green-600),var(--blue-500));
  transition:width .6s var(--ease)}
.ck-steps li{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  align-items:center;gap:9px;text-align:center;color:var(--muted);font-size:.9rem}
.ck-steps-n{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:2px solid var(--line);color:var(--muted);
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.ck-steps-n svg{width:20px;height:20px}
.ck-steps li.is-now .ck-steps-n{border-color:var(--blue-600);background:var(--blue-600);color:#fff;
  box-shadow:0 0 0 5px var(--blue-100)}
.ck-steps li.is-now{color:var(--ink);font-weight:700}
.ck-steps li.is-done .ck-steps-n{border-color:var(--green-600);background:var(--green-600);color:#fff}
.ck-steps li.is-done{color:var(--green-700);font-weight:650}
.ck-steps-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ---------- La colonne principale ---------- */
.ck-grid{display:grid;grid-template-columns:minmax(0,1fr) 362px;gap:clamp(20px,3vw,36px);align-items:start}
.ck-main{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,3.2vw,36px);box-shadow:var(--shadow-sm)}
.ck-main h1{font-size:clamp(1.55rem,1.2rem + 1.1vw,2.05rem);margin-bottom:.25em;letter-spacing:-.02em}
.ck-main h2{display:flex;align-items:center;gap:11px;font-size:1.04rem;margin:32px 0 16px;
  padding-top:20px;border-top:1px solid var(--line-soft)}
.ck-main h2:first-of-type{margin-top:24px}
.ck-h-ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:var(--blue-50);color:var(--blue-600)}
.ck-h-ico svg{width:17px;height:17px}
.ck-lede{color:var(--body);margin-bottom:1.5em;max-width:54ch}
.ck-main .opt{font-weight:400;color:var(--muted);font-size:.86em}

.ck-form .form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0 16px}
.ck-form .form-field{margin-bottom:16px}
.ck-form .form-field--large{grid-column:1/-1}
.ck-form .field-err{display:block;margin-top:5px;color:var(--coral-600);font-size:.84rem}
.ck-form .form-field.is-err .field{border-color:var(--coral-500)}

/* La phrase verte : elle repond a la seule question qui bloque le clic. */
.ck-calme{display:flex;align-items:flex-start;gap:13px;margin:26px 0 0;padding:15px 17px;
  border-radius:var(--radius);background:var(--green-100);border:1px solid var(--green-200);
  color:var(--green-700);font-size:.93rem;line-height:1.55}
.ck-calme strong{color:var(--green-700)}
.ck-calme-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:#fff;color:var(--green-600)}
.ck-calme-ico svg{width:19px;height:19px}

.ck-next{margin-top:20px;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.ck-next svg{width:18px;height:18px}
.ck-legal{font-size:.84rem;color:var(--muted);margin-top:14px;text-align:center}
.ck-legal a{color:var(--blue-600);text-decoration:underline}

/* ---------- Les trois garanties de l'etape paiement ---------- */
.ck-garanties{list-style:none;margin:22px 0 4px;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:720px){.ck-garanties{grid-template-columns:1fr}}
.ck-garanties li{display:flex;align-items:flex-start;gap:11px;padding:14px 15px;
  border-radius:var(--radius);background:var(--green-100);border:1px solid var(--green-200)}
.ck-garanties svg{flex:none;width:20px;height:20px;color:var(--green-600);margin-top:1px}
.ck-garanties span{font-size:.86rem;line-height:1.45;color:var(--green-700)}
.ck-garanties strong{display:block;color:var(--green-700);font-size:.92rem;margin-bottom:2px}

.ck-pay-btn{margin-top:22px;position:relative}
.ck-spinner{width:19px;height:19px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:ck-tourne .7s linear infinite;display:inline-block}
/* `display` pose plus haut l'emporterait sur l'attribut hidden : la roue
   resterait affichee sur le bouton tant qu'on n'a pas clique. */
.ck-spinner[hidden]{display:none}
@keyframes ck-tourne{to{transform:rotate(360deg)}}
.ck-skeleton{height:190px;border-radius:12px;
  background:linear-gradient(90deg,var(--canvas) 25%,#EDF3F8 50%,var(--canvas) 75%);
  background-size:400% 100%;animation:ck-lueur 1.4s ease-in-out infinite}
@keyframes ck-lueur{to{background-position:-135% 0}}

.ck-sous-bouton{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.ck-secure{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--muted);margin:0}
.ck-secure svg{width:17px;height:17px;flex:none;color:var(--green-600)}

/* ---------- Le panier ---------- */
.ck-recap{position:sticky;top:96px}
.ck-recap-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);overflow:hidden}
.ck-recap-tete{display:flex;align-items:center;gap:12px;padding:18px 20px;cursor:pointer;
  list-style:none;font-family:var(--font-display)}
.ck-recap-tete::-webkit-details-marker{display:none}
.ck-recap-titre{display:flex;align-items:center;gap:10px;font-weight:750;color:var(--ink);font-size:1rem}
.ck-recap-titre svg{width:19px;height:19px;color:var(--blue-600)}
.ck-recap-somme{margin-left:auto;font-weight:800;font-size:1.06rem;color:var(--ink);letter-spacing:-.01em}
.ck-recap-fleche{flex:none;width:11px;height:11px;border-right:2.2px solid var(--muted);
  border-bottom:2.2px solid var(--muted);border-radius:1px;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .28s var(--ease)}
.ck-recap-box[open] .ck-recap-fleche{transform:rotate(-135deg) translate(-3px,-3px)}
.ck-recap-corps{padding:0 20px 20px}

.ck-recap-item{display:flex;gap:13px;align-items:center;padding:4px 0 16px;
  border-bottom:1px solid var(--line-soft)}
.ck-recap-item img,.ck-recap-vignette{width:62px;height:62px;border-radius:12px;flex:none}
.ck-recap-item img{object-fit:cover}
.ck-recap-vignette{display:grid;place-items:center;background:var(--blue-50);color:var(--blue-600)}
.ck-recap-vignette svg{width:26px;height:26px}
.ck-recap-item strong{display:block;color:var(--ink);line-height:1.3;font-size:.96rem}
.ck-recap-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:7px 0 0;padding:0}
.ck-recap-tags li{padding:3px 9px;border-radius:999px;background:var(--blue-50);
  color:var(--navy-700);font-size:.76rem;font-weight:650}

.ck-recap-lines{margin:16px 0 0;display:grid;gap:9px}
.ck-recap-lines div{display:flex;justify-content:space-between;gap:12px;font-size:.92rem}
.ck-recap-lines dt{color:var(--muted)}
.ck-recap-lines dd{margin:0;color:var(--ink)}
.ck-recap-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.ck-recap-total span{color:var(--ink);font-weight:700}
.ck-recap-total strong{font-size:1.65rem;color:var(--ink);letter-spacing:-.025em;
  font-family:var(--font-display);font-weight:800}
.ck-recap-note{font-size:.79rem;color:var(--muted);margin:8px 0 0;line-height:1.5}

.ck-recap-plus{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line-soft);
  display:grid;gap:10px;font-size:.89rem}
.ck-recap-plus li{display:flex;align-items:flex-start;gap:10px;color:var(--body)}
.ck-recap-plus svg{flex:none;width:15px;height:15px;margin-top:3px;color:var(--green-600)}

.ck-sur{display:flex;align-items:flex-start;gap:12px;margin-top:18px;padding:14px 15px;
  border-radius:var(--radius);background:var(--green-100);border:1px solid var(--green-200)}
.ck-sur-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:#fff;color:var(--green-600)}
.ck-sur-ico svg{width:19px;height:19px}
.ck-sur strong{display:block;color:var(--green-700);font-size:.92rem}
.ck-sur span{font-size:.83rem;line-height:1.45;color:var(--green-700);opacity:.86}

/* Les moyens de paiement. Tant qu'aucun logo officiel n'est depose dans
   uploads/paiement/, le nom du reseau s'affiche en toutes lettres. */
.ck-moyens{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0;padding:0}
.ck-moyens--ligne{margin:0}
.ck-moyen{display:grid;place-items:center;min-width:48px;height:32px;padding:0 9px;
  border:1px solid var(--line);border-radius:7px;background:#fff}
.ck-moyen span{font-size:.72rem;font-weight:750;letter-spacing:.02em;color:var(--navy-700);
  text-transform:uppercase;white-space:nowrap}
.ck-moyen--logo{padding:0 7px}
.ck-moyen img{max-height:20px;max-width:46px;width:auto;height:auto;display:block}

/* ---------- La page de fin ---------- */
.ck-final{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(28px,4.5vw,52px) clamp(22px,3.5vw,44px);text-align:center;box-shadow:var(--shadow-sm)}
.ck-final h1{font-size:clamp(1.55rem,1.2rem + 1.2vw,2.15rem);letter-spacing:-.025em;margin:0}
.ck-final .ck-lede{margin:14px auto 0;max-width:50ch;color:var(--body)}
.ck-final-p{margin:16px auto 0;max-width:52ch;color:var(--body);font-size:.96rem;line-height:1.62}
.ck-final .alert{text-align:left;margin-top:22px}
.ck-final-eyb{margin:0 0 10px;font-size:.82rem;font-weight:750;letter-spacing:.07em;
  text-transform:uppercase;color:var(--green-600)}

/* Le paiement est passe : c'est le seul endroit ou le vert prend toute la place. */
.ck-final--ok{background:linear-gradient(180deg,var(--green-100),#fff 240px);border-color:var(--green-200)}
.ck-final-ico{position:relative;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto 20px;background:var(--green-600);color:#fff;
  box-shadow:0 14px 30px rgba(18,140,94,.28)}
.ck-final-ico svg{width:34px;height:34px;position:relative;z-index:1}
/* Deux ondes qui s'ecartent une fois : une respiration, pas un clignotant. */
.ck-final-ico i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--green-600);opacity:0}
html.js-anim .ck-final--ok .ck-final-ico i{animation:ck-onde 2.6s var(--ease) 2}
html.js-anim .ck-final--ok .ck-final-ico i:nth-child(2){animation-delay:.5s}
html.js-anim .ck-final--ok .ck-final-ico svg{animation:ck-pose .5s var(--ease) both}
@keyframes ck-onde{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.85);opacity:0}}
@keyframes ck-pose{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

.ck-final--attente .ck-final-ico{background:var(--blue-600);box-shadow:0 14px 30px rgba(12,113,195,.24)}
.ck-final--ko .ck-final-ico{background:var(--coral-500);box-shadow:0 14px 30px rgba(226,84,58,.24)}
.ck-final--ko h1{color:var(--coral-600)}

/* Et maintenant ? Trois cartes, dans l'ordre ou ca se passe. */
.ck-suite{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(3,minmax(0,1fr));text-align:left}
@media (max-width:640px){.ck-suite{grid-template-columns:1fr}}
.ck-suite li{position:relative;padding:18px 16px;border-radius:var(--radius);
  background:#fff;border:1px solid var(--green-200)}
.ck-suite li > span:first-child{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:var(--green-100);color:var(--green-600);margin-bottom:12px}
.ck-suite svg{width:20px;height:20px}
.ck-suite strong{display:block;color:var(--ink);font-size:.97rem;margin-bottom:4px}
.ck-suite li > span:last-child{display:block;color:var(--body);font-size:.87rem;line-height:1.5}

.ck-facture{margin:26px auto 0;max-width:420px;display:grid;gap:9px;text-align:left;
  padding:16px 18px;border-radius:var(--radius);background:var(--canvas);border:1px solid var(--line)}
.ck-facture div{display:flex;justify-content:space-between;gap:14px;font-size:.92rem}
.ck-facture dt{color:var(--muted)}
.ck-facture dd{margin:0;color:var(--ink);font-weight:650}
.ck-final-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.ck-ident{display:block;margin-top:8px}
.ck-ident code{background:#fff;border:1px solid #DFE8F0;border-radius:6px;padding:2px 8px}

/* Un bouton vert, pour la seule action qui suit un paiement reussi. */
.btn--vert{--btn-bg:var(--green-600);--btn-fg:#fff;box-shadow:0 10px 26px rgba(18,140,94,.26)}
.btn--vert:hover{--btn-bg:var(--green-700)}

/* ---------- Petits ecrans ---------- */
@media (max-width:900px){
  .ck-grid{grid-template-columns:1fr}
  .ck-recap{position:static;order:-1}
  .ck-recap-corps{padding-bottom:18px}
  .ck-steps-l{font-size:.82rem}
}
@media (max-width:560px){
  .ck-steps li{gap:7px}
  .ck-steps-n{width:38px;height:38px}
  .ck-steps-rail{left:18px;right:18px;top:18px}
  .ck-steps li:not(.is-now) .ck-steps-l{display:none}
  /* Le seul libelle affiche a le droit de tenir sur deux lignes :
     « Vos informati… » ne renseigne personne. */
  .ck-steps li.is-now .ck-steps-l{white-space:normal;line-height:1.25}
  .ck-steps li.is-now{flex:2 1 0}
  .ck-main h2{margin-top:26px;padding-top:16px}
  .ck-final-actions .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  html.js-anim .ck-final--ok .ck-final-ico i,
  html.js-anim .ck-final--ok .ck-final-ico svg{animation:none}
  .ck-final-ico i{display:none}
  .ck-steps-rail i{transition:none}
}

/* ---------- Cartes a pictogramme ----------
   Quand cartes_html() reconnait l'intitule, le numero en filigrane cede la
   place a un pictogramme pose en tete, et le titre passe devant. */
/* Pas de cadre : le pictogramme porte la carte, le titre suit. Une tuile
   penchee, un dessin epais, et rien autour — on lit trois promesses, pas
   trois encadres.
   Les selecteurs sont doubles (.pcard.pcard--ico) : les regles de base de
   .pcard vivent plus bas dans la feuille et l'emporteraient a specificite
   egale. */
.pcards:has(.pcard--ico){--gouttiere:clamp(24px,3vw,42px);gap:var(--gouttiere);margin-top:30px}
.pcard.pcard--ico{
  background:none;border:0;box-shadow:none;padding:0;overflow:visible;
}
.pcard.pcard--ico::before,.pcard.pcard--ico::after{content:none}
.pcard.pcard--ico:hover{transform:none;box-shadow:none}

.pcard.pcard--ico .pcard-n{
  position:static;display:grid;place-items:center;opacity:1;font-size:inherit;
  width:clamp(76px,8.4vw,98px);height:clamp(76px,8.4vw,98px);margin:0 0 22px;
  border-radius:30%;
  background:linear-gradient(150deg,var(--a-soft),color-mix(in srgb,var(--a-soft) 50%,#fff));
  color:var(--a);rotate:-8deg;
  box-shadow:0 8px 16px color-mix(in srgb,var(--a) 14%,transparent);
  transition:rotate .45s var(--ease),scale .45s var(--ease),box-shadow .45s var(--ease);
}
.pcard.pcard--ico .pcard-n svg{
  width:52%;height:52%;stroke-width:2;rotate:8deg;
  transition:rotate .45s var(--ease);
}
.pcard.pcard--ico:hover .pcard-n{rotate:0deg;scale:1.06;
  box-shadow:0 12px 24px color-mix(in srgb,var(--a) 22%,transparent)}
.pcard.pcard--ico:hover .pcard-n svg{rotate:0deg}

.pcard.pcard--ico h3{
  font-size:clamp(1.26rem,1rem + .9vw,1.6rem);line-height:1.2;
  margin:0 0 .6rem;letter-spacing:-.018em;
}
.pcard.pcard--ico > p{font-size:1.01rem;line-height:1.66;color:var(--body)}

@media (prefers-reduced-motion:reduce){
  .pcard.pcard--ico .pcard-n,.pcard.pcard--ico .pcard-n svg{transition:none}
}

/* Une carte qui porte une image : le visuel occupe toute sa largeur, le
   titre et le texte suivent. Meme absence de cadre que les cartes a
   pictogramme — c'est la photo qui tient la carte. */
.pcard.pcard--img{
  background:none;border:0;box-shadow:none;padding:0;overflow:visible;
}
.pcard.pcard--img::before,.pcard.pcard--img::after{content:none}
.pcard.pcard--img:hover{transform:none;box-shadow:none}

.pcard-vis{
  display:block;overflow:hidden;border-radius:var(--radius-lg);
  margin:0 0 20px;background:var(--canvas);box-shadow:var(--shadow-sm);
}
.pcard-vis img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:scale .6s var(--ease);
}
.pcard.pcard--img:hover .pcard-vis img{scale:1.05}

.pcard.pcard--img h3{
  font-size:clamp(1.26rem,1rem + .9vw,1.6rem);line-height:1.2;
  margin:0 0 .6rem;letter-spacing:-.018em;
}
.pcard.pcard--img > p{font-size:1.01rem;line-height:1.66;color:var(--body)}

@media (prefers-reduced-motion:reduce){
  .pcard-vis img{transition:none}
  .pcard.pcard--img:hover .pcard-vis img{scale:1}
}

/* ---------- Grille tarifaire ---------- */
.ptarifs{
  display:grid;gap:14px;margin:24px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
}
.ptarif{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:26px 20px 24px;border-radius:var(--radius-lg);text-align:center;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.ptarif:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ptarif-label{
  font-size:.79rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);
}
.ptarif-prix{
  font-family:var(--font-display);font-weight:800;line-height:1;letter-spacing:-.03em;
  font-size:clamp(2.1rem,1.5rem + 1.8vw,2.9rem);color:var(--ink);margin-top:6px;
}
.ptarif-unite{font-size:.88rem;color:var(--body)}

/* La formule de reference se detache : c'est celle qu'on retient. */
.ptarif--phare{
  border-color:transparent;color:#fff;
  background:linear-gradient(140deg,var(--blue-600),var(--lagoon-600));
  box-shadow:0 16px 38px rgba(12,113,195,.26);
}
.ptarif--phare .ptarif-label{color:rgba(255,255,255,.82)}
.ptarif--phare .ptarif-prix{color:#fff}
.ptarif--phare .ptarif-unite{color:rgba(255,255,255,.88)}
.ptarif--phare:hover{box-shadow:0 22px 46px rgba(12,113,195,.32)}

.ptarif-note{
  display:flex;align-items:center;gap:11px;margin:14px 0 0;padding:13px 16px;
  border-radius:var(--radius);background:var(--blue-50);border:1px solid var(--blue-100);
  font-size:.9rem;line-height:1.5;color:var(--navy-800);
}
.ptarif-note svg{flex:none;width:19px;height:19px;color:var(--blue-600)}
.ptarif-note strong{font-weight:750}

@media (prefers-reduced-motion:reduce){
  .ptarif{transition:none}
}

/* Repère réservé à l'administration, jamais vu par un visiteur. */
.admin-hint{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:.82rem;line-height:1.5;
  background:#FFF6F3;border:1px solid #FFD9CE;color:#8A3A26}
.admin-hint strong{display:block;color:#6E2417}
.admin-hint a{color:#8A3A26;text-decoration:underline;font-weight:600}

/* ---- Filtres actifs sur la page de résultats -------------------------- */
.filtres-actifs{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:18px 0 0;padding:0}
.filtres-actifs li{display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 13px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:999px;
  font-size:.86rem;color:#fff;backdrop-filter:blur(4px)}
.filtres-actifs span{opacity:.72}
.filtres-actifs strong{font-weight:650}
.filtres-actifs a{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:rgba(255,255,255,.18);color:#fff;transition:background .15s}
.filtres-actifs a:hover{background:rgba(255,255,255,.34);text-decoration:none}
.filtres-actifs a svg{width:11px;height:11px}
.filtres-actifs-raz{background:none;border:0;padding:6px 4px}
.filtres-actifs-raz a{width:auto;height:auto;background:none;border-radius:0;
  text-decoration:underline;opacity:.8;font-size:.86rem}
.filtres-actifs-raz a:hover{background:none;opacity:1}

/* ---- Chiffres du bandeau e-learning ---------------------------------- */
.hero-facts{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,52px);list-style:none;
  margin:32px 0 0;padding:24px 0 0;border-top:1px solid rgba(255,255,255,.16)}
.hero-facts strong{display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.5rem,1.2rem + 1vw,2rem);color:#fff;letter-spacing:-.02em;line-height:1}
.hero-facts span{display:block;margin-top:6px;font-size:.94rem;color:#CFE3F1}
@media (max-width:560px){
  .hero-facts{gap:18px 26px;padding-top:18px;margin-top:22px}
  .hero-facts li{flex:0 0 calc(50% - 13px)}
}

/* ---- Factures dans l'espace apprenant --------------------------------- */
.dash-factures{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dash-factures li{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px}
.dash-factures strong{display:block;color:var(--ink)}
.dash-factures span{font-size:.86rem;color:var(--muted)}
.dash-factures li > div{flex:1 1 240px;min-width:0}
.dash-factures .btn{flex:none;display:inline-flex;align-items:center;gap:7px}
.dash-factures .btn svg{width:15px;height:15px}

/* ============================================================
   70. Espace apprenant — formations en cours, compte
   ============================================================ */
.dash-head-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dash-head-actions .btn{display:inline-flex;align-items:center;gap:8px}
.dash-head-actions .btn svg{width:16px;height:16px}
.dash-head--slim{padding-bottom:clamp(24px,4vw,40px)}

.cours-liste{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cours-ligne{
  display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:20px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:18px 22px;box-shadow:var(--shadow);transition:border-color .18s,box-shadow .18s}
.cours-ligne:hover{border-color:var(--blue-100);box-shadow:var(--shadow-lg)}
.cours-vignette{width:96px;height:72px;object-fit:cover;border-radius:12px;flex:none}
.cours-corps{min-width:0}
.cours-corps h3{margin:0 0 10px;font-size:1.1rem;line-height:1.25}
.cours-corps h3 a{color:var(--ink)}
.cours-corps h3 a:hover{color:var(--blue-600);text-decoration:none}

.cours-jauge{height:8px;border-radius:99px;background:var(--line-soft);overflow:hidden;max-width:520px}
.cours-jauge i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue-600),var(--lagoon-500));transition:width .5s var(--ease)}

.cours-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:10px 0 0;
  font-size:.88rem;color:var(--muted)}
.cours-meta strong{color:var(--ink);font-size:1rem}
.cours-temps{display:inline-flex;align-items:center;gap:6px}
.cours-temps svg{width:14px;height:14px}

.cours-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch;flex:none}
.cours-actions .btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.cours-actions .btn svg{width:15px;height:15px}

.cours-question{grid-column:1/-1;margin-top:4px;padding-top:18px;border-top:1px solid var(--line-soft)}
.cours-question label{display:block;font-family:var(--font-display);font-weight:700;
  font-size:.9rem;color:var(--ink);margin-bottom:8px}
.cours-question textarea{width:100%;resize:vertical}
.cours-question-pied{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.cours-question-pied small{color:var(--muted);font-size:.84rem}

.wrap--etroit{max-width:760px}
.compte-card{padding:clamp(22px,3vw,32px);margin-bottom:18px}
.compte-card h2{font-size:1.15rem;margin-bottom:.3em}
.compte-card .dash-sub{margin-bottom:1.4em}
.compte-quitter{text-align:center;font-size:.9rem;margin-top:24px}
.compte-quitter a{color:var(--muted);text-decoration:underline}
.compte-quitter a:hover{color:var(--coral-600)}

@media (max-width:760px){
  .cours-ligne{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:16px}
  .cours-vignette{width:64px;height:64px}
  .cours-actions{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
  .cours-actions .btn{flex:1 1 auto}
}

/* ============================================================
   71. Pages éditoriales — chronologie et citation
   ============================================================ */

/* ---- Frise chronologique ---- */
.chrono{list-style:none;margin:clamp(18px,2.4vw,28px) 0 0;padding:0;position:relative}
.chrono::before{
  content:"";position:absolute;top:10px;bottom:26px;left:calc(var(--chrono-col, 96px) + 19px);
  width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--blue-500),var(--lagoon-500) 55%,var(--line) 100%);
}
.chrono-item{
  position:relative;display:grid;
  /* Deux colonnes seulement — la gouttière porte le trait et la pastille.
     Une troisième colonne « vide » ferait tomber le texte dedans. */
  grid-template-columns:var(--chrono-col, 96px) minmax(0,1fr);
  column-gap:40px;align-items:start;padding-bottom:clamp(20px,2.6vw,30px);
}
.chrono-item:last-child{padding-bottom:0}

.chrono-date{text-align:right;padding-top:1px;line-height:1.15}
.chrono-date b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:1.14rem;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.chrono-date span{display:block;margin-top:2px;font-size:.78rem;color:var(--muted);text-transform:lowercase}

/* La pastille se pose sur le trait, au niveau de la première ligne de texte. */
.chrono-item::before{
  content:"";position:absolute;left:calc(var(--chrono-col, 96px) + 8px);top:5px;
  width:24px;height:24px;margin-left:0;border-radius:50%;
  background:#fff;border:2px solid var(--blue-100);
  box-shadow:0 0 0 4px #fff;
}
.chrono-item::after{
  content:"";position:absolute;left:calc(var(--chrono-col, 96px) + 15px);top:12px;
  width:10px;height:10px;border-radius:50%;background:var(--blue-500);transition:transform .2s var(--ease);
}
.chrono-item.is-last::before{border-color:var(--lagoon-100)}
.chrono-item.is-last::after{background:var(--lagoon-500);box-shadow:0 0 0 4px var(--lagoon-100)}
.chrono-item:hover::after{transform:scale(1.25)}

.chrono-texte{
  padding-top:2px;color:var(--body);line-height:1.62;
  font-size:clamp(.94rem,.9rem + .12vw,1rem);max-width:60ch;
}
.chrono-texte strong{color:var(--ink)}

/* Deux entrées d'une même année : on n'affiche l'année qu'une fois. */
.chrono-item.is-suite .chrono-date b{opacity:0}

/* Ce qui suit la frise se cale sur sa colonne de texte : l'œil descend le
   long d'un seul alignement, au lieu de repartir à gauche. */
.page-sec:has(.chrono) > .prose,
.page-sec:has(.chrono) > p,
.page-sec:has(.chrono) > .page-fig{
  padding-left:calc(var(--chrono-col, 96px) + 40px);
}

@media (max-width:640px){
  .chrono{--chrono-col:0px}
  .page-sec:has(.chrono) > .prose,
  .page-sec:has(.chrono) > p,
  .page-sec:has(.chrono) > .page-fig{padding-left:38px}
  .chrono::before{left:11px}
  .chrono-item{grid-template-columns:minmax(0,1fr);column-gap:0;padding-left:38px}
  .chrono-date{text-align:left;display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
  .chrono-date b{font-size:1.02rem}
  .chrono-date span{margin:0}
  .chrono-item.is-suite .chrono-date b{opacity:1}   /* pas de colonne à aligner */
  .chrono-item::before{left:0}
  .chrono-item::after{left:7px}
}

/* ---- Citation en pleine largeur ---- */
.page-quote{
  position:relative;margin:clamp(28px,4vw,46px) 0;padding:clamp(26px,3.4vw,40px);
  background:linear-gradient(135deg,var(--navy-900),var(--navy-700));
  border-radius:var(--radius-lg);color:#fff;overflow:hidden;
  scroll-margin-top:calc(var(--hdr-h,68px) + 76px);
}
.page-quote-mark{
  position:absolute;top:-6px;right:14px;width:110px;height:110px;
  color:rgba(255,255,255,.07);pointer-events:none;
}
.page-quote blockquote{
  position:relative;margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.14rem,1rem + .7vw,1.5rem);line-height:1.48;letter-spacing:-.015em;
  color:#fff;max-width:44ch;
}
.page-quote figcaption{
  position:relative;margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:.92rem;color:#CFE3F1;
}

/* Un paragraphe entièrement en italique est une citation : on lui donne
   un filet et de l'air, plutôt que de le laisser se fondre dans le corps. */
.page-sec .prose p > em:only-child{
  display:block;font-style:italic;color:var(--ink);
  font-size:clamp(1rem,.96rem + .2vw,1.1rem);line-height:1.6;
}
.page-sec .prose p:has(> em:only-child){
  margin:1.5em 0;padding:2px 0 2px 20px;border-left:3px solid var(--blue-100);
}

/* Corps de page éditoriale : un peu plus grand, un peu plus contrasté. */
.page-sec .prose{font-size:clamp(.98rem,.94rem + .2vw,1.06rem);line-height:1.72;max-width:68ch}
.page-sec .prose p{margin-bottom:1.05em}
.page-sec .prose strong{color:var(--ink)}

/* Un bloc de compétences sans détail : ni bouton, ni panneau vide. */
.acc-head--fixe{cursor:default;background:#fff}
.acc-head--fixe:hover{background:#fff}
.accordion--plat{background:#fff}

/* ============================================================
   72 · Repère d'édition — visible des seuls administrateurs
   Il nomme l'écran du back-office qui produit la page affichée.
   Replié en pastille, il se déplie au survol pour ne pas gêner.
   ============================================================ */
.edit-ici{
  position:fixed;right:16px;bottom:16px;z-index:70;
  display:inline-flex;align-items:center;gap:9px;
  max-width:min(420px,calc(100vw - 32px));
  padding:9px 14px 9px 11px;border-radius:999px;
  background:var(--ink,#12304a);color:#fff;text-decoration:none;
  font-size:.82rem;font-weight:650;line-height:1.25;
  box-shadow:0 8px 24px rgba(2,26,45,.28);
  transition:background .18s ease, transform .18s ease;
}
.edit-ici{opacity:.62}
.edit-ici:hover,.edit-ici:focus-visible{background:#0C71C3;opacity:1;transform:translateY(-1px)}
.edit-ici svg{width:16px;height:16px;flex:none}
.edit-ici span{display:flex;flex-direction:column;min-width:0}
.edit-ici-a{white-space:nowrap}
/* Au repos, le repère tient en une pastille ; le détail n'apparaît qu'au
   survol, pour ne pas masquer le contenu de la page. */
.edit-ici-b{
  font-weight:500;font-size:.76rem;
  max-height:0;max-width:0;opacity:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:max-height .18s ease, max-width .22s ease, opacity .18s ease;
}
.edit-ici:hover .edit-ici-b,.edit-ici:focus-visible .edit-ici-b{max-height:1.5em;max-width:340px;opacity:.8}
/* Sous 700 px, la barre tarif et le bandeau cookies occupent déjà le bas
   de l'écran : le repère s'efface plutôt que de se superposer. */
@media (max-width:700px){ .edit-ici{display:none} }
@media print{ .edit-ici{display:none} }

/* ============================================================
   73 · Ligne de repères : une seule ligne, les uns à la suite
   Les colonnes prennent la largeur de leur contenu au lieu de se
   partager toute la place : à deux repères, ils restent côte à côte
   au lieu de se retrouver aux deux bouts de l'écran.
   ============================================================ */
.fiche-facts--ligne,
.fiche-facts--wide{
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,max-content);
  justify-content:start;
}
/* La colonne de texte n'a plus à réserver la place des repères : ils sont
   sortis en dessous, sur toute la largeur. */
.fiche-hero-inner--serre{padding-bottom:clamp(18px,2vw,28px)}
.fiche-facts--ligne{
  margin-top:0;padding-bottom:clamp(30px,4vw,46px);
  position:relative;z-index:2;
  gap:18px clamp(18px,2.6vw,42px);
}
.fiche-facts--ligne .fact > span{min-width:0}
/* La coupure au bout de la ligne n'a de sens que tant qu'on tient sur une
   ligne : en dessous, les libellés reprennent le droit de passer à la ligne. */
@media (min-width:861px){
  .fiche-facts--ligne .fact small,
  .fiche-facts--ligne .fact strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fiche-facts--ligne .fact strong{display:block}
}

/* Écrans étroits : la ligne redevient une grille qui se replie. */
@media (max-width:860px){
  .fiche-facts--ligne,
  .fiche-facts--wide{
    grid-auto-flow:row;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
  }
}

/* ============================================================
   74 · Conversation apprenant ↔ formateur
   Deux colonnes de bulles : ce que j'écris à droite, ce qu'on me
   répond à gauche. Rien d'autre — un fil se lit, il ne se pilote pas.
   ============================================================ */
.tchat-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.tchat-tete h1{margin:0 0 4px;font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.tchat-tete .lede{margin:0}

.tchat{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.tchat-vide{color:var(--muted);background:var(--canvas);border:1px dashed var(--line);
  border-radius:var(--radius-lg);padding:22px;margin:0}

.bulle{max-width:min(82%,560px);background:#fff;border:1px solid var(--line);
  border-radius:16px 16px 16px 4px;padding:13px 16px;box-shadow:var(--shadow-sm,0 1px 2px rgba(2,26,45,.06))}
.bulle--moi{align-self:flex-end;background:var(--blue-50);border-color:var(--blue-100);
  border-radius:16px 16px 4px 16px}
.bulle-tete{display:flex;align-items:baseline;gap:10px;margin-bottom:5px}
.bulle-tete strong{font-family:var(--font-display);font-size:.86rem;color:var(--ink)}
.bulle-tete time{font-size:.76rem;color:var(--muted)}
.bulle-corps{font-size:.96rem;line-height:1.6;color:var(--body)}

.tchat-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px}
.tchat-form textarea{width:100%;margin-bottom:12px}
.tchat-pied{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tchat-pied small{color:var(--muted)}

/* Pastille de messages non lus, sur le bouton du tableau de bord. */
.puce{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  margin-left:6px;border-radius:999px;background:var(--coral-600,#E2543A);color:#fff;
  font-size:.7rem;font-weight:800;line-height:1}
/* Repli quand le navigateur n'affiche pas les PDF dans la page. */
.player-pdf-repli{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:28px;text-align:center;color:var(--muted);
}
/* Renvoi vers le back-office pour un formateur ou un administrateur. */
.dash-staff{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--blue-50);border-color:var(--blue-100);color:var(--navy-700)}
.dash-staff strong{color:var(--ink)}

/* ============================================================
   75 · Espace formateur — mêmes codes que l'espace apprenant
   ============================================================ */
.form-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:14px;margin-bottom:8px}
.form-kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 18px}
.form-kpi strong{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--ink);letter-spacing:-.02em}
.form-kpi span{font-size:.84rem;color:var(--muted)}

/* Ce qui attend une action : en tête, et impossible à manquer. */
.form-todo{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px;
  padding:14px 18px;border-radius:var(--radius);background:var(--blue-50);border:1px solid var(--blue-100);
}
.form-todo strong{font-family:var(--font-display);color:var(--ink)}
.form-todo a{font-weight:650}

/* Dans l'espace formateur, les lignes n'ont pas de vignette : deux colonnes
   suffisent, sinon le texte se retrouve écrasé dans la place de l'image. */
.cours-ligne:not(:has(.cours-vignette)){grid-template-columns:minmax(0,1fr) auto}
.cours-ligne--compacte{align-items:center}
@media (max-width:760px){
  .cours-ligne:not(:has(.cours-vignette)){grid-template-columns:minmax(0,1fr)}
}
.cours-sous{color:var(--muted);font-size:.88rem;margin:0 0 8px}

.pastille-ok,.pastille-warn,.pastille-off{
  display:inline-block;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:700;
}
.pastille-ok{background:var(--lagoon-100);color:#0A6F73}
.pastille-warn{background:var(--coral-100);color:#B23A23}
.pastille-off{background:var(--canvas);color:var(--muted);border:1px solid var(--line)}

/* Tableau de suivi leçon par leçon */
.suivi{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.suivi th{text-align:left;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--font-display)}
.suivi td{padding:13px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top;font-size:.92rem}
.suivi tr:last-child td{border-bottom:0}
.suivi .sub{display:block;color:var(--muted);font-size:.82rem}

/* Correction d'une copie */
.corr-bloc{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:14px}
.corr-tete{display:flex;align-items:baseline;gap:11px;margin-bottom:12px}
.corr-n{width:25px;height:25px;border-radius:8px;background:var(--blue-50);color:var(--blue-600);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:.78rem;flex:none}
.corr-pts{margin-left:auto;color:var(--muted);font-size:.82rem;white-space:nowrap}
.corr-copie{background:var(--canvas);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:12px;line-height:1.6}
.corr-note{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.corr-note label{display:flex;flex-direction:column;gap:5px;font-size:.84rem;color:var(--muted);font-weight:650}
.corr-auto{margin:0;display:flex;align-items:center;gap:10px}
.corr-auto .sub{color:var(--muted);font-size:.85rem}

/* ============================================================
   62. Logos institutionnels du hero — rangée unique sur mobile
   Le sceau Qualiopi quitte la ligne de texte et rejoint les trois
   autres : même hauteur de pastille pour tous, deux fois plus
   grande qu'avant. La rangée glisse au doigt si elle déborde.
   ============================================================ */
.hl-qualiopi{display:none}

/* Dès que la vidéo s'en va, la carte blanche unique n'a plus de raison
   d'être : chaque logo reçoit sa propre pastille et le sceau Qualiopi
   quitte la ligne de texte pour prendre la tête de la rangée. */
@media (max-width:1100px){
  /* la carte blanche s'efface : ombre comprise, sinon un halo reste
     derrière la rangée, sur toute la largeur de l'ancienne carte */
  .hero-side{background:none;box-shadow:none;padding:0;border-radius:0;overflow:visible}
  /* le sceau vit désormais dans la rangée : on retire le doublon */
  .hero-trust img{display:none}
  .hl-qualiopi{display:block}

  .hero-logos{
    display:flex;align-items:center;justify-content:flex-start;
    flex-wrap:wrap;gap:10px;padding:14px 0 2px;
  }
  .hero-logos img,
  .hero-logos img[src*="investir"]{
    flex:none;height:80px;max-height:none;width:auto;
    box-sizing:border-box;padding:11px 14px;
    background:#fff;border-radius:13px;object-fit:contain;
  }
}
/* Sous 760 px la rangée ne tient plus sur une ligne : elle glisse au doigt,
   estompée à droite pour qu'on voie qu'il y a de la matière au-delà. */
@media (max-width:760px){
  .hero-logos{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent);
            mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent);
  }
  .hero-logos::-webkit-scrollbar{display:none}
}
/* Écrans étroits : la pastille se resserre un peu, sans descendre
   sous la taille demandée. */
@media (max-width:400px){
  .hero-logos{gap:8px}
  .hero-logos img,
  .hero-logos img[src*="investir"]{height:74px;padding:9px 12px}
}

/* La mention Qualiopi n'a plus de logo à côté d'elle : quand son texte est
   masqué (écrans courts), le bloc entier s'efface. */
@media (max-width:760px) and (max-height:820px){
  .hero-trust{display:none}
}
/* Écrans très courts : la rangée de logos est retirée par ailleurs, donc le
   sceau Qualiopi reprend sa place au fil du texte. */
@media (max-width:760px) and (max-height:700px){
  .hero-trust{display:flex}
  .hero-trust img{display:block;height:30px}
}

/* ============================================================
   63. Barre de filtres pleine largeur (catalogue e-learning)
   La barre sort du .wrap : elle occupe toute la largeur de l'écran,
   sans arrondi ni bordure latérale, collée sous le bandeau sombre.
   Le .wrap qu'elle contient garde son contenu aligné sur les cartes.
   ============================================================ */
.cat-bar--pleine{
  --debord:0px;
  margin:0 0 clamp(22px,3vw,34px);
  /* aucun retrait en haut : les pastilles touchent le bandeau sombre */
  padding:0 0 12px;
  border-radius:0;border-inline:0;border-top:0;
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 26px rgba(5,34,54,.20);
}
.cat-bar--pleine.is-stuck{
  border-radius:0;
  box-shadow:0 12px 30px rgba(5,34,54,.32);
}
/* collée au bandeau sombre qui la précède : aucun blanc entre les deux.
   Le repère d'un pixel posé par le script laisserait un filet clair. */
.fiche-hero--slim + .cat-bar--pleine{margin-top:0}
.fiche-hero--slim + .cat-bar-sentinel{margin-bottom:-1px}
@media (max-width:760px){
  .cat-bar--pleine{padding:0 0 9px;margin-bottom:18px}
}

/* ============================================================
   64. Orientation — le fond qui se teinte, la grille équilibrée
   Le dégradé est porté par un calque en ::before dont l'opacité suit le
   défilement (variable --p posée par le script). Les bords haut et bas sont
   estompés : la couleur naît du blanc et y retourne, sans arête.
   ============================================================ */
/* Un aplat de couleur dont l'opacité suit le défilement (variable --p posée
   par le script) : il monte quand la section gagne le centre de l'écran et
   s'éteint dans le blanc des sections voisines. La teinte se choisit par
   --voile ; les bords haut et bas sont estompés, il n'y a donc jamais
   d'arête entre deux blocs. */
[data-voile]{position:relative;isolation:isolate}
[data-voile]::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--voile,#E2F6EC);
  opacity:var(--p,0);transition:opacity .12s linear;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
}
#orientation{--voile:#E2F6EC}
/* Le financement passait du blanc au sable d'un coup : même traitement, avec
   le sable pour teinte. L'aplat plein laisse la place au voile. */
#financement{--voile:var(--sand)}
#financement.section--sand{background:transparent}
/* la carte blanche se détache un peu plus quand le voile est là */
#orientation .quiz-home{transition:box-shadow .55s var(--ease),transform .55s var(--ease)}
#orientation.is-fonce .quiz-home{
  box-shadow:0 26px 56px rgba(10,62,44,.16);transform:translateY(-4px);
}

/* ---------- Grille des réponses : autant de colonnes qu'il faut ----------
   En ligne souple plutôt qu'en grille : une dernière rangée incomplète se
   centre d'elle-même au lieu de laisser un trou à droite. --n vient du
   script, d'après le nombre de réponses. */
.quiz-opts{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:14px;--gouttiere:14px;
}
.quiz-opts .quiz-opt{
  --largeur:calc((100% - (var(--n,2) - 1) * var(--gouttiere)) / var(--n,2));
  flex:1 1 var(--largeur);max-width:var(--largeur);min-width:0;
}
@media (max-width:900px){ .quiz-opts{--n:2 !important} }
@media (max-width:600px){ .quiz-opts{--n:1 !important;gap:10px;--gouttiere:10px} }

/* ---------- La cascade d'apparition des réponses ---------- */
@keyframes quiz-pop{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to{opacity:1;transform:none}
}
.quiz-opts.est-neuf .quiz-opt{
  animation:quiz-pop .42s var(--ease) both;
  animation-delay:calc(var(--i,0) * 70ms);
}

/* ---------- La réponse elle-même : plus franche, avec sa flèche ---------- */
.quiz-opt{position:relative;padding-right:40px}
.quiz-opt::after{
  content:"→";position:absolute;right:15px;top:50%;
  transform:translateY(-50%) translateX(-8px);opacity:0;
  color:var(--lagoon-600);font-family:var(--font-display);font-size:1.15rem;font-weight:700;
  transition:opacity .18s var(--ease),transform .18s var(--ease);
}
.quiz-opt:hover,.quiz-opt:focus-visible{
  border-color:var(--lagoon-500);background:#fff;
  transform:translateY(-3px);box-shadow:0 12px 26px rgba(8,52,82,.13);
}
.quiz-opt:hover::after,.quiz-opt:focus-visible::after{opacity:1;transform:translateY(-50%)}
.quiz-opt{transition:border-color .16s var(--ease),background .16s var(--ease),
                     transform .16s var(--ease),box-shadow .16s var(--ease)}
@media (prefers-reduced-motion:reduce){
  [data-voile]::before{display:none}
  #financement.section--sand{background:var(--sand)}
  .quiz-opts.est-neuf .quiz-opt{animation:none}
  .quiz-opt::after{display:none}
}

/* ============================================================
   65. Pages éditoriales — grille de cartes
   Une suite d'intertitres suivis d'un paragraphe est rendue en cartes
   (voir cartes_depuis_html()). Chaque carte prend l'une des quatre teintes
   de la maison, à tour de rôle : la page respire au lieu d'aligner des
   paragraphes. La dernière rangée incomplète se centre.
   ============================================================ */
.pcards{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:16px;--gouttiere:16px;margin:22px 0 6px;
}
.pcards > .pcard{
  --largeur:calc((100% - (var(--n,2) - 1) * var(--gouttiere)) / var(--n,2));
  flex:1 1 var(--largeur);max-width:var(--largeur);min-width:0;
}
/* Les quatre teintes, à tour de rôle */
.pcard{--a:var(--lagoon-600);--a-soft:var(--lagoon-100);--a-ink:#0A5E62}
.pcard:nth-child(4n+2){--a:var(--blue-600);--a-soft:var(--blue-100);--a-ink:#0A5A9C}
.pcard:nth-child(4n+3){--a:var(--coral-600);--a-soft:var(--coral-100);--a-ink:#A6341F}
.pcard:nth-child(4n+4){--a:var(--green-600);--a-soft:var(--green-100);--a-ink:var(--green-700)}

.pcard{
  position:relative;overflow:hidden;isolation:isolate;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px 20px 18px;
  box-shadow:0 2px 10px rgba(8,52,82,.05);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
/* le filet de couleur en haut : fin au repos, plein au survol */
.pcard::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--a);transform:scaleX(.22);transform-origin:left;
  transition:transform .3s var(--ease);
}
/* un voile de la teinte, qui monte du bas au survol */
.pcard::after{
  content:"";position:absolute;inset:auto 0 0 0;height:100%;z-index:-1;
  background:linear-gradient(180deg,transparent 40%,var(--a-soft) 100%);
  opacity:0;transition:opacity .3s var(--ease);
}
.pcard:hover{
  transform:translateY(-4px);border-color:var(--a);
  box-shadow:0 16px 34px rgba(8,52,82,.13);
}
.pcard:hover::before{transform:scaleX(1)}
.pcard:hover::after{opacity:.55}

.pcard-n{
  position:absolute;right:14px;top:8px;
  font-family:var(--font-display);font-weight:800;font-size:2.2rem;line-height:1;
  color:var(--a);opacity:.13;letter-spacing:-.04em;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.pcard:hover .pcard-n{opacity:.24;transform:translateY(-2px)}

.pcard h3{
  font-family:var(--font-display);font-size:1rem;font-weight:750;line-height:1.25;
  color:var(--ink);margin:0 42px .6rem 0;letter-spacing:-.01em;
}
.pcard > p{margin:0;font-size:.88rem;line-height:1.55;color:var(--body)}

/* Les mots-clés séparés par des tirets deviennent des étiquettes */
.pcard-mots{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.pcard-mots li{
  font-size:.775rem;font-weight:600;line-height:1;
  padding:6px 10px;border-radius:999px;
  background:var(--a-soft);color:var(--a-ink);
  transition:transform .2s var(--ease);
}
.pcard:hover .pcard-mots li{transform:translateY(-1px)}

@media (max-width:900px){ .pcards{--n:2 !important} }
@media (max-width:620px){ .pcards{--n:1 !important;gap:11px;--gouttiere:11px} }
@media (prefers-reduced-motion:reduce){
  .pcard,.pcard::before,.pcard::after,.pcard-n,.pcard-mots li{transition:none}
}

/* ============================================================
   66. Financement — sans cadre, avec de plus grandes icônes
   La carte blanche découpait six rectangles dans le fond sable ; sans elle
   la section respire, et c'est l'icône qui porte le regard.
   ============================================================ */
/* Sans cadre, la grille n'a plus besoin de toute la largeur : on la resserre
   vers le centre, les six blocs se répondent au lieu de s'ignorer. */
.funding--logos{
  max-width:880px;margin-inline:auto;
  gap:clamp(6px,1vw,16px) clamp(4px,.8vw,12px);
}
.funding--logos .funding-item{
  background:transparent;border:0;box-shadow:none;padding:14px 6px;
  transition:transform .2s var(--ease);
}
.funding--logos .funding-item:hover{
  background:transparent;border:0;box-shadow:none;transform:translateY(-3px);
}
/* L'icône : nettement plus grande, et c'est elle qui réagit au survol. */
.funding-logo{height:100px;margin-bottom:12px}
.funding-logo img{max-height:100px}
.funding-logo--ico{
  height:100px;width:100px;border-radius:28px;
  transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);
}
.funding-logo--ico svg{width:48px;height:48px;stroke-width:1.7}
.funding--logos .funding-item:hover .funding-logo--ico{
  background:var(--blue-100);color:var(--blue-600);
}
.funding--logos .funding-item strong{font-size:1.06rem}

@media (max-width:760px){
  /* En ligne compacte, l'icône reste la vignette de gauche — juste un peu
     plus grande qu'avant. */
  .funding--logos{max-width:none;gap:8px}
  .funding--logos .funding-item{padding:12px 10px}
  .funding--logos .funding-item .funding-logo{height:62px;width:62px;margin:0}
  .funding--logos .funding-item .funding-logo img{max-height:62px}
  .funding--logos .funding-item .funding-logo--ico{border-radius:19px}
  .funding--logos .funding-item .funding-logo--ico svg{width:30px;height:30px}
}

/* ============================================================
   67. Erasmus+ — le cadre qui s'ouvre, sans jamais prendre l'écran
   Le bloc dure deux écrans et demi. Au milieu, une scène collée à la
   fenêtre : un cadre découpé dans la vidéo, posé haut, qui s'élargit quand
   on entre dans la section puis se referme quand on en sort. Il garde
   toujours ses marges et ses angles arrondis — on ne bascule jamais en
   plein écran.
   Le texte, lui, ne suit pas la molette : une fois le cadre ouvert, il se
   déroule tout seul, en cascade. C'est le retour en arrière du cadre qui le
   fait disparaître, pas le pixel de défilement.
   Sans JavaScript, rien de tout cela ne se déclenche : les règles par
   défaut ci-dessous sont l'état de repli, l'état animé vit sous .erx--on.
   ============================================================ */
.erx{position:relative;margin-block:clamp(30px,4vw,54px)}
/* Le bandeau se colle à ses voisins : leur rembourrage de section, ajouté au
   retrait du cadre, laissait un couloir blanc de part et d'autre. */
.section:has(+ .erx){padding-bottom:clamp(14px,1.8vw,26px)}
.erx + .section{padding-top:clamp(14px,1.8vw,26px)}
.erx-stage{position:relative}
.erx-cadre{
  position:relative;overflow:hidden;border-radius:22px;
  min-height:min(420px,62vh);display:grid;place-items:center;isolation:isolate;
  background:var(--navy-900);
}
.erx-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.erx-media--fond{z-index:0}
.erx-media--film{z-index:1;opacity:0;transition:opacity .5s var(--ease)}
.erx-media--film.prete{opacity:1}
.erx-voile{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 46%,rgba(3,20,33,.72) 0%,rgba(3,20,33,.28) 62%,transparent 100%),
    linear-gradient(180deg,rgba(3,20,33,.40) 0%,rgba(3,20,33,.56) 58%,rgba(3,20,33,.84) 100%);
}
.erx-txt{
  position:relative;z-index:3;text-align:center;color:#fff;
  padding:clamp(24px,3.4vw,46px) clamp(20px,5vw,56px);max-width:min(760px,92%);
  text-shadow:0 2px 22px rgba(3,20,33,.45);
}
/* Le titre en deux temps : le premier mot reste fin, le second porte. */
.erx-titre{
  color:#fff;font-size:clamp(2rem,1.2rem + 2.9vw,3.5rem);line-height:1.04;
  letter-spacing:-.03em;margin:0 0 .5em;font-weight:400;
}
/* La couleur est reposée sur les deux morceaux : ailleurs dans la feuille,
   un <strong> reprend l'encre du corps de texte — ici il doit rester blanc. */
.erx-titre .erx-t1{font-weight:300;opacity:.94;color:#fff}
.erx-titre strong{font-weight:800;color:#fff}
.erx-sous{
  font-size:clamp(.98rem,.92rem + .34vw,1.14rem);line-height:1.55;color:#D8E9F4;
  margin:0 auto 1.5em;max-width:44ch;
}
.erx-p{
  font-size:clamp(.9rem,.86rem + .2vw,1rem);line-height:1.6;color:#B9D2E2;
  margin:0 auto 1.5em;max-width:52ch;
}
.erx-btn{min-width:min(300px,80%)}

/* ---------- L'état animé, posé par site.js ---------- */
.erx--on{margin-block:0}
.erx--on .erx-stage{position:sticky;top:0;height:100svh;overflow:hidden}
/* Le cadre occupe la place du bandeau ouvert ; la découpe, elle, part petite
   et s'élargit jusqu'à ses bords. La vidéo ne bouge donc jamais. */
.erx--on .erx-cadre{
  position:absolute;min-height:0;border-radius:0;background:none;
  top:var(--ct,2.5vh);bottom:var(--cb,4vh);left:var(--cl,3.5vw);right:var(--cl,3.5vw);
  clip-path:inset(var(--y,0px) var(--x,0px) var(--y,0px) var(--x,0px) round 20px);
  will-change:clip-path;
}
.erx--on .erx-voile{opacity:var(--voile,.55)}
.erx--on .erx-media--fixe{transform:scale(var(--zoom,1))}

/* Le texte se déroule tout seul dès que le cadre est ouvert, et repart d'un
   bloc quand il se referme : c'est l'ouverture qui commande, pas le scroll. */
.erx--on .erx-txt > *{
  opacity:0;transform:translateY(22px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.erx--on.erx--texte .erx-txt > *{opacity:1;transform:none}
.erx--on.erx--texte .erx-txt > :nth-child(1){transition-delay:.04s}
.erx--on.erx--texte .erx-txt > :nth-child(2){transition-delay:.14s}
.erx--on.erx--texte .erx-txt > :nth-child(3){transition-delay:.24s}
.erx--on.erx--texte .erx-txt > :nth-child(4){transition-delay:.34s}

@media (max-width:760px){
  .erx-btn{min-width:0;width:100%}
  .erx-cadre{min-height:min(360px,58vh)}
  .erx-titre{font-size:clamp(1.8rem,1.2rem + 2.4vw,2.4rem)}
  .erx-txt{padding:22px 18px}
}
/* Moins d'animations : le bandeau reste, la mise en scène disparaît. */
@media (prefers-reduced-motion:reduce){
  .erx--on{margin-block:clamp(30px,4vw,54px)}
  .erx--on .erx-stage{position:relative;height:auto;overflow:visible}
  .erx--on .erx-cadre{position:relative;inset:auto;clip-path:none;border-radius:22px;
    min-height:min(420px,62vh);background:var(--navy-900)}
  .erx--on .erx-txt > *{opacity:1;transform:none;transition:none}
  .erx--on .erx-media--fixe{transform:none}
}

/* ============================================================
   68. Conversation en tiroir, sous la fiche
   Le fil est déjà dans la page : le clic ne fait qu'ouvrir. Le tiroir
   glisse de dessous la carte — la hauteur s'anime, le contenu suit, et une
   ombre portée entretient l'idée qu'il en sort. Sans JavaScript, le bouton
   reste un lien vers la page dédiée et le tiroir n'existe pas.
   ============================================================ */
/* Le tiroir ne va pas jusqu'aux bords : la carte garde 20 px de blanc à
   gauche et à droite, et autant en dessous. Le tiroir se lit comme un
   panneau posé dans la carte, pas comme une deuxième carte. */
.cours-ligne--fil{--fil-bord:20px;--fil-x:18px;--fil-y:18px;padding-inline:var(--fil-bord)}
.fil-pan{
  grid-column:1 / -1;
  margin:14px 0 0;
  border-radius:14px;
  /* La hauteur s'anime : une rangée de grille qui passe de 0fr à 1fr est la
     seule façon d'aller de zéro à « ce qu'il faut » en gardant la fluidité. */
  display:grid;grid-template-rows:1fr;
  transition:grid-template-rows .38s cubic-bezier(.22,.61,.36,1);
  overflow:hidden;
}
.fil-pan[hidden]{display:none}                 /* sans JavaScript : rien */
.fil-pan--repli{grid-template-rows:0fr}
.fil-pan-in{
  min-height:0;overflow:hidden;                /* indispensable au 0fr → 1fr */
  background:var(--canvas);
  border:1px solid var(--line-soft);border-radius:14px;
  padding:0 var(--fil-x);
  /* Rien en dessous : la bordure blanche doit rester blanche. Le fondu du
     haut est un voile posé par-dessus (voir ::before), pas une ombre. */
  position:relative;
  display:flex;flex-direction:column;
  max-height:min(62vh,470px);
  opacity:1;transition:opacity .3s var(--ease) .04s;
}
.fil-pan--repli .fil-pan-in{opacity:0;transition-delay:0s}
/* Le fondu du haut passe PAR-DESSUS les messages : ils s'effacent dans le
   blanc en glissant sous le bord du tiroir. Une ombre, elle, restait
   derrière les bulles et ne les touchait jamais. */
.fil-pan-in::before{
  content:"";position:absolute;left:0;right:0;top:0;height:52px;
  z-index:2;pointer-events:none;
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.86) 38%,rgba(255,255,255,0) 100%);
}

/* La zone de lecture défile ; le champ de réponse reste au fond du tiroir. */
.tchat--pan{
  flex:1 1 auto;min-height:0;overflow-y:auto;max-height:none;
  /* de l'air tout autour : les bulles ne touchent aucun bord du tiroir */
  gap:12px;margin:0;padding:20px 4px 18px;
  overscroll-behavior:contain;
}
.tchat--pan .bulle{max-width:min(88%,520px)}
.tchat-form--pan{
  flex:none;position:sticky;bottom:0;z-index:1;
  margin:0 calc(-1 * var(--fil-x));padding:14px var(--fil-x) 16px;
  background:var(--canvas);border:0;border-radius:0 0 13px 13px;
  box-shadow:0 -12px 16px -14px rgba(5,34,54,.5);
}
/* Le champ de réponse reprend le bleu des messages qu'on écrit : ce qu'on
   s'apprête à envoyer a la couleur de ce qu'on a déjà envoyé. */
.tchat-form--pan textarea{
  margin-bottom:10px;
  background:var(--blue-100);border-color:#A9D5F5;color:#083C5C;
  /* on écrit dans ce champ : la lettre y est un peu plus grande et plus
     appuyée que dans le reste du tiroir. */
  font-size:1.02rem;font-weight:600;line-height:1.5;
}
.tchat-form--pan textarea::placeholder{color:#5E8FB4;font-weight:600}
.tchat-form--pan .tchat-pied{font-size:.9rem}
.tchat-form--pan .tchat-pied small{font-size:.88rem}
.tchat-form--pan .btn{font-size:.94rem;font-weight:750}
/* Au focus le bleu reste : seul l'anneau dit qu'on y écrit. */
.tchat-form--pan textarea:focus{
  background:var(--blue-100);border-color:var(--blue-500);
  box-shadow:0 0 0 4px rgba(30,141,219,.2);
}
.fil-plus{margin:14px 0 0;font-size:.84rem}

/* La carte ouverte se détache du reste de la liste. Aucune ombre intérieure
   ici : elle salirait la bordure blanche qui entoure le tiroir. */
.cours-ligne--fil.est-ouvert{
  box-shadow:0 20px 44px rgba(5,34,54,.16);
  border-color:var(--blue-100);
  position:relative;z-index:2;
}
/* la flèche du bouton pivote quand le tiroir est ouvert */
[data-fil]::after{
  content:"";display:inline-block;width:8px;height:8px;margin-left:8px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease);
}
[data-fil][aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}

/* ---------- Les textes de conversation, plus gras ---------- */
.bulle-corps{font-weight:500;color:var(--ink)}
.bulle-tete strong{font-weight:750}
/* Un message qu'on n'a pas encore lu : en gras, avec un point de couleur. */
.bulle--neuf{border-color:#B8DCF7;box-shadow:0 3px 10px rgba(12,113,195,.12)}
.bulle--neuf .bulle-corps{font-weight:700;color:var(--ink)}
.bulle--neuf .bulle-tete strong{position:relative;padding-left:14px}
.bulle--neuf .bulle-tete strong::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--blue-600);
}
/* Le bleu des messages qu'on écrit, plus franc qu'auparavant. */
.bulle--moi{background:var(--blue-100);border-color:#A9D5F5}
.bulle--moi .bulle-corps{color:#083C5C}
.bulle--moi .bulle-tete strong{color:#06304A}
.bulle--moi .bulle-tete time{color:#5E8FB4}

@media (max-width:600px){
  .cours-ligne--fil{--fil-bord:14px;--fil-x:14px;--fil-y:16px}
  .fil-pan-in{max-height:min(70vh,420px)}
}
@media (prefers-reduced-motion:reduce){
  .fil-pan,.fil-pan-in{transition:none}
}

/* ============================================================
   69. Espaces connectés — typographie resserrée
   L'espace apprenant et l'espace formateur sont des outils de travail, pas
   des pages de présentation : on y voit plus d'informations d'un coup d'œil.
   ============================================================ */
body.espace{font-size:14.5px}
body.espace .dash-head h1{font-size:clamp(1.45rem,1.15rem + 1.1vw,2rem)}
body.espace .dash-head .lede{font-size:.95rem}
body.espace h2{font-size:clamp(1.1rem,1rem + .5vw,1.42rem)}
body.espace h3{font-size:1rem}
body.espace .lede{font-size:.95rem;line-height:1.55}
body.espace .cours-ligne h3{font-size:1rem}
body.espace .cours-meta{font-size:.83rem}
body.espace .cours-sous{font-size:.84rem}
body.espace .btn{font-size:.88rem}
body.espace .btn--sm{font-size:.8rem}
body.espace .form-kpi strong,
body.espace .dash-stats strong{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem)}
body.espace .bulle-corps{font-size:.92rem}
body.espace .bulle-tete strong{font-size:.82rem}
body.espace .tchat-tete h1{font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem)}

/* ============================================================
   70. Pages éditoriales — bandeau illustré et titres calmés
   Les pages de service (aide à l'emploi, mobilité Erasmus+, VAE…) portaient
   des intertitres à la taille d'un titre de page : à ce format, chaque
   section criait plus fort que le contenu. On les ramène au calibre des
   fiches formation, et le bandeau accepte une photo comme elles.
   ============================================================ */
.page-hero h1{font-size:clamp(1.65rem,1.15rem + 1.7vw,2.4rem)}
.page-hero .lede{font-size:clamp(1rem,.97rem + .25vw,1.12rem)}
/* Une photo en bandeau : on lui laisse de la hauteur, sinon on ne voit rien. */
.page-hero.fiche-hero--img .fiche-hero-inner{
  padding-block:clamp(26px,3.6vw,54px) clamp(46px,6vw,84px);
  max-width:760px;
}
.page-sec .sec-h{font-size:clamp(1.24rem,1.05rem + .82vw,1.66rem);letter-spacing:-.022em}
.page-quote figcaption{font-size:.95rem}

/* Deux colonnes pour les longues listes d'une section : la page se lit d'un
   coup d'œil au lieu de dérouler sur trois écrans. Sous 900 px, une seule. */
.page-sec .prose ul.cols2,
.page-sec .prose ol.cols2{columns:2;column-gap:38px}
.page-sec .prose ul.cols2 li,
.page-sec .prose ol.cols2 li{break-inside:avoid}
@media (max-width:900px){
  .page-sec .prose ul.cols2,
  .page-sec .prose ol.cols2{columns:1}
}

/* Étapes numérotées — la grille remplace la liste à puces
   Le numéro est posé en filigrane derrière l'intitulé : il donne le sens de
   lecture sans occuper de place. */
.etapes{
  list-style:none;margin:0 0 1.4rem;padding:0;
  display:grid;gap:clamp(12px,1.4vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.etape{
  position:relative;overflow:hidden;margin:0;
  background:var(--canvas);border:1px solid var(--line-soft);
  border-radius:16px;padding:20px 20px 18px;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.etape:hover{box-shadow:0 14px 30px rgba(5,34,54,.09);transform:translateY(-2px)}
.etape-num{
  position:absolute;top:-14px;right:2px;
  font-family:var(--font-display);font-weight:850;font-size:4.4rem;line-height:1;
  color:var(--blue-100);opacity:.85;pointer-events:none;
}
.etape-titre{
  position:relative;margin:0 0 .4em;font-size:1.02rem;font-weight:750;
  color:var(--ink);letter-spacing:-.015em;
}
.etape-texte{position:relative;margin:0;font-size:.95rem;line-height:1.6;color:var(--body)}
@media (prefers-reduced-motion:reduce){ .etape{transition:none} }

/* Boutons de rapport, sur la fiche d'un apprenant côté formateur */
.rap-actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:18px 0 4px;padding:12px 16px;
  background:var(--canvas);border:1px solid var(--line-soft);border-radius:14px;
}
.rap-titre{
  font-family:var(--font-display);font-size:.78rem;font-weight:750;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin-right:4px;
}
.rap-actions .btn svg{width:16px;height:16px;flex:none}

/* ============================================================
   71. Accueil — la barre du catalogue, nue
   Sur l'accueil, cette ligne n'est plus un filtre collant posé sur un
   bandeau bleu : c'est une recherche et quatre portes vers le catalogue,
   posées à même le fond clair de la section. Le bandeau sombre pesait
   autant que les cartes qu'il annonçait, et le sticky le faisait
   réapparaître sur toute la longueur de la page.
   ============================================================ */
.cat-bar--nu{
  position:static;z-index:auto;
  background:none;border:0;box-shadow:none;backdrop-filter:none;
  border-radius:0;margin-inline:0;padding:0;margin-bottom:22px;
}
.cat-bar--nu.is-stuck{background:none;border:0;box-shadow:none;padding:0}
.cat-bar--nu .cat-bar-in{gap:12px 10px;align-items:center}

/* Le champ de recherche reprend l'habillage des champs du site */
.cat-bar--nu .cat-search .field{
  background:#fff;border:1px solid var(--line);color:var(--ink);
}
.cat-bar--nu .cat-search .field::placeholder{color:var(--muted)}
.cat-bar--nu .cat-search .field:focus{
  border-color:var(--blue-400);box-shadow:0 0 0 4px rgba(46,163,242,.18);
}
.cat-bar--nu .cat-search > svg{color:var(--muted)}

/* Les thématiques deviennent des liens : même dessin que les pastilles de
   filtre, mais sur fond clair. */
.cat-bar--nu .filter{
  background:#fff;border:1px solid var(--line);color:var(--ink);
  text-decoration:none;
}
.cat-bar--nu .filter:hover{
  border-color:var(--blue-400);color:var(--blue-600);
  background:#fff;text-decoration:none;
}

/* ============================================================
   72. Accueil sur téléphone — la recherche, puis trois rubans
   Sur un écran de main, une grille de douze cartes se parcourt à
   l'aveugle et les quatre pastilles de thématique mangent un tiers de
   l'écran. À la place : la recherche seule, posée sur du blanc franc,
   puis un ruban par secteur qui glisse doucement, en sens alternés.
   ============================================================ */
.cat-mob{display:none}

@media (max-width:760px){
  /* --- ce qui disparaît --- */
  #formation-grid,
  .rail-progress[data-rail-for="formation-grid"],
  .cat-bar--nu .filters{display:none}

  /* --- le chapeau : titre + recherche, à même le fond de la section --- */
  .cat-tete{
    padding:4px 0 2px;margin-bottom:2px;
    /* display:contents sur .section-head fait remonter ses enfants ici :
       c'est ce qui permet de glisser la recherche entre le titre et le
       texte d'introduction, sans dupliquer le moindre mot. */
    display:flex;flex-direction:column;text-align:center;
  }
  .cat-tete .section-head{display:contents}
  /* l'œilleton et son filet n'apportent rien ici : le titre suffit */
  .cat-tete .eyebrow{display:none}
  .cat-tete h2{order:2;margin-bottom:14px;font-size:clamp(1.3rem,1rem + 2.4vw,1.55rem)}
  .cat-tete .cat-bar{order:3;margin-bottom:0}
  .cat-tete .lede{order:4;margin:10px auto 0;font-size:.82rem;max-width:40ch}

  .cat-bar--nu .cat-bar-in{display:block}
  .cat-bar--nu .cat-search{flex:1 1 auto}
  .cat-bar--nu .cat-search .field{
    padding:14px 16px 14px 44px;border-radius:999px;font-size:.96rem;
    box-shadow:0 2px 10px rgba(8,52,82,.05);
  }
  .cat-bar--nu .cat-search > svg{left:15px;width:18px;height:18px}

  /* --- les rubans --- */
  .cat-mob{display:block;margin-inline:calc(-1 * var(--gutter))}
  .mruban{padding:20px 0 2px}
  .mruban-tete{padding:0 var(--gutter);margin-bottom:11px}
  .mruban-tete h3{
    display:flex;align-items:center;gap:9px;margin:0;
    font-size:1.05rem;letter-spacing:-.022em;
  }
  .mruban-tete h3 i{width:6px;height:6px;border-radius:50%;flex:none;background:var(--lagoon-500)}
  .mruban:nth-of-type(2) .mruban-tete h3 i{background:var(--blue-500)}
  .mruban:nth-of-type(3) .mruban-tete h3 i{background:var(--coral-600)}
  .mruban-tete h3 a{color:var(--ink);text-decoration:none}

  /* la boîte défile ; les bords sont fondus pour que les cartes entrent
     et sortent sans coupe nette */
  .mruban-boite{
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    /* indispensable : on anime scrollLeft à la main, un défilement doux
       relancerait une animation à chaque image */
    scroll-behavior:auto;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);
  }
  .mruban-boite::-webkit-scrollbar{display:none}
  .mruban-piste{display:flex;gap:10px;width:max-content;padding:4px var(--gutter) 8px}

  .mcarte{
    position:relative;flex:none;width:186px;height:132px;
    border-radius:16px;overflow:hidden;display:flex;align-items:flex-end;
    text-decoration:none;color:#fff;
  }
  .mcarte-ph{
    position:absolute;inset:0;background-size:cover;background-position:center;
  }
  .mcarte::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(4,26,42,.14) 18%,rgba(4,26,42,.70) 55%,rgba(4,26,42,.93));
  }
  .mcarte-in{position:relative;z-index:2;padding:10px 12px 11px;width:100%}
  .mcarte-t{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    font-family:var(--font-display);font-size:.86rem;font-weight:750;line-height:1.24;
    letter-spacing:-.012em;color:#fff;text-shadow:0 1px 6px rgba(3,20,34,.5);
    margin-bottom:5px;
  }
  .mcarte-meta{display:flex;gap:7px;align-items:center;font-size:.68rem;color:#CBDEEC}
  .mcarte-tag{
    font-family:var(--font-display);font-weight:750;font-size:.6rem;letter-spacing:.09em;
    text-transform:uppercase;background:rgba(255,255,255,.2);
    border:1px solid rgba(255,255,255,.3);padding:3px 7px;border-radius:20px;
    white-space:nowrap;
  }
}

/* Écrans vraiment étroits : la marque se resserre — des deux côtés, barre
   et menu déplié, pour qu'elle ne saute pas à l'ouverture. */
@media (max-width:365px){
  .brand img,.mnav-head .brand img{height:25px}
}

/* ============================================================
   73. Certifications ↔ résultats sur téléphone
   Les deux sections ne font qu'un dégradé : leur jonction n'a pas à
   respirer comme un changement de sujet. Sur un écran de main, les
   deux rembourrages mis bout à bout laissaient cent pixels de bleu
   vide entre le dernier logo et le premier chiffre.
   ============================================================ */
@media (max-width:760px){
  #certifications.section--lagoon{padding-bottom:20px}
  #resultats.section--navy{padding-top:24px}
}

/* ============================================================
   74. Pied du carrousel d'avis sur téléphone
   Trois gros cercles étalés sur toute la largeur pesaient plus que la
   carte qu'ils commandent. On les resserre au centre : la rangée
   devient une commande discrète, pas un bandeau.
   ============================================================ */
@media (max-width:760px){
  .rev-nav{justify-content:center;gap:14px;margin-top:14px}
  .rev-arrow{width:34px;height:34px}
  .rev-arrow svg{width:15px;height:15px}
  .rev-dots{gap:6px}
  .rev-dot{width:6px;height:6px}
  .rev-dot[aria-current="true"]{width:18px}
}

/* ============================================================
   75. Avis sur téléphone — la carte lue au centre
   Une carte qui occupait presque tout l'écran ne laissait rien deviner
   de la suivante. Elle se resserre, et le rail se rembourre de part et
   d'autre de la même quantité : la carte lue tombe au milieu, ses deux
   voisines dépassent et s'effacent dans le fondu des bords.
   ============================================================ */
@media (max-width:760px){
  .rev-rail{
    --rev-w:min(60vw,258px);
    /* le rembourrage latéral vaut ce qui reste de chaque côté d'une carte
       centrée : sans lui, la première et la dernière ne pourraient pas
       atteindre le milieu */
    padding:12px calc((100% - var(--rev-w)) / 2) 34px;
    margin-inline:0;
    scroll-padding-inline:calc((100% - var(--rev-w)) / 2);
    /* le fondu mord davantage : c'est lui qui dit qu'il y a une suite */
    --rev-fondu:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  }
  .rev-rail.au-debut{--rev-fondu:linear-gradient(90deg,#000 0,#000 91%,transparent 100%)}
  .rev-rail.a-la-fin{--rev-fondu:linear-gradient(90deg,transparent 0,#000 9%,#000 100%)}
  .rev-rail.au-debut.a-la-fin{--rev-fondu:linear-gradient(90deg,#000,#000)}
  .rev-card{flex:0 0 var(--rev-w);scroll-snap-align:center}
}

/* ============================================================
   76. Pied de page — le plan du site, à droite de la marque
   Les trois colonnes d'avant étaient alimentées par des zones de menu que
   personne ne remplissait : deux d'entre elles s'affichaient vides, une
   troisième doublonnait. Le pied reprend maintenant le menu et l'étale sur
   quatre colonnes que le gabarit équilibre — la marque, elle, garde la
   première place, réseaux sociaux puis texte.
   ============================================================ */
.footer-grid{grid-template-columns:minmax(0,278px) minmax(0,1fr);gap:clamp(26px,3vw,48px)}
.footer-brand img{height:38px;margin-bottom:18px}
.footer-brand .socials{margin:0 0 16px}
.footer-brand p{font-size:.92rem;line-height:1.5;max-width:34ch;margin:0}
/* Téléphone et e-mail, alignés sous le texte : deux lignes, même colonne. */
/* « .footer-grid ul » remet toutes les listes du pied à zéro : il faut une
   sélection plus précise pour poser l'écart sous le texte. */
.footer-brand .footer-coord{list-style:none;margin:26px 0 0;padding:0}
.footer-coord li{margin-bottom:6px;font-size:.94rem;line-height:1.4}
.footer-coord li:last-child{margin-bottom:0}
.footer-coord a{color:#fff}

/* Quatre colonnes typographiques : le navigateur égalise les hauteurs, et
   aucune rubrique n'est coupée en deux. */
.footer-liens{columns:4;column-gap:clamp(18px,2vw,30px)}
.footer-groupe{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin-bottom:28px;
}
.footer-groupe:last-child{margin-bottom:0}
.footer-groupe h4{margin-bottom:13px}
.footer-liens ul{list-style:none;margin:0;padding:0}
.footer-liens li{margin-bottom:9px;font-size:.92rem;line-height:1.35}

/* Sous le grand écran, la marque prend la largeur entière et les liens
   passent à deux colonnes — la disposition validée sur téléphone. */
@media (max-width:1100px){
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .footer-brand p{max-width:62ch}
  .footer-liens{columns:2}
}
@media (max-width:620px){
  .footer-grid{gap:24px}
  .footer-liens{column-gap:18px}
  .footer-groupe{margin-bottom:20px}
  .footer-groupe h4{margin-bottom:9px;font-size:.72rem}
  .footer-liens li{font-size:.87rem;margin-bottom:7px;overflow-wrap:anywhere}
}

/* La ligne du bas se lit d'un trait : mentions et coordonnées légales à la
   même taille, dans le même gris, sur une seule ligne sur ordinateur. */
.footer-bottom{
  margin-top:38px;padding-block:17px 24px;
  font-size:.73rem;gap:8px 18px;align-items:center;
  color:#7C99B0;
}
.footer-bottom a{color:#7C99B0}
.footer-bottom a:hover{color:#fff}
.footer-bottom ul{gap:13px}
.footer-bottom li{margin:0}
@media (max-width:760px){
  .footer-bottom{font-size:.78rem;gap:10px 16px}
  .footer-bottom ul{gap:12px}
}

/* ============================================================
   77. Financement — du logo à sa fiche
   Chaque financeur de l'accueil a désormais sa page : le bloc devient un lien
   et doit cesser de se comporter comme un lien de texte (bleu, souligné).
   ============================================================ */
a.funding-item{color:inherit;text-decoration:none;cursor:pointer}
/* Le carré bleu derrière le picto n'avait plus lieu d'être : il ne réapparaît
   qu'au survol, comme sur les autres pages. */
.funding--logos .funding-logo--ico{background:transparent}
.funding--logos .funding-item:hover .funding-logo--ico{background:var(--blue-100)}
a.funding-item:hover,a.funding-item:focus-visible{text-decoration:none}
a.funding-item:focus-visible{outline:2px solid var(--blue-600);outline-offset:4px;border-radius:var(--radius)}

/* Le renvoi posé au bas de chaque section de « Financer ma formation ». */
.prose .lien-fiche{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none}
.prose .lien-fiche::after{content:"\2192";transition:transform .18s var(--ease)}
.prose .lien-fiche:hover{text-decoration:none}
.prose .lien-fiche:hover::after{transform:translateX(3px)}

/* Le logo officiel d'un financeur remplace le pictogramme dans les menus :
   il vient des réglages de l'accueil, donc un logo changé là se répercute
   partout. La pastille ne bouge pas d'un pixel — même taille, même fond que
   les autres entrées du menu : le logo se contente de s'y loger.
   width/height à 100 % plus object-fit:contain, c'est ce qui garantit qu'il
   ne peut ni déborder ni agrandir la ligne, quelles que soient les
   proportions du fichier déposé. */
.ico-logo{width:auto;height:auto;object-fit:contain;display:block}
/* Bornes en pixels, pas en pourcentage : la pastille centre son contenu
   (place-items:center), et un pourcentage n'a alors aucune hauteur de
   référence — un logo en hauteur débordait. */
.svc-ico--sm .ico-logo{max-width:24px;max-height:24px}
.mnav-ico   .ico-logo{max-width:30px;max-height:30px}

/* ============================================================
   78. Catalogue — les thématiques sous la recherche
   Un trait blanc d'un pixel s'invitait entre le bandeau sombre et la barre de
   recherche : c'était la sentinelle de collage, laissée dans le flux. Elle
   garde sa hauteur mais passe sous le bandeau.
   ============================================================ */
.catsticky-sentinel{margin-bottom:-1px}

/* Les thématiques, en ligne, sans titre : elles ouvrent le catalogue trié.
   Elles remontent aussi la liste : l'espace laissé sous la barre de recherche
   était celui d'une section ordinaire, beaucoup trop large ici. */
.catsticky+.section{padding-top:clamp(24px,2.6vw,38px)}
.cat-themes{margin-bottom:clamp(20px,2.2vw,30px)}
.cat-themes .filters{margin-bottom:0}
.filter[aria-current="page"]{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.filter[aria-current="page"]:hover{color:#fff}
@media (max-width:700px){
  /* Sur un écran étroit la ligne défile plutôt que de se casser en trois. */
  .cat-themes .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .cat-themes .filters::-webkit-scrollbar{display:none}
  .cat-themes .filter{white-space:nowrap;flex:none;padding:8px 14px;font-size:.85rem}
}

/* ============================================================
   79. Fiches de financement — le volet ne bouge pas
   Six pages qui répondent toutes à la même question : « ai-je droit à ça, et
   qu'est-ce que je fais ? ». Le volet de gauche porte l'identité du financeur,
   le sommaire et le rappel, et reste à l'écran pendant toute la lecture ; le
   contenu défile à droite sur une largeur de lecture confortable.
   ============================================================ */
.fin-page{display:grid;grid-template-columns:minmax(0,412px) minmax(0,1fr);align-items:start}

/* --- Le volet --- */
/* overflow:clip, surtout pas hidden : « hidden » fait du volet un conteneur
   de défilement, et un position:sticky ne colle jamais qu'à l'intérieur de
   son conteneur de défilement — il restait donc immobile. « clip » rogne le
   halo sans créer ce conteneur. */
.fin-volet{background:var(--navy-900);color:#A6C4D8;position:relative;overflow:clip;align-self:stretch}
.fin-volet::after{
  content:"";position:absolute;left:-90px;bottom:-160px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,176,181,.20),transparent 70%);pointer-events:none;
}
.fin-volet-in{
  position:sticky;top:calc(var(--hdr-h,68px) + 12px);z-index:2;
  padding:38px clamp(26px,2.6vw,42px) 42px clamp(20px,4vw,40px);
  /* Un volet plus haut que l'écran resterait collé sans qu'on puisse en voir
     le bas : il défile alors sur lui-même. */
  max-height:calc(100vh - var(--hdr-h,68px) - 24px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;
}
.fin-volet-in::-webkit-scrollbar{width:6px}
.fin-volet-in::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:3px}
html.hdr-hidden .fin-volet-in{top:12px;max-height:calc(100vh - 24px)}
.fin-marque{
  width:74px;height:74px;border-radius:20px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;margin-bottom:24px;
}
.fin-marque svg{width:32px;height:32px;stroke:#7FE3E7;fill:none;stroke-width:1.5}
/* Le logo officiel prend la place du picto, sans déborder de la vignette. */
.fin-marque .ico-logo{max-width:48px;max-height:48px}
.fin-marque:has(.ico-logo){background:#fff;border-color:#fff}
.fin-eyb{
  display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:#5FD3D8;font-weight:700;
}
.fin-volet h1{
  color:#fff;font-size:clamp(1.7rem,1.3rem + 1.1vw,2.35rem);margin:.36em 0 .38em;line-height:1.1;
}
.fin-lede{font-size:1.02rem;line-height:1.6;color:#A6C4D8;max-width:34ch}

.fin-som{margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.13)}
.fin-som ul{list-style:none;margin:0;padding:0}
.fin-som li{margin-bottom:2px}
.fin-som a{
  display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;
  font-size:.95rem;color:#B9D3E5;
}
.fin-som a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.fin-som a.on{background:rgba(255,255,255,.09);color:#fff;font-weight:700}
.fin-som i{font-style:normal;font-size:.76rem;color:#5F8199;width:17px;flex:none}
.fin-som a.on i{color:#5FD3D8}

.fin-cta{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.13)}
.fin-cta p{font-size:.92rem;line-height:1.55;color:#A6C4D8;margin-bottom:16px}
.fin-btn{
  display:block;text-align:center;background:#fff;color:var(--navy-900);font-weight:700;
  padding:13px 18px;border-radius:999px;font-size:.95rem;transition:.18s var(--ease);
}
.fin-btn:hover{background:var(--blue-100);text-decoration:none}

/* --- Le contenu --- */
.fin-corps{padding:clamp(38px,4vw,62px) clamp(20px,4vw,40px) clamp(64px,6vw,96px) clamp(30px,4.4vw,68px);
  max-width:880px}
.fin-chapo .fin-txt p{
  font-size:1.16rem;line-height:1.62;color:var(--ink);margin:0 0 .7em;
}
.fin-chapo{padding-left:20px;border-left:3px solid var(--lagoon-500);margin-bottom:clamp(34px,3.4vw,52px)}
.fin-chapo .fin-txt p:last-child{margin-bottom:0}
.fin-sec{margin-bottom:clamp(38px,3.8vw,56px);scroll-margin-top:96px}
.fin-sec:last-child{margin-bottom:0}
.fin-sec > h2{
  font-size:clamp(1.24rem,1.06rem + .7vw,1.56rem);margin:0 0 .7em;letter-spacing:-.02em;
}
.fin-txt p{font-size:1.02rem;line-height:1.74;margin:0 0 .85em}
.fin-txt p:last-child{margin-bottom:0}
.fin-txt strong{color:var(--ink)}
.fin-txt a{color:var(--blue-600)}
.fin-fig img{width:100%;border-radius:var(--radius);display:block}

.fin-puces{list-style:none;margin:0;padding:0}
.fin-puces li{display:flex;gap:12px;font-size:1rem;line-height:1.62;margin-bottom:11px}
.fin-puces li:last-child{margin-bottom:0}
.fin-puces svg{width:18px;height:18px;color:var(--lagoon-500);flex:none;margin-top:5px}

.fin-pas{list-style:none;counter-reset:none;margin:6px 0 0;padding:0}
.fin-pas li{
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:22px;padding:19px 0;
  border-bottom:1px solid var(--line);
}
.fin-pas li:first-child{border-top:1px solid var(--line)}
.fin-pas b{font-size:1.85rem;line-height:1;color:var(--blue-100);font-weight:700;letter-spacing:-.03em}
.fin-pas h4{font-size:1.04rem;margin:0 0 .3em}
.fin-pas p{font-size:.97rem;line-height:1.62;margin:0}

.fin-grille{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:6px;
}
.fin-case{background:#fff;padding:20px 22px}
.fin-case h4{font-size:1.02rem;margin:0 0 .35em}
.fin-case p{font-size:.95rem;line-height:1.6;margin:0;color:var(--muted)}

/* --- Tablette et téléphone : le volet passe au-dessus --- */
@media (max-width:1000px){
  .fin-page{grid-template-columns:minmax(0,1fr)}
  .fin-volet-in{position:static;padding:30px clamp(20px,4vw,40px) 32px;max-height:none;overflow:visible}
  .fin-volet::after{left:auto;right:-140px;bottom:-200px}
  .fin-lede{max-width:52ch}
  .fin-marque{width:62px;height:62px;border-radius:16px;margin-bottom:18px}
  .fin-marque svg{width:27px;height:27px}
  /* Le sommaire devient une ligne qui défile : quatre entrées empilées
     repoussaient le contenu d'un écran entier. */
  .fin-som{margin-top:24px;padding-top:18px}
  .fin-som ul{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .fin-som ul::-webkit-scrollbar{display:none}
  .fin-som li{margin:0}
  .fin-som a{white-space:nowrap;background:rgba(255,255,255,.07);padding:8px 14px;font-size:.88rem}
  .fin-corps{padding:32px clamp(20px,4vw,40px) 56px;max-width:none}
}
@media (max-width:620px){
  .fin-grille{grid-template-columns:1fr}
  .fin-pas li{grid-template-columns:42px minmax(0,1fr);gap:14px}
  .fin-pas b{font-size:1.5rem}
  .fin-chapo{padding-left:16px}
  .fin-chapo .fin-txt p{font-size:1.06rem}
}

/* ============================================================
   80. Catalogue — la recherche appartient au bandeau
   Elle avait son propre fond bleu : deux dégradés se succédaient, avec une
   couture visible entre les deux. Au repos elle est maintenant transparente
   et se pose sur le bandeau du titre — c'est la même section. Le fond ne
   revient qu'une fois la barre décollée, quand les cartes défilent dessous
   et qu'il faut bien quelque chose derrière le texte.
   ============================================================ */
/* Le bandeau du catalogue et la barre de recherche sont deux boîtes
   superposées : pour qu'elles n'en fassent qu'une à l'œil, leur dégradé ne
   varie plus que sur l'horizontale. Chaque ligne est alors identique d'une
   boîte à l'autre, quelle que soit leur hauteur — aucune couture possible.
   C'est ce que voyait le trait sombre : deux dégradés obliques qui ne se
   raccordaient pas. */
.fiche-hero--slim,
.catsticky{background:linear-gradient(90deg,var(--navy-900) 0%,var(--navy-700) 62%,#0F5F84 100%)}
.fiche-hero--slim .fiche-hero-inner{padding-bottom:clamp(10px,1.2vw,18px)}
.catsticky{
  /* Un pixel de recouvrement : la barre est un calque à part (sticky), et la
     hauteur du bandeau tombe sur une fraction de pixel. Sans ça, une ligne
     claire d'un pixel apparaît à la jointure. */
  margin-top:-1px;padding-block:1px clamp(18px,2.2vw,30px);
  transition:top .28s var(--ease),box-shadow .25s var(--ease),
             background-color .25s var(--ease),padding .2s var(--ease);
}
/* Décollée, elle reprend son propre rembourrage : elle n'a plus de bandeau
   au-dessus d'elle, c'est elle qui fait le bandeau. */
.catsticky.is-stuck{padding-block:clamp(10px,1.3vw,15px)}
/* Plus courte : à 660 px elle garde ses proportions de champ de recherche
   au lieu de s'étirer sur toute la largeur du catalogue. */
.catsticky .catsearch{margin-top:0;max-width:660px}
@media (max-width:700px){
  .catsticky{padding-block:0 12px}
  .catsticky.is-stuck{padding-block:9px}
  .catsticky .catsearch{max-width:none}
}

/* ============================================================
   81. Cartes formation — le survol
   La carte se soulève et grandit d'un cheveu, la pastille de lecture bat une
   fois, et le mot « Voir » se pose sous elle. L'ancien voile « Voir » qui
   couvrait la photo après trois secondes est retiré : deux relances pour la
   même action, dont une qui cachait l'image.
   ============================================================ */
.formation-card{
  transition:transform .28s cubic-bezier(.22,.9,.28,1),
             box-shadow .28s var(--ease),border-color .22s var(--ease);
}
.formation-card:hover{transform:translateY(-6px) scale(1.022);z-index:3}
.formation-card:hover,.formation-card:focus-within{position:relative}

/* La pastille et son mot, en haut à droite de la photo. */
.fc-video{
  position:absolute;right:12px;top:12px;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none;
}
.fc-video .fc-play{position:static;pointer-events:auto}
.fc-play{
  width:46px;height:46px;display:grid;place-items:center;padding:0;
  border:2px solid #fff;border-radius:50%;cursor:pointer;
  color:var(--navy-900);background:var(--lagoon-100);backdrop-filter:none;
  box-shadow:0 6px 18px rgba(5,34,54,.26);
  transform:scale(.94);opacity:.96;
  transition:transform .25s var(--ease),opacity .25s var(--ease),background .25s var(--ease);
}
.fc-play svg{width:21px;height:21px;margin-left:2px}
.formation-card:hover .fc-play{
  transform:scale(1);opacity:1;
  animation:fc-battement 1.6s var(--ease) infinite;
}
.fc-play:hover{background:#fff;animation:none;transform:scale(1.1)}
.fc-play:focus-visible{outline:2px solid var(--lagoon-500);outline-offset:3px;opacity:1;animation:none}
/* Un battement, pas un clignotement : l'échelle bouge de 6 %, l'anneau
   s'écarte et s'efface. */
@keyframes fc-battement{
  0%  {transform:scale(1);   box-shadow:0 6px 18px rgba(5,34,54,.26),0 0 0 0 rgba(255,255,255,.55)}
  55% {transform:scale(1.06);box-shadow:0 6px 18px rgba(5,34,54,.26),0 0 0 10px rgba(255,255,255,0)}
  100%{transform:scale(1);   box-shadow:0 6px 18px rgba(5,34,54,.26),0 0 0 0 rgba(255,255,255,0)}
}
.fc-play-txt{
  font-family:var(--font-display);font-weight:750;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(5,34,54,.7);
  opacity:0;transform:translateY(-4px);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.formation-card:hover .fc-play-txt,
.formation-card:focus-within .fc-play-txt{opacity:1;transform:none}

/* Au doigt, pas de survol : la pastille reste au centre de la vignette et le
   mot n'a personne à qui parler. */
@media (max-width:760px){
  .fc-video{inset:0;right:auto;top:auto;justify-content:center;gap:0}
  .fc-video .fc-play{width:32px;height:32px;transform:scale(1);opacity:1;border-width:1.5px}
  .fc-video .fc-play svg{width:15px;height:15px}
  .fc-play-txt{display:none}
}
@media (hover:none){ .fc-play-txt{display:none} }
@media (prefers-reduced-motion:reduce){
  .formation-card{transition:none}
  .formation-card:hover{transform:none}
  .formation-card:hover .fc-play{animation:none}
  .fc-play-txt{transition:none}
}

/* ============================================================
   82. Trois sections de l'accueil qui s'annoncent
   Le quiz, les valeurs et les financeurs arrivaient d'un bloc : un fondu
   commun, et c'était tout. Chacun a maintenant sa propre entrée, et les
   financeurs disent enfin qu'on peut cliquer dessus.
   ============================================================ */

/* ---------- 1. Le quiz d'orientation ---------- */
/* Le titre et le chapô montent l'un après l'autre, puis la carte se pose. */
html.js-anim #orientation .section-head.is-in > *,
html.js-anim #valeurs .section-head.is-in > *,
html.js-anim #financement .section-head.is-in > *{
  animation:sec-monte .55s var(--ease) both;
}
html.js-anim #orientation .section-head.is-in > :nth-child(1),
html.js-anim #valeurs .section-head.is-in > :nth-child(1),
html.js-anim #financement .section-head.is-in > :nth-child(1){animation-delay:.02s}
html.js-anim #orientation .section-head.is-in > :nth-child(2),
html.js-anim #valeurs .section-head.is-in > :nth-child(2),
html.js-anim #financement .section-head.is-in > :nth-child(2){animation-delay:.12s}
html.js-anim #orientation .section-head.is-in > :nth-child(3){animation-delay:.22s}
@keyframes sec-monte{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
/* La carte ne fait pas que monter : elle grandit un peu en se posant. */
html.js-anim .quiz-home.reveal{transform:translateY(30px) scale(.972);transform-origin:50% 30%}
html.js-anim .quiz-home.reveal.is-in{transform:none}
/* Dedans, la barre d'étapes se remplit de gauche à droite, puis la question
   monte — le quiz a l'air de démarrer, pas d'être déjà là. */
html.js-anim .quiz-home.is-in .quiz-steps span{
  animation:qz-barre .42s var(--ease) both;transform-origin:left center;
}
html.js-anim .quiz-home.is-in .quiz-steps span:nth-child(1){animation-delay:.20s}
html.js-anim .quiz-home.is-in .quiz-steps span:nth-child(2){animation-delay:.29s}
html.js-anim .quiz-home.is-in .quiz-steps span:nth-child(3){animation-delay:.38s}
@keyframes qz-barre{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}
html.js-anim .quiz-home.is-in .quiz-q{animation:sec-monte .5s .34s var(--ease) both}
/* Les réponses cascadent déjà à chaque question ; mais la toute première
   cascade partait au chargement, bien avant qu'on arrive ici. On la retient
   jusqu'à l'entrée de la carte — sauf si le quiz est visible d'emblée, où
   .reveal n'est pas posé et où la cascade d'origine reprend la main. */
html.js-anim .quiz-home.reveal:not(.is-in) .quiz-opt{opacity:0}
html.js-anim .quiz-home.reveal.is-in .quiz-opt{
  animation:quiz-pop .42s var(--ease) both;
  animation-delay:calc(.42s + var(--i,0) * 70ms);
}

/* ---------- 2. Les valeurs, sur quatre colonnes ---------- */
/* Quatre promesses, quatre colonnes : la grille automatique en posait trois
   puis une orpheline. Le chiffre quitte sa pastille et devient l'accroche,
   souligné d'un trait qui se déploie au survol. */
.valeurs{grid-template-columns:repeat(4,minmax(0,1fr))}
.valeur{
  --teinte:var(--blue-600);--fond:var(--blue-50);
  padding:clamp(24px,2.4vw,30px) clamp(20px,2vw,26px);overflow:hidden;
}
.valeur:nth-child(2){--teinte:var(--lagoon-600);--fond:var(--lagoon-100)}
.valeur:nth-child(3){--teinte:#B4762A;--fond:var(--sand)}
.valeur:nth-child(4){--teinte:var(--green-600);--fond:var(--green-100)}
/* Chaque carte a sa teinte : un halo très doux dans l'angle, qui se réveille
   au survol. Quatre promesses, quatre couleurs, une lecture immédiate. */
.valeur::after{
  content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;
  border-radius:50%;background:var(--fond);opacity:.5;pointer-events:none;
  transition:opacity .3s var(--ease),transform .45s cubic-bezier(.2,.74,.24,1);
}
.valeur:hover::after{opacity:.85;transform:scale(1.18)}
.valeur > *{position:relative;z-index:1}
/* Un filet de couleur en tête de carte : il signe la carte au repos et
   s'épaissit au survol. */
.valeur::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--teinte);z-index:2;
  transition:height .28s var(--ease);
}
.valeur:hover::before{height:6px}
.valeur-n{
  width:auto;height:auto;background:none;border-radius:0;
  display:block;color:var(--teinte);font-size:2.1rem;line-height:1;
  letter-spacing:-.04em;margin-bottom:14px;
}
.valeur:nth-child(2) .valeur-n,
.valeur:nth-child(3) .valeur-n,
.valeur:nth-child(4) .valeur-n{background:none;color:var(--teinte)}
.valeur h3{font-size:1.04rem;margin:0 0 .45em}
.valeur p{font-size:.92rem}
.valeur:hover{transform:translateY(-5px);border-color:var(--teinte)}
/* L'arrivée : la carte monte et grandit, l'une après l'autre. */
html.js-anim .valeurs > .reveal{transform:translateY(26px) scale(.95)}
html.js-anim .valeurs > .reveal.is-in{transform:none}
html.js-anim .valeurs > .reveal{transition:opacity .5s var(--ease),
  transform .55s cubic-bezier(.2,.74,.24,1);transition-delay:var(--d,0ms)}
@media (max-width:1000px){ .valeurs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .valeurs{grid-template-columns:minmax(0,1fr)} }

/* ---------- 3. Les financeurs : c'est cliquable, ça se voit ---------- */
/* Pas de carte blanche qui décolle, pas d'ombre portée, pas de flèche qui
   surgit : la section est déjà sans cadre, lui en rendre un au survol était
   revenir sur ses pas. Le geste tient en une phrase — tout ce qu'on ne
   désigne pas s'efface, et ce qu'on désigne se souligne d'un cheveu.
   :has() n'est pas indispensable : là où il manque, rien ne s'efface et le
   survol garde son trait. */
a.funding-item{position:relative;border-radius:20px}

.funding--logos:has(a.funding-item:hover) a.funding-item,
.funding--logos:has(a.funding-item:focus-visible) a.funding-item{
  opacity:.32;transition:opacity .26s var(--ease);
}
/* Reprise du même préfixe : sans lui, la règle d'effacement l'emportait en
   spécificité et éteignait aussi le bloc désigné. */
.funding--logos:has(a.funding-item:hover) a.funding-item:hover,
.funding--logos:has(a.funding-item:focus-visible) a.funding-item:focus-visible{opacity:1}

/* Le libellé prend la couleur du lien, et le trait se déploie sous lui,
   depuis le centre — un cheveu, pas un soulignement de traitement de texte. */
a.funding-item strong{
  display:inline-block;position:relative;
  transition:color .18s var(--ease);
}
a.funding-item strong::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;
  transform:scaleX(0);transform-origin:center;
  transition:transform .26s cubic-bezier(.2,.74,.24,1);
}
a.funding-item:hover strong,
a.funding-item:focus-visible strong{color:var(--blue-600)}
a.funding-item:hover strong::after,
a.funding-item:focus-visible strong::after{transform:none}

/* Le logo se soulève de deux pixels : assez pour qu'on sente la réponse,
   pas assez pour qu'on la remarque. */
.funding--logos a.funding-item .funding-logo{
  transition:transform .22s cubic-bezier(.2,.74,.24,1);
}
.funding--logos a.funding-item:hover .funding-logo,
.funding--logos a.funding-item:focus-visible .funding-logo{transform:translateY(-2px)}
/* Le bloc entier ne bouge plus : c'est le logo qui répond, pas la vignette. */
.funding--logos a.funding-item:hover{transform:none}

/* L'arrivée : les six blocs se posent l'un après l'autre. */
html.js-anim .funding--logos > .reveal{transform:translateY(22px) scale(.94)}
html.js-anim .funding--logos > .reveal.is-in{transform:none}
html.js-anim .funding--logos > .reveal{transition:opacity .45s var(--ease),
  transform .5s cubic-bezier(.2,.74,.24,1);transition-delay:var(--d,0ms)}

@media (prefers-reduced-motion:reduce){
  html.js-anim #orientation .section-head.is-in > *,
  html.js-anim .quiz-home.is-in .quiz-steps span,
  html.js-anim .quiz-home.is-in .quiz-q,
  html.js-anim .quiz-home.reveal.is-in .quiz-opt{animation:none}
  html.js-anim .quiz-home.reveal:not(.is-in) .quiz-opt{opacity:1}
  html.js-anim .quiz-home.reveal,
  html.js-anim .valeurs > .reveal,
  html.js-anim .funding--logos > .reveal{transform:none;transition:none}
  .valeur::before{transform:none;transition:none}
  .funding--logos:has(a.funding-item:hover) a.funding-item{transition:none}
  a.funding-item strong::after{transition:none}
  .funding--logos a.funding-item .funding-logo{transition:none;transform:none}
}

/* ============================================================
   83. Les chiffres clés se comptent
   Ils arrivaient d'un bloc, déjà écrits. Ils montent maintenant de zéro,
   l'un après l'autre, pastille en tête ; l'unité (« + », « % ») ne se pose
   qu'une fois le compte terminé, sinon elle danse pendant toute la montée.
   ============================================================ */
/* La pastille précède son chiffre d'un souffle, avec un léger dépassement. */
html.js-anim .stat.reveal .stat-ico{opacity:0;transform:scale(.55)}
html.js-anim .stat.reveal.is-in .stat-ico{
  opacity:1;transform:none;
  transition:opacity .3s var(--ease),transform .55s cubic-bezier(.22,1.28,.4,1);
  transition-delay:var(--d,0ms);
}
/* Le libellé ferme la marche, une fois le chiffre lancé. */
html.js-anim .stat.reveal .stat-label{opacity:0;transform:translateY(8px)}
html.js-anim .stat.reveal.is-in .stat-label{
  opacity:1;transform:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  transition-delay:calc(var(--d,0ms) + .22s);
}
/* .va-compter n'est posé que si le compteur prend la main : sans script, le
   chiffre et son unité restent affichés tels quels. */
.stat-num.va-compter .unit{opacity:0;transition:opacity .32s var(--ease)}
.stat-num.va-compter.est-compte .unit{opacity:1}

@media (prefers-reduced-motion:reduce){
  html.js-anim .stat.reveal .stat-ico,
  html.js-anim .stat.reveal.is-in .stat-ico,
  html.js-anim .stat.reveal .stat-label,
  html.js-anim .stat.reveal.is-in .stat-label{opacity:1;transform:none;transition:none}
  .stat-num.va-compter .unit{opacity:1;transition:none}
}

/* ============================================================
   84. Page « Contactez-nous »
   Trois portes en tête (appeler, être rappelé, écrire), les cinq centres en
   liste avec une seule carte à droite, le formulaire, et la boîte de rappel.
   Une carte par centre affichée d'un bloc, c'était cinq iframes chargées pour
   une seule regardée : la liste sert aussi à ne charger que celle-là.
   ============================================================ */

/* ---------- 1. Le bandeau et ses trois portes ---------- */
.ct-hero{
  background:linear-gradient(112deg,var(--navy-800) 0%,var(--navy-700) 46%,#0E6E82 100%);
  color:#fff;padding:clamp(26px,3vw,34px) 0 clamp(34px,4vw,46px);
}
.ct-hero .breadcrumb,.ct-hero .breadcrumb a{color:rgba(255,255,255,.72)}
.ct-hero .breadcrumb a:hover{color:#fff}
.ct-hero h1{color:#fff;margin-bottom:.28em}
.ct-hero .lede{color:rgba(255,255,255,.82);max-width:46ch;margin:0}
.ct-hero-in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(24px,4vw,54px);align-items:end;margin-top:clamp(14px,2vw,22px);
}
.ct-portes{display:grid;gap:10px}
.ct-porte{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font:inherit;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.ct-porte:hover,.ct-porte:focus-visible{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);transform:translateX(3px)}
.ct-porte svg{width:21px;height:21px;flex:none;opacity:.9}
.ct-porte span{display:block;min-width:0}
.ct-porte strong{display:block;font-family:var(--font-display);font-size:.98rem;color:#fff}
.ct-porte span span{font-size:.82rem;color:rgba(255,255,255,.72)}
/* Celle du milieu est la vraie proposition : elle prend la couleur pleine. */
.ct-porte--fort{background:var(--lagoon-500);border-color:var(--lagoon-500)}
.ct-porte--fort:hover,.ct-porte--fort:focus-visible{background:var(--lagoon-600);border-color:var(--lagoon-600)}

.ct-flash{margin:clamp(20px,3vw,30px) 0 0}
.ct-intro{max-width:74ch}

/* ---------- 2. Les centres ---------- */
.ct-centres{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(16px,2.4vw,28px);align-items:start;
}
/* Une seule colonne, bornée : sans minmax(0,…), un nom de rue un peu long
   élargissait le bouton au-delà de sa colonne et il passait sous la fiche. */
.ct-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-content:start}
.ct-onglet{
  display:flex;align-items:center;gap:13px;text-align:left;width:100%;
  padding:14px 15px;border-radius:16px;border:1.5px solid var(--line);
  background:#fff;cursor:pointer;font:inherit;color:var(--body);
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);
}
.ct-onglet:hover{border-color:var(--blue-400);transform:translateX(3px)}
.ct-onglet.is-on{border-color:var(--blue-600);background:var(--blue-50)}
.ct-onglet-ico{
  width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:var(--line-soft);color:var(--navy-700);
}
.ct-onglet.is-on .ct-onglet-ico{background:#fff;color:var(--blue-600)}
/* La silhouette hérite d'une taille d'icône de menu : ici, elle a la place. */
.ct-onglet-ico .terr-ico{width:23px;height:23px;opacity:1}
.ct-onglet-txt{min-width:0}
.ct-onglet-txt strong{display:block;font-family:var(--font-display);font-size:.96rem;color:var(--ink);line-height:1.25}
.ct-onglet-txt span{display:block;font-size:.82rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ct-fiche{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(16px,2vw,24px);background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(14px,1.6vw,18px);box-shadow:var(--shadow-sm);
}
/* Sans script les cinq fiches se suivent ; le script n'en laisse qu'une. */
.ct-fiche + .ct-fiche{margin-top:14px}
html.js-anim .ct-fiche{display:none}
html.js-anim .ct-fiche.is-on{display:grid;margin-top:0}

.ct-carte{
  position:relative;border-radius:var(--radius);overflow:hidden;background:var(--line-soft);
  min-height:280px;isolation:isolate;
}
.ct-carte-cadre{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
.ct-carte-att{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:.86rem;color:var(--muted);
}
.ct-carte-vide{
  position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:14px;
  padding:26px;text-align:center;background:var(--blue-50);
}
.ct-carte-vide .terr-ico{width:74px;height:74px;opacity:1;color:var(--blue-400)}
.ct-carte-vide p{margin:0;font-size:.88rem;color:var(--body);max-width:26ch}

.ct-infos{padding:clamp(8px,1.2vw,14px) clamp(8px,1.2vw,14px) clamp(8px,1.2vw,12px)}
.ct-infos h3{font-size:1.16rem;margin:0 0 .7em}
.ct-infos dl{margin:0 0 16px;display:grid;gap:11px}
.ct-infos dt{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:2px}
.ct-infos dd{margin:0;font-size:.93rem;color:var(--body);line-height:1.5}
.ct-pmr{
  display:inline-block;margin-top:6px;padding:2px 9px;border-radius:999px;
  background:var(--green-100);color:var(--green-600);font-size:.76rem;font-weight:650;
}
.ct-liens{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.ct-lien{
  padding:7px 13px;border-radius:999px;background:var(--line-soft);
  font-size:.86rem;font-weight:600;color:var(--navy-700);text-decoration:none;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.ct-lien:hover{background:var(--blue-100);color:var(--blue-600)}
.ct-lien--itin{background:var(--blue-600);color:#fff}
.ct-lien--itin:hover{background:var(--navy-700);color:#fff}

/* ---------- 3. Le formulaire ---------- */
.ct-ecrire{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);
  gap:clamp(24px,4vw,56px);align-items:start;
}
.ct-form{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,2.8vw,34px);box-shadow:var(--shadow-sm);
}
/* Le champ que seul un robot voit. display:none serait un signal ; on le sort
   simplement du champ de vision, sans le retirer du document. */
.ct-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-calc .field{max-width:140px}
.ct-fac{font-weight:400;font-size:.82em;color:var(--muted)}
/* .form-field impose display:flex ; sans cette ligne, l'attribut hidden ne
   masquait rien du tout. */
.ct-suite[hidden]{display:none}

.ct-aside{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,2.4vw,28px);position:sticky;top:96px;
}
.ct-aside h3{font-size:1.02rem;margin:0 0 .9em}
.ct-etapes-mini{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:12px;counter-reset:ce}
.ct-etapes-mini li{
  position:relative;padding-left:34px;font-size:.9rem;color:var(--body);line-height:1.5;counter-increment:ce;
}
.ct-etapes-mini li::before{
  content:counter(ce);position:absolute;left:0;top:-1px;width:24px;height:24px;border-radius:8px;
  display:grid;place-items:center;background:var(--blue-50);color:var(--blue-600);
  font-family:var(--font-display);font-weight:800;font-size:.8rem;
}
.ct-gages{margin:0;padding:18px 0 0;list-style:none;display:grid;gap:9px;border-top:1px solid var(--line)}
.ct-gages li{position:relative;padding-left:26px;font-size:.86rem;color:var(--muted);line-height:1.45}
.ct-gages li::before{
  content:"";position:absolute;left:0;top:1px;width:17px;height:17px;
  background:var(--coche) center/contain no-repeat;
}

/* ---------- 4. La boîte « Être rappelé » ---------- */
.rap{
  width:min(680px,calc(100vw - 2*var(--gutter)));max-height:min(90vh,900px);
  padding:0;border:0;border-radius:var(--radius-lg);background:#fff;
  color:var(--body);box-shadow:0 40px 90px rgba(8,52,82,.28);overflow:hidden;
}
.rap::backdrop{background:rgba(8,32,52,.55);backdrop-filter:blur(3px)}
.rap-in{display:flex;flex-direction:column;max-height:inherit}
.rap-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,30px) 16px;
  border-bottom:1px solid var(--line);
}
.rap-head h2{font-size:clamp(1.2rem,1rem + .7vw,1.5rem);margin:.15em 0 0}
.rap-fermer{
  width:36px;height:36px;flex:none;border-radius:11px;border:1px solid var(--line);
  background:#fff;color:var(--muted);cursor:pointer;display:grid;place-items:center;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.rap-fermer:hover{background:var(--line-soft);color:var(--ink)}
.rap-fermer svg{width:17px;height:17px}
.rap-corps{padding:clamp(18px,2.4vw,26px) clamp(20px,2.6vw,30px);overflow-y:auto}
.rap-fs{border:0;padding:0;margin:0 0 18px}
.rap-fs legend{
  padding:0;margin-bottom:9px;font-family:var(--font-display);
  font-size:.88rem;font-weight:700;color:var(--ink);
}
.rap-pied{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:16px clamp(20px,2.6vw,30px);border-top:1px solid var(--line);background:var(--canvas);
}
/* Sans script, <dialog> reste fermé : on le rouvre pour que le formulaire
   existe quand même, en bas de page. */
html:not(.js-anim) .rap{display:block;position:static;margin:0 auto clamp(40px,6vw,80px);max-height:none}
html:not(.js-anim) .rap-corps{overflow:visible}

/* ---------- 5. La recherche de formation ---------- */
.ct-combo{position:relative}
.ct-combo-liste{
  position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:20;
  max-height:248px;overflow-y:auto;margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);
}
.ct-combo-liste li{
  padding:9px 11px;border-radius:9px;font-size:.9rem;color:var(--body);cursor:pointer;line-height:1.35;
}
.ct-combo-liste li:hover,.ct-combo-liste li.is-on{background:var(--blue-50);color:var(--blue-600)}
.ct-combo-liste .ct-combo-rien{color:var(--muted);cursor:default}
.ct-combo-liste .ct-combo-rien:hover{background:none;color:var(--muted)}
.ct-combo mark{background:var(--lagoon-100);color:inherit;padding:0;border-radius:3px}

@media (max-width:1000px){
  .ct-hero-in{grid-template-columns:minmax(0,1fr)}
  .ct-centres{grid-template-columns:minmax(0,1fr)}
  .ct-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ct-ecrire{grid-template-columns:minmax(0,1fr)}
  .ct-aside{position:static}
}
@media (max-width:760px){
  .ct-fiche{grid-template-columns:minmax(0,1fr)}
  .ct-carte{min-height:230px}
}
@media (max-width:560px){
  .ct-liste{grid-template-columns:minmax(0,1fr)}
  .ct-onglet-txt span{white-space:normal}
  .rap{width:100vw;max-width:100vw;max-height:100vh;height:100%;border-radius:0}
}
/* Trois créneaux de longueurs très différentes : l'horaire passe sous le nom,
   les trois cases retrouvent la même hauteur. */
.rap-fs .radio-card > span{display:block;min-width:0}
.rap-fs .radio-card strong{display:block;font-family:var(--font-display);font-size:.94rem;color:var(--ink);line-height:1.2}
.rap-fs .radio-card > span > span{display:block;font-size:.8rem;color:var(--muted);margin-top:1px}

/* ---------- Formulaire de l'app embarqué dans une page ----------
   La hauteur est fixée à la main dans le back-office : l'app est sur un autre
   domaine, la page ne peut donc pas mesurer son contenu. On donne du mou sur
   écran étroit, où les champs s'empilent au lieu de se ranger par deux. */
.pg-form{margin:clamp(22px,3vw,34px) 0 0}
/* Pas de carte autour : la page de l'app en est déjà une, avec son fond, ses
   marges et ses angles. En l'encadrant, on obtenait une carte dans une carte,
   et l'arrondi extérieur rognait le texte d'introduction du formulaire. Il
   reste le coin arrondi, posé sur l'iframe elle-même. */
.pg-form-cadre{
  background:transparent;border:0;box-shadow:none;
  border-radius:var(--radius-lg);overflow:hidden;
}
.pg-form-cadre iframe{
  display:block;width:100%;height:var(--h,900px);border:0;color-scheme:light;
}
@media (max-width:620px){ .pg-form-cadre iframe{height:calc(var(--h,900px) + 280px)} }
.pg-form-secours{margin:12px 0 0;font-size:.85rem;color:var(--muted);text-align:center}
/* Le territoire ouvre la boîte de rappel : il sépare le « où » du « quand ». */
.rap-terr{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}

/* ---------- Les centres, sur fond bleu nuit ----------
   La section prenait le voile vert par défaut de [data-voile]. Elle a
   maintenant son propre fond : les fiches blanches y gagnent le relief
   qu'elles n'avaient pas sur le blanc, et le bandeau trouve un écho plus bas
   dans la page. Tout ce qui s'y trouve doit donc s'éclaircir. */
.ct-sombre{
  background:linear-gradient(168deg,var(--navy-900) 0%,var(--navy-800) 52%,#0C5D77 100%);
  color:#A6C4D8;
}
.ct-sombre .section-head h2{color:#fff}
.ct-sombre .section-head .lede{color:rgba(255,255,255,.76)}
.ct-sombre .eyebrow{color:#7FE3E7}
/* Les onglets deviennent translucides, comme les portes du bandeau : cinq
   cartes blanches à gauche d'une sixième auraient fait un mur. */
.ct-sombre .ct-onglet{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#A6C4D8;
}
.ct-sombre .ct-onglet:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34)}
.ct-sombre .ct-onglet.is-on{background:#fff;border-color:#fff}
.ct-sombre .ct-onglet-txt strong{color:#fff}
.ct-sombre .ct-onglet-txt span{color:rgba(255,255,255,.6)}
.ct-sombre .ct-onglet.is-on .ct-onglet-txt strong{color:var(--ink)}
.ct-sombre .ct-onglet.is-on .ct-onglet-txt span{color:var(--muted)}
.ct-sombre .ct-onglet-ico{background:rgba(255,255,255,.1);color:#fff}
.ct-sombre .ct-onglet.is-on .ct-onglet-ico{background:var(--blue-50);color:var(--blue-600)}
/* La fiche reste une carte claire : c'est là qu'on lit une adresse. */
.ct-sombre .ct-fiche{border-color:rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(4,24,40,.34)}

/* ============================================================
   85. Les liens du pied de page
   La teinte claire ne servait qu'au survol ; au repos les liens étaient déjà
   à leur maximum et le survol n'ajoutait qu'un soulignement. Inversé : cette
   teinte devient l'état actif, et le repos se tient à 60 % — la colonne se
   lit comme un bloc, et ce qu'on désigne se détache tout seul. Le trait
   hérité de la règle générale des liens n'a plus lieu d'être.
   ============================================================ */
.site-footer a{
  opacity:.6;text-decoration:none;
  transition:opacity .18s var(--ease),color .18s var(--ease);
}
.site-footer a:hover,
.site-footer a:focus-visible,
.site-footer a[aria-current]{opacity:1;color:#B9D3E5;text-decoration:none}
.footer-coord a:hover,
.footer-coord a:focus-visible{color:#fff}
/* Une exception : les mentions légales doivent rester trouvables — les
   affaiblir encore les rendrait illisibles sur le fond nuit. Les glyphes
   sociaux, eux, suivent la règle des 60 % et passent au blanc au survol. */
.site-footer .footer-bottom a{opacity:1}
.site-footer .footer-bottom a:hover,
.site-footer .footer-bottom a:focus-visible{opacity:1;color:#B9D3E5}
.site-footer .socials a:hover,
.site-footer .socials a:focus-visible{opacity:1;color:#fff;transform:translateY(-2px)}

/* ============================================================
   86. Espace formateur — les quatre chiffres de tête
   Un nombre nu ne dit pas grand-chose. Les quatre tuiles partagent désormais
   le même squelette — un repère visuel de hauteur fixe, la valeur, son
   libellé — pour que les chiffres tombent sur la même ligne et se comparent
   d'un regard, quelle que soit la nature du repère au-dessus.
   ============================================================ */
.form-kpis{align-items:stretch}
.form-kpi{
  display:flex;flex-direction:column;gap:1px;
  padding:18px 20px 20px;
}
/* La rangée du haut : pile de visages, jeton ou jauge, tous de même hauteur.
   C'est elle qui garantit l'alignement des chiffres en dessous. */
.fk-visu{height:46px;display:flex;align-items:center;margin-bottom:14px}
.form-kpi strong{font-size:1.75rem;line-height:1.05;display:flex;align-items:baseline;gap:.12em}
.form-kpi strong i{font-style:normal;font-size:.55em;font-weight:800;color:var(--muted)}
.form-kpi > span{font-size:.86rem;color:var(--muted);margin-top:2px}
.fk-note{
  display:block;font-style:normal;font-size:.78rem;line-height:1.35;
  color:var(--muted);opacity:.66;margin-top:5px;
}

/* --- Les visages --- */
.fk-pile{display:flex}
.fk-tete{
  width:34px;height:34px;flex:none;margin-left:-4px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.01em;
  /* L'anneau blanc sépare deux pastilles qui se chevauchent : sans lui, la
     pile devient une tache. */
  box-shadow:0 0 0 2px #fff;
}
.fk-tete:nth-child(1){margin-left:0}
.fk-tete[style*="--n:0"]{background:var(--blue-50);color:var(--blue-600)}
.fk-tete[style*="--n:1"]{background:var(--lagoon-100);color:var(--lagoon-600)}
.fk-tete[style*="--n:2"]{background:var(--sand);color:#B4762A}
.fk-tete[style*="--n:3"]{background:var(--green-100);color:var(--green-600)}
.fk-tete--reste{background:var(--navy-800);color:#fff;font-size:.7rem}

/* --- Le jeton des tuiles sans dessin --- */
.fk-jeton{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:var(--line-soft);color:var(--muted);
}
.fk-jeton svg{width:21px;height:21px}
.fk-alerte .fk-jeton{background:var(--coral-100);color:var(--coral-600)}
.fk-alerte strong{color:var(--coral-600)}
.fk-fini .fk-jeton{background:var(--green-100);color:var(--green-600)}

/* --- À relancer : la seule tuile sur laquelle on peut agir --- */
a.form-kpi{text-decoration:none;color:inherit;transition:border-color .18s var(--ease),background .18s var(--ease)}
a.form-kpi:hover{text-decoration:none;border-color:var(--blue-400);background:var(--blue-50)}

/* --- La jauge --- */
/* Le chiffre est sous l'arc, à la même place que dans les autres tuiles :
   le mettre au centre de l'anneau le désalignait de ses voisins et forçait
   une taille trop petite pour être lue. */
.fk-arc{width:46px;height:46px;display:block}
.fk-arc svg{width:100%;height:100%;display:block;overflow:visible}
.fk-arc path{fill:none;stroke-width:11;stroke-linecap:round}
.fk-arc-fond{stroke:var(--line-soft)}
.fk-arc-plein{
  stroke:var(--blue-600);
  stroke-dasharray:179.1;
  /* Au repos l'arc est vide ; il se remplit jusqu'à --fin quand la rangée
     entre à l'écran. Sans script, il est plein d'emblée. */
  stroke-dashoffset:var(--fin,0);
}
html.js-anim .fk-arc-plein{stroke-dashoffset:179.1}
html.js-anim .form-kpis.is-in .fk-arc-plein{
  stroke-dashoffset:var(--fin,0);
  transition:stroke-dashoffset 1.1s cubic-bezier(.2,.74,.24,1) .15s;
}

@media (max-width:640px){
  /* Sur deux colonnes, la pile de visages dépasse de sa tuile : on lui rend
     la largeur entière plutôt que de rogner des pastilles au hasard — le
     compte « +N » ne saurait pas qu'il en manque. */
  .form-kpi:first-child{grid-column:1/-1}
  .form-kpi:first-child .fk-visu{margin-bottom:10px}
}
@media (max-width:560px){
  .form-kpi{padding:15px 16px 17px}
  .form-kpi strong{font-size:1.5rem}
  .fk-visu{height:40px;margin-bottom:11px}
  .fk-jeton{width:38px;height:38px;border-radius:12px}
  .fk-jeton svg{width:18px;height:18px}
  .fk-arc{width:40px;height:40px}
  .fk-tete{width:32px;height:32px;margin-left:-3px;font-size:.68rem}
}
@media (prefers-reduced-motion:reduce){
  html.js-anim .fk-arc-plein{stroke-dashoffset:var(--fin,0);transition:none}
}

/* ============================================================
   87. Espaces connectés — on resserre le haut de page
   Le bandeau sombre gardait le rythme d'une page de communication : 56 px de
   vide dessous, puis 112 px de blanc avant le premier chiffre. Un tableau de
   bord se lit d'un coup d'œil ; ce qu'on y cherche ne doit pas commencer
   sous la ligne de flottaison.
   ============================================================ */
body.espace .dash-head{padding-block:clamp(24px,3vw,38px) clamp(20px,2.4vw,30px)}
body.espace .dash-head h1{margin:.5rem 0 .22em}
body.espace .dash-head + .section{padding-block:clamp(20px,2.6vw,30px) clamp(30px,4vw,56px)}
/* Le premier titre de rubrique n'a plus à s'écarter autant du bloc de tête. */
body.espace .form-kpis + h2{margin-top:clamp(24px,3vw,34px) !important}

/* ============================================================
   88. Fiche d'un apprenant — les séances de travail
   Elles n'existaient que dans le PDF, alors que « quand a-t-il travaillé »
   est la première question qu'on se pose en ouvrant la fiche. Une colonne de
   dates à gauche, ce qui a été fait à droite : on balaie les dates, on
   s'arrête sur celle qui intrigue.
   ============================================================ */
.seances{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.seance{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 18px 14px 14px;
}
/* Le bloc de date : le quantième porte, le mois et l'année accompagnent. */
.seance-jour{
  text-align:center;background:var(--line-soft);border-radius:12px;padding:8px 4px 7px;
}
.seance-jour b{display:block;font-family:var(--font-display);font-size:1.24rem;line-height:1;color:var(--ink)}
.seance-jour i{
  display:block;font-style:normal;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--blue-600);margin-top:3px;
}
.seance-jour u{display:block;text-decoration:none;font-size:.68rem;color:var(--muted);margin-top:1px}
.seance-tete{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 4px}
.seance-tete strong{font-family:var(--font-display);font-size:.98rem;color:var(--ink)}
.seance-depuis{font-size:.8rem;color:var(--muted)}
.seance-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0;font-size:.85rem;color:var(--muted)}
.seance-temps{display:inline-flex;align-items:center;gap:5px;color:var(--blue-600);font-weight:650}
.seance-temps svg{width:14px;height:14px}
.seance-detail{
  list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--line-soft);
  display:grid;gap:5px;font-size:.86rem;color:var(--body);
}
/* Puce en débord plutôt qu'en flex : quand le titre passe à la ligne, la
   puce restait accrochée au premier fragment et le module partait seul. */
.seance-detail li{position:relative;padding-left:14px;line-height:1.45}
.seance-detail li::before{
  content:"";position:absolute;left:0;top:.58em;width:5px;height:5px;border-radius:50%;
  background:var(--line);
}
.seance-detail li em{font-style:normal;font-size:.8rem;color:var(--muted);margin-left:.4em}
.seance-copie::before{background:var(--lagoon-500) !important}

/* Sur la fiche, la date de dernière visite est plus courte qu'un nombre :
   on lui laisse la même corpulence sans la faire hurler. */
.fk-date{font-size:1.45rem}
.fk-vide .fk-jeton{opacity:.6}

@media (max-width:560px){
  .seance{grid-template-columns:52px minmax(0,1fr);gap:12px;padding:12px 14px 12px 12px}
  .seance-jour b{font-size:1.06rem}
  .seance-meta{gap:10px;font-size:.82rem}
}

/* ============================================================
   89. Fiches de financement — les autres dispositifs, à la fin
   Ils occupaient le bas du volet de gauche, où ils faisaient concurrence au
   sommaire pendant toute la lecture. À la fin de la fiche, ils répondent à la
   seule question qui reste : « et les autres ? »
   ============================================================ */
.fin-autres-lede{margin:0 0 clamp(18px,2vw,26px);color:var(--muted);font-size:.95rem}
.fin-autres-grille{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:clamp(10px,1.4vw,14px);
}
.fin-vignette{
  display:flex;flex-direction:column;gap:3px;
  padding:18px 18px 20px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;text-decoration:none;color:inherit;
  transition:border-color .18s var(--ease),transform .18s cubic-bezier(.2,.74,.24,1);
}
.fin-vignette:hover,.fin-vignette:focus-visible{
  text-decoration:none;border-color:var(--blue-400);transform:translateY(-2px);
}
/* Deux classes : « .fin-vignette span » vise aussi la pastille de l'icône,
   qui est un span — sans ce poids égal, elle héritait du gris de la note. */
.fin-vignette .fin-vignette-ico{
  height:46px;display:flex;align-items:center;margin-bottom:12px;color:var(--blue-600);
}
.fin-vignette-ico svg{width:30px;height:30px}
.fin-vignette-ico .ico-logo{max-height:40px;max-width:130px;width:auto;object-fit:contain}
.fin-vignette strong{
  font-family:var(--font-display);font-size:1rem;color:var(--ink);line-height:1.25;
  transition:color .18s var(--ease);
}
.fin-vignette:hover strong,.fin-vignette:focus-visible strong{color:var(--blue-600)}
.fin-vignette span{font-size:.85rem;color:var(--muted);line-height:1.45}

/* ============================================================
   90. Espace apprenant — le catalogue e-learning mis en avant
   Il finissait la page en petites cartes grises, sous les factures : le seul
   endroit où personne ne descend. Il remonte juste après les formations en
   cours, dans un encart qui se distingue du reste, et reprend les vraies
   cartes du catalogue — image, durée, prix.
   ============================================================ */
.dash-promo{
  margin:clamp(34px,4vw,52px) 0 0;
  padding:clamp(24px,3vw,36px) clamp(20px,2.6vw,32px) clamp(26px,3vw,36px);
  background:var(--sand);border-radius:var(--radius-xl);
}
.dash-promo-tete{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  margin-bottom:clamp(20px,2.4vw,28px);
}
.dash-promo-tete h2{margin:0 0 .3em}
.dash-promo-tete .lede{margin:0;max-width:56ch}
.dash-promo-tete .btn{flex:none}
/* Trois cartes, quel que soit l'écran large : la grille du catalogue en
   compte quatre et les aurait laissées orphelines d'un quart de rangée. */
.dash-promo-grille{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .dash-promo-grille{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .dash-promo-grille{grid-template-columns:minmax(0,1fr)} }
/* Sur le sable, la carte blanche a besoin d'un peu moins d'ombre. */
.dash-promo .formation-card{box-shadow:var(--shadow-sm)}

/* ============================================================
   91. Espaces connectés — l'en-tête du site laisse la place
   Le menu ne proposait rien d'utile à qui vient reprendre son parcours. Il
   disparaît ; la marque se glisse dans le bandeau, en filigrane, et reste le
   chemin du retour vers le site.
   ============================================================ */
/* En bloc : en ligne, la pastille « Mon espace » venait se poser dessus. */
.dash-marque{display:block;width:fit-content;margin-bottom:16px;opacity:.62;transition:opacity .18s var(--ease)}
.dash-marque:hover,.dash-marque:focus-visible{opacity:1}
.dash-marque img{height:26px;width:auto;display:block;
  /* Le logo est bleu : sur le bandeau nuit, on le passe en blanc. */
  filter:brightness(0) invert(1)}

/* Les écrans sans bandeau — lecteur, correction, connexion — gardent une
   barre minimale : la marque et le retour à l'espace, rien d'autre. */
.espace-entete{background:#fff;border-bottom:1px solid var(--line)}
.espace-entete .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:14px;
}
.espace-entete .brand img{height:30px;width:auto;display:block}
.espace-entete-lien{font-family:var(--font-display);font-size:.9rem;font-weight:700;color:var(--navy-700)}
.espace-entete-lien:hover{color:var(--blue-600);text-decoration:none}
/* Sous la barre réduite, la première section n'a plus besoin du grand blanc
   d'une page de communication. */
body.espace main > .section:first-child{padding-top:clamp(20px,2.6vw,30px)}

@media (max-width:560px){
  .espace-entete .wrap{padding-block:11px}
  .espace-entete .brand img{height:25px}
  .dash-marque img{height:22px}
}

/* ============================================================
   92. Consultation de l'espace d'un apprenant
   Un encadrant peut regarder l'espace tel que l'apprenant le voit. On le dit
   clairement et on retire tout ce qui écrit : un champ grisé laisserait
   croire qu'on peut forcer le passage.
   ============================================================ */
.dash-apercu{background:var(--sand);border-color:#EADDC6;color:var(--navy-800)}
.dash-apercu strong{color:var(--ink)}
.tchat-lecture{
  margin:0;padding:13px 15px;border-radius:12px;background:var(--line-soft);
  font-size:.86rem;color:var(--muted);
}
.tchat-tete-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

/* ============================================================
   93. Chiffres clés — douze indicateurs, six par ligne
   Douze valeurs ne tiennent pas dans la rangée de quatre d'origine.
   La grille passe donc par des paliers qui divisent tous douze
   (6, 4, 3, 2) : jamais de dernière ligne orpheline. Un filet en
   haut de chaque tuile structure l'ensemble sans le transformer
   en douze cartes.
   ============================================================ */
.kpi-row--grille{grid-template-columns:repeat(6,minmax(0,1fr));gap:30px 26px}
.kpi-row--grille .kpi{
  max-width:none;display:flex;flex-direction:column;
  border-top:1px solid rgba(255,255,255,.14);padding-top:16px;
}
.kpi-row--grille .kpi-val{font-size:clamp(1.8rem,1.1rem + 1.5vw,2.5rem)}
.kpi-row--grille .kpi-label{font-size:.93rem;line-height:1.35;margin:.36em 0 1em}
/* La jauge se glisse entre le chiffre et son libellé plutôt qu'en pied de
   tuile : les libellés vont de une à trois lignes, une jauge calée en bas
   se retrouverait orpheline, loin du pourcentage qu'elle illustre.
   Seul l'ordre visuel change — le DOM garde chiffre puis libellé. */
.kpi-row--grille .kpi-val{order:1}
.kpi-row--grille .meter{order:2;margin:11px 0 13px;height:5px}
.kpi-row--grille .kpi-label{order:3;margin:.36em 0 0}

@media (max-width:1180px){
  .kpi-row--grille{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}
}
@media (max-width:860px){
  .kpi-row--grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px}
}
@media (max-width:620px){
  .kpi-row--grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .kpi-row--grille .kpi{padding-top:13px}
  .kpi-row--grille .kpi-val{font-size:1.65rem}
  .kpi-row--grille .kpi-label{font-size:.86rem;margin:.3em 0 .8em}
}
/* La piste réservée occupe la place sans rien affirmer. */
.meter--vide{visibility:hidden}

/* ============================================================
   94. Fiche formation — poursuite de parcours et intervenants
   Deux sections posées entre les débouchés et le financement.
   Elles restent dans la colonne de lecture : ni cartes du
   catalogue, ni encadrés, pour ne pas casser le fil de la fiche.
   ============================================================ */
.sec-sous{color:var(--muted);margin:-.35em 0 1.3em;max-width:62ch}

/* ---- Poursuite de parcours ---- */
.suite-liste{display:grid;gap:10px}
.suite-carte{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:15px 18px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;text-decoration:none;color:inherit;
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.suite-carte:hover,.suite-carte:focus-visible{
  border-color:var(--blue-400);transform:translateX(3px);
  box-shadow:0 2px 14px rgba(12,113,195,.09);
}
.suite-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.suite-txt strong{font-family:var(--font-display);font-size:1.02rem;color:var(--ink);line-height:1.3}
.suite-sous{color:var(--muted);font-size:.9rem;line-height:1.4}
.suite-meta{display:flex;align-items:center;gap:14px;flex:none;color:var(--muted)}
.suite-h{font-size:.87rem;white-space:nowrap}
.suite-fl{width:20px;height:20px;color:var(--blue-600);transition:transform .18s var(--ease)}
.suite-carte:hover .suite-fl{transform:translateX(3px)}

/* ---- Intervenants ---- */
/* Une seule colonne : la fiche a déjà une colonne de lecture étroite, et
   deux cartes côte à côte réduisaient les étiquettes de compétences à une
   par ligne. En pleine largeur, elles se rangent enfin. */
.team-liste{display:grid;gap:14px}
.team-carte{
  display:flex;gap:15px;padding:18px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
}
.team-photo{
  width:62px;height:62px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--blue-50);
}
.team-photo--vide{
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;
  font-size:1.15rem;color:var(--blue-600);letter-spacing:.02em;
}
.team-corps{min-width:0}
.team-nom{font-size:1.02rem;margin:0 0 2px}
.team-role{color:var(--blue-600);font-size:.88rem;margin:0 0 .5em;line-height:1.35}
.team-bio{color:var(--body);font-size:.92rem;line-height:1.55;margin:0 0 .7em}
/* Les compétences sont des étiquettes, pas une liste à puces. */
.team-comps{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.team-comps li{
  font-size:.79rem;line-height:1;padding:6px 10px;border-radius:99px;
  background:var(--lagoon-100);color:var(--lagoon-600);font-weight:600;
}

@media (max-width:560px){
  .suite-carte{padding:13px 15px;gap:12px}
  .suite-meta{gap:10px}
  .suite-h{display:none}          /* la durée est sur la fiche visée */
  .team-carte{padding:15px;gap:13px}
  .team-photo{width:52px;height:52px}
}

/* ============================================================
   95. Source d'un indicateur
   Un chiffre affirmé sans sa source se vérifie mal. La mention
   reste discrète — le chiffre garde le premier rôle — mais le
   lien s'ouvre vers la donnée publique qui le justifie.
   ============================================================ */
.stat-source{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin-top:.9em;font-size:.75rem;line-height:1.4;color:var(--muted);
  text-decoration:none;transition:color .18s var(--ease);
}
a.stat-source:hover,a.stat-source:focus-visible{color:var(--blue-600)}
.stat-source-logo{height:19px;width:auto;flex:none;display:block}
/* La flèche appartient à la dernière ligne du texte : posée à côté, elle
   tombait seule sur une ligne quand la colonne était étroite. */
.stat-source--lien .stat-source-txt::after{content:"\2197";margin-left:4px;opacity:.7}
a.stat-source:hover .stat-source-txt::after{opacity:1}

/* Sur le bandeau nuit de l'accueil : aligné à gauche et éclairci.
   L'ordre est explicite — la tuile réordonne ses enfants (chiffre, jauge,
   libellé), une source sans rang remonterait avant le chiffre. */
.kpi-source{order:4;align-items:flex-start;text-align:left;color:#93B2CA;margin-top:.7em}
a.kpi-source:hover,a.kpi-source:focus-visible{color:#fff}
.kpi-source .stat-source-logo{background:#fff;border-radius:5px;padding:2px 5px;height:23px}

@media (max-width:640px){
  .stat-source{font-size:.71rem;gap:5px}
  .stat-source-logo{height:17px}
}

/* ============================================================
   96. Mentions sous les repères de la fiche
   Ce que la durée ne comprend pas, et l'accessibilité. Deux
   précisions permanentes : elles n'occupent pas un emplacement
   de la ligne de repères, qui est limitée à cinq.

   Quand elles sont là, c'est à elles que revient l'espace de
   respiration du bandeau : sinon les repères le gardaient et les
   mentions tombaient tout en bas, après un grand vide.
   ============================================================ */
.fiche-facts.fiche-facts--suite{padding-bottom:0}
.fiche-mentions{
  display:flex;flex-wrap:wrap;gap:12px 30px;align-items:flex-start;
  margin-top:16px;padding-top:15px;border-top:1px solid rgba(255,255,255,.11);
  padding-bottom:clamp(30px,4vw,46px);position:relative;z-index:2;
}
.fiche-mention{
  display:flex;align-items:flex-start;gap:10px;margin:0;
  font-size:.875rem;line-height:1.55;color:#B9D3E5;max-width:62ch;
  text-decoration:none;
}
.fiche-mention-ico{width:19px;height:19px;flex:none;margin-top:.16em;color:#8FE3E6}
/* La mention accessibilité est un lien vers la section qui la détaille. */
a.fiche-mention{transition:color .18s var(--ease)}
a.fiche-mention:hover,a.fiche-mention:focus-visible{color:#fff}
a.fiche-mention--acces span{text-decoration:underline;text-decoration-color:rgba(255,255,255,.28);
  text-underline-offset:3px;transition:text-decoration-color .18s var(--ease)}
a.fiche-mention--acces:hover span{text-decoration-color:rgba(255,255,255,.8)}

/* Le bloc tarif remonte sur le bandeau : c'est la dernière chose du bandeau
   qui doit lui réserver la place, mentions comprises. */
@media (min-width:1101px){
  .fiche-mentions{padding-bottom:clamp(46px,5vw,66px)}
}
@media (max-width:700px){
  .fiche-mentions{gap:10px 20px;margin-top:14px;padding-top:13px}
  .fiche-mention{font-size:.82rem}
}

/* ============================================================
   97. Prochaines dates dans la colonne de droite
   Le tableau complet vit en bas de fiche ; peu de lecteurs y
   descendent. Les trois premières dates remontent donc dans la
   carte qui suit le défilement, juste sous le bouton de candidature.
   ============================================================ */
.tarif-sessions{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.tarif-sessions-t{
  margin:0 0 10px;font-family:var(--font-display);font-size:.74rem;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:7px;
}
/* Le rouge de l'agenda, comme la pastille de la section « Prochaines
   sessions » plus bas : c'est la meme information, elle porte la meme
   couleur d'un bout a l'autre de la fiche. */
.tarif-sessions-t svg{width:15px;height:15px;flex:none;color:var(--red-600)}
.tarif-sessions ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
/* Le lieu se range a droite tant qu'il y a la place, et descend sur sa
   propre ligne des que les deux pastilles occupent toute la largeur. */
.tarif-sessions li{font-size:.87rem;line-height:1.3}
/* La ligne entiere est le lien : la zone de clic couvre la date et le lieu,
   et deborde de quelques pixels pour que le survol se voie sans decaler
   quoi que ce soit. */
.ts-lien{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:5px 10px;margin:-6px -8px;padding:6px 8px;border-radius:12px;
  color:inherit;text-decoration:none;
  transition:background .18s var(--ease);
}
/* Le soulignement est refuse aussi au survol : la regle generale des liens
   le remet sinon, et il barrait les annees sous les mois. */
.ts-lien:hover,.ts-lien:focus-visible{background:var(--blue-50);text-decoration:none}
.ts-lien:hover .ts-lieu,.ts-lien:focus-visible .ts-lieu{color:var(--blue-600)}
.ts-lieu{
  color:var(--muted);font-size:.81rem;text-align:right;margin-left:auto;
  transition:color .18s var(--ease);
}

/* ---------- La pastille de date, partagee avec le tableau ---------- */
/* La plage ne se coupe jamais : sans cela le navigateur calcule une
   largeur minimale d'une seule pastille et la colonne du tableau se
   retrecit jusqu'a renvoyer la borne de fin a la ligne, fleche pendante.
   C'est la ligne entiere qui passe dessous si la place manque. */
.dplage{display:inline-flex;align-items:center;gap:9px;flex-wrap:nowrap}
.dpast{display:inline-flex;align-items:center;gap:9px}
.dpast-j{
  flex:none;min-width:36px;height:36px;padding:0 6px;border-radius:11px;
  border:1.5px solid var(--line);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1;
}
.dpast-my{display:flex;flex-direction:column;line-height:1.08}
.dpast-my b{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink)}
.dpast-my i{font-style:normal;font-weight:400;font-size:.84rem;color:var(--muted)}
.dplage-fl{
  width:22px;height:11px;flex:none;color:var(--muted);
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.tarif-sessions-plus{
  display:inline-block;margin-top:12px;font-size:.83rem;color:var(--blue-600);
  text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s var(--ease);
}
.tarif-sessions-plus:hover,.tarif-sessions-plus:focus-visible{border-bottom-color:currentColor}

/* ============================================================
   98. Salles et matériel sur la fiche
   Une carte par salle : la photo à gauche, le nom, le lieu et
   l'équipement à droite. Les photos supplémentaires s'ouvrent
   dans la visionneuse déjà utilisée pour les vidéos.
   ============================================================ */
.salle-liste{display:grid;gap:16px}
.salle-carte{
  display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:16px;align-items:start;
}
.salle-photo{margin:0}
.salle-voir{
  display:block;position:relative;width:100%;padding:0;border:0;background:none;
  border-radius:12px;overflow:hidden;cursor:zoom-in;line-height:0;
}
.salle-voir img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform .3s var(--ease)}
.salle-voir:hover img,.salle-voir:focus-visible img{transform:scale(1.04)}
.salle-plus{
  position:absolute;right:8px;bottom:8px;padding:4px 9px;border-radius:99px;
  background:rgba(5,34,54,.78);color:#fff;font-size:.76rem;font-weight:700;line-height:1.3;
  backdrop-filter:blur(3px);
}
.salle-corps{min-width:0;padding-top:2px}
.salle-nom{font-size:1.05rem;margin:0 0 2px}
.salle-sous{color:var(--blue-600);font-size:.86rem;margin:0 0 .6em}
.salle-desc{color:var(--body);font-size:.92rem;line-height:1.55;margin:0 0 .8em}
.salle-mat{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.salle-mat li{
  font-size:.79rem;line-height:1;padding:6px 10px;border-radius:99px;
  background:var(--blue-50);color:var(--blue-600);font-weight:600;
}

@media (max-width:620px){
  .salle-carte{grid-template-columns:1fr;gap:13px;padding:13px}
  .salle-nom{font-size:1rem}
}

/* ---------- Visionneuse de photos ----------
   Elle occupe l'écran, en trois bandes empilées : l'en-tête, la scène, les
   vignettes. La scène prend tout ce que les deux autres laissent
   (flex:1 + min-height:0, sans quoi une image haute la pousserait hors de
   l'écran), et la photo s'y centre au plus grand sans être étirée.
   C'est ce que l'ancienne version ne faisait pas : elle réutilisait la boîte
   de la modale vidéo, large de 1040 px et bâtie pour un cadre 16/9, où une
   photo verticale se posait à gauche, petite et de travers. */
.gal{
  position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;
  background:rgba(4,24,40,.94);animation:vid-fond .22s var(--ease) both;
}
.gal-tete{
  flex:none;display:flex;align-items:center;gap:14px;color:#fff;
  padding:13px clamp(14px,3vw,26px);
}
/* La couleur est redite ici : la regle generale des <strong> repeint le
   texte en bleu nuit, et le titre disparaissait sur le fond sombre. */
.gal-titre{
  flex:1;min-width:0;color:#fff;font-family:var(--font-display);font-weight:750;font-size:1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gal-compte{
  flex:none;margin:0;color:#A9C6DC;font-size:.85rem;font-variant-numeric:tabular-nums;
}
.gal-x{
  flex:none;width:38px;height:38px;display:grid;place-items:center;
  border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;
  transition:background .2s var(--ease);
}
.gal-x:hover{background:rgba(255,255,255,.3)}
.gal-x svg{width:18px;height:18px}

/* minmax(0,1fr) et non 1fr : une piste « auto » ou « 1fr » grandit avec son
   contenu, et le « 100 % » de la photo se mesurait alors sur la photo
   elle-même — une image verticale débordait de l'écran. Bornée a zero, la
   piste ne dépasse plus la scène, et la borne de l'image redevient vraie. */
.gal-scene{
  flex:1;min-height:0;position:relative;display:grid;place-items:center;
  grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  padding:0 clamp(56px,7vw,96px);
}
.gal-img{
  max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  border-radius:12px;box-shadow:0 30px 70px rgba(0,0,0,.5);
  animation:vid-boite .28s var(--ease) both;
}
.gal-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:#0D2233;display:grid;place-items:center;
  transition:background .18s var(--ease);
}
.gal-nav:hover{background:#fff}
.gal-nav svg{width:20px;height:20px}
.gal-prev{left:clamp(8px,2vw,24px)}
.gal-next{right:clamp(8px,2vw,24px)}

/* La bande de vignettes dit combien il y a de photos et où l'on en est —
   un compteur seul ne le montre pas. Elle défile si elles sont nombreuses. */
.gal-vigns{
  flex:none;display:flex;gap:8px;justify-content:center;
  padding:12px clamp(14px,3vw,26px) clamp(14px,3vw,22px);
  overflow-x:auto;scrollbar-width:none;
}
.gal-vigns::-webkit-scrollbar{display:none}
.gal-vign{
  flex:none;width:76px;height:52px;padding:0;cursor:pointer;
  border:2px solid transparent;border-radius:8px;overflow:hidden;background:#0a2436;
  opacity:.5;transition:opacity .18s var(--ease),border-color .18s var(--ease);
}
.gal-vign img{width:100%;height:100%;object-fit:cover;display:block}
.gal-vign:hover{opacity:.85}
.gal-vign[aria-current="true"]{opacity:1;border-color:#fff}

@media (max-width:620px){
  .gal-scene{padding:0 8px}
  .gal-nav{width:38px;height:38px;background:rgba(255,255,255,.82)}
  .gal-vign{width:58px;height:40px}
  .gal-titre{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
  .gal,.gal-img{animation:none}
}


/* ============================================================
   99 · PIÈCES OFFICIELLES, COFINANCEMENT ET DATE DES CHIFFRES
   Trois ajouts qui répondent tous à la même question : « d'où
   sort ce que vous affichez ? ». Le certificat Qualiopi se
   télécharge sous la mention qui l'annonce, la mention de
   cofinancement légende les logos qui la portent, et l'année de
   mise à jour date les chiffres.
   ============================================================ */

/* --- Bandeau d'accueil : le lien suit la mention, pas le sceau ---
   Sous 1100 px le sceau quitte cette ligne pour rejoindre la rangée de
   logos ; un lien posé sous lui serait resté seul au milieu du texte. */
.ht-txt{min-width:0;display:grid;gap:7px;justify-items:start}
.ht-dl{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.82rem;font-weight:700;line-height:1.3;color:#fff;
  padding:6px 12px 6px 10px;border-radius:99px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.ht-dl svg{width:15px;height:15px;flex:none}
.ht-dl:hover,.ht-dl:focus-visible{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5);color:#fff}

/* --- Le sceau suit la hauteur de son texte ---
   A 52 px fixes, il devenait un timbre a cote d'un paragraphe de trois
   lignes, et le desequilibre changeait a chaque largeur d'ecran puisque
   le texte se recompose. Il s'etire donc sur la hauteur de la ligne, sans
   se deformer (object-fit) et sans devenir une banniere (max-width).
   Seulement au-dessus de 1100 px : en dessous le sceau quitte cette ligne
   pour rejoindre la rangee de logos, ou il a sa propre taille. */
@media (min-width:1101px){
  .hero-trust{align-items:stretch}
  /* La largeur suit le rapport de l'image, jamais une valeur posee ici : le
     cadre blanc du sceau doit epouser le logo. C'est donc la hauteur qu'on
     borne, pas la largeur -- un max-width aurait rentre le logo dans un
     cadre trop haut, avec du blanc au-dessus et au-dessous. */
  .hero-trust img{height:auto;align-self:stretch;width:auto;min-height:52px;max-height:118px}
}

/* --- Mention de cofinancement, sous la vidéo et les logos ---
   Dans la carte blanche elle est sombre ; dès que la carte s'efface
   (1100 px) elle se pose sur le bandeau et doit s'éclaircir. */
.hero-cofi{
  margin:0;padding:2px 14px 10px;text-align:center;
  font-size:.78rem;line-height:1.5;color:var(--muted);
}
@media (max-width:1100px){
  .hero-cofi{
    color:#CBDEEC;text-align:left;padding:10px 0 0;
    text-shadow:0 1px 2px rgba(3,26,43,.55);
  }
}

/* --- Année de mise à jour des chiffres --- */
.chiffres-maj{
  margin:12px 0 0;text-align:center;
  font-size:.72rem;letter-spacing:.06em;color:var(--muted);
}
.chiffres-maj--clair{color:rgba(255,255,255,.5);margin-top:22px}

/* --- Pièces officielles en pied de page --- */
.footer-docs{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:7px;justify-items:start}
.footer-docs a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.86rem;line-height:1.35;color:#fff;
  padding:6px 12px 6px 10px;border-radius:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.footer-docs svg{width:16px;height:16px;flex:none;opacity:.75}
.site-footer .footer-docs a{opacity:1}
.footer-docs a:hover,.footer-docs a:focus-visible{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);color:#fff;
}

/* À six repères, la ligne du bandeau se resserre entre 760 et 1100 px.
   Un libellé coupé au milieu d'un mot (« Prochaine se… ») se lit plus mal
   qu'un libellé sur deux lignes : sous 1100 px il reprend le droit de
   passer à la ligne. */
@media (max-width:1100px){
  .fiche-facts--wide .fact small{white-space:normal;overflow:visible;line-height:1.3}
}

/* ============================================================
   Page « La mobilité Erasmus+ » — gabarit `erasmus`
   Une page de promesse : une image en grand, des scènes qui
   alternent, un trait qui se dessine, un formulaire pour finir.
   Toutes les animations se taisent sous prefers-reduced-motion.
   ============================================================ */

/* ---------- Le bandeau ---------- */
.erp-hero{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  /* Il remplit l'ecran : le fil d'Ariane en haut, le titre au milieu, les
     reperes et la fleche en bas. */
  min-height:clamp(580px,100svh,1000px);
  display:flex;flex-direction:column;
  padding:clamp(108px,13vh,152px) 0 clamp(20px,3vh,34px);
  background:linear-gradient(140deg,var(--navy-900),var(--navy-700) 58%,var(--blue-600));
}
.erp-hero-fond{
  position:absolute;inset:0;z-index:-2;background:var(--erp-img) center/cover no-repeat;
  transform:scale(1.12);
}
.erp-hero--img .erp-hero-fond::after{
  content:"";position:absolute;inset:0;
  /* Une photo claire ne doit jamais avaler le titre : la colonne de gauche
     est franchement assombrie, la droite laisse voir l'image. */
  background:
    linear-gradient(90deg,rgba(5,34,54,.94) 0%,rgba(5,34,54,.86) 30%,rgba(5,34,54,.44) 68%,rgba(5,34,54,.32) 100%),
    linear-gradient(180deg,rgba(5,34,54,.60) 0%,rgba(5,34,54,.22) 26%,rgba(5,34,54,.88) 100%);
}
.erp-hero:not(.erp-hero--img) .erp-hero-fond{display:none}
html.js-anim .erp-hero--img .erp-hero-fond{animation:erp-zoom 18s var(--ease) forwards}
@keyframes erp-zoom{from{transform:scale(1.12)}to{transform:scale(1)}}

.erp-hero-in{
  position:relative;flex:1;display:flex;flex-direction:column;
  justify-content:space-between;gap:clamp(22px,3.5vh,40px);
}
.erp-hero-bas{display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,2vh,24px);margin-top:clamp(22px,3vh,40px)}
.erp-hero-bas .erp-reperes{width:100%}
.erp-hero .breadcrumb{margin:0}
.erp-hero .breadcrumb,
.erp-hero .breadcrumb a,
.erp-hero .breadcrumb li{color:rgba(255,255,255,.76)}
.erp-hero .breadcrumb a:hover{color:#fff}

.erp-kicker{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;
  font-family:var(--font-display);font-weight:700;font-size:.92rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--blue-100);
}
.erp-pastille{
  width:9px;height:9px;border-radius:50%;background:var(--lagoon-500);flex:none;
  box-shadow:0 0 0 0 rgba(34,176,181,.7);animation:erp-pulse 2.6s ease-out infinite;
}
@keyframes erp-pulse{to{box-shadow:0 0 0 14px rgba(34,176,181,0)}}

.erp-hero-txt{max-width:700px}
@media (min-width:1000px){.erp-hero-txt{max-width:min(700px,66%)}}
.erp-titre{
  margin:0;color:#fff;font-size:clamp(2.5rem,6.6vw,4.6rem);line-height:1.02;
  letter-spacing:-.025em;font-weight:800;text-wrap:balance;
  text-shadow:0 2px 30px rgba(5,34,54,.4);
}
.erp-lede{max-width:56ch;margin-top:22px;font-size:clamp(1.03rem,1.6vw,1.2rem);line-height:1.62;color:rgba(255,255,255,.90)}
.erp-lede p{margin:0 0 .7em}
.erp-lede p:last-child{margin-bottom:0}
.erp-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* Les trois repères : du texte posé sur la photo, sans cadre. Un filet en
   haut suffit a les detacher du bouton, et le dégradé du bandeau se charge
   deja de les rendre lisibles. */
.erp-reperes{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(18px,3vw,44px);grid-template-columns:repeat(3,minmax(0,1fr));
}
.erp-repere{position:relative;padding:0;background:none;border:0}
.erp-repere > b,.erp-repere > span:not(.erp-repere-fond),.erp-repere > em{position:relative;z-index:1}
/* Les silhouettes en filigrane : presque rien, juste de quoi donner de la
   matiere au chiffre. Elles sont decoratives, donc invisibles au lecteur
   d'ecran et sans effet sur la mise en page. */
.erp-repere-fond{
  position:absolute;inset:-6px 0 -6px auto;right:0;width:100%;
  display:flex;align-items:center;justify-content:flex-end;gap:clamp(6px,1vw,14px);
  pointer-events:none;overflow:hidden;color:#fff;opacity:.11;
}
.erp-repere-fond .terr-ico{width:auto;height:clamp(40px,5.4vw,72px);max-width:34%;opacity:1;flex:none}
.erp-repere--cartes:last-child .erp-repere-fond .terr-ico{height:clamp(52px,7vw,92px);max-width:64%}
.erp-repere b{display:block;font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;line-height:1.05}
.erp-repere span{display:block;margin-top:4px;font-weight:650;font-size:.95rem;color:var(--blue-100)}
.erp-repere em{display:block;margin-top:8px;font-style:normal;font-size:.85rem;line-height:1.45;color:rgba(255,255,255,.66)}

.erp-suite{
  flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);
}
.erp-suite svg{width:20px;height:20px}
.erp-suite:hover{background:rgba(255,255,255,.22)}
html.js-anim .erp-suite{animation:erp-bas 2.4s ease-in-out infinite}
@keyframes erp-bas{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- Les scènes ---------- */
.erp-sec{padding:var(--sp-section) 0}
.erp-sec--doux{background:var(--canvas)}
/* Les titres de scene sont centres, sans numero : la page se lit comme une
   suite de chapitres, pas comme une liste numerotee. */
.erp-sec-tete{margin-bottom:clamp(28px,4vw,44px);text-align:center}
.erp-sec-tete h2{
  margin:0 auto;max-width:22ch;font-size:clamp(1.75rem,3.6vw,2.6rem);line-height:1.14;
  letter-spacing:-.02em;color:var(--ink);text-wrap:balance;
}
.erp-txt{max-width:68ch;margin-inline:auto;color:var(--body);font-size:1.03rem;line-height:1.72}
.erp-txt--centre{max-width:62ch;margin:26px auto 0;text-align:center}
.erp-txt p{margin:0 0 1.05em}
.erp-txt p:last-child{margin-bottom:0}
.erp-txt ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.erp-txt ul li{position:relative;padding-left:30px}
.erp-txt ul li::before{
  content:"";position:absolute;left:0;top:.18em;width:20px;height:20px;border-radius:50%;
  background:var(--lagoon-100) var(--coche) center/13px 13px no-repeat;
}

/* ---------- Grille de cartes ---------- */
.erp-grille{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.erp-case{
  padding:26px 24px 28px;border-radius:var(--radius-lg);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.erp-sec--doux .erp-case{background:var(--surface)}
.erp-case:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--blue-100)}
.erp-case-ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;margin-bottom:16px;
  background:var(--blue-50);color:var(--blue-600);
}
.erp-case-ico svg{width:23px;height:23px}
.erp-case h3{margin:0 0 8px;font-size:1.1rem;line-height:1.3;color:var(--ink)}
.erp-case p{margin:0;color:var(--body);font-size:.97rem;line-height:1.62}

/* ---------- La frise des etapes ----------
   Quatre reperes en quinconce, relies par un fil courbe. Pas de pastille
   autour du chiffre : un numero fin, petit, espace, et un point discret pose
   sur le fil — c'est lui qui marque l'etape. */
.erp-frise-bloc{--onde:clamp(54px,7vw,92px);position:relative;margin-top:clamp(26px,4vw,44px)}
.erp-fil{
  position:absolute;left:0;top:0;width:100%;height:calc(var(--onde) + 11px);
  color:var(--blue-100);pointer-events:none;
}
html.js-anim .erp-fil path{
  stroke-dasharray:1400;stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.9s var(--ease) .25s;
}
html.js-anim .erp-frise-bloc:has(.is-in) .erp-fil path{stroke-dashoffset:0}

.erp-frise{
  list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(16px,2vw,28px);
}
.erp-frise::before{content:none}
.erp-pas{position:relative;padding:0 2px}
/* Une etape sur deux descend : la ligne devient une vague, la lecture suit. */
.erp-pas:nth-child(even){margin-top:var(--onde)}

.erp-pas-pt{
  display:block;width:11px;height:11px;border-radius:50%;margin:0 0 16px;
  background:var(--blue-600);box-shadow:0 0 0 4px var(--surface);
}
.erp-pas-n{
  display:block;margin:0 0 6px;
  font-family:var(--font-display);font-size:.78rem;font-weight:700;
  letter-spacing:.16em;color:var(--lagoon-600);
}
.erp-pas h3{margin:0 0 7px;font-size:1.08rem;color:var(--ink);letter-spacing:-.012em}
.erp-pas p{margin:0;color:var(--body);font-size:.95rem;line-height:1.6}

@media (max-width:860px){
  /* Plus de place pour une vague : la frise se redresse. */
  .erp-frise-bloc{--onde:0px}
  .erp-fil{display:none}
  .erp-frise{grid-template-columns:1fr;gap:26px}
  .erp-pas:nth-child(even){margin-top:0}
  .erp-pas{padding-left:30px}
  .erp-pas-pt{position:absolute;left:0;top:5px;margin:0}
  /* Le fil vertical remplace la courbe, en pointille fin. */
  .erp-pas::before{
    content:"";position:absolute;left:5px;top:18px;bottom:-26px;width:1px;
    background:repeating-linear-gradient(180deg,var(--blue-100) 0 4px,transparent 4px 9px);
  }
  .erp-pas:last-child::before{content:none}
}
@media (prefers-reduced-motion:reduce){
  html.js-anim .erp-fil path{transition:none;stroke-dashoffset:0}
}

/* ---------- D'ou l'on part, et vers ou ----------
   La carte n'illustre plus le propos, elle le porte : elle occupe toute la
   largeur, tres pale, derriere le texte. Un degrade l'efface en haut et en
   bas pour qu'elle se fonde dans la page au lieu d'y etre posee.
   Le fond est un fichier a part (assets/img/monde.svg, mis en cache) ; seuls
   les vols sont en ligne. */
.erp-sec--carte{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;align-content:center;
  /* Fond blanc, quel que soit son rang dans l'alternance : la carte s'efface
     sur du blanc, et la scene se raccorde a ses voisines sans demarcation. */
  background:var(--surface);
  padding-block:clamp(96px,13vw,180px);
  /* La scene est aussi haute qu'il faut pour que les quatre territoires et
     l'Europe tiennent dans le cadre, quelle que soit la largeur d'ecran. */
  min-height:min(calc(100vw / 1.38),940px);
}
.erp-monde-cadre{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  display:grid;place-items:center;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 68%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 68%,transparent 100%);
}
.erp-monde{position:relative;width:min(100%,1500px);aspect-ratio:1200/850}
.erp-monde-fond{display:block;width:100%;height:100%;opacity:.72}
.mn-vols{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* Elle arrive en fondu, avec un souffle d'echelle : la scene s'ouvre. */
html.js-anim .erp-monde.reveal{opacity:0;transform:scale(1.06)}
html.js-anim .erp-monde.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity 1.2s var(--ease),transform 1.6s var(--ease);
}

/* Des points, pas des tirets : un bout rond sur un trait de longueur nulle.
   Fin et tres pale — le trajet se devine, il ne se lit pas. */
.mn-traces path{
  fill:none;stroke:#C3CED6;stroke-width:1.9;stroke-linecap:round;
  stroke-dasharray:0 11;opacity:.85;
}
html.js-anim .mn-traces path{stroke-dashoffset:900;transition:stroke-dashoffset 2.6s var(--ease) .5s}
html.js-anim .erp-monde.is-in .mn-traces path{stroke-dashoffset:0}

.mn-coeur{fill:var(--blue-600);opacity:.9}
.mn-onde{fill:none;stroke:var(--blue-600);stroke-width:2.4;opacity:0}
html.js-anim .mn-onde{transform-box:fill-box;transform-origin:center;animation:mn-onde 3.2s ease-out infinite}
@keyframes mn-onde{0%{transform:scale(.7);opacity:.5}100%{transform:scale(2.8);opacity:0}}

/* Gris bleu : les appareils se lisent sur la carte sans lui voler la vedette. */
.mn-avion{fill:#6E8DA6;opacity:0;offset-rotate:auto;offset-distance:0%}
html.js-anim .mn-avion{
  animation-name:mn-vole;animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes mn-vole{
  0%{offset-distance:0%;opacity:0}
  6%{opacity:.8}
  90%{opacity:.8}
  100%{offset-distance:100%;opacity:0}
}

/* Le texte passe devant : un voile clair le detache de la carte sans la
   masquer — elle reste visible tout autour. */
.erp-sec--carte > .wrap{position:relative}
.erp-sec--carte > .wrap::before{
  content:"";position:absolute;inset:-14% -10%;z-index:-1;
  background:radial-gradient(60% 52% at 50% 46%,
    rgba(246,249,252,.96) 0%,rgba(246,249,252,.86) 42%,rgba(246,249,252,0) 78%);
}
.erp-sec--carte .erp-sec-tete{margin-bottom:clamp(20px,3vw,32px)}
.erp-sec--carte .erp-sec-tete h2{font-size:clamp(1.8rem,3.8vw,2.8rem);max-width:24ch}
.erp-sec--carte .erp-txt--centre{margin-top:0}
.erp-sec--carte .erp-txt{color:var(--navy-800)}

.erp-legende{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:clamp(22px,3vw,32px) 0 0;padding:0;
}
.erp-legende li{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  font-size:.9rem;font-weight:650;color:var(--navy-800);
}
.erp-legende i{width:9px;height:9px;border-radius:50%;background:var(--blue-600);flex:none}
.erp-legende .erp-legende--but{
  color:#fff;border-color:transparent;
  background:linear-gradient(120deg,var(--blue-600),var(--lagoon-600));
}
.erp-legende .erp-legende--but i{background:#fff}

@media (max-width:760px){
  .erp-sec--carte{padding-block:clamp(70px,14vw,110px)}
  /* Sur un telephone, la carte entiere tient dans la largeur : les quatre
     territoires restent dans le cadre. Tout le reste est grossi a l'avenant,
     sinon un marqueur de 6 unites ferait deux pixels. */
  .erp-sec--carte{min-height:0}
  .erp-monde{width:100%}
  .mn-coeur{r:26}
  .mn-onde{r:32;stroke-width:9}
  .mn-avion{transform:scale(4.2)}
  .mn-traces path{stroke-width:6;stroke-dasharray:0 30}
  .erp-legende{gap:7px}
  .erp-legende li{padding:7px 13px;font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  html.js-anim .erp-monde.reveal{opacity:1;transform:none;transition:none}
  html.js-anim .mn-traces path{transition:none;stroke-dashoffset:0}
  html.js-anim .mn-onde{animation:none;opacity:.3}
  html.js-anim .mn-avion{animation:none;offset-distance:58%;opacity:.8}
}

/* ---------- Questions fréquentes ---------- */
.erp-faq{display:grid;gap:12px;max-width:820px;margin-inline:auto}
.erp-q{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  overflow:hidden;transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.erp-q[open]{border-color:var(--blue-100);box-shadow:var(--shadow-sm)}
.erp-q summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:700;color:var(--ink);
}
.erp-q summary::-webkit-details-marker{display:none}
.erp-q-plus{position:relative;flex:none;width:18px;height:18px}
.erp-q-plus::before,.erp-q-plus::after{
  content:"";position:absolute;inset:50% 0 auto;height:2px;border-radius:2px;
  background:var(--blue-600);translate:0 -50%;transition:transform .28s var(--ease);
}
.erp-q-plus::after{transform:rotate(90deg)}
.erp-q[open] .erp-q-plus::after{transform:rotate(0)}
.erp-q-rep{padding:0 22px 20px;color:var(--body);line-height:1.68}
.erp-q-rep p{margin:0 0 .8em}
.erp-q-rep p:last-child{margin-bottom:0}
html.js-anim .erp-q[open] .erp-q-rep{animation:erp-ouvre .32s var(--ease) both}
@keyframes erp-ouvre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Candidater ---------- */
.erp-cand{
  position:relative;overflow:hidden;color:#fff;
  padding:var(--sp-section) 0;
  background:linear-gradient(135deg,var(--navy-800),var(--blue-600) 62%,var(--lagoon-600));
}
.erp-cand::before{
  content:"";position:absolute;inset:auto -10% -55% auto;width:70vw;aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,255,255,.10),transparent 62%);pointer-events:none;
}
.erp-cand-in{position:relative}
.erp-cand-tete{max-width:60ch;margin:0 auto clamp(26px,4vw,40px);text-align:center}
.erp-badge{
  display:inline-block;padding:7px 15px;border-radius:999px;margin-bottom:16px;
  font-size:.8rem;font-weight:750;letter-spacing:.05em;text-transform:uppercase;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);
}
.erp-cand-tete h2{margin:0;color:#fff;font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.14;letter-spacing:-.02em;text-wrap:balance}
.erp-cand-txt{margin-top:14px}
.erp-cand-txt p,
.erp-cand-tete p{margin:14px 0 0;font-size:1.03rem;line-height:1.66;color:rgba(255,255,255,.88)}
.erp-cand-cadre{
  max-width:940px;margin:0 auto;padding:clamp(14px,2vw,24px);
  border-radius:var(--radius-xl);background:var(--surface);
  box-shadow:0 30px 70px rgba(5,34,54,.28);
}
.erp-cand-cadre .pg-form{margin:0}
.erp-cand-cadre .pg-form-secours{color:var(--muted)}
.erp-cand-vide{margin:0;padding:34px;text-align:center;color:var(--body)}

/* ---------- La mention Erasmus+ ---------- */
/* La bande de la mention : un lagon uni. Le ton est descendu d'un cran par
   rapport au lagon de marque pour que le texte blanc y passe le seuil AA
   (5,1 contre 2,6 avec #22B0B5). */
.erp-note{
  padding:clamp(44px,6vw,76px) 0 clamp(52px,7vw,84px);
  background:#0B7A7F;
  color:rgba(255,255,255,.92);
}
.erp-note-in{display:flex;align-items:flex-start;gap:22px;max-width:900px}
.erp-note-logo{flex:none;height:100px;width:auto;border-radius:6px;
  box-shadow:0 6px 22px rgba(3,20,34,.34)}
@media (max-width:760px){.erp-note-logo{height:76px}}
.erp-note h2{margin:0 0 10px;font-size:1.18rem;color:#fff}
.erp-note-txt{color:rgba(255,255,255,.92);font-size:.96rem;line-height:1.7}
.erp-note-txt strong{color:#fff}
.erp-note-txt a{color:#fff;text-decoration:underline}
.erp-note-txt p{margin:0 0 .7em}
.erp-note-txt p:last-child{margin-bottom:0}

/* ---------- Petits écrans ---------- */
@media (max-width:760px){
  .erp-hero{min-height:clamp(560px,100svh,860px);padding:clamp(92px,12vh,124px) 0 24px}
  .erp-reperes{grid-template-columns:1fr}
  .erp-repere{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .erp-repere-fond{opacity:.09}
  .erp-repere-fond .terr-ico{height:38px}
  .erp-repere b{font-size:1.4rem}
  .erp-repere span{margin-top:0}
  .erp-repere em{flex-basis:100%;margin-top:4px}
  .erp-actions .btn{flex:1 1 100%}
  .erp-suite{width:38px;height:38px}
  .erp-sec-tete{gap:12px}
  .erp-frise::before{
    left:23px;right:auto;top:24px;bottom:24px;width:2px;height:auto;
    background:linear-gradient(180deg,var(--blue-100),var(--lagoon-100));transform-origin:top;
  }
  @supports selector(:has(*)){
    html.js-anim .erp-frise::before{transform:scaleY(0)}
    html.js-anim .erp-frise:has(.is-in)::before{transform:scaleY(1)}
  }
  .erp-pas{padding-left:66px}
  .erp-pas-n{position:absolute;left:0;top:0;margin:0;width:46px;height:46px}
  .erp-note-in{flex-direction:column;gap:16px}
}

/* ---------- Moins d'animation ---------- */
@media (prefers-reduced-motion:reduce){
  html.js-anim .erp-hero--img .erp-hero-fond{animation:none;transform:scale(1)}
  .erp-pastille{animation:none}
  html.js-anim .erp-suite{animation:none}
  html.js-anim .erp-frise::before{transition:none;transform:none}
  html.js-anim .erp-trace-l{transition:none;stroke-dashoffset:0}
  html.js-anim .erp-q[open] .erp-q-rep{animation:none}
  .erp-case{transition:none}
}

/* ---------- La carte du monde sur le bandeau Erasmus+ de l'accueil ----------
   Le meme calque que la page « La mobilite Erasmus+ » — carte, trajets,
   avions — reteint en blanc et pose sur la video, entre le voile et le
   texte. Les regles arrivent apres celles de la page pour les recouvrir a
   specificite egale ; tout est prefixe par .erx-monde, la page dediee n'en
   voit rien.
   -------------------------------------------------------------------------- */
.erx-monde{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  display:grid;place-items:center;border-radius:inherit;
  /* Le masque n'efface plus que les bords. Il creusait aussi le centre, ce
     qui, a pleine opacite, donnait des continents a moitie effaces -- moins
     une transparence qu'une dechirure. Le titre est protege autrement, par
     le voile ci-dessous. */
  -webkit-mask-image:radial-gradient(94% 88% at 50% 50%,#000 0%,#000 62%,transparent 99%);
  mask-image:radial-gradient(94% 88% at 50% 50%,#000 0%,#000 62%,transparent 99%);
}
/* Un voile sombre au centre, pose sur la carte et sous le texte : c'est lui
   qui rend le titre lisible, la ou la carte est la plus chargee. Il est
   dans le calque masque, donc il s'efface avec lui sur les bords. */
.erx-monde::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(44% 36% at 50% 52%,
             rgba(5,34,54,.62) 0%,rgba(5,34,54,.34) 48%,transparent 74%);
}
.erx-monde-in{position:relative;width:min(1360px,104%);aspect-ratio:1200/850}
/* Pleine opacite : la carte devient un aplat blanc sur la video. Les pays
   Erasmus sont pleins dans le SVG, le reste du monde a moitie transparent --
   c'est ce qui fait la lecture, l'Europe se detache du reste. */
.erx-monde-fond{display:block;width:100%;height:100%;opacity:1}

.erx-monde .mn-vols{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.erx-monde .mn-traces path{
  stroke:#fff;opacity:.8;stroke-width:1.6;stroke-dasharray:0 12;stroke-dashoffset:0;
}
html.js-anim .erx-monde .mn-traces path{stroke-dashoffset:0;transition:none}
.erx-monde .mn-coeur{fill:#fff;opacity:.7}
.erx-monde .mn-onde{stroke:#fff}
html.js-anim .erx-monde .mn-onde{animation-duration:4s}
/* Les appareils gardent leur mouvement, ils changent juste d'encre. */
.erx-monde .mn-avion{fill:#fff}
html.js-anim .erx-monde .mn-avion{animation-name:erx-vole}
@keyframes erx-vole{
  0%{offset-distance:0%;opacity:0}
  8%{opacity:.92}
  88%{opacity:.92}
  100%{offset-distance:100%;opacity:0}
}

@media (max-width:760px){
  /* Au telephone la carte est agrandie de plus du double : a pleine
     opacite elle recouvrirait la video entiere. Elle redevient un fond. */
  .erx-monde-fond{opacity:.5}
  .erx-monde-in{width:210%}
  .erx-monde .mn-coeur{r:12}
  .erx-monde .mn-onde{r:15;stroke-width:5}
  .erx-monde .mn-avion{transform:scale(2.4)}
  .erx-monde .mn-traces path{stroke-width:5;stroke-dasharray:0 28}
}
@media (prefers-reduced-motion:reduce){
  html.js-anim .erx-monde .mn-avion{animation:none;offset-distance:58%;opacity:.92}
  html.js-anim .erx-monde .mn-onde{animation:none;opacity:.3}
}

/* ============================================================
   99. Le calendrier des sessions, page d'accueil
   Une formation dure trois semaines : elle ne tient pas dans une case,
   elle traverse la grille comme une barre. La couleur dit le territoire,
   c'est la seule chose qu'on lit d'un coup d'oeil sur une grille de
   quarante barres ; le nom vient ensuite, et les dates au survol.
   Sous 900 px la grille cede la place a une liste : sept colonnes de
   50 px ne laissent pas la place d'ecrire « Conseiller vendeur en
   voyages ». Les deux vues portent les memes attributs, un seul filtre
   suffit donc pour les deux.
   ============================================================ */
.cal-sec{background:linear-gradient(180deg,#fff 0%,var(--blue-50) 60%,#fff 100%)}
.cal{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;
}

/* ---------- La barre d'outils ---------- */
.cal-outils{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 20px;padding:16px clamp(14px,2vw,22px);border-bottom:1px solid var(--line-soft);
}
.cal-nav{display:flex;align-items:center;gap:6px}
.cal-fl{
  width:34px;height:34px;flex:none;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy-800);
  transition:background .18s var(--ease),border-color .18s var(--ease),opacity .18s var(--ease);
}
.cal-fl svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cal-fl:hover:not(:disabled){background:var(--blue-50);border-color:var(--blue-100)}
.cal-fl:disabled{opacity:.32;cursor:default}
.cal-mois{
  font-family:var(--font-display);font-size:1.06rem;color:var(--ink);
  min-width:9.5em;text-align:center;text-transform:capitalize;
}
.cal-filtres{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.cal-groupe{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cal-flab{
  font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-right:2px;
}
/* Une puce eteinte garde sa place et sa couleur en creux : on voit ce
   qu'on a retire, pas seulement ce qu'il reste. */
.cal-chip{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:#fff;
  font-size:.79rem;font-weight:650;color:var(--ink);line-height:1.2;
  transition:border-color .18s var(--ease),background .18s var(--ease),opacity .18s var(--ease);
}
.cal-chip:hover{border-color:var(--blue-100);background:var(--blue-50)}
.cal-chip[aria-pressed="false"]{opacity:.42;background:var(--line-soft);border-color:transparent}
.cal-chip[aria-pressed="false"] .cal-pt{background:var(--muted)}
.cal-chip--sobre[aria-pressed="true"]{border-color:var(--blue-100);background:var(--blue-50);color:var(--blue-600)}
.cal-pt{width:9px;height:9px;flex:none;border-radius:50%;background:var(--c,var(--muted))}

/* ---------- Les couleurs de territoire ----------
   Un jeton par territoire, pose sur l'element porteur : la barre, la
   pastille de legende et la puce du filtre le lisent toutes de la meme
   facon, et une nouvelle couleur se declare ici une seule fois. */
[data-terr="reunion"] {--c:#0E8F94}
[data-terr="antilles"]{--c:#E2543A}
[data-terr="hexagone"]{--c:#0C71C3}
[data-terr="distance"]{--c:#128C5E}

/* ---------- La grille ---------- */
.cal-m{padding:clamp(10px,1.6vw,18px) clamp(8px,1.6vw,18px) 4px}
.cal-entete{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);text-align:center;padding-bottom:6px;
}
.cal-sem{
  position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:3px;padding:0 0 7px;border-top:1px solid var(--line-soft);
}
/* Le week-end se teinte d'un seul aplat pose sous la grille : deux cases
   grisees par ligne auraient demande deux elements de plus par semaine. */
.cal-sem::before{
  content:"";position:absolute;top:0;bottom:0;left:calc(500%/7);right:0;
  background:var(--line-soft);opacity:.7;pointer-events:none;
}
.cal-j{
  grid-row:1;position:relative;z-index:1;padding:6px 0 4px;text-align:center;
  font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1;
}
.cal-j.is-hors{opacity:.3}
.cal-j.is-today span{
  display:inline-grid;place-items:center;width:22px;height:22px;margin:-4px 0;
  border-radius:50%;background:var(--ink);color:#fff;font-weight:700;
}
.cal-b{
  position:relative;z-index:2;min-width:0;height:25px;display:flex;align-items:center;
  padding:0 9px;border-radius:7px;background:var(--c,var(--blue-600));color:#fff;
  font-size:.75rem;font-weight:650;line-height:1;text-decoration:none;
  box-shadow:0 2px 7px rgba(5,34,54,.16);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),filter .16s var(--ease);
}
.cal-b span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* Un point marque le vrai debut de la session. Sans lui, une formation de
   trois semaines donne trois rubans identiques et on ne sait plus lequel
   ouvre : le bord plat dit « ca continue », le point dit « ca commence ». */
.cal-b.is-ouvre::before{
  content:"";flex:none;width:5px;height:5px;margin-right:7px;
  border-radius:50%;background:rgba(255,255,255,.8);
}
.cal-b:hover,.cal-b:focus-visible{transform:translateY(-1px);box-shadow:0 6px 16px rgba(5,34,54,.26);filter:saturate(1.15)}
/* Une barre qui vient de la semaine d'avant, ou qui continue la semaine
   d'apres, perd l'angle de ce cote-la et mord sur la gouttiere : le trajet
   se lit comme un seul ruban d'une ligne a l'autre. */
.cal-b:not(.is-ouvre){border-top-left-radius:2px;border-bottom-left-radius:2px;margin-left:-3px}
.cal-b:not(.is-ferme){border-top-right-radius:2px;border-bottom-right-radius:2px;margin-right:-3px}
.cal-b.is-off{display:none}

/* ---------- La liste, sous 900 px ---------- */
.cal-liste{display:none;list-style:none;margin:0;padding:0}
.cal-liste li+li{border-top:1px solid var(--line-soft)}
.cal-liste li.is-off{display:none}
.cal-liste a{
  display:flex;align-items:center;gap:12px;padding:12px 4px;text-decoration:none;color:inherit;
}
.cal-li-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.cal-li-txt strong{font-family:var(--font-display);font-size:.95rem;color:var(--ink);line-height:1.25}
.cal-li-terr{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)}
.cal-vide{margin:22px 4px 26px;text-align:center;color:var(--muted);font-size:.9rem}

/* ---------- Le pied ---------- */
.cal-pied{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;
  padding:14px clamp(14px,2vw,22px);border-top:1px solid var(--line-soft);background:var(--blue-50);
}

@media (max-width:900px){
  .cal-grille{display:none}
  .cal-liste{display:block}
  .cal-m{padding:4px clamp(12px,3vw,18px)}
  .cal-mois{min-width:0;flex:1}
  .cal-outils{gap:12px}
  .cal-filtres{width:100%}
}
@media (max-width:520px){
  .cal-flab{width:100%;margin-bottom:-2px}
}
@media (prefers-reduced-motion:reduce){
  .cal-b:hover,.cal-b:focus-visible{transform:none}
}

/* ============================================================
   100. Certifications et agréments, page d'accueil
   Une carte blanche par organisme. Le fond de la section est un dégradé
   lagon : des logos détourés en blanc y auraient tous le même poids et la
   même couleur, c'est-à-dire aucune information. Sur blanc, chaque marque
   redevient elle-même, et la carte porte en plus le nom écrit — ce qu'une
   image de logos ne donnait ni au moteur de recherche ni au lecteur
   d'écran.
   Disposition en flex plutôt qu'en grille : avec sept fiches, la dernière
   rangée est incomplète, et seule une rangée flex sait la recentrer.
   ============================================================ */
.certifs{
  list-style:none;margin:clamp(18px,2.4vw,32px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:16px;
}
.certif{flex:0 0 auto;width:calc((100% - 48px)/4);min-width:170px;max-width:280px}
.certif-in{
  height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;
  background:#fff;border-radius:16px;padding:20px 14px 17px;color:inherit;text-decoration:none;
  box-shadow:0 14px 34px rgba(3,26,43,.18);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
a.certif-in:hover,a.certif-in:focus-visible{
  transform:translateY(-3px);box-shadow:0 22px 46px rgba(3,26,43,.28);
}
/* Hauteur fixe pour la zone du logo, jamais pour le logo lui-même : le
   bandeau du ministère est presque carré, celui d'Amadeus sept fois plus
   large que haut. C'est la boîte qui aligne les fiches entre elles, le
   logo s'y inscrit au plus grand sans se déformer.
   La borne est en pixels, pas en pourcentage : sur une grille, un enfant
   plus haut que sa boîte fait grandir la rangée, et le « 100 % » se
   mesurait alors sur l'image elle-même — c'est-à-dire sur rien. */
.certif-logo{
  --h:76px;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:var(--h);margin-bottom:11px;
}
/* 88 % et non 100 : une signature large comme celle d'Amadeus touchait
   les deux bords de la fiche quand un logo carre en occupait le tiers. */
.certif-logo img{max-width:88%;max-height:var(--h);width:auto;height:auto}
.certif strong{font-family:var(--font-display);font-size:.9rem;color:var(--ink);line-height:1.25}
.certif span{font-size:.76rem;color:var(--muted);line-height:1.4}

@media (max-width:1040px){
  .certif{width:calc((100% - 32px)/3)}
}
@media (max-width:680px){
  .certif{width:calc((100% - 12px)/2);min-width:0}
  .certifs{gap:12px}
  .certif-in{padding:16px 10px 14px;border-radius:14px}
  .certif-logo{--h:54px;margin-bottom:9px}
  .certif strong{font-size:.82rem}
  .certif span{font-size:.71rem}
}
@media (prefers-reduced-motion:reduce){
  a.certif-in:hover,a.certif-in:focus-visible{transform:none}
}

/* --- Sceau Qualiopi du bandeau d'accueil (septembre 2026) ---
   Plus petit, et la mention avec son bouton de téléchargement se placent à
   sa droite au lieu de passer dessous. Grand écran seulement : en dessous
   de 1100 px, le sceau rejoint déjà la rangée de logos. */
@media (min-width:1101px){
  .hero-trust{flex-wrap:nowrap;align-items:center;gap:18px}
  .hero-trust img{height:78px;min-height:0;max-height:none;width:auto;align-self:center;flex:none;padding:8px}
  .hero-trust .ht-txt{flex:1 1 auto;max-width:46ch}
  .hero-trust p{max-width:none}
}