/* ============================================
   LA QUATRIÈME RÉVOLUTION INDUSTRIELLE
   Charte commune (matrice Gold Signal / dette), accent BORDEAUX #791F1F
   ============================================ */

:root {
  --bg: #faf9f6;
  --bg-card: #ffffff;
  --bg2: #f4f2ee;
  --bg3: #efece6;
  --text: #1a1a1a;
  --text2: #4a4a4a;
  --text3: #888;
  --border: #ddd;
  --border-light: #eee;
  --red: #791F1F;
  --red-dim: #641a1a;
  --red-bg: rgba(121,31,31,0.08);
  --red-deep: #5e1717;
  --gold: #a68a3e;
  --green: #2E7D32;
  --font-title: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --max-width: 1200px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.6; min-height:100vh; display:flex; flex-direction:column; }

/* BARRE DE NAVIGATION HORIZONTALE */
.nav-bar { position:sticky; top:0; z-index:100; background:var(--bg); padding:0 28px; border-bottom:0.5px solid rgba(0,0,0,0.08); }
/* Le nom est centré sur sa propre ligne, séparé du menu par un filet fin. Le
   filet occupe le padding déjà là : le menu ne descend pas d'un pixel. */
.nav-bar__line1 { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0; padding:0; }
.nav-bar__brand { display:flex; width:100%; align-items:center; justify-content:center; gap:0;
  text-decoration:none; cursor:pointer; background:none; border:none;
  padding:13px 0 3px; margin-bottom:3px; border-bottom:0.5px solid rgba(121,31,31,0.18); }
.nav-bar__links { width:100%; }
.nav-bar__name sup { font-size:0.5em; vertical-align:0.55em; font-style:normal; }
.nav-bar__name { font-family:var(--font-title); font-size:23px; font-style:italic; font-weight:500; color:var(--red); letter-spacing:0.01em; line-height:1.16; white-space:nowrap; }
.nav-bar__links { display:flex; align-items:center; gap:0; padding:0; border-bottom:none; flex:1; justify-content:center; }
.nav-bar__link { font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; color:var(--text); text-decoration:none; padding:6px 10px; white-space:nowrap; cursor:pointer; transition:opacity 0.12s; position:relative; opacity:0.6; background:none; border:none; }
.nav-bar__link:hover { opacity:0.85 !important; }
.nav-bar__link--active { opacity:1 !important; border-bottom:2px solid var(--red); }
.nav-bar__link--sep { margin-left:8px; padding-left:16px; border-left:1px solid rgba(0,0,0,0.08); }
.nav-bar__arrow { color:var(--red); font-size:13px; margin:0 4px; opacity:0.4; }
.nav-bar__right { display:none; align-items:center; gap:8px; }
.nav-bar__indicator { font-family:var(--font-mono); font-size:12px; color:var(--text); letter-spacing:0.03em; white-space:nowrap; }
.nav-bar__num { color:var(--red); }
.nav-bar__toggle { background:none; border:1px solid rgba(0,0,0,0.08); border-radius:4px; color:var(--text); font-size:18px; cursor:pointer; padding:4px 8px; font-family:sans-serif; line-height:1; }
.nav-bar__toggle:hover { background:var(--red-bg); }

/* HERO ÉDITORIAL */

/* SOMMAIRE VERTICAL */
.nav-tl { position:relative; padding-left:48px; max-width:700px; margin:0 auto; }
.nav-tl__line { position:absolute; left:15px; top:8px; bottom:8px; width:2px; background:linear-gradient(to bottom, rgba(121,31,31,0.08), rgba(121,31,31,0.35)); border-radius:1px; }
.nav-tl__arrow { position:absolute; left:11px; bottom:0; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid rgba(121,31,31,0.4); }
.nav-tl__item { display:flex; align-items:center; padding:14px 0; text-decoration:none; cursor:pointer; position:relative; border-top:1px solid rgba(0,0,0,0.03); transition:opacity 0.12s; }
.nav-tl__item:first-child { border-top:none; }
.nav-tl__item:hover { opacity:0.8; }
.nav-tl__dot { position:absolute; left:-40px; width:12px; height:12px; border-radius:50%; background:var(--bg); border:2px solid rgba(121,31,31,0.25); z-index:1; }
.nav-tl__item:nth-child(3) .nav-tl__dot { border-color:rgba(121,31,31,0.3); }
.nav-tl__dot--dashed { border-style:dashed; border-color:rgba(121,31,31,0.4); background:var(--bg); }
.nav-tl__content { flex:1; }
.nav-tl__label { font-family:var(--font-mono); font-size:13.5px; font-weight:500; letter-spacing:0.03em; text-transform:uppercase; color:var(--text); opacity:0.7; }
.nav-tl__desc { font-family:var(--font-body); font-size:12.5px; color:#999; margin-top:3px; }
.nav-tl__num { font-family:var(--font-mono); font-size:12px; color:#ccc; flex-shrink:0; }
.nav-tl__sep { height:12px; border-top:1px solid rgba(0,0,0,0.04); margin-top:14px; }

/* ZONE DE CONTENU */
.shell { max-width:960px; margin:0 auto; padding:28px 24px 40px; flex:1; width:100%; }
h1 { font-family:var(--font-title); font-size:30px; font-weight:500; color:var(--text); margin-bottom:14px; line-height:1.25; }
.sub { font-size:16px; color:var(--text2); margin-bottom:24px; line-height:1.7; max-width:680px; }
.era-nav { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.era-btn { font-family:var(--font-mono); font-size:13px; padding:8px 18px; border-radius:6px; border:1px solid var(--border); background:var(--bg); color:var(--text2); cursor:pointer; font-weight:500; transition:all 0.15s; }
.era-btn:hover { border-color:var(--red); color:var(--red); }
.era-btn.active { background:#333; color:#f0efec; border-color:#333; }
.era-intro { margin:18px 0 22px; max-width:680px; animation:introFade 0.4s ease; }
.era-intro .ei-title { font-family:var(--font-title); font-style:italic; font-size:21px; color:var(--text); line-height:1.4; margin-bottom:8px; }
/* Le titre de page est un h1 pour les moteurs de recherche ; ce qu'un navigateur
   ajoute de lui-même à un h1, graisse et marges, est neutralisé pour que rien ne
   change à l'écran. */
h1.ei-title { font-weight:400; margin-top:0; }
h1.ap-titre { margin-top:0; }
.era-intro .ei-desc { font-size:15px; color:var(--text2); line-height:1.65; }
@keyframes introFade { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
.legend { display:flex; gap:20px; margin-bottom:16px; font-size:13px; flex-wrap:wrap; }
.legend span { display:flex; align-items:center; gap:6px; color:var(--text2); }
.legend .bar { display:inline-block; border-radius:2px; }
#chartWrap { position:relative; width:100%; }
#grignote { margin-top:12px; min-height:24px; }
.gr-label { font-size:13px; color:var(--red); font-weight:600; white-space:nowrap; }
.sim-label { transition:opacity 0.12s,fill 0.12s; text-decoration-thickness:1px; text-underline-offset:3px; }
.sim-label:hover { opacity:1 !important; fill:#0d2340; text-decoration:underline; font-weight:600; }

/* PANNEAU LATÉRAL */
/* ═══════════════════════════════════════════
   PANNEAU MÉCANISME (pages Origines / Dette moderne)
   Affiché sous le graphique au clic "Voir le mécanisme"
   ═══════════════════════════════════════════ */
#mecPanel { margin-top: 18px; }
.mec-panel { position:relative; background:var(--bg-card,#fffdf7); border:0.5px solid var(--border); border-radius:12px; padding:22px 24px; max-width:680px; animation:introFade 0.3s ease; }
.mec-panel h3 { font-family:var(--font-title); font-style:italic; font-size:19px; font-weight:500; color:var(--text); margin:0 0 8px; padding-right:32px; line-height:1.3; }
.mec-panel .desc { font-size:13.5px; color:var(--text2); line-height:1.65; margin-bottom:16px; }
.mec-panel-close { position:absolute; top:10px; right:12px; border:none; background:none; font-size:24px; color:var(--text3); cursor:pointer; line-height:1; padding:4px 8px; }
.mec-panel-close:hover { color:var(--red); }

/* ═══════════════════════════════════════════
   COPIEURS DE LIEN PROFOND
   Tooltips des graphiques, paliers, lignes du ticket
   ═══════════════════════════════════════════ */
.tip-footer { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.tip-copy { font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text3); cursor:pointer; white-space:nowrap; pointer-events:auto; }
.tip-copy:hover { color:var(--red); }
.seuil-head { position:relative; }
.seuil-stick { position:relative; }
.seuil-copy { position:absolute; top:2px; right:0; font-size:13px; color:var(--text3); opacity:0.22; cursor:pointer; pointer-events:auto; line-height:1; }
.seuil-copy:hover { color:var(--red); opacity:1; }
/* Le ticket imite un ticket de caisse : l'icône de copie est invisible au repos
   (l'espace reste réservé, l'alignement des lignes ne bouge pas) et ne se révèle
   qu'au survol de la ligne. Outil d'auteur, pas élément de design. */
.ticket-link { margin-left:8px; color:var(--text3); opacity:0; cursor:pointer; font-size:13px; flex-shrink:0; transition:opacity 0.15s; }
.ticket-line:hover .ticket-link { opacity:0.7; }
.ticket-link:hover { color:var(--red); opacity:1; }
@keyframes ligneFlash {
  0% { background:rgba(121,31,31,0.16); }
  100% { background:transparent; }
}
.ticket-line--target { animation:ligneFlash 2.6s ease forwards; }
.signal-link { margin-right:10px; color:var(--text3); opacity:0.3; cursor:pointer; font-size:14px; flex-shrink:0; }
.signal-head:hover .signal-link { opacity:0.8; }
.signal-link:hover { color:var(--red); opacity:1; }

/* Grammaire unifiée des blocs dépliables (Méthodologie, État des marchés, Mécanisme) */
.meta-separator {
  border-top: 1px dashed rgba(120, 30, 30, 0.22);
  margin: 12px 0;
}
.meta-details {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text1);
}
.meta-details summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 0;
  font-family: var(--font-mono);
  font-size:12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #791F1F;
  font-weight: 500;
  outline: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.meta-details summary::-webkit-details-marker { display: none; }
.meta-details summary::before {
  content: '\25B8'; /* ▸ */
  display: inline-block;
  transition: transform 0.2s ease;
  color: #791F1F;
  font-size:12px;
  line-height: 1;
}
.meta-details[open] summary::before {
  transform: rotate(90deg);
}
.meta-precision {
  font-family: var(--font-body);
  font-style: italic;
  font-size:12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #5c5b57;
  margin-left: 0;
}
.meta-details-body {
  padding-top: 14px;
  padding-bottom: 6px;
}

/* Accordéon mécanisme : héritier de meta-details, contenu spécifique au palier */
.mec-section[open] .meta-details-body {
  padding-top: 18px;
}

/* Styles du contenu de buildPanel : h3 titre, desc résumé */
.panel-body h3 { font-family:var(--font-title); font-size:21px; font-weight:500; color:var(--text); margin-bottom:8px; line-height:1.3; }
.panel-body .desc { font-size:14px; color:var(--text2); line-height:1.65; margin-bottom:20px; }

/* Mécanisme intégré en 4ème section du palier (accordéon plié par défaut) */
.seuil-mec-details { margin: 0; padding: 0; }
.seuil-mec-details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
}
.seuil-mec-details summary::-webkit-details-marker { display: none; }
.seuil-mec-details summary::before {
  content: '\25B8';
  display: inline-block;
  color: #791F1F;
  font-size:12px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.seuil-mec-details[open] summary::before {
  transform: rotate(90deg);
}
.seuil-mecanisme { padding-top: 14px; pointer-events: auto; }
.seuil-mecanisme h3 { font-family:var(--font-title); font-size:18px; font-weight:500; color:var(--text); margin: 0 0 6px; line-height:1.3; font-style: italic; }
.seuil-mecanisme .desc { font-size:13.5px; color:var(--text2); line-height:1.65; margin-bottom:16px; }

/* Désactivation des anciennes classes panel */
.panel-overlay { display: none; }
.panel { display: none; }
.pot-box { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:18px; margin-bottom:20px; }
.pot-title { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--red); letter-spacing:0.3px; margin-bottom:12px; }
.pot-row { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.pot-label { width:100px; font-size:12px; color:var(--text3); text-align:right; flex-shrink:0; }
.pot-bar { height:16px; border-radius:4px; opacity:0.6; }
.pot-val { font-size:13px; font-weight:600; color:var(--text); }
.mec-title { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--red); letter-spacing:0.3px; margin-bottom:10px; }
.mec-step { display:flex; gap:12px; margin-bottom:14px; }
.mec-num { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:#fff; flex-shrink:0; }
.mec-text { font-size:14px; color:var(--text); line-height:1.6; padding-top:2px; }
.bercy-box { background:var(--bg3); border-radius:10px; padding:16px 18px; margin-top:20px; }
.bercy-title { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--text3); letter-spacing:0.3px; margin-bottom:8px; }
.bercy-text { font-size:14px; color:var(--text); line-height:1.65; font-style:italic; }

/* ============================================
   PANNEAU PYRAMIDE (onglet 04, IA)
   Transposition de la pyramide à sept étages du prototype cockpit Claude
   Design vers la charte du site : fond clair, EB Garamond en titre, IBM Plex
   Sans en corps, accents bordeaux #791F1F. La verticale reste orientée du
   plus visible (haut) au plus décisif (bas), avec deux annotations latérales
   qui rendent le renversement analytique lisible au premier scan.
   ============================================ */
.pyr-panel { background:var(--bg2); border:1px solid var(--border-light); border-radius:10px; padding:22px 20px 18px; margin-top:8px; }
.pyr-panel__title { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--red); letter-spacing:0.14em; text-transform:uppercase; margin-bottom:14px; }
.pyr-svg { width:100%; height:auto; display:block; margin:8px auto 4px; max-width:520px; }
.pyr-svg text { font-family:'IBM Plex Sans', sans-serif; fill:var(--text); }
.pyr-svg .pyr-label { font-size:12px; font-weight:500; }
.pyr-svg .pyr-actors { font-family:'IBM Plex Mono', monospace; font-size:12px; fill:var(--text2); }
.pyr-svg .pyr-annot { font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; }
.pyr-svg polygon { transition:fill-opacity 0.15s; }
.pyr-svg g:hover polygon { fill-opacity:0.55; }
.pyr-key { font-size:12.5px; color:var(--text2); line-height:1.6; margin-top:14px; padding-top:14px; border-top:1px dashed rgba(120,30,30,0.22); }
.pyr-key strong { color:var(--red); font-weight:500; }

/* FOOTER */
.site-footer { padding:16px 28px 20px; border-top:1px solid rgba(0,0,0,0.04); display:flex; justify-content:center; }
.site-footer-inner, .site-footer__inner { display:flex; align-items:center; gap:14px; }
.site-footer-sig-name, .site-footer__name { font-size:12px; color:#8a8983; font-weight:500; letter-spacing:0.5px; }
.site-footer-sig-date, .site-footer__date { font-family:var(--font-mono); font-size:12px; color:#8a8983; margin-top:1px; }
.site-footer-bar, .site-footer__bar { width:0.5px; height:20px; background:rgba(0,0,0,0.15); flex-shrink:0; }
.site-footer-src, .site-footer__src { font-size:12px; color:#8a8983; opacity:0.7; line-height:1.7; letter-spacing:0.2px; }

/* RESPONSIVE (reporté) */
/* Les cibles de défilement s'arrêtent SOUS la barre de navigation sticky, pas
   derrière elle. Sans cette marge, scrollIntoView cale la cible au sommet de la
   fenêtre, où la barre la recouvre : titres de paliers masqués, boutons cachés. */
#methodoDetails, #chartWrap, #mecPanel, #simContent,
.ticket-line, .signal-head { scroll-margin-top: 64px; }

/* Statut temporel des paliers (derriere nous / aujourd'hui / a venir) et doctrine de l'echelle */
.seuil-statut { font-family:var(--font-mono); font-size:12px; color:#8a8983; letter-spacing:0.04em; margin-top:5px; }
.seuil-doctrine { font-size:13px; color:#5c5b57; line-height:1.6; font-style:italic; }

/* Graphiques mobiles : fondu de bord droit signalant la suite, effacé en fin de course */
.era-scroll-wrap { position:relative; }
.era-scroll-wrap::after { content:""; position:absolute; top:0; right:0; bottom:0; width:26px; background:linear-gradient(270deg, var(--bg), rgba(250,249,246,0)); pointer-events:none; opacity:1; transition:opacity 0.25s; }
.era-scroll-wrap.era-wrap--end::after { opacity:0; }

/* Nav multi-pages : les liens <a> reprennent exactement le rendu des anciens boutons */
a.nav-bar__brand, a.nav-bar__link { text-decoration: none; }
a.nav-bar__link { display: inline-block; }

@media (max-width:768px) {
  .nav-bar { padding:0 12px; }
  /* Titre du seuil collant : le titre REEL (.seuil-head, avec sa ligne de statut)
     se fige sous la barre de navigation pendant la lecture de son texte, puis se
     libere en fin de contenu (sticky natif, jamais de copie). Fond opaque pour
     que le texte ne transparaisse pas en glissant dessous. --nav-h est mesuree
     sur la barre reelle par le moteur, seul point de calcul. */
  #simContent .seuil-stick {
    position: sticky; top: var(--nav-h, 64px); z-index: 6;
    background: var(--bg); padding: 6px 0 7px; margin-top: -6px;
    border-bottom: 0.5px solid rgba(0,0,0,0.07);
  }
  /* La barre fait deux rangées sur mobile (marque + liens) : marge de
     défilement augmentée en conséquence pour toutes les cibles de scroll */
  #methodoDetails, #chartWrap, #mecPanel, #simContent,
  .ticket-line, .signal-head { scroll-margin-top: 104px; }
  .nav-bar__name { font-size:23px; }
  /* Les liens restent accessibles : rangée compacte scrollable au lieu d'être masqués.
     Sans eux, aucune navigation entre pages sur mobile hors retour accueil. */
  .nav-bar__line1 { flex-wrap:wrap; }
  .nav-bar__links {
    order:3; flex:1 1 100%; justify-content:flex-start;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding:2px 0 8px; gap:2px;
    scrollbar-width:none;
  }
  .nav-bar__links::-webkit-scrollbar { display:none; }
  .nav-bar__link { font-size:12px; padding:4px 8px; white-space:nowrap; flex-shrink:0; }
  .nav-bar__arrow { font-size:12px; flex-shrink:0; }
  .nav-bar__right { display:none; }
  .site-footer__inner, .site-footer-inner { flex-direction:column; align-items:center; gap:8px; text-align:center; }
}

/* ═══════════════════════════════════════════
   TOOLTIPS DU GRAPHIQUE (réel vs narratif)
   ═══════════════════════════════════════════ */
.tip-wrap { position:absolute; z-index:20; background:var(--bg-card); border:0.5px solid var(--border); border-radius:var(--border-radius-lg,12px); box-shadow:0 8px 28px rgba(0,0,0,0.14); overflow:hidden; pointer-events:auto; }

/* Bloc FAIT (réel, froid) */
.tip-cata { padding:13px 16px 12px; }
.tip-cata-title { font-size:15px; font-weight:500; color:var(--text); margin-bottom:4px; line-height:1.3; }
.tip-cata-ch { font-size:13px; color:var(--text2); line-height:1.5; }
.tip-cata-ton { font-size:12px; color:var(--text3); font-style:italic; margin-top:5px; line-height:1.45; }

/* Séparateur */
.tip-cata + .tip-diab, .tip-diab { border-top:0.5px solid var(--border); }

/* Bloc NARRATIF (ce qu'on vous en dit) */
.tip-diab { padding:12px 16px 13px; background:var(--bg2); }
.tip-diab-icon { display:none; }
.tip-diab-title { font-size:14px; font-weight:500; color:var(--text); font-style:italic; line-height:1.35; margin-bottom:4px; }
.tip-diab-text { font-size:13px; color:var(--text2); line-height:1.5; }
.tip-diab-link { margin-top:9px; font-size:12px; color:var(--red); font-weight:500; cursor:pointer; }
.tip-diab-link:hover { text-decoration:underline; }
.tip-footer { padding:7px 16px; background:var(--bg3); font-family:var(--font-mono); font-size:12px; color:var(--text3); letter-spacing:0.02em; border-top:0.5px solid var(--border); }

/* ═══════════════════════════════════════════
   PAGE L'ADDITION : ticket de caisse
   ═══════════════════════════════════════════ */
.ticket { max-width:480px; margin:0 auto; background:#fffdf7; padding:36px 28px; box-shadow:0 4px 20px rgba(0,0,0,0.08); font-family:var(--font-mono); font-size:12.5px; color:var(--text); line-height:1.7; position:relative; }
.ticket-head { text-align:center; padding-bottom:16px; border-bottom:1.5px dashed #999; }
.ticket-head-sub { font-size:12px; letter-spacing:0.18em; color:var(--red-deep); }
.ticket-head-title { font-size:15px; font-weight:500; margin-top:6px; letter-spacing:0.05em; }
.ticket-head-date { font-size:12px; color:var(--text3); margin-top:5px; }
.ticket-head-covers { font-size:12px; letter-spacing:0.08em; color:var(--text3); margin-top:8px; }
.ticket-mention { font-size:12px; color:var(--text3); margin-top:10px; line-height:1.6; text-align:center; }
.ticket-lines { padding:14px 0 8px; }
.ticket-line { display:flex; align-items:baseline; gap:6px; padding:4px 0; cursor:default; transition:background 0.15s; border-radius:3px; padding-left:4px; padding-right:4px; }
.ticket-line:hover { background:rgba(121,31,31,0.05); }
.ticket-y { color:var(--text3); flex-shrink:0; width:46px; }
.ticket-t { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ticket-dots { flex:1; border-bottom:1px dotted #bbb; margin:0 6px; position:relative; top:-4px; min-width:20px; }
.ticket-sign { color:var(--red-deep); flex-shrink:0; font-weight:500; font-size:12.5px; white-space:nowrap; }
.ticket-total { border-top:1.5px dashed #999; padding-top:16px; margin-top:10px; }
.ticket-total-row { display:flex; justify-content:space-between; padding:3px 0; font-weight:500; font-size:13.5px; }
.ticket-total-date { font-size:12px; color:var(--text3); margin-top:1px; }
.ticket-total-row--click { cursor:pointer; }
.ticket-total-row--click .ticket-total-lbl { border-bottom:1px dotted #999; }
.ticket-total-row--click:hover .ticket-total-lbl { border-bottom-color:var(--red); }
/* Le verso du ticket : même papier que la caisse, filet rouge en tête.
   La chute de l'histoire, ouverte au clic sur la ligne du total. */
.ticket-verso { display:none; border:0.5px solid rgba(0,0,0,0.12); border-top:2px solid #791F1F; padding:16px 18px; margin-top:12px; font-family:var(--font-body); font-size:13px; line-height:1.65; color:#2c2c2a; text-align:left; font-weight:400; }
.ticket-verso.open { display:block; }
.ticket-verso p { margin:0 0 10px; }
.ticket-verso p:last-child { margin-bottom:0; }
.ticket-verso-epi { font-family:var(--font-title); font-style:italic; font-size:14.5px; color:#5f5e5a; }
.ticket-verso-art { font-size:12px; color:#5f5e5a; }
.ticket-verso-val { font-family:var(--font-mono); color:#791F1F; font-weight:500; }
.ticket-verso-close { font-weight:500; margin-top:12px; }
.ticket-verso-src { font-family:var(--font-mono); font-size:12px; color:#888780; margin-top:12px; }
.ticket-total-val { color:var(--red-deep); }
.ticket-total-note { font-size:12px; color:var(--text3); margin-top:10px; line-height:1.6; text-align:center; font-style:italic; font-family:var(--font-title); }
.ticket-total-link { margin-top:10px; text-align:center; font-size:12px; color:var(--red); font-weight:500; cursor:pointer; letter-spacing:0.02em; }
.ticket-total-link:hover { text-decoration:underline; }
.ticket-sources { border-top:0.5px dashed #ccc; margin-top:18px; padding-top:12px; font-size:12px; color:var(--text3); line-height:1.7; text-align:center; }
.ticket-tip-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.ticket-tip-t { font-weight:500; color:#fff; font-size:12.5px; }
.ticket-tip-y { font-family:var(--font-mono); font-size:12px; color:#8a8884; flex-shrink:0; }
.ticket-tip-filet { display:block; border-bottom:1px dashed #4a4a47; margin:8px 0; }
.ticket-tip-val { font-family:var(--font-mono); color:#F09595; font-weight:500; }
.ticket-tip-decode { display:block; color:#c9c7c2; margin-bottom:6px; }
.ticket-tip-body { display:block; color:#c9c7c2; }
.ticket-tip-src { display:block; margin-top:9px; font-family:var(--font-mono); font-size:12px; color:#8a8884; }
.ticket-tip { display:none; position:absolute; max-width:340px; background:#1a1a1a; color:#f0efec; font-size:12px; line-height:1.55; padding:11px 14px; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,0.2); font-family:var(--font-body); z-index:50; pointer-events:none; }

/* ═══════════════════════════════════════════
   PAGE DISCUSSION : accordéons et formulaire (charte Gold Signal, couleur rouge)
   ═══════════════════════════════════════════ */
.discussion { max-width:760px; margin:0 auto; padding:0 16px; }
.discussion-lead { font-family:var(--font-body); font-size:16px; line-height:1.75; color:var(--text2); margin:8px 0 36px; }
.discussion-lead strong { font-weight:500; color:var(--text); }
.signals { margin-bottom:24px; }
.signal-head { display:flex; align-items:center; padding:14px 16px; background:#faf9f6; border-radius:5px; cursor:pointer; margin-bottom:4px; transition:background 0.15s; gap:12px; border:1px solid rgba(0,0,0,0.06); }
.signal-head:hover { background:#f5efee; }
.signal-head.open { background:#f5efee; border-color:rgba(121,31,31,0.3); }
.signal-num { font-family:var(--font-mono); font-size:0.78rem; color:var(--red); font-weight:500; flex-shrink:0; width:20px; }
.signal-title { font-family:var(--font-body); font-size:0.95rem; font-weight:500; color:var(--text); flex:1; line-height:1.45; }
.signal-chev { font-size:0.85rem; color:var(--red); transition:transform 0.25s, background 0.2s; flex-shrink:0; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(121,31,31,0.1); }
.signal-head.open .signal-chev { transform:rotate(180deg); background:rgba(121,31,31,0.18); }
.signal-body { display:none; padding:18px 22px 22px; font-family:var(--font-body); font-size:0.95rem; line-height:1.75; color:var(--text2); }
.signal-body.open { display:block; }
.signal-body p { margin-bottom:14px; }
.signal-body p:last-child { margin-bottom:0; color:var(--text); }
.signal-body strong { font-weight:500; color:var(--text); }
.write-block { margin-top:24px; padding-top:32px; border-top:1px solid rgba(0,0,0,0.08); }
.contact-form { display:flex; flex-direction:column; gap:16px; max-width:560px; margin:0 auto; }

/* Carte auteur : vignette ronde en tête du formulaire, largeur alignée sur lui */
.author-row { display:flex; align-items:center; gap:16px; max-width:560px; margin:0 auto 24px; }
.author-photo { width:88px; height:88px; border-radius:50%; object-fit:cover; border:2px solid rgba(121,31,31,0.22); box-shadow:0 2px 8px rgba(0,0,0,0.08); flex-shrink:0; }
/* Bloc de contact, aligne sur celui de The Gold Signal le 17 octobre 2026 :
   deux lignes seulement, le nom puis la phrase, sans titre au-dessus. */
.author-line__name { font-family:var(--font-title); font-size:1.1rem; color:var(--text); line-height:1.3; }
.author-line__sub { font-family:var(--font-body); font-size:0.85rem; color:var(--text3); margin-top:4px; line-height:1.5; }
.contact-form__row { display:flex; flex-direction:column; }
.contact-form__label { font-family:var(--font-mono); font-size:12px; color:var(--text3); text-transform:uppercase; letter-spacing:0.12em; margin-bottom:4px; }
.contact-form__input, .contact-form__textarea { width:100%; padding:11px 14px; font-size:14px; border:1px solid var(--border); border-radius:3px; font-family:var(--font-body); background:#fff; color:var(--text); transition:border-color 0.15s; box-sizing:border-box; }
.contact-form__textarea { min-height:140px; resize:vertical; line-height:1.6; }
.contact-form__input:focus, .contact-form__textarea:focus { outline:none; border-color:var(--red); }
.contact-form__button { align-self:flex-start; margin-top:8px; background:var(--red-deep); color:#fff; border:none; padding:11px 28px; font-size:12px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.12em; border-radius:3px; cursor:pointer; transition:background 0.15s; }
.contact-form__button:hover { background:#6f1414; }
.contact-form__honeypot { position:absolute; left:-9999px; }
.contact-success { display:none; padding:16px 20px; background:#f0f7ed; border-left:3px solid #4a7c3a; color:#2d5020; font-family:var(--font-body); font-size:14.5px; margin-bottom:20px; border-radius:3px; }
.contact-success--visible { display:block; }

/* ═══════════════════════════════════════════
   PANNEAU MÉTHODOLOGIE
   ═══════════════════════════════════════════ */
.methodo-block { margin-top:18px; }
.methodo-step { margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid rgba(0,0,0,0.06); }
.methodo-step:last-child { border-bottom:none; padding-bottom:0; }
.methodo-step-title { font-family:var(--font-body); font-size:14px; font-weight:500; color:var(--text); margin-bottom:8px; }
.methodo-step-body { font-family:var(--font-body); font-size:13.5px; line-height:1.7; color:var(--text2); }
.methodo-limit { margin-top:22px; padding-top:22px; border-top:1.5px dashed rgba(140,28,28,0.3); }
.methodo-link { color:var(--red-deep); border-bottom:1px solid var(--red-deep); cursor:pointer; font-weight:500; }
.methodo-link:hover { background:rgba(121,31,31,0.08); }

/* Bouton Méthodologie dans l'intro de la page Seuils critiques */
.methodo-button { display:inline-block; margin-left:8px; padding:4px 10px; font-family:var(--font-mono); font-size:12px; color:var(--red-deep); border:1px solid var(--red-deep); border-radius:3px; cursor:pointer; letter-spacing:0.08em; text-transform:uppercase; font-weight:500; transition:background 0.15s; }
.methodo-button:hover { background:var(--red-deep); color:#fff; }

/* Méthodologie v2 : modèle à cinq blocs */
.methodo-question { font-family:var(--font-title); font-size:21px; font-style:italic; color:var(--red-deep); line-height:1.4; margin:0 0 32px; padding:16px 0 18px; border-top:1px solid rgba(140,28,28,0.25); border-bottom:1px solid rgba(140,28,28,0.25); text-align:center; }
.methodo-section { margin-bottom:30px; padding-bottom:28px; border-bottom:1px solid rgba(0,0,0,0.08); }
.methodo-section:last-child { border-bottom:none; padding-bottom:0; margin-bottom:0; }
.methodo-section-head { font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--red); font-weight:600; line-height:1.4; margin-bottom:16px; }
.methodo-section-body { font-family:var(--font-body); font-size:13.5px; line-height:1.7; color:var(--text2); margin-bottom:10px; }
.methodo-section-body:last-child { margin-bottom:0; }
.methodo-rule { display:flex; gap:18px; margin-top:18px; }
.methodo-rule:first-of-type { margin-top:20px; }
.methodo-rule-num { font-family:var(--font-mono); font-size:26px; font-weight:300; color:var(--red); flex-shrink:0; min-width:42px; line-height:1; padding-top:3px; }
.methodo-rule-content { flex:1; }
.methodo-rule-title { font-family:var(--font-body); font-size:14.5px; font-weight:600; color:var(--text); margin-bottom:7px; line-height:1.4; }
.methodo-rule-body { font-family:var(--font-body); font-size:13.5px; line-height:1.7; color:var(--text2); }
.methodo-dalio-quote { margin:14px 0; padding:13px 18px; background:#faf2ed; border-left:3px solid var(--red); font-family:var(--font-title); font-style:italic; color:var(--red-deep); font-size:16px; line-height:1.4; }
.methodo-dalio-attribution { font-family:var(--font-body); font-style:normal; color:var(--text2); font-size:12px; margin-top:6px; letter-spacing:0.01em; }

/* Tooltips niveau 2 : bulle narrative en charte cartographe */
.tt { border-bottom:1px dotted var(--red); cursor:help; position:relative; display:inline; }
.tt:hover, .tt.tt-open { background:rgba(121,31,31,0.06); }
.tt-bubble { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:#faf9f6; color:var(--text); border:1px solid rgba(140,28,28,0.35); padding:14px 18px 16px; border-radius:4px; font-size:12.5px; line-height:1.55; width:max-content; max-width:360px; min-width:280px; box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:100; opacity:0; pointer-events:none; transition:opacity 0.15s; font-family:var(--font-body); font-style:normal; font-weight:400; letter-spacing:0; text-transform:none; }
.tt-bubble::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:7px solid transparent; border-top-color:rgba(140,28,28,0.35); }
.tt-bubble::before { content:''; position:absolute; top:calc(100% - 1px); left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#faf9f6; z-index:1; }
.tt-bubble.tt-bubble-below { bottom:auto; top:calc(100% + 8px); }
.tt-bubble.tt-bubble-below::after { top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:rgba(140,28,28,0.35); }
.tt-bubble.tt-bubble-below::before { top:auto; bottom:calc(100% - 1px); border-top-color:transparent; border-bottom-color:#faf9f6; }
.tt:hover .tt-bubble, .tt.tt-open .tt-bubble { opacity:1; pointer-events:auto; }
.ttb-head { display:block; font-family:var(--font-mono); font-size:12px; color:var(--red-deep); letter-spacing:0.08em; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid rgba(140,28,28,0.18); font-weight:600; }
.ttb-p { display:block; margin-bottom:10px; color:var(--text); }
.ttb-p:last-of-type { margin-bottom:0; }
.ttb-strong { font-weight:600; color:var(--text); background:rgba(121,31,31,0.10); padding:1px 5px; border-radius:2px; }
.ttb-fact { font-weight:600; color:var(--text); }
.ttb-yr { font-family:var(--font-mono); font-weight:600; color:var(--red-deep); font-size:0.95em; }
.ttb-num { font-family:var(--font-mono); font-weight:600; color:var(--red-deep); white-space:nowrap; }
.ttb-pointe { display:block; font-style:italic; color:var(--text2); margin-top:12px; padding-left:14px; border-left:2px solid rgba(140,28,28,0.35); }
.methodo-section-sub { font-family:var(--font-body); font-size:12.5px; font-style:italic; color:var(--text2); margin-top:-10px; margin-bottom:18px; line-height:1.5; }

/* ============================================
   v41 · Sections en flow + vignette presse + pied
   ============================================ */

/* Header d'un seuil (titre + sous-titre) */
.seuil-head { margin-bottom: 16px; }
.seuil-titre { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.15; }
.seuil-sous { font-size: 12px; color: var(--text2); margin-top: 3px; font-family: var(--font-mono); letter-spacing: 0.01em; }

/* Sections en flow (déclencheur, outil, pour vous) - pas de cadre */
.seuil-section {
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Label de section (mono uppercase bordeaux) */
.lbl-section {
  font-family: var(--font-mono);
  font-size:12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #791F1F;
  font-weight: 500;
  margin-bottom: 6px;
}

/* Précision contextuelle entre parenthèses (sans-serif italique gris, casse normale) */
.lbl-precision {
  font-family: var(--font-body);
  font-style: italic;
  font-size:12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #5c5b57;
  margin-left: 6px;
}

/* Texte d'une section (corps sans-serif gris foncé) */
.seuil-txt {
  font-size: 13px;
  line-height: 1.55;
  color: #3a3a38;
}

/* Filet pointillé entre sections en flow */
.seuil-filet {
  margin: 12px 0;
  border-top: 1px dashed rgba(120, 30, 30, 0.22);
}

/* Vignette presse : seul élément cadré, imitation coupure de journal */
.cadre {
  border-radius: 4px;
  padding: 13px 16px;
  margin-top: 16px;
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.cadre-n {
  background: #f6f0e2;
  border: 1px solid rgba(120, 90, 30, 0.22);
}

/* Pied global : lien Voir le mécanisme, sous la vignette presse */
.seuil-pied {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size:12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #791F1F;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.seuil-pied:hover { opacity: 0.70; }

/* ============================================
   Tag source réutilisable (.src) + presse (héritage v40 conservé)
   ============================================ */

/* Tag source en cachet typographique, classe générique inline */
.src {
  font-family: var(--font-mono);
  font-size:12px;
  color: #1e3a5f;
  background: #efece2;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
  display: inline-block;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.press-extract-src-link.src:hover { background: #e6e2d3; }

/* Sous-éléments de la narration presse (enfants du cadre-n) */
.press-extract-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.press-extract-byline {
  font-family: var(--font-mono);
  font-size:12px;
  color: var(--text2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.press-extract-cite {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.48;
  color: var(--text);
  position: relative;
  padding-left: 14px;
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: break-word;
}
.press-extract-quote {
  position: absolute;
  left: -2px;
  top: -6px;
  font-size: 28px;
  color: #9E7B2F;
  line-height: 1;
  font-family: Georgia, serif;
  font-style: normal;
}
.press-extract-glose {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(120, 90, 30, 0.15);
  font-size: 12px;
  color: var(--text2);
  line-height: 1.55;
}

/* Mobile : tags source autorisés à wrapper, cadre presse resserré */
@media (max-width: 700px) {
  .src { white-space: normal; }
  .cadre { padding: 12px 14px; }
  .press-extract-cite { font-size: 16px; padding-left: 16px; }
  .press-extract-quote { font-size: 28px; top: -6px; }

  /* Page Seuils critiques : récupérer la largeur utile et borner les tooltips à l'écran */
  /* Contenu remonté vers le menu : 10px de coquille + 4px d'intro (au lieu de 20+18),
     appliqué d'un coup à toutes les pages puisque la coquille est commune */
  .shell { padding: 10px 14px 32px; }
  .era-intro { margin: 4px 0 16px; }
  .seuil-titre { font-size: 20px; }
  .seuil-txt { font-size: 14px; }
  .methodo-rule-num { min-width: 34px; font-size: 22px; }

  /* Tooltips de termes : panneau fixe en bas d'écran au lieu de la bulle centrée
     sur le terme, qui déborde latéralement près des bords. Lisible, jamais coupé. */
  .tt-bubble {
    position: fixed;
    left: 12px; right: 12px; bottom: 12px;
    top: auto;
    transform: none;
    width: auto; max-width: none; min-width: 0;
    max-height: 55vh; overflow-y: auto;
    box-shadow: 0 -4px 28px rgba(0,0,0,0.22);
  }
  .tt-bubble::after, .tt-bubble::before { display: none; }
  .tt-bubble.tt-bubble-below { top: auto; bottom: 12px; }

  /* Accueil : timeline resserrée */
  .nav-tl { padding-left: 40px; }
  .nav-tl__desc { font-size: 13px; }

  /* Ticket Addition : marges réduites pour récupérer la largeur.
     L'icône de copie disparaît : pas de survol au tactile, et le ticket reste vierge. */
  .ticket { padding: 28px 18px; }
  .ticket-verso { padding: 14px 14px; }
  /* Total : le libellé court tient en pleine taille, on interdit juste le repli */
  .ticket-total-row { flex-wrap: nowrap; gap: 8px; }
  .ticket-total-row .ticket-total-lbl, .ticket-total-row .ticket-total-val { white-space: nowrap; }
  .ticket-link { display: none; }

  /* Graphique des ères : légende compacte */
  .legend { font-size: 12px; gap: 12px; }
  .era-intro .ei-title { font-size: 19px; }

  /* Graphique des ères : défilement horizontal. Le graphique garde sa largeur
     desktop (points espacés, un seul sous le doigt), on balaye pour explorer. */
  .era-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -14px;
    padding: 0 14px;
  }
  .era-scroll::-webkit-scrollbar { height: 4px; }
  .era-scroll::-webkit-scrollbar-thumb { background: rgba(121,31,31,0.25); border-radius: 2px; }

  /* Panneau mécanisme : marges réduites */
  .mec-panel { padding: 18px 16px; }
}

/* ============================================
   Post-it MAJ, charte commune avec The Gold Signal.
   Fond #FBE89C, encre Caveat brun #5C4A1E, calque sous-feuille
   #F5DC7B via ::after. Posé en bloc, en fin de glose d'angle mort,
   pour signaler une actualité fraîche sur un palier.
   ============================================ */
.postit {
  display: block; width: fit-content; max-width: 280px;
  margin: 16px 0 10px;
  background: #FBE89C; box-shadow: 3px 5px 12px rgba(0,0,0,0.18);
  padding: 12px 16px 14px;
  transform: rotate(-2deg); position: relative;
  font-family: 'Caveat', 'Marker Felt', cursive;
  font-size: 19px; line-height: 1.25; color: #5C4A1E;
}
.postit::after {
  content: ''; position: absolute;
  top: 4px; left: 8px; right: -4px; bottom: -4px;
  background: #F5DC7B; transform: rotate(3.5deg);
  z-index: -1; box-shadow: 2px 3px 8px rgba(0,0,0,0.08);
}
.postit__date {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing: 0.1em;
  color: #8B6F2A; margin-bottom: 6px;
}

/* ============================================
   Miniature MAJ dans la nav, charte commune avec The Gold Signal.
   Signale d'un coup d'oeil où regarder. Au tap ou clic, route vers le
   palier concerné et fait défiler la page jusqu'au post-it.
   ============================================ */
.nav-bar__link--maj { position: relative; }
.nav-bar__link--maj .maj-nav {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  position: relative; top: -3px;
  background: #FBE89C; box-shadow: 1px 2px 5px rgba(0,0,0,0.18);
  transform: rotate(-4deg); padding: 3px 8px;
  font-family: 'Caveat', 'Marker Felt', cursive;
  font-size: 12.5px; line-height: 1; color: #5C4A1E; white-space: nowrap;
  cursor: pointer;
}
.nav-tl__item .maj-nav-tl {
  display: inline-block; margin-left: 10px; vertical-align: middle;
  background: #FBE89C; box-shadow: 1px 2px 4px rgba(0,0,0,0.18);
  transform: rotate(-4deg); padding: 3px 8px;
  font-family: 'Caveat', 'Marker Felt', cursive;
  font-size: 13px; line-height: 1; color: #5C4A1E; white-space: nowrap;
  cursor: pointer; z-index: 5;
}

/* ============================================
   Cotation de la variation de la dette, vue État des marchés.
   Le mouvement d'abord, comme un cours : fleche + delta en mono bordeaux,
   cause en une phrase, source inline. Données : PRESENT_STATE.variation.
   ============================================ */
.etat-cote {
  border: 1px solid rgba(121,31,31,0.30); border-left: 3px solid #791F1F;
  border-radius: 0; background: rgba(121,31,31,0.05);
  padding: 12px 13px; margin: 12px 0 2px;
}
.etat-cote__lab {
  font-family: var(--font-mono); font-size:12px; font-weight: 500;
  letter-spacing: 0.1em; color: var(--red-deep); margin-bottom: 5px;
}
.etat-cote__delta {
  font-family: var(--font-mono); font-size: 26px; font-weight: 500;
  color: #791F1F; line-height: 1.1; letter-spacing: -0.01em; margin-top: 2px;
}
.etat-cote__cause {
  font-family: var(--font-body); font-size: 12.5px; color: #3a3a3a;
  line-height: 1.5; margin-top: 4px;
}
.etat-cote__src {
  font-family: var(--font-body); font-size: 12.5px; font-style: italic;
  color: #5c5b57; margin-top: 5px;
}



/* Repères datés des pages d'ère (v0.1 : trois dates canoniques par page) */
.era-reperes { display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 26px; max-width:680px; }
.era-repere { background:var(--bg2); border:1px solid var(--border-light); border-radius:10px; padding:12px 16px; flex:1 1 180px; min-width:160px; }
.era-repere__date { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--red-deep); letter-spacing:0.04em; }
.era-repere__txt { font-size:13px; color:var(--text2); line-height:1.5; margin-top:4px; }
.era-note { font-size:12.5px; color:#8a8983; font-style:italic; max-width:680px; line-height:1.6; }

/* Formulaire Discussion (statique v0.1, style calqué sur la charte) */
/* Carte auteur de la page Discussion : photo ronde et deux lignes, alignee sur
   le formulaire (largeur 560, cale a gauche), separee du texte par un filet. */
/* ─── Page dédiée à un étage de la pyramide (premier tiroir, 15 sept. 2026) ───
   La figure de rappel est la Pyramide elle-même, réduite : mêmes classes .pf et
   .pf-N que la page des quatre révolutions, donc mêmes proportions. Les six
   étages éteints gardent assez de contraste pour se compter, seul le courant est
   en couleur pleine. Aucun écouteur n'est posé dessus : elle ne bouge pas. */
/* La figure est un lien vers la pyramide. Elle ne se casse pas sur place : les
   étages n'ont ni data-l ni écouteur, seul le lien qui les entoure agit. */
.ap-fig-lien { display:block; text-decoration:none; margin:4px auto 0; max-width:420px; }
.ap-fig { display:flex; flex-direction:column; align-items:center; gap:2px; user-select:none; -webkit-user-select:none; }
.ap-fig .pf { min-height:0; padding:4px 7px 5px; cursor:pointer; }
.ap-fig .pf b { font-size:12px; line-height:1.25; }
/* Écart de largeur resserré par rapport à la grande pyramide : les noms les plus
   longs doivent tenir sur une ligne dans les étages étroits du haut, sans être
   coupés. La pente reste visible, la figure reste une pyramide. Ces largeurs ne
   valent que dans .ap-fig, la pyramide de la page IA n'est pas touchée. */
.ap-fig .pf-0 { width:63%;   clip-path:polygon(4.8% 0, 95.2% 0, 100% 100%, 0 100%); }
.ap-fig .pf-1 { width:69%;   clip-path:polygon(4.4% 0, 95.6% 0, 100% 100%, 0 100%); }
.ap-fig .pf-2 { width:75%;   clip-path:polygon(4.0% 0, 96.0% 0, 100% 100%, 0 100%); }
.ap-fig .pf-3 { width:81%;   clip-path:polygon(3.7% 0, 96.3% 0, 100% 100%, 0 100%); }
.ap-fig .pf-4 { width:87%;   clip-path:polygon(3.5% 0, 96.5% 0, 100% 100%, 0 100%); }
.ap-fig .pf-5 { width:93.5%; clip-path:polygon(3.5% 0, 96.5% 0, 100% 100%, 0 100%); }
.ap-fig .pf-6 { width:100%;  clip-path:polygon(3.3% 0, 96.7% 0, 100% 100%, 0 100%); }
/* Éteints : fond gris clair, texte gris moyen. Lisible sans être criard, et
   assez contrasté pour qu'on compte les sept étages. */
.ap-fig .pf.apf--eteint { background:#e7e5df; }
.ap-fig .pf.apf--eteint b { color:#5f5e58; font-weight:400; }
/* L'étiquette est en bordeaux : c'est elle qui dit que la figure répond au
   doigt, sans consigne ni infobulle. */
.ap-fig__leg { display:block; font-size:12.5px; line-height:1.45; color:var(--red); text-align:center; max-width:34ch; margin:12px auto 26px; }
.ap-titre { font-family:var(--font-title); font-size:30px; line-height:1.15; font-weight:500; color:var(--text); margin:0 0 8px; }
.ap-nature { display:inline-block; font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:#fff; border-radius:5px; padding:3px 9px; margin-bottom:8px; }
.ap-acteurs { font-size:13.5px; color:var(--text3); margin-bottom:16px; }
.ap-chapo { font-size:15.5px; line-height:1.6; color:var(--text2); margin:0 0 6px; max-width:62ch; }
.ap-sect { margin-top:30px; padding-top:22px; border-top:1px solid var(--border); scroll-margin-top:110px; }
.ap-sect__t { font-family:var(--font-title); font-size:22px; line-height:1.25; font-weight:500; color:var(--text); margin:0 0 14px; max-width:40ch; }
.ap-sect p { font-size:15px; line-height:1.65; color:var(--text2); margin:0 0 13px; max-width:66ch; }
/* Chapô du dossier : la démonstration entière avant de la dérouler. Qui s'arrête
   là n'a rien perdu. */
.ap-sect .ap-lede { font-size:16px; line-height:1.6; color:var(--text); border-left:4px solid var(--red); padding-left:14px; margin:0 0 26px; }
/* Intertitres : ils se lisent seuls et, mis bout à bout, forment le résumé du
   dossier. D'où leur longueur, assumée. */
.ap-sect h3 { font-family:var(--font-title); font-size:18px; line-height:1.3; font-weight:500; color:var(--text); margin:30px 0 11px; max-width:52ch; }
.ap-sect h3:first-of-type { margin-top:0; }
/* Phrases de bascule : celles qui portent la démonstration. Sorties du flux du
   paragraphe, sinon elles s'y noient. */
.ap-sect .ap-bascule { font-size:16px; line-height:1.55; color:var(--text); font-weight:500; margin:16px 0 13px; }
@media (max-width:700px){ .ap-sect h3 { font-size:17px; } .ap-sect .ap-lede { font-size:15.5px; } }
.ap-retour { display:inline-block; margin:30px 0 8px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--red); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px; }
@media (max-width:700px){
  .ap-titre { font-size:25px; }
  .ap-sect__t { font-size:19px; }
  .ap-sect p { font-size:14.5px; }
}

/* Porte vers la page d'une assise, au bas de sa carte. N'existe que pour les
   assises qui ont une page : les autres cartes se terminent sur leur cas. */
.pyr-porte { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); font-family:var(--font-body); font-size:14.5px; font-weight:500; line-height:1.3; color:var(--red); text-decoration:none; }
.pyr-porte__fl { font-size:16px; line-height:1; flex-shrink:0; }

/* Section longue dans une carte d'assise : un titre et des paragraphes sous le
   cas daté, séparés par un filet. Réservé aux assises qui portent un dossier. */
.pyr-sect__t { font-family:var(--font-title); font-size:16px; line-height:1.3; color:var(--text); margin:16px 0 8px; padding-top:14px; border-top:1px solid var(--border); }
.pyr-card .pyr-sect__t + p, .pyr-card .pyr-sect__t ~ p { font-size:13.5px; line-height:1.55; color:var(--text2); margin:0 0 9px; }
.pyr-reserve { font-family:var(--font-mono); font-size:12px; color:var(--text3); }
.disc-auteur { display:flex; align-items:center; gap:16px; max-width:560px; margin:28px 0 6px; }
.disc-form { max-width:560px; margin-top:18px; }
.disc-form label { display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text3); margin:14px 0 5px; }
.disc-form input, .disc-form textarea { width:100%; border:1px solid var(--border); border-radius:8px; background:var(--bg-card); padding:10px 12px; font-family:var(--font-body); font-size:14px; color:var(--text); }
.disc-form input:focus, .disc-form textarea:focus { outline:none; border-color:var(--red); }
.disc-form button { margin-top:16px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; background:var(--red); color:#fff; border:none; border-radius:8px; padding:11px 22px; cursor:pointer; }
.disc-form button:hover { background:var(--red-dim); }

/* ═══════════════════════════════════════════
   OUTILS DE PIED DE PAGE (partage, installation)
   Ajoutés avec le socle technique, 12 septembre 2026.
   ═══════════════════════════════════════════ */
.site-footer__tools { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:18px; flex-wrap:wrap; }
.share-btn { background:none; border:0; padding:6px; cursor:pointer; color:var(--text2); -webkit-tap-highlight-color:transparent; line-height:0; }
.share-btn:hover, .share-btn:active { color:var(--red); }
.share-fb { font-family:var(--font-mono); font-size:12px; color:var(--text2); letter-spacing:0.04em; }
.site-install__link { font-family:var(--font-mono); font-size:12px; color:var(--text2); letter-spacing:0.04em; text-decoration:none; border-bottom:1px dotted var(--text2); }
.site-install__link:hover { color:var(--red); border-bottom-color:var(--red); }
.site-install__ios { font-family:var(--font-mono); font-size:12px; color:var(--text2); letter-spacing:0.03em; font-style:italic; }

/* ═══════════════════════════════════════════
   DISPOSITIFS VISUELS (remplacent les accordéons, 12 septembre 2026)
   Règle : le texte ne vit jamais dans un SVG. Un viewBox réduit sur mobile
   divise les polices d'autant et le texte SVG ne se coupe pas, il déborde.
   Le SVG ne porte que des tracés. Aucune police sous 12px.
   ═══════════════════════════════════════════ */
.ei-kicker { font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text2); margin-bottom:10px; }
.dz-hint { font-family:var(--font-mono); font-size:12px; color:var(--text2); letter-spacing:0.02em; margin:0 0 14px; }
.dz-hint b { color:var(--red); font-weight:500; }
.dz-cloture { font-size:15px; line-height:1.6; color:var(--text2); margin-top:18px; padding-left:14px; border-left:2px solid rgba(121,31,31,0.3); max-width:34em; }

/* Tiroir : s'ouvre sous l'élément touché, jamais en bas de page */
.dz-drawer { display:none; padding:0 14px 18px; background:rgba(121,31,31,0.06); border-bottom:1px solid rgba(0,0,0,0.12); }
.dz-drawer.open { display:block; }
.dz-drawer h4 { font-family:var(--font-title); font-size:18px; font-weight:500; line-height:1.3; padding-top:14px; margin-bottom:7px; }
.dz-drawer p { font-size:15px; line-height:1.6; }
.dz-src { display:block; font-family:var(--font-mono); font-size:12px; color:var(--text2); margin-top:10px; }

/* Commutateur commun */
.dz-tog { display:flex; border:1px solid rgba(0,0,0,0.12); margin-bottom:16px; background:#fff; }
.dz-tog button { flex:1; font-family:var(--font-mono); font-size:12px; padding:12px 8px; background:none; border:0; cursor:pointer; color:var(--text2); line-height:1.3; -webkit-tap-highlight-color:transparent; }
.dz-tog button.on { background:var(--red); color:#fff; }

/* Dispositif conditions */
.cond-grid { border:1px solid rgba(0,0,0,0.12); background:#fff; }
.cond-head, .cond-row, .cond-tot { display:grid; grid-template-columns:1fr 62px 62px; gap:6px; }
.cond-head { align-items:end; padding:12px 14px 8px; border-bottom:1px solid rgba(0,0,0,0.12); }
.cond-head span { font-family:var(--font-mono); font-size:12px; color:var(--text2); text-align:center; line-height:1.3; }
.cond-head span:first-child { text-align:left; }
.cond-row { align-items:center; padding:15px 14px; border-bottom:1px solid rgba(0,0,0,0.12); cursor:pointer; transition:background 0.15s; }
.cond-row:active, .cond-row.on { background:rgba(121,31,31,0.06); }
.cond-lbl { font-size:15px; line-height:1.35; padding-right:8px; }
.cond-lbl em { font-style:normal; color:var(--text2); font-size:12px; display:block; margin-top:2px; }
.pin { width:15px; height:15px; border-radius:50%; margin:0 auto; border:1.5px solid #b4b3ae; background:#fff; }
.pin.full { background:var(--red); border-color:var(--red); }
.cond-tot { padding:12px 14px; background:#f4f2ee; }
.cond-tot span { font-family:var(--font-mono); font-size:17px; color:var(--red); text-align:center; font-weight:500; }
.cond-tot span:first-child { font-size:12px; color:var(--text2); text-align:left; align-self:center; }

/* Dispositif atelier */
.shop { border:1px solid rgba(0,0,0,0.12); background:#fff; padding:14px; overflow:hidden; }
.shop svg { display:block; width:100%; height:auto; }
.shop-leg { font-size:14.5px; color:var(--text2); line-height:1.55; padding:12px 2px 0; min-height:66px; }
#atAxe { transition:opacity 0.4s; }
.mach { transition:all 0.5s cubic-bezier(.4,0,.2,1); }

/* Dispositif flux */
.flow { border:1px solid rgba(0,0,0,0.12); background:#fff; }
.step { padding:14px; border-bottom:1px solid rgba(0,0,0,0.12); display:flex; align-items:center; gap:12px; transition:opacity 0.45s; }
.step:last-child { border-bottom:0; }
.step-n { font-family:var(--font-mono); font-size:12px; color:var(--red); flex:none; width:22px; }
.step-t { font-size:15px; line-height:1.35; }
.step-t em { font-style:normal; display:block; font-family:var(--font-mono); font-size:12px; color:var(--text2); margin-top:3px; }
.step.dropped { opacity:0.3; }
.step.dropped .step-t { text-decoration:line-through; text-decoration-color:var(--red); }
.counters { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.counters div { border:1px solid rgba(0,0,0,0.12); background:#fff; padding:11px 12px; }
.counters .k { font-family:var(--font-mono); font-size:12px; color:var(--text2); letter-spacing:0.04em; text-transform:uppercase; display:block; }
.counters .v { font-family:var(--font-mono); font-size:22px; color:var(--red); font-weight:500; display:block; margin-top:4px; line-height:1.15; }
.counters .v s { color:var(--text2); font-size:13px; font-weight:400; display:block; line-height:1.4; }

/* Conséquence chiffrée, en tête du tiroir */
.pyr-eff { font-size:15.5px; line-height:1.6; color:var(--text); margin-bottom:12px; padding-left:12px; border-left:2px solid var(--red); }
/* Précédent réel, sourcé */
.pyr-cas { font-size:14.5px; line-height:1.6; color:var(--text2); margin-top:12px; padding-top:11px; border-top:1px solid rgba(121,31,31,0.2); }

@media (min-width:620px) {
  .cond-head, .cond-row, .cond-tot { grid-template-columns:1fr 120px 120px; }
}

/* Pied de page : les travaux cités, sobrement. Le détail des sources vit
   dans le texte, à l'endroit où l'affirmation engage. */
.site-footer__ref { font-style:italic; opacity:0.85; }

/* Verrous de la page Seuils : cinq blocs courts, plutôt qu'un paragraphe. */
.verrous { border:1px solid rgba(0,0,0,0.12); background:#fff; margin-top:18px; }
.verrou { display:flex; align-items:flex-start; gap:11px; padding:13px 14px; border-bottom:1px solid rgba(0,0,0,0.12); }
.verrou:last-child { border-bottom:0; }
.verrou-n { font-family:var(--font-mono); font-size:12px; color:var(--red); flex:none; width:16px; padding-top:2px; }
.verrou-t { flex:1; font-size:15.5px; line-height:1.3; font-family:var(--font-title); }
.verrou-t em { font-style:normal; display:block; font-family:var(--font-body); font-size:13.5px; color:var(--text2); margin-top:3px; line-height:1.45; }

/* ═══════════════════════════════════════════
   LIGNE DE TEMPS (remplace la liste de repères datés)
   La position d'un jalon encode sa date. Un vide trop grand se comprime,
   et la compression se déclare : la durée sautée reste écrite.
   Un seul texte affiché à la fois, sous la ligne.
   ═══════════════════════════════════════════ */
.tline { margin:6px 0 4px; }
.tline-rail { position:relative; height:74px; margin:0 16px 4px; }
.tline-rail::before { content:''; position:absolute; left:0; right:0; top:36px; height:1px; background:rgba(121,31,31,0.3); }
.tline-dot { position:absolute; top:26px; width:21px; height:21px; margin-left:-10.5px; padding:0;
  background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.tline-dot::after { content:''; position:absolute; left:6px; top:6px; width:9px; height:9px; border-radius:50%;
  background:var(--bg); border:1.5px solid var(--red); transition:all 0.18s; }
.tline-dot.on::after { background:var(--red); width:13px; height:13px; left:4px; top:4px; }
.tline-y { position:absolute; left:50%; transform:translateX(-50%); bottom:26px; white-space:nowrap;
  font-family:var(--font-mono); font-size:12px; color:var(--text2); letter-spacing:0.02em; }
.tline-y.low { bottom:auto; top:26px; }
.tline-dot.on .tline-y { color:var(--red); }
/* Césure : le vide sauté, avec sa durée écrite */
.tline-break { position:absolute; top:30px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; }
.tline-break::before { content:''; width:14px; height:13px; border-left:1px dashed rgba(121,31,31,0.45); border-right:1px dashed rgba(121,31,31,0.45); background:var(--bg); }
.tline-break em { font-style:normal; font-family:var(--font-mono); font-size:12px; color:var(--text2); margin-top:3px; white-space:nowrap; }
/* Le texte du jalon courant */
.tline-panel { border:1px solid rgba(0,0,0,0.12); background:#fff; padding:14px; }
.tline-date { font-family:var(--font-mono); font-size:12px; color:var(--red); letter-spacing:0.05em; text-transform:uppercase; margin-bottom:7px; }
.tline-txt { font-size:15px; line-height:1.6; }






/* ═══════════════════════════════════════════
   ACCUEIL, maquette validée le 12 septembre 2026
   Titre rouge, étiquette grise entre deux traits, sommaire à cinq entrées,
   rang en petites capitales rouges, pastille alignée optiquement dans le
   titre. Pied de page à la typographie des autres sites.
   ═══════════════════════════════════════════ */
.home-hero { padding:26px 20px 24px; text-align:center; max-width:none; margin:0; }
/* Titre d'accueil : italique noir comme la famille de sites, et le rouge ne
   tombe que sur le chiffre, qui est le sujet. Il se retrouve dans l'icône,
   dans les rangs du sommaire et dans la pastille du présent. */
.home-hero__tagline { font-family:var(--font-title); font-size:28px; font-style:italic; font-weight:400;
  color:var(--text); line-height:1.14; letter-spacing:-0.012em; margin:0; }
.home-hero__tagline .hh-num { color:var(--red); }
@media (min-width:620px) { .home-hero__tagline { font-size:36px; } }
.home-hero__tagline sup { font-size:0.48em; vertical-align:0.6em; font-style:normal; }
/* Sous-titre d'accueil : une phrase qui déclare l'angle du site, comme sur le
   Gold Signal et sur la dette, et non plus une étiquette entre deux filets.
   Le rouge reste réservé au chiffre du titre, aux rangs du sommaire et à la
   pastille du présent : une phrase d'angle n'est pas un signal, elle se lit
   dans la couleur du texte secondaire. Décidé le 19 septembre 2026. */
.home-hero__sub { font-family:var(--font-body); font-size:14.5px; font-weight:300; line-height:1.45;
  color:var(--text2); margin:14px auto 0; max-width:30em; }

.nav-menu { padding:2px 18px 8px; border-bottom:0; background:transparent; }
.tl-scale { position:relative; padding-left:34px; max-width:520px; margin:0 auto; }
.tl-scale__line { position:absolute; left:4px; top:24px; bottom:15px; width:1px;
  background:linear-gradient(to bottom, rgba(121,31,31,0.12), rgba(121,31,31,0.4)); }
.tl-scale__arrow { position:absolute; left:0; bottom:4px; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:7px solid rgba(121,31,31,0.45); }

.tl-scale__item { display:flex; align-items:baseline; gap:10px; padding:13px 0; text-decoration:none; color:inherit; position:relative; }
.tl-scale__content { flex:1; min-width:0; }
.tl-scale__kick { display:block; font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--red); margin-bottom:4px; }
.tl-scale__kick sup { font-size:0.7em; vertical-align:0.35em; letter-spacing:0; }
.tl-scale__label { display:block; font-family:var(--font-title); font-size:16.5px; font-weight:400; line-height:1.18; color:var(--text); text-transform:none; letter-spacing:0; opacity:1; }
.tl-scale__desc { display:block; font-family:var(--font-body); font-size:13px; color:var(--text); opacity:0.72; line-height:1.35; margin-top:4px; }
.tl-scale__dot { display:inline-block; width:9px; height:9px; border-radius:50%; box-sizing:border-box;
  background:var(--bg); border:1.5px solid var(--red); vertical-align:middle;
  margin-left:-34px; margin-right:25px; position:relative; left:auto; top:auto; z-index:1; }
.tl-scale__dot--now { background:var(--red); }
.tl-scale__dot--dashed { border-style:dashed; border-color:rgba(121,31,31,0.55); }
/* Dans le rang, la pastille se cale sur une ligne de 12px : on la remonte d'un rien */
.tl-scale__kick .tl-scale__dot { vertical-align:-0.05em; }
.tl-scale__item:active .tl-scale__label { color:var(--red); }

.site-footer { margin-top:14px; padding:14px 20px 16px; border-top:0.5px solid rgba(0,0,0,0.08); display:flex; justify-content:center; }
.site-footer__inner { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.site-footer__name { font-family:var(--font-body); font-size:12px; color:#8a8983; font-weight:500; letter-spacing:0.5px; }
.site-footer__date { font-family:var(--font-mono); font-size:12px; color:#8a8983; margin-top:1px; }
.site-footer__tools { margin-top:2px; }

/* ═══════════════════════════════════════════
   PYRAMIDE (refonte du 12 septembre 2026, contenu du cockpit)
   Le texte vit dans les assises, en HTML, à taille réelle. Deux axes latéraux
   portent le renversement. Les couleurs sont la légende : une par nature
   d'acteur. Toucher une assise la fissure et fait tomber ce qu'elle portait.
   ═══════════════════════════════════════════ */
/* Le bloc entier colle sous la barre : figure, légende, natures. La note est dehors. */
.pyr-zone { position:sticky; top:var(--nav-h, 90px); z-index:90; background:var(--bg); }
.pyr-wrap { display:grid; grid-template-columns:22px 1fr 22px; gap:6px; align-items:stretch; padding:6px 0 2px; }
.pyr-axe { position:relative; }
.pyr-axe span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(180deg); writing-mode:vertical-rl;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; white-space:nowrap; text-transform:uppercase;
  background:var(--bg); padding:10px 0; z-index:1; }
.pyr-axe i { position:absolute; left:50%; width:1px; top:14px; bottom:14px; margin-left:-0.5px; background:currentColor; opacity:0.35; }
.pyr-axe i::after { content:''; position:absolute; left:-3.5px; border:4px solid transparent; }
.pyr-axe--val { color:#6b5b8a; }
.pyr-axe--val i::after { top:-2px; border-bottom:7px solid currentColor; border-top:0; }
.pyr-axe--pou { color:var(--red); }
.pyr-axe--pou i::after { bottom:-2px; border-top:7px solid currentColor; border-bottom:0; }

.pyr-fig { display:flex; flex-direction:column; align-items:center; gap:2px; overflow:hidden; position:relative; }
body { overflow-x:hidden; }
.pyr-fig.broken { cursor:pointer; }
.pf { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:5px 8px 6px; cursor:pointer; color:#fff; box-sizing:border-box; touch-action:pan-y; user-select:none; -webkit-user-select:none;
  transition:transform 0.5s cubic-bezier(.34,.01,.3,1), opacity 0.5s; }
.pf b { font-family:var(--font-body); font-size:13.5px; font-weight:500; line-height:1.2; }
.pf em { display:block; font-style:normal; font-family:var(--font-body); font-size:12px; line-height:1.2; margin-top:1px; opacity:0.88; }
.pf i { display:none; font-style:normal; font-family:var(--font-mono); font-size:12px; margin-top:2px; opacity:0.72; }
.pf.cracked { outline:2px solid var(--red); outline-offset:1px; }
.pf.fallen { opacity:0.22; }
.pf.fallen.left  { transform:translate(-22%, 12px) rotate(-6deg); }
.pf.fallen.right { transform:translate(22%, 12px) rotate(6deg); }

/* Natures d'acteur : teintes sobres, distinguables, le rouge du site pour les régulateurs */
.pf--com, i.pf--com { background:#6b5b8a; }
.pf--sov, i.pf--sov { background:#2f6f7a; }
.pf--tam, i.pf--tam { background:#a8642a; }
.pf--phy, i.pf--phy { background:#3f7a55; }
.pf--reg, i.pf--reg { background:var(--red); }

/* Largeurs et biseaux : mobile élargi (sommet 52 %), grand écran étroit (34 %) */
.pf-0 { width:58%; clip-path:polygon(9% 0, 91% 0, 100% 100%, 0 100%); }
.pf-1 { width:65%; clip-path:polygon(6.7% 0, 93.3% 0, 100% 100%, 0 100%); }
.pf-2 { width:72%; clip-path:polygon(5.9% 0, 94.1% 0, 100% 100%, 0 100%); }
.pf-3 { width:79%; clip-path:polygon(5.3% 0, 94.7% 0, 100% 100%, 0 100%); }
.pf-4 { width:86%; clip-path:polygon(4.8% 0, 95.2% 0, 100% 100%, 0 100%); }
.pf-5 { width:93%; clip-path:polygon(4.3% 0, 95.7% 0, 100% 100%, 0 100%); }
.pf-6 { width:100%; clip-path:polygon(4% 0, 96% 0, 100% 100%, 0 100%); }
@media (min-width:620px) {
  .pf i { display:block; }
  .pf { padding:7px 8px; }
  .pyr-wrap { grid-template-columns:28px 1fr 28px; }
  .pyr-axe span { font-size:12px; }
  .pf b { font-size:15px; }
  .pf-0 { width:34%; clip-path:polygon(9% 0, 91% 0, 100% 100%, 0 100%); }
  .pf-1 { width:45%; clip-path:polygon(12.2% 0, 87.8% 0, 100% 100%, 0 100%); }
  .pf-2 { width:56%; clip-path:polygon(9.8% 0, 90.2% 0, 100% 100%, 0 100%); }
  .pf-3 { width:67%; clip-path:polygon(8.2% 0, 91.8% 0, 100% 100%, 0 100%); }
  .pf-4 { width:78%; clip-path:polygon(7.1% 0, 92.9% 0, 100% 100%, 0 100%); }
  .pf-5 { width:89%; clip-path:polygon(6.2% 0, 93.8% 0, 100% 100%, 0 100%); }
  .pf-6 { width:100%; clip-path:polygon(5.5% 0, 94.5% 0, 100% 100%, 0 100%); }
}

.pyr-fig-leg { font-family:var(--font-mono); font-size:12px; color:var(--red); text-align:center; padding:0 14px; line-height:1.45; }
.pyr-fig-leg:not(:empty) { padding:8px 14px 2px; }
.pyr-natures { display:flex; justify-content:flex-start; flex-wrap:nowrap; gap:0 12px; padding:6px 14px 8px; margin:0 -18px;
  font-family:var(--font-mono); font-size:12px; color:var(--text2); letter-spacing:0.01em;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.pyr-natures::-webkit-scrollbar { display:none; }
.pyr-natures > span.pyr-nat { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; flex:none; cursor:pointer; border-bottom:1px dotted rgba(0,0,0,0.3); padding-bottom:1px; }
.pyr-natures > span.pyr-nat:first-child { margin-left:auto; }
.pyr-natures > span.pyr-nat:last-child { margin-right:auto; }
.pyr-natures i { width:9px; height:9px; border-radius:2px; display:inline-block; flex:none; }
/* La carte se pose sur la figure, dans la place libérée par les assises tombées.
   La pyramide cassée reste visible en transparence derrière. */
.pyr-card { display:none; position:absolute; left:4%; right:4%; overflow:auto;
  background:rgba(250,249,246,0.80); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  border:1px solid rgba(0,0,0,0.12); padding:12px 14px 14px; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,0.12); -webkit-overflow-scrolling:touch; }
/* La barre interne de la conséquence prend la couleur de l'assise touchée */
/* Titre et sous-titre de la carte à la couleur de l'assise, le sous-titre un rien plus appuyé */
.pyr-card--com { --c:#6b5b8a; } .pyr-card--sov { --c:#2f6f7a; } .pyr-card--tam { --c:#a8642a; }
.pyr-card--phy { --c:#3f7a55; } .pyr-card--reg { --c:var(--red); }
.pyr-card h4 { color:var(--c, var(--red)); }
.pyr-card__nat { display:block; font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--c, var(--red)); opacity:0.8; margin:2px 0 10px; line-height:1.4; }
.pyr-card.open { display:block; }
.pyr-card h4 { font-family:var(--font-title); font-size:20px; font-weight:500; line-height:1.25; margin-bottom:2px; }
/* Carte de légende : le carré de la couleur devant le titre, calé sur sa première ligne */
.pyr-card__sq { width:13px; height:13px; border-radius:2px; background:var(--c, var(--red)); display:inline-block; vertical-align:middle; margin:-3px 9px 0 0; }
.pyr-card .pyr-txt { font-size:14.5px; line-height:1.55; color:var(--text); margin-top:8px; }
/* Le trait prend la couleur de l'assise : une seule règle, pour qu'aucune autre ne l'écrase */
.pyr-card .pyr-eff { font-size:14.5px; line-height:1.55; padding-left:11px; border-left:5px solid var(--c, var(--red)); margin-bottom:9px; color:var(--text); }
.pyr-card p { font-size:13.5px; line-height:1.55; color:var(--text2); }
.pyr-card .pyr-cas { margin-top:9px; padding-top:9px; border-top:1px solid rgba(121,31,31,0.2); }

/* ═══════════════════════════════════════════
   PYRAMIDE SUR GRAND ÉCRAN (à partir de 900 px)
   Deux colonnes : la pyramide à gauche, la carte à droite, sur toute la
   hauteur de la figure. Au repos la seconde colonne n'existe pas et la
   pyramide est centrée ; à l'ouverture elle glisse à gauche.
   Rien ici ne s'applique au téléphone.
   ═══════════════════════════════════════════ */
@media (min-width:900px) {
  .pyr-zone { display:grid; grid-template-columns:1fr 0fr; column-gap:0; align-items:start;
    transition:grid-template-columns 0.42s ease, column-gap 0.42s ease; }
  .pyr-zone.open { grid-template-columns:1fr 1fr; column-gap:36px; }
  .pyr-zone > .pyr-wrap { grid-column:1; grid-row:1; }
  .pyr-zone > .pyr-fig-leg { grid-column:1; grid-row:2; }
  .pyr-zone > .pyr-natures { grid-column:1; grid-row:3; margin:0; }
  .pyr-zone > .pyr-card { grid-column:2; grid-row:1; position:static; align-self:stretch;
    height:auto; max-height:none; margin:8px 0 4px; overflow:auto; min-width:0; }
  .pyr-zone > .pyr-card h4 { font-size:22px; }
  .pyr-zone > .pyr-card .pyr-eff, .pyr-zone > .pyr-card .pyr-txt { font-size:15.5px; }
  .pyr-zone > .pyr-card p { font-size:14.5px; }
}

/* En-tête des pages d'ère, recalibré le 12 septembre 2026 (validé sur aperçu) */
.nav-bar__line1 { padding:0; }
.era-intro { margin:14px 0 16px; }
.ei-kicker { font-size:12px; letter-spacing:0.08em; color:var(--text3); margin-bottom:8px; }
.ei-kicker sup { font-size:0.72em; vertical-align:0.35em; letter-spacing:0; }
.era-intro .ei-title { font-size:20px; line-height:1.32; margin-bottom:8px; }
.era-intro .ei-desc { font-size:14.5px; line-height:1.55; }

/* ═══════════════════════════════════════════
   ARTICLE DE FOND (page IA), replié par défaut
   « Lire la suite » déplie onze chapitres entre l'intro et la pyramide. La
   pyramide n'est pas modifiée : elle descend simplement plus bas dans la page.
   ═══════════════════════════════════════════ */
.art-zone { margin:0 0 18px; }
.art-more { display:inline-flex; align-items:center; gap:7px; background:none; border:0; padding:2px 0 0;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--red); cursor:pointer; }
.art-more::after { content:''; width:7px; height:7px; border-right:1.5px solid var(--red); border-bottom:1.5px solid var(--red);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform 0.28s; }
.art-zone.open .art-more::after { transform:rotate(-135deg) translate(-1px,-1px); }
.art-liste { max-height:0; overflow:hidden; transition:max-height 0.45s ease; margin-top:0; }
.art-zone.open .art-liste { max-height:none; margin-top:14px; }

/* Marge de défilement : un chapitre ou une boîte amené à l'écran se cale sous
   la barre de navigation collante, jamais dessous. Même valeur que le moteur. */
.ch, .ttbox, .gal { scroll-margin-top: calc(var(--nav-h, 90px) + 8px); }

/* Galerie de scènes : la couche la plus profonde d'un chapitre. Une rangée de
   noms, une scène lue à la fois. Le cercle devant chaque nom est celui des
   jalons de la frise, vide quand la scène est fermée, plein quand elle est
   ouverte : le lecteur l'a déjà appris ailleurs, aucune consigne n'est écrite. */
.gal { margin:14px 0 8px; border-top:1px solid rgba(0,0,0,0.08); }
.gal__lbl { font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text3); margin-top:12px; }
.gal__row { display:flex; flex-wrap:wrap; gap:0 18px; padding:9px 0 0; }
.gal__b { font:inherit; font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; color:var(--red); opacity:0.7;
  background:none; border:0; padding:8px 0; cursor:pointer; border-bottom:1.5px solid transparent; }
.gal__b.on { opacity:1; border-bottom-color:var(--red); }
.gal__b:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
.gal__b::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; border:1.5px solid var(--red);
  margin:0 7px 2px 0; vertical-align:middle; background:transparent; }
.gal__b.on::before { background:var(--red); }
.gal__s { padding:8px 0 4px; color:var(--text2); }
.gal__s p { font-size:14px; line-height:1.6; margin:0; }
.ch { border-top:1px solid rgba(0,0,0,0.08); }
.ch:last-child { border-bottom:1px solid rgba(0,0,0,0.08); }
.ch__t { display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left; background:none; border:0;
  padding:13px 0; cursor:pointer; font:inherit; color:inherit; }
.ch__n { font-family:var(--font-mono); font-size:12px; color:var(--red); opacity:0.75; flex:none; padding-top:3px; min-width:15px; }
.ch__l { font-family:var(--font-title); font-size:16.5px; line-height:1.26; flex:1; }
.ch__c { flex:none; width:10px; height:10px; margin-top:5px; border-right:1.5px solid var(--red); border-bottom:1.5px solid var(--red);
  transform:rotate(45deg); transition:transform 0.28s; opacity:0.55; }
.ch.open .ch__c { transform:rotate(-135deg); }
.ch.open .ch__l { color:var(--red); }
.ch__b { max-height:0; overflow:hidden; transition:max-height 0.38s ease; }
.ch__i { padding:0 0 16px 25px; }
.ch__i p { font-size:14.5px; line-height:1.62; margin-bottom:11px; }
.ch__i p:last-child { margin-bottom:0; }

/* Source : typographie distincte, elle balise le texte et fonde sa crédibilité */
.src { font-family:var(--font-mono); font-size:12px; color:var(--red); opacity:0.85; }
.src::before { content:"["; }
.src::after { content:"]"; }

/* Terme expliqué : la définition s'ouvre sous le paragraphe, le texte ne bouge pas */
.tt-mot { border-bottom:1px dotted rgba(121,31,31,0.55); cursor:pointer; }
.tt-mot.on { background:rgba(121,31,31,0.07); }
.ttbox { margin:10px 0 12px; padding:11px 13px; background:#fff; border:1px solid rgba(0,0,0,0.12);
  border-left:4px solid var(--red); font-size:13.5px; line-height:1.55; color:var(--text2); }
.ttbox b { display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--red); margin-bottom:5px; font-weight:400; }