/* ═══════════════════════════════════════════════════════════════════
   ACA NASAPUNK LIGHT, Design system Landing v5.1 (direction finale Pat)
   Palette du jeu : papier, rouge, orange, or, navy. Plus de fond étoilé.
   Mix des 4 concepts validés :
     A « Stripe Hero »      : papier + titre navy massif + bande diagonale
     B « Cartes Mission »   : bande fine en tête de carte + numéros télémétrie
     C « Panneau Navy »     : sections sombres contrastées, accent or
     D « Manuel Technique » : sommaires numérotés, lignes fines, réfs mono
   Mapping produits : Immersif=rouge · Initiative=orange · Club=or · Coventure/Arène=navy
   Chaque page définit : body.cosmos { --accent:#hex; --accent-ink:#fff|#1B2A47; }
   (le vocabulaire de classes reste celui de cosmos.css : mêmes noms, nouveau look)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --paper:   #F4F5F7;
  --white:   #FFFFFF;
  --ink:     #1B2A47;   /* texte principal, navy profond */
  --navy:    #314B7A;
  --red:     #C32136;
  --orange:  #DF5F35;
  --gold:    #D8A953;
  --gold-ink:#A87F2F;   /* or assombri pour texte sur fond clair (AA) */
  --line:       rgba(27,42,71,0.14);
  --line-soft:  rgba(27,42,71,0.08);
  --txt:        var(--ink);
  --txt-dim:    rgba(27,42,71,0.72);
  --txt-muted:  rgba(27,42,71,0.5);
  --accent:     var(--navy);
  --accent-ink: #ffffff;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --disp: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}

* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body.cosmos {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  letter-spacing: -0.011em;
  min-height: 100vh;
  overflow-x: hidden;
}
.cwrap { position: relative; z-index: 1; }
#cosmos-stars { display: none; } /* héritage v5.0 : starfield abandonné */

/* ── Signature : bande tricolore (rouge → orange → or) ── */
.stripe { display: flex; height: 10px; }
.stripe i { flex: 1; }
.stripe i:nth-child(1) { background: var(--red); }
.stripe i:nth-child(2) { background: var(--orange); }
.stripe i:nth-child(3) { background: var(--gold); }
.stripe--thin { height: 4px; }
.stripe--diag { height: clamp(70px, 9vw, 120px); clip-path: polygon(0 38%, 100% 0, 100% 62%, 0 100%); }
.stripe--v { position: absolute; top: 0; bottom: 0; left: 0; width: 12px; flex-direction: column; height: auto; }

/* ── Typo ── */
.cdisp { font-family: var(--disp); font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; }
.cdisp-hero { font-family: var(--disp); font-weight: 900; letter-spacing: -0.05em; line-height: 1.0; font-size: clamp(2.5rem, 7vw, 5.2rem); }
.ctitle { font-family: var(--disp); font-weight: 900; letter-spacing: -0.035em; font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.05; }
.cbody { color: var(--txt-dim); font-size: 1.06rem; line-height: 1.7; }
.csmall { color: var(--txt-muted); font-size: .9rem; line-height: 1.6; }
.caccent { color: var(--accent); }

/* Étiquette HUD mono (« 01 // NOM ») */
.chud {
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 12px;
}
.chud::before { content: ""; width: 26px; height: 2px; background: var(--accent); }
.chud--bare::before { display: none; }

/* Badge statut */
.cstatus {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--txt-dim); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 4px; background: var(--white);
}
.cstatus .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* ── Sections / structure ── */
.csec { position: relative; max-width: 1160px; margin: 0 auto; padding: 90px 24px; }
.csec--tight { padding: 52px 24px; }
.csec--full { max-width: none; padding-left: 0; padding-right: 0; }

/* Règle graduée (D) */
.crule { position: relative; height: 1px; background: var(--line); margin: 0 24px; max-width: 1160px; }
@media (min-width: 1208px) { .crule { margin: 0 auto; } }
.crule--strong { height: 2px; background: var(--ink); }

/* ── Cartes Mission (B) : panneau blanc, bande tricolore en tête via .stripe ── */
.ccard {
  position: relative; background: var(--white);
  border: 1px solid var(--line); border-radius: 12px; padding: 26px;
  box-shadow: 0 10px 28px rgba(27,42,71,0.06);
  transition: transform .25s, box-shadow .25s;
  overflow: hidden;
}
.ccard:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(27,42,71,0.12); }
.ccard--flat, .ccard--flat:hover { transform: none; box-shadow: none; }
.ccard--accent { border-top: 4px solid var(--accent); }
.ccard--paper { background: var(--paper); }
/* bande tricolore en tête de carte : <div class="ccard ccard--stripe"> */
.ccard--stripe { padding-top: 30px; }
.ccard--stripe::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--red) 0 33.4%, var(--orange) 33.4% 66.7%, var(--gold) 66.7% 100%);
}

/* Numéro télémétrie (B / D) */
.tnum { font-family: var(--mono); font-weight: 700; font-size: 2.8rem; letter-spacing: -0.04em; line-height: 1; color: var(--accent); }
.tnum--red { color: var(--red); } .tnum--orange { color: var(--orange); } .tnum--gold { color: var(--gold-ink); } .tnum--navy { color: var(--navy); }

/* ── Panneau Navy (C) ── */
.npanel { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; }
.npanel .cbody { color: rgba(244,245,247,0.74); }
.npanel .csmall { color: rgba(244,245,247,0.55); }
.npanel .chud { color: var(--gold); } .npanel .chud::before { background: var(--gold); }
.npanel .cstatus { color: rgba(244,245,247,0.8); border-color: rgba(244,245,247,0.25); background: rgba(244,245,247,0.05); }
.npanel .caccent { color: var(--gold); }
.npanel .crule { background: rgba(244,245,247,0.16); }

/* ── Boutons plats ── */
/* 🐛 box-sizing AJOUTÉ le 2026-08-02, et c'est un vrai défaut mesuré, pas du
   ménage. Sans lui, un .cbtn mis à width:100% ajoutait ses 64px de padding
   PAR-DESSUS la largeur du parent et débordait de l'écran. Mesuré sur
   /projet-initiative-journee/ à 375px : bouton de 340px dans un conteneur de
   275px utiles, soit 16px de défilement horizontal sur toute la page.
   Le piège touchait 2 familles de règles : « .cta-opt .cbtn » (les 4 pages
   journée) et « .csticky .cbtn » (la barre collante mobile de 11 pages).
   ⚠️ Aucun box-sizing n'existait nulle part dans ce fichier, donc le défaut
   se serait reproduit à chaque nouveau bouton pleine largeur. Réparé ici, à la
   source, plutôt qu'une fois par page. Sans effet sur les boutons en largeur
   automatique, dont la taille vient du contenu. */
.cbtn {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--disp); font-weight: 700; font-size: .95rem; letter-spacing: -0.01em;
  padding: 16px 32px; border-radius: 8px; text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s, border-color .2s, color .2s;
  cursor: pointer; border: 1.5px solid transparent;
}
.cbtn-primary { background: var(--accent); color: var(--accent-ink); }
.cbtn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(27,42,71,0.22); }
.cbtn-ink { background: var(--ink); color: #fff; }
.cbtn-ink:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(27,42,71,0.25); }
.cbtn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.cbtn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.npanel .cbtn-ghost { color: var(--paper); border-color: rgba(244,245,247,0.3); }
.npanel .cbtn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.cbtn-wide { width: 100%; }

/* Boutons rendus par le shortcode Commerce : harmonisés NASApunk */
.cosmos .aca-cta-btn,
.cosmos a.aca-cta-btn--primary, .cosmos a.aca-cta-btn--ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--disp) !important; font-weight: 700 !important;
  padding: 16px 32px !important; border-radius: 8px !important; text-decoration: none !important;
  background-image: none !important;
}
.cosmos a.aca-cta-btn--primary { background-color: var(--accent) !important; color: var(--accent-ink) !important; border: 1.5px solid transparent !important; }
.cosmos a.aca-cta-btn--ghost   { background-color: transparent !important; color: var(--ink) !important; border: 1.5px solid var(--line) !important; }
.cosmos a.aca-cta-btn--ghost:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.npanel a.aca-cta-btn--ghost { color: var(--paper) !important; border-color: rgba(244,245,247,0.3) !important; }

/* ── Manuel Technique (D) : rangées numérotées ── */
.mrow { display: grid; grid-template-columns: 100px 1fr auto; gap: 28px; align-items: center; padding: 32px 0; border-top: 1px solid var(--line); }
.mrow:last-of-type { border-bottom: 1px solid var(--line); }
@media (max-width: 640px) { .mrow { grid-template-columns: 64px 1fr; } .mrow .mref { display: none; } }
.mrow h3 { font-family: var(--disp); font-weight: 850; font-size: 1.25rem; letter-spacing: -0.02em; margin: 0 0 4px; }
.mrow p { font-size: .92rem; color: var(--txt-dim); line-height: 1.55; max-width: 560px; margin: 0; }
.mref { font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--txt-muted); white-space: nowrap; }

/* Coordonnées / réfs décoratives */
.ccoords { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; color: var(--txt-muted); user-select: none; text-transform: uppercase; }
.npanel .ccoords { color: rgba(244,245,247,0.4); }

/* Chiffre télémétrie avec libellé (stats) */
.cstat { }
.cstat .n { font-family: var(--mono); font-weight: 700; font-size: clamp(1.9rem, 4.5vw, 2.6rem); letter-spacing: -0.03em; color: var(--ink); }
.cstat .n em { font-style: normal; color: var(--accent); }
.npanel .cstat .n { color: var(--paper); }
.cstat .l { font-family: var(--mono); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--txt-muted); margin-top: 6px; }

/* Liste à tirets techniques */
.clist { list-style: none; padding: 0; margin: 0; }
.clist li { position: relative; padding-left: 26px; margin-bottom: 12px; color: var(--txt-dim); line-height: 1.6; }
.clist li::before { content: ""; position: absolute; left: 0; top: .58em; width: 13px; height: 2px; background: var(--accent); }

/* Photo encadrée (hublot clair) */
.cframe { position: relative; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--white); box-shadow: 0 14px 34px rgba(27,42,71,0.08); }
.cframe img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cframe .tag {
  position: absolute; left: 10px; bottom: 10px; font-family: var(--mono); font-size: .6rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  background: rgba(244,245,247,0.92); border: 1px solid var(--line); padding: 4px 9px; border-radius: 4px;
}

/* FAQ */
.cfaq details { border: 1px solid var(--line); border-radius: 10px; background: var(--white); padding: 18px 22px; margin-bottom: 10px; }
.cfaq summary { cursor: pointer; font-family: var(--disp); font-weight: 750; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--ink); }
.cfaq summary::after { content: "+"; font-family: var(--mono); color: var(--accent); font-size: 1.15rem; }
.cfaq details[open] summary::after { content: "-"; }
.cfaq details p { margin-top: 12px; color: var(--txt-dim); line-height: 1.65; }

/* Remplissage des activités en personne (cf. templates/_partial-places.php).
   Aucun chiffre affiché : la barre montre le remplissage, le repère montre le
   point où un club démarre. */
.aca-places-track {
  position: relative; height: 10px; border-radius: 100px; background: var(--line-soft);
  border: 1px solid var(--line); overflow: visible;
  /* laisse respirer l'étiquette « Départ » qui se pose au-dessus du repère */
  margin-top: 12px;
}
.aca-places-fill {
  height: 100%; border-radius: 100px; background: var(--gold);
  transition: width .9s cubic-bezier(.16,1,.3,1);
}
.aca-places-mark {
  position: absolute; top: -5px; width: 2px; height: 18px; border-radius: 2px;
  background: var(--gold-ink); transform: translateX(-1px);
}
.aca-places-mark::after {
  content: "Départ"; position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: .5rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-ink); white-space: nowrap;
}
.aca-places-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  justify-content: space-between; margin-top: 14px;
}
.aca-places-urgence {
  font-family: var(--mono); font-size: .56rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red); white-space: nowrap;
  background: color-mix(in srgb, var(--red) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 32%, transparent);
  border-radius: 100px; padding: 5px 10px;
}
/* Variante sur panneau sombre (mêmes règles que .npanel .cprice / .chud) */
.npanel .aca-places-track { background: rgba(244,245,247,0.14); border-color: rgba(244,245,247,0.22); }
.npanel .aca-places-foot .csmall { color: rgba(244,245,247,0.72); }
.npanel .aca-places-mark { background: var(--gold); }
.npanel .aca-places-mark::after { color: var(--gold); }
.npanel .aca-places-urgence {
  color: #ff8fa0; background: rgba(255,143,160,0.12); border-color: rgba(255,143,160,0.35);
}

/* ─────────────────────────────────────────────────────────────
   Barre : animation à l'entrée à l'écran + minibulle au scroll.
   Piloté par aca-places.js : .aca-js sur <html>, et par barre .is-filled
   (croissance jouée une fois) + .is-onscreen (reflet/halo/point, seulement tant
   que la barre est visible) + .is-shown sur la minibulle. --aca-fill (la valeur
   réelle) est posé sur le conteneur .aca-places et hérité par le remplissage et
   le point de tête. Sans JS (pas de .aca-js) : la barre reste pleine et la
   minibulle reste masquée (visibility:hidden). Coupé sous prefers-reduced-motion.
   ───────────────────────────────────────────────────────────── */
.aca-places { position: relative; }

/* Remplissage : par défaut à sa valeur réelle (juste sans JS). Dégradé subtil,
   tête un peu plus claire. overflow:hidden clippe le reflet à la partie remplie. */
.aca-places-fill {
  width: var(--aca-fill, 0%);
  position: relative; overflow: hidden;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--gold) 88%, #000 12%) 0%,
    var(--gold) 55%,
    color-mix(in srgb, var(--gold) 72%, #fff 28%) 100%);
  transition: width .9s cubic-bezier(.16,1,.3,1);
}
/* Avec JS : on part de 0 (avant que la barre entre à l'écran) pour éviter tout
   flash « pleine → 0 → repousse ». La croissance se joue au scroll via .is-filled. */
.aca-js .aca-places-fill { width: 0%; }
.aca-js .aca-places.is-filled .aca-places-fill { width: var(--aca-fill, 0%); }
/* Halo doux : seulement tant que la barre est à l'écran (pause hors écran). */
.aca-places.is-onscreen .aca-places-fill {
  box-shadow: 0 0 7px 0 color-mix(in srgb, var(--gold) 55%, transparent);
}
/* Reflet clair qui balaie la partie remplie, seulement à l'écran. */
.aca-places-fill::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.5) 50%, transparent 68%);
  transform: translateX(-120%);
}
.aca-places.is-onscreen .aca-places-fill::before {
  animation: aca-sweep 2.5s linear infinite;
}
@keyframes aca-sweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

/* Point lumineux en tête : petit cercle qui suit le bord d'attaque du remplissage
   (left = --aca-fill, synchronisé avec la croissance). Track en overflow:visible,
   donc le halo du point n'est pas rogné. */
.aca-places-head {
  position: absolute; top: 50%; left: var(--aca-fill, 0%);
  width: 9px; height: 9px; margin-left: -5px; margin-top: -4.5px;
  border-radius: 50%; background: color-mix(in srgb, var(--gold) 40%, #fff 60%);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--gold) 70%, transparent);
  opacity: 0; pointer-events: none;
  transition: left .9s cubic-bezier(.16,1,.3,1), opacity .4s ease .5s;
}
.aca-js .aca-places-head { left: 0%; }
.aca-js .aca-places.is-filled .aca-places-head { left: var(--aca-fill, 0%); }
.aca-places.is-onscreen .aca-places-head { opacity: 1; }

/* Minibulle « coup de pouce » : pilule blanche Apple-ish, en haut à droite.
   visibility:hidden (et non opacity seule) la retire du focus clavier + de l'arbre
   a11y tant qu'elle n'est pas révélée : aucun piège de focus fantôme, même sans JS. */
.aca-places-nudge {
  position: absolute; top: 0; right: 0; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 700; letter-spacing: .01em; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  color: var(--ink); background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(20,20,40,.08); border-radius: 100px;
  padding: 8px 14px; box-shadow: 0 8px 22px -8px rgba(20,20,40,.32), 0 1px 2px rgba(20,20,40,.10);
  visibility: hidden; opacity: 0; transform: translateY(8px) scale(.92); pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1), visibility 0s linear .28s;
}
.aca-places-nudge.is-shown {
  visibility: visible; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
  transition: opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1), visibility 0s;
}
.aca-places-nudge-arrow { transition: transform .2s ease; }
.aca-places-nudge:hover .aca-places-nudge-arrow { transform: translateX(3px); }
.aca-places-nudge:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
/* Petit écran : la bulle repasse dans le flux (jamais de chevauchement du titre).
   visibility:hidden réserve sa place, donc pas de décalage de mise en page (CLS)
   au moment de la révélation au scroll. */
@media (max-width: 520px) {
  .aca-places-nudge { position: static; margin-top: 12px; align-self: flex-start; }
  /* Sans JS, la bulle ne se montre jamais : on ne réserve pas d'espace vide en flux. */
  :root:not(.aca-js) .aca-places-nudge { display: none; }
}

/* prefers-reduced-motion : remplissage posé d'un coup à l'entrée (sans glisse),
   aucun reflet, minibulle montrée sans pop (simple bascule de visibilité). */
@media (prefers-reduced-motion: reduce) {
  .aca-places-fill,
  .aca-js .aca-places.is-filled .aca-places-fill { transition: none; }
  .aca-places.is-onscreen .aca-places-fill { box-shadow: none; }
  .aca-places-fill::before { display: none; }
  .aca-places-head { transition: none; }
  .aca-places-nudge, .aca-places-nudge.is-shown { transform: none; }
}

/* Impression : forcer le rendu du remplissage (fonds sinon supprimés) ET restaurer
   sa largeur réelle (sinon .aca-js le garde à 0 tant que la barre n'a pas été vue à
   l'écran, elle sortirait vide) ; retirer minibulle, reflet et point. */
@media print {
  .aca-places-fill,
  .aca-js .aca-places-fill,
  .aca-js .aca-places.is-filled .aca-places-fill {
    width: var(--aca-fill, 0%) !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .aca-places-nudge, .aca-places-head, .aca-places-fill::before { display: none !important; }
}

/* Prix télémétrie */
.cprice { font-family: var(--mono); font-weight: 700; font-size: clamp(2.4rem, 5.5vw, 3.6rem); letter-spacing: -0.02em; color: var(--ink); }
.cprice .unit { font-size: .9rem; color: var(--txt-muted); letter-spacing: .06em; }
.cprice--strike { color: var(--txt-muted); text-decoration: line-through; text-decoration-color: var(--red); }
.npanel .cprice { color: var(--paper); }

/* Sticky CTA mobile */
.csticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(244,245,247,0.94); backdrop-filter: blur(12px); border-top: 1px solid var(--line); display: none; }
@media (max-width: 720px) { .csticky.on { display: block; } body.cosmos.has-sticky { padding-bottom: 84px; } }

/* ── Révélation au scroll (progressive enhancement, body.js-rv via JS) ── */
.js-rv .rv, .js-rv .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.js-rv .rv.visible, .js-rv .reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .rv, .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   NASAPUNK DYNAMICS v5.3 (directives Pat 2026-06-11)
   Moteurs opt-in via attributs data-* (cf. nasapunk.js)
   ═══════════════════════════════════════════════════════════════════ */

/* ── G. Trajectoire de scroll ── */
#npk-traj { position:fixed; top:0; left:0; right:0; height:3px; z-index:70; background:rgba(27,42,71,.08); pointer-events:none; }
#npk-traj .line { height:100%; width:0%; background:linear-gradient(90deg, var(--red), var(--orange), var(--gold)); }
#npk-traj .ship { position:absolute; top:-5px; left:0%; width:13px; height:13px; border-radius:50%; background:var(--ink); border:2.5px solid var(--gold); box-shadow:0 0 0 3px rgba(216,169,83,.18); }

/* ── A. Allumage HUD ── */
.boot-line { font-family:var(--mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-muted); display:flex; align-items:center; gap:10px; margin-bottom:8px; opacity:0; transition:opacity .2s; }
.boot-line.on { opacity:1; }
.boot-line .st::after { content:"…"; }
.boot-line.ok .st { color:#2E7D43; font-weight:700; }
.boot-line.ok .st::after { content:" NOMINAL"; }
.boot-caret::after { content:"▌"; color:var(--orange); animation:npkblink .7s steps(1) infinite; }
@keyframes npkblink { 50% { opacity:0; } }

/* ── B. Bande qui se dessine + shimmer occasionnel ── */
.js-rv .stripe--diag[data-draw] { transform:scaleX(0); transform-origin:left center; transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
.js-rv .stripe--diag[data-draw].go { transform:scaleX(1); }
.stripe--alive i { position:relative; overflow:hidden; }
.stripe--alive i::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.38) 50%, transparent 62%); transform:translateX(-130%); }
.stripe--alive.shimmer i::after { animation:npkshimmer 1.2s ease-out; }
.stripe--alive.shimmer i:nth-child(2)::after { animation-delay:.12s; }
.stripe--alive.shimmer i:nth-child(3)::after { animation-delay:.24s; }
@keyframes npkshimmer { to { transform:translateX(130%); } }
.stripe--alive.huep i { animation:npkhue 1.6s ease-in-out; }
@keyframes npkhue { 50% { filter:brightness(1.13) saturate(1.18); } }

/* ── C. Compteurs télémétrie ── */
.tele-grid { display:grid; gap:18px; grid-template-columns:repeat(2,1fr); }
@media(min-width:760px){ .tele-grid { grid-template-columns:repeat(4,1fr); } }
.tele { border:1px solid var(--line); border-radius:12px; background:var(--white); padding:24px 18px; text-align:center; position:relative; overflow:hidden; }
.tele::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--red) 0 33.4%, var(--orange) 33.4% 66.7%, var(--gold) 66.7% 100%); }
.tele .n { font-family:var(--mono); font-weight:700; font-size:clamp(1.9rem,4.2vw,2.7rem); letter-spacing:-0.03em; }
.tele .l { font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-muted); margin-top:8px; }

/* ── D. Banderole-rouleau (1 message à la fois, roule toutes les 3 s) ── */
.roller { border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); background:var(--white); overflow:hidden; position:relative; height:52px; }
.roller .msg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; font-family:var(--mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); padding:0 18px; text-align:center; transform:translateY(110%); }
@media (max-width:880px) { .roller { height:74px; } .roller .msg { font-size:.62rem; letter-spacing:.12em; line-height:1.5; } }
.roller .msg em { font-style:normal; color:var(--red); font-weight:700; }
.roller .msg.in { transform:translateY(0); transition:transform .45s cubic-bezier(.2,1.4,.4,1); }
.roller .msg.out { transform:translateY(-112%) rotate(.6deg); transition:transform .4s cubic-bezier(.6,-0.28,.74,.05); }
.roller.jolt { animation:npkjolt .38s cubic-bezier(.36,.07,.19,.97); }
@keyframes npkjolt { 20% { transform:translateX(-2px) rotate(-.25deg); } 45% { transform:translateX(2px) rotate(.25deg); } 70% { transform:translateX(-1px); } }
.roller .dot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }

/* ── E. Cartes magnétiques + logos ── */
[data-mag] { transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; will-change:transform; }
[data-mag] .shine { position:absolute; inset:0; background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.45) 48%, transparent 62%); transform:translateX(-130%); pointer-events:none; }
[data-mag]:hover .shine { transition:transform .65s; transform:translateX(130%); }
.plogo { width:46px; height:46px; object-fit:contain; display:block; margin-bottom:12px; filter:drop-shadow(0 2px 6px rgba(27,42,71,.18)); }

/* ── Écriteaux specs produits (mono, faits réels seulement) ── */
.cspec { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.6rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-muted); border:1px solid var(--line); border-radius:4px; padding:5px 10px; background:var(--white); }
.cspec b { color:var(--ink); font-weight:700; }

/* ── F. Compte à rebours T-moins ── */
.tminus { display:flex; gap:12px; flex-wrap:wrap; }
.tminus .cell { background:rgba(244,245,247,.06); border:1px solid rgba(244,245,247,.18); border-radius:10px; padding:14px 18px; text-align:center; min-width:84px; }
.tminus .v { font-family:var(--mono); font-weight:700; font-size:2rem; color:var(--paper); letter-spacing:-0.02em; }
.tminus .u { font-family:var(--mono); font-size:.55rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-top:5px; }

/* ── Background animé du header (canvas constellation) ── */
.npk-hero { position:relative; overflow:hidden; }
.npk-hero > * { position:relative; z-index:2; }
#npk-hero-canvas, .npk-hero-video { position:absolute; inset:0; z-index:0 !important; width:100%; height:100%; pointer-events:none; }
.npk-hero-video { object-fit:cover; opacity:.16; }
.npk-hero-scrim { position:absolute; inset:0; z-index:1 !important; pointer-events:none; background:radial-gradient(ellipse 70% 60% at 50% 42%, rgba(244,245,247,0) 0%, rgba(244,245,247,.72) 78%, var(--paper) 100%); }

@media (prefers-reduced-motion: reduce) {
  #npk-traj, #npk-hero-canvas { display:none; }
  .roller .msg { transition:none; }
  .stripe--alive.shimmer i::after, .stripe--alive.huep i { animation:none; }
}

/* ── Focus clavier signature (CSS pur, AUCUN gate JS : fonctionne CDN bloqué).
      Scopé body.cosmos pour ne pas fuir sur le reste de BuddyBoss. ── */
body.cosmos :is(a, button, summary, [tabindex="0"]):focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; border-radius: 6px; }
body.cosmos :is(a, button, summary):focus:not(:focus-visible) { outline: none; }
.cosmos .cbtn:focus-visible, .cosmos .cbtnw:focus-visible, .cosmos .aca-cta-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(216,169,83,.32); }
.npanel :is(a, button, summary):focus-visible { outline-color: var(--gold); }
.cfaq summary:focus-visible { outline-offset: -2px; border-radius: 8px; }
.eco-logo:focus-visible .eco-logo-box { border-color: var(--gold-ink); }

/* ═══ COUCHE AWARD v5.5 (active seulement avec body.js-aw, GSAP chargé) ═══ */
.aw-word { display:inline-block; white-space:nowrap; } /* mot insécable : césure aux espaces seulement */
.aw-ch { display:inline-block; will-change:transform; }
#aw-cursor { position:fixed; top:0; left:0; width:34px; height:34px; margin:-17px 0 0 -17px; border:1.5px solid var(--navy); border-radius:50%; pointer-events:none; z-index:9999; opacity:.5; transition:width .25s, height .25s, margin .25s, opacity .25s, border-color .25s; }
#aw-cursor.on { width:52px; height:52px; margin:-26px 0 0 -26px; border-color:var(--gold); opacity:.85; }
.js-aw .aw-track { will-change:transform; }
#npk-hero-3d { will-change:opacity; }
/* éléments dont la couche award pilote elle-même l'entrée (clip-path GSAP) */
.js-aw .aw-own { transition: none !important; }
/* wipe tricolore des panneaux navy (calques injectés par JS, aria-hidden) */
.aw-wipe { position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
.aw-wipe i { position: absolute; inset: 0; will-change: transform; }
.aw-wipe i:nth-child(1) { background: var(--red);    z-index: 3; }
.aw-wipe i:nth-child(2) { background: var(--orange); z-index: 2; }
.aw-wipe i:nth-child(3) { background: var(--gold);   z-index: 1; }
/* fil de trajectoire en instrument de bord (encoches, ping, comète) */
.aw-traj .tick { position: absolute; top: 0; width: 2px; height: 100%; background: rgba(27,42,71,.22); }
.aw-traj .line { box-shadow: 0 0 12px rgba(223,95,53,.30); }
.aw-traj .ship { border-color: var(--traj-acc, var(--gold)); transition: border-color .5s; transform-origin: center; }
.aw-traj .ship.ping { animation: awping .6s ease-out; }
@keyframes awping { 40% { box-shadow: 0 0 0 11px rgba(216,169,83,0); } 100% { box-shadow: 0 0 0 3px rgba(216,169,83,.18); } }
@media (prefers-reduced-motion: reduce) { #aw-cursor, #npk-hero-3d, .aw-wipe, .aw-traj .tick { display:none; } }
@media (pointer:coarse) { #aw-cursor { display:none; } }

/* ═══════════════════════════════════════════════════════════════════
   POLISH v5.22.0 (2026-07-25)
   Corrections de design system, valables sur toutes les pages.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Exposants dans les étiquettes en majuscules.
      .chud, .cstatus et .cspec appliquent text-transform:uppercase et un
      letter-spacing large. Un <sup> hérite des deux, si bien que
      « 3e à 6e année » s'affichait « 3 E À 6 E ANNÉE », illisible.
      Constaté à 375 px sur 4 pages, dont club-de-maths et
      ecole-maison-primaire : c'est un défaut du système, pas d'une page. */
.chud sup, .cstatus sup, .cspec sup, .mref sup {
  text-transform: lowercase;
  letter-spacing: 0;
  font-size: .68em;
  vertical-align: super;
  line-height: 0;
}
/* 1 bis. Le correctif ci-dessus est incomplet quand le <sup> est un enfant
      DIRECT de l'étiquette. Ces trois classes sont des conteneurs flex, donc
      un enfant direct est « blockifié » : vertical-align:super est ignoré et
      line-height:0 lui donne une boîte de hauteur nulle. Le glyphe reste
      peint (mesuré : 4 × 8 px), mais centré à mi-hauteur au lieu d'être en
      exposant, donc « 5e » se lit comme « 5e » à plat.
      Constaté le 2026-07-28 sur 5 emplacements : home, club-de-maths,
      ecole-maison-primaire, projet-immersif-primaire, projet-initiative-journee.
      align-self le remonte, line-height lui redonne une boîte. */
.chud > sup, .cstatus > sup, .cspec > sup {
  align-self: flex-start;
  line-height: 1.15;
}

/* 2. FAQ : le « + » pivote en « × » à l'ouverture, et la réponse se pose
      au lieu d'apparaître sec. Respecte prefers-reduced-motion plus bas. */
.cfaq details { transition: border-color .2s ease, box-shadow .2s ease; }
.cfaq details:hover { border-color: rgba(27,42,71,0.26); }
.cfaq details[open] { box-shadow: 0 6px 20px rgba(27,42,71,.06); }
.cfaq summary::after { transition: transform .25s cubic-bezier(.2,.8,.3,1); }
.cfaq details[open] summary::after { content: "+"; transform: rotate(45deg); }
.cfaq details[open] p { animation: cfaqIn .28s ease both; }
@keyframes cfaqIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .cfaq summary::after { transition: none; }
  .cfaq details[open] p { animation: none; }
}