/*
Theme Name: CGF — Le Registre Vivant du fenua
Theme URI: https://www.cgf.pf
Author: PACIFIK'AI — Jordy TOOFA
Description: Thème du Centre de Gestion et de Formation (fonction publique communale de Polynésie française). Grammaire de registre officiel vivant, charte CGF, 100% français, accessible, sobre.
Version: 2.1
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: cgf
*/

:root{
  --ink:#0a2236; --ink-2:#123249;
  --teal:#1f7d86; --teal-d:#155e66; --teal-l:#4aa8b1;
  --coral:#e2512a;            /* corail décoratif (filets, aplats) */
  --coral-txt:#bb3c1a;        /* corail texte/action — AA sur paper (>=4.5) */
  --coral-d:#a5361a;
  --paper:#fbf7f0; --paper-2:#f4ede1; --card:#ffffff;
  --line:#e4dccd;            /* filet réglé (hairline) sur paper */
  --line-dk:rgba(255,255,255,.14); /* filet sur navy */
  --muted:#5b646c; --muted-2:#8a939b;
  --f:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1220px;
  /* 5 rôles de texte courant : 12 · 14 · 16 · 18 · 20 (display = clamps à part) */
  --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem; --t-md:1.125rem; --t-lg:1.25rem;
}
*{box-sizing:border-box}
html{font-size:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--f);color:var(--ink);background:var(--paper);
  font-size:var(--t-base);line-height:1.6;-webkit-font-smoothing:antialiased;
  font-feature-settings:"kern";text-rendering:optimizeLegibility}
/* grain organique très léger */
body::before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3,h4{margin:0}
h1,h2{line-height:1.08;letter-spacing:-.022em}
h3{line-height:1.2;letter-spacing:-.008em}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--coral-txt);outline-offset:3px;border-radius:2px}
.colophon a:focus-visible,.indexbar a:focus-visible,.roll a:focus-visible{outline-color:#ffd9cc}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.tab{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
/* a11y — lien d'évitement (caché hors focus) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 6px 0;font-weight:700}
.skip-link:focus{left:0}

/* ══════════════ MASTHEAD — grammaire de registre officiel ══════════════
   colophon (ordonnance) + rang d'identité + index nommé style GOV.UK.
   Statique — pas de blur, pas de points colorés, pas de pilule. */
.colophon{background:var(--ink);color:#c8d6df}
.colophon .wrap{display:flex;align-items:center;gap:6px 22px;padding:11px 0;
  font-size:var(--t-xs);letter-spacing:.02em;flex-wrap:wrap}
.colophon .seal{font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#fff}
.colophon .ord{color:#9fb2bd}
.colophon .c-r{margin-left:auto;display:flex;gap:16px}
.colophon .c-r a{color:#c8d6df}
.colophon .c-r a:hover{color:#fff}

.brandrow{background:var(--paper);border-bottom:1px solid var(--line)}
.brandrow .wrap{display:flex;align-items:center;gap:16px;min-height:80px}
.brand{display:flex;align-items:center;gap:16px}
.brand img{height:56px;width:auto}
.brand .bn{font-weight:800;font-size:1.25rem;letter-spacing:.01em;line-height:1;color:var(--ink)}
.brand .bn small{display:block;font-weight:500;font-size:var(--t-xs);letter-spacing:.005em;color:var(--muted);margin-top:4px}
.brand .bn i{display:block;font-style:italic;font-weight:500;font-size:var(--t-xs);color:var(--teal-d);margin-top:4px}
/* Bouton d'accès à l'espace personnel — clair (icône + libellé), vrai hover, aucun trait fantôme */
.myspace{margin-left:auto;display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:var(--t-sm);
  color:var(--ink);padding:10px 18px;border:1.5px solid var(--line);border-radius:8px;background:#fff;
  transition:border-color .18s,background .18s,color .18s}
.myspace:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.myspace .ms-i{width:17px;height:17px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* index nommé — barre de rubriques (tabs) navy, non-slop */
.indexbar{background:var(--ink-2);color:#eaf1f5}
.indexbar .wrap{display:flex;gap:8px;flex-wrap:wrap}
.indexbar .ix-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;width:100%}
.indexbar li{display:flex}
.indexbar a{position:relative;font-weight:600;font-size:var(--t-base);color:#eaf1f5;padding:16px 20px}
.indexbar a::after{content:"";position:absolute;left:20px;right:20px;bottom:8px;height:2.5px;background:var(--teal-l);
  border-radius:3px 3px 0 0;transform:scaleX(0);transform-origin:left;transition:transform .2s}
.indexbar a:hover{color:#fff}
.indexbar a:hover::after{transform:scaleX(1)}

/* ══════════════ HERO — frontispice plein cadre (le fenua EN PROFONDEUR, pas en vignette) ══════════════ */
/* Fond navy plein-bleed + image d'ambiance de l'atoll fondue en TEXTURE (le lagon = lueur teal en
   haut-droite, comme un feu dans la nuit chez Bonfire) + voile dégradé pour la lisibilité. Copie claire,
   type très grand, une ligne d'accent chaude. Le hero (sombre) coule dans le rôle d'appel (sombre) sans
   couture. overflow:clip pour le tifaifai. isolation pour borner les z-index négatifs des couches. */
.hero{position:relative;overflow:clip;background:var(--ink);color:#fff;isolation:isolate}
/* couche RÉSEAU = la carte 3D vivante des 48 communes (canvas, remplace l'image atoll) — derrière la copie */
.hero-net{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
/* voile dégradé : la copie reste NETTE à gauche, le réseau respire à droite + bas assombri pour le tally */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(100deg,rgba(7,23,38,.95) 0%,rgba(7,23,38,.8) 42%,rgba(7,23,38,.4) 66%,rgba(7,23,38,.14) 100%),
  linear-gradient(180deg,transparent 56%,rgba(7,23,38,.5))}
.hero .wrap{position:relative;padding:98px 28px 82px}
.hero-copy{max-width:840px}
/* kicker de registre — PAS de pill arrondie (= AI slop). Filet réglé sous un libellé sobre. */
.folio{display:inline-flex;align-items:baseline;gap:12px;font-size:var(--t-sm);color:#a7b8c3;
  margin-bottom:22px;letter-spacing:.01em}
.folio .no{font-weight:800;color:#ff8a5c;letter-spacing:.08em;text-transform:uppercase;font-size:var(--t-xs)}
.folio .dv{color:rgba(255,255,255,.28)}
.hero h1{font-size:clamp(1.65rem,3.1vw,2.45rem);font-weight:700;color:#fff;letter-spacing:-.02em;max-width:22ch;line-height:1.14}
.hero h1 .u{color:#ff7a4d}
.hero .reo{margin:18px 0 0;font-style:italic;font-size:var(--t-md);color:var(--teal-l);max-width:46ch}
.hero .lede{margin:16px 0 34px;font-size:var(--t-md);color:#c6d4dd;max-width:54ch;line-height:1.55}
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.act{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--t-base);
  background:var(--coral-txt);color:#fff;padding:16px 26px;border-radius:6px;
  transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 14px 30px -14px rgba(226,81,42,.7)}
.act:hover{background:var(--coral-d);transform:translateY(-2px)}
.act.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.28);color:#fff;box-shadow:none}
.act.ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.52)}
.qindex{display:block;margin-top:22px;font-size:var(--t-base);color:#9fb2bd}
.qindex b{color:#eaf1f5;font-weight:600}
.qindex a{color:var(--teal-l);font-weight:600;border-bottom:1.5px solid transparent;transition:border-color .18s}
.qindex a:hover{border-color:var(--teal-l)}
.tally{display:flex;gap:52px;margin-top:56px;padding-top:34px;border-top:1px solid var(--line-dk);flex-wrap:wrap}
.tally .t .n{font-size:1.85rem;font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em}
.tally .t.c .n{color:#ff8a5c}
.tally .t .l{font-size:var(--t-xs);color:#9fb2bd;margin-top:10px;max-width:14ch;letter-spacing:.02em}

/* ══════════════ RÔLE D'APPEL VIVANT — les 48 communes (signature) ══════════════ */
.roll{background:var(--ink);color:#fff;position:relative;overflow:hidden;border-top:3px solid var(--coral)}
.roll .head{display:flex;align-items:center;gap:16px;padding:16px 28px;max-width:var(--wrap);margin:0 auto;
  border-bottom:1px solid var(--line-dk)}
.roll .head .tt{font-weight:800;letter-spacing:.02em;font-size:var(--t-base)}
.roll .head .sub{color:#9fb2bd;font-size:var(--t-sm)}
.roll .head .live{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:var(--t-sm);color:#bfe3d4}
.roll .head .live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal-l)}
.rollband{overflow:hidden;padding:8px 0}
.marq{display:flex;width:max-content;animation:scroll 72s linear infinite}
.roll:hover .marq{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marq .cell{display:flex;align-items:baseline;gap:12px;padding:16px 24px;white-space:nowrap;
  border-right:1px solid var(--line-dk)}
.marq .cell .idx{font-size:var(--t-xs);color:var(--teal-l);font-weight:700}
.marq .cell .nm{font-size:var(--t-base);color:#eef4f7;font-weight:500}
.marq .cell .ar{font-size:var(--t-xs);color:var(--muted-2);letter-spacing:.06em;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){.marq{animation:none;flex-wrap:wrap;width:auto}}

/* ══════════════ SECTIONS — cadre commun ══════════════ */
/* fond opaque OBLIGATOIRE : les sections sont des COUCHES au-dessus du hero/footer épinglés */
.section{padding:80px 0;background:var(--paper)}
.section.alt{background:var(--paper-2)}
.reg-head{position:relative;display:flex;align-items:flex-start;gap:20px;margin-bottom:40px;
  padding-bottom:20px}
.reg-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink);
  transform-origin:left}
.reg-head .art{font-size:var(--t-sm);font-weight:800;color:var(--coral-txt);letter-spacing:.04em;
  white-space:nowrap;padding-top:8px}
.reg-head .tt h2{font-size:clamp(1.65rem,2.2vw,1.9rem);font-weight:800;color:var(--ink)}
.reg-head .tt p{margin:8px 0 0;color:var(--ink-2);font-size:var(--t-md);max-width:60ch}

/* 3 portes = articles du registre */
.portes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.porte{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;transition:transform .22s,box-shadow .22s}
.porte:hover{transform:translateY(-6px);box-shadow:0 24px 48px -28px rgba(10,34,54,.42)}
.porte .top-arch{position:absolute;top:0;left:0;right:0;height:6px}
.porte.p1 .top-arch{background:var(--teal)} .porte.p2 .top-arch{background:var(--coral)} .porte.p3 .top-arch{background:var(--ink)}
.porte .bd{padding:36px 24px 28px}
.porte .chip{display:inline-block;font-size:var(--t-xs);font-weight:700;letter-spacing:.03em;
  padding:4px 12px;border-radius:3px;margin-bottom:12px}
.porte.p1 .chip{background:#d8e9ea;color:#0e4d54}
.porte.p2 .chip{background:#fbe0d7;color:var(--coral-d)}
.porte.p3 .chip{background:#e3ebef;color:var(--ink)}
.porte h3{font-size:var(--t-lg);font-weight:700;margin-bottom:8px}
.porte p{color:var(--muted);font-size:var(--t-base);margin:0 0 16px;line-height:1.5}
.porte .go{font-weight:700;color:var(--coral-txt);display:inline-flex;gap:8px;align-items:center;transition:gap .18s}
.porte .go:hover{gap:12px}

/* ══════════════ CONCOURS — ledger réglé à numéros d'ordre ══════════════ */
.ledger{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);
  border-radius:10px;overflow:hidden}
.ledger thead th{text-align:left;font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--ink);padding:16px 20px}
.ledger tbody td{padding:16px 20px;border-top:1px solid var(--line);font-size:var(--t-base);vertical-align:middle}
.ledger tbody tr:hover{background:var(--paper)}
.ledger .no{font-weight:800;color:var(--muted-2);width:52px}
.ledger .it{font-weight:700;color:var(--ink)}
.ledger .cat{display:inline-block;font-weight:800;font-size:var(--t-xs);padding:4px 8px;border-radius:3px;
  background:var(--ink);color:#fff}
.ledger .cloture{color:var(--ink-2);white-space:nowrap}
.ledger .ep{color:var(--muted);font-size:var(--t-sm)}
.ledger .st{font-size:var(--t-sm);font-weight:600;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.ledger .st::before{content:"";width:9px;height:9px;border-radius:50%;flex-shrink:0}
.st.open{color:var(--teal-d)} .st.open::before{background:var(--teal)}
.st.soon{color:#8a6216} .st.soon::before{background:#c8912f}
.st.done{color:var(--muted)} .st.done::before{background:var(--muted-2)}
.ledger-foot{margin-top:16px;font-size:var(--t-base);color:var(--muted);max-width:58ch}
.ledger-foot a{color:var(--coral-txt);font-weight:600;border-bottom:1.5px solid transparent}
.ledger-foot a:hover{border-color:var(--coral-txt)}

/* ══════════════ FORMATION — liste + panneau archipels ══════════════ */
.form-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:32px;align-items:start}
.f-list{display:flex;flex-direction:column}
.f-item{display:flex;gap:20px;align-items:baseline;padding:20px 0;border-top:1px solid var(--line)}
.f-item:first-child{border-top:0}
.f-item .d{font-size:var(--t-sm);font-weight:800;color:var(--teal-d);white-space:nowrap;min-width:60px}
.f-item h4{font-size:var(--t-md);font-weight:700;margin:0 0 4px}
.f-item p{margin:0;font-size:var(--t-base);color:var(--muted);line-height:1.5}
.archp{background:var(--ink);color:#fff;border-radius:12px;padding:32px 28px}
.archp h3{font-size:var(--t-lg);margin-bottom:4px}
.archp .sb{color:#9fb2bd;font-size:var(--t-sm);margin-bottom:20px}
.ar{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--line-dk);font-size:var(--t-base)}
.ar:last-child{border-bottom:0}
.ar .dt{color:#a9bdc9;font-size:var(--t-sm);text-align:right}

/* ══════════════ ROLL-CALL COMPLET 01–48 ══════════════ */
.rollcall{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.rc-col h4{font-size:var(--t-sm);font-weight:800;color:var(--coral-txt);letter-spacing:.02em;
  padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:4px}
.rc-col ul{list-style:none;margin:0;padding:0}
.rc-col li{display:flex;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);
  font-size:var(--t-base)}
.rc-col li .i{font-size:var(--t-xs);font-weight:700;color:var(--muted-2);min-width:24px}

/* ══════════════ MISSIONS — 4 articles ══════════════ */
.missions{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.mission{display:flex;gap:20px;padding:28px 24px;border-bottom:1px solid var(--line)}
.mission:nth-child(odd){border-right:1px solid var(--line)}
.mission .num{font-size:1.65rem;font-weight:800;color:var(--teal);line-height:1;flex-shrink:0;letter-spacing:-.02em}
.mission h3{font-size:var(--t-md);margin-bottom:8px}
.mission p{margin:0;color:var(--muted);font-size:var(--t-base);line-height:1.5}

/* ══════════════ ACTUALITÉS — entrées datées ══════════════ */
.actus{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.actu{padding:24px;border-bottom:1px solid var(--line);transition:background .18s}
.actu:not(:last-child){border-right:1px solid var(--line)}
.actu:hover{background:var(--paper-2)}
.actu .dt{font-size:var(--t-sm);color:var(--muted)}
.actu .ct{display:inline-block;font-size:var(--t-xs);font-weight:700;letter-spacing:.03em;
  color:var(--coral-d);margin:8px 0}
.actu h3{font-size:var(--t-md);margin-bottom:8px;line-height:1.25}
.actu p{margin:0;color:var(--muted);font-size:var(--t-base);line-height:1.5}

/* ══════════════ CONTACT ══════════════ */
.contact{background:var(--paper-2);border-top:1px solid var(--line)}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:72px 28px;align-items:center}
.contact h2{font-size:clamp(1.65rem,2vw,1.85rem);margin-bottom:16px;letter-spacing:-.02em}
.contact p{color:var(--ink-2);max-width:42ch;font-size:var(--t-md)}
.info{display:flex;flex-direction:column;gap:0;background:var(--ink);color:#fff;
  border-radius:12px;padding:16px 32px}
.info .row{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line-dk)}
.info .row:last-child{border-bottom:0}
.info .k{font-weight:700;min-width:104px;color:var(--teal-l);font-size:var(--t-sm)}

/* ══════════════ BANDE OCÉAN — moment atmosphérique pleine largeur ══════════════ */
.oceanband{position:relative;overflow:hidden;background:var(--ink);color:#fff}
.oceanband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}
.oceanband::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,20,33,.94),rgba(6,20,33,.62) 58%,rgba(6,20,33,.28))}
.oceanband .wrap{position:relative;z-index:2;padding:78px 28px}
.oceanband h2{font-size:clamp(1.65rem,2.4vw,2rem);font-weight:800;letter-spacing:-.02em;max-width:24ch;color:#fff;line-height:1.12}
.oceanband p{margin:16px 0 28px;color:#cfe0e8;font-size:var(--t-md);max-width:54ch;line-height:1.55}

/* ══════════════ FOOTER — reveal (épinglé au bas, la page se soulève et le dévoile) — HOME uniquement ══════════════ */
footer{background:var(--ink);color:#c1d0da;padding:52px 0 32px}
footer .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
footer .fbrand img{height:60px;margin-bottom:16px}
footer .fbrand .reo{font-size:var(--t-sm);color:#9fb2bd;font-style:italic;max-width:26ch}
footer .col h4{font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:16px}
footer .col a{display:block;color:#adc0cd;font-size:var(--t-sm);padding:4px 0}
footer .col a:hover{color:#fff}
.subfoot{grid-column:1/-1;border-top:1px solid var(--line-dk);margin-top:36px;padding-top:24px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:var(--t-xs);color:#9fb2bd}
.subfoot a{color:#9fb2bd;margin-right:16px}
.subfoot a:hover{color:#fff}

/* ══════════════ REVEALS AU SCROLL — genre cps.pf (AOS fade-up + stagger), cross-browser (IntersectionObserver).
   Caché UNIQUEMENT si JS actif (html.reveal-on) => zéro FOUC / no-JS = tout visible.
   opacity+transform seulement (compositor). reduced-motion => tout visible, aucune transition. */
html.reveal-on .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms);will-change:opacity,transform}
html.reveal-on .reveal.r-right{transform:translateX(24px)}
html.reveal-on .reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.reveal-on .reveal{opacity:1;transform:none;transition:none}}

/* ══════════════ MOTION + PROFONDEUR v2 (panel design 2026-07-13) ══════════════
   Profondeur STATIQUE des bandes navy + coutures qui se tracent + reveals directionnels
   + micro-profondeur hover + signature « l'appel du rôle ». Compositor-only, reduced-motion/no-JS safe.
   Le HERO est GELÉ (déjà validé) — aucune règle ici ne le touche. */

/* — Move 1 : le filet du reg-head se DESSINE au reveal (recycle .is-in de reveal.js, 0 JS) — */
html.reveal-on .reg-head::after{transform:scaleX(0);transition:transform .8s cubic-bezier(.22,.61,.36,1) .12s}
html.reveal-on .reg-head.is-in::after{transform:scaleX(1)}
html:not(.reveal-on) .reg-head::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){html.reveal-on .reg-head::after{transform:scaleX(1);transition:none}}

/* — Move 2 : profondeur STATIQUE des bandes navy (mesh + top-light + vignette, aucune anim) — */
.roll,.archp,.info,footer{position:relative;isolation:isolate}
.roll::before,.archp::before,.info::before,footer::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 80% at 88% -12%,rgba(74,168,177,.16),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.05),transparent 22%),
    radial-gradient(150% 120% at 50% 122%,rgba(0,0,0,.32),transparent 62%)}
.archp::before,.info::before{border-radius:12px}
.roll .head,.rollband,.archp>*,.info>*,footer .wrap{position:relative;z-index:1}

/* — Move 3 : ledger qui s'inscrit ligne à ligne (opacity-only : jamais de transform sur un <tr>) — */
html.reveal-on .ledger tbody.reveal-group>tr.reveal{opacity:0;transform:none;transition:opacity .55s ease;transition-delay:var(--d,0ms)}
html.reveal-on .ledger tbody.reveal-group>tr.reveal.is-in{opacity:1}
@media(prefers-reduced-motion:reduce){html.reveal-on .ledger tbody.reveal-group>tr.reveal{opacity:1;transition:none}}

/* — Move 5 : les communes du marquee naissent/s'effacent dans le navy (fondu aux bords) — */
.rollband{-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}

/* — Move 4 : SIGNATURE « l'appel du rôle » — curseur ordinal 00/48 + réponse des communes — */
.rollcount{margin-left:auto;display:flex;align-items:baseline;gap:8px;padding-top:2px}
.rollcount .rc-cur{min-width:2ch;font-size:clamp(1.6rem,2.7vw,2.15rem);font-weight:800;color:var(--ink);line-height:.9;letter-spacing:-.03em}
.rollcount .rc-tot{font-size:var(--t-lg);font-weight:700;color:var(--muted-2)}
.rollcount .rc-d{font-size:var(--t-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;line-height:1.15;margin-left:4px;align-self:center}
.rollcount.done .rc-cur{color:var(--coral-txt)}
.rc-col li .i{transition:color .3s ease}
html.reveal-on .rollcall.rc-armed .rc-col li{opacity:0;transform:translateX(-10px);transition:opacity .45s ease,transform .45s cubic-bezier(.22,.61,.36,1)}
html.reveal-on .rollcall.rc-armed .rc-col li.called{opacity:1;transform:none}
html.reveal-on .rollcall.rc-armed .rc-col li.called .i{color:var(--teal-d)}
@media(prefers-reduced-motion:reduce){html.reveal-on .rollcall .rc-col li,html.reveal-on .rollcall.rc-armed .rc-col li{opacity:1;transform:none;transition:none}}

/* — Move 6 : les 3 portes deviennent 3 articles (filigrane ordinal + filet + soulignement tracé + rail) — */
.porte .bd{position:relative;z-index:1}
.porte::after{position:absolute;top:8px;right:16px;font-weight:800;line-height:1;font-size:5.5rem;letter-spacing:-.04em;
  color:var(--ink);opacity:.05;pointer-events:none;font-variant-numeric:tabular-nums;transition:opacity .22s,transform .22s;z-index:0}
.porte.p1::after{content:"I"} .porte.p2::after{content:"II"} .porte.p3::after{content:"III"}
.porte:hover::after{opacity:.09;transform:translateY(-2px)}
.porte h3{padding-bottom:12px;border-bottom:1px solid var(--line)}
.porte .go{position:relative}
.porte .go::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1.5px;background:var(--coral-txt);transition:right .25s}
.porte:hover .go::after{right:0}
.porte::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:2;background:var(--teal);transform:scaleY(0);transform-origin:top;transition:transform .25s}
.porte.p2::before{background:var(--coral)} .porte.p3::before{background:var(--ink)}
.porte:hover::before{transform:scaleY(1)}
@media(prefers-reduced-motion:reduce){.porte::after,.porte::before,.porte .go::after{transition:none}}

/* — Move 7a : micro-profondeur au survol des surfaces plates — */
.ledger tbody tr{transition:background .18s,box-shadow .22s,transform .22s}
.ledger tbody tr:hover{transform:translateY(-1px);box-shadow:0 14px 30px -20px rgba(10,34,54,.4);position:relative;z-index:1}
.ledger tbody td:first-child{box-shadow:inset 3px 0 0 transparent;transition:box-shadow .22s}
.ledger tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--teal)}
.actu{transition:background .18s,box-shadow .22s,transform .22s}
.actu:hover{transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(10,34,54,.4);position:relative;z-index:1}
.mission{transition:background .2s}
.mission:hover{background:linear-gradient(180deg,rgba(31,125,134,.05),transparent)}
.rc-col li:hover .i{color:var(--teal-d)}   /* ordinal qui s'illumine — pas de décalage (élément non-cliquable) */
@media(prefers-reduced-motion:reduce){.ledger tbody tr:hover,.actu:hover{transform:none}}

/* — Move 7b : parallaxe de l'atoll oceanband (bookend qui répond au hero, 0 JS) — */
@supports (animation-timeline: view()){
  @media(prefers-reduced-motion:no-preference){
    .oceanband>img{top:-8%;bottom:auto;height:116%;will-change:transform;animation:oceandrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes oceandrift{from{transform:translateY(-6%)}to{transform:translateY(6%)}}}}

/* ══════════════ PAGES INTERNES — en-tête, contenu, hubs, bourse, formations, fiches ══════════════
   Le CSS ne couvrait que la home : ces classes rendaient les pages internes NUES. Design cohérent charte. */

/* — En-tête de page (bandeau navy compact + fil d'Ariane) — */
.page-head{position:relative;overflow:clip;background:var(--ink);color:#fff;isolation:isolate}
.page-head::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(80% 92% at 88% -12%,rgba(31,125,134,.22),transparent 58%),
  linear-gradient(180deg,rgba(255,255,255,.045),transparent 32%),
  radial-gradient(150% 140% at 50% 128%,rgba(0,0,0,.28),transparent 62%)}
.page-head .tifaifai{display:none}
.page-head .wrap{padding:42px 28px 40px}
.page-head .bc{display:flex;flex-wrap:wrap;align-items:center;font-size:var(--t-sm);color:#9fb2bd;margin-bottom:16px}
.page-head .bc a{color:#9fb2bd;transition:color .18s}
.page-head .bc a:hover{color:#fff}
.page-head .bc [aria-current]{color:#eaf1f5;font-weight:600}
.page-head h1{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;color:#fff;letter-spacing:-.022em;max-width:24ch;line-height:1.14}
.page-head .intro{margin:14px 0 0;font-size:var(--t-md);color:#c6d4dd;max-width:62ch;line-height:1.55}

/* — Corps + typographie de contenu — */
.page-body{padding:60px 0 84px;background:var(--paper)}
.entry{max-width:72ch;font-size:var(--t-md);line-height:1.75;color:var(--ink-2)}
.entry>*+*{margin-top:1.1em}
.entry h2{font-size:clamp(1.5rem,2.2vw,1.8rem);font-weight:800;color:var(--ink);letter-spacing:-.015em;margin-top:1.7em;line-height:1.2}
.entry h2:first-child{margin-top:0}
.entry h3{font-size:var(--t-lg);font-weight:700;color:var(--ink);margin-top:1.5em}
.entry h4{font-size:var(--t-md);font-weight:700;color:var(--ink);margin-top:1.3em}
.entry p{margin:0}
.entry a{color:var(--coral-txt);font-weight:600;border-bottom:1.5px solid rgba(187,60,26,.32);transition:border-color .18s}
.entry a:hover{border-color:var(--coral-txt)}
.entry strong{color:var(--ink);font-weight:700}
.entry ul,.entry ol{margin:0;padding-left:1.3em}
.entry li{margin:.4em 0}
.entry ul li::marker{color:var(--teal-d)}
.entry blockquote{margin:0;padding:6px 0 6px 22px;border-left:3px solid var(--coral);color:var(--ink);font-style:italic;font-size:var(--t-lg)}
.entry hr{border:0;border-top:1px solid var(--line);margin:1.6em 0}
.entry table{width:100%;border-collapse:collapse;font-size:var(--t-base);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.entry thead th{text-align:left;background:var(--ink);color:#fff;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;padding:12px 16px}
.entry tbody td{padding:12px 16px;border-top:1px solid var(--line)}
.entry img{border-radius:8px;height:auto}

/* — Hub de rubrique (cartes des sous-pages) — */
.rub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px;margin-top:6px}
.rub-card{position:relative;display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:26px 24px 24px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.rub-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal);transform:scaleY(0);transform-origin:top;transition:transform .22s}
.rub-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -28px rgba(10,34,54,.42)}
.rub-card:hover::before{transform:scaleY(1)}
.rub-card h3{font-size:var(--t-lg);font-weight:700;color:var(--ink);margin:0 0 8px;display:flex;align-items:center;gap:9px}
.rub-card h3::after{content:"→";color:var(--coral-txt);transition:transform .18s}
.rub-card:hover h3::after{transform:translateX(4px)}
.rub-card p{margin:0;color:var(--muted);font-size:var(--t-base);line-height:1.5}

/* — Bourse de l'emploi : filtres + offres + pagination — */
.cgf-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;padding:20px 22px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:10px;margin-bottom:32px}
.cgf-filters label{display:flex;flex-direction:column;gap:6px;font-size:var(--t-sm);font-weight:700;color:var(--ink)}
.cgf-filters select{font-family:inherit;font-size:var(--t-base);padding:10px 14px;border:1.5px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);min-width:180px}
.cgf-filters .fbtn{font-family:inherit;font-weight:700;font-size:var(--t-base);color:#fff;background:var(--coral-txt);border:0;padding:12px 22px;border-radius:7px;cursor:pointer;transition:background .18s}
.cgf-filters .fbtn:hover{background:var(--coral-d)}
.cgf-filters .freset{font-size:var(--t-sm);color:var(--muted);font-weight:600;align-self:center}
.cgf-filters .freset:hover{color:var(--coral-txt)}
.offre-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.offre{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px 22px 20px;transition:transform .2s,box-shadow .2s}
.offre:hover{transform:translateY(-4px);box-shadow:0 22px 44px -28px rgba(10,34,54,.42)}
.otop{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ocat,.oarch{font-size:var(--t-xs);font-weight:700;letter-spacing:.03em;padding:4px 10px;border-radius:4px}
.ocat{background:var(--ink);color:#fff}
.oarch{background:#d8e9ea;color:#0e4d54}
.offre h3{font-size:var(--t-md);font-weight:700;color:var(--ink);margin:0 0 8px;line-height:1.3}
.ometa{font-size:var(--t-sm);color:var(--muted);margin-bottom:16px}
.ogo{margin-top:auto;font-weight:700;color:var(--coral-txt);font-size:var(--t-base);display:inline-flex;gap:6px;transition:gap .18s}
.ogo:hover{gap:11px}
.pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:40px}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:7px;font-weight:700;font-size:var(--t-sm);color:var(--ink);background:#fff}
.pagination a.page-numbers:hover{border-color:var(--ink)}
.pagination .current{background:var(--ink);color:#fff;border-color:var(--ink)}
.arch-empty{padding:44px;text-align:center;color:var(--muted);background:var(--paper-2);border:1px solid var(--line);border-radius:10px}

/* — Catalogue de formations — */
.form-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px;transition:transform .2s,box-shadow .2s}
.fcard:hover{transform:translateY(-4px);box-shadow:0 22px 44px -28px rgba(10,34,54,.42)}
.fd{align-self:flex-start;font-size:var(--t-xs);font-weight:800;letter-spacing:.03em;color:var(--teal-d);background:#d8e9ea;padding:4px 10px;border-radius:4px;margin-bottom:12px}
.fcard h3{font-size:var(--t-md);font-weight:700;color:var(--ink);margin:0 0 8px;line-height:1.3}
.fcard p{margin:0 0 16px;color:var(--muted);font-size:var(--t-base);line-height:1.5}

/* — Fiche (offre / formation) : contenu + panneau latéral — */
.fiche{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
.fiche .entry{max-width:none}
.fiche-meta{background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:24px;position:sticky;top:24px}
.fiche-meta h3{font-size:var(--t-md);font-weight:800;color:var(--ink);margin:0 0 14px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.fiche-meta .row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.fiche-meta .row:last-of-type{border-bottom:0}
.fiche-meta .k{color:var(--muted);font-weight:600}
.fiche-meta .v{color:var(--ink);font-weight:700;text-align:right}
.fiche-cta{display:block;margin-top:18px;text-align:center;font-weight:700;color:#fff;background:var(--coral-txt);padding:13px;border-radius:7px;transition:background .18s}
.fiche-cta:hover{background:var(--coral-d)}

@media(max-width:960px){
  .offre-grid,.form-cards{grid-template-columns:1fr 1fr}
  .fiche{grid-template-columns:1fr;gap:28px}
  .fiche-meta{position:static}
}
@media(max-width:560px){
  .offre-grid,.form-cards,.rub-grid{grid-template-columns:1fr}
  .cgf-filters{gap:12px}
  .cgf-filters select{min-width:0;width:100%}
}

/* ══════════════ RESPONSIVE ══════════════ */
@media(max-width:960px){
  .hero .wrap{padding:64px 22px 56px}
  .portes,.form-grid,.contact .wrap{grid-template-columns:1fr}
  .rollcall{grid-template-columns:repeat(2,1fr)}
  .missions,.actus{grid-template-columns:1fr}
  .mission:nth-child(odd){border-right:0}
  .actu:not(:last-child){border-right:0}
  footer .wrap{grid-template-columns:1fr 1fr}
  .indexbar a{white-space:nowrap}
  .ledger-scroll{overflow-x:auto}
  .ledger{min-width:680px}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  .tally{gap:24px;flex-wrap:wrap}
  .rollcall{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr}
  .brand img{height:48px}
  .reg-head{flex-direction:column;align-items:flex-start;gap:8px}
  .reg-head .art{padding-top:0}
}