/* ============================================
   L'HISTOIRE DE LA DETTE FRANÇAISE
   Charte commune (matrice Gold Signal), accent ROUGE
   ============================================ */

:root {
  --bg: #faf9f6;
  --bg-card: #ffffff;
  --bg2: #f4f2ee;
  --bg3: #efece6;
  --text: #1a1a1a;
  --text2: #4a4a4a;
  --text3: #888;
  --border: #ddd;
  --border-light: #eee;
  --red: #C62828;
  --red-dim: #a82020;
  --red-bg: rgba(198,40,40,0.08);
  --red-deep: #8c1c1c;
  --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); }
.nav-bar__line1 { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px 0; min-height:36px; }
.nav-bar__brand { display:flex; align-items:baseline; gap:0; text-decoration:none; flex-shrink:0; cursor:pointer; background:none; border:none; }
.nav-bar__name { font-family:var(--font-title); font-size:19px; font-weight:500; color:var(--red-deep); letter-spacing:0.01em; line-height:1; 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:11px; 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:10px; 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 */
.home-hero { padding:64px 28px 16px; text-align:center; max-width:760px; margin:0 auto; }
.home-hero__tagline { font-family:var(--font-title); font-size:30px; font-weight:400; color:#1a1a1a; line-height:1.35; font-style:italic; margin:0 auto 18px; max-width:620px; }
.home-hero__rule { display:flex; align-items:center; justify-content:center; gap:14px; margin:0 auto 22px; }
.home-hero__rule-line { flex:0 0 72px; height:0.5px; background:var(--red); opacity:0.35; }
.home-hero__rule-label { font-family:var(--font-mono); font-size:10.5px; color:var(--red-deep); letter-spacing:0.14em; text-transform:uppercase; white-space:nowrap; }
.home-hero__sub { font-family:var(--font-body); font-size:15px; font-weight:400; color:#555; line-height:1.5; font-style:italic; max-width:520px; margin:0 auto; }

/* SOMMAIRE VERTICAL */
.nav-menu { padding:28px 28px 12px; background:var(--bg); }
.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(198,40,40,0.08), rgba(198,40,40,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(198,40,40,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(198,40,40,0.25); z-index:1; }
.nav-tl__item:nth-child(3) .nav-tl__dot { border-color:rgba(198,40,40,0.3); }
.nav-tl__dot--dashed { border-style:dashed; border-color:rgba(198,40,40,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:10px; color:#ccc; flex-shrink:0; }
/* Un seul filet entre les entrees : il vient de .nav-tl__item, le separateur
   en ajoutait un second. */

/* 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; }
.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:9.5px; 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(198,40,40,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: 10.5px;
  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: 11px;
  line-height: 1;
}
.meta-details[open] summary::before {
  transform: rotate(90deg);
}
.meta-precision {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 11.5px;
  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: 11px;
  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; }

/* 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:11px; color:#8a8983; font-weight:500; letter-spacing:0.5px; }
.site-footer-sig-date, .site-footer__date { font-family:var(--font-mono); font-size:10px; 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:10px; 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:10.5px; 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__brand { display: inline-flex; align-items: center; }
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:16px; }
  /* 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:11px; flex-shrink:0; }
  .nav-bar__right { display:none; }
  .home-hero { padding:40px 16px 16px; }
  .home-hero__tagline { font-size:20px; }
  .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:10.5px; 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:11px; 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:10px; color:var(--text3); margin-top:5px; }
.ticket-head-covers { font-size:9.5px; letter-spacing:0.08em; color:var(--text3); margin-top:8px; }
.ticket-mention { font-size:9px; 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(198,40,40,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:10px; 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:11.5px; 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:10px; color:#888780; margin-top:12px; }
.ticket-total-val { color:var(--red-deep); }
.ticket-total-note { font-size:10.5px; 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:11.5px; 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:9.5px; 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:11px; 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:10px; 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.5; color:var(--text2); margin:8px 0 32px; max-width:34em; }
.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(198,40,40,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(198,40,40,0.1); }
.signal-head.open .signal-chev { transform:rotate(180deg); background:rgba(198,40,40,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; }
.author-line__main { font-family:var(--font-title); font-style:italic; font-size:1.2rem; color:var(--text); line-height:1.3; }
.author-line__sub { font-family:var(--font-body); font-size:0.85rem; color:var(--text3); margin-top:3px; line-height:1.5; }
.contact-form__row { display:flex; flex-direction:column; }
.contact-form__label { font-family:var(--font-mono); font-size:10px; 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:11px; 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(198,40,40,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:10.5px; 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:11px; 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:11.5px; 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(198,40,40,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:15px 18px 16px; border-radius:4px; font-size:14.5px; line-height:1.6; width:max-content; max-width:380px; 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:11.5px; 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(198,40,40,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: 10.5px;
  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: 11.5px;
  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: 10.5px;
  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: 11.5px;
  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: 10px;
  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: 9px; 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(198,40,40,0.05);
  padding: 12px 13px; margin: 12px 0 2px;
}
.etat-cote__lab {
  font-family: var(--font-mono); font-size: 9.5px; 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;
}



/* ============================================================
   Instrument, page Seuils critiques.
   Vu-metre + barillet colles sous la barre de navigation,
   chapitres en plein ecran, fleche de retour au bord gauche.
   ============================================================ */

.inst-wrap { max-width: 620px; margin: 0 auto; }
.inst-intro { padding: 10px 0 2px; }
.inst-intro__t { font-family: 'EB Garamond', Georgia, serif; font-size: 1.42rem; font-weight: 500; line-height: 1.18; margin-bottom: 10px; }
.inst-intro p { font-size: 13.5px; color: var(--text2); line-height: 1.55; margin-bottom: 7px; max-width: 66ch; }
.inst-intro--court p { display: none; }
.inst-intro--court .inst-intro__t { font-size: 1.2rem; margin-bottom: 4px; }

.inst-gauge { position: sticky; top: var(--nav-h, 0px); z-index: 20; background: var(--bg); padding: 8px 0 8px; border-bottom: 1px solid var(--border); }
/* Le titre est pose en surimpression dans le blanc du graphique : c'est du
   texte HTML, donc sa taille est une taille reelle, jamais mise a l'echelle. */
.inst-gauge__f { position: relative; }
.inst-gauge__t { position: absolute; top: 10px; left: 14px; right: 14px; z-index: 2;
  font-family: 'EB Garamond', Georgia, serif; font-size: 17px; font-weight: 500;
  line-height: 1.22; color: var(--text); max-width: 62%; pointer-events: none; }
/* Sur ecran etroit, le titre se resserre : la barre de navigation prend deja
   de la hauteur, le graphique doit remonter. */

@media (max-width: 700px) {
  .inst-gauge { padding: 4px 0 6px; }
  .inst-intro { padding: 6px 0 2px; }
  .inst-intro p { font-size: 13px; margin-bottom: 5px; }
}
.inst-gauge__f { border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 6px 3px 0; overflow: hidden; }
.inst-gauge svg { display: block; width: 100%; height: auto; }
/* Aucune hauteur imposee : le rapport du repere fait foi, sinon le dessin est
   reduit et centre, ce qui cree des marges blanches et rapetisse les polices. */
/* Deux elements insecables : la ligne ne peut plus se casser par accident. */
/* Le cadran est lui-meme l'acces au detail : pas de titre de chapitre pose au
   milieu d'une mesure, seulement un chevron. */
.inst-gauge__r { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 10px; background: none; border: none; border-top: 1px solid var(--border); margin-top: 2px; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--text3); text-align: left; }
.inst-gauge__a { font-size: 17px; line-height: 1; color: var(--red); }
.inst-gauge__d, .inst-gauge__a { white-space: nowrap; }
.inst-gauge__r b { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--text); font-weight: 500; }
.inst-gauge__r:hover, .inst-gauge__r:focus-visible { color: var(--red); }
.inst-gauge__r #instRead { color: var(--red); white-space: nowrap; }

.inst-bay { padding: 14px 0 0; }
.inst-bay__h { position: sticky; top: calc(var(--nav-h, 0px) + var(--gauge-h, 0px)); z-index: 15; background: var(--bg); padding-top: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--text3); display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 7px; }
.inst-list { display: block; }
.inst-tail { width: 100%; }
.inst-cran { width: 10px; height: 2px; border-radius: 2px; background: var(--border); transition: background .2s, width .2s; }
.inst-cran.on { background: var(--red); width: 14px; }
.inst-cart { box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 13px 14px; margin-bottom: 8px; cursor: pointer; font-family: inherit; transition: border-color .18s, background .18s; }
.inst-cart.act { border-color: rgba(198,40,40,.5); background: rgba(198,40,40,.04); }
/* La pastille de la ligne en cours de lecture s'allume elle aussi en rouge. */
.inst-cart.act .inst-cart__p { background: var(--red) !important; border-color: var(--red) !important; opacity: 1 !important; }
.inst-cart__p { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; }
.inst-cart__x { flex: 1 1 auto; min-width: 0; }
.inst-cart__n { display: block; font-size: 15px; font-weight: 500; color: var(--text); }
.inst-cart__s { display: block; font-size: 11.5px; color: var(--text3); margin-top: 1px; }
.inst-cart__y { flex: 0 0 auto; font-size: 11px; color: var(--text3); font-family: 'IBM Plex Mono', monospace; }

/* Chapitre : plein ecran, il masque tout le reste */
.inst-reader { position: fixed; inset: 0; z-index: 200; max-width: 100vw; background: var(--bg); overflow-y: auto; overflow-x: hidden; touch-action: pan-y; display: none; padding-bottom: 48px; }
.inst-reader.on { display: block; }
body.inst-reading { overflow: hidden; }
.inst-reader.slide-in { animation: instIn .3s cubic-bezier(.3,.9,.35,1) both; }
.inst-reader.slide-out { animation: instOut .24s cubic-bezier(.4,0,.9,.4) both; }
@keyframes instIn { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } }
@keyframes instOut { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } }

.inst-rbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; background: var(--bg); border-bottom: 1px solid var(--border); padding: 9px 16px; }
.inst-rbar__t { flex: 1 1 auto; min-width: 0; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text3); }
.inst-rbar__x { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 14px; line-height: 1; color: var(--text2); }
.inst-rbar__x:hover, .inst-rbar__x:focus-visible { color: var(--red-deep, #8c1c1c); border-color: var(--red); }
.inst-rhead { padding: 18px 16px 0; max-width: 760px; margin: 0 auto; }
.inst-rhead__n { font-family: 'EB Garamond', Georgia, serif; font-size: 1.72rem; font-weight: 500; line-height: 1.14; }
.inst-rhead__e { font-size: 12.5px; color: var(--red-deep, #8c1c1c); font-weight: 500; margin-top: 3px; }
.inst-folds { padding: 14px 16px 0; max-width: 760px; margin: 0 auto; }
.inst-fold { border-top: 1px solid var(--border); }
.inst-fold:last-child { border-bottom: 1px solid var(--border); }
.inst-fold__b { width: 100%; text-align: left; background: none; border: none; padding: 13px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text2); }
.inst-fold__s { font-size: 16px; color: var(--red); line-height: 1; }
.inst-fold__c { display: none; font-size: 15px; color: var(--text2); line-height: 1.68; padding-bottom: 16px; }
.inst-fold.open .inst-fold__c { display: block; }

/* Fleche de retour : commande permanente, au bord gauche, a mi-hauteur */
.inst-hint { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 210; display: none; width: 34px; height: 56px; padding: 0; cursor: pointer; align-items: center; justify-content: center; background: rgba(255,255,255,.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border: 1px solid rgba(198,40,40,.18); border-left: none; border-radius: 0 14px 14px 0; opacity: .62; transition: opacity .18s ease, background .18s ease; animation: instNudge 2.2s ease-in-out infinite; }
.inst-hint.on { display: flex; }
.inst-hint__a { display: block; width: 13px; height: 13px; margin-left: 4px; border-left: 2.2px solid var(--red); border-bottom: 2.2px solid var(--red); transform: rotate(45deg); opacity: .9; }
.inst-hint.near { opacity: 1; background: rgba(255,255,255,.82); border-color: rgba(198,40,40,.4); }
.inst-hint.pull { animation: none; opacity: 1; background: var(--red); border-color: var(--red); }
.inst-hint.pull .inst-hint__a { border-color: #fff; opacity: 1; }
@keyframes instNudge {
  0%, 60%, 100% { transform: translateY(-50%) translateX(0); }
  72% { transform: translateY(-50%) translateX(7px); }
  84% { transform: translateY(-50%) translateX(0); }
  92% { transform: translateY(-50%) translateX(4px); }
}
@media (hover: hover) and (pointer: fine) { .inst-hint { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .inst-hint, .dbeat, .dhal { animation: none !important; } }

/* La barre se reduit au defilement : seule la marque du site reste, les onglets
   sortent. La hauteur gagnee revient au graphique. */
.nav-bar--slim .nav-bar__links,
.nav-bar--slim .nav-bar__right,
.nav-bar--slim .nav-bar__arrow { display: none; }
/* La hauteur de la barre vient de la ligne interne, pas de la barre : c'est
   elle qu'il faut reduire pour que le graphique remonte reellement. */
.nav-bar--slim { padding: 0 16px; }
.nav-bar--slim .nav-bar__line1 { padding: 5px 0; min-height: 0; gap: 0; justify-content: flex-start; }
.nav-bar--slim .nav-bar__name { font-size: 15px; }

@media (max-width: 560px) {
  .inst-gauge__r { flex-direction: row; align-items: center; gap: 10px; }
  .inst-gauge__t { font-size: 15.5px; max-width: 68%; top: 8px; left: 12px; }
}

/* Cible d'une mise a jour : signalee brievement a l'arrivee, puis oubliee. */
.maj-cible { animation: majCible 2.6s ease-out 1; border-radius: 8px; }
@keyframes majCible {
  0%, 55% { box-shadow: 0 0 0 3px rgba(198,40,40,.22); background: rgba(253,246,216,.55); }
  100% { box-shadow: 0 0 0 0 rgba(198,40,40,0); background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .maj-cible { animation: none; box-shadow: 0 0 0 2px rgba(198,40,40,.3); } }

/* Chapitre du present : chapo en tete, puis des entrees qui portent leur
   chiffre avant d'etre ouvertes. Le survol seul raconte deja l'essentiel. */
.inst-tete { padding: 12px 16px 0; max-width: 760px; margin: 0 auto; }
.inst-chapo { font-family: 'EB Garamond', Georgia, serif; font-size: 1.12rem; line-height: 1.45; color: var(--text); margin-bottom: 12px; }
.inst-fold__lab { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inst-fold__val { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--red-deep, #8c1c1c); }
.inst-fold__b { align-items: flex-start; gap: 12px; }

.inst-src { max-width: 760px; margin: 16px auto 0; padding: 11px 16px 0; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text3); line-height: 1.5; }

/* Aeration des chapitres : les textes arrivent en blocs continus, le moteur les
   decoupe en paragraphes. Ces regles leur donnent leur respiration. */
.inst-fold__c p { margin-bottom: 13px; }
.inst-fold__c p:last-child { margin-bottom: 0; }
.inst-fold__c .tt { border-bottom: 1px dotted var(--red); cursor: help; }

/* La bulle ne doit jamais deborder d'un ecran etroit. */
@media (max-width: 420px) {
  .tt-bubble { max-width: calc(100vw - 32px); min-width: 0; font-size: 14px; padding: 13px 15px 14px; }
}

/* Discussion sur ecran etroit : le texte reprend toute la largeur.
   Les deux colonnes de droite, le lien de copie et la pastille du chevron,
   mangeaient une centaine de pixels et tassaient le titre sur quatre lignes.
   Le lien de copie est une commodite d'ordinateur, il disparait ici. Le chevron
   quitte sa pastille et se pose a la fin du titre, dans le flux du texte. */
@media (max-width: 700px) {
  .signal-head { gap: 9px; padding: 13px 14px; align-items: flex-start; }
  .signal-num { width: 14px; font-size: 0.74rem; line-height: 1.5; }
  .signal-link { display: none; }
  .signal-chev { display: none; }
  .signal-title { font-size: 0.98rem; }
  /* Le repere de pliage suit le dernier mot : il n'occupe aucune colonne. */
  .signal-title::after {
    content: '\25BE';
    display: inline-block;
    margin-left: 8px;
    color: var(--red);
    font-size: 0.8em;
    transform: translateY(-1px);
    transition: transform 0.25s;
  }
  .signal-head.open .signal-title::after { transform: translateY(-1px) rotate(180deg); }
}

/* Harmonisation des textes suivis. Deux familles seulement.
   Chapo, 16 a 18 px : interligne 1,5 et ligne bornee a 36 em, soit environ
   70 signes. Corps, 15 px : interligne 1,68 et ligne bornee a 40 em.
   L'interligne se resserre quand la police grossit, jamais l'inverse. */
.signal-body p { line-height: 1.68; max-width: 34em; }
.inst-fold__c { max-width: 34em; }
.inst-chapo { max-width: 32em; }

/* Sur l'accueil, le nom de la page porte l'information, la plage de dates
   l'accompagne sans lui voler la vedette. */
.nav-tl__span { font-family: var(--font-mono); font-size: 0.82em; color: var(--text3); letter-spacing: 0.04em; margin-left: 6px; white-space: nowrap; }

/* L'intro d'ere accepte des paragraphes : elle est aeree comme les chapitres. */
.ei-desc p { margin-bottom: 11px; }
.ei-desc p:last-child { margin-bottom: 0; }