/* ============================================================================
   COMPOSITIONS — pages déclinées du design system.
   Ce fichier n'invente aucune couleur, aucune police, aucune valeur : il
   assemble les tokens de design-system.css. Toute valeur en dur ici serait un
   défaut à corriger.

   Trois pages à ce jour : la landing, la page de remerciement, et la maquette
   de l'accueil des ressources.
   ========================================================================= */

/* --------------------------------------------------------- blocs communs - */

.bloc-tete { display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-8); }
.colonne { max-width: var(--reading-max); }
.appui {
  font: var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-core);
  color: var(--text-body); max-width: var(--measure-wide);
}
.appui strong { font-weight: var(--weight-semibold); color: var(--text-title); }
.appui--detache { margin-top: var(--space-6); }
.bande--encre .appui { color: var(--text-on-inverse-muted); }
.bande--encre .appui strong { color: var(--text-on-inverse); }
.texte { font: var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-core); max-width: var(--measure-wide); }
.texte + .texte { margin-top: var(--space-4); }
.texte strong { font-weight: var(--weight-semibold); color: var(--text-title); }

/* ------------------------------------------------------------------ hero - */

.hero-ds { position: relative; overflow: hidden; background: var(--surface-inverse); padding: var(--space-10) 0 var(--space-9); }
.hero-veil { position: absolute; inset: 0; background: var(--hero-veil); pointer-events: none; }
.hero-grille { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-9); align-items: center; }
.hero-texte { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.hero-ds h1 {
  font: var(--weight-semibold) var(--text-4xl)/var(--leading-tight) var(--font-core);
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-inverse); max-width: 18ch; text-wrap: balance;
}
.hero-chapo { font: var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-core); color: var(--text-on-inverse-muted); max-width: var(--measure-body); }
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero-note { font: var(--weight-regular) var(--text-sm)/1.45 var(--font-core); color: var(--text-on-inverse-muted); }

/* --------------------------------------------------- landing : les cinq --- */
/* Une suite de moments, pas une grille de cartes : c'est une lecture. */

.moments { max-width: var(--reading-max); margin-bottom: var(--space-8); }

/* ------------------------------------------- landing : la démonstration --- */

.demo-lignes { display: grid; gap: var(--space-5); max-width: var(--measure-wide); margin: var(--space-6) 0 var(--space-7); }
.demo-vague { font: var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-core); color: var(--text-on-inverse-muted); }
/* La demande citée se distingue par la couleur et la graisse : Poppins n'a
   pas d'italique servi depuis notre domaine. */
.citation { font-style: normal; font-weight: var(--weight-medium); color: var(--grey-300); }
.demo-precis {
  font: var(--weight-medium) var(--text-lg)/var(--leading-snug) var(--font-core);
  color: var(--text-on-inverse); padding-top: var(--space-5);
  border-top: 1px solid var(--border-inverse);
}

/* ------------------------------------- landing : les cinq ressources ----- */
/* Une rangée par ressource : problème, résultat, nom. Pas cinq cartes
   identiques — le nom arrive après le bénéfice, comme dans le texte validé. */

.ressources-rangs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: rang; max-width: var(--page-max); }
.ressources-rangs--suite { counter-reset: rang 1; }
.ressources-rangs li {
  display: grid; grid-template-columns: 56px 1fr 260px; gap: var(--space-6); align-items: start;
  padding: var(--space-7) 0; border-top: 1px solid var(--border-card);
}
.ressources-rangs li:last-child { border-bottom: 1px solid var(--border-card); }
.ressources-rangs li::before {
  counter-increment: rang; content: '0' counter(rang);
  font: var(--weight-semibold) var(--text-xl)/1.2 var(--font-core); color: var(--grey-300);
}
.r-probleme { font: var(--weight-semibold) var(--text-md)/var(--leading-snug) var(--font-core); color: var(--text-title); }
.r-resultat { margin-top: var(--space-3); font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-core); color: var(--text-muted); max-width: var(--measure-body); }
.r-nom {
  font: var(--weight-semibold) var(--text-base)/1.3 var(--font-core); color: var(--blue-600);
  display: inline-flex; align-items: baseline; gap: var(--space-2);
}
/* Cible tactile : jamais moins de 44 px de haut. */
a.r-lien { text-decoration: none; display: inline-flex; align-items: center; min-height: var(--hit-min); }
a.r-lien:hover .r-nom { color: var(--blue-700); text-decoration: underline; }

/* ---------------------------------------------- landing : l'inscription --- */

.inscription-grille { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: start; }
.champ-intro { font: var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-core); color: var(--text-on-inverse-muted); margin-top: var(--space-4); }
.inscription-formulaire { display: flex; flex-direction: column; gap: var(--space-5); }
.inscription-formulaire .microcopy + .microcopy { margin-top: calc(var(--space-2) * -1); }

/* ---------------------------------------------------- landing : la fin --- */

.final-bloc { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; max-width: var(--measure-wide); }
.final-bloc h2 { font: var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-core); letter-spacing: var(--tracking-tight); }
.final-bloc .hero-note { color: var(--text-muted); }

/* ------------------------------------------------------------- /merci ---- */

.merci-bloc { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); max-width: var(--measure-wide); }
.confirmation {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: var(--weight-medium) var(--text-sm)/1 var(--font-core); color: var(--green-600);
}
.confirmation .ico { width: 20px; height: 20px; }
.merci-bloc h1 {
  font: var(--weight-semibold) var(--text-3xl)/var(--leading-tight) var(--font-core);
  letter-spacing: var(--tracking-tight);
}
.tagline { font: var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-core); color: var(--text-muted); max-width: var(--measure-body); }



/* Sortie sans e-mail : présente, jamais concurrente du formulaire. */
.sans-email { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-inverse); }
.sans-email a { color: var(--text-on-inverse-muted); text-decoration: underline; }
.sans-email a:hover { color: var(--paper-000); }

/* ------------------------------------------- /merci : état de la série --- */
/* Ces blocs informent, ils ne bloquent rien : les ressources sont ouvertes
   dans tous les cas. */

.etat-mail {
  margin-top: var(--space-4); padding: var(--space-6);
  background: var(--surface-card); border: 1px solid var(--border-card);
  border-radius: var(--radius-card); max-width: var(--measure-wide);
}
.etat-mail--ok { background: rgba(24, 138, 91, .07); border-color: rgba(24, 138, 91, .35); }
.attente-titre {
  display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3);
  font: var(--weight-semibold) var(--text-base)/1.3 var(--font-core); color: var(--text-title);
}
.attente-titre .ico { width: 20px; height: 20px; color: var(--blue-600); }
.etat-mail--ok .attente-titre .ico { color: var(--green-600); }
.etat-mail .microcopy { margin-top: var(--space-3); }

/* ------------------------------------------ maquette : accueil ressources - */

.accueil-hero .hero-grille { grid-template-columns: 1.15fr .85fr; }

/* Deux voix dans un seul titre : l'amorce annonce, le titre du livre frappe.
   Une seule police — la différence vient de la casse, de la chasse, de la
   graisse, de l'échelle et de la couleur, plus un filet orange qui souligne
   le titre du livre sans jamais le mettre en italique. */
.titre-accueil { display: flex; flex-direction: column; gap: var(--space-4); max-width: 22ch; }
.titre-amorce {
  font: var(--weight-medium) var(--text-md)/1.3 var(--font-core);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-on-inverse-muted);
}
.titre-livre--hero {
  font: var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-core);
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-inverse);
  position: relative; padding-bottom: var(--space-4);
}
/* Landing : même principe, appliqué à l'accroche validée. La tension s'annonce,
   la promesse frappe. Le texte n'est pas touché — seule la voix change. */
.titre-hook { max-width: 20ch; }
.titre-hook .titre-amorce { text-transform: none; letter-spacing: normal; font-size: var(--text-lg); line-height: var(--leading-snug); }
.titre-frappe {
  font: var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-core);
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-inverse);
  position: relative; padding-bottom: var(--space-4);
}
.titre-frappe::after,
.titre-livre--hero::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: var(--rule-accent-len); height: var(--rule-accent-w);
  background: var(--orange-500); border-radius: var(--radius-pill);
}

.mise-en-avant {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--space-6);
  background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-card);
  padding: var(--gutter-card-lg); box-shadow: var(--shadow-xs);
  max-width: var(--page-max);
}
.mise-en-avant .num { font-size: var(--text-2xl); color: var(--blue-500); }
.mise-en-avant h3 { font: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-core); }
.mise-en-avant .r-resultat { max-width: var(--measure-wide); }
.mise-en-avant-corps { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }

.suite-tete { margin-top: var(--space-11); display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-6); }
.suite-tete h2 { font: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-core); }
.suite-tete p { font: var(--weight-regular) var(--text-sm)/1.45 var(--font-core); color: var(--text-muted); }

/* ========================================================================== */
/* ACCUEIL DE L'ESPACE — page éditoriale.
   Le rythme porte la page : une entrée mise en avant, une respiration sombre,
   puis quatre rangées qui alternent le côté de l'aperçu. Chaque ressource
   montre un fragment réel de son contenu, jamais une carte de plus. */

.entree-grille {
  display: grid; grid-template-columns: 1fr .85fr; gap: var(--space-10);
  align-items: center;
}
.entree-texte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.entree-rang { font: var(--weight-bold) var(--text-3xl)/1 var(--font-core); color: var(--blue-500); letter-spacing: var(--tracking-tight); }
.entree-texte h3 { display: flex; align-items: center; gap: var(--space-4); font: var(--weight-semibold) var(--text-3xl)/var(--leading-snug) var(--font-core); letter-spacing: var(--tracking-tight); }
.entree-texte .pastille { width: 52px; height: 52px; background: var(--blue-500); color: var(--paper-000); }
.entree-texte .pastille .ico { width: 26px; height: 26px; }
.entree-tagline { font: var(--weight-medium) var(--text-md)/var(--leading-snug) var(--font-core); color: var(--blue-600); }
.entree-texte .btn { margin-top: var(--space-3); }

/* ------------------------------------------------- aperçus de contenu ---- */
/* Fragments réels, lus dans le contenu à la construction. */

/* Les aperçus sont des extraits, pas des cartes : pas d'ombre, une bordure
   discrète, et un fond qui alterne d'une rangée à l'autre. */
.entree-apercu, .rang-apercu {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--gutter-card);
}
.rang:nth-child(even) .rang-apercu { background: var(--surface-soft); border-color: transparent; }
/* Sur fond teinté, les pastilles de mots reprennent le blanc pour rester lisibles. */
.rang:nth-child(even) .mot { background: var(--paper-000); }
.entree-apercu { transform: rotate(-1deg); }
.apercu-etiquette {
  font: var(--weight-semibold) var(--text-2xs)/1.3 var(--font-core);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--grey-600);
  margin-bottom: var(--space-4);
}
.apercu-prompt { font: var(--weight-regular) var(--text-xs)/1.75 var(--font-mono); color: var(--ink-800); }
.apercu-prompt + .apercu-prompt { margin-top: var(--space-3); }
.entree-apercu .fiche-copier { margin-top: var(--space-5); }

.apercu-symptomes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.apercu-symptomes li {
  font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-core);
  color: var(--text-body);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-card);
}
.apercu-symptomes li:last-child { border-bottom: 0; padding-bottom: 0; }

.apercu-terme { font: var(--weight-semibold) var(--text-lg)/1.2 var(--font-core); color: var(--text-title); }
.apercu-definition { margin-top: var(--space-2); font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-core); color: var(--text-muted); }
.apercu-mots { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mot {
  font: var(--weight-regular) var(--text-2xs)/1 var(--font-core); color: var(--grey-600);
  background: var(--surface-soft); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-3);
}

.apercu-reflexe {
  display: flex; align-items: center; gap: var(--space-3);
  font: var(--weight-semibold) var(--text-base)/var(--leading-snug) var(--font-core); color: var(--text-title);
}
.apercu-case {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: var(--radius-sm);
  background: var(--blue-500); color: var(--paper-000);
}
.apercu-case .ico { width: 14px; height: 14px; }

.apercu-bilan { font: var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-core); color: var(--text-body); }
.apercu-verdict { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.verdict {
  font: var(--weight-medium) var(--text-2xs)/1 var(--font-core);
  border-radius: var(--radius-pill); padding: var(--space-2) var(--space-3);
}
.verdict--stable { color: var(--green-600); background: rgba(24, 138, 91, .1); }
.verdict--change { color: var(--orange-700); background: var(--orange-050); }

/* --------------------------------------------------------- respiration --- */

/* Une seule phrase, centrée entre deux guillemets : la page respire ici. */
.exergue {
  margin: 0; display: grid; grid-template-columns: auto minmax(0, 40ch) auto;
  justify-content: center; align-items: start; gap: var(--space-4);
}
.guillemet {
  font: var(--weight-semibold) var(--text-4xl)/1 var(--font-core);
  color: var(--blue-500); user-select: none;
}
.transition-phrase {
  margin: 0;
  font: var(--weight-regular) var(--text-xl)/var(--leading-snug) var(--font-core);
  color: var(--text-on-inverse-muted); text-align: center; text-wrap: balance;
}
.transition-phrase strong { color: var(--text-on-inverse); font-weight: var(--weight-medium); }

/* ------------------------------------------------ les quatre suivantes --- */

.suite-rangs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rang {
  display: grid; grid-template-columns: 1fr .8fr; gap: var(--space-10);
  align-items: center;
  padding: var(--space-10) 0;
  border-top: 1px solid var(--border-card);
}
.rang:first-child { border-top: 0; padding-top: 0; }
.rang:nth-child(even) { padding-block: var(--space-11); }
/* Une rangée sur deux inverse l'ordre : le regard ne s'endort pas. */
.rang:nth-child(even) .rang-texte { order: 2; }
.rang-texte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.rang-num { font: var(--weight-bold) var(--text-3xl)/1 var(--font-core); color: var(--grey-500); letter-spacing: var(--tracking-tight); }

/* Le nom de la ressource porte la rangée : c'est lui qu'on cherche du regard,
   et c'est lui qui ouvre la page. La question vient juste en dessous. */
.rang-texte h3 { font: var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-core); letter-spacing: var(--tracking-tight); }
.rang-nom {
  display: inline-flex; align-items: center; gap: var(--space-3);
  color: var(--text-title); text-decoration: none;
  transition: var(--transition-control);
}
.rang-nom:hover { color: var(--blue-600); }
.rang-nom .fleche { font-size: var(--text-lg); color: var(--blue-500); transition: var(--transition-control); }
.rang-nom:hover .fleche { transform: translateX(3px); }
.pastille {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--radius-control);
  background: var(--blue-050); color: var(--blue-600);
}
.pastille .ico { width: 22px; height: 22px; }
.rang-quand {
  font: var(--weight-medium) var(--text-md)/var(--leading-snug) var(--font-core);
  color: var(--text-body); max-width: 26ch;
}
.texte--encre { color: var(--text-on-inverse-muted); }

/* ========================================================================== */
/* L'ANTISÈCHE IA — page dense, 50 prompts.
   Aucune bordure fermée autour d'un prompt : ce sont le blanc, les filets et
   la hiérarchie typographique qui séparent. Le seul aplat de la page est le
   texte à copier, parce qu'il faut le distinguer d'un coup d'œil. */

/* ---------------------------------------------------- hero d'une ressource */

.hero-ressource { padding: var(--space-9) 0 var(--space-10); }
.hero-ressource h1 {
  font: var(--weight-semibold) var(--text-3xl)/var(--leading-tight) var(--font-core);
  letter-spacing: var(--tracking-tight); color: var(--text-on-inverse);
}
.hero-ressource .hero-chapo {
  margin-top: var(--space-3);
  font: var(--weight-medium) var(--text-md)/var(--leading-snug) var(--font-core);
  color: var(--blue-300);
}
.hero-ressource .hero-note { margin-top: var(--space-4); max-width: var(--measure-body); }
.hero-ressource .hero-grille { grid-template-columns: 1.05fr .95fr; align-items: center; }

/* ------------------------------- objet du hero : une fiche de prompt ------
   Décoratif et explicatif : on voit une demande prête à l'emploi et ce qu'il
   faut y remplacer, avant même d'avoir lu une ligne. */

.fiche-visuel { position: relative; justify-self: center; width: min(420px, 100%); }
.fiche { border-radius: var(--radius-card); }
.fiche--arriere {
  position: absolute; inset: 26px -12px -10px 24px;
  background: var(--paper-200);
  transform: rotate(3deg);
  box-shadow: 0 16px 36px rgba(5, 2, 8, .4);
}
.fiche--avant {
  position: relative;
  background: var(--paper-000);
  padding: var(--space-6);
  transform: rotate(-2deg);
  box-shadow: var(--shadow-book);
}
.fiche-etiquette {
  font: var(--weight-semibold) var(--text-2xs)/1 var(--font-core);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--grey-600);
  margin-bottom: var(--space-4);
}
.fiche-lignes {
  /* La fiche est un fragment : le texte s'efface au lieu d'être coupé net. */
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.fiche-lignes p { font: var(--weight-regular) var(--text-2xs)/1.75 var(--font-mono); color: var(--ink-800); }
.fiche-lignes p + p { margin-top: var(--space-3); }
.fiche-copier {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-5); padding: var(--space-2) var(--space-4);
  font: var(--weight-medium) var(--text-2xs)/1 var(--font-core);
  color: var(--blue-600); border: 1px solid var(--blue-300); border-radius: var(--radius-control);
}
.fiche-copier .ico { width: 14px; height: 14px; }

/* ------------------------------------------------------- mode d'emploi --- */

.mode-emploi .filet { margin-top: var(--space-5); }
.mode-intro {
  margin-top: var(--space-6);
  font: var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-core);
  color: var(--text-body); max-width: var(--measure-wide);
}
.mode-intro + .mode-intro { margin-top: var(--space-3); }

.etapes {
  list-style: none; margin: var(--space-8) 0 0; padding: 0; counter-reset: etape;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8);
  max-width: 960px;
}
.etapes li { display: grid; grid-template-columns: 36px 1fr; gap: var(--space-3); align-items: baseline; }
.etapes li::before {
  counter-increment: etape; content: '0' counter(etape);
  font: var(--weight-semibold) var(--text-lg)/1 var(--font-core); color: var(--blue-500);
}
.etapes p { font: var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-core); color: var(--text-body); }

.legende-crochets {
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid var(--border-card);
  font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-core);
  color: var(--text-muted); max-width: var(--measure-wide);
}
.legende-crochets code { font-family: var(--font-mono); }

/* ------------------------------------------------ ouverture de catégorie - */

.cat-section { scroll-margin-top: var(--space-6); padding-top: var(--space-10); padding-bottom: var(--space-8); }
.cat-section + .cat-section { padding-top: var(--space-9); }
.cat-tete { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-8); }
.cat-numero {
  font: var(--weight-bold) var(--text-4xl)/1 var(--font-core);
  color: var(--blue-500); letter-spacing: var(--tracking-tight);
}
.cat-intro { font: var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-core); color: var(--text-muted); max-width: var(--measure-wide); }

/* -------------------------------------------------------- un prompt ----- */

.prompt-entree {
  scroll-margin-top: var(--space-6);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border-card);
}
.prompt-tete { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-4); align-items: baseline; }
.prompt-rang { font: var(--weight-semibold) var(--text-lg)/1.2 var(--font-core); color: var(--grey-300); }
.prompt-entree h3 { font: var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-core); }
.prompt-besoin { margin-top: var(--space-2); font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-core); color: var(--text-muted); max-width: var(--measure-body); }

.prompt-texte {
  position: relative;
  margin: var(--space-5) 0 0 56px;
  background: var(--surface-soft);
  border-radius: var(--radius-control);
  padding: var(--space-6) var(--space-6) var(--space-6);
  max-width: 780px;
}
.prompt-texte-corps { padding-right: 130px; }
.prompt-texte-corps p {
  font: var(--weight-regular) var(--text-sm)/1.7 var(--font-mono);
  color: var(--ink-800);
}
.prompt-texte-corps p + p { margin-top: var(--space-4); }
/* Certains prompts contiennent une liste : elle reste dans la même voix que le
   reste du texte à copier. */
.prompt-texte-corps ol, .prompt-texte-corps ul { margin: var(--space-3) 0 0; padding-left: var(--space-6); }
.prompt-texte-corps li {
  font: var(--weight-regular) var(--text-sm)/1.7 var(--font-mono);
  color: var(--ink-800);
}
.prompt-texte-corps li::marker { color: var(--grey-500); }
.prompt-texte-corps ol + p, .prompt-texte-corps ul + p { margin-top: var(--space-4); }

/* Bouton secondaire : lisible, jamais un gros bouton bleu répété 50 fois. */
.copy {
  position: absolute; top: var(--space-5); right: var(--space-5);
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--control-h-sm); min-height: var(--control-h-sm); padding: 0 var(--space-4);
  font: var(--weight-medium) var(--text-xs)/1 var(--font-core);
  color: var(--blue-600); background: var(--paper-000);
  border: 1px solid var(--blue-300); border-radius: var(--radius-control);
  cursor: pointer; transition: var(--transition-control);
}
.copy:hover { background: var(--blue-500); border-color: var(--blue-500); color: var(--paper-000); }
.copy:active { transform: scale(var(--press-scale)); }
.copy .ico { width: 15px; height: 15px; }
.copy[data-etat='ok'] { background: var(--green-600); border-color: var(--green-600); color: var(--paper-000); }
.copy[data-etat='ko'] { background: var(--orange-050); border-color: var(--orange-400); color: var(--orange-700); }

/* Les crochets : la signature de la page. Ce qui est orange se remplace. */
.var {
  font-family: var(--font-mono); font-size: .92em; font-weight: var(--weight-semibold);
  color: var(--orange-700); background: var(--orange-050);
  border-radius: var(--radius-sm); padding: .08em .26em;
}

.prompt-perso, .prompt-conseil {
  margin: var(--space-5) 0 0 56px;
  font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-core);
  color: var(--text-body); max-width: 780px;
}
.prompt-perso { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.prompt-conseil { color: var(--text-muted); }
.etiquette {
  font: var(--weight-semibold) var(--text-2xs)/1 var(--font-core);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--grey-600);
}
.etiquette--bleu { color: var(--blue-600); margin-right: var(--space-2); }

/* ------------------------------------------------------- fin de la page - */

.texte-encre p { font: var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-core); color: var(--text-on-inverse-muted); max-width: var(--measure-wide); }
.texte-encre p + p { margin-top: var(--space-4); }
.texte-encre strong { color: var(--text-on-inverse); font-weight: var(--weight-semibold); }
.rappels { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border-inverse); display: grid; gap: var(--space-4); }
.rappels p { font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-core); color: var(--text-on-inverse-muted); max-width: var(--measure-wide); }
.retour-ds { margin-top: var(--space-8); }
.retour-ds a { font: var(--weight-medium) var(--text-base)/1 var(--font-core); color: var(--blue-300); text-decoration: none; }
.retour-ds a:hover { color: var(--paper-000); text-decoration: underline; }

/* ========================================================================== */
/* PROSE COMMUNE — le markdown des ressources, habillé au système. */

.prose-ds p { font: var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-core); color: var(--text-body); max-width: var(--measure-wide); }
.prose-ds p + p, .prose-ds ul + p, .prose-ds ol + p { margin-top: var(--space-4); }
.prose-ds strong { font-weight: var(--weight-semibold); color: var(--text-title); }
.prose-ds ul, .prose-ds ol { margin: var(--space-4) 0 0; padding-left: var(--space-6); max-width: var(--measure-wide); }
.prose-ds li { font: var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-core); color: var(--text-body); }
.prose-ds li + li { margin-top: var(--space-2); }
.prose-ds li::marker { color: var(--blue-500); font-weight: var(--weight-semibold); }
.prose-ds code { font: var(--weight-regular) .92em/1 var(--font-mono); background: var(--surface-soft); border-radius: var(--radius-sm); padding: .12em .34em; }
.prose-ds table { width: 100%; border-collapse: collapse; margin-top: var(--space-5); font-size: var(--text-sm); display: block; overflow-x: auto; }
.prose-ds th, .prose-ds td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-card); vertical-align: top; }
.prose-ds th { font: var(--weight-semibold) var(--text-2xs)/1.3 var(--font-core); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--grey-600); }
.texte-encre .prose-ds p, .texte-encre li { color: var(--text-on-inverse-muted); }

.badge {
  display: inline-block; margin-left: var(--space-3);
  font: var(--weight-semibold) var(--text-2xs)/1 var(--font-core);
  letter-spacing: .04em; border-radius: var(--radius-pill); padding: var(--space-2) var(--space-3);
  vertical-align: middle;
}
.badge--evolutif { color: var(--orange-700); background: var(--orange-050); }
.badge--date { margin: 0; font-size: var(--text-sm); color: var(--blue-700); background: var(--blue-050); padding: var(--space-3) var(--space-5); }

/* ========================================================================== */
/* SOS IA — un centre de dépannage : on cherche un symptôme, pas une lecture. */

.fiche-symptome { font: var(--weight-semibold) var(--text-base)/1.35 var(--font-core); color: var(--ink-900); margin-bottom: var(--space-3); }
.fiche-lignes p { font: var(--weight-regular) var(--text-2xs)/1.75 var(--font-core); color: var(--grey-700); }

.fiches { display: grid; gap: 0; }
.fiche-sos { padding: var(--space-9) 0 var(--space-8); border-top: 1px solid var(--border-card); scroll-margin-top: var(--space-6); }
.fiche-sos .prompt-rang { font-size: var(--text-xl); color: var(--grey-500); }
.fiche-sos h3 { font: var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-core); }
.sos-probleme { margin-top: var(--space-2); font: var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-core); color: var(--text-body); max-width: var(--measure-body); }

/* La cause et les essais se lisent côte à côte : pourquoi, puis quoi faire. */
.sos-corps { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-8); margin: var(--space-6) 0 0 56px; max-width: 900px; }
.sos-cause p, .sos-essais p, .sos-essais li { font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-core); color: var(--text-muted); }
.sos-essais ol { margin: var(--space-3) 0 0; padding-left: var(--space-6); display: grid; gap: var(--space-2); }
.sos-essais li { color: var(--text-body); }
.sos-essais li::marker { color: var(--blue-500); font-weight: var(--weight-semibold); }
.sos-cause .etiquette, .sos-essais .etiquette { display: block; margin-bottom: var(--space-3); }
.fiche-sos .prompt-texte { margin-top: var(--space-6); }
.sos-retenir { margin: var(--space-6) 0 0 56px; font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-core); color: var(--text-body); max-width: 780px; }
.sos-retenir .etiquette { margin-right: var(--space-2); }

/* Information volatile : la seule chose orange de la page avec les crochets. */
.volatil {
  margin: var(--space-6) 0 0 56px; max-width: 780px;
  background: var(--orange-050); border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
}
.volatil-titre {
  font: var(--weight-semibold) var(--text-2xs)/1 var(--font-core);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--orange-700);
  margin-bottom: var(--space-3);
}
.volatil p, .volatil li { font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-core); color: var(--grey-700); }
.volatil p + p { margin-top: var(--space-3); }
.volatil ul { margin: var(--space-3) 0 0; padding-left: var(--space-5); }
.volatil--eviter { background: var(--surface-soft); }
.volatil--eviter .volatil-titre { color: var(--grey-600); }

/* ========================================================================== */
/* LE GLOSSAIRE IA — un lexique : on cherche un mot, on lit trois lignes. */

.index-mots { margin-top: var(--space-8); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
.index-groupe ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.index-titre { display: flex; align-items: baseline; gap: var(--space-2); font: var(--weight-semibold) var(--text-sm)/1.3 var(--font-core); color: var(--text-title); }
.index-rang { color: var(--blue-500); }
.index-groupe a {
  display: inline-block; text-decoration: none;
  font: var(--weight-regular) var(--text-2xs)/1 var(--font-core); color: var(--text-body);
  background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3);
  transition: var(--transition-control);
}
.index-groupe a:hover { border-color: var(--blue-300); color: var(--blue-600); background: var(--blue-050); }

.definitions { display: grid; gap: 0; }
.definition { padding: var(--space-8) 0; border-top: 1px solid var(--border-card); scroll-margin-top: var(--space-6); }
.definition h3 { font: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-core); letter-spacing: var(--tracking-tight); }
.def-phrase { margin-top: var(--space-3); font: var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-core); color: var(--text-body); max-width: var(--measure-wide); }
.def-corps { margin-top: var(--space-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); max-width: 940px; }
.def-corps p { font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-core); color: var(--text-muted); }
.def-corps p + p { margin-top: var(--space-3); }
.def-corps .etiquette { display: block; margin-bottom: var(--space-3); }
.def-retenir { margin-top: var(--space-6); font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-core); color: var(--text-body); }
.def-retenir .etiquette { margin-right: var(--space-2); }
.def-voir { margin-top: var(--space-4); font: var(--weight-regular) var(--text-sm)/1.8 var(--font-core); color: var(--text-muted); }
.def-voir a { text-decoration: none; border-bottom: 1px solid var(--blue-300); }

/* ========================================================================== */
/* MA CHECKLIST IA — dix réflexes qu'on coche, rien d'autre. */

.reflexes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.reflexe-bloc {
  display: grid; grid-template-columns: 72px 1fr; gap: var(--space-6);
  padding: var(--space-8) 0; border-top: 1px solid var(--border-card);
  scroll-margin-top: var(--space-6);
}
.reflexe-rang { font: var(--weight-bold) var(--text-2xl)/1 var(--font-core); color: var(--grey-300); }
.reflexe-corps h2 { font: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-core); letter-spacing: var(--tracking-tight); }
.reflexe-ligne {
  display: flex; align-items: flex-start; gap: var(--space-4);
  margin-top: var(--space-5); padding: var(--space-5) var(--space-6);
  background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-card);
  cursor: pointer; max-width: 780px;
  transition: var(--transition-control);
}
.reflexe-ligne:hover { border-color: var(--blue-300); }
.reflexe-ligne span { font: var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-core); color: var(--text-body); }
input.reflexe {
  flex: none; width: 22px; height: 22px; margin: 2px 0 0;
  accent-color: var(--blue-500); cursor: pointer;
}
.reflexe-ligne:has(input:checked) { background: var(--blue-050); border-color: var(--blue-300); }
.reflexe-ligne:has(input:checked) span { color: var(--ink-900); }
.reflexe-pourquoi { margin-top: var(--space-4); font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-core); color: var(--text-muted); max-width: 780px; }
.reflexe-pourquoi .etiquette { margin-right: var(--space-2); }
.bilan { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); }
.bilan .filet { margin: var(--space-4) 0 var(--space-5); }

/* ========================================================================== */
/* MISES À JOUR — un registre daté, pas un fil d'actualité. */

.verif-tete { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-8); }
.verif-partie { padding: var(--space-8) 0; border-top: 1px solid var(--border-card); }
.verif-partie h3 { font: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-core); margin-bottom: var(--space-5); }
.verif-partie--stable h3 { color: var(--green-600); }
.verif-partie--change h3 { color: var(--orange-700); }
.changement {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--space-5);
  margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--border-card);
}
.changement-rang { font: var(--weight-semibold) var(--text-lg)/1.2 var(--font-core); color: var(--orange-500); }
.changement h4 { font: var(--weight-semibold) var(--text-md)/var(--leading-snug) var(--font-core); margin-bottom: var(--space-3); }

/* ========================================================================== */
/* PAGE LÉGALE — sobre, lisible, et honnête sur ce qui manque encore. */

.avis {
  margin-bottom: var(--space-8); padding: var(--space-5) var(--space-6);
  background: var(--orange-050); border-radius: var(--radius-card);
  font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-core);
  color: var(--orange-700);
}
.legal-prose h2 {
  font: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-core);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-9) 0 var(--space-4);
}
.legal-prose h2:first-child { margin-top: 0; }
.a-completer {
  display: inline-block;
  font: var(--weight-semibold) var(--text-sm)/1.4 var(--font-core);
  color: var(--orange-700); background: var(--orange-050);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
}
.retour-ds--papier a { color: var(--blue-600); }
.retour-ds--papier a:hover { color: var(--blue-700); }

/* ------------------------------------------------------------ responsive - */

@media (max-width: 900px) {
  .hero-grille, .accueil-hero .hero-grille, .hero-ressource .hero-grille, .inscription-grille { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero-ds h1, .titre-accueil { max-width: none; }
  .titre-amorce { font-size: var(--text-sm); }
  .titre-hook, .titre-hook .titre-amorce { max-width: none; }
  .titre-hook .titre-amorce { font-size: var(--text-md); }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 auto; }
  /* Le livre passe sous le texte : titre, promesse et bouton restent visibles
     d'emblée sur un écran de 375 px. */
  .bookshot img { height: min(300px, 52vw); }
  .ressources-rangs li { grid-template-columns: 40px 1fr; gap: var(--space-2) var(--space-4); padding: var(--space-6) 0; }
  .ressources-rangs li > .r-nom,
  .ressources-rangs li > .r-lien { grid-column: 2; margin-top: var(--space-3); }
  .mise-en-avant { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--gutter-card); }
  .suite-tete { flex-direction: column; gap: var(--space-2); }
  .formulaire { max-width: none; }

  /* Accueil : tout se dépile, l'aperçu suit toujours son texte. */
  .entree-grille, .rang { grid-template-columns: 1fr; gap: var(--space-6); }
  .rang-texte h3 { font-size: var(--text-xl); }
  .entree-texte h3 { font-size: var(--text-2xl); }
  .pastille { width: 40px; height: 40px; }
  .rang { padding: var(--space-8) 0; }
  .rang:nth-child(even) .rang-texte { order: 0; }
  .entree-apercu { transform: none; }
  .entree-apercu, .rang-apercu { padding: var(--gutter-card); }
  .exergue { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); }
  .guillemet { font-size: var(--text-2xl); }
  .transition-phrase { font-size: var(--text-lg); }

  /* Antisèche : tout revient au bord gauche, le bouton passe sous le texte. */
  .etapes { grid-template-columns: 1fr; gap: var(--space-5); }
  .fiche-visuel { width: min(340px, 100%); margin-top: var(--space-4); }
  .fiche--avant { padding: var(--space-5); }
  .cat-numero { font-size: var(--text-3xl); }
  .prompt-tete { grid-template-columns: 40px 1fr; gap: var(--space-3); }
  .prompt-texte { margin-left: 0; padding: var(--space-5); }
  .prompt-texte-corps { padding-right: 0; }
  .copy { position: static; width: 100%; justify-content: center; margin-top: var(--space-5); height: var(--control-h); }
  .prompt-perso, .prompt-conseil { margin-left: 0; }

  /* Les quatre autres ressources : tout se dépile, rien ne se décale. */
  .sos-corps, .def-corps, .bilan { grid-template-columns: 1fr; gap: var(--space-6); }
  .sos-corps, .sos-retenir, .volatil { margin-left: 0; }
  .index-mots { grid-template-columns: 1fr; gap: var(--space-6); }
  .reflexe-bloc { grid-template-columns: 44px 1fr; gap: var(--space-4); }
  .changement { grid-template-columns: 40px 1fr; gap: var(--space-4); }
  .verif-tete { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}