@charset "UTF-8";
/* ==========================================================================
   datatropy.ai — feuille unique
   Hors bilan · collection d'essais · Datatropy SASU
   --------------------------------------------------------------------------
   Une seule valeur de marque se change ici, dans le bloc 0. Rien ailleurs.
   Ordre : 0 tokens · 1 base · 2 marque · 3 surfaces sombres · 4 lecture
           5 sommaire à états · 6 navigation de série · 7 recueil PDF
           8 capture email · 9 pages secondaires · 10 pied
           11 éléments fixes · 12 accessibilité · 13 mobile · 14 impression
   ========================================================================== */

/* ==========================================================================
   0. TOKENS DE MARQUE — brand book Datatropy, §1 du brief. Verrouillés.
   ========================================================================== */
:root {
  /* --- Palette. Aucune autre teinte n'est autorisée. --- */
  --slate-900: #0F172A;   /* fond sombre primaire */
  --slate-800: #1E293B;   /* surfaces et filets sur sombre */
  --slate-400: #94A3B8;   /* texte secondaire sur sombre */
  --slate-300: #CBD5E1;   /* bordure de champ de formulaire */
  --slate-200: #E2E8F0;   /* filets sur fond clair */
  --slate-50:  #F8FAFC;   /* fond clair */
  --blue-600:  #2563EB;   /* accent sur fond clair */
  --blue-400:  #60A5FA;   /* accent sur fond sombre */
  --ink-900:   #14140F;   /* texte principal sur clair */
  --ink-600:   #3D3D3A;   /* texte secondaire sur clair */

  /* --- Rôles. Les règles ci-dessous ne référencent que ces noms. --- */
  --fond-sombre: var(--slate-900);
  --fond-clair: var(--slate-50);
  --texte: var(--ink-900);
  --texte-2: var(--ink-600);
  --texte-sombre: var(--slate-50);
  --texte-sombre-2: var(--slate-400);
  --accent: var(--blue-600);
  --accent-sombre: var(--blue-400);
  --filet: var(--slate-200);
  --filet-sombre: var(--slate-800);

  /* --- Typographie. Montserrat exclusivement, deux graisses. --- */
  --font-ui: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* ARBITRAGE §9 — typographie du corps de lecture.
     Défaut retenu : Montserrat compensée par un interlettrage positif.
     Pour basculer sur la variante serif, remplacer ces deux lignes par :
         --font-reading: 'Source Serif 4', Georgia, serif;
         --ls-lecture: 0;
     et décommenter le @font-face Source Serif 4 du bloc 1. Rien d'autre. */
  --font-reading: var(--font-ui);
  --ls-lecture: 0.005em;

  --fs-lecture: 1.1875rem;   /* 19px desktop — 17px au bloc 13 */
  --lh-lecture: 1.75;

  /* --- Rythme. Base 8px. --- */
  --col-lecture: 40rem;      /* 640px — mesure visée 62 à 68 caractères */
  --col-texte: 34rem;        /* colonne des pages de présentation */
  --col-large: 76rem;
  --marge-page: clamp(1.25rem, 5vw, 3rem);
  --section: clamp(4rem, 8vw, 6rem);
}

/* ==========================================================================
   1. BASE
   -------------------------------------------------------------------------- */

/* POLICES — Montserrat auto-hébergée, quatre fichiers dans /assets/fonts/.
   Aucun appel à un serveur tiers, comme l'affirme la politique de
   confidentialité. Les deux graisses sont volontairement les seules : 400
   pour le corps, 700 pour les titres et les accroches.

   AVERTISSEMENT — ne pas supprimer les délimiteurs de ce commentaire.
   Sans le délimiteur ouvrant, ces quatre lignes deviennent du CSS invalide :
   le parseur entre en récupération d'erreur et avale le premier bloc qui
   suit, donc la face 400 normal. Elle n'est alors jamais enregistrée, le
   navigateur rabat le corps de texte sur la face 700, et tout le site
   s'affiche en gras. C'est précisément la panne corrigée ici. */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-700-italic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}


/* VARIANTE SERIF §9 — à décommenter seulement si --font-reading bascule.
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
*/

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  background: var(--fond-clair);
  color: var(--texte);
}

/* Les pages entièrement sombres — accueil et index de collection. */
body.sombre { background: var(--fond-sombre); }

h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); }

.contenu { width: 100%; max-width: var(--col-large); margin: 0 auto; }
.masque { display: none !important; }

/* ==========================================================================
   2. MARQUE — wordmark composé, sélecteur de langue
   -------------------------------------------------------------------------- */
.entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--marge-page);
}
.entete > .contenu {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Data + point médian bleu + tropy. Aucune image. */
.wordmark {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--texte);
  text-decoration: none;
}
.wordmark .point { color: var(--accent); }
.sombre .wordmark, .couverture .wordmark { color: var(--texte-sombre); }
.sombre .wordmark .point, .couverture .wordmark .point { color: var(--accent-sombre); }

/* Sélecteur de langue. Masqué tant qu'aucune traduction n'existe :
   retirer la classe .masque quand /en/ est en ligne. */
.langues {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}
.langues a, .langues span { text-decoration: none; }
.langues .active { color: var(--texte); }
.langues .inactive { color: var(--texte-2); }
.langues .sep { color: var(--filet); }
.sombre .langues .active, .couverture .langues .active { color: var(--texte-sombre); }
.sombre .langues .inactive, .couverture .langues .inactive { color: var(--texte-sombre-2); }
.sombre .langues .sep, .couverture .langues .sep { color: var(--filet-sombre); }

/* Le filet bleu — élément graphique secondaire autorisé. */
.filet {
  width: 80px;
  height: 2px;
  background: var(--accent);
  border: 0;
  margin: 0;
}
.sombre .filet, .couverture .filet { background: var(--accent-sombre); }

/* ==========================================================================
   3. SURFACES SOMBRES — accueil, index de collection, bandeaux de couverture
   -------------------------------------------------------------------------- */
.sombre, .couverture { background: var(--fond-sombre); }

/* --- Accueil : une seule vue, peu ou pas de défilement. --- */
.accueil {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.accueil-corps {
  flex: 1;
  display: flex;
  align-items: center;
  padding: var(--section) var(--marge-page);
}
.titre-collection {
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--texte-sombre);
}
.presentation {
  max-width: var(--col-texte);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--texte-sombre-2);
  text-wrap: pretty;
}
.presentation p + p { margin-top: 1.5em; }

/* Lien vers un opus : lien texte souligné, jamais un bouton. */
.lien-opus {
  display: inline-block;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--accent-sombre);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color 150ms linear;
}
.lien-opus strong { font-weight: 700; }
.lien-opus:hover { color: var(--texte-sombre); }

/* --- Index de collection : en-tête puis liste des opus. --- */
.liste-opus { margin-top: var(--section); }
.opus {
  padding-top: 4rem;
  margin-top: 4rem;
  border-top: 1px solid var(--filet-sombre);
}
.opus:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.opus-numero {
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-sombre);
  margin-bottom: 1rem;
}
.opus-titre { font-size: 2rem; line-height: 1.2; letter-spacing: -0.02em; }
.opus-titre a {
  font-weight: 700;
  color: var(--texte-sombre);
  text-decoration: none;
  transition: color 150ms linear;
}
.opus-titre a:hover { color: var(--accent-sombre); }
.opus-nature {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--texte-sombre-2);
}
.opus-resume {
  margin-top: 1.25rem;
  max-width: var(--col-texte);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--texte-sombre-2);
  text-wrap: pretty;
}
/* Opus annoncé mais non paru. Non utilisé aujourd'hui : la doctrine de rareté
   veut qu'on ne pré-annonce pas. Style prévu pour un usage ultérieur. */
.opus.a-paraitre { opacity: 0.45; }
.opus.a-paraitre .opus-titre a { pointer-events: none; color: var(--texte-sombre-2); }
.opus.a-paraitre .opus-resume { display: none; }

/* --- Bandeau de couverture, en tête des pages d'opus et d'essai. --- */
.couverture {
  display: flex;
  flex-direction: column;
}
.couverture-corps {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  padding: var(--section) var(--marge-page) clamp(3rem, 6vw, 4.5rem);
}
.couverture-corps > .contenu {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 2.75rem);
}
.couverture-opus { min-height: 60vh; }
.couverture-essai { min-height: 50vh; }
.fil-ariane {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--texte-sombre-2);
}
.fil-ariane a { color: var(--texte-sombre-2); text-decoration: none; transition: color 150ms linear; }
.fil-ariane a:hover { color: var(--accent-sombre); text-decoration: underline; }
.fil-ariane .fleche { color: var(--accent-sombre); }
.surtitre {
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-sombre);
  margin-bottom: 1rem;
}
.couverture-titre {
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--texte-sombre);
  text-wrap: balance;
}
.couverture-sous-titre {
  margin-top: 1.25rem;
  max-width: var(--col-texte);
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  line-height: 1.55;
  font-style: italic;
  color: var(--texte-sombre-2);
  text-wrap: pretty;
}
.couverture-credit {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: var(--texte-sombre-2);
}

/* ==========================================================================
   4. CORPS DE LECTURE — §4 du brief. La partie la plus exigeante.
   -------------------------------------------------------------------------- */
.lecture {
  background: var(--fond-clair);
  padding: 0 var(--marge-page);
}
.essai {
  max-width: var(--col-lecture);
  margin: 0 auto;
  font-family: var(--font-reading);
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

/* Corps : 19px / 1.75 / interlettrage compensateur, aligné à gauche. */
.essai p {
  margin: 0 0 1.5em;
  font-weight: 400;
  font-size: var(--fs-lecture);
  line-height: var(--lh-lecture);
  letter-spacing: var(--ls-lecture);
  color: var(--texte);
}
.essai > p:last-child { margin-bottom: 0; }

/* Surtitre romain, puis titre d'essai, puis sous-titre. */
.essai .essai-numero {
  margin: 8rem 0 0.75rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}
.essai-titre {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(1.875rem, 5.5vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--texte);
  text-wrap: balance;
}
.essai .essai-sous-titre {
  margin: 1rem 0 3rem;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: 0;
  font-style: italic;
  color: var(--texte-2);
}

/* Intertitres. Casse normale, longueurs très inégales, aucune puce.
   La numérotation romaine appartient au texte : aucun compteur CSS. */
.essai h3 {
  margin: 4rem 0 1.25rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.3125rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--texte);
}
.essai .essai-sous-titre + h3 { margin-top: 0; }
/* Le numéro de l'auteur, légèrement retiré pour que le titre respire. */
.essai h3 .num { color: var(--texte-2); }

/* Premier paragraphe de l'essai : une respiration d'entrée. Pas de lettrine. */
.essai h3:first-of-type + p {
  font-size: 1.3125rem;
  line-height: 1.7;
  color: var(--texte-2);
}

/* Citation en bloc. Usage rare. */
.essai blockquote {
  margin: 2.5em 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--accent);
}
.essai blockquote p { color: var(--texte-2); }

/* Titre d'ouvrage. Italique simple, sans changement de couleur ni de graisse. */
.essai em { font-style: italic; }

/* Rupture sans intertitre. */
.rupture {
  display: block;
  width: 5px;
  height: 5px;
  margin: 3.5rem auto;
  border-radius: 999px;
  background: var(--accent);
  border: 0;
}

/* Liens dans le corps : le soulignement porte l'accent, pas le texte. */
.essai a {
  color: var(--texte);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: color 150ms linear;
}
.essai a:hover { color: var(--accent); }

/* Aucun style n'est défini pour strong, ul, ol dans la zone de lecture :
   la discipline d'écriture de l'auteur les exclut, et le manuscrit n'en
   contient aucun. Ne pas en ajouter. */

/* ==========================================================================
   5. SOMMAIRE À ÉTATS — page d'opus. Source de vérité de la parution.
   -------------------------------------------------------------------------- */
.section-claire {
  background: var(--fond-clair);
  padding: var(--section) var(--marge-page) 0;
}
/* Sections claires consécutives : une seule respiration entre elles, les
   blocs internes portant déjà leur propre marge. */
.section-claire + .section-claire { padding-top: 0; }
.section-sombre { padding: 0 var(--marge-page); }
.colonne-lecture { max-width: var(--col-lecture); margin: 0 auto; }
.colonne-lecture > .recueil { margin-top: var(--section); }
.section-claire .colonne-lecture > .nav-serie:first-child { margin-top: 0; }

/* Calages de l'accueil et de l'index de collection. */
.accueil .titre-collection + .filet { margin: 2.5rem 0; }
.accueil .presentation { margin-bottom: 2.5rem; }
.entete-collection { padding: var(--section) var(--marge-page) 0; }
.entete-collection .titre-collection + .filet { margin: 2.5rem 0; }
.section-titre {
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--texte);
}
.sommaire { max-width: var(--col-lecture); margin: 2.5rem auto 0; }
.sommaire .entree { padding-top: 2.5rem; margin-top: 2.5rem; border-top: 1px solid var(--filet); }
.sommaire .entree:first-child { padding-top: 0; margin-top: 1.5rem; border-top: 0; }
.sommaire .entree a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.entree-numero {
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 0.625rem;
}
.entree-titre {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--texte);
  transition: color 150ms linear;
}
.sommaire .paru a:hover .entree-titre { color: var(--accent); }
.entree-sous-titre {
  margin-top: 0.625rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texte-2);
  text-wrap: pretty;
}
.entree-duree {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--texte-2);
}

/* ------ LE SEUL GESTE DE PARUTION ------
   Sur une entrée du sommaire, remplacer  class="entree a-paraitre"
   par                                    class="entree paru"
   Rien d'autre à toucher : ni date, ni lien, ni durée. -------------------- */
.sommaire .a-paraitre { opacity: 0.45; }
.sommaire .a-paraitre a { pointer-events: none; cursor: default; }
.sommaire .a-paraitre .entree-numero,
.sommaire .a-paraitre .entree-titre { color: var(--texte-2); }
.sommaire .paru .duree-attente { display: none; }
.sommaire .a-paraitre .duree-lecture { display: none; }

/* ==========================================================================
   6. NAVIGATION DE SÉRIE — précédent / sommaire / suivant
   -------------------------------------------------------------------------- */
.nav-serie {
  max-width: var(--col-lecture);
  margin: 5rem auto 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--filet);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem 2rem;
  align-items: start;
}
.nav-serie .zone-centre { text-align: center; }
.nav-serie .zone-droite { text-align: right; }
.nav-serie a { color: inherit; text-decoration: none; display: block; }
.nav-lien-numero {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.nav-lien-titre {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--texte);
  transition: color 150ms linear;
}
.nav-serie a:hover .nav-lien-titre { color: var(--accent); }
.nav-serie .zone-centre a {
  font-size: 0.9375rem;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  padding-top: 1.25rem;
}

/* ------ LE SECOND GESTE DE PARUTION ------
   Sur la page de l'essai précédent, dans la zone droite, remplacer
   class="zone-droite a-paraitre" par class="zone-droite paru". ----------- */
.nav-serie .a-paraitre { opacity: 0.45; }
.nav-serie .a-paraitre a { pointer-events: none; cursor: default; }
.nav-serie .a-paraitre .nav-lien-numero { color: var(--texte-2); }
.nav-serie .paru .mention-attente { display: none; }
.nav-serie .a-paraitre .fleche { display: none; }
.mention-attente {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--texte-2);
}

/* ==========================================================================
   7. RECUEIL COMPLET — livré masqué. Ne paraît qu'avec l'essai IV.
   -------------------------------------------------------------------------- */
.recueil {
  border: 1px solid var(--filet);
  background: transparent;
  padding: 2rem;
  border-radius: 2px;
}
.recueil-titre {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--texte);
}
.recueil-precision {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--texte-2);
}
.recueil-lien {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 1rem;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.recueil-lien:hover { color: var(--texte); }
.bloc-recueil { max-width: var(--col-lecture); margin: var(--section) auto 0; }

/* ==========================================================================
   8. CAPTURE EMAIL — modeste, après le corps. Retirable en supprimant .capture
   -------------------------------------------------------------------------- */
.capture {
  max-width: var(--col-lecture);
  margin: 4rem auto 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--filet);
}
.capture-titre {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texte);
}
.capture-form { margin-top: 1.5rem; }
.capture-ligne { display: flex; gap: 0.75rem; }
.capture-form input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 0.875rem;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 1rem;
  color: var(--texte);
  background: transparent;
  border: 1px solid var(--slate-300);
  border-radius: 2px;
}
.capture-form input[type="email"]::placeholder { color: var(--texte-2); opacity: 0.7; }
.capture-form button {
  height: 48px;
  padding: 0 1.5rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--fond-clair);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 150ms linear, border-color 150ms linear;
}
.capture-form button:hover { background: #1D4ED8; border-color: #1D4ED8; }
.capture-consentement {
  display: flex;
  gap: 0.625rem;
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--texte-2);
}
.capture-consentement input[type="checkbox"] {
  flex: none;
  margin: 0.2rem 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.capture-mention {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--texte-2);
}
.capture-mention a { color: var(--accent); }

/* État « envoi en cours ». */
.capture.is-sending button { opacity: 0.6; pointer-events: none; }
.capture.is-sending .libelle-envoi { display: none; }
.capture.is-sending .libelle-cours { display: inline; }
.libelle-cours { display: none; }

/* Leurre anti-robot : hors écran, hors parcours clavier, hors lecture d'écran. */
.leurre { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* État « échec » : sobre, sans rouge — la palette n'en a pas. */
.capture-erreur {
  display: none;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--texte);
  padding-left: 1rem;
  border-left: 2px solid var(--texte);
}
.capture.is-error .capture-erreur { display: block; }

/* État « confirmation » : remplace le formulaire en place, sans modale. */
.capture-ok {
  display: none;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--texte);
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
}
.capture.is-done .capture-form,
.capture.is-done .capture-titre { display: none; }
.capture.is-done .capture-ok { display: block; }

/* ==========================================================================
   9. PAGES SECONDAIRES — à propos, mentions légales, confidentialité
   -------------------------------------------------------------------------- */
.page-texte {
  background: var(--fond-clair);
  padding: var(--section) var(--marge-page);
}
.page-texte .colonne { max-width: var(--col-texte); margin: 0 auto; }
.page-titre {
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--texte);
}
.page-texte .colonne > .filet { margin: 1.75rem 0 2.5rem; }
.page-texte p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--texte);
  text-wrap: pretty;
}
.page-texte p + p { margin-top: 1.5em; }
.page-texte h2 {
  margin: 3rem 0 1rem;
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.35;
  color: var(--texte);
}
.page-texte h3 {
  margin: 2rem 0 0.75rem;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--texte);
}
.page-texte a { color: var(--accent); }
.page-texte .contacts { margin-top: 2.5rem; }
.page-texte .contacts p { font-size: 1rem; }
.page-texte .libelle {
  display: inline-block;
  min-width: 6.5rem;
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--texte-2);
}
.page-texte .maj {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet);
  font-size: 0.8125rem;
  color: var(--texte-2);
}

/* Pages légales : corps 1rem, hiérarchie minimale, austère. */
.legal p, .legal li { font-size: 1rem; line-height: 1.75; }
.legal .adresse { font-size: 1rem; line-height: 1.8; }
.legal .adresse strong { font-weight: 700; }
.legal dl { margin: 1.5em 0 0; }

/* ==========================================================================
   10. PIED DE PAGE — minimal
   -------------------------------------------------------------------------- */
.pied {
  padding: var(--section) var(--marge-page) clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.8125rem;
}
.pied .contenu {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--filet);
}
.pied nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.pied, .pied a { color: var(--texte-2); }
.pied a { text-decoration: none; transition: color 150ms linear; }
.pied a:hover { color: var(--accent); text-decoration: underline; }
.sombre .pied .contenu, .pied.sur-sombre .contenu { border-top-color: var(--filet-sombre); }
.sombre .pied, .sombre .pied a,
.pied.sur-sombre, .pied.sur-sombre a { color: var(--texte-sombre-2); }
.sombre .pied a:hover, .pied.sur-sombre a:hover { color: var(--accent-sombre); }

/* ==========================================================================
   11. ÉLÉMENTS FIXES — deux, pas davantage. Pages d'essai uniquement.
   -------------------------------------------------------------------------- */
.progression {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  z-index: 60;
}
.bandeau {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 44px;
  background: rgba(248, 250, 252, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--filet);
  z-index: 50;
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 150ms linear, transform 150ms linear;
}
.bandeau.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.bandeau .contenu {
  height: 100%;
  padding: 0 var(--marge-page);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.bandeau-titre {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--texte);
}
.bandeau-titre .numero { color: var(--texte-2); }
.bandeau a {
  flex: none;
  font-size: 0.8125rem;
  color: var(--accent);
  text-decoration: none;
}
.bandeau a:hover { text-decoration: underline; }

/* ==========================================================================
   12. ACCESSIBILITÉ
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sombre :focus-visible, .couverture :focus-visible, .bandeau :focus-visible {
  outline-color: var(--accent-sombre);
}
::selection { background: rgba(37, 99, 235, 0.16); }
.saut-lecture {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: var(--fond-clair);
  font-size: 0.875rem;
  font-weight: 700;
  z-index: 70;
}
.saut-lecture:focus { left: 0; }
.visuellement-masque {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   13. MOBILE — point de rupture unique, 768px. Mobile d'abord sur la lecture.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root { --fs-lecture: 1.0625rem; }        /* 17px */
  .essai .essai-numero { margin-top: 4rem; }
  .essai .essai-sous-titre { margin-bottom: 2.5rem; }
  .essai h3 { margin-top: 3rem; }
  .nav-serie { grid-template-columns: 1fr; gap: 2rem; }
  .nav-serie .zone-centre, .nav-serie .zone-droite { text-align: left; }
  .nav-serie .zone-centre a { padding-top: 0; }
  .capture-ligne { flex-direction: column; }
  .capture-form button { width: 100%; }
  .couverture-opus { min-height: 0; }
  .couverture-essai { min-height: 0; }
  .accueil-corps { align-items: flex-start; }
}

/* ==========================================================================
   14. IMPRESSION — le texte sur blanc, l'interface retirée.
   Un en-tête courant se répète en tête de page. La numérotation de folio
   n'est pas atteignable en impression navigateur : elle demanderait un
   générateur PDF. Le recueil complet en assumera la pagination.
   -------------------------------------------------------------------------- */
@page { margin: 22mm 20mm 20mm; }

@media print {
  html, body { background: #FFFFFF; color: #000000; }
  .progression, .bandeau, .capture, .nav-serie, .pied, .entete,
  .couverture, .saut-lecture, .langues, .bloc-recueil { display: none !important; }
  .entete-impression { display: block !important; }

  .lecture { padding: 0; }
  .essai { max-width: none; }
  .essai p, .essai li {
    font-size: 11.5pt;
    line-height: 1.55;
    color: #000000;
    orphans: 3;
    widows: 3;
  }
  .essai .essai-numero { margin-top: 0; color: #000000; letter-spacing: 0.15em; }
  .essai-titre { font-size: 22pt; color: #000000; }
  .essai .essai-sous-titre { color: #000000; margin-bottom: 2rem; }
  .essai h3 {
    font-size: 13pt;
    color: #000000;
    margin-top: 2.5rem;
    break-after: avoid-page;
    page-break-after: avoid;
  }
  .essai h3 .num { color: #000000; }
  .essai h3:first-of-type + p { font-size: 11.5pt; color: #000000; }
  .essai blockquote { break-inside: avoid; page-break-inside: avoid; border-left-color: #000000; }
  .essai a { color: #000000; text-decoration-color: #000000; }
  .essai a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    letter-spacing: 0;
    color: #3D3D3A;
  }
  .rupture { background: #000000; }
}

/* En-tête courant, à l'impression seulement. */
.entete-impression {
  display: none;
  margin-bottom: 10mm;
  padding-bottom: 4mm;
  border-bottom: 1px solid var(--filet);
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--texte-2);
}