@charset "utf-8";
/* ==========================================================================
   Passeport vers la Citation - feuille de style globale
   --------------------------------------------------------------------------
   Univers : le passeport et le voyage. Bleu nuit, dorure, papier, tampons.
   Un seul fichier, aucune dependance externe, aucune police via CDN.

   Sommaire
   01. Polices auto-hebergees
   02. Jetons de design (couleurs, echelles, rythme)
   03. Reinitialisation et bases
   04. Typographie editoriale
   05. Mise en page (contenants, grilles, sections)
   06. En-tete et navigation
   07. Fil d'Ariane
   08. Heros
   09. Composants editoriaux (reponse directe, encadres, citations, chiffres)
   10. Cartes, jalons, tampons
   11. Tableaux
   12. Figures, illustrations, facades video
   13. Boutons et liens d'action
   14. Composants interactifs (recherche, copier, checklist, sommaire)
   15. Pied de page
   16. Animations et accessibilite du mouvement
   17. Impression
   ========================================================================== */


/* 01. Polices auto-hebergees ============================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/ebgaramond-var-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/ebgaramond-var-latin-italic.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 02. Jetons de design ==================================================== */

:root {
  /* Encres : le bleu nuit de la couverture du passeport */
  --encre: #0d1430;
  --encre-2: #16203f;
  --encre-3: #23305a;
  --prune: #3a1a2f;          /* rappel de la couverture du livre */

  /* Dorure : le fil d'or des pages de passeport */
  --or: #b8912f;
  --or-vif: #d4a93c;
  --or-clair: #e8cf87;
  --or-voile: rgba(184, 145, 47, 0.14);

  /* Tampon visa */
  --visa: #1c6b45;
  --visa-clair: #2f9a66;
  --alerte: #9d3226;

  /* Papiers */
  --papier: #fbf8f2;
  --papier-2: #f3eee3;
  --papier-3: #e8e0cf;

  /* Textes */
  --texte: #171c28;
  --texte-doux: #4d5566;
  --texte-clair: #6e7688;
  --texte-inverse: #f3efe6;
  --texte-inverse-doux: #b7bdd0;

  /* Traits */
  --trait: #ddd4c1;
  --trait-fort: #c8bda3;
  --trait-nuit: rgba(232, 207, 135, 0.22);

  /* Familles */
  --titre: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --corps: "EB Garamond", Georgia, "Times New Roman", serif;
  --ui: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Consolas", monospace;

  /* Rythme vertical et horizontal */
  --pas: 8px;
  --gouttiere: clamp(20px, 5vw, 48px);
  --large: 1220px;
  --etroit: 760px;
  --mesure: 68ch;

  /* Elevations sobres, jamais de flou violet */
  --ombre-1: 0 1px 2px rgba(13, 20, 48, 0.06), 0 2px 8px rgba(13, 20, 48, 0.05);
  --ombre-2: 0 2px 4px rgba(13, 20, 48, 0.07), 0 12px 32px rgba(13, 20, 48, 0.09);

  /* Rayons volontairement discrets : on est dans un document, pas une app */
  --rayon: 3px;
  --rayon-2: 6px;

  --transition: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* 03. Reinitialisation et bases =========================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--texte);
  font-family: var(--corps);
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
  line-height: 1.72;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Texture de papier tres discrete : deux degrades, aucune image */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(184, 145, 47, 0.07), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(58, 26, 47, 0.05), transparent 60%);
}

img,
svg,
video { max-width: 100%; height: auto; display: block; }

/* Fond de reserve pendant le chargement, uniquement pour les images opaques
   posees dans un cadre. Les visuels detoures restent transparents. */
.illustration img,
.cadre-passeport img,
.portrait img,
.video__facade img { background: var(--papier-2); }

a { color: inherit; }

ul, ol { padding-left: 1.35em; }

li { margin-block: 0.35em; }

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--trait-fort), transparent);
  margin: calc(var(--pas) * 6) 0;
}

::selection { background: var(--or-clair); color: var(--encre); }

:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Lien d'evitement clavier */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--encre);
  color: var(--texte-inverse);
  padding: 12px 20px;
  font-family: var(--ui);
  font-size: 0.9rem;
}
.saut-contenu:focus { left: 12px; top: 12px; }

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* 04. Typographie editoriale ============================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: var(--encre);
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.65rem);
  font-weight: 700;
  letter-spacing: -0.028em;
}

h2 {
  font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem);
  margin-top: 2.2em;
}

h3 {
  font-size: clamp(1.2rem, 1.08rem + 0.6vw, 1.45rem);
  margin-top: 1.9em;
  letter-spacing: -0.01em;
}

h4 {
  font-size: 1.08rem;
  margin-top: 1.7em;
  font-weight: 600;
}

/* Filet dore sous les h2 des pages de contenu */
.contenu h2 {
  padding-bottom: 0.34em;
  border-bottom: 1px solid var(--trait);
  position: relative;
}
.contenu h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 62px;
  height: 2px;
  background: var(--or);
}

p { margin: 0 0 1.15em; }

.contenu > p,
.contenu > ul,
.contenu > ol,
.contenu > .encadre,
.contenu > .citation,
.contenu > h2,
.contenu > h3,
.contenu > h4 { max-width: var(--mesure); }

strong, b { font-weight: 600; color: var(--encre); }

em, i { font-style: italic; }

abbr[title] { text-decoration: underline dotted; cursor: help; }

code, kbd, samp {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--papier-2);
  border: 1px solid var(--trait);
  border-radius: 2px;
  padding: 0.1em 0.36em;
}

/* Surtitre en petites capitales espacees, signature graphique du site */
.surtitre {
  font-family: var(--ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 0.9em;
  display: flex;
  align-items: center;
  gap: 12px;
}
.surtitre::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--or-voile), transparent);
  max-width: 180px;
}
.surtitre--centre { justify-content: center; }
.surtitre--centre::after { display: none; }
.surtitre--nuit { color: var(--or-clair); }

/* Chapeau de page */
.chapeau {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  line-height: 1.6;
  color: var(--texte-doux);
  max-width: 62ch;
}

/* Liens dans le corps du texte : soulignement dore qui se remplit */
.contenu a:not(.bouton):not(.carte):not(.lien-nu),
.prose a:not(.bouton) {
  color: var(--encre);
  text-decoration: none;
  background-image: linear-gradient(var(--or), var(--or));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 1px;
  transition: background-size var(--transition), color var(--transition);
}
.contenu a:not(.bouton):not(.carte):not(.lien-nu):hover,
.prose a:not(.bouton):hover {
  background-size: 100% 100%;
  color: var(--encre);
  background-image: linear-gradient(var(--or-clair), var(--or-clair));
}

.lien-nu { text-decoration: none; }

/* Lien sortant discret vers une source */
.source {
  font-family: var(--ui);
  font-size: 0.8rem;
  color: var(--texte-clair);
  line-height: 1.5;
}
.source a { color: var(--texte-doux); }


/* 05. Mise en page ======================================================== */

.contenant {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.contenant--etroit { max-width: var(--etroit); }
.contenant--moyen { max-width: 960px; }

.section {
  padding-block: clamp(48px, 7vw, 96px);
  position: relative;
}

.section--serree { padding-block: clamp(32px, 4.5vw, 60px); }

.section--papier { background: var(--papier-2); }

.section--nuit {
  background: var(--encre);
  color: var(--texte-inverse);
}
.section--nuit h1,
.section--nuit h2,
.section--nuit h3,
.section--nuit h4 { color: var(--papier); }
.section--nuit .chapeau { color: var(--texte-inverse-doux); }
.section--nuit a { color: var(--or-clair); }

/* Trait dore de separation entre sections */
.section + .section:not(.section--papier):not(.section--nuit) { border-top: 1px solid var(--trait); }

.grille {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
}
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Deux colonnes asymetriques : texte + illustration */
.duo {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  .duo { grid-template-columns: 1.05fr 0.95fr; }
  .duo--inverse > :first-child { order: 2; }
  .duo--texte-large { grid-template-columns: 1.35fr 0.85fr; }
}

/* Page de contenu : article + colonne laterale */
.gabarit-article {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 1060px) {
  .gabarit-article { grid-template-columns: minmax(0, 1fr) 268px; }
}

.pile > * + * { margin-top: var(--espace, 20px); }


/* 06. En-tete et navigation =============================================== */

.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 248, 242, 0.9);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--trait);
  transition: box-shadow var(--transition), background var(--transition);
}
.entete[data-defile="oui"] { box-shadow: var(--ombre-1); }

.entete__interieur {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 68px;
}

/* Marque : un tampon dore et le nom de la methode */
.marque {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
}
.marque__sceau {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  border: 1.5px solid var(--or);
  display: grid;
  place-items: center;
  color: var(--or);
  font-family: var(--titre);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  background: var(--or-voile);
  transition: transform var(--transition);
}
.marque:hover .marque__sceau { transform: rotate(-8deg); }
.marque__nom {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.015em;
  color: var(--encre);
  line-height: 1.15;
}
.marque__nom small {
  display: block;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
}

.nav { margin-left: auto; }

.nav__liste {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vw, 14px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__lien {
  display: inline-block;
  font-family: var(--ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texte-doux);
  text-decoration: none;
  padding: 9px 11px;
  border-radius: var(--rayon);
  position: relative;
  transition: color var(--transition);
}
.nav__lien::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 4px;
  height: 1.5px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav__lien:hover { color: var(--encre); }
.nav__lien:hover::after { transform: scaleX(1); }
.nav__lien[aria-current="page"] { color: var(--encre); font-weight: 600; }
.nav__lien[aria-current="page"]::after { transform: scaleX(1); }

.nav__lien--action {
  background: var(--encre);
  color: var(--papier);
  padding: 9px 17px;
  margin-left: 6px;
}
.nav__lien--action::after { display: none; }
.nav__lien--action:hover { background: var(--encre-3); color: #fff; }

/* Bouton burger accessible */
.burger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--trait-fort);
  background: transparent;
  border-radius: var(--rayon);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.burger__trait {
  display: block;
  width: 19px;
  height: 1.5px;
  background: var(--encre);
  position: relative;
  transition: background 120ms;
}
.burger__trait::before,
.burger__trait::after {
  content: "";
  position: absolute;
  left: 0;
  width: 19px;
  height: 1.5px;
  background: var(--encre);
  transition: transform var(--transition);
}
.burger__trait::before { top: -6px; }
.burger__trait::after { top: 6px; }
.burger[aria-expanded="true"] .burger__trait { background: transparent; }
.burger[aria-expanded="true"] .burger__trait::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__trait::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1023px) {
  .burger { display: grid; }
  .nav {
    position: fixed;
    inset: 68px 0 auto;
    background: var(--papier);
    border-bottom: 1px solid var(--trait);
    box-shadow: var(--ombre-2);
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    display: none;
    margin: 0;
  }
  .nav[data-ouvert="oui"] { display: block; }
  .nav__liste {
    flex-direction: column;
    align-items: stretch;
    padding: 12px var(--gouttiere) 26px;
    gap: 0;
  }
  .nav__lien {
    padding: 14px 4px;
    font-size: 1rem;
    border-bottom: 1px solid var(--trait);
  }
  .nav__lien::after { display: none; }
  .nav__lien--action {
    margin: 16px 0 0;
    text-align: center;
    border-bottom: 0;
  }
}


/* 07. Fil d'Ariane ======================================================== */

.fil {
  font-family: var(--ui);
  font-size: 0.78rem;
  color: var(--texte-clair);
  padding-block: 16px 0;
}
.fil ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fil li { margin: 0; display: flex; align-items: center; gap: 7px; }
.fil li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-top: 1px solid var(--trait-fort);
  border-right: 1px solid var(--trait-fort);
  transform: rotate(45deg);
  flex: none;
}
.fil a { color: var(--texte-doux); text-decoration: none; }
.fil a:hover { color: var(--or); }
.fil [aria-current="page"] { color: var(--texte); }


/* 08. Heros =============================================================== */

.hero {
  position: relative;
  padding-block: clamp(48px, 7vw, 96px) clamp(44px, 6vw, 84px);
  overflow: hidden;
}

/* Hero de l'accueil : nuit, reseau de citations en fond */
.hero--nuit {
  background: linear-gradient(168deg, var(--encre) 0%, #101a3c 46%, var(--prune) 130%);
  color: var(--texte-inverse);
  padding-block: clamp(56px, 8vw, 116px) clamp(52px, 7vw, 104px);
}
.hero--nuit h1 { color: #fff; }
.hero--nuit .chapeau { color: var(--texte-inverse-doux); }

.hero__fond {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
}
.hero__fond svg { width: 100%; height: 100%; }

.hero__interieur { position: relative; z-index: 1; }

.hero__grille {
  display: grid;
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
@media (min-width: 940px) {
  .hero__grille { grid-template-columns: 1.12fr 0.88fr; }
  .hero__visuel { padding-left: clamp(8px, 2vw, 40px); }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* Hero de page interieure */
.hero--page {
  background:
    linear-gradient(180deg, var(--papier-2) 0%, var(--papier) 100%);
  border-bottom: 1px solid var(--trait);
  padding-block: clamp(28px, 3.5vw, 44px) clamp(40px, 5vw, 68px);
}

.hero--phase {
  background: linear-gradient(150deg, var(--encre) 0%, var(--encre-2) 62%, #23204a 100%);
  color: var(--texte-inverse);
  padding-block: clamp(30px, 3.5vw, 46px) clamp(44px, 6vw, 76px);
}
.hero--phase h1 { color: #fff; }
.hero--phase .chapeau { color: var(--texte-inverse-doux); }
.hero--phase .fil { color: var(--texte-inverse-doux); }
.hero--phase .fil a { color: var(--or-clair); }
.hero--phase .fil [aria-current="page"] { color: #fff; }
.hero--phase .fil li + li::before { border-color: var(--or); }

/* Numero de phase en gros chiffre filigrane */
.hero__numero {
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(6rem, 18vw, 15rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--trait-nuit);
  position: absolute;
  right: -0.06em;
  bottom: -0.16em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}


/* 09. Composants editoriaux =============================================== */

/* Reponse directe : le premier paragraphe autonome, concu pour la citation */
.reponse-directe {
  font-size: clamp(1.16rem, 1.05rem + 0.55vw, 1.4rem);
  line-height: 1.6;
  color: var(--texte);
  border-left: 3px solid var(--or);
  padding: 4px 0 4px 22px;
  margin: 0 0 1.9em;
  max-width: 64ch;
}
.reponse-directe strong { color: var(--encre); font-weight: 600; }

/* Definition canonique : le bloc le plus important du site */
.canonique {
  position: relative;
  background: var(--encre);
  color: var(--texte-inverse);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px);
  border-radius: var(--rayon-2);
  border: 1px solid var(--encre-3);
  box-shadow: inset 0 0 0 1px rgba(232, 207, 135, 0.14);
  overflow: hidden;
}
.canonique::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(232, 207, 135, 0.24);
  border-radius: var(--rayon);
  pointer-events: none;
}
.canonique__libelle {
  font-family: var(--ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or-clair);
  margin: 0 0 14px;
}
.canonique__texte {
  font-family: var(--corps);
  font-size: clamp(1.08rem, 1rem + 0.55vw, 1.32rem);
  line-height: 1.62;
  color: #fff;
  margin: 0;
  quotes: "\00AB\00A0" "\00A0\00BB";
}
.canonique--clair {
  background: var(--papier-2);
  color: var(--texte);
  border-color: var(--trait-fort);
  box-shadow: inset 0 0 0 1px rgba(184, 145, 47, 0.18);
}
.canonique--clair::before { border-color: rgba(184, 145, 47, 0.3); }
.canonique--clair .canonique__libelle { color: var(--or); }
.canonique--clair .canonique__texte { color: var(--encre); }

/* Encadre "A retenir" : bloc citable de fin de page */
.encadre {
  background: var(--papier-2);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--or);
  border-radius: var(--rayon);
  padding: clamp(22px, 3vw, 32px);
  margin: 2.6em 0 1.4em;
}
.encadre__titre {
  font-family: var(--ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.encadre__titre::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  border: 1.5px solid var(--or);
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 44%, var(--or) 44%, var(--or) 56%, transparent 56%);
}
.encadre p:last-child { margin-bottom: 0; }
.encadre ul { margin: 0; padding-left: 1.1em; }
.encadre ul li::marker { color: var(--or); }

.encadre--note {
  border-left-color: var(--encre-3);
  background: #fff;
}
.encadre--note .encadre__titre { color: var(--encre-3); }
.encadre--note .encadre__titre::before { border-color: var(--encre-3); background: none; }

.encadre--alerte {
  border-left-color: var(--alerte);
  background: #fdf6f4;
}
.encadre--alerte .encadre__titre { color: var(--alerte); }
.encadre--alerte .encadre__titre::before { border-color: var(--alerte); background: none; }

/* Citation en exergue */
.citation {
  margin: 2.4em 0;
  padding: 0 0 0 clamp(20px, 3vw, 34px);
  border-left: 2px solid var(--or);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--encre);
  max-width: 58ch;
}
.citation footer {
  margin-top: 12px;
  font-family: var(--ui);
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--texte-clair);
}

/* Chiffre source : le format que les IA extraient le mieux */
.chiffre {
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-2);
  padding: clamp(20px, 2.6vw, 28px);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.chiffre::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--or), var(--or-clair) 60%, transparent);
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.chiffre:hover { transform: translateY(-2px); box-shadow: var(--ombre-2); border-color: var(--trait-fort); }
.chiffre:hover::before { transform: scaleX(1); }
.chiffre__valeur {
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--encre);
  display: block;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.chiffre__valeur span { font-size: 0.52em; color: var(--or); letter-spacing: 0; }
.chiffre__libelle {
  font-family: var(--corps);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--texte-doux);
  margin: 0 0 12px;
}
.chiffre__source {
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--texte-clair);
  margin: 0;
  padding-top: 10px;
  border-top: 1px dotted var(--trait-fort);
}
.chiffre__source a { color: var(--texte-doux); }

.section--nuit .chiffre {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(232, 207, 135, 0.2);
}
.section--nuit .chiffre__valeur { color: var(--or-clair); }
.section--nuit .chiffre__libelle { color: var(--texte-inverse-doux); }
.section--nuit .chiffre__source { color: #8f97b0; border-top-color: rgba(232, 207, 135, 0.2); }


/* 10. Cartes, jalons, tampons ============================================= */

.carte {
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-2);
  padding: clamp(22px, 2.8vw, 30px);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  overflow: hidden;
  height: 100%;
}
a.carte:hover,
a.carte:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--ombre-2);
  border-color: var(--or);
}
.carte__titre {
  font-family: var(--titre);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.28;
  margin: 0 0 10px;
  color: var(--encre);
}
.carte__texte {
  font-size: 0.99rem;
  line-height: 1.6;
  color: var(--texte-doux);
  margin: 0;
}
.carte__meta {
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 12px;
  font-weight: 600;
}
.carte__fleche {
  font-family: var(--ui);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--or);
  /* auto pousse la fleche en pied de carte : les cartes d'une meme grille
     alignent leur appel a l'action quelle que soit la longueur du texte */
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.carte__fleche::after {
  content: "";
  width: 15px;
  height: 1.5px;
  background: currentColor;
  transition: width var(--transition);
}
a.carte:hover .carte__fleche::after { width: 26px; }

/* Carte de phase : grand numero en filigrane, bord dore */
.carte-phase {
  position: relative;
  padding-top: clamp(26px, 3vw, 34px);
}
.carte-phase__numero {
  position: absolute;
  top: 8px;
  right: 14px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 4.4rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--trait-fort);
  pointer-events: none;
  transition: -webkit-text-stroke-color var(--transition);
}
a.carte-phase:hover .carte-phase__numero { -webkit-text-stroke-color: var(--or-clair); }

/* Vignette de glossaire, plus compacte */
.carte--terme { padding: 18px 20px; }
.carte--terme .carte__titre { font-size: 1rem; margin-bottom: 6px; }
.carte--terme .carte__texte { font-size: 0.93rem; }

/* Carte sur fond nuit */
.section--nuit .carte {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(232, 207, 135, 0.2);
}
.section--nuit .carte__titre { color: #fff; }
.section--nuit .carte__texte { color: var(--texte-inverse-doux); }
.section--nuit a.carte:hover { border-color: var(--or-clair); background: rgba(255, 255, 255, 0.07); }

/* Tampon de passeport : element graphique recurrent */
.tampon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 128px;
  height: 128px;
  border: 2px solid var(--visa);
  border-radius: 50%;
  color: var(--visa);
  font-family: var(--ui);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.6rem;
  font-weight: 700;
  text-align: center;
  padding: 12px;
  transform: rotate(-9deg);
  position: relative;
  opacity: 0.92;
}
.tampon::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.55;
}
.tampon strong {
  display: block;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: inherit;
}
.tampon--or { border-color: var(--or); color: var(--or); }

/* Jalons : parcours sequentiel des 4 phases */
.jalons {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.jalons::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, var(--or), var(--trait) 85%);
}
.jalon {
  position: relative;
  padding-left: 52px;
  margin: 0 0 clamp(24px, 3vw, 34px);
}
.jalon:last-child { margin-bottom: 0; }
.jalon__puce {
  position: absolute;
  left: 0;
  top: 1px;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  border: 1.5px solid var(--or);
  background: var(--papier);
  color: var(--or);
  display: grid;
  place-items: center;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 0.86rem;
}
.jalon__titre {
  font-family: var(--titre);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 2px 0 8px;
  color: var(--encre);
}
.jalon p { margin: 0; color: var(--texte-doux); font-size: 1rem; }

/* Intertitre de partie dans une liste de jalons (sommaire du livre).
   Il s'aligne sur les titres de chapitre plutot que de passer sous le trait
   vertical, et un point dore marque la rupture sur la ligne. */
.jalon--partie {
  padding-left: 52px;
  margin: clamp(30px, 4vw, 44px) 0 clamp(16px, 2vw, 22px);
}
.jalons > .jalon--partie:first-child { margin-top: 0; }
.jalon--partie::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0.34em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 0 0 5px var(--papier);
}
.jalon--partie p {
  font-family: var(--ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0;
}

/* Liste de controle typographique (pas interactive) */
.liste-cochee { list-style: none; padding: 0; margin: 1.2em 0; }
.liste-cochee li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 0.7em;
}
.liste-cochee li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 11px;
  height: 6px;
  border-left: 1.8px solid var(--visa);
  border-bottom: 1.8px solid var(--visa);
  transform: rotate(-45deg);
}

/* Liste numerotee editoriale */
.liste-numerotee { list-style: none; padding: 0; counter-reset: pas; }
.liste-numerotee > li {
  counter-increment: pas;
  position: relative;
  padding-left: 44px;
  margin-bottom: 1.1em;
}
.liste-numerotee > li::before {
  content: counter(pas, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.06em;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--or);
  letter-spacing: 0.04em;
}


/* 11. Tableaux ============================================================ */

.tableau-defile {
  overflow-x: auto;
  margin: 1.9em 0;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-2);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ui);
  font-size: 0.92rem;
}

/* Largeur minimale progressive selon le nombre de colonnes : en dessous,
   le tableau defile dans son conteneur plutot que de comprimer son contenu. */
[data-colonnes="3"] table { min-width: 420px; }
[data-colonnes="4"] table { min-width: 540px; }
[data-colonnes="5"] table { min-width: 640px; }
[data-colonnes="6"] table { min-width: 720px; }
[data-colonnes="7"] table { min-width: 820px; }

caption {
  caption-side: top;
  text-align: left;
  font-family: var(--ui);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or);
  font-weight: 600;
  padding: 16px 18px 10px;
}

thead th {
  background: var(--encre);
  color: var(--papier);
  font-weight: 600;
  text-align: left;
  padding: 13px 16px;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--or);
  vertical-align: bottom;
}

tbody td,
tbody th {
  padding: 13px 16px;
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
  line-height: 1.5;
  text-align: left;
}

tbody th { font-weight: 600; color: var(--encre); }

tbody tr:last-child td,
tbody tr:last-child th { border-bottom: 0; }

tbody tr:nth-child(even) { background: var(--papier); }

tbody tr:hover { background: var(--or-voile); }

td.num { font-variant-numeric: tabular-nums; }


/* 12. Figures, illustrations, facades video =============================== */

figure { margin: 2.2em 0; }

figcaption {
  font-family: var(--ui);
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--texte-clair);
  margin-top: 12px;
  padding-left: 13px;
  border-left: 2px solid var(--or-voile);
}

.illustration {
  border-radius: var(--rayon-2);
  overflow: hidden;
  border: 1px solid var(--trait);
  background: var(--papier-2);
  position: relative;
}
.illustration img { width: 100%; display: block; }

/* Cadre facon page de passeport : bord pointille + coin dore */
.cadre-passeport {
  position: relative;
  padding: 14px;
  background:
    linear-gradient(var(--papier-2), var(--papier-2)) padding-box;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-2);
}
.cadre-passeport::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed var(--trait-fort);
  border-radius: var(--rayon);
  pointer-events: none;
  z-index: 1;
}
.cadre-passeport > img,
.cadre-passeport > svg { border-radius: 2px; position: relative; }

/* Facade video : miniature cliquable, iframe injectee au clic */
.video {
  margin: 2.4em 0;
}
.video__facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  border-radius: var(--rayon-2);
  overflow: hidden;
  cursor: pointer;
  background: var(--encre);
  isolation: isolate;
}
.video__facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1), filter var(--transition);
  filter: saturate(0.92) contrast(1.02);
}
.video__facade:hover img { transform: scale(1.035); filter: saturate(1) contrast(1.04); }
.video__facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 20, 48, 0.12), rgba(13, 20, 48, 0.66));
}
.video__lecture {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1.5px solid var(--or-clair);
  background: rgba(13, 20, 48, 0.6);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  transition: transform var(--transition), background var(--transition);
}
.video__lecture::before {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 17px solid var(--or-clair);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.video__facade:hover .video__lecture { transform: translate(-50%, -50%) scale(1.08); background: rgba(13, 20, 48, 0.78); }
.video__titre {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: 18px 20px;
  font-family: var(--ui);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  text-align: left;
}
.video__titre span {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or-clair);
  margin-bottom: 6px;
  font-weight: 600;
}
.video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--rayon-2);
  display: block;
}

/* Couverture du livre, legerement inclinee */
.couverture {
  max-width: 340px;
  filter: drop-shadow(0 18px 34px rgba(13, 20, 48, 0.24));
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.couverture:hover { transform: translateY(-6px) rotate(-1.2deg); }

/* Visuel de hero : image detouree, aucune boite, une ombre chaude */
.hero__visuel img {
  filter: drop-shadow(0 22px 46px rgba(0, 0, 0, 0.45));
  animation: flotter 9s ease-in-out infinite;
}
@keyframes flotter {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Portrait de l'auteur */
.portrait {
  border-radius: var(--rayon-2);
  overflow: hidden;
  position: relative;
  background: linear-gradient(160deg, var(--encre), var(--prune));
}
.portrait img { width: 100%; display: block; }


/* 13. Boutons et liens d'action =========================================== */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--ui);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.012em;
  line-height: 1;
  padding: 15px 26px;
  border-radius: var(--rayon);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition),
              color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.bouton:active { transform: translateY(1px); }

.bouton--or {
  background: var(--or);
  color: var(--encre);
  border-color: var(--or);
}
.bouton--or:hover { background: var(--or-vif); border-color: var(--or-vif); box-shadow: 0 6px 20px rgba(184, 145, 47, 0.32); }

.bouton--nuit {
  background: var(--encre);
  color: var(--papier);
  border-color: var(--encre);
}
.bouton--nuit:hover { background: var(--encre-3); border-color: var(--encre-3); }

.bouton--fantome {
  background: transparent;
  color: var(--encre);
  border-color: var(--trait-fort);
}
.bouton--fantome:hover { border-color: var(--or); color: var(--or); }

/* Contextes sombres : le bouton fantome doit inverser sa couleur de texte,
   faute de quoi il s'ecrit en bleu nuit sur un fond bleu nuit. Le bandeau
   d'appel a l'action (.appel) fait partie de ces contextes. */
.hero--nuit .bouton--fantome,
.hero--phase .bouton--fantome,
.section--nuit .bouton--fantome,
.appel .bouton--fantome {
  color: var(--papier);
  border-color: rgba(232, 207, 135, 0.45);
}
.hero--nuit .bouton--fantome:hover,
.hero--phase .bouton--fantome:hover,
.section--nuit .bouton--fantome:hover,
.appel .bouton--fantome:hover { color: var(--or-clair); border-color: var(--or-clair); }

.bouton--petit { padding: 10px 17px; font-size: 0.8rem; }

/* Lien de navigation sequentielle entre les phases */
.suite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 3em;
  padding: clamp(22px, 3vw, 30px);
  background: var(--papier-2);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-2);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), background var(--transition);
}
a.suite:hover { border-color: var(--or); background: #fff; }
.suite__libelle {
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--or);
  font-weight: 600;
  display: block;
  margin-bottom: 7px;
}
.suite__titre {
  font-family: var(--titre);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.28rem);
  font-weight: 600;
  color: var(--encre);
  margin: 0;
}

/* Bandeau d'appel a l'action */
.appel {
  background: linear-gradient(150deg, var(--encre) 0%, #171f45 55%, var(--prune) 140%);
  color: var(--texte-inverse);
  border-radius: var(--rayon-2);
  padding: clamp(32px, 5vw, 60px);
  position: relative;
  overflow: hidden;
}
.appel::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(232, 207, 135, 0.2);
  border-radius: var(--rayon);
  pointer-events: none;
}
.appel h2 { color: #fff; margin-top: 0; }
.appel p { color: var(--texte-inverse-doux); max-width: 56ch; }
.appel .hero__actions { margin-top: 26px; }


/* 14. Composants interactifs ============================================== */

/* Recherche instantanee (glossaire, questions) */
.recherche { margin: 0 0 clamp(28px, 4vw, 42px); }
.recherche__champ {
  position: relative;
  display: flex;
  align-items: center;
}
.recherche__champ::before {
  content: "";
  position: absolute;
  left: 18px;
  width: 13px;
  height: 13px;
  border: 1.6px solid var(--texte-clair);
  border-radius: 50%;
  pointer-events: none;
}
.recherche__champ::after {
  content: "";
  position: absolute;
  left: 28px;
  top: 50%;
  margin-top: 3px;
  width: 7px;
  height: 1.6px;
  background: var(--texte-clair);
  transform: rotate(45deg);
  pointer-events: none;
}
.recherche input[type="search"] {
  width: 100%;
  font-family: var(--ui);
  font-size: 1rem;
  color: var(--texte);
  padding: 15px 18px 15px 44px;
  background: #fff;
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
}
.recherche input[type="search"]:focus {
  outline: none;
  border-color: var(--or);
  box-shadow: 0 0 0 3px var(--or-voile);
}
.recherche__etat {
  font-family: var(--ui);
  font-size: 0.8rem;
  color: var(--texte-clair);
  margin: 12px 0 0;
  min-height: 1.3em;
}
[data-filtrable][hidden] { display: none !important; }

/* Bloc de code avec bouton copier */
.bloc-code {
  position: relative;
  margin: 1.8em 0;
  background: var(--encre);
  border-radius: var(--rayon-2);
  border: 1px solid var(--encre-3);
  overflow: hidden;
}
.bloc-code__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px 11px 18px;
  border-bottom: 1px solid rgba(232, 207, 135, 0.16);
  background: rgba(255, 255, 255, 0.03);
}
.bloc-code__nom {
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or-clair);
  font-weight: 600;
}
.bloc-code pre {
  margin: 0;
  padding: 18px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.795rem;
  line-height: 1.62;
  color: #dfe4f2;
  tab-size: 2;
}
.bloc-code pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
}
.btn-copier {
  font-family: var(--ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--or-clair);
  background: transparent;
  border: 1px solid rgba(232, 207, 135, 0.34);
  border-radius: var(--rayon);
  padding: 7px 13px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  flex: none;
}
.btn-copier:hover { background: var(--or); color: var(--encre); border-color: var(--or); }
.btn-copier[data-etat="copie"] { background: var(--visa-clair); border-color: var(--visa-clair); color: #fff; }

/* Checklist interactive : etat en memoire de session uniquement */
.checklist {
  list-style: none;
  margin: 1.8em 0;
  padding: 0;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-2);
  background: #fff;
  overflow: hidden;
}
.checklist li {
  margin: 0;
  border-bottom: 1px solid var(--trait);
}
.checklist li:last-child { border-bottom: 0; }
.checklist label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  font-family: var(--ui);
  font-size: 0.94rem;
  line-height: 1.5;
  transition: background var(--transition);
}
.checklist label:hover { background: var(--papier); }
.checklist input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  border: 1.5px solid var(--trait-fort);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  position: relative;
  flex: none;
  transition: background var(--transition), border-color var(--transition);
}
.checklist input[type="checkbox"]:checked { background: var(--visa); border-color: var(--visa); }
.checklist input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(42deg);
}
.checklist input:checked ~ .checklist__texte { color: var(--texte-clair); text-decoration: line-through; }
.checklist__priorite {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  white-space: nowrap;
  align-self: center;
}
.checklist__priorite[data-niveau="haute"] { background: #fbeceA; color: var(--alerte); }
.checklist__priorite[data-niveau="moyenne"] { background: var(--or-voile); color: #8a6c1f; }
.checklist__priorite[data-niveau="basse"] { background: var(--papier-3); color: var(--texte-doux); }
.checklist__score {
  font-family: var(--ui);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--encre);
  padding: 14px 18px;
  background: var(--papier-2);
  border-top: 1px solid var(--trait);
  display: flex;
  align-items: center;
  gap: 14px;
}
.checklist__jauge {
  flex: 1;
  height: 5px;
  background: var(--papier-3);
  border-radius: 3px;
  overflow: hidden;
}
.checklist__jauge span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--or), var(--visa-clair));
  transition: width 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Sommaire flottant des pages longues */
.sommaire {
  position: sticky;
  top: 96px;
  font-family: var(--ui);
  border-left: 1px solid var(--trait);
  padding-left: 20px;
  max-height: calc(100dvh - 140px);
  overflow-y: auto;
}
.sommaire__titre {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 14px;
}
.sommaire ol { list-style: none; margin: 0; padding: 0; counter-reset: som; }
.sommaire li { margin: 0 0 3px; }
.sommaire a {
  display: block;
  font-size: 0.82rem;
  line-height: 1.42;
  color: var(--texte-clair);
  text-decoration: none;
  padding: 6px 0 6px 13px;
  border-left: 2px solid transparent;
  margin-left: -22px;
  padding-left: 20px;
  transition: color var(--transition), border-color var(--transition);
}
.sommaire a:hover { color: var(--encre); }
.sommaire a[data-actif="oui"] {
  color: var(--encre);
  border-left-color: var(--or);
  font-weight: 500;
}
@media (max-width: 1059px) {
  .sommaire { display: none; }
}

/* Barre de progression de lecture, tres fine */
.progression {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--or), var(--or-clair));
  z-index: 70;
  pointer-events: none;
}

/* Colonne laterale generique */
.aparte {
  background: var(--papier-2);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-2);
  padding: 22px;
  font-family: var(--ui);
  font-size: 0.88rem;
  line-height: 1.55;
}
.aparte h2,
.aparte h3 {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 12px;
  border: 0;
  padding: 0;
}
.aparte h2::after { display: none; }
.aparte ul { list-style: none; margin: 0; padding: 0; }
.aparte li { margin: 0 0 9px; }
.aparte a { color: var(--texte-doux); text-decoration: none; }
.aparte a:hover { color: var(--or); }


/* 15. Pied de page ======================================================== */

.pied {
  background: var(--encre);
  color: var(--texte-inverse-doux);
  padding-block: clamp(46px, 6vw, 72px) 0;
  font-family: var(--ui);
  font-size: 0.88rem;
  line-height: 1.62;
  margin-top: clamp(48px, 6vw, 80px);
}

.pied__canonique {
  max-width: 74ch;
  color: var(--texte-inverse-doux);
  font-family: var(--corps);
  font-size: 1.02rem;
  line-height: 1.62;
  padding-bottom: clamp(30px, 4vw, 44px);
  margin-bottom: clamp(30px, 4vw, 44px);
  border-bottom: 1px solid rgba(232, 207, 135, 0.16);
}
.pied__canonique strong { color: var(--or-clair); font-weight: 600; }

.pied__colonnes {
  display: grid;
  gap: clamp(26px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

.pied h2 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 16px;
  border: 0;
  padding: 0;
}
.pied h2::after { display: none; }

.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin: 0 0 9px; }
.pied a {
  color: var(--texte-inverse-doux);
  text-decoration: none;
  transition: color var(--transition);
}
.pied a:hover { color: var(--or-clair); }

.pied__bas {
  margin-top: clamp(34px, 4vw, 52px);
  padding-block: 22px;
  border-top: 1px solid rgba(232, 207, 135, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.79rem;
  color: #8f97b0;
}
.pied__bas p { margin: 0; }


/* 16. Animations et accessibilite du mouvement ============================ */

/* Apparition au defilement : discrete, jamais plus de 14px de translation */
[data-anime] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
[data-anime][data-vu="oui"] {
  opacity: 1;
  transform: none;
  will-change: auto;
}
[data-anime="2"] { transition-delay: 90ms; }
[data-anime="3"] { transition-delay: 180ms; }
[data-anime="4"] { transition-delay: 270ms; }

/* Trace des lignes du reseau de citations */
.trace path,
.trace line,
.trace polyline {
  stroke-dasharray: var(--longueur, 600);
  stroke-dashoffset: var(--longueur, 600);
  animation: tracer 2.4s cubic-bezier(0.36, 0.11, 0.2, 1) forwards;
}
@keyframes tracer { to { stroke-dashoffset: 0; } }

.trace circle { animation: apparaitre 900ms ease-out backwards; }
@keyframes apparaitre {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: none; }
}

/* Pulsation tres lente du noyau du reseau */
.pouls { animation: pouls 4.2s ease-in-out infinite; transform-origin: center; }
@keyframes pouls {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* Le tampon se pose */
.tampon--anime { animation: tamponner 620ms cubic-bezier(0.2, 1.5, 0.4, 1) backwards; }
@keyframes tamponner {
  from { opacity: 0; transform: rotate(-24deg) scale(1.45); }
  to { opacity: 0.92; transform: rotate(-9deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-anime] { opacity: 1; transform: none; }
  .trace path,
  .trace line,
  .trace polyline { stroke-dashoffset: 0; }
}


/* 17. Impression ========================================================== */

@media print {
  .entete, .pied__colonnes, .sommaire, .progression, .video__lecture,
  .burger, .saut-contenu, .appel, .recherche { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  body::before { display: none; }
  .section { padding-block: 12pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  .canonique { background: #fff; color: #000; border: 1pt solid #000; }
  .canonique__texte, .canonique__libelle { color: #000; }
  h2, h3 { page-break-after: avoid; }
  .encadre, .chiffre, table { page-break-inside: avoid; }
}

/* 18. Illustrations de section ============================================ */
/* Images generatives de la serie editoriale : cadre sombre, coins tres
   discrets, legende alignee sur le filet dore des figures. */

.illustration-section {
  margin: 2.6em 0;
}
.illustration-section img {
  width: 100%;
  border-radius: var(--rayon-2);
  border: 1px solid var(--trait);
  background: var(--encre);
}
.illustration-section figcaption {
  margin-top: 12px;
}

/* Sur fond nuit, le cadre se fond dans le decor */
.section--nuit .illustration-section img,
.hero--phase .illustration-section img { border-color: rgba(232, 207, 135, 0.22); }

/* Contenu pleine largeur : pages d'index dont le corps est une grille de
   cartes. Le texte introductif garde sa mesure de lecture, la grille prend
   toute la largeur disponible. */
.contenu--large > p,
.contenu--large > .reponse-directe,
.contenu--large > .encadre { max-width: var(--mesure); }
.contenu--large > .recherche { max-width: 760px; }
.contenu--large .grille--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

/* 19. Durcissement mobile ================================================= */
/* Regles defensives pour les petits ecrans : rien ne doit deborder
   horizontalement, aucun mot long ne doit casser une carte. */

@media (max-width: 640px) {
  :root { --mesure: 100%; }

  /* Les grands chiffres restent lisibles sans forcer la largeur de leur carte */
  .chiffre__valeur { font-size: clamp(1.9rem, 1.2rem + 3.4vw, 2.4rem); }
  .chiffre__valeur span { display: inline-block; }

  /* Le numero de phase en filigrane ne doit pas pousser le contenu */
  .hero__numero { font-size: clamp(5rem, 34vw, 9rem); opacity: 0.7; }

  /* Les libelles de priorite passent sous le texte plutot que de le comprimer */
  .checklist label { grid-template-columns: auto 1fr; row-gap: 8px; }
  .checklist__priorite { grid-column: 2; justify-self: start; }

  /* Boutons pleine largeur : cible tactile confortable */
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .bouton { width: 100%; }

  /* Les blocs de code se lisent en defilement horizontal, jamais en debordement */
  .bloc-code pre { font-size: 0.74rem; }

  .tampon { width: 104px; height: 104px; font-size: 0.54rem; }
}

/* Aucun mot ne casse la mise en page, quelle que soit la largeur */
h1, h2, h3, .carte__titre, .jalon__titre, .suite__titre {
  overflow-wrap: break-word;
  hyphens: auto;
}
.contenu a { overflow-wrap: anywhere; }

/* Les elements de grille et de flexbox ne descendent pas sous leur contenu
   minimal par defaut. Sans cette regle, un tableau large ou un bloc de code
   elargit toute la colonne au lieu de defiler dans son propre conteneur. */
.gabarit-article > *,
.duo > *,
.grille > *,
.hero__grille > *,
.contenu,
.contenu--large { min-width: 0; }

/* Les conteneurs a defilement horizontal doivent pouvoir retrecir librement */
.tableau-defile,
.bloc-code,
.bloc-code pre { max-width: 100%; min-width: 0; }