/* ==========================================================================
   Thalass'Sun Formation — Dunkerque
   Charte tirée du logo : le halo solaire (ambre → pêche → corail) sur un
   fond crème, et un noir chaud pour le texte. Typographie Jost, géométrique
   et fine, choisie pour répondre au dessin du logotype.

   Aucune ressource externe : polices hébergées en local, pas de bibliothèque
   JavaScript, pas de mesure d'audience. Le site ne dépose aucun cookie —
   c'est ce qu'affirment les mentions légales, autant que ce soit vrai.
   ========================================================================== */

/* Jost, hébergé en local : aucun appel à Google au chargement d'une page.
   Les deux sous-ensembles sont déclarés avec leur unicode-range — le navigateur
   ne télécharge `latin-ext` que si un caractère l'exige (œ, par exemple). */
@font-face { font-family:'Jost'; font-style:normal; font-weight:300; font-display:swap;
  src:url('polices/jost-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Jost'; font-style:normal; font-weight:300; font-display:swap;
  src:url('polices/jost-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap;
  src:url('polices/jost-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap;
  src:url('polices/jost-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Jost'; font-style:normal; font-weight:600; font-display:swap;
  src:url('polices/jost-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Jost'; font-style:normal; font-weight:600; font-display:swap;
  src:url('polices/jost-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  /* Le halo du logo, décomposé */
  --ambre:   #FFD3A0;
  --peche:   #FBA26C;
  --corail:  #F0705C;
  --rose:    #F9CFC6;

  --nuit:    #14100E;   /* noir chaud, comme le cercle du logo */
  --nuit-2:  #4A403A;
  --gris:    #8B8079;
  --creme:   #FDFAF7;
  --creme-2: #F7F0E9;
  --blanc:   #FFFFFF;
  --trait:   #EBE1D8;

  --halo: radial-gradient(circle at 50% 50%,
            var(--ambre) 0%, var(--peche) 32%, var(--corail) 55%,
            rgba(249,207,198,.45) 74%, rgba(255,255,255,0) 78%);
  --degrade: linear-gradient(115deg, var(--ambre), var(--peche) 48%, var(--corail));

  --r: 4px;
  --r-lg: 22px;
  --ombre: 0 1px 2px rgba(20,16,14,.04), 0 12px 40px rgba(20,16,14,.07);
  --ombre-forte: 0 2px 6px rgba(20,16,14,.06), 0 28px 70px rgba(20,16,14,.14);

  --police: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --large: 1240px;
  --marge: clamp(20px, 5vw, 56px);
  --entete-h: 78px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--nuit);
  font-family: var(--police);
  font-weight: 400;
  font-size: clamp(16px, 1.05vw, 17.5px);
  line-height: 1.7;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.zone { width: 100%; max-width: var(--large); margin: 0 auto; padding: 0 var(--marge); }
.etroit { max-width: 860px; }

/* ---------------------------------------------------------------- typographie
   Le logotype est une capitale fine très espacée : les grands titres reprennent
   cette respiration (poids 300, interlettrage négatif compensé par la taille). */
h1, h2, h3, .grand { font-weight: 300; line-height: 1.04; letter-spacing: -.03em; margin: 0 0 .4em; }
h1, .t1 { font-size: clamp(2.9rem, 8.5vw, 6.6rem); }
h2, .t2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h3, .t3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); letter-spacing: -.015em; }

.oeil {                       /* surtitre : capitales espacées, comme sous le logo */
  font-size: .72rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .28em; color: var(--corail); margin: 0 0 1.6em;
  display: flex; align-items: center; gap: 14px;
}
.oeil::before { content: ""; width: 30px; height: 1px; background: currentColor; flex: none; }

.chapo { font-size: clamp(1.05rem, 1.5vw, 1.28rem); font-weight: 300;
  line-height: 1.55; color: var(--nuit-2); max-width: 52ch; }
.mention { font-size: .82rem; color: var(--gris); letter-spacing: .01em; }

em.souligne { font-style: normal; background: var(--degrade);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --------------------------------------------------------------------- entête */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--entete-h);
  display: flex; align-items: center;
  transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.entete.pose { background: rgba(253,250,247,.86); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 var(--trait); }
.entete .zone { display: flex; align-items: center; gap: 24px; }

.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
/* Le fichier du logo est sur fond blanc opaque : `multiply` fait disparaître ce
   blanc sur les fonds clairs, sans avoir à détourer l'image. */
.logo img { width: 42px; height: 42px; mix-blend-mode: multiply; }
.logo-texte { line-height: 1.15; }
.logo-texte b { display: block; font-weight: 400; font-size: 1.04rem; letter-spacing: .17em; }
.logo-texte span { display: block; font-size: .58rem; text-transform: uppercase;
  letter-spacing: .24em; color: var(--gris); }

.menu { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.menu a { text-decoration: none; font-size: .88rem; font-weight: 400; letter-spacing: .04em;
  padding: 10px 15px; border-radius: 999px; color: var(--nuit-2); transition: color .2s, background .2s; }
.menu a:hover { color: var(--nuit); background: var(--creme-2); }
.menu a[aria-current="page"] { color: var(--nuit); font-weight: 500; }

.brulure { display: none; }   /* bouton menu mobile, activé plus bas */

/* -------------------------------------------------------------------- boutons */
.btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-size: .92rem; font-weight: 500; letter-spacing: .05em; padding: 15px 30px;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .25s, color .25s; }
.btn:hover { transform: translateY(-2px); }
.btn::after { content: "→"; font-size: .95em; transition: transform .25s; }
.btn:hover::after { transform: translateX(4px); }
.btn-plein { background: var(--nuit); color: var(--creme); }
.btn-plein:hover { box-shadow: var(--ombre-forte); }
.btn-soleil { background: var(--degrade); color: var(--nuit); }
.btn-soleil:hover { box-shadow: 0 18px 44px rgba(240,112,92,.34); }
.btn-vide { border-color: var(--trait); color: var(--nuit); }
.btn-vide:hover { border-color: var(--nuit); }
/* Version compacte, pour le bouton d'inscription répété sur chaque ligne du catalogue. */
.btn-mini { padding: 9px 18px; font-size: .82rem; gap: 7px; }
/* Lien vers la fiche officielle : discret, il ne doit pas concurrencer le bouton. */
.lien-fiche { font-size: .82rem; color: var(--nuit-2); text-decoration: none;
  border-bottom: 1px solid var(--trait); padding-bottom: 2px; white-space: nowrap; }
.lien-fiche:hover { color: var(--nuit); border-color: var(--nuit); }
.lien-fiche::after { content: " ↗"; font-size: .9em; }
.btn-clair { border-color: rgba(253,250,247,.3); color: var(--creme); }
.btn-clair:hover { border-color: var(--creme); background: rgba(253,250,247,.08); }

/* ----------------------------------------------------------------------- héros */
.heros { position: relative; padding: calc(var(--entete-h) + clamp(60px, 11vh, 130px)) 0 clamp(70px, 12vh, 140px);
  overflow: hidden; }
/* Le halo du logo, repris en très grand format derrière le titre. */
.heros::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(105vw, 1000px); aspect-ratio: 1; right: -18vw; top: -22vh;
  background: var(--halo); opacity: .58; filter: blur(14px);
}
.heros .zone { position: relative; z-index: 1; }
.heros-marque { width: clamp(96px, 12vw, 132px); margin-bottom: clamp(26px, 4vh, 46px);
  mix-blend-mode: multiply; }
.heros h1 { max-width: 15ch; }
.heros .chapo { margin-top: clamp(22px, 3vh, 34px); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(30px, 4.5vh, 46px); }

/* ------------------------------------------------------------------- bandeau
   Défilement horizontal des mots-clés. Coupé si l'utilisateur a demandé moins
   d'animations — c'est un ornement, il ne porte aucune information. */
.ruban { border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
  padding: 20px 0; overflow: hidden; background: var(--creme); }
.ruban-piste { display: flex; width: max-content; gap: 54px; animation: defile 42s linear infinite; }
.ruban span { font-size: .82rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--nuit-2); display: flex; align-items: center; gap: 54px; white-space: nowrap; }
.ruban span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--corail); }
@keyframes defile { to { transform: translateX(-50%); } }

/* -------------------------------------------------------------------- sections */
.bloc { padding: clamp(70px, 11vh, 140px) 0; position: relative; }
.bloc-creme { background: var(--creme-2); }
.bloc-nuit { background: var(--nuit); color: var(--creme); }
.bloc-nuit h2, .bloc-nuit h3 { color: var(--creme); }
.bloc-nuit .chapo { color: rgba(253,250,247,.72); }
.bloc-nuit .oeil { color: var(--ambre); }

.entete-bloc { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 26px; margin-bottom: clamp(40px, 6vh, 72px); }
.entete-bloc > div { max-width: 60ch; }

/* ------------------------------------------------------------- pôles numérotés
   Grandes lignes éditoriales plutôt que des cartes : le regard descend, chaque
   pôle occupe toute la largeur, le survol révèle l'accent. */
.poles { border-top: 1px solid var(--trait); }
.pole { display: grid; grid-template-columns: 74px 116px 1fr auto; align-items: center; gap: clamp(14px, 2.4vw, 38px);
  padding: clamp(26px, 4vh, 42px) 0; border-bottom: 1px solid var(--trait);
  text-decoration: none; position: relative; transition: padding-left .35s cubic-bezier(.2,.7,.3,1); }
.pole::before { content: ""; position: absolute; inset: 0; background: var(--degrade);
  opacity: 0; transition: opacity .35s; z-index: -1; }
.pole:hover { padding-left: 22px; }
.pole:hover .pole-num { color: var(--corail); }
.pole:hover .pole-fleche { transform: translateX(6px); border-color: var(--nuit); }
.pole-num { font-size: .78rem; letter-spacing: .2em; color: var(--gris); font-weight: 500; transition: color .3s; }
.pole-titre { font-size: clamp(1.5rem, 3.4vw, 2.5rem); font-weight: 300; letter-spacing: -.025em; line-height: 1.1; }
.pole-detail { display: block; font-size: .92rem; color: var(--nuit-2); margin-top: 10px; max-width: 62ch;
  letter-spacing: 0; line-height: 1.6; }
.pole-fleche { width: 46px; height: 46px; border: 1px solid var(--trait); border-radius: 50%;
  display: grid; place-items: center; font-size: 1rem; transition: transform .35s, border-color .35s; flex: none; }

/* Vignette de chaque pôle : en gris par défaut, elle prend ses couleurs au survol.
   Le même traitement que les logotypes partenaires, pour que la page garde son
   calme et que la couleur ne surgisse qu'à l'endroit regardé. */
.pole-vue { width: 116px; height: 78px; object-fit: cover; border-radius: 10px;
  filter: grayscale(1) contrast(.95); opacity: .85; transition: filter .4s, opacity .4s, transform .4s; }
.pole:hover .pole-vue { filter: none; opacity: 1; transform: scale(1.03); }

/* Bandeau illustré en tête de chaque pôle, sur la page catalogue. */
.banniere { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: var(--rayon-lg, 22px);
  border-radius: 22px; margin-bottom: clamp(30px, 5vh, 54px); }

/* --------------------------------------------------------------------- vidéo
   `preload="none"` : rien n'est téléchargé tant que la vidéo n'est pas visible,
   l'affiche (poster) suffit à occuper la place. Sans son, en boucle, et mise en
   pause si l'utilisateur a demandé moins d'animations (voir site.js). */
.video-cadre { position: relative; border-radius: 22px; overflow: hidden; background: var(--creme-2); }
.video-cadre video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video-legende { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 4vw, 40px);
  background: linear-gradient(to top, rgba(20,16,14,.72), rgba(20,16,14,0));
  color: var(--creme); }
.video-legende p { margin: 0; font-size: .92rem; max-width: 46ch; }
.video-legende strong { display: block; font-size: clamp(1.2rem, 2.4vw, 1.8rem); font-weight: 300;
  letter-spacing: -.02em; margin-bottom: 6px; }

/* --------------------------------------------------------------------- chiffres */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2px;
  background: var(--trait); border: 1px solid var(--trait); border-radius: var(--r-lg); overflow: hidden; }
.chiffre { background: var(--creme); padding: clamp(26px, 4vw, 40px) 26px; }
.chiffre b { display: block; font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 300; letter-spacing: -.03em;
  line-height: 1; margin-bottom: 12px; }
.chiffre span { font-size: .86rem; color: var(--nuit-2); line-height: 1.5; display: block; }
.bloc-creme .chiffre { background: var(--creme-2); }

/* ------------------------------------------------------------------------ cartes */
.grille { display: grid; gap: clamp(16px, 2.2vw, 26px); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 38px); transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; }
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
.carte h3 { margin-bottom: .5em; }
.carte p:last-child { margin-bottom: 0; }
.carte-soleil { background: var(--degrade); border-color: transparent; }
.bloc-nuit .carte { background: rgba(253,250,247,.05); border-color: rgba(253,250,247,.14); }

/* ------------------------------------------------------------- liste formations */
.liste { border-top: 1px solid var(--trait); }
.ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px;
  padding: 20px 0; border-bottom: 1px solid var(--trait); }
.ligne-nom { font-size: 1.08rem; font-weight: 400; flex: 1 1 280px; }
.ligne-nom small { display: block; font-size: .82rem; color: var(--gris); margin-top: 3px; }
.ligne-duree { font-size: .92rem; color: var(--nuit-2); flex: 1 1 220px; }
.puce { font-size: .68rem; font-weight: 500; text-transform: uppercase; letter-spacing: .14em;
  padding: 5px 13px; border-radius: 999px; border: 1px solid var(--trait); white-space: nowrap; }
.puce-soleil { background: var(--degrade); border-color: transparent; }

/* ------------------------------------------------------------------- encadrés */
.note { border-left: 2px solid var(--corail); padding: 4px 0 4px 22px; margin: 30px 0; }
.note p:first-child { margin-top: 0; } .note p:last-child { margin-bottom: 0; }

/* Ce que seul le centre peut fournir. Volontairement très visible : mieux vaut
   un manque évident qu'une mention fausse héritée d'un autre établissement. */
.a-completer { background: #FFF3D0; border: 1px dashed #C9930B; color: #6B4B00;
  padding: 2px 9px; border-radius: var(--r); font-size: .9em; }

/* --------------------------------------------------------------------- tableaux */
.tableau { overflow-x: auto; margin: 30px 0; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 520px; }
th, td { text-align: left; padding: 15px 16px; border-bottom: 1px solid var(--trait); vertical-align: top; }
th { font-weight: 500; font-size: .74rem; text-transform: uppercase; letter-spacing: .16em; color: var(--gris); }

/* ------------------------------------------------------------------- logotypes */
.labels { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 64px); }
.labels img { height: 54px; width: auto; opacity: .8; mix-blend-mode: multiply;
  filter: grayscale(1); transition: opacity .3s, filter .3s; }
.labels img:hover { opacity: 1; filter: grayscale(0); }

/* ----------------------------------------------------------------- formulaire */
.champ { display: block; margin-bottom: 22px; }
.champ span { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--gris); margin-bottom: 9px; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 14px 0; font: inherit; font-size: 1rem; color: var(--nuit);
  border: 0; border-bottom: 1px solid var(--trait); background: transparent; border-radius: 0; }
.champ textarea { min-height: 120px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 0; border-bottom-color: var(--corail); }
.coord { margin: 0; }
.coord dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--gris); margin-bottom: 6px; }
.coord dd { margin: 0 0 22px; }
.coord dd a { text-decoration: none; border-bottom: 1px solid var(--trait); }
.coord dd a:hover { border-color: var(--corail); }

/* ------------------------------------------------------------------ appel final */
.appel { background: var(--degrade); border-radius: var(--r-lg); padding: clamp(40px, 7vw, 80px);
  text-align: center; }
.appel h2 { max-width: 18ch; margin-inline: auto; }
.appel .chapo { margin-inline: auto; }

/* ------------------------------------------------------------------------- pied */
.pied { background: var(--nuit); color: rgba(253,250,247,.66); padding: clamp(60px, 9vh, 100px) 0 30px; }
.pied a { color: rgba(253,250,247,.66); text-decoration: none; transition: color .2s; }
.pied a:hover { color: var(--creme); }
.pied h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .2em; color: var(--creme);
  font-weight: 500; margin-bottom: 20px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 10px; font-size: .93rem; }
/* Le logo est sur fond blanc : sur le pied sombre, `multiply` ne suffit pas —
   on le pose sur une pastille claire plutôt que de livrer un carré blanc. */
.pied-logo { width: 62px; border-radius: 50%; background: var(--creme); padding: 6px; margin-bottom: 22px; }
.pied-bas { border-top: 1px solid rgba(253,250,247,.13); margin-top: clamp(40px, 6vh, 64px); padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: space-between; font-size: .82rem; }

/* --------------------------------------------------------- apparition au défilé */
.venir { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.venir.vu { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ accessibilité */
:focus-visible { outline: 2px solid var(--corail); outline-offset: 3px; border-radius: var(--r); }
.saut { position: absolute; left: -9999px; }
/* Lu par les lecteurs d'écran seulement : 52 boutons « S'inscrire » identiques ne disent
   pas à quelle formation ils mènent, le nom est donc répété ici. */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.saut:focus { left: var(--marge); top: 14px; z-index: 100; background: var(--nuit); color: var(--creme);
  padding: 12px 20px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }
  .venir { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------------ mobile */
@media (max-width: 900px) {
  :root { --entete-h: 66px; }
  .menu { position: fixed; inset: var(--entete-h) 0 auto; flex-direction: column; align-items: stretch;
    background: var(--creme); padding: 18px var(--marge) 30px; gap: 2px;
    border-bottom: 1px solid var(--trait); transform: translateY(-130%);
    transition: transform .4s cubic-bezier(.2,.7,.3,1); }
  .menu.ouvert { transform: none; }
  .menu a { padding: 14px 0; font-size: 1.06rem; border-radius: 0; }
  .menu a:hover { background: transparent; }
  .brulure { display: grid; place-items: center; margin-left: auto; width: 44px; height: 44px;
    background: transparent; border: 1px solid var(--trait); border-radius: 50%; cursor: pointer; }
  .brulure b { display: block; width: 16px; height: 1px; background: var(--nuit); position: relative; }
  .brulure b::before, .brulure b::after { content: ""; position: absolute; left: 0; width: 16px; height: 1px;
    background: var(--nuit); transition: transform .3s; }
  .brulure b::before { top: -5px; } .brulure b::after { top: 5px; }
  .brulure[aria-expanded="true"] b { background: transparent; }
  .brulure[aria-expanded="true"] b::before { transform: translateY(5px) rotate(45deg); }
  .brulure[aria-expanded="true"] b::after { transform: translateY(-5px) rotate(-45deg); }

  .pole { grid-template-columns: 84px 1fr auto; gap: 14px; }
  .pole-num { grid-column: 1 / -1; }
  .pole-vue { width: 84px; height: 62px; }
  .pole:hover { padding-left: 0; }
  /* Sur un écran étroit la vidéo occupe une bande plus haute, sinon elle
     se réduit à un filet illisible. */
  .video-cadre video { aspect-ratio: 4 / 3; }
}

@media print {
  .entete, .menu, .actions, .pied, .ruban { display: none; }
  body { background: #fff; font-size: 11pt; }
  .heros::before { display: none; }
}

/* --- Fiches formation (une page par formation) --- */
.fiche-puces { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
/* Fil d'ariane dans le surtitre du héros : « Formations · Pôle » */
.heros .oeil a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--trait); }
.heros .oeil a:hover { border-color: currentColor; }
/* En-tête de journée dans le programme */
.prog-jour { margin: 1.7em 0 .5em; font-size: 1.05rem; color: var(--corail); }
.prog-jour:first-child { margin-top: 0; }
/* Case à cocher (consentement RGPD) : la case à gauche, le libellé à droite. */
.champ-case { display: flex; align-items: flex-start; gap: 12px; flex-direction: row; }
.champ-case input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--corail); }
.champ-case span { font-size: .92rem; }