/* ═══════════════════════════════════════════════════════════════════════
   NOOS — l'habit oo8 (style du didacticiel de PLOOM, 20/10/2026).
   Noir franc uni (jamais de dégradé de fond), un titre qui prend la place,
   le bleu en dégradé DANS le titre seulement, une idée par écran, un seul
   objet qui bouge à la fois, la porte au chargement.

   Tout ce qui se personnalise passe par les variables ci-dessous : les
   réglages de l'élève les réécrivent sur <html> (js/theme.js). Aucune
   couleur n'est écrite en dur ailleurs que dans ce bloc.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --fond: #000000;
  --fond-2: #0A0A0B;            /* une carte : à peine plus claire que le fond */
  --fond-3: #141416;
  --texte: #FFFFFF;
  --texte-2: rgba(255,255,255,.64);
  --texte-3: rgba(255,255,255,.38);
  --trait: rgba(255,255,255,.10);
  --trait-2: rgba(255,255,255,.18);
  --surface: rgba(255,255,255,.045);
  --accent: #0090D3;
  --accent-clair: #73D9FF;
  --accent-profond: #375CAD;
  --sur-accent: #FFFFFF;
  --bouton: #FFFFFF;            /* la pilule blanche bien détachée */
  --sur-bouton: #000000;
  --juste: #34C77B;
  --faux: #FF5A5F;
  --moyen: #F5B83D;
  --externe: #C792EA;           /* une source extérieure se voit toujours */
  --ombre: 0 40px 90px -40px rgba(0,0,0,1);
  --rayon: 20px;
  --rayon-petit: 12px;
  --echelle: 1;
  --interligne: 1.55;
  --espace: 1;                  /* densité : .78 compact, 1 normal, 1.25 aéré */
  --police: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
  --police-titre: var(--police);
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  --sortie: cubic-bezier(.22,.61,.36,1);
  --glisse: cubic-bezier(.76,0,.18,1);
  --duree: 1;                   /* 0 = sans animations */
  color-scheme: dark;
}
:root[data-clair="1"] { color-scheme: light; }

* { box-sizing: border-box; }
html { font-size: calc(16px * var(--echelle)); -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  line-height: var(--interligne);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-clair); }
img, svg, video { max-width: 100%; }
::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); }
:focus-visible { outline: 2px solid var(--accent-clair); outline-offset: 3px; border-radius: 6px; }
.cache { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ─────────────────────────── la porte ─────────────────────────── */

.porte { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.porte-battant { position: absolute; left: 0; right: 0; height: 50.5%; background: #000; transition: transform calc(.75s * var(--duree)) var(--glisse); }
.porte-haut { top: 0; }
.porte-bas { bottom: 0; }
.porte-fente {
  position: absolute; left: 50%; top: 50%; width: min(62vw, 520px); height: 2px; margin-left: calc(min(62vw, 520px) / -2);
  background: #fff; box-shadow: 0 0 18px 2px rgba(255,255,255,.55), 0 0 60px 6px rgba(115,217,255,.25);
  transform: scaleX(0); animation: fente .55s ease-in-out forwards, pouls 1.6s .55s ease-in-out infinite;
}
.porte-mot {
  position: absolute; left: 0; right: 0; top: calc(50% - 46px); text-align: center;
  font-size: 13px; font-weight: 600; letter-spacing: .5em; text-indent: .5em; color: #fff;
  animation: mot .6s var(--sortie) both;
}
.porte.ouverte .porte-haut { transform: translateY(-101%); }
.porte.ouverte .porte-bas { transform: translateY(101%); }
.porte.ouverte .porte-fente, .porte.ouverte .porte-mot { opacity: 0; transition: opacity .3s; animation: none; }
.porte.finie { display: none; }
@keyframes fente { to { transform: scaleX(1); } }
@keyframes pouls { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes mot { from { opacity: 0; letter-spacing: .9em; } to { opacity: 1; letter-spacing: .5em; } }

/* la même porte, en petit, pour une attente dans la page */
.porte-mini { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 0; }
.porte-mini b { font-size: 11px; font-weight: 600; letter-spacing: .45em; text-indent: .45em; color: var(--texte-2); }
.porte-mini i { display: block; width: 180px; height: 2px; background: var(--texte); transform: scaleX(0);
  box-shadow: 0 0 14px 1px color-mix(in srgb, var(--accent-clair) 40%, transparent);
  animation: fente .55s ease-in-out forwards, pouls 1.6s .55s ease-in-out infinite; }

/* ─────────────────────────── la coque ─────────────────────────── */

.coque { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.rail {
  position: sticky; top: 0; height: 100vh; padding: 28px 16px; border-right: 1px solid var(--trait);
  display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
}
.marque { display: flex; align-items: center; gap: 10px; padding: 0 10px 26px; font-weight: 760; letter-spacing: .32em; font-size: 15px; text-decoration: none; color: var(--texte); }
.marque .oo { display: inline-flex; gap: 3px; }
.marque .oo i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent-clair); display: block; }
.rail a.lien {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  color: var(--texte-2); text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: background calc(.18s * var(--duree)), color calc(.18s * var(--duree));
}
.rail a.lien svg { width: 19px; height: 19px; flex: none; opacity: .9; }
.rail a.lien:hover { background: var(--surface); color: var(--texte); }
.rail a.lien.actif { background: var(--surface); color: var(--texte); box-shadow: inset 2px 0 0 var(--accent); }
.rail .bas { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--trait); }
.rail .qui { padding: 8px 12px; font-size: 12px; color: var(--texte-3); }

.scene { min-width: 0; padding: calc(56px * var(--espace)) clamp(18px, 4vw, 56px) 120px; }
.page { max-width: 1080px; margin: 0 auto; }
.page.etroite { max-width: 720px; }
.page.large { max-width: 1320px; }
.page > * { animation: monte calc(620ms * var(--duree)) var(--sortie) both; }
.page > *:nth-child(2) { animation-delay: calc(60ms * var(--duree)); }
.page > *:nth-child(3) { animation-delay: calc(120ms * var(--duree)); }
.page > *:nth-child(4) { animation-delay: calc(180ms * var(--duree)); }
@keyframes monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* barre du bas au téléphone */
.barre { display: none; }
@media (max-width: 820px) {
  .coque { grid-template-columns: 1fr; }
  .rail { display: none; }
  .scene { padding: 28px 16px 110px; }
  .barre {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: color-mix(in srgb, var(--fond) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--trait); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .barre a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; font-size: 10.5px; color: var(--texte-3); text-decoration: none;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* gros texte : la barre ne déborde plus (MiroFish 2, 23/10) */
  .barre a svg { width: 22px; height: 22px; }
  .barre a.actif { color: var(--texte); }
  .barre a.actif svg { color: var(--accent-clair); }
}

/* ─────────────────────────── la typographie ─────────────────────────── */

.sur { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--texte-3); margin: 0 0 18px; font-weight: 600; }
h1, .h1 {
  margin: 0 0 18px; font-family: var(--police-titre);
  font-size: clamp(38px, 6.4vw, 88px); font-weight: 760; letter-spacing: -.042em; line-height: .98;
}
h2, .h2 { margin: 0 0 14px; font-family: var(--police-titre); font-size: clamp(24px, 3vw, 36px); font-weight: 720; letter-spacing: -.03em; line-height: 1.08; }
h3, .h3 { margin: 0 0 10px; font-family: var(--police-titre); font-size: 19px; font-weight: 680; letter-spacing: -.015em; line-height: 1.25; }
.bleu {
  background: linear-gradient(94deg, var(--accent-clair), var(--accent) 52%, var(--accent-profond));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sous { margin: 0; max-width: 680px; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.55; color: var(--texte-2); }
.centre { text-align: center; }
.centre .sous { margin: 0 auto; }
.petit { font-size: 13px; color: var(--texte-3); }
.gris { color: var(--texte-2); }
p { margin: 0 0 12px; }
.hero { padding: calc(36px * var(--espace)) 0 calc(28px * var(--espace)); }
.hero.centre { padding-top: calc(10vh * var(--espace)); }

/* ─────────────────────────── boutons ─────────────────────────── */

.faire {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px; background: var(--bouton); color: var(--sur-bouton);
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; border: 0; border-radius: 999px; cursor: pointer;
  text-decoration: none; transition: transform calc(180ms * var(--duree)) var(--sortie), opacity 180ms; white-space: nowrap;
}
.faire:hover { transform: translateY(-1px); }
.faire:active { transform: scale(.985); }
.faire[disabled] { opacity: .35; cursor: default; transform: none; }
.faire.creux { background: transparent; color: var(--texte); border: 1px solid var(--trait-2); }
.faire.creux:hover { background: var(--surface); }
.faire.petit { padding: 8px 16px; font-size: 13.5px; }
.faire.accent { background: var(--accent); color: var(--sur-accent); }
.faire.danger { background: transparent; color: var(--faux); border: 1px solid color-mix(in srgb, var(--faux) 50%, transparent); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: calc(26px * var(--espace)); }
.centre .actions { justify-content: center; }
.puce {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px;
  background: var(--surface); border: 1px solid var(--trait); color: var(--texte-2); cursor: pointer; white-space: nowrap;
}
button.puce:hover, a.puce:hover { color: var(--texte); border-color: var(--trait-2); }
.puce.on, button.puce.on:hover, a.puce.on:hover { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.puce.externe { color: var(--externe); border-color: color-mix(in srgb, var(--externe) 45%, transparent); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
/* un nom de matière trop long passe à la ligne au lieu de faire glisser l'écran de côté (gros texte au
   téléphone, MiroFish 2, 23/10) ; les pastilles courtes ne changent pas */
.puce { max-width: 100%; }
.puces .puce { white-space: normal; overflow-wrap: anywhere; text-align: left; }
kbd {
  font: inherit; font-size: 11px; color: var(--texte-2); min-width: 26px; padding: 2px 7px 3px; text-align: center; display: inline-block;
  border-radius: 7px; border: 1px solid var(--trait-2); border-bottom-width: 3px; background: var(--surface);
}

/* ─────────────────────────── cartes, grilles ─────────────────────────── */

.carte {
  position: relative; background: var(--fond-2); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: calc(22px * var(--espace)); box-shadow: var(--ombre); overflow: hidden;
}
.carte::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--trait-2) 22%, color-mix(in srgb, var(--accent-clair) 34%, transparent) 50%, var(--trait-2) 78%, transparent);
}
a.carte { display: block; color: inherit; text-decoration: none; transition: transform calc(220ms * var(--duree)) var(--sortie), border-color 220ms; }
a.carte:hover { transform: translateY(-2px); border-color: var(--trait-2); }
.carte.plate { box-shadow: none; }
.carte.externe { border-color: color-mix(in srgb, var(--externe) 40%, transparent); }
.carte .tete { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--trait); font-size: 12px; color: var(--texte-3); }
.grille { display: grid; gap: calc(14px * var(--espace)); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.grille.deux { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.pile { display: flex; flex-direction: column; gap: calc(14px * var(--espace)); }
.ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ligne.entre { justify-content: space-between; }
.section { margin-top: calc(48px * var(--espace)); }
.section > .sur { margin-bottom: 14px; }
.chiffre { font-family: var(--police-titre); font-size: clamp(34px, 4vw, 54px); font-weight: 760; letter-spacing: -.04em; line-height: 1; }
.chiffre small { font-size: .38em; font-weight: 600; letter-spacing: 0; color: var(--texte-3); margin-left: 6px; }
.pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--texte-3); flex: none; }
.pastille.ok { background: var(--juste); box-shadow: 0 0 0 4px color-mix(in srgb, var(--juste) 18%, transparent); }
.pastille.ko { background: var(--faux); box-shadow: 0 0 0 4px color-mix(in srgb, var(--faux) 18%, transparent); }
.pastille.moyen { background: var(--moyen); }
.barre-p { height: 6px; border-radius: 99px; background: var(--surface); overflow: hidden; }
.barre-p i { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width calc(.6s * var(--duree)) var(--sortie); }
hr { border: 0; border-top: 1px solid var(--trait); margin: 24px 0; }

/* ─────────────────────────── formulaires ─────────────────────────── */

.champ { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.champ > span { font-size: 13px; color: var(--texte-2); font-weight: 500; }
.saisie, input[type=text], input[type=password], input[type=url], input[type=search], input[type=number], textarea, select {
  width: 100%; padding: 13px 16px; border-radius: var(--rayon-petit); background: var(--fond-3); border: 1px solid var(--trait-2);
  color: var(--texte); outline: none; transition: border-color 160ms;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.saisie:focus, input:focus, textarea:focus, select:focus { border-color: var(--accent); }
/* au clavier, une case montre le même contour que tout le reste de l'appli (le seul bord d'1 px qui changeait
   de couleur ne se voyait presque pas — clavier seul et malvoyants, MiroFish 2, 23/10) */
.saisie:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent-clair); outline-offset: 2px; }
.bascule { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--trait); cursor: pointer; }
.bascule input { appearance: none; width: 44px; height: 26px; border-radius: 99px; background: var(--trait-2); position: relative; flex: none; cursor: pointer; transition: background 180ms; margin: 0; }
.bascule input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--sur-accent); transition: transform 180ms var(--sortie); }
.bascule input:checked { background: var(--accent); }
.bascule input:checked::after { transform: translateX(18px); }
input[type=range] { width: 100%; accent-color: var(--accent); }
input[type=color] { width: 44px; height: 44px; padding: 0; border: 1px solid var(--trait-2); border-radius: 12px; background: none; cursor: pointer; }

/* ─────────────────────────── messages ─────────────────────────── */

.panne {
  border: 1px solid color-mix(in srgb, var(--faux) 45%, transparent); background: color-mix(in srgb, var(--faux) 7%, var(--fond-2));
  border-radius: var(--rayon); padding: 18px 20px; margin: 14px 0;
}
.panne h3 { color: var(--faux); margin-bottom: 6px; font-size: 16px; }
.panne pre { white-space: pre-wrap; font-family: var(--mono); font-size: 12px; color: var(--texte-2); margin: 8px 0 0; max-height: 220px; overflow: auto; }
.vide { text-align: center; padding: 56px 16px; color: var(--texte-2); }
.vide .h3 { color: var(--texte); }
.note { border-left: 2px solid var(--accent); padding: 4px 0 4px 14px; color: var(--texte-2); font-size: 14px; }
.note.externe { border-color: var(--externe); }
.badge-externe { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--externe); }
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; padding: 11px 18px; border-radius: 999px; background: var(--texte); color: var(--fond); font-size: 14px; font-weight: 550; box-shadow: 0 12px 40px -8px rgba(0,0,0,.6); animation: monte calc(.4s * var(--duree)) var(--sortie) both; }
.toast.ko { background: var(--faux); color: #fff; }
@media (max-width: 820px) { .toasts { bottom: 92px; } }

/* ─────────────────────────── fenêtre ─────────────────────────── */

.voile { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; padding: 16px; animation: apparait calc(.25s * var(--duree)) both; }
.fenetre { width: min(640px, 100%); max-height: 90vh; overflow: auto; background: var(--fond-2); border: 1px solid var(--trait-2); border-radius: calc(var(--rayon) + 4px); padding: 26px; box-shadow: var(--ombre); }
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }

/* ─────────────────────────── écran d'entrée ─────────────────────────── */

.entree { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.entree form { width: min(400px, 100%); }

@media (prefers-reduced-motion: reduce) { :root { --duree: 0.001; } }
:root[data-animations="0"] * { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; }

/* l'écran reçoit le curseur du clavier à chaque changement d'écran : pas de cadre autour de tout l'écran */
#scene:focus { outline: none; }

/* « Plus » de la barre du bas (téléphone) : tous les autres écrans, en une colonne de grands boutons */
.plus-liste { display: grid; gap: 10px; margin-top: 14px; }
.plus-liste a { justify-content: flex-start; gap: 12px; min-height: 48px; }
.plus-liste svg { width: 20px; height: 20px; flex: none; }