/* ═══════════════════════════════════════════════════════════════════════════
   MARINE PROFOND, structure en sept blocs
   Le système visuel retenu (bleu poussé vers l'encre, jaune vif, Archivo +
   JetBrains Mono, rail lumineux, chiffres en monospace) appliqué à la
   séquence : hero · chiffres · loi · formations · Säfeli · articles · FAQ.
   Fichier autonome : ne dépend pas de tokens.css ni des autres versions.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* Charte Säfeli */
  --navy:#233862; --grey:#808CA3; --grey-light:#EEF0F3;

  /* Marine profond */
  --bg:#0D1830; --bg-alt:#101E3A; --surface:#16294C;
  --card:#152747; --card-hi:#1B3159;
  --text:#EEF0F3; --text-2:#A2B2CE; --text-3:#93A5C4;
  --line:#24406E; --line-hi:#33528A;
  --action-bg:#EEF0F3; --action-text:#0D1830;
  --accent:#FFD84D;
  --open:#5FD79B; --soon:#FFA83B; --full:#FF7A80;

  --f-d:"Archivo",system-ui,-apple-system,sans-serif;
  --f-m:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  --t-display:clamp(2.375rem,5.2vw,4.25rem);
  --t-h2:clamp(1.75rem,3.2vw,2.625rem);
  --t-lead:clamp(1.0625rem,1.5vw,1.25rem);

  --wrap:1200px; --wrap-n:880px;
  --header-h:70px;
  --sec-y:clamp(4rem,8vw,7rem);
  --radius:4px; --radius-lg:10px;
  --ease:cubic-bezier(.22,.61,.36,1); --dur:220ms; --dur-f:140ms;
}
@media (prefers-reduced-motion:reduce){:root{--dur:0ms;--dur-f:0ms}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 17px/1.65 var(--f-d);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--grey-light);outline-offset:3px;border-radius:2px}
button{font:inherit;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-n{max-width:var(--wrap-n);margin:0 auto;padding:0 24px}
.sec{padding:var(--sec-y) 0;position:relative}
.sec--alt{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec--surf{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Règle typographique unique : tout chiffre vérifiable est en monospace. */
.num{font-family:var(--f-m);font-weight:500;font-feature-settings:"tnum" 1}
.label{font-family:var(--f-m);font-size:.71875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
/* L'accent ne colore que du texte, jamais un aplat : les pastilles d'état
   restent les seules formes pleines colorées de la page. */
.ac{color:var(--accent);font-style:normal;font-weight:600}

.h2{font-size:var(--t-h2);font-weight:700;letter-spacing:-.03em;line-height:1.08;margin:0 0 1.25rem;text-wrap:balance}
.h3{font-size:1.1875rem;font-weight:600;letter-spacing:-.015em;line-height:1.28;margin:0 0 .5rem}
.lead{font-size:var(--t-lead);line-height:1.6;color:var(--text-2);margin:0;max-width:58ch}
p{margin:0 0 1rem;color:var(--text-2);max-width:64ch}
p:last-child{margin-bottom:0}
p strong{color:var(--text);font-weight:600}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;
  padding:.8125rem 1.5rem;border:1px solid transparent;border-radius:var(--radius);
  background:var(--action-bg);color:var(--action-text);text-decoration:none;
  font:600 15px/1 var(--f-d);letter-spacing:-.005em;
  transition:opacity var(--dur-f) var(--ease),transform var(--dur-f) var(--ease);
}
.btn:hover{opacity:.88}
.btn:active{transform:translateY(1px)}
.btn--o{background:transparent;color:var(--text);border-color:var(--line-hi)}
.btn--o:hover{border-color:var(--text-2);opacity:1}
.btn--sm{min-height:38px;padding:.5rem 1rem;font-size:13px}
.btn--w{width:100%}

/* ── Rail : signature ────────────────────────────────────────────────────
   Un trait d'un pixel dans la marge, qui s'éclaire au défilement. C'est le
   trajet du faisceau à travers la page.                                    */
.rail{position:fixed;left:max(1.25rem,calc((100vw - var(--wrap))/2 - 2.25rem));top:0;bottom:0;width:1px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);z-index:5;pointer-events:none;display:none}
.rail__f{position:absolute;top:0;left:0;width:100%;height:0;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 70%,transparent) 12%,color-mix(in srgb,var(--accent) 70%,transparent))}
/* La tête du faisceau : un point lumineux qui descend avec le défilement. */
.rail__f::after{content:"";position:absolute;left:-3px;bottom:-3.5px;width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px 2px color-mix(in srgb,var(--accent) 60%,transparent)}
.rail__t{position:absolute;left:0;width:11px;height:1px;background:color-mix(in srgb,var(--accent) 32%,transparent);
  transition:width var(--dur) var(--ease),background var(--dur) var(--ease)}
.rail__t.hit{width:20px;background:var(--accent)}
@media (min-width:1180px){.rail{display:block}}
@media (prefers-reduced-motion:reduce){.rail__f{height:100% !important;opacity:.3}.rail__f::after{display:none}}

/* ── Header ─────────────────────────────────────────────────────────── */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header-h);display:flex;align-items:center;
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease)}
.hdr[data-on="true"]{border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:2rem;width:100%}
.hdr__logo{font-weight:700;font-size:1.0625rem;letter-spacing:-.025em;text-decoration:none;display:flex;align-items:baseline;gap:.5rem;flex-shrink:0}
.hdr__logo span{font-family:var(--f-m);font-size:.625rem;font-weight:400;letter-spacing:.16em;color:var(--text-3);text-transform:uppercase}
.nav{display:none;margin-left:auto;align-items:center;gap:1.75rem}
.nav>*{position:relative}
.nav a{font-size:14.5px;color:var(--text-2);text-decoration:none;white-space:nowrap;transition:color var(--dur-f)}
.nav a:hover{color:var(--text)}
.nav__t{display:flex;align-items:center;gap:.35rem;font-size:14.5px;color:var(--text-2);background:none;border:0;padding:0}
.nav__t::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.nav__d{position:absolute;top:calc(100% + 16px);left:-16px;min-width:250px;padding:.5rem;
  background:var(--card-hi);border:1px solid var(--line-hi);border-radius:var(--radius-lg);
  box-shadow:0 18px 44px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:all var(--dur) var(--ease)}
.nav__i:hover .nav__d,.nav__i:focus-within .nav__d,.nav__i.is-open .nav__d{opacity:1;visibility:visible;transform:none}
.nav__d a{display:block;padding:.5625rem .75rem;border-radius:6px;font-size:14px}
.nav__d a:hover{background:rgba(238,240,243,.07)}
.nav__d b{display:block;font-weight:600;color:var(--text)}
.nav__d i{font-style:normal;font-size:12px;color:var(--text-3)}
.hdr__cta{margin-left:auto;flex-shrink:0}
@media (min-width:1020px){.nav{display:flex}.hdr__cta{margin-left:1rem}}

/* Rappel de session au défilement */
.recall{position:fixed;top:var(--header-h);left:0;right:0;z-index:49;background:var(--surface);
  border-bottom:1px solid var(--line);transform:translateY(-105%);transition:transform var(--dur) var(--ease)}
.recall[data-on="true"]{transform:none}
.recall__in{display:flex;align-items:center;gap:1rem;padding:.5625rem 0;flex-wrap:wrap}
.recall__d{font-family:var(--f-m);font-weight:500;font-size:.71875rem;letter-spacing:.06em}
.recall__s{width:1px;height:14px;background:var(--line-hi)}
.recall__p{font-family:var(--f-m);font-size:.71875rem;color:var(--text-2);letter-spacing:.02em}
.recall a{margin-left:auto;font-family:var(--f-m);font-size:.71875rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid var(--line-hi);padding-bottom:2px}
@media (max-width:1019px){.recall{display:none}}

/* ── 1 · Hero ───────────────────────────────────────────────────────── */
/* Le titre tenant désormais en deux lignes, une hauteur minimale garde à la
   photographie l'espace qui fait du hero une ouverture et non un bandeau. */
.hero{position:relative;overflow:hidden;display:flex;align-items:flex-end;
  min-height:min(86svh,820px);
  padding-top:calc(var(--header-h) + clamp(3rem,6vw,5rem));padding-bottom:clamp(4.5rem,9vw,7.5rem)}
.hero__in{width:100%}
/* Profondeur : l'image est plus grande que son cadre et se déplace plus
   lentement que la page. Le hero devient un espace, pas un fond plat. */
.hero__bg{position:absolute;inset:-8% 0 -14% 0;z-index:0;will-change:transform}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:70% center;opacity:.68;
  transform:scale(1.08);animation:heroIn 2.2s var(--ease) forwards}
@keyframes heroIn{to{transform:scale(1)}}
.hero__v{position:absolute;inset:0;background:
  linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 92%,transparent) 34%,color-mix(in srgb,var(--bg) 38%,transparent) 68%,color-mix(in srgb,var(--bg) 62%,transparent) 100%),
  linear-gradient(0deg,var(--bg) 2%,transparent 44%)}
.hero__in{position:relative;z-index:1}
/* L'accroche devient une pastille : même filet tracé qu'avant, mais le texte
   est désormais porté par un cadre accentué au lieu d'être un murmure gris. */
.hero__k{margin:0 0 1.75rem;display:flex;align-items:center;gap:.875rem;flex-wrap:wrap}
.hero__k::before{content:"";width:26px;height:1px;background:var(--accent);flex-shrink:0}
.hero__k span{
  font-family:var(--f-m);font-size:.8125rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);padding:.4375rem .8125rem;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  backdrop-filter:blur(4px);
}
@media (max-width:520px){.hero__k span{font-size:.71875rem;letter-spacing:.08em}}
.hero h1{font-size:var(--t-display);font-weight:700;letter-spacing:-.038em;line-height:1.03;margin:0 0 1.5rem;max-width:19ch;text-wrap:balance}
.hero__s{max-width:52ch;margin:0 0 2rem;font-size:var(--t-lead);line-height:1.6;color:var(--text-2)}
.hero__c{display:flex;gap:.75rem;flex-wrap:wrap}
/* ── Séquence d'ouverture ────────────────────────────────────────────────
   Un seul moment orchestré : le filet du kicker se trace, puis chaque
   élément monte à son tour, puis les mots accentués « s'allument ».
   C'est le seul endroit de la page où l'animation raconte quelque chose. */
.hero__in > *{animation:rise .7s var(--ease) both}
.hero__in > *:nth-child(1){animation-delay:.10s}
.hero__in > *:nth-child(2){animation-delay:.22s}
.hero__in > *:nth-child(3){animation-delay:.36s}
.hero__in > *:nth-child(4){animation-delay:.48s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero__k::before{transform-origin:0 50%;animation:draw .6s var(--ease) .18s both}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Les mots accentués arrivent en blanc et virent au jaune : le faisceau
   s'allume après que la phrase est posée. */
.hero .ac{color:var(--text);animation:acOn .55s var(--ease) 1.05s forwards}
@keyframes acOn{
  0%{color:var(--text);text-shadow:none}
  55%{color:var(--accent);text-shadow:0 0 18px color-mix(in srgb,var(--accent) 55%,transparent)}
  100%{color:var(--accent);text-shadow:none}
}

/* Lueur néon continue sur « sécurité laser » : le halo respire lentement,
   comme un tube qui monte et redescend en intensité. Rien d'autre que du
   text-shadow, la couleur du texte n'est jamais touchée, donc aucun risque
   de mot invisible. Le script se contente de poser .lit une fois l'allumage
   terminé ; sans lui, le mot reste simplement jaune et fixe. */
/* La couleur du mot fait partie du battement : elle se sature vers l'or au
   pic au lieu de blanchir, et redescend sur le jaune de charte sans jamais
   s'en éloigner. Les halos sont posés en jaunes chauds explicites, un
   mélange vers le transparent tirait vers le blanc à forte opacité.
   `color` est redéclaré ici : la règle .lit remplace l'animation d'allumage,
   dont le `forwards` ne tient donc plus la couleur finale. */
.hero h1 .ac.lit{color:var(--accent);animation:neon 4.5s ease-in-out infinite}
@keyframes neon{
  0%,100%{
    color:#FFD84D;
    text-shadow:0 0 6px rgba(255,201,45,.30),
                0 0 18px rgba(255,190,20,.16);
  }
  50%{
    color:#FFC012;
    text-shadow:0 0 8px rgba(255,198,26,.90),
                0 0 26px rgba(255,188,16,.62),
                0 0 58px rgba(255,176,0,.34);
  }
}
@media (prefers-reduced-motion:reduce){
  .hero h1 .ac.lit{animation:none}
}
@media (prefers-reduced-motion:reduce){
  .hero__in > *,.hero__k::before,.hero .ac,.hero__bg img,.hero__n::before{animation:none}
  .hero .ac{color:var(--accent)}
  .hero__bg img{transform:none}
}

/* ── 2 · Bandeau de preuve ──────────────────────────────────────────────
   Une bande fine, sur une seule ligne : trois affirmations séparées par un
   filet, les chiffres en monospace accentué. Elle sépare le hero du corps
   de page sans lui voler de la place.                                    */
.strip{position:relative;background:var(--bg-alt);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Le filet supérieur reprend le faisceau : il court d'un bord à l'autre. */
.strip::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--accent) 50%,transparent) 20%,
    color-mix(in srgb,var(--accent) 50%,transparent) 80%,transparent)}
.strip__in{display:flex;flex-wrap:wrap;align-items:center;padding:1.0625rem 0}
.strip__i{display:inline-flex;align-items:baseline;gap:.4375rem;
  padding:.25rem clamp(1rem,2.4vw,1.875rem);border-left:1px solid var(--line-hi);
  font-size:.9375rem;color:var(--text-2);line-height:1.3}
.strip__i:first-child{padding-left:0;border-left:0}
.strip__n{font-family:var(--f-m);font-weight:500;font-size:1.375rem;letter-spacing:-.035em;
  color:var(--accent);font-variant-numeric:tabular-nums}
.strip__q{color:var(--text-3)}
@media (max-width:719px){
  .strip__in{gap:.375rem 0}
  .strip__i{flex:0 0 100%;padding:.25rem 0;border-left:0}
}

/* ── 3 · Cadre légal ────────────────────────────────────────────────────
   Quatre organisations de la même matière, commutables par le sélecteur
   placé sous la section. Le contenu est écrit une seule fois dans le DOM ;
   seule la mise en forme change.                                         */
.req{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;counter-reset:l}
.req li{counter-increment:l;position:relative}
.req__n{font-family:var(--f-m);font-size:.8125rem;color:var(--accent);letter-spacing:.1em}
.req__t{font-size:1.1875rem;font-weight:600;letter-spacing:-.018em;line-height:1.28;margin:0;color:var(--text)}
.req__d p{margin:0;font-size:.96875rem}
.req .src{display:block;margin-top:.75rem;font-family:var(--f-m);font-size:.71875rem;letter-spacing:.05em;color:var(--text-3)}
.req__chk{display:none}

/* ── A · Liste ─────────────────────────────────────────────────────── */
[data-layout="liste"] .req li{padding:clamp(1.5rem,2.6vw,2rem) 0;border-top:1px solid var(--line);
  display:grid;gap:.625rem 2rem}
@media (min-width:880px){[data-layout="liste"] .req li{grid-template-columns:4rem 1fr 1.15fr;align-items:start}}
[data-layout="liste"] .req__n{padding-top:.4rem}

/* ── B · Grille ────────────────────────────────────────────────────── */
[data-layout="grille"] .req{display:grid;gap:1rem}
@media (min-width:760px){[data-layout="grille"] .req{grid-template-columns:1fr 1fr}}
[data-layout="grille"] .req li{display:flex;flex-direction:column;gap:.75rem;
  padding:1.5rem 1.375rem;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--card);box-shadow:inset 0 1px 0 rgba(238,240,243,.06);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
@media (hover:hover){
  [data-layout="grille"] .req li:hover{transform:translateY(-4px);
    border-color:color-mix(in srgb,var(--accent) 34%,var(--line-hi));
    box-shadow:inset 0 1px 0 rgba(238,240,243,.12),0 30px 56px -30px rgba(0,0,0,1)}
}

/* ── C · Parcours ──────────────────────────────────────────────────────
   Ici la numérotation dit quelque chose de vrai : on désigne, puis on
   forme, puis on écrit, puis on conserve la preuve. C'est une séquence,
   et le filet qui relie les étapes la rend visible.                     */
[data-layout="parcours"] .req{position:relative;padding-left:3.25rem}
[data-layout="parcours"] .req::before{content:"";position:absolute;left:1.09rem;top:.75rem;bottom:2.5rem;width:1px;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 18%,transparent))}
[data-layout="parcours"] .req li{padding:0 0 clamp(1.75rem,3vw,2.5rem)}
[data-layout="parcours"] .req li:last-child{padding-bottom:0}
[data-layout="parcours"] .req__n{position:absolute;left:-3.25rem;top:.1rem;width:2.1875rem;height:2.1875rem;
  display:grid;place-items:center;border-radius:50%;background:var(--bg);
  border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);font-size:.6875rem}
[data-layout="parcours"] .req__t{margin-bottom:.5rem}
[data-layout="parcours"] .req__d{max-width:64ch}

/* ── D · Liste de contrôle ─────────────────────────────────────────────
   La section parle de ce qu'un inspecteur vérifie : elle en prend la
   forme. C'est la seule variante qui affiche la pièce à présenter.      */
[data-layout="controle"] .req{border-top:1px solid var(--line)}
[data-layout="controle"] .req li{padding:1.25rem 0 1.25rem 2.75rem;border-bottom:1px solid var(--line);
  display:grid;gap:.5rem 2rem}
@media (min-width:880px){[data-layout="controle"] .req li{grid-template-columns:1fr 1fr;align-items:start}}
[data-layout="controle"] .req__n{display:none}
[data-layout="controle"] .req li::before{content:"";position:absolute;left:0;top:1.45rem;
  width:16px;height:16px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:3px}
[data-layout="controle"] .req li::after{content:"";position:absolute;left:4px;top:1.72rem;
  width:8px;height:4px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg)}
[data-layout="controle"] .req__d p{font-size:.9375rem}
[data-layout="controle"] .req__chk{display:block;padding:.75rem .875rem;border-radius:var(--radius);
  background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--line);
  font-size:.875rem;color:var(--text-2)}
[data-layout="controle"] .req__chk b{display:block;font-family:var(--f-m);font-size:.625rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.375rem;font-weight:400}

/* ── Sélecteur d'organisation, outil de relecture ─────────────────── */
.switch{margin-top:clamp(2rem,4vw,2.75rem);padding-top:1.25rem;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.switch__k{font-family:var(--f-m);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.switch__b{display:flex;gap:2px;background:var(--bg-alt);border:1px solid var(--line);border-radius:999px;padding:3px}
.switch__b button{background:none;border:0;color:var(--text-2);border-radius:999px;
  padding:.4375rem .8125rem;font-family:var(--f-m);font-size:.6875rem;letter-spacing:.06em;
  transition:background var(--dur-f) var(--ease),color var(--dur-f) var(--ease)}
.switch__b button:hover{color:var(--text)}
.switch__b button[aria-pressed="true"]{background:var(--action-bg);color:var(--action-text)}
.switch__n{font-size:.8125rem;color:var(--text-3);flex-basis:100%;margin:0}

/* ── 4 · Les trois formations ───────────────────────────────────────── */
.fmt{display:grid;gap:1rem;margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:960px){.fmt{grid-template-columns:1fr 1.1fr 1fr;align-items:start;gap:.875rem}}
/* Profondeur : un liseré clair en haut simule une lumière venue d'en haut,
   l'ombre portée détache la carte du fond. */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  box-shadow:inset 0 1px 0 rgba(238,240,243,.07), 0 20px 44px -28px rgba(0,0,0,.9);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
/* La carte survolée sort franchement du plan : elle monte, s'agrandit un peu,
   éclaircit sa bordure et creuse son ombre. Les autres restent où elles
   sont, c'est le contraste qui fait sortir celle qu'on regarde. */
@media (hover:hover){
  .card:hover{
    transform:translateY(-10px) scale(1.022);z-index:4;
    border-color:color-mix(in srgb,var(--accent) 38%,var(--line-hi));
    box-shadow:inset 0 1px 0 rgba(238,240,243,.14),
               0 44px 70px -30px rgba(0,0,0,1),
               0 0 60px -22px color-mix(in srgb,var(--accent) 30%,transparent);
  }
}
/* Halo autour de la carte mise en avant : elle flotte au-dessus des autres.
   Rendu en ombre portée et non en pseudo-élément, l'overflow:hidden de la
   carte rognerait ce dernier. */
.card--hi{background:var(--card-hi);border-color:var(--line-hi);
  box-shadow:inset 0 1px 0 rgba(238,240,243,.1),
             0 26px 54px -30px rgba(0,0,0,.95),
             0 0 80px -16px color-mix(in srgb,var(--accent) 24%,transparent)}
@media (hover:hover){
  .card--hi:hover{box-shadow:inset 0 1px 0 rgba(238,240,243,.16),
             0 48px 78px -30px rgba(0,0,0,1),
             0 0 110px -12px color-mix(in srgb,var(--accent) 42%,transparent)}
}
@media (min-width:960px){.card--hi{margin-top:-1.25rem}}
.card__img{aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
@media (hover:hover){.card:hover .card__img img{transform:scale(1.07)}}
/* La grille laisse la carte soulevée passer devant ses voisines. */
.fmt{position:relative}
.card{z-index:1}
@media (prefers-reduced-motion:reduce){
  .card,.card__img img{transition:none}
  .card:hover{transform:none}
}
.card--hi .card__img{aspect-ratio:4/2.7}
.card__b{padding:1.375rem;display:flex;flex-direction:column;flex:1}
.card__badge{position:absolute;top:1rem;right:1rem;z-index:2;font-family:var(--f-m);font-size:.625rem;
  letter-spacing:.1em;text-transform:uppercase;background:var(--action-bg);color:var(--action-text);
  padding:.3125rem .5625rem;border-radius:3px;font-weight:500}
.card__t{font-size:1.1875rem;font-weight:600;letter-spacing:-.02em;margin:0 0 .875rem}
.card__p{font-family:var(--f-m);font-weight:500;font-size:1.375rem;letter-spacing:-.02em;display:block;margin-bottom:1rem}
.card__p small{font-size:.75rem;color:var(--text-2);font-weight:400;letter-spacing:.04em}
.card__p--na{font-family:var(--f-d);font-weight:600;font-size:1.125rem;color:var(--text-2)}
.card__r{list-style:none;margin:0 0 1.25rem;padding:0;font-size:.9375rem;border-top:1px solid var(--line)}
.card__r li{display:flex;gap:1rem;padding:.625rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.card__r .k{color:var(--text-2);flex:0 0 5.25rem;font-family:var(--f-m);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase}
.card__r .v{color:var(--text-2);flex:1}
.card__r .v strong{color:var(--text);font-weight:600}
/* Date et places restantes intégrées à la carte : l'information arrive au
   moment où l'on choisit, sans bloc « prochaine session » supplémentaire. */
/* La date porte la décision : elle domine. La disponibilité n'est qu'un
   signal d'urgence, plus petite, et vague par choix : un chiffre exact
   engage, « peu de places » informe sans se tromper. */
.card__when{border-top:1px solid var(--line-hi);padding-top:.9375rem;margin-bottom:1.125rem;
  display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.card__wl{font-family:var(--f-m);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.card__date{font-family:var(--f-m);font-weight:500;font-size:1.1875rem;letter-spacing:-.025em;color:var(--text);line-height:1.15}
.seat{display:inline-flex;align-items:center;gap:.4rem;font-size:.6875rem;font-weight:600;
  letter-spacing:.01em;padding:.25rem .5rem;border-radius:999px;align-self:flex-start}
.seat::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
[data-s="open"] .seat{color:var(--open);background:color-mix(in srgb,var(--open) 13%,transparent)}
[data-s="soon"] .seat{color:var(--soon);background:color-mix(in srgb,var(--soon) 13%,transparent)}
[data-s="full"] .seat{color:var(--full);background:color-mix(in srgb,var(--full) 13%,transparent)}
[data-s="full"] .card .btn:not(.btn--o){background:transparent;color:var(--text);border-color:var(--line-hi)}
.card .btn{margin-top:auto}
.days{display:flex;gap:4px}
.chip{font-family:var(--f-m);font-size:.625rem;letter-spacing:.06em;font-weight:500;padding:.25rem .4375rem;
  border-radius:3px;border:1px solid var(--line-hi);color:var(--text-2)}
.chip--sh{background:color-mix(in srgb,var(--text-2) 18%,transparent);color:var(--text);border-color:transparent}
.chip--ex{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.fmt__n{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.9375rem;color:var(--text-2);max-width:66ch}
.recert{margin-top:1.5rem;padding:.875rem 1.25rem;border:1px solid var(--line);border-radius:var(--radius);
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.9375rem;color:var(--text-2)}
.recert a{margin-left:auto;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line-hi);
  padding-bottom:2px;font-family:var(--f-m);font-size:.71875rem;letter-spacing:.06em;text-transform:uppercase}

/* ── 5 · Domaines ───────────────────────────────────────────────────────
   Format volontairement opposé aux cartes qui précèdent : une liste dense
   et typographique, pour que le visiteur trouve son cas en un balayage.  */
.dom{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;counter-reset:d;border-top:1px solid var(--line)}
.dom li{counter-increment:d;border-bottom:1px solid var(--line);position:relative}
/* Barre d'accent qui se déploie au survol, depuis le haut. */
.dom li::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .35s var(--ease)}
.dom li:hover::before{transform:scaleY(1)}
.dom__r{display:grid;gap:.375rem 1.75rem;padding:1.25rem 0 1.25rem 1.125rem;align-items:baseline;
  transition:background var(--dur) var(--ease)}
.dom li:hover .dom__r{background:rgba(238,240,243,.035)}
@media (min-width:880px){.dom__r{grid-template-columns:3.25rem 15rem 1fr auto}}
.dom__n{font-family:var(--f-m);font-size:.8125rem;letter-spacing:.1em;color:var(--text-3)}
.dom__t{font-size:1.0625rem;font-weight:600;letter-spacing:-.018em;margin:0;color:var(--text)}
.dom__d{margin:0;font-size:.9375rem;color:var(--text-2);max-width:52ch}
.dom__c{font-family:var(--f-m);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-2);border:1px solid var(--line-hi);border-radius:999px;padding:.3125rem .625rem;
  white-space:nowrap;justify-self:start;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.dom li:hover .dom__c{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.dom__f{margin-top:1.5rem;font-size:.9375rem;color:var(--text-2);max-width:66ch}

/* Arrivée : un balayage descend la liste et éclaire chaque numéro au
   passage, puis le laisse retomber. Même geste que l'allumage du hero. */
.js .dom li{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s)}
.js .dom.in li{opacity:1;transform:none}
.js .dom li:nth-child(2){--d:.10s}
.js .dom li:nth-child(3){--d:.20s}
.js .dom li:nth-child(4){--d:.30s}
.js .dom li:nth-child(5){--d:.40s}
.js .dom.in .dom__n{animation:scan .7s var(--ease) var(--d,0s) both}
@keyframes scan{
  0%{color:var(--text-3);text-shadow:none}
  38%{color:var(--accent);text-shadow:0 0 16px color-mix(in srgb,var(--accent) 75%,transparent)}
  100%{color:var(--text-3);text-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .js .dom li{opacity:1;transform:none;transition:none}
  .js .dom.in .dom__n{animation:none}
  .dom li::before{display:none}
}

/* ── 6 · Säfeli et le formateur ─────────────────────────────────────── */
.who{display:grid;gap:2rem;margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:880px){.who{grid-template-columns:300px 1fr;gap:3.5rem;align-items:start}}
.who__ph{aspect-ratio:4/5;border:1px dashed var(--line-hi);border-radius:var(--radius-lg);
  display:grid;place-items:center;text-align:center;padding:1.5rem;background:var(--bg-alt)}
.who__ph p{margin:0;font-family:var(--f-m);font-size:.71875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);line-height:2}
.who__n{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;margin:0 0 .25rem}
.who__r{font-size:1rem;margin:0 0 1.25rem}
.who__f{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--line);display:grid;gap:.6875rem}
.who__f div{display:flex;gap:1.25rem;font-size:.9375rem;color:var(--text-2)}
.who__f dt{flex:0 0 9rem;font-family:var(--f-m);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.who__f dd{margin:0;flex:1}

/* ── 7 · Derniers articles ──────────────────────────────────────────── */
.posts{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;counter-reset:p}
.posts li{counter-increment:p;border-top:1px solid var(--line)}
.posts li:last-child{border-bottom:1px solid var(--line)}
.posts a{display:grid;gap:.5rem 2rem;padding:1.375rem 0;text-decoration:none;align-items:baseline;
  transition:background var(--dur) var(--ease)}
@media (min-width:820px){.posts a{grid-template-columns:3.5rem 1fr 6rem}}
.posts a:hover{background:rgba(238,240,243,.03)}
.posts a::before{content:counter(p,decimal-leading-zero);font-family:var(--f-m);font-size:.8125rem;color:var(--text-3);letter-spacing:.1em}
.posts .t{font-size:1.1875rem;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--text)}
.posts .t small{display:block;margin-top:.4375rem;font:400 .9375rem/1.55 var(--f-d);color:var(--text-2);letter-spacing:0;max-width:58ch}
.posts .go{font-family:var(--f-m);font-size:.71875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.posts a:hover .go{color:var(--text)}
.posts .soon{display:inline-block;margin-left:.5rem;font-family:var(--f-m);font-size:.5625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);border:1px solid var(--line-hi);border-radius:999px;padding:.25rem .4375rem;vertical-align:.25em}
.posts__a{margin-top:1.75rem}

/* ── 8 · FAQ ────────────────────────────────────────────────────────── */
.faq{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:1.25rem 3rem 1.25rem 0;
  font-weight:600;font-size:1.0625rem;letter-spacing:-.015em;color:var(--text);min-height:46px;
  display:flex;align-items:center;transition:color var(--dur-f)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--text-2)}
.faq summary::after,.faq summary::before{content:"";position:absolute;right:.5rem;top:50%;width:12px;height:1.5px;background:var(--text-3)}
.faq summary::before{transform:rotate(90deg);transition:transform var(--dur) var(--ease)}
.faq details[open] summary::before{transform:rotate(0)}
.faq .a{padding:0 3.5rem 1.5rem 0;font-size:.96875rem;color:var(--text-2);margin:0;max-width:72ch}

/* ── Footer ─────────────────────────────────────────────────────────── */
.ft{border-top:1px solid var(--line);background:var(--bg-alt);padding:clamp(3rem,6vw,4.5rem) 0 1.75rem}
.ft__g{display:grid;gap:2rem}
@media (min-width:780px){.ft__g{grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:2.25rem}}
.ft h4{font-family:var(--f-m);font-size:.71875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin:0 0 1rem;font-weight:400}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin-bottom:.5rem}
.ft a{font-size:.9375rem;color:var(--text-2);text-decoration:none;transition:color var(--dur-f)}
.ft a:hover{color:var(--text)}
.ft address{font-style:normal;font-size:.9375rem;color:var(--text-2);line-height:1.85}
.ft__n{font-weight:700;font-size:1.0625rem;letter-spacing:-.025em;margin:0 0 1rem}
.ft__r{font-size:.9375rem;color:var(--text-2);line-height:1.7}
.ft__b{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--line);display:flex;gap:1.25rem;
  flex-wrap:wrap;align-items:center;font-family:var(--f-m);font-size:.71875rem;letter-spacing:.04em;color:var(--text-3)}
.ft__b a{font-family:var(--f-m);font-size:.71875rem}
.ft__b .sp{margin-left:auto}

/* ── Barre CTA mobile ───────────────────────────────────────────────── */
.mbar{position:fixed;inset:auto 0 0 0;z-index:50;display:flex;align-items:center;gap:1rem;
  padding:.75rem 1.5rem calc(.75rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 95%,transparent);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);transform:translateY(105%);transition:transform var(--dur) var(--ease)}
.mbar[data-on="true"]{transform:none}
.mbar span{font-size:.71875rem;line-height:1.35;color:var(--text-2)}
.mbar b{display:block;color:var(--text);font-family:var(--f-m);font-weight:500;letter-spacing:.02em}
.mbar .btn{margin-left:auto;flex-shrink:0}
@media (min-width:1020px){.mbar{display:none}}
@media (max-width:1019px){body{padding-bottom:5.25rem}}

/* ── Révélation, défaillante-sûre ───────────────────────────────────── */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ═══ MOUVEMENT ═══════════════════════════════════════════════════════
   Vocabulaire optique : ce qui bouge évoque la lumière, le balayage, la
   mise au point. Tout est neutralisé par prefers-reduced-motion.        */

/* Arrivée en cascade des listes : les éléments se posent l'un après
   l'autre au lieu d'apparaître en bloc. */
.js .law li,.js .posts li{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease) var(--d,0s),transform .55s var(--ease) var(--d,0s)}
.js .law.in li,.js .posts.in li{opacity:1;transform:none}
.js .law li:nth-child(2),.js .posts li:nth-child(2){--d:.08s}
.js .law li:nth-child(3),.js .posts li:nth-child(3){--d:.16s}
.js .law li:nth-child(4){--d:.24s}

/* Les cartes utilisent `translate` et non `transform` : le décalage
   d'arrivée n'entre ainsi pas en conflit avec le soulèvement au survol. */
.js .fmt .card{opacity:0;translate:0 20px;transition-delay:var(--d,0s);
  transition-property:opacity,translate,transform,border-color,box-shadow;
  transition-duration:.6s,.6s,var(--dur),var(--dur),var(--dur);
  transition-timing-function:var(--ease)}
.js .fmt.in .card{opacity:1;translate:none}
.js .fmt .card:nth-child(2){--d:.10s}
.js .fmt .card:nth-child(3){--d:.20s}
.js .fmt .card:hover{transition-delay:0s}

/* Profondeur des bandes alternées : liseré de lumière au bord supérieur. */
.sec--alt{box-shadow:inset 0 1px 0 rgba(238,240,243,.05)}

/* Balayage lumineux sur les boutons pleins. */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn:not(.btn--o)::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.35) 50%,transparent 68%);
  transform:translateX(-130%);transition:transform .65s var(--ease)}
.btn:not(.btn--o):hover::after{transform:translateX(130%)}

/* Articles : un trait d'accent se trace sous la ligne survolée. */
.posts a{position:relative}
.posts a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.posts a:hover::after{transform:scaleX(1)}

/* Ouverture de la FAQ. */
.faq details[open] .a{animation:faqIn .3s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}


@media (prefers-reduced-motion:reduce){
  .js .law li,.js .posts li,.js .fmt .card{opacity:1;transform:none;translate:none;transition:none}
  .btn::after,.posts a::after{display:none}
  .faq details[open] .a{animation:none}
}

/* ── Outils de relecture, À RETIRER ────────────────────────────────── */
.ver{position:fixed;right:1rem;bottom:1rem;z-index:80;display:flex;align-items:center;gap:.5rem;
  padding:.375rem .5rem .375rem .75rem;background:#101520;border:1px solid #2C3850;border-radius:999px;
  font:400 10px/1 var(--f-m);letter-spacing:.09em;text-transform:uppercase;color:#8E99AC}
.ver a{color:#B4BECD;text-decoration:none;padding:.4rem .55rem;border-radius:999px}
.ver a:hover{color:#fff}
.ver .seg,.ver .st{display:flex;gap:2px;background:#1A2334;border-radius:999px;padding:2px}
.ver .seg a.on{background:#EEF0F3;color:#101520}
.ver .st button{background:none;border:0;color:#8E99AC;padding:.4rem .5rem;border-radius:999px;
  font:400 10px/1 var(--f-m);letter-spacing:.09em;text-transform:uppercase}
.ver .st button[aria-pressed="true"]{background:#EEF0F3;color:#101520}
.ksel{background:#1A2334;color:#B4BECD;border:1px solid #2C3850;border-radius:999px;
  padding:.35rem .5rem;font:400 10px/1 var(--f-m);letter-spacing:.06em}
@media (max-width:1019px){.ver{bottom:5.25rem}.ver .lb{display:none}}
@media (max-width:820px){.ksel{display:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGES INTÉRIEURES
   Composants employés par les pages formation, la page pilier et À propos.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fil d'Ariane ───────────────────────────────────────────────────── */
.crumb{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:0 0 1.25rem;
  font-family:var(--f-m);font-size:.71875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.crumb a{text-decoration:none;transition:color var(--dur-f)}
.crumb a:hover{color:var(--text)}
.crumb span[aria-hidden]{opacity:.55}

/* ── Hero de page intérieure ────────────────────────────────────────── */
.phero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  padding:calc(var(--header-h) + clamp(2.5rem,5vw,4rem)) 0 clamp(2.5rem,5vw,4rem)}
.phero__bg{position:absolute;inset:0;z-index:0}
.phero__bg img{width:100%;height:100%;object-fit:cover;opacity:.30}
.phero__v{position:absolute;inset:0;background:
  linear-gradient(90deg,var(--bg) 8%,color-mix(in srgb,var(--bg) 84%,transparent) 52%,color-mix(in srgb,var(--bg) 62%,transparent) 100%),
  linear-gradient(0deg,var(--bg) 1%,transparent 60%)}
.phero__in{position:relative;z-index:1}
.phero h1{font-size:clamp(2rem,4.4vw,3.375rem);font-weight:700;letter-spacing:-.035em;line-height:1.05;
  margin:0 0 1.125rem;max-width:20ch;text-wrap:balance}
.phero .lead{max-width:60ch}

/* Bandeau de caractéristiques sous le titre */
.pmeta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.pmeta span{display:inline-flex;align-items:baseline;gap:.4375rem;
  font-family:var(--f-m);font-size:.75rem;letter-spacing:.05em;color:var(--text-2);
  border:1px solid var(--line-hi);border-radius:999px;padding:.4375rem .8125rem}
.pmeta b{color:var(--text);font-weight:500}
.pmeta .hot{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}

/* ── Corps rédactionnel ─────────────────────────────────────────────── */
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.375rem,2.4vw,1.875rem);font-weight:700;letter-spacing:-.028em;line-height:1.15;
  margin:2.75rem 0 .875rem;color:var(--text)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.125rem;font-weight:600;letter-spacing:-.015em;margin:1.75rem 0 .5rem;color:var(--text)}
.prose p{margin:0 0 1rem;color:var(--text-2)}
.prose ul,.prose ol{margin:0 0 1.25rem;padding-left:0;list-style:none}
.prose li{position:relative;padding-left:1.5rem;margin-bottom:.5rem;color:var(--text-2)}
.prose ul>li::before{content:"";position:absolute;left:0;top:.68em;width:11px;height:1px;background:var(--line-hi)}
.prose ol{counter-reset:o}
.prose ol>li{counter-increment:o;padding-left:2rem}
.prose ol>li::before{content:counter(o,decimal-leading-zero);position:absolute;left:0;top:.06em;
  font-family:var(--f-m);font-size:.75rem;color:var(--accent);letter-spacing:.06em}
.prose strong{color:var(--text);font-weight:600}

/* ── Colonne de lecture des articles ────────────────────────────────────
   Portée volontairement limitée à .art-split : .prose sert aussi sur
   « À propos » et les pages de formation, qui ne déclarent pas de langue
   et où la justification creuserait donc des blancs.

   Largeur : la règle globale p{max-width:64ch} s'appliquait ici et bridait
   le texte à 623 px alors que sa colonne en fait plus de 820. Le plafond
   est relevé sur .prose et levé sur le paragraphe, sans quoi le premier
   resterait sans effet.

   Justification : elle n'est tenable qu'avec la césure. Mesuré sur un
   article, l'espace le plus étiré passe de ×1,80 sans césure à ×1,45 avec.
   hyphens:auto exige une langue déclarée ; elle est portée par le
   conteneur .art-split, ces fichiers n'ayant pas de balise <html>.
   Les titres restent au fer à gauche : justifier une ligne ou deux
   n'ouvrirait que des trous. */
.art-split .prose{max-width:80ch}
.art-split .prose p{max-width:none}
.art-split .prose p,
.art-split .prose li{text-align:justify;-webkit-hyphens:auto;hyphens:auto;
  hyphenate-limit-chars:6 3 3}
.art-split .prose h2{max-width:44ch;text-wrap:balance}
.art-split .prose h2,
.art-split .prose h3{text-align:left}
.prose a{color:var(--text);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.prose a:hover{text-decoration-color:var(--accent)}

/* ── Encadré ────────────────────────────────────────────────────────── */
.callout{border:1px solid var(--line-hi);border-left:2px solid var(--accent);border-radius:var(--radius);
  padding:1.125rem 1.25rem;margin:1.75rem 0;background:color-mix(in srgb,var(--surface) 60%,transparent)}
.callout p{margin:0 0 .5rem;font-size:.9375rem}
.callout p:last-child{margin:0}
.callout__k{display:block;font-family:var(--f-m);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}

/* ── Grille contenu + colonne collante ──────────────────────────────── */
.split{display:grid;gap:2.5rem}
@media (min-width:1000px){.split{grid-template-columns:1fr 330px;gap:clamp(3rem,5vw,4.5rem);align-items:start}}
.aside{position:static}
@media (min-width:1000px){.aside{position:sticky;top:calc(var(--header-h) + 1.5rem)}}

/* Bloc d'inscription de la colonne */
.seatbox{border:1px solid var(--line-hi);border-radius:var(--radius-lg);background:var(--card-hi);
  padding:1.375rem;box-shadow:inset 0 1px 0 rgba(238,240,243,.09),0 26px 54px -32px rgba(0,0,0,.95)}
.seatbox__k{font-family:var(--f-m);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.seatbox__d{font-family:var(--f-m);font-weight:500;font-size:1.25rem;letter-spacing:-.025em;margin:.5rem 0 .25rem}
.seatbox__l{font-size:.875rem;color:var(--text-2);margin:0 0 1rem}
.seatbox__p{font-family:var(--f-m);font-weight:500;font-size:1.75rem;letter-spacing:-.03em;display:block;margin:1rem 0 .25rem}
.seatbox__p small{font-size:.6875rem;color:var(--text-2);letter-spacing:.06em}
.seatbox__r{list-style:none;margin:1rem 0;padding:0;border-top:1px solid var(--line);font-size:.875rem}
.seatbox__r li{display:flex;gap:.875rem;padding:.5rem 0;border-bottom:1px solid var(--line);color:var(--text-2)}
.seatbox__r b{flex:0 0 4.75rem;font-family:var(--f-m);font-size:.625rem;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.seatbox .btn{width:100%;margin-top:.25rem}
.seatbox__n{margin:.75rem 0 0;font-size:.75rem;color:var(--text-3);line-height:1.5}

/* ── Tuiles du pilier ───────────────────────────────────────────────── */
.tiles{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;display:grid;gap:1rem;counter-reset:t}
@media (min-width:760px){.tiles{grid-template-columns:1fr 1fr}}
.tile{counter-increment:t;position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem 1.375rem 1.25rem;
  background:var(--card);box-shadow:inset 0 1px 0 rgba(238,240,243,.06);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
@media (hover:hover){
  .tile:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 34%,var(--line-hi));
    box-shadow:inset 0 1px 0 rgba(238,240,243,.12),0 30px 56px -30px rgba(0,0,0,1)}
}
.tile__n{font-family:var(--f-m);font-size:.75rem;letter-spacing:.1em;color:var(--text-3);margin-bottom:.75rem}
.tile__t{font-size:1.0625rem;font-weight:600;letter-spacing:-.018em;line-height:1.3;margin:0 0 .625rem;color:var(--text)}
.tile__d{margin:0 0 1rem;font-size:.9375rem;color:var(--text-2);line-height:1.6}
.tile__d strong{color:var(--text);font-weight:600}
.tile__f{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.tile__c{font-family:var(--f-m);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.tile__go{margin-left:auto;font-family:var(--f-m);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-2);text-decoration:none}
.tile:hover .tile__go{color:var(--accent)}
.tile__soon{font-family:var(--f-m);font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);border:1px solid var(--line-hi);border-radius:999px;padding:.25rem .4375rem}
/* Même balayage que la liste des domaines : la lumière descend les tuiles. */
.js .tiles .tile{opacity:0;translate:0 16px;transition-delay:var(--d,0s);
  transition-property:opacity,translate,transform,border-color,box-shadow;
  transition-duration:.55s,.55s,var(--dur),var(--dur),var(--dur);transition-timing-function:var(--ease)}
.js .tiles.in .tile{opacity:1;translate:none}
.js .tiles .tile:hover{transition-delay:0s}
.js .tiles.in .tile__n{animation:scan .7s var(--ease) var(--d,0s) both}
.tiles .tile:nth-child(2){--d:.06s}   .tiles .tile:nth-child(3){--d:.12s}
.tiles .tile:nth-child(4){--d:.18s}   .tiles .tile:nth-child(5){--d:.24s}
.tiles .tile:nth-child(6){--d:.30s}   .tiles .tile:nth-child(7){--d:.36s}
.tiles .tile:nth-child(8){--d:.42s}   .tiles .tile:nth-child(9){--d:.48s}
.tiles .tile:nth-child(10){--d:.54s}
@media (prefers-reduced-motion:reduce){
  .js .tiles .tile{opacity:1;translate:none;transition:none}
  .js .tiles.in .tile__n{animation:none}
}

/* ── Objectifs / programme ──────────────────────────────────────────── */
.obj{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.75rem}
@media (min-width:720px){.obj{grid-template-columns:1fr 1fr}}
.obj li{display:flex;gap:.875rem;padding:.9375rem 1rem;border:1px solid var(--line);border-radius:var(--radius);
  font-size:.9375rem;color:var(--text-2);background:color-mix(in srgb,var(--surface) 45%,transparent)}
.obj li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--accent);
  margin-top:.55em}

.prog{display:grid;gap:2rem;margin-top:1.75rem}
@media (min-width:820px){.prog{grid-template-columns:1fr 1fr;gap:2.75rem}}
.prog__c h3{display:flex;align-items:baseline;gap:.75rem;margin:0 0 1.125rem;font-size:1rem;font-weight:600}
.prog__l{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.prog__l li{padding:.6875rem 0;border-bottom:1px solid var(--line);font-size:.9375rem;color:var(--text-2);
  display:flex;align-items:baseline;gap:1rem}
.prog__l li::before{content:"";width:16px;height:1px;background:var(--line-hi);flex-shrink:0;transform:translateY(-4px)}
.prog__c--j2 .prog__l li{color:var(--text)}
.prog__c--j2 .prog__l li::before{background:var(--accent);width:22px}
@media (min-width:820px){.prog__c--j2{padding-left:2.75rem;border-left:1px solid var(--line)}}

/* ── Bandeau d'appel en fin de page ─────────────────────────────────── */
.cta{border-top:1px solid var(--line);background:var(--bg-alt);position:relative}
.cta::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 50%,transparent) 25%,
    color-mix(in srgb,var(--accent) 50%,transparent) 75%,transparent)}
.cta__in{padding:clamp(2.5rem,5vw,4rem) 0;display:grid;gap:1.5rem}
@media (min-width:860px){.cta__in{grid-template-columns:1fr auto;align-items:center;gap:2.5rem}}
.cta h2{font-size:clamp(1.375rem,2.6vw,2rem);font-weight:700;letter-spacing:-.03em;line-height:1.12;margin:0 0 .625rem;max-width:22ch}
.cta p{margin:0;font-size:.9375rem;max-width:52ch}
.cta__b{display:flex;gap:.75rem;flex-wrap:wrap}

/* Titre de carte cliquable : le lien ne doit pas se distinguer du titre. */
.card__t a{text-decoration:none;color:inherit}
.card__t a::after{content:"";position:absolute;inset:0;z-index:2}
.card__b{position:relative}
.card__b .btn{position:relative;z-index:3}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE PILIER : LES ARTICLES
   La page n'est plus une liste plate mais trois groupes, ordonnés selon le
   moment du lecteur : il découvre, il doit se mettre en règle, il doit
   dimensionner. Chaque groupe a son en-tête, chaque article son image.
   ═══════════════════════════════════════════════════════════════════════ */

/* En-tête de groupe */
.grp{margin:clamp(3rem,6vw,4.5rem) 0 clamp(1.5rem,3vw,2rem)}
.grp:first-of-type{margin-top:clamp(2rem,4vw,3rem)}
.grp__k{display:flex;align-items:center;gap:.875rem;margin:0 0 .875rem;
  font-family:var(--f-m);font-size:.71875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.grp__k::before{content:"";width:26px;height:1px;background:var(--accent);flex-shrink:0}
.grp__k b{font-weight:400;color:var(--text-3);margin-left:auto;letter-spacing:.1em}
.grp h2{font-size:clamp(1.5rem,2.8vw,2.125rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:0 0 .625rem}
.grp p{margin:0;font-size:1rem;color:var(--text-2);max-width:62ch}

/* Grille d'articles */
.arts{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
@media (min-width:680px){.arts{grid-template-columns:1fr 1fr}}
@media (min-width:1020px){.arts{grid-template-columns:repeat(3,1fr)}}

.art{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);
  box-shadow:inset 0 1px 0 rgba(238,240,243,.06);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
@media (hover:hover){
  .art:hover{transform:translateY(-6px);z-index:2;
    border-color:color-mix(in srgb,var(--accent) 36%,var(--line-hi));
    box-shadow:inset 0 1px 0 rgba(238,240,243,.13),
               0 36px 60px -30px rgba(0,0,0,1),
               0 0 56px -24px color-mix(in srgb,var(--accent) 26%,transparent)}
}
.art__img{aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt);position:relative}
.art__img img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
@media (hover:hover){.art:hover .art__img img{transform:scale(1.06)}}
/* Voile bas pour que le numéro reste lisible quelle que soit l'image */
.art__img::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;
  background:linear-gradient(0deg,color-mix(in srgb,var(--card) 92%,transparent),transparent)}
.art__n{position:absolute;left:1rem;bottom:.75rem;z-index:2;
  font-family:var(--f-m);font-size:.75rem;letter-spacing:.1em;color:var(--accent)}
.art__b{padding:1.125rem 1.25rem 1rem;display:flex;flex-direction:column;flex:1}
.art__t{font-size:1.0625rem;font-weight:600;letter-spacing:-.018em;line-height:1.3;margin:0 0 .5rem;color:var(--text)}
.art__d{margin:0 0 1rem;font-size:.9375rem;line-height:1.55;color:var(--text-2)}
.art__f{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:.625rem;flex-wrap:wrap}
.art__c{font-family:var(--f-m);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.art__soon{font-family:var(--f-m);font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);border:1px solid var(--line-hi);border-radius:999px;padding:.25rem .4375rem}
.art__go{margin-left:auto;font-family:var(--f-m);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-2);text-decoration:none}
.art:hover .art__go{color:var(--accent)}
/* Toute la carte est cliquable, le lien du titre porte la zone. */
.art__t a{color:inherit;text-decoration:none}
.art__t a::after{content:"";position:absolute;inset:0;z-index:3}

/* Carte large : ouvre le groupe « se mettre en règle » et lui donne sa tête */
@media (min-width:1020px){
  .art--wide{grid-column:1 / -1;flex-direction:row;align-items:stretch}
  .art--wide .art__img{aspect-ratio:auto;flex:0 0 42%}
  .art--wide .art__b{padding:clamp(1.5rem,2.6vw,2.25rem);justify-content:center}
  .art--wide .art__t{font-size:clamp(1.25rem,2vw,1.625rem);letter-spacing:-.028em;margin-bottom:.75rem}
  .art--wide .art__d{font-size:1rem;max-width:56ch}
  .art--wide .art__n{bottom:auto;top:1rem}
  .art--wide .art__img::after{inset:0 0 0 auto;width:45%;height:100%;
    background:linear-gradient(270deg,color-mix(in srgb,var(--card) 92%,transparent),transparent)}
}

/* Arrivée en cascade, même balayage que les domaines */
.js .arts .art{opacity:0;translate:0 18px;transition-delay:var(--d,0s);
  transition-property:opacity,translate,transform,border-color,box-shadow;
  transition-duration:.55s,.55s,var(--dur),var(--dur),var(--dur);transition-timing-function:var(--ease)}
.js .arts.in .art{opacity:1;translate:none}
.js .arts .art:hover{transition-delay:0s}
.js .arts.in .art__n{animation:scan .7s var(--ease) var(--d,0s) both}
.arts .art:nth-child(2){--d:.08s} .arts .art:nth-child(3){--d:.16s}
.arts .art:nth-child(4){--d:.24s}
@media (prefers-reduced-motion:reduce){
  .js .arts .art{opacity:1;translate:none;transition:none}
  .js .arts.in .art__n{animation:none}
}

/* ── Intro de page pilier : le texte ne flotte plus seul à gauche ───────
   La colonne de droite était vide. Elle porte désormais le sommaire, qui
   sert au lecteur pressé comme aux moteurs : trois liens d'ancrage. */
.intro{display:grid;gap:2rem}
@media (min-width:960px){.intro{grid-template-columns:1.25fr .85fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}}
.intro__t p{margin:0 0 1rem;max-width:56ch}
.intro__t p:last-child{margin:0}
.intro__lead{font-size:var(--t-lead);line-height:1.6;color:var(--text)}

.intro__toc{border:1px solid var(--line-hi);border-radius:var(--radius-lg);padding:1.25rem;
  background:color-mix(in srgb,var(--surface) 55%,transparent)}
.intro__k{margin:0 0 .875rem;font-family:var(--f-m);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.intro__toc ol{list-style:none;margin:0;padding:0;counter-reset:s}
.intro__toc li{counter-increment:s;border-top:1px solid var(--line)}
.intro__toc li:first-child{border-top:0}
.intro__toc a{display:grid;grid-template-columns:1fr auto;gap:.125rem .875rem;padding:.75rem 0;
  text-decoration:none;transition:background var(--dur-f) var(--ease)}
.intro__toc a:hover{background:rgba(238,240,243,.035)}
.intro__toc b{font-size:.9375rem;font-weight:600;color:var(--text);letter-spacing:-.01em}
.intro__toc span{grid-column:1;font-size:.8125rem;color:var(--text-2);line-height:1.4}
/* Colonne explicite : avec une ligne définie mais une colonne automatique,
   la grille place cet élément avant les autres et il atterrit en colonne 1,
   renvoyant le libellé à droite. */
.intro__toc i{grid-column:2;grid-row:1 / span 2;align-self:center;font-family:var(--f-m);font-style:normal;
  font-size:.75rem;color:var(--text-3);border:1px solid var(--line-hi);border-radius:999px;
  width:1.75rem;height:1.75rem;display:grid;place-items:center}
.intro__toc a:hover i{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}

/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLE
   Structure imposée par la méthode éditoriale : on répond d'abord, on
   développe ensuite. L'encadré « L'essentiel » ouvre, les H2 sont des
   questions, la FAQ ferme. Le sommaire est collant à droite.
   ═══════════════════════════════════════════════════════════════════════ */
.art-split{display:grid;gap:2.5rem}
@media (min-width:1040px){.art-split{grid-template-columns:1fr 260px;gap:clamp(3rem,5vw,4.5rem);align-items:start}}

/* Sommaire */
.toc{position:static;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.125rem;
  background:color-mix(in srgb,var(--surface) 55%,transparent)}
@media (min-width:1040px){.toc{position:sticky;top:calc(var(--header-h) + 1.5rem)}}
.toc__k{margin:0 0 .75rem;font-family:var(--f-m);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.toc li{counter-increment:t}
.toc a{display:flex;gap:.625rem;padding:.4375rem 0;font-size:.875rem;color:var(--text-2);
  text-decoration:none;line-height:1.4;transition:color var(--dur-f)}
.toc a::before{content:counter(t,decimal-leading-zero);font-family:var(--f-m);font-size:.6875rem;
  color:var(--text-3);flex-shrink:0;padding-top:.15em}
.toc a:hover{color:var(--text)}
.toc a.on{color:var(--accent)}
.toc a.on::before{color:var(--accent)}

/* Encadré « L'essentiel » : la réponse citable, en tête */
.key{border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);border-radius:var(--radius-lg);
  padding:1.375rem 1.5rem;margin:0 0 2rem;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.key__k{display:block;font-family:var(--f-m);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.875rem}
.key ul{list-style:none;margin:0;padding:0}
.key li{position:relative;padding-left:1.375rem;margin-bottom:.625rem;font-size:.96875rem;
  color:var(--text);line-height:1.55}
.key li:last-child{margin-bottom:0}
.key li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--accent)}

/* Points positifs et points d'attention, en vis-à-vis */
.pc{display:grid;gap:1rem;margin:2rem 0}
@media (min-width:760px){.pc{grid-template-columns:1fr 1fr}}
.pc__b{border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.125rem 1.25rem;
  background:var(--card)}
.pc__b--ok{border-left:2px solid var(--open)}
.pc__b--no{border-left:2px solid var(--soon)}
.pc__k{display:flex;align-items:center;gap:.5rem;margin:0 0 .875rem;font-family:var(--f-m);
  font-size:.625rem;letter-spacing:.14em;text-transform:uppercase}
.pc__b--ok .pc__k{color:var(--open)}
.pc__b--no .pc__k{color:var(--soon)}
.pc__k::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pc ul{list-style:none;margin:0;padding:0}
.pc li{position:relative;padding-left:1.25rem;margin-bottom:.5625rem;font-size:.9375rem;
  color:var(--text-2);line-height:1.5}
.pc li:last-child{margin-bottom:0}
.pc li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:1px;background:var(--line-hi)}

/* Exemple travaillé */
.ex{border:1px solid var(--line-hi);border-radius:var(--radius-lg);padding:1.25rem 1.375rem;margin:1.75rem 0;
  background:color-mix(in srgb,var(--surface) 65%,transparent)}
.ex__k{display:block;font-family:var(--f-m);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:.75rem}
.ex p{margin:0 0 .625rem;font-size:.9375rem}
.ex p:last-child{margin:0}
.ex .num{color:var(--accent)}

/* Sources */
.src-box{border-top:1px solid var(--line);margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem}
.src-box__k{margin:0 0 .875rem;font-family:var(--f-m);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3)}
.src-box ul{list-style:none;margin:0;padding:0}
.src-box li{margin-bottom:.5rem;font-size:.875rem;color:var(--text-2)}
.src-box a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-hi)}
.src-box a:hover{color:var(--text)}
.src-box__n{margin-top:1rem;font-size:.8125rem;color:var(--text-3)}

/* Fil de lecture en tête d'article */
.a-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.a-meta span{display:inline-flex;align-items:baseline;gap:.4375rem;font-family:var(--f-m);
  font-size:.75rem;letter-spacing:.05em;color:var(--text-2);
  border:1px solid var(--line-hi);border-radius:999px;padding:.4375rem .8125rem}
.a-meta b{color:var(--text);font-weight:500}

/* Bloc de conversion en fin d'article */
.conv{border:1px solid var(--line-hi);border-radius:var(--radius-lg);padding:1.5rem;margin-top:2.5rem;
  background:var(--card-hi);box-shadow:inset 0 1px 0 rgba(238,240,243,.09)}
.conv h2{font-size:1.25rem;font-weight:700;letter-spacing:-.025em;margin:0 0 .625rem}
.conv p{margin:0 0 1.125rem;font-size:.9375rem}
.conv__b{display:flex;gap:.75rem;flex-wrap:wrap}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG
   Distinct du dossier « Sécurité laser » : celui-ci est une référence stable
   et groupée, le blog est une suite datée. D'où la date en évidence, le
   filtre par domaine, et l'absence de numérotation.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Filtre par domaine ─────────────────────────────────────────────────
   Collant sous l'en-tête : la liste est longue, le filtre doit rester
   sous la main. Aucun bouton plein : la discipline de couleur du site
   réserve les aplats aux pastilles de disponibilité. L'état actif se dit
   par la couleur du mot et un trait, jamais par un fond. */
.bfilt{position:sticky;top:var(--header-h);z-index:40;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line)}
.bfilt__in{display:flex;align-items:center;gap:.25rem;overflow-x:auto;
  scrollbar-width:none;padding:.5rem 24px}
.bfilt__in::-webkit-scrollbar{display:none}
.bfilt__b{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:.4375rem;
  background:none;border:0;cursor:pointer;padding:.625rem .75rem;
  font:500 .875rem var(--f-d);color:var(--text-2);letter-spacing:-.01em;
  border-bottom:2px solid transparent;transition:color var(--dur-f) var(--ease)}
.bfilt__b:hover{color:var(--text)}
.bfilt__b em{font-family:var(--f-m);font-style:normal;font-size:.6875rem;
  color:var(--text-3)}
.bfilt__b[aria-pressed="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.bfilt__b[aria-pressed="true"] em{color:var(--accent)}
.bfilt__b:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:4px}

/* ── Article à la une ───────────────────────────────────────────────────
   Un seul, horizontal, pour donner une entrée à la page. Il repasse en
   colonne sous 860 px, où l'image cesse d'être un demi-écran. */
.blead{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--card);margin-bottom:3rem;
  transition:border-color var(--dur-f) var(--ease)}
.blead:hover{border-color:var(--line-hi)}
@media (min-width:860px){.blead{grid-template-columns:46% 1fr;align-items:stretch}}
.blead__img{position:relative;overflow:hidden;background:var(--bg-alt);aspect-ratio:16/10}
@media (min-width:860px){.blead__img{aspect-ratio:auto;min-height:100%}}
.blead__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:scale var(--dur-s) var(--ease)}
.blead:hover .blead__img img{scale:1.03}
.blead__b{padding:clamp(1.5rem,3vw,2.25rem);display:flex;flex-direction:column;
  justify-content:center}
.blead__k{display:flex;align-items:center;gap:.625rem;margin-bottom:1rem;
  font-family:var(--f-m);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase}
.blead__k b{font-weight:500;color:var(--accent)}
.blead__k time{color:var(--text-3);letter-spacing:.06em}
.blead__t{font-size:clamp(1.375rem,2.6vw,1.875rem);font-weight:700;letter-spacing:-.03em;
  line-height:1.15;margin:0 0 .875rem;text-wrap:balance}
.blead__t a{color:var(--text);text-decoration:none}
.blead__t a::after{content:"";position:absolute;inset:0}
.blead{position:relative}
.blead__d{margin:0 0 1.5rem;color:var(--text-2);max-width:56ch}
.blead__f{display:flex;align-items:center;gap:.875rem;font-family:var(--f-m);
  font-size:.75rem;color:var(--text-3)}
.blead__go{margin-left:auto;color:var(--text-2);transition:color var(--dur-f) var(--ease)}
.blead:hover .blead__go{color:var(--accent)}

/* ── Grille des billets ─────────────────────────────────────────────── */
.bgrid{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
@media (min-width:660px){.bgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.bgrid{grid-template-columns:repeat(3,1fr)}}
.bpost{position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--card);transition:border-color var(--dur-f) var(--ease),
  translate var(--dur-f) var(--ease)}
.bpost:hover{border-color:var(--line-hi);translate:0 -2px}
.bpost__img{aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt)}
.bpost__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:scale var(--dur-s) var(--ease)}
.bpost:hover .bpost__img img{scale:1.04}
.bpost__b{padding:1.25rem;display:flex;flex-direction:column;flex:1}
.bpost__k{display:flex;align-items:center;gap:.5625rem;margin-bottom:.75rem;
  font-family:var(--f-m);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase}
.bpost__k b{font-weight:500;color:var(--accent)}
.bpost__k time{color:var(--text-3);letter-spacing:.06em}
.bpost__t{font-size:1.0625rem;font-weight:600;letter-spacing:-.018em;line-height:1.3;
  margin:0 0 .5rem}
.bpost__t a{color:var(--text);text-decoration:none}
.bpost__t a::after{content:"";position:absolute;inset:0}
.bpost__d{margin:0 0 1.125rem;font-size:.9375rem;line-height:1.55;color:var(--text-2)}
.bpost__f{margin-top:auto;padding-top:.875rem;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--f-m);font-size:.6875rem;color:var(--text-3)}
.bpost__go{color:var(--text-2);transition:color var(--dur-f) var(--ease)}
.bpost:hover .bpost__go{color:var(--accent)}

/* Masquage par le filtre. Attribut plutôt que classe : l'état est lisible
   dans l'inspecteur et ne peut pas entrer en conflit avec les animations
   de révélation, qui travaillent, elles, sur .rv/.in. */
.bpost[hidden],.blead[hidden]{display:none}

/* ── Aucun résultat ─────────────────────────────────────────────────────
   Ne peut apparaître que si le filtre est actif : la page non filtrée
   montre toujours au moins un billet. */
.bempty{display:none;padding:4rem 0;text-align:center}
.bempty[data-on="1"]{display:block}
.bempty p{margin:0 auto .875rem;color:var(--text-2);max-width:44ch}
.bempty button{background:none;border:1px solid var(--line-hi);border-radius:999px;
  padding:.5rem 1.125rem;font:500 .875rem var(--f-d);color:var(--text);cursor:pointer;
  transition:border-color var(--dur-f) var(--ease)}
.bempty button:hover{border-color:var(--accent)}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMULAIRE D'INSCRIPTION
   Le site ne vend pas en ligne : ce formulaire produit une demande, pas une
   commande. Il collecte donc ce qu'il faut pour éditer une convention et une
   facture, rien de plus. Aucun champ n'est demandé « au cas où ».

   Défaillant-sûr : le balisage est un formulaire natif qui fonctionne sans
   JavaScript. Le script n'ajoute que le confort, lignes de participants
   supplémentaires et envoi sans rechargement.
   ═══════════════════════════════════════════════════════════════════════ */

.form{max-width:none}
.form__s{margin:0 0 2.5rem;padding:0 0 2.5rem;border-bottom:1px solid var(--line)}
.form__s:last-of-type{border-bottom:0}
.form__k{margin:0 0 .25rem;font-family:var(--f-m);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.form__t{margin:0 0 1.5rem;font-size:1.125rem;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.form__n{margin:.5rem 0 0;font-size:.875rem;color:var(--text-3);max-width:60ch}

/* Grille de champs. Deux colonnes dès qu'il y a la place, jamais avant :
   un champ étroit sur mobile se remplit mal. */
.flds{display:grid;gap:1.125rem}
@media (min-width:720px){.flds{grid-template-columns:1fr 1fr}
  .fld--w{grid-column:1 / -1}}

.fld{display:flex;flex-direction:column;gap:.4375rem;min-width:0}
.fld label{font-size:.875rem;font-weight:500;color:var(--text-2);letter-spacing:-.005em}
.fld label .req{color:var(--accent);margin-left:.15em}
.fld input,.fld select,.fld textarea{
  width:100%;padding:.6875rem .875rem;font:400 .9375rem var(--f-d);color:var(--text);
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color var(--dur-f) var(--ease),background var(--dur-f) var(--ease)}
.fld textarea{min-height:6.5rem;resize:vertical;line-height:1.55}
.fld select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),
                   linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.5rem}
.fld input::placeholder,.fld textarea::placeholder{color:var(--text-3);opacity:.75}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--line-hi)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--accent);background:var(--surface)}
/* La validation native ne se déclenche qu'après une tentative d'envoi :
   sans :user-invalid, un champ vide serait rouge avant d'être touché. */
.fld input:user-invalid,.fld textarea:user-invalid{border-color:var(--full)}
.fld__h{font-size:.8125rem;color:var(--text-3)}

/* Choix de la formation : des cartes plutôt qu'une liste déroulante, parce
   que le prix et la durée doivent être lisibles au moment du choix. */
.pick{display:grid;gap:.75rem}
@media (min-width:720px){.pick{grid-template-columns:repeat(3,1fr)}}
.pick label{position:relative;display:block;padding:1rem 1.125rem;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:border-color var(--dur-f) var(--ease)}
.pick label:hover{border-color:var(--line-hi)}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick input:focus-visible + .pick__c{outline:2px solid var(--accent);outline-offset:6px;border-radius:4px}
.pick input:checked ~ .pick__m{opacity:1}
.pick label:has(input:checked){border-color:var(--accent)}
.pick__c{display:block;font-size:.9375rem;font-weight:600;color:var(--text);letter-spacing:-.015em}
.pick__d{display:block;margin-top:.3125rem;font-family:var(--f-m);font-size:.6875rem;
  letter-spacing:.04em;color:var(--text-3)}
.pick__m{position:absolute;top:1rem;right:1.125rem;width:.5rem;height:.5rem;border-radius:999px;
  background:var(--accent);opacity:0;transition:opacity var(--dur-f) var(--ease)}

/* Participants. Trois lignes servies d'emblée : sans JavaScript, le
   formulaire reste utilisable pour un groupe. */
.parts{display:grid;gap:1rem}
.part{display:grid;gap:.75rem;padding:1rem;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-lg)}
@media (min-width:720px){.part{grid-template-columns:1fr 1fr 1fr}}
.part__n{grid-column:1 / -1;margin:0;font-family:var(--f-m);font-size:.625rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.parts__add{justify-self:start;background:none;border:1px dashed var(--line-hi);
  border-radius:999px;padding:.5rem 1.125rem;font:500 .875rem var(--f-d);color:var(--text-2);
  cursor:pointer;transition:border-color var(--dur-f) var(--ease),color var(--dur-f) var(--ease)}
.parts__add:hover{border-color:var(--accent);color:var(--text)}
.parts__add[hidden]{display:none}

/* Consentement */
.cons{display:flex;gap:.75rem;align-items:flex-start;
  padding:1.125rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg)}
.cons input{flex:0 0 auto;margin-top:.15rem;width:1.0625rem;height:1.0625rem;
  accent-color:var(--accent);cursor:pointer}
.cons span{font-size:.875rem;line-height:1.55;color:var(--text-2)}

/* Piège à robots : invisible pour l'œil, lisible pour un script. Hors du
   flux plutôt que display:none, que certains automates détectent. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Envoi et retour */
.form__go{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;margin-top:.5rem}
.form__go .btn[disabled]{opacity:.55;pointer-events:none}
.form__msg{margin:0;font-size:.875rem;line-height:1.5;max-width:52ch}
.form__msg--ok{color:var(--open)}
.form__msg--no{color:var(--full)}

/* Confirmation, après envoi réussi */
.done{padding:2.5rem;background:var(--card);border:1px solid var(--line-hi);
  border-radius:var(--radius-lg);text-align:center}
.done h2{margin:0 0 .75rem;font-size:1.5rem;font-weight:700;letter-spacing:-.03em;color:var(--text)}
.done p{margin:0 auto 1.5rem;color:var(--text-2);max-width:52ch}