/* ============================================================
   EXPRISM — Tutoriels & mises à jour (rubrique publique)
   ============================================================
   Direction artistique : `DESIGN-UNIVERS.md` puis `DESIGN.md`, lus avant d'écrire une règle.

   · LE MOBILIER SE TAIT. Cartes, listes, panne : un trait (`--line`), un fond (`--card`), une
     ombre basse. Aucune aura sur un contenant — la référence du dépôt est `.tools-more-pop`.
   · LA COULEUR VA AU CONTENU ET À L'ACTION. Le spectre n'apparaît que sur l'onglet ACTIF et
     sur la pastille de version : deux endroits qui disent « voici où tu es ».
   · DE LA PILULE PARTOUT OÙ L'ON PRESSE. Onglets, bouton « Réessayer », champ de recherche :
     `--r-pilule`. Les cartes, elles, contiennent : rayon `--r-ui`, jamais plein.
   · LE MOUVEMENT S'ARRÊTE (`prefers-reduced-motion`). Les dégradés restent — ce sont des
     couleurs — les translations et les mises à l'échelle s'éteignent.
   ============================================================ */

:root {
  /* Aucune valeur n'est écrite en dur dans une règle : les locales vivent ici. */
  --r-pilule: 999px;
  --r-ui: 14px;
  --ombre-basse: 0 18px 40px rgba(0, 0, 0, 0.34);
  --mesure-lecture: 74ch;
}

/* ---------- En-tête ---------- */
/* `z-index: 1` comme `main, .hero, .footer` de styles.css : sans lui, le grain cinéma
   (position fixe, z-index 0) passerait par-dessus le titre. */
.tuto-hero {
  position: relative;
  z-index: 1;
  padding: clamp(4.2rem, 9vw, 6.2rem) clamp(1.2rem, 5vw, 3rem) clamp(1.6rem, 4vw, 2.4rem);
}

.tuto-hero .brand { position: absolute; top: 1.4rem; left: clamp(1.2rem, 5vw, 3rem); }

.tuto-hero-inner { max-width: var(--max); margin: 0 auto; text-align: center; }

.tuto-hero-inner h1 { font-size: clamp(2.1rem, 5.6vw, 3.4rem); line-height: 1.08; }

/* Titre de section : 10–11 px, capitales, `letter-spacing` — cf. DESIGN.md §4. */
.tuto-surtitre {
  margin: 0 0 0.9rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

.tuto-hero-inner .promise {
  max-width: 62ch;
  margin: 1.1rem auto 0;
  color: var(--body);
  font-size: clamp(0.98rem, 2.1vw, 1.1rem);
}

/* ---------- Corps ---------- */
.tuto {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 1.6rem) clamp(1.2rem, 5vw, 3rem) clamp(3rem, 7vw, 4.5rem);
}

/* ---------- Les deux onglets visibles ---------- */
.tuto-onglets {
  display: flex;
  gap: 0.4rem;
  padding: 0.3rem;
  margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--r-pilule);
  background: var(--card);
  width: fit-content;
}

.tuto-onglet {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--r-pilule);
  background: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.52rem 1.15rem;
  transition: color 0.17s var(--ease), border-color 0.17s var(--ease), background 0.17s var(--ease);
}

.tuto-onglet:hover { color: var(--text); }

/* ⛔ LE SPECTRE MARQUE LA SÉLECTION, PAS LE REPOS (DESIGN.md §2 et §5). Un onglet actif
   immobile porte la couleur ; les autres n'en portent aucune. */
.tuto-onglet.is-actif {
  color: #12141a;
  border-color: transparent;
  background-image: var(--rainbow);
  background-size: 200% auto;
}

.tuto-onglet:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---------- État de lecture ---------- */
.tuto-chargement { color: var(--muted); text-align: center; padding: 2.4rem 0; }

.tuto-corps { min-height: 12rem; }

/* ---------- Une panne dit sa cause ---------- */
.tuto-panne {
  border: 1px solid var(--line);
  border-radius: var(--r-ui);
  background: var(--card);
  box-shadow: var(--ombre-basse);
  padding: clamp(1.4rem, 4vw, 2rem);
  text-align: center;
}

.tuto-panne h2 { font-size: 1.15rem; margin: 0 0 0.6rem; }
.tuto-panne-cause { color: var(--body); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86rem; word-break: break-word; }
.tuto-panne-note { color: var(--faint); font-size: 0.9rem; margin: 0.9rem auto 0; max-width: 56ch; }

/* ---------- Boutons en pilule ---------- */
.tuto-pilule {
  appearance: none;
  margin-top: 1.3rem;
  padding: 0.6rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pilule);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  transition: background 0.17s var(--ease), border-color 0.17s var(--ease);
}

.tuto-pilule:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--line); }
.tuto-pilule:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---------- Tête de rubrique ---------- */
.tuto-section h2 { font-size: clamp(1.4rem, 3.4vw, 1.85rem); }
.tuto-section .tuto-surtitre { margin-bottom: 0.5rem; }
.tuto-texte { color: var(--body); max-width: 62ch; margin-top: 0.7rem; }

.tuto-recherche {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 0.4rem;
}

.tuto-champ {
  flex: 1 1 18rem;
  appearance: none;
  padding: 0.66rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pilule);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.94rem;
  transition: border-color 0.17s var(--ease);
}

.tuto-champ::placeholder { color: var(--faint); }
.tuto-champ:focus-visible { outline: none; border-color: var(--cyan); }

.tuto-compteur { color: var(--faint); font-size: 0.84rem; margin: 0; }

.tuto-vide { color: var(--muted); padding: 2rem 0; }

/* ---------- Groupes et cartes ---------- */
.tuto-groupe { margin-top: clamp(1.8rem, 4vw, 2.6rem); }

.tuto-groupe-titre {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 1rem;
}

.tuto-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}

.tuto-carte {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-ui);
  background: var(--card);
  color: inherit;
  transition: border-color 0.17s var(--ease), transform 0.17s var(--ease);
}

.tuto-carte:hover { border-color: rgba(255, 255, 255, 0.26); transform: translateY(-2px); }
.tuto-carte:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.tuto-vignette {
  border-radius: calc(var(--r-ui) - 4px);
  overflow: hidden;
  background: #101216;
  aspect-ratio: 16 / 9;
}

.tuto-vignette img, .tuto-vignette video { width: 100%; height: 100%; object-fit: cover; display: block; }

.tuto-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  color: var(--faint);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.tuto-meta span + span::before { content: "·"; margin-right: 0.6rem; color: var(--faint); }

.tuto-carte-titre { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.tuto-carte-resume { color: var(--muted); font-size: 0.9rem; line-height: 1.5; margin: 0; }

.tuto-carte-lire {
  margin-top: auto;
  padding-top: 0.4rem;
  color: var(--cyan);
  font-size: 0.84rem;
  font-weight: 600;
}

/* ---------- Article (guide ou version) ---------- */
.tuto-retour {
  display: inline-block;
  margin-bottom: 1.4rem;
  color: var(--muted);
  font-size: 0.88rem;
  border-bottom: 1px solid transparent;
  transition: color 0.17s var(--ease), border-color 0.17s var(--ease);
}

.tuto-retour:hover { color: var(--text); border-color: var(--line); }

.tuto-article {
  border: 1px solid var(--line);
  border-radius: var(--r-ui);
  background: var(--card);
  padding: clamp(1.4rem, 4vw, 2.4rem);
}

.tuto-article-titre { font-size: clamp(1.5rem, 3.8vw, 2.1rem); margin: 0.5rem 0 0; }
.tuto-article-chapeau { color: var(--body); margin-top: 0.9rem; max-width: var(--mesure-lecture); }

.tuto-corps-riche { margin-top: 1.6rem; max-width: var(--mesure-lecture); }
.tuto-corps-riche > * + * { margin-top: 1rem; }
.tuto-corps-riche h2, .tuto-corps-riche h3 { font-size: 1.16rem; margin: 1.7rem 0 0.6rem; letter-spacing: -0.02em; }
.tuto-corps-riche p, .tuto-corps-riche li { color: var(--body); }
.tuto-corps-riche ul, .tuto-corps-riche ol { padding-left: 1.3rem; }
.tuto-corps-riche li + li { margin-top: 0.4rem; }
.tuto-corps-riche ul { list-style: disc; }
.tuto-corps-riche ol { list-style: decimal; }

.tuto-corps-riche blockquote {
  margin: 1.3rem 0;
  padding: 0.4rem 0 0.4rem 1rem;
  border-left: 2px solid var(--line);
  color: var(--muted);
}

.tuto-corps-riche code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pilule);
  background: rgba(255, 255, 255, 0.05);
}

/* Le gras et le surligné restent LISIBLES : le surlignage est une couleur, pas une décoration. */
.tuto-corps-riche mark { background: rgba(95, 208, 255, 0.18); color: var(--text); padding: 0.05rem 0.25rem; border-radius: 4px; }
.tuto-corps-riche strong { color: var(--text); font-weight: 700; }
.tuto-corps-riche em { font-style: italic; }

/* ⛔ LES HUIT TEINTES SONT CELLES DE `HL_COLORS` (app/static/app.js) ET DE `style.css`.
   Le centre de la question n'est pas de les réinventer mais de NE PAS les perdre : un guide
   surligné en orange dans Exprism et gris sur le site public ne serait plus le même guide.
   Si la palette bouge un jour côté application, ces deux blocs sont à faire suivre — ils sont
   ici, ensemble, pour qu'on les trouve. */
.tuto-corps-riche mark[data-hl="jaune"]  { background: rgba(255, 224, 50, 0.32); }
.tuto-corps-riche mark[data-hl="vert"]   { background: rgba(74, 222, 128, 0.28); }
.tuto-corps-riche mark[data-hl="bleu"]   { background: rgba(96, 165, 250, 0.28); }
.tuto-corps-riche mark[data-hl="orange"] { background: rgba(251, 146, 60, 0.32); }
.tuto-corps-riche mark[data-hl="rose"]   { background: rgba(244, 114, 182, 0.28); }
.tuto-corps-riche mark[data-hl="rouge"]  { background: rgba(248, 113, 113, 0.28); }
.tuto-corps-riche mark[data-hl="violet"] { background: rgba(192, 132, 252, 0.28); }
.tuto-corps-riche mark[data-hl="cyan"]   { background: rgba(34, 211, 238, 0.28); }

.tuto-corps-riche span[data-fg="jaune"]  { color: rgb(255, 224, 50); }
.tuto-corps-riche span[data-fg="vert"]   { color: rgb(74, 222, 128); }
.tuto-corps-riche span[data-fg="bleu"]   { color: rgb(96, 165, 250); }
.tuto-corps-riche span[data-fg="orange"] { color: rgb(251, 146, 60); }
.tuto-corps-riche span[data-fg="rose"]   { color: rgb(244, 114, 182); }
.tuto-corps-riche span[data-fg="rouge"]  { color: rgb(248, 113, 113); }
.tuto-corps-riche span[data-fg="violet"] { color: rgb(192, 132, 252); }
.tuto-corps-riche span[data-fg="cyan"]   { color: rgb(34, 211, 238); }

/* ⛔ UNE CITATION COLORÉE GARDE SA TEINTE EN FILET ET EN FOND TRÈS LÉGER, JAMAIS EN ENCRE.
   C'est EXACTEMENT ce que fait l'application (`applyQuoteColor`, app.js : fond à .12, bordure à
   .45) — et c'est la règle de la DA : le contenant se tait, la couleur ne colore pas un
   paragraphe entier. Un bloc de texte orange se lirait comme une alerte. */
.tuto-corps-riche blockquote[data-hl] { color: var(--body); }
.tuto-corps-riche blockquote[data-hl="jaune"]  { background: rgba(255, 224, 50, 0.12);  border-left-color: rgba(255, 224, 50, 0.45); }
.tuto-corps-riche blockquote[data-hl="vert"]   { background: rgba(74, 222, 128, 0.12);  border-left-color: rgba(74, 222, 128, 0.45); }
.tuto-corps-riche blockquote[data-hl="bleu"]   { background: rgba(96, 165, 250, 0.12);  border-left-color: rgba(96, 165, 250, 0.45); }
.tuto-corps-riche blockquote[data-hl="orange"] { background: rgba(251, 146, 60, 0.12);  border-left-color: rgba(251, 146, 60, 0.45); }
.tuto-corps-riche blockquote[data-hl="rose"]   { background: rgba(244, 114, 182, 0.12); border-left-color: rgba(244, 114, 182, 0.45); }
.tuto-corps-riche blockquote[data-hl="rouge"]  { background: rgba(248, 113, 113, 0.12); border-left-color: rgba(248, 113, 113, 0.45); }
.tuto-corps-riche blockquote[data-hl="violet"] { background: rgba(192, 132, 252, 0.12); border-left-color: rgba(192, 132, 252, 0.45); }
.tuto-corps-riche blockquote[data-hl="cyan"]   { background: rgba(34, 211, 238, 0.12);  border-left-color: rgba(34, 211, 238, 0.45); }

.tuto-corps-riche img, .tuto-corps-riche video, .tuto-galerie img, .tuto-galerie video {
  width: 100%;
  border-radius: calc(var(--r-ui) - 4px);
  border: 1px solid var(--line);
  background: #101216;
  display: block;
}

.tuto-corps-riche video, .tuto-galerie video { aspect-ratio: 16 / 9; object-fit: contain; }

.tuto-galerie { display: grid; gap: 1rem; margin-top: 1.6rem; }

.tuto-lien, .tuto-renvoi { color: var(--cyan); border-bottom: 1px solid transparent; transition: border-color 0.17s var(--ease); }
.tuto-lien:hover, .tuto-renvoi:hover { border-color: currentColor; }
.tuto-media-lien { color: var(--cyan); }

/* ---------- Mises à jour ---------- */
/* Une coupe (`---`) : un trait du mobilier, jamais un aplat. Rayon nul, comme la timeline de
   l'application — la précision se lit en angle droit (DESIGN.md §3). */
.tuto-corps-riche hr {
  height: 1px;
  margin: 2rem 0;
  border: 0;
  background: var(--line);
}

.tuto-changements { margin-top: 1.6rem; }
.tuto-changements h3 { font-size: 1.05rem; margin: 0 0 0.7rem; }
.tuto-changements ul { list-style: disc; padding-left: 1.3rem; color: var(--body); }
.tuto-changements li + li { margin-top: 0.4rem; }

.tuto-guides-lies { margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.tuto-guides-lies h3 { font-size: 1.05rem; margin: 0 0 0.9rem; }

.tuto-carte-guide {
  display: inline-block;
  margin: 0 0.5rem 0.5rem 0;
  padding: 0.45rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pilule);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 0.88rem;
  transition: background 0.17s var(--ease);
}

.tuto-carte-guide:hover { background: rgba(255, 255, 255, 0.12); }

.tuto-versions { display: grid; gap: 0.8rem; margin-top: 1.6rem; }

.tuto-version {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-ui);
  background: var(--card);
  color: inherit;
  transition: border-color 0.17s var(--ease), transform 0.17s var(--ease);
}

.tuto-version:hover { border-color: rgba(255, 255, 255, 0.26); transform: translateY(-2px); }
.tuto-version:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* La pastille de version est du CONTENU : elle porte la couleur, la carte non. */
.tuto-jeton-version {
  flex: none;
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-pilule);
  background-image: var(--rainbow);
  background-size: 200% auto;
  color: #12141a;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.tuto-version-copie { display: block; min-width: 0; }
.tuto-version-copie small { display: block; color: var(--faint); font-size: 0.78rem; margin-bottom: 0.2rem; }
.tuto-version-copie strong { display: block; font-size: 1.02rem; letter-spacing: -0.02em; }
.tuto-version-copie p { color: var(--muted); font-size: 0.9rem; margin: 0.35rem 0 0; }

/* ---------- Mouvement arrêté sur demande ---------- */
@media (prefers-reduced-motion: reduce) {
  .tuto-onglet, .tuto-pilule, .tuto-champ, .tuto-carte, .tuto-version, .tuto-retour,
  .tuto-lien, .tuto-renvoi, .tuto-carte-guide { transition: none; }
  .tuto-carte:hover, .tuto-version:hover { transform: none; }
}

/* ---------- Étroit ---------- */
@media (max-width: 640px) {
  .tuto-hero .lang-switch { top: 1rem; }
  .tuto-onglets { width: 100%; }
  .tuto-onglet { flex: 1; padding: 0.52rem 0.6rem; }
  .tuto-version { flex-direction: column; gap: 0.6rem; }
}