/* =========================================================================
   LEAN SKIPPER OS — feuille de style du poste de pilotage

   Nuit d'abord : un OS se lit comme une passerelle de quart. Le jour
   reprend le papier des supports de cours. Chaque valeur de jour existe
   deux fois — sous [data-theme="clair"] pour le bouton, et sous
   prefers-color-scheme gardée par :not([data-theme]) pour le système.

   Les quatre premiers jetons (--ink-950, --gold-500, --ember-500,
   --fog-500) sont lus par kinetic-grid.js : ils restent en oklch().
   ========================================================================= */

:root {
  /* — jetons de la grille cinétique (canvas) — */
  --ink-950:   oklch(13% 0.012 262);
  --gold-500:  oklch(73% 0.125 83);
  --ember-500: oklch(58% 0.14 38);
  --fog-500:   oklch(36% 0.012 255);

  /* — jetons de la page, régime nuit — */
  --fond:        #0a0c11;
  --surface:     #10141d;
  --surface-2:   #161b27;
  --texte:       #f2efe8;
  --texte-2:     #c8c5bc;
  --mute:        #8b8f98;
  --or:          #cea03e;
  --or-vif:      #eed59f;
  --ligne:       rgba(242, 239, 232, .08);
  --ligne-forte: rgba(242, 239, 232, .17);
  --or-filet:    rgba(206, 160, 62, .36);
  --or-doux:     rgba(206, 160, 62, .10);
  --ok:          #7dc9a2;
  --souci:       #e08f6a;

  --font-mono: 'Space Mono', 'SFMono-Regular', ui-monospace, monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --largeur: 1160px;
}

:root[data-theme="clair"] {
  --ink-950:   oklch(93.5% 0.007 84);
  --gold-500:  oklch(57% 0.115 83);
  --ember-500: oklch(55% 0.13 38);
  --fog-500:   oklch(83% 0.007 255);

  --fond:        #eceae4;
  --surface:     #fbfaf7;
  --surface-2:   #f3f1ea;
  --texte:       #12161d;
  --texte-2:     #3a4049;
  --mute:        #5a616c;
  --or:          #8b5f0d;
  --or-vif:      #b07f15;
  --ligne:       #e2ded4;
  --ligne-forte: #c9c4b8;
  --or-filet:    rgba(176, 127, 21, .38);
  --or-doux:     rgba(176, 127, 21, .10);
  --ok:          #2c7a55;
  --souci:       #a8551c;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --ink-950:   oklch(93.5% 0.007 84);
    --gold-500:  oklch(57% 0.115 83);
    --ember-500: oklch(55% 0.13 38);
    --fog-500:   oklch(83% 0.007 255);

    --fond:        #eceae4;
    --surface:     #fbfaf7;
    --surface-2:   #f3f1ea;
    --texte:       #12161d;
    --texte-2:     #3a4049;
    --mute:        #5a616c;
    --or:          #8b5f0d;
    --or-vif:      #b07f15;
    --ligne:       #e2ded4;
    --ligne-forte: #c9c4b8;
    --or-filet:    rgba(176, 127, 21, .38);
    --or-doux:     rgba(176, 127, 21, .10);
    --ok:          #2c7a55;
    --souci:       #a8551c;
  }
}

/* ── Socle ─────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* L'attribut hidden gagne toujours : sans ce filet, n'importe quel
   display posé par une classe (grid, flex…) le ferait taire. */
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--or); }
h1, h2, h3 { line-height: 1.15; margin: 0; }

.visuel-cache {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.surtitre {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--or);
}

/* Tout le contenu vit au-dessus du filigrane (z-index 0, ls-compass.css). */
.barre, main, .porte { position: relative; z-index: 1; }

/* ── Barre ─────────────────────────────────────────────────────────────── */

.barre {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 72px 0 clamp(14px, 3vw, 24px);  /* 72 : la place du bouton jour/nuit */
  background: var(--fond);                                     /* repli sans color-mix */
  background: color-mix(in srgb, var(--fond) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ligne);
}
.barre b {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texte-2);
  white-space: nowrap;
}
.barre b em { font-style: normal; color: var(--or); }
.barre__etat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  margin-left: auto;
}
/* À droite par défaut ; quand l'état est visible, c'est lui qui pousse. */
.barre__actions { display: flex; gap: 8px; margin-left: auto; }
.barre__etat:not([hidden]) ~ .barre__actions { margin-left: 12px; }

.btn-ico {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  padding: 0;
  border-radius: 9px;
  border: 1px solid var(--ligne-forte);
  background: var(--surface);
  color: var(--texte-2);
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.btn-ico:hover { color: var(--or); border-color: var(--or-filet); }
.btn-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

/* ── Porte ─────────────────────────────────────────────────────────────── */

.porte {
  min-height: calc(100svh - 58px);
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--fond);           /* le fond que voit qui n'a pas la grille */
}
canvas.ls-kinetic-grid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
.porte > .porte__carte { position: relative; z-index: 1; }

.porte__carte {
  width: min(420px, 92vw);
  text-align: center;
  padding: 36px 30px 30px;
  border: 1px solid var(--ligne-forte);
  border-radius: 18px;
  background: var(--surface);                                  /* repli sans color-mix */
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.porte__carte .ls-compass { margin-bottom: 14px; }
.porte__carte h1 { font-size: 26px; letter-spacing: .01em; margin: 6px 0 10px; }
.porte__phrase { color: var(--texte-2); font-size: 14px; margin: 0 0 22px; }

#forme-porte { display: flex; gap: 8px; }
#forme-porte input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--ligne-forte);
  background: var(--fond);
  color: var(--texte);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
}
#forme-porte input::placeholder { color: var(--mute); letter-spacing: .04em; }
#forme-porte input:focus { outline: none; border-color: var(--or-filet); }
#forme-porte button {
  padding: 11px 18px;
  border: none;
  border-radius: 10px;
  background: var(--or-vif);
  color: #10131a;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .15s var(--ease), opacity .15s var(--ease);
}
/* En jour, l'or vif ne porte pas un texte blanc (3,6:1) : l'or fermé, si. */
:root[data-theme="clair"] #forme-porte button { background: var(--or); color: #fff; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) #forme-porte button { background: var(--or); color: #fff; }
}
#forme-porte button:hover { transform: translateY(-1px); }
#forme-porte button[disabled] { opacity: .6; cursor: wait; transform: none; }
.porte__message {
  min-height: 1.5em;
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--souci);
}

/* ── Hero — la colonne encadrée (esprit hero-195) ─────────────────────── */

.hero {
  position: relative;
  background: var(--fond);
  overflow: hidden;
}
.hero > .cadre { position: relative; z-index: 1; }

.cadre {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 84px) clamp(20px, 5vw, 56px);
  text-align: center;
}
/* Les deux filets verticaux qui encadrent la colonne, fondus aux bouts —
   la signature du bloc d'origine. */
.cadre::before, .cadre::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent, var(--ligne-forte) 18%, var(--ligne-forte) 82%, transparent);
  pointer-events: none;
}
.cadre::before { left: max(8px, calc(50% - 440px)); }
.cadre::after  { right: max(8px, calc(50% - 440px)); }
.cadre--fin::before, .cadre--fin::after { display: none; }

.hero h1 {
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: -.01em;
  margin: 14px 0 12px;
}
.hero__sous {
  max-width: 520px;
  margin: 0 auto;
  color: var(--texte-2);
  font-size: 15px;
}

/* Les chiffres-clés : des tuiles nues, le nombre en héros. */
.kpis {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 1px;
  background: var(--ligne);
  border: 1px solid var(--ligne);
  border-radius: 14px;
  overflow: hidden;
}
.kpi {
  background: var(--surface);                                  /* repli sans color-mix */
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  padding: 18px 10px 15px;
}
.kpi b {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}
.kpi b small { display: block; font-size: .42em; font-weight: 400; color: var(--mute); }
.kpi span {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.kpi--or b { color: var(--or); }

/* ── Onglets + panneau ─────────────────────────────────────────────────── */

.poste {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: clamp(26px, 4vh, 40px) clamp(14px, 3vw, 24px) 10px;
}

.onglets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 22px;
  padding: 4px;
  border: 1px solid var(--ligne);
  border-radius: 12px;
  background: var(--surface-2);
}
.onglet {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--mute);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s var(--ease), background .15s var(--ease);
  white-space: nowrap;
}
.onglet svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.onglet:hover { color: var(--texte-2); }
.onglet[aria-selected="true"] {
  background: var(--surface);
  color: var(--or);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}

/* Le grand panneau, et son liseré d'or qui fait le tour — l'écho vanilla
   du BorderBeam d'origine. */
@property --cap-beam {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.panneau {
  position: relative;
  min-height: 460px;
  border: 1px solid var(--ligne-forte);
  border-radius: 16px;
  background: var(--surface);
  padding: clamp(18px, 3vw, 30px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.panneau::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  padding: 1.5px;
  /* Repli 0deg dans le var() : sans @property (Firefox <128, Safari <16.4),
     --cap-beam est « invalide garanti » et ferait tomber tout le fond — le
     repli le fige à 0deg (liseré doré statique) au lieu d'un clignotement. */
  background: conic-gradient(from var(--cap-beam, 0deg),
    transparent 0turn, transparent .82turn,
    var(--or-vif) .93turn, transparent 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: cap-beam 9s linear infinite;
  pointer-events: none;
}
@keyframes cap-beam { to { --cap-beam: 360deg; } }

.vue { animation: fondu .4s var(--ease); }
@keyframes fondu { from { opacity: 0; transform: translateY(4px); } }

/* ── Contenu des vues ──────────────────────────────────────────────────── */

.vue h2 {
  font-size: 17px;
  margin: 0 0 4px;
}
.vue > p.note, p.note {
  margin: 0 0 18px;
  color: var(--mute);
  font-size: 13px;
}
.bloc { margin-top: 26px; }
.bloc > h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 10px;
}

.defile { overflow-x: auto; }
.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.tableau th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--mute);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ligne-forte);
  white-space: nowrap;
}
.tableau td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--ligne);
  color: var(--texte-2);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.tableau tr:last-child td { border-bottom: none; }
.tableau td.nombre, .tableau th.nombre {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tableau td b { color: var(--texte); font-weight: 600; }
.tableau .vide { color: var(--mute); }

/* Jauges : une seule teinte — l'or —, la valeur toujours écrite à côté. */
.jauge {
  display: grid;
  grid-template-columns: minmax(120px, 220px) 1fr 58px;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
.jauge > span {
  font-size: 13px;
  color: var(--texte-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jauge__rail {
  height: 8px;
  border-radius: 4px;
  background: var(--or-doux);
  overflow: hidden;
}
.jauge__rempli {
  height: 100%;
  border-radius: 4px;
  background: var(--or-vif);
  min-width: 2px;
  transition: width .5s var(--ease);
}
.jauge > b {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--texte);
}

/* Étiquettes d'état — jamais la couleur seule, toujours le mot avec. */
.etat {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--ligne-forte);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-2);
  white-space: nowrap;
}
.etat--or   { border-color: var(--or-filet); color: var(--or); background: var(--or-doux); }
.etat--ok   { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.etat--souci{ color: var(--souci); border-color: color-mix(in srgb, var(--souci) 45%, transparent); }

/* Le NPS en grand : le nombre héros et sa phrase. */
.nps-heros {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 4px 0 8px;
}
.nps-heros b {
  font-family: var(--font-mono);
  font-size: 52px;
  line-height: 1;
  color: var(--or);
  font-variant-numeric: tabular-nums;
}
.nps-heros span { color: var(--mute); font-size: 13px; }

.commentaires { display: grid; gap: 10px; }
.commentaire {
  border: 1px solid var(--ligne);
  border-left: 2px solid var(--or-filet);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--surface-2);
  font-size: 13.5px;
  color: var(--texte-2);
  overflow-wrap: anywhere;   /* le texte vient des stagiaires : il peut tout oser */
}
.commentaire footer {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Cartes projets */
.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.carte {
  border: 1px solid var(--ligne);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 14px 16px;
  overflow-wrap: anywhere;
}
.carte h4 { margin: 0 0 2px; font-size: 14.5px; color: var(--texte); }
.carte .qui {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.carte p { margin: 8px 0 10px; font-size: 12.5px; color: var(--texte-2); }
.carte .jauge { grid-template-columns: 1fr 44px; padding: 0; }

.vue-vide {
  padding: 40px 10px;
  text-align: center;
  color: var(--mute);
  font-size: 13.5px;
}

/* ── Cap suivant ───────────────────────────────────────────────────────── */

.cap { padding: clamp(30px, 6vh, 60px) 20px; }
.cap h2 { font-size: clamp(22px, 3vw, 30px); margin: 12px 0 8px; }
.cap__phrase { max-width: 520px; margin: 0 auto 28px; color: var(--texte-2); font-size: 14px; }
.cap__cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  max-width: 960px;
  margin: 0 auto;
  text-align: left;
}
.carte-cap {
  position: relative;
  border: 1px solid var(--ligne-forte);
  border-radius: 14px;
  background: var(--surface);                                  /* repli sans color-mix */
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  padding: 20px 20px 16px;
}
.carte-cap__badge {
  position: absolute;
  top: 14px; right: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or);
  border: 1px solid var(--or-filet);
  background: var(--or-doux);
  border-radius: 999px;
  padding: 3px 8px;
}
.carte-cap h3 { font-size: 16px; margin: 0 0 8px; padding-right: 64px; }
.carte-cap p { margin: 0; font-size: 13px; color: var(--texte-2); }

/* ── Pied ──────────────────────────────────────────────────────────────── */

.pied {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  max-width: var(--largeur);
  margin: 30px auto 0;
  padding: 18px clamp(14px, 3vw, 24px) 26px;
  border-top: 1px solid var(--ligne);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ── Accessibilité, petits écrans, impression ─────────────────────────── */

@media (max-width: 640px) {
  .jauge { grid-template-columns: 1fr 52px; }
  .jauge > span { grid-column: 1 / -1; padding-bottom: 2px; }
  .carte-cap h3 { padding-right: 0; }
  /* l'heure de la photo reste au pied de page ; la barre étroite s'en passe.
     display:none (et non [hidden]) : mais alors la marge auto de l'état ne
     pousse plus rien, donc on la remet sur les actions pour les garder à droite. */
  .barre__etat { display: none; }
  .barre__actions,
  .barre__etat:not([hidden]) ~ .barre__actions { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panneau::before { animation: none; opacity: 0; }
  .vue { animation: none; }
  .jauge__rempli { transition: none; }
}

@media print {
  /* Le papier n'a qu'un régime : les jetons repassent en jour quoi qu'ait
     choisi l'écran, sinon une impression depuis la nuit sort claire sur blanc. */
  :root, :root[data-theme="sombre"] {
    --fond: #fff; --surface: #fff; --surface-2: #fff;
    --texte: #000; --texte-2: #222; --mute: #555;
    --or: #8b5f0d; --or-vif: #8b5f0d;
    --ligne: #ddd; --ligne-forte: #bbb;
    --or-filet: #c9c4b8; --or-doux: transparent;
    --ok: #2c7a55; --souci: #a8551c;
  }
  .barre, .onglets, .porte, .cap { display: none !important; }
  .vue[hidden] { display: block !important; }
  .panneau { border: none; box-shadow: none; min-height: 0; }
  .panneau::before { display: none; }
  body { background: #fff; color: #000; }
}