/* =====================================================================
   Org&Co 2026 · ICID Roubaix — « Co-construction d'architextes capacitants »
   Bazet · Marrast · Béler · Geneste · Aliyari — UTOPI / LGP · UTTOP
   v2 (2026-05-28) — refonte sur l'article final + exigences :
     · type en REM piloté par --fs (widget +/−)
     · titres agrandis
     · appels de note + sources en pied de slide
     · mode relecture (prise de notes)
   Parti pris : ÉDITORIAL-ARCHITEXTE (le formulaire comme langage visuel).
   ===================================================================== */

:root {
  --fs: 1;                 /* multiplicateur global de police (widget) */

  --paper-1: #faf7f1;
  --paper-2: #f3ecdf;
  --paper-3: #edefe9;
  --card:    #fffdf8;

  --ink:       #1b2742;
  --ink-soft:  #495472;
  --ink-light: #818aa1;

  --indigo:  #4f46e5;   /* l'architexte, le cadre        */
  --magenta: #d6256e;   /* le « capacitant »             */
  --green:   #0e9d6a;   /* régulation autonome, marges   */
  --amber:   #d8820a;   /* l'irritant, le débordement    */
  --violet:  #7c3aed;   /* souveraineté / prudentiel     */

  --indigo-wash:  #ececfb;
  --magenta-wash: #fce7ef;
  --green-wash:   #e3f6ec;
  --amber-wash:   #fbf0db;
  --violet-wash:  #f0eafd;

  --line:      #e7ddca;
  --line-soft: #efe7d8;

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "Spline Sans Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

/* La police-racine porte le multiplicateur : tout le texte est en rem */
html { font-size: calc(16px * var(--fs)); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background:
    radial-gradient(1200px 700px at 12% -8%, rgba(79,70,229,0.06), transparent 60%),
    radial-gradient(1000px 800px at 108% 110%, rgba(214,37,110,0.05), transparent 55%),
    linear-gradient(150deg, var(--paper-1) 0%, var(--paper-2) 55%, var(--paper-3) 100%);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

em  { font-style: italic; color: var(--indigo); font-weight: 500; }
strong { color: var(--ink); font-weight: 700; }

/* =========== Bulles d'arrière-plan =========== */
.bubbles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.bubble {
  position: absolute; bottom: -220px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.7) 0%, rgba(79,70,229,0.10) 38%, rgba(214,37,110,0.07) 72%, rgba(14,157,106,0.06) 100%);
  box-shadow: inset 0 0 22px rgba(255,255,255,0.45), inset -8px -12px 26px rgba(79,70,229,0.10);
  opacity: 0; animation: rise linear infinite;
}
@keyframes rise {
  0% { transform: translate(0,0) scale(0.96); opacity: 0; }
  12% { opacity: 0.5; }
  50% { transform: translate(var(--drift,20px), -58vh) scale(1.04); }
  88% { opacity: 0.4; }
  100% { transform: translate(calc(var(--drift,20px) * -0.6), -122vh) scale(1); opacity: 0; }
}

/* =========== Barre de progression =========== */
#progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(27,39,66,0.06); z-index: 6; }
#progress-bar { height: 100%; width: 6%; background: linear-gradient(90deg, var(--indigo), var(--magenta)); transition: width .4s cubic-bezier(.2,.7,.2,1); }

/* =========== Conteneur slides =========== */
#deck { position: relative; z-index: 1; width: 100vw; height: 100vh; }
.slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 44px 72px 40px;
  display: none; flex-direction: column; overflow: hidden;
}
.slide.active { display: flex; }
.slide.reveal .stg { animation: stg-in .56s cubic-bezier(.2,.75,.25,1) backwards; animation-delay: calc(var(--d, 0) * 75ms); }
@keyframes stg-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* =========== Chrome : kicker + titre + filet =========== */
.kicker {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-light); display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
}
.kicker::before { content: ""; width: 9px; height: 9px; background: var(--indigo); border-radius: 2px; transform: rotate(45deg); flex: none; }
.kicker .req { color: var(--amber); font-weight: 700; }

.slide-title {
  font-family: var(--serif); font-size: 2.7rem; font-weight: 540; line-height: 1.07;
  letter-spacing: -0.014em; color: var(--ink); margin-bottom: 6px;
}
.slide-title em { font-style: italic; color: var(--magenta); font-weight: 540; }

.rule { height: 2px; width: 82px; background: linear-gradient(90deg, var(--magenta), transparent); border-radius: 2px; margin: 6px 0 18px; }

.slide-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Texte courant */
.lead { font-size: 1.4rem; line-height: 1.45; color: var(--ink); margin-bottom: 12px; }
.lead-soft { font-size: 1.2rem; line-height: 1.5; color: var(--ink-soft); }
.src { color: var(--ink-light); font-size: 0.86rem; font-style: italic; margin-top: 8px; }
.cite { color: var(--indigo); font-weight: 600; font-style: normal; }

ul { list-style: none; }
.bul li { font-size: 1.2rem; line-height: 1.5; color: var(--ink-soft); padding-left: 26px; position: relative; margin-bottom: 10px; }
.bul li::before { content: "—"; color: var(--indigo); font-weight: 700; position: absolute; left: 0; top: -1px; }
.bul li strong { color: var(--ink); }

/* =========== Appels de note + sources en pied =========== */
sup.fn {
  font-family: var(--sans); font-size: 0.62em; font-weight: 700; color: var(--magenta);
  vertical-align: super; line-height: 0; padding: 0 1px; cursor: default;
}
.slide-sources {
  flex: none; margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 0.66rem; line-height: 1.5; color: var(--ink-light);
  display: flex; flex-wrap: wrap; gap: 2px 16px;
}
.slide-sources b { color: var(--ink-soft); font-weight: 600; }
.slide-sources .fnum { color: var(--magenta); font-weight: 700; }
.slide-sources .lbl { color: var(--ink-light); margin-right: 6px; text-transform: uppercase; letter-spacing: 0.1em; }

/* =========== Bandes & cartes génériques =========== */
.note-band {
  font-size: 1.12rem; line-height: 1.5; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--amber);
  border-radius: 0 12px 12px 0; padding: 15px 22px;
}
.note-band strong { color: var(--ink); }
.note-band .hl { font-weight: 700; font-style: italic; }
.note-band.indigo { border-left-color: var(--indigo); } .note-band.indigo .hl { color: var(--indigo); }
.note-band.green  { border-left-color: var(--green); }  .note-band.green .hl  { color: var(--green); }
.note-band.magenta{ border-left-color: var(--magenta);} .note-band.magenta .hl{ color: var(--magenta); }
.note-band.violet { border-left-color: var(--violet); } .note-band.violet .hl { color: var(--violet); }
.note-band.amber .hl { color: var(--amber); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px; box-shadow: 0 12px 34px rgba(27,39,66,0.06); }
.card h3 { font-family: var(--serif); font-weight: 560; font-size: 1.3rem; color: var(--ink); margin-bottom: 8px; }
.card p { font-size: 1.03rem; line-height: 1.5; color: var(--ink-soft); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; flex: 1; min-height: 0; }
.two-col.media { grid-template-columns: 1.05fr 1fr; align-items: center; }

.prose p { font-size: 1.16rem; line-height: 1.55; color: var(--ink-soft); margin-bottom: 13px; }
.prose p em { color: var(--indigo); }
.prose .ask { font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--magenta); }

.pull-quote {
  font-family: var(--serif); font-style: italic; font-size: 1.85rem; line-height: 1.32; color: var(--ink);
  border-left: 4px solid var(--magenta); padding: 6px 0 6px 26px; margin: 6px 0;
}
.pull-quote .who { display: block; font-family: var(--sans); font-style: normal; font-size: 0.9rem; color: var(--ink-light); margin-top: 10px; }

/* Duo « contrainte / ressource », « functionings / capabilités »… */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duo .panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: 0 8px 22px rgba(27,39,66,0.05); }
.duo .panel h4 { font-family: var(--serif); font-size: 1.25rem; font-weight: 560; margin-bottom: 7px; }
.duo .panel p { font-size: 1rem; line-height: 1.45; color: var(--ink-soft); }
.duo .panel.a { border-top: 3px solid var(--amber); } .duo .panel.a h4 { color: var(--amber); }
.duo .panel.b { border-top: 3px solid var(--green); } .duo .panel.b h4 { color: var(--green); }
.duo-link { display: flex; align-items: center; justify-content: center; font-family: var(--mono); color: var(--magenta); font-size: 0.9rem; }

/* Cartes-grille (dimensions, etc.) */
.grid-cards { display: grid; gap: 14px; flex: 1; }
.grid-cards.c5 { grid-template-columns: repeat(5, 1fr); }
.grid-cards.c3 { grid-template-columns: repeat(3, 1fr); }
.gcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 17px;
  box-shadow: 0 6px 20px rgba(27,39,66,0.05); border-top: 3px solid var(--c, var(--indigo));
  display: flex; flex-direction: column;
}
.gcard .gi { font-family: var(--mono); font-size: 0.72rem; color: var(--c, var(--indigo)); margin-bottom: 6px; }
.gcard h4 { font-family: var(--serif); font-size: 1.18rem; font-weight: 560; color: var(--ink); margin-bottom: 6px; line-height: 1.1; }
.gcard p { font-size: 0.92rem; line-height: 1.4; color: var(--ink-soft); }

/* =========== Cover =========== */
.cover { padding: 40px 72px 34px; justify-content: space-between; }
.cover-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.cover-conf { font-family: var(--mono); font-size: 0.82rem; line-height: 1.7; color: var(--ink-soft); }
.cover-conf .big { color: var(--indigo); font-weight: 600; }
.cover-conf .axe { display: inline-block; margin-top: 8px; background: var(--magenta-wash); color: var(--magenta); border-radius: 999px; padding: 4px 13px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; }
.cover-logos-top { display: flex; align-items: center; gap: 12px; flex: none; }
.logo-chip { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; box-shadow: 0 4px 12px rgba(27,39,66,0.06); display: flex; align-items: center; }
.logo-chip img { display: block; height: 34px; width: auto; object-fit: contain; }
.logo-chip.org img { height: 52px; }

.cover-mid { display: flex; flex-direction: column; }
.cover-eyebrow { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--magenta); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.cover-eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--magenta), transparent); opacity: .4; }
.cover-title { font-family: var(--serif); font-size: 4.5rem; font-weight: 560; line-height: 1.0; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 14px; }
.cover-title em { font-style: italic; color: var(--magenta); }
.cover-sub { font-family: var(--serif); font-size: 1.55rem; font-weight: 380; font-style: italic; line-height: 1.3; color: var(--ink-soft); max-width: 1000px; }
.cover-sub .hl { color: var(--indigo); font-style: normal; font-weight: 500; }

.authors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; }
.author { padding: 0 16px; border-left: 1px solid var(--line-soft); }
.author:first-child { padding-left: 0; border-left: 0; }
.author .name { font-size: 1.02rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.author .aff { font-size: 0.72rem; color: var(--ink-light); font-style: italic; line-height: 1.35; margin-top: 4px; }
.author.lead-author .name { color: var(--magenta); }
.author .cnu { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-light); letter-spacing: 0.04em; margin-top: 3px; }

.cover-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.cover-foot .proj { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.03em; color: var(--ink-light); }
.cover-foot .proj b { color: var(--indigo); }
.cover-logos-foot { display: flex; align-items: center; gap: 10px; }
.cover-logos-foot .logo-chip img { height: 35px; }

/* =========== Slide 2 — repères + question =========== */
.reperes { display: flex; flex-direction: column; gap: 11px; }
.repere { display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: start; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 16px rgba(27,39,66,0.04); }
.repere .yr { font-family: var(--mono); font-weight: 600; font-size: 0.92rem; color: var(--indigo); padding-top: 2px; }
.repere .yr.tag { color: var(--magenta); font-size: 0.78rem; }
.repere h4 { font-size: 1.05rem; color: var(--ink); margin-bottom: 3px; font-weight: 700; }
.repere p { font-size: 0.94rem; color: var(--ink-soft); line-height: 1.4; }
.repere p em { color: var(--indigo); }

.research-q { background: linear-gradient(100deg, var(--indigo-wash), var(--magenta-wash)); border-left: 5px solid var(--magenta); border-radius: 0 14px 14px 0; padding: 20px 26px; }
.research-q .q-mono { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--magenta); margin-bottom: 9px; }
.research-q p { font-family: var(--serif); font-style: italic; font-size: 1.6rem; line-height: 1.32; color: var(--ink); font-weight: 420; }
.research-q strong { color: var(--magenta); font-style: normal; font-weight: 600; }
.research-q .alt { color: var(--ink-soft); }

.defs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px 28px; }
.def { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; padding-bottom: 9px; border-bottom: 1px dashed var(--line); }
.def dt { font-family: var(--mono); font-size: 0.84rem; font-weight: 500; color: var(--indigo); white-space: nowrap; }
.def dd { font-size: 1rem; color: var(--ink-soft); line-height: 1.4; }
.def dd em { color: var(--ink); }

/* =========== Stats (bilan SI) =========== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px; box-shadow: 0 10px 28px rgba(27,39,66,0.05); display: flex; flex-direction: column; justify-content: center; }
.stat .num { font-family: var(--serif); font-size: 3.5rem; font-weight: 580; line-height: 0.95; letter-spacing: -0.03em; }
.stat:nth-child(1) .num { color: var(--indigo); } .stat:nth-child(2) .num { color: var(--green); }
.stat:nth-child(3) .num { color: var(--amber); } .stat:nth-child(4) .num { color: var(--magenta); }
.stat .num span { font-size: 1.9rem; }
.stat .lbl { font-size: 0.94rem; color: var(--ink-soft); line-height: 1.4; margin-top: 12px; }
.stat .lbl b { color: var(--ink); }

/* =========== Critères =========== */
.criteres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; flex: 1; align-items: stretch; }
.critere { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; box-shadow: 0 8px 22px rgba(27,39,66,0.05); display: flex; gap: 15px; align-items: flex-start; }
.critere .ci { font-family: var(--serif); font-size: 1.7rem; color: var(--c, var(--magenta)); line-height: 1; flex: none; width: 32px; }
.critere h4 { font-family: var(--serif); font-size: 1.18rem; font-weight: 560; color: var(--ink); margin-bottom: 4px; }
.critere p { font-size: 0.95rem; line-height: 1.42; color: var(--ink-soft); }

/* =========== Config université + photo =========== */
.config { display: flex; flex-direction: column; gap: 12px; }
.poles { display: flex; flex-direction: column; gap: 9px; }
.pole { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 5px 14px rgba(27,39,66,0.04); }
.pole .pk { font-family: var(--mono); font-size: 0.72rem; color: #fff; border-radius: 6px; padding: 3px 9px; flex: none; }
.pole:nth-child(1) .pk { background: var(--indigo); } .pole:nth-child(2) .pk { background: var(--green); }
.pole:nth-child(3) .pk { background: var(--amber); } .pole:nth-child(4) .pk { background: var(--violet); }
.pole .pt { font-size: 1.02rem; color: var(--ink); } .pole .pt b { color: var(--ink); }
.photo-frame { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; box-shadow: 0 14px 38px rgba(27,39,66,0.10); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.photo-frame img { max-width: 100%; max-height: 360px; object-fit: contain; border-radius: 8px; cursor: zoom-in; }
.photo-frame figcaption { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-light); margin-top: 8px; text-align: center; }

/* =========== Flow micro→macro =========== */
.flow { display: flex; align-items: stretch; gap: 0; }
.flow .step { flex: 1; background: var(--card); border: 1px solid var(--line); padding: 18px 20px; position: relative; }
.flow .step:first-child { border-radius: 14px 0 0 14px; }
.flow .step:last-child { border-radius: 0 14px 14px 0; }
.flow .step:not(:first-child) { border-left: 0; }
.flow .step .sl { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-light); margin-bottom: 8px; }
.flow .step h4 { font-family: var(--serif); font-size: 1.2rem; font-weight: 560; color: var(--ink); margin-bottom: 7px; }
.flow .step:nth-child(1) h4 { color: var(--amber); } .flow .step:nth-child(3) h4 { color: var(--green); } .flow .step:nth-child(5) h4 { color: var(--magenta); }
.flow .step p { font-size: 0.95rem; line-height: 1.45; color: var(--ink-soft); }
.flow .arrow { display: flex; align-items: center; justify-content: center; width: 36px; color: var(--magenta); font-size: 1.3rem; flex: none; }

/* =========== GLPI =========== */
.glpi-grid { display: grid; grid-template-columns: 1.62fr 1fr; gap: 26px; flex: 1; min-height: 0; align-items: center; }
.shots { display: flex; flex-direction: column; gap: 11px; }
.shots .zoom-hint { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-light); text-align: center; }
.shot { border-radius: 11px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 14px 40px rgba(27,39,66,0.12); }
.shot .bar { display: flex; align-items: center; gap: 6px; background: linear-gradient(180deg,#f3f0ea,#e9e4d9); padding: 7px 11px; border-bottom: 1px solid var(--line); }
.shot .bar i { width: 9px; height: 9px; border-radius: 50%; background: #cfc7b6; display: inline-block; }
.shot .bar i:nth-child(1){ background:#e06c63; } .shot .bar i:nth-child(2){ background:#e3b04b; } .shot .bar i:nth-child(3){ background:#5fb47e; }
.shot .bar span { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-light); margin-left: 8px; }
.shot img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.glpi-shots-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.glpi-notes { display: flex; flex-direction: column; gap: 12px; }
.glpi-note { border-left: 3px solid var(--indigo); padding: 3px 0 3px 15px; }
.glpi-note.amber { border-color: var(--amber); } .glpi-note.magenta { border-color: var(--magenta); }
.glpi-note h4 { font-family: var(--serif); font-size: 1.16rem; font-weight: 560; color: var(--ink); margin-bottom: 4px; }
.glpi-note p { font-size: 0.94rem; line-height: 1.42; color: var(--ink-soft); }
.glpi-note code { font-family: var(--mono); font-size: 0.82rem; color: var(--amber); background: var(--amber-wash); padding: 1px 6px; border-radius: 5px; }
.glpi-kicker-quote { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--magenta); }

/* =========== Conclusion + Illich =========== */
.concl-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; flex: 1; align-items: center; }
.manifesto { background: linear-gradient(125deg, var(--indigo), #3f37c9 60%, var(--magenta)); color: #fff; border-radius: 18px; padding: 26px 30px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 18px 44px rgba(79,70,229,0.28); }
.manifesto .m-eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.manifesto p { font-family: var(--serif); font-size: 1.28rem; line-height: 1.38; font-weight: 380; }
.manifesto p em { color: #ffd9e8; font-style: italic; }
.manifesto .m-strong { font-size: 1.4rem; font-weight: 500; }
.manifesto .m-rule { height: 1px; background: rgba(255,255,255,0.25); }
.illich { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--green); border-radius: 16px; padding: 22px 24px; box-shadow: 0 10px 28px rgba(27,39,66,0.06); }
.illich .ti { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
.illich h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 560; color: var(--ink); margin-bottom: 8px; }
.illich p { font-size: 1.02rem; line-height: 1.5; color: var(--ink-soft); }
.illich p em { color: var(--green); }

/* =========== Cadre image (BD) =========== */
.bd-frame { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: 0 16px 44px rgba(27,39,66,0.12); display: flex; flex-direction: column; align-items: center; max-height: 100%; }
.bd-frame img { max-width: 100%; max-height: 420px; object-fit: contain; border-radius: 9px; }
.bd-frame figcaption { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-light); margin-top: 9px; text-align: center; }

/* =========== HUD =========== */
.hud { position: fixed; bottom: 3px; right: 18px; z-index: 5; display: flex; align-items: center; gap: 12px; background: rgba(255,253,248,0.82); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; padding: 6px 15px; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); box-shadow: 0 6px 18px rgba(27,39,66,0.08); }
.hud .hud-hint { color: var(--ink-light); font-size: 0.66rem; }
.hud-left { position: fixed; bottom: 14px; left: 18px; z-index: 5; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-light); letter-spacing: 0.04em; }
.hud-left b { color: var(--indigo); }

/* =========== Contrôles (police + relecture) =========== */
.controls { position: fixed; top: 12px; right: 18px; z-index: 7; display: flex; align-items: center; gap: 6px; }
.ctrl-btn { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-soft); background: rgba(255,253,248,0.9); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; cursor: pointer; box-shadow: 0 3px 10px rgba(27,39,66,0.07); line-height: 1; }
.ctrl-btn:hover { background: #fff; color: var(--ink); }
.ctrl-btn.on { background: var(--magenta); color: #fff; border-color: var(--magenta); }
.ctrl-grp { display: flex; align-items: center; gap: 2px; background: rgba(255,253,248,0.9); border: 1px solid var(--line); border-radius: 8px; padding: 2px; box-shadow: 0 3px 10px rgba(27,39,66,0.07); }
.ctrl-grp .ctrl-btn { border: 0; box-shadow: none; background: transparent; padding: 4px 8px; }
.ctrl-grp .ctrl-lbl { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-light); padding: 0 4px; }

/* =========== Mode relecture (notes) =========== */
.notes-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 340px; z-index: 8;
  background: rgba(28,33,52,0.96); color: #e8e8ee; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-left: 1px solid rgba(255,255,255,0.12); box-shadow: -12px 0 40px rgba(0,0,0,0.25);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column; padding: 18px 18px 16px;
}
.notes-panel.open { transform: none; }
.notes-panel h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 540; color: #fff; margin-bottom: 2px; }
.notes-panel .np-sub { font-family: var(--mono); font-size: 0.66rem; color: #9aa0bb; margin-bottom: 12px; }
.notes-panel .np-slide { color: var(--amber); }
.notes-panel textarea {
  flex: 1; width: 100%; resize: none; background: rgba(255,255,255,0.05); color: #eef; border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; padding: 12px 13px; font-family: var(--sans); font-size: 0.92rem; line-height: 1.5; margin-bottom: 12px;
}
.notes-panel textarea:focus { outline: none; border-color: var(--magenta); }
.np-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.np-actions button { font-family: var(--mono); font-size: 0.72rem; color: #cfd3e6; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; padding: 7px 11px; cursor: pointer; }
.np-actions button:hover { background: rgba(255,255,255,0.16); color: #fff; }
.np-actions button.primary { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.np-hint { font-family: var(--mono); font-size: 0.62rem; color: #888fb0; margin-top: 10px; line-height: 1.5; }
/* pastille « cette slide a des notes » */
.note-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); margin-left: 6px; vertical-align: middle; }

/* =========== Lightbox =========== */
#lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; background: rgba(18,24,40,0.86); cursor: zoom-out; padding: 40px; }
#lightbox.open { display: flex; }
#lightbox img { max-width: 94%; max-height: 94%; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }

:fullscreen #deck { background: transparent; }
:fullscreen { background: var(--paper-1); }