/* Layout : un hub mobile d'abord, une colonne. Les prestations sont des « fiches de dossier »
   couleur parchemin posées sur un bureau violet nuit ; le laiton sert aux détails. */
:root{
  --bg:#160D20;        /* violet nuit, le bureau */
  --surface:#211430;   /* sous-main */
  --fg:#EDE5F3;        /* texte sur fond nuit */
  --muted:#B4A5C2;
  --accent:#B88BE8;    /* améthyste */
  --brass:#D2AE66;     /* laiton */
  --paper:#EFE6D3;     /* fiche parchemin */
  --ink:#22142C;       /* encre sur fiche */
  --ink-soft:#5A4A62;
  --rule:rgba(210,174,102,.35);
  --btn-fg:#160D20;
  --vendre:#EE7A64;    /* le rouge feutre de la couverture, éclairci pour la nuit */

  --display:"IM Fell English", "Iowan Old Style", Georgia, serif;
  --display-sc:"IM Fell English SC", "IM Fell English", Georgia, serif;
  --body:"Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;
  --typewriter:"Special Elite", "Courier New", Courier, monospace;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#ECE6F0; --surface:#E0D5E9; --fg:#22142C; --muted:#5D4E69;
    --accent:#5E2F94; --brass:#86621F; --paper:#FFFCF5; --ink:#22142C; --ink-soft:#5A4A62;
    --rule:rgba(134,98,31,.35); --btn-fg:#FFFCF5; --vendre:#B5372B; color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#ECE6F0; --surface:#E0D5E9; --fg:#22142C; --muted:#5D4E69;
  --accent:#5E2F94; --brass:#86621F; --paper:#FFFCF5; --ink:#22142C; --ink-soft:#5A4A62;
  --rule:rgba(134,98,31,.35); --btn-fg:#FFFCF5; --vendre:#B5372B; color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--body); font-size:1.0625rem; line-height:1.55;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:4px}

.wrap{max-width:46rem; margin:0 auto}

/* ---------- En-tête ---------- */
.hero{padding-block:clamp(2.5rem, 8vw, 4.5rem) 2.5rem; position:relative}
.eyebrow{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass); margin:0 0 1.25rem; display:flex; align-items:center; gap:.6rem;
}
.eyebrow svg{flex:none}
.name{
  font-family:var(--display-sc); font-weight:400; margin:0;
  font-size:clamp(3.4rem, 15vw, 5.6rem); line-height:.9; letter-spacing:.01em;
}
.name .ye{color:var(--accent)}
.thesis{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.6rem, 6vw, 2.25rem); line-height:1.15; margin:.6rem 0 1.25rem;
  text-wrap:balance;
}
.lede{color:var(--muted); max-width:36rem; margin:0 0 1.5rem}
.lede strong{color:var(--fg); font-weight:500}

.clues{list-style:none; margin:0 0 1.75rem; padding:0; display:flex; flex-wrap:wrap; gap:.4rem}
.clues li{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.04em;
  border:1px dashed var(--rule); color:var(--fg); padding:.3rem .6rem; border-radius:3px;
}
.clues-label{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .5rem;
}

.actions{display:flex; flex-wrap:wrap; gap:.75rem}
.btn{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-family:var(--body); font-weight:700; font-size:1rem;
  padding:.8rem 1.15rem; border-radius:6px; border:1.5px solid var(--accent);
  transition:transform .15s ease, background-color .15s ease;
}
.btn-primary{background:var(--accent); color:var(--btn-fg)}
.btn-ghost{color:var(--fg)}
.btn:hover{transform:translateY(-1px)}
.btn-ghost:hover{background:color-mix(in srgb, var(--accent) 14%, transparent)}

/* ---------- Suffixe « the LOrd » ---------- */
.name-row{position:relative}
.name .aj{white-space:nowrap}
.lord-wrap{display:inline-block; vertical-align:baseline}
.lord{
  all:unset; cursor:help; display:inline-flex; align-items:baseline; gap:.12em;
  font-size:.42em; line-height:1; color:var(--fg); border-radius:4px;
}
.lord:focus-visible{outline:2px solid var(--brass); outline-offset:4px}
.lord .the{font-family:var(--display); font-style:italic; text-transform:none; color:var(--muted); margin-right:.12em}
.lord .lo{
  position:relative; font-family:var(--display-sc); color:var(--brass); letter-spacing:.02em;
  padding:0 .06em; border-bottom:2px solid var(--brass);
}
.lord .crown{
  position:absolute; left:50%; top:-.62em; width:.9em; height:.45em; transform:translateX(-50%) rotate(-4deg);
  fill:var(--brass); transition:transform .25s cubic-bezier(.2,1.6,.4,1);
}
.lord .rd{font-family:var(--display-sc)}
.lord:hover .crown, .lord[aria-expanded="true"] .crown{transform:translateX(-50%) translateY(-.12em) rotate(6deg)}

.lord-note{
  margin:.9rem 0 0; max-width:30rem; display:none;
  font-family:var(--typewriter); font-size:.9rem; line-height:1.45;
  background:#D8C298; color:#2B2030; padding:.7rem .9rem; border-radius:3px;
  box-shadow:0 10px 22px -14px rgba(0,0,0,.7); transform:rotate(-.6deg);
}
.lord-note .k{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  border:1.5px solid #6A2FA3; color:#6A2FA3; padding:.08rem .35rem; margin-right:.45rem; border-radius:2px;
}
.name-row.show-note .lord-note{display:block; animation:note-in .3s ease-out}
@keyframes note-in{from{opacity:0; transform:translateY(-6px) rotate(-.6deg)} to{opacity:1; transform:rotate(-.6deg)}}

/* ---------- Sections ---------- */
section{padding-block:2.25rem}
.sec-head{display:flex; align-items:baseline; gap:.9rem; margin-bottom:1.25rem}
.sec-head h2{
  font-family:var(--display-sc); font-weight:400; font-size:1.65rem; margin:0; line-height:1.1;
}
.sec-head::after{content:""; flex:1; border-bottom:1px solid var(--rule); transform:translateY(-.35rem)}

/* ---------- Dossiers de profiler (fermés par défaut) ---------- */
.files{display:grid; gap:2.25rem; padding-top:1rem}
.case{
  --kraft:#D8C298; --kraft-edge:#B99C66; --sheet:#F8F2E4; --typed:#2B2030; --stamp:#6A2FA3;
  position:relative; color:var(--typed);
}
.case > summary{list-style:none; cursor:pointer}
.case > summary::-webkit-details-marker{display:none}
.case-cover{
  position:relative; display:grid; gap:.35rem;
  background:var(--kraft); border-radius:0 6px 6px 6px;
  padding:1.35rem 1.25rem 1.15rem;
  box-shadow:inset 0 0 0 1px var(--kraft-edge), 0 14px 28px -18px rgba(0,0,0,.65);
  transition:transform .18s ease, box-shadow .18s ease;
}
.case-cover:hover{transform:translateY(-2px)}
.case-tab{ /* onglet de la chemise */
  position:absolute; top:-1.55rem; left:0; height:1.6rem;
  display:flex; align-items:center; padding:0 1rem;
  background:var(--kraft); border-radius:6px 6px 0 0;
  box-shadow:inset 1px 1px 0 var(--kraft-edge), inset -1px 0 0 var(--kraft-edge);
  font-family:var(--typewriter); font-size:.8rem; letter-spacing:.04em; color:var(--typed);
}
.case-ref{font-family:var(--typewriter); font-size:.78rem; color:#5B4A3A}
.case-title{
  font-family:var(--display); font-size:1.5rem; line-height:1.15; text-wrap:balance;
  padding-right:5.5rem;
}
.case-meta{font-family:var(--typewriter); font-size:.85rem}
.case-stamp{
  position:absolute; top:1rem; right:1rem; transform:rotate(-9deg);
  font-family:var(--mono); font-weight:500; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--stamp); border:2px solid var(--stamp); border-radius:3px; padding:.2rem .45rem;
  opacity:.85; mix-blend-mode:multiply;
}
.case-cue{
  margin-top:.55rem; display:inline-flex; align-items:center; gap:.45rem; justify-self:start;
  font-family:var(--body); font-weight:700; font-size:.95rem; color:#3E1C63;
  border-bottom:1.5px solid currentColor; padding-bottom:1px;
}
.case-cue::after{content:"▾"; font-size:.8em; transition:transform .2s ease}
.case[open] .case-cue::after{transform:rotate(180deg)}
.case .when-open{display:none}
.case[open] .when-open{display:inline}
.case[open] .when-closed{display:none}
.case[open] .case-cover{border-radius:0 6px 0 0}

.case-body{
  background:var(--sheet); color:var(--typed);
  margin:0 .5rem; padding:1.4rem 1.15rem 1.3rem; position:relative;
  border-radius:0 0 4px 4px;
  box-shadow:0 1px 0 rgba(0,0,0,.2), 0 16px 30px -20px rgba(0,0,0,.7);
  background-image:repeating-linear-gradient(transparent 0 1.65rem, rgba(106,47,163,.07) 1.65rem calc(1.65rem + 1px));
}
.case-body{transform-origin:top center}
.case-cover{transform-origin:center bottom}
.case-body::before{ /* trombone */
  content:""; position:absolute; top:-.55rem; right:1.6rem; width:.7rem; height:2rem;
  border:2px solid #8C8A92; border-radius:.5rem; background:transparent;
}
.sheet-head{
  font-family:var(--typewriter); font-size:.8rem; color:#5B4A3A; margin:0 0 .85rem;
  display:flex; flex-wrap:wrap; gap:.25rem 1rem;
}
.case-body p{margin:0 0 1rem; color:#4A3D52; max-width:60ch}
.case-body p strong{color:var(--typed); font-weight:500}

.menu{list-style:none; margin:0 0 1rem; padding:0; border-top:1px solid rgba(43,32,48,.18)}
.menu li{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.15rem 1rem;
  padding:.65rem 0; border-bottom:1px solid rgba(43,32,48,.18);
}
.menu .n{font-weight:700; min-width:0}
.menu .p{font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.menu .d{grid-column:1 / -1; font-size:.9rem; color:#5A4A62}
.menu .star .n::after{
  content:"formule principale"; font-family:var(--mono); font-weight:400; font-size:.62rem;
  letter-spacing:.1em; text-transform:uppercase; padding:.12rem .4rem;
  border:1px solid var(--stamp); color:var(--stamp); border-radius:3px;
  display:block; width:fit-content; margin-top:.3rem; white-space:nowrap;
}
.small{font-size:.88rem; color:#5A4A62; margin:0 0 1.15rem}

.case-body .actions .btn-primary{background:#4A2273; border-color:#4A2273; color:#FFFCF5}
.case-body .actions .btn-ghost{color:var(--typed); border-color:#4A2273}
.case-body .actions .btn-ghost:hover{background:rgba(74,34,115,.08)}

/* ---------- Bandeau cahier à paraître ---------- */
.soon-card{
  display:grid; gap:1.75rem; padding:1.6rem 1.25rem;
  background:var(--surface); border:1.5px dashed var(--brass); border-radius:8px;
}
.soon-text{min-width:0}
.soon-tag{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass); margin:0 0 .6rem;
}
.soon h2{
  font-family:var(--display); font-weight:400; font-size:clamp(1.55rem, 5.5vw, 2rem);
  line-height:1.12; margin:0 0 .75rem; text-wrap:balance;
}
.soon-text > p{color:var(--muted); margin:0 0 .9rem; max-width:52ch}
.soon-text > p.soon-meta{font-family:var(--mono); font-size:.8rem; color:var(--fg); margin-bottom:1.25rem}
.btn-disabled{border-style:dashed; border-color:var(--muted); color:var(--muted); cursor:default}
.btn-disabled:hover{transform:none}

.advent{
  list-style:none; margin:0; padding:0; align-self:center;
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:.4rem; max-width:22rem;
}
.advent li{
  aspect-ratio:1; max-width:100%; display:grid; place-items:center;
  font-family:var(--mono); font-size:.8rem; font-variant-numeric:tabular-nums;
  border:1px solid var(--rule); border-radius:4px; color:var(--muted);
}
.advent li.open{background:var(--brass); border-color:var(--brass); color:var(--bg); font-weight:500}
.advent li.last{border-color:var(--accent); color:var(--accent); font-family:var(--display); font-size:1rem}

/* ---------- Ressources ---------- */
.res{display:grid; gap:.75rem}
.res a{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1rem;
  text-decoration:none; padding:1rem 1.1rem; border:1px solid var(--rule); border-radius:6px;
  background:var(--surface); transition:border-color .15s ease;
}
.res a:hover{border-color:var(--brass)}
.res .t{display:block; font-weight:700; font-size:1.05rem}
.res .s{display:block; color:var(--muted); font-size:.92rem; min-width:0}
.res .arrow{font-family:var(--mono); color:var(--brass)}

/* ---------- Réseaux ---------- */
.socials{display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0; padding:0}
.socials a{
  display:inline-block; text-decoration:none; font-family:var(--mono); font-size:.85rem;
  padding:.55rem .9rem; border-radius:999px; border:1px solid var(--rule);
}
.socials a:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- Pied de page ---------- */
footer{padding-block:2.5rem 3rem; margin-top:1rem; border-top:1px solid var(--rule)}
footer p{margin:0 0 .5rem; color:var(--muted); font-size:.88rem}
footer nav{display:flex; flex-wrap:wrap; gap:1.25rem; font-size:.88rem}
footer nav a{color:var(--muted)}
footer nav a:hover{color:var(--fg)}

/* ---------- Interactions bureau (souris uniquement) ---------- */
.case-cover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px)); transition:transform .25s ease, box-shadow .25s ease}
.case-cover:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px)); --lift:-3px}
.case[open] .case-stamp{animation:stamp .38s cubic-bezier(.2,1.6,.4,1)}
@keyframes stamp{from{transform:rotate(-16deg) scale(1.9); opacity:0} to{transform:rotate(-9deg) scale(1); opacity:.85}}
@media (hover:hover) and (pointer:fine){
  .clues li{transition:transform .15s ease, border-color .15s ease}
  .clues li:hover{transform:translateY(-3px) rotate(-2deg); border-style:solid; border-color:var(--brass)}
  .advent li{transition:transform .14s ease, border-color .14s ease, color .14s ease}
  .advent li:hover{transform:scale(1.14) rotate(-3deg); border-color:var(--brass); color:var(--fg)}
  .socials a{transition:transform .15s ease}
  .socials a:hover{transform:translateY(-2px)}
  .res a .arrow{transition:transform .2s ease}
  .res a:hover .arrow{transform:translateX(4px)}
}
.sound-toggle{
  position:fixed; z-index:20;
  right:calc(1rem + env(safe-area-inset-right, 0px)); bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.06em;
  background:var(--surface); color:var(--fg); border:1px solid var(--rule); border-radius:999px;
  padding:.5rem .85rem; box-shadow:0 8px 20px -12px rgba(0,0,0,.6);
}
.sound-toggle:hover{border-color:var(--brass)}
.sound-toggle[aria-pressed="true"]{border-color:var(--accent); color:var(--accent)}
.sound-toggle .bars{display:inline-flex; gap:2px; align-items:flex-end; height:12px}
.sound-toggle .bars i{width:2px; height:4px; background:currentColor; border-radius:1px}
.sound-toggle[aria-pressed="true"] .bars i{animation:eq 1s ease-in-out infinite}
.sound-toggle[aria-pressed="true"] .bars i:nth-child(2){animation-delay:.2s}
.sound-toggle[aria-pressed="true"] .bars i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:4px} 50%{height:12px}}
@media (hover:none), (pointer:coarse){ .sound-toggle{display:none} }

@media (min-width: 60rem){
  .wrap{max-width:62rem}
  .files{grid-template-columns:1fr 1fr; align-items:start}
  .res{grid-template-columns:1fr 1fr}
  .soon-card{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); padding:2rem; align-items:center}
  .advent{justify-self:end; width:100%}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important; animation:none!important}
}

[hidden]{display:none!important}

/* ---------- Navigation ---------- */
.topnav{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem;
  padding-block:1rem; border-bottom:1px solid var(--rule);
}
.topnav .brand{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  font-family:var(--mono); font-size:.85rem; letter-spacing:.06em; color:var(--fg);
}
.topnav .brand svg{color:var(--brass); transition:transform .4s cubic-bezier(.2,1.4,.4,1)}
.topnav .brand .tld{color:var(--brass)}
.topnav .brand:hover svg{transform:rotate(45deg)}
.topnav .brand:hover{color:var(--accent)}
.topnav .links{display:flex; flex-wrap:wrap; gap:.25rem 1.1rem}
.topnav .links a{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--muted); padding-block:.25rem;
}
.topnav .links a:hover, .topnav .links a[aria-current="page"]{color:var(--fg); box-shadow:0 1.5px 0 var(--brass)}

/* ---------- Pièces complémentaires (dans les dossiers) ---------- */
.annex{margin:0 0 1.1rem; border-top:1.5px dashed rgba(43,32,48,.3)}
.annex > summary{
  list-style:none; cursor:pointer; padding:.75rem 0 .2rem; display:flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#4A2273;
}
.annex > summary::-webkit-details-marker{display:none}
.annex > summary::before{
  content:"+"; display:inline-grid; place-items:center; width:1.1rem; height:1.1rem;
  border:1.5px solid currentColor; border-radius:2px; font-size:.85rem; line-height:1;
  transition:transform .2s ease;
}
.annex[open] > summary::before{content:"−"}
.annex-body{padding-top:.4rem}
.annex-body h4{font-family:var(--typewriter); font-weight:400; font-size:.9rem; margin:1rem 0 .4rem; color:#2B2030}
.annex-body h4:first-child{margin-top:.4rem}
.annex-lead{font-size:.9rem; margin:0 0 .5rem!important}
.menu-tight li{padding:.45rem 0}
.menu-tight .n{font-weight:500}
.notes{margin:0; padding-left:1.1rem; font-size:.92rem; color:#4A3D52; display:grid; gap:.4rem}
.case[open] .annex[open] .annex-body{animation:note-in .3s ease-out}

/* ---------- Cahier : sous-titre et phases ---------- */
.soon-text > p.soon-sub{
  font-family:var(--display); font-style:italic; font-size:1.2rem; color:var(--accent); margin:-.35rem 0 .9rem;
}
.phases{list-style:none; margin:0 0 1.1rem; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; counter-reset:phase}
.phases li{
  counter-increment:phase; display:inline-flex; align-items:center; gap:.45rem;
  font-size:.92rem; padding:.3rem .65rem .3rem .35rem; border:1px solid var(--rule); border-radius:999px;
}
.phases li::before{
  content:counter(phase); display:inline-grid; place-items:center; width:1.35rem; height:1.35rem; border-radius:50%;
  background:var(--brass); color:var(--bg); font-family:var(--mono); font-size:.72rem; font-weight:500;
}

/* ---------- Formulaire « déposition » ---------- */
.deposition{
  --sheet:#F8F2E4; --typed:#2B2030;
  background:var(--sheet); color:var(--typed); border-radius:4px; padding:1.4rem 1.2rem 1.3rem;
  display:grid; gap:1rem; max-width:40rem;
  box-shadow:0 1px 0 rgba(0,0,0,.2), 0 16px 30px -20px rgba(0,0,0,.7);
}
.depo-head{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.25rem 1rem; margin:0;
  font-family:var(--typewriter); font-size:.85rem; color:#5B4A3A;
  padding-bottom:.6rem; border-bottom:1.5px solid rgba(43,32,48,.25);
}
.hp{display:none!important}
.field-row{display:grid; gap:1rem}
.field{display:grid; gap:.3rem; min-width:0}
.field label{font-family:var(--typewriter); font-size:.88rem}
.field .opt{color:#6B5A6E}
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-family:var(--body); font-size:1rem; color:var(--typed);
  background:rgba(255,255,255,.55); border:1px solid rgba(43,32,48,.28); border-radius:3px;
  padding:.6rem .7rem; color-scheme:light;
}
.field textarea{resize:vertical; min-height:7rem; line-height:1.5}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid #6A2FA3; outline-offset:1px; border-color:#6A2FA3}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{border-color:#A3262F}
.rgpd{margin:0; font-size:.85rem; color:#5A4A62}
.form-foot{display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem}
.deposition .btn-primary{background:#4A2273; border-color:#4A2273; color:#FFFCF5}
.deposition .btn-primary[disabled]{opacity:.6; cursor:wait}
.form-status{margin:0; font-size:.92rem; min-width:0}
.form-status.ok{color:#2F6B3A}
.form-status.err{color:#A3262F}
@media (min-width: 40rem){ .field-row{grid-template-columns:1fr 1fr} }

/* ---------- Page Ressources ---------- */
.res-hero{padding-block:2.5rem 1.5rem}
.res-hero h1{font-family:var(--display-sc); font-weight:400; font-size:clamp(2.6rem, 11vw, 4rem); line-height:1; margin:0 0 .8rem}
.res-hero .lede{margin-bottom:0}
.res-tools{display:grid; gap:.9rem; margin-bottom:1.5rem}
.search{
  width:100%; max-width:28rem; font:inherit; font-size:1rem; color:var(--fg);
  background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:.65rem .8rem;
}
.search::placeholder{color:var(--muted)}
.search:focus{outline:2px solid var(--brass); outline-offset:1px}
.chips{display:flex; flex-wrap:wrap; gap:.4rem}
.chip{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; cursor:pointer;
  background:transparent; color:var(--fg); border:1px solid var(--rule); border-radius:999px; padding:.4rem .8rem;
  transition:border-color .15s ease, background-color .15s ease;
}
.chip:hover{border-color:var(--brass)}
.chip[aria-pressed="true"]{background:var(--brass); border-color:var(--brass); color:var(--bg)}
.chip .c{opacity:.7; margin-left:.3rem; font-variant-numeric:tabular-nums}
.res-count{font-family:var(--mono); font-size:.78rem; color:var(--muted); margin:0}

.res-grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); padding-bottom:2rem}
.card-res{
  --card:#FBF7EE; --typed:#2B2030;
  position:relative; background:var(--card); color:var(--typed); border-radius:3px;
  padding:2.3rem 1rem 1rem; min-width:0; display:grid; gap:.45rem; align-content:start;
  background-image:
    linear-gradient(#B3415A, #B3415A),
    repeating-linear-gradient(transparent 0 1.55rem, rgba(60,90,160,.13) 1.55rem calc(1.55rem + 1px));
  background-size:100% 1.5px, 100% 100%;
  background-position:0 1.85rem, 0 1.9rem;
  background-repeat:no-repeat, no-repeat;
  box-shadow:0 1px 0 rgba(0,0,0,.2), 0 12px 24px -18px rgba(0,0,0,.7);
  transition:transform .2s ease;
}
.card-res .cat{
  position:absolute; top:.6rem; left:1rem; margin:0;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:#6A2FA3;
}
.card-res h2{font-family:var(--display); font-weight:400; font-size:1.22rem; line-height:1.25; margin:0; text-wrap:balance}
.card-res .state{font-family:var(--typewriter); font-size:.8rem; color:#6B5A48; margin:0}
.res-empty{color:var(--muted); padding-block:1rem 3rem}
@media (hover:hover) and (pointer:fine){
  .card-res:hover{transform:translateY(-3px) rotate(-.4deg)}
}

/* ---------- Cartes ressources cliquables ---------- */
a.card-res{text-decoration:none}
.card-res .ex{font-size:.92rem; line-height:1.45; color:#4A3D52}
.card-res .state{margin-top:.2rem}
a.card-res:focus-visible{outline:2px solid var(--brass); outline-offset:3px}

/* ---------- Page d'une fiche ---------- */
.art{max-width:44rem; padding-block:2rem 1rem}
.art-head{padding-bottom:1.5rem; margin-bottom:1.75rem; border-bottom:1px solid var(--rule)}
.crumbs{font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 1rem}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--brass)}
.art h1{font-family:var(--display); font-weight:400; font-size:clamp(2rem, 7vw, 2.9rem); line-height:1.08; margin:0 0 1rem; text-wrap:balance}
.art-meta{display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; margin:0; font-family:var(--typewriter); font-size:.88rem; color:var(--muted)}

.prose{font-size:1.1rem; line-height:1.7; min-width:0}
.prose > *{margin-block:0 1.1rem; max-width:65ch}
.prose h2{font-family:var(--display-sc); font-weight:400; font-size:1.7rem; line-height:1.15; margin:2.4rem 0 .9rem; color:var(--fg); text-wrap:balance}
.prose h3{font-family:var(--display); font-weight:400; font-size:1.35rem; line-height:1.2; margin:1.8rem 0 .6rem; color:var(--accent)}
.prose h3 strong, .prose h2 strong{font-weight:inherit}
.prose h4{font-family:var(--typewriter); font-weight:400; font-size:1.05rem; margin:1.4rem 0 .5rem}
.prose strong{font-weight:700; color:var(--fg)}
.prose a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:.18em; overflow-wrap:anywhere}
.prose a:hover{color:var(--brass)}
.prose ul, .prose ol{padding-left:1.3rem}
.prose li{margin-bottom:.35rem}
.prose li::marker{color:var(--brass)}
.prose hr{border:0; height:1.2rem; margin:2rem 0; max-width:65ch; position:relative}
.prose hr::before{
  content:"✦"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color:var(--brass); font-size:.8rem; background:var(--bg); padding:0 .8rem;
}
.prose hr::after{content:""; position:absolute; left:0; right:0; top:50%; border-top:1px solid var(--rule); z-index:-1}
.prose hr{isolation:isolate}
.prose blockquote{
  margin-inline:0; padding:1rem 1.1rem; background:#D8C298; color:#2B2030; border-radius:3px;
  font-size:1.02rem; box-shadow:0 10px 22px -16px rgba(0,0,0,.7);
}
.prose blockquote p{margin:0 0 .6rem} .prose blockquote p:last-child{margin-bottom:0}
.prose blockquote strong{color:#2B2030}
.prose blockquote a{color:#4A2273}
.prose code{font-family:var(--mono); font-size:.9em; background:var(--surface); padding:.1rem .35rem; border-radius:3px}
.table-scroll{overflow-x:auto; max-width:100%; margin-bottom:1.4rem; border:1px solid var(--rule); border-radius:6px}
.table-scroll table{border-collapse:collapse; width:100%; min-width:30rem; font-size:.95rem; line-height:1.45}
.table-scroll th, .table-scroll td{padding:.6rem .75rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule)}
.table-scroll th{font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--brass); background:var(--surface)}
.table-scroll tr:last-child td{border-bottom:0}
.art-btns{display:flex; flex-wrap:wrap; gap:.6rem}
.art-btns .btn{font-size:.95rem; padding:.6rem .95rem}

.split-chart{margin:0 0 1.5rem; max-width:65ch}
.split-chart figcaption{font-family:var(--typewriter); font-size:.9rem; color:var(--muted); margin-bottom:.6rem}
.split-bar{display:flex; height:2.2rem; border-radius:4px; overflow:hidden; gap:2px}
.split-bar span{flex:var(--w) 0 0; min-width:0}
.s1{background:#5E3A86} .s2{background:#7D58A8} .s3{background:#9C7EC2} .s4{background:#BBA6D8}
.s5{background:var(--brass)} .s6{background:#8A7F92}
.split-legend{list-style:none; padding:0!important; margin:.8rem 0 0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap:.35rem 1rem; font-size:.95rem}
.split-legend li{display:flex; align-items:center; gap:.5rem; margin:0}
.split-legend i{width:.8rem; height:.8rem; border-radius:2px; flex:none}
.split-legend b{font-family:var(--mono); font-weight:500; margin-left:auto; font-variant-numeric:tabular-nums}
.split-legend .me{color:var(--brass); font-weight:700}

.art-end{max-width:44rem; padding-block:1rem 2rem; display:grid; gap:1.5rem}
.art-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.2rem; border:1.5px dashed var(--brass); border-radius:8px; background:var(--surface);
}
.art-cta p{margin:0; font-family:var(--display); font-size:1.25rem; line-height:1.25; flex:1 1 16rem; min-width:0}
.related-h{font-family:var(--display-sc); font-weight:400; font-size:1.35rem; margin:0}
.related{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.related a{display:grid; gap:.1rem; text-decoration:none; padding:.8rem 1rem; border:1px solid var(--rule); border-radius:6px; background:var(--surface)}
.related a:hover{border-color:var(--brass)}
.related .t{font-weight:700} .related .s{font-family:var(--mono); font-size:.75rem; color:var(--muted)}
.back{margin:0} .back a{color:var(--muted); font-family:var(--mono); font-size:.85rem; text-decoration:none}
.back a:hover{color:var(--fg)}
.legal .prose{font-size:1rem}

/* ---------- Bandeau du cahier : couverture et dossier ---------- */
.soon-cover{margin:0; justify-self:center; width:min(70vw, 17rem); max-width:100%; position:relative; z-index:3}
.soon-hook{margin:0 0 1rem; padding:0 0 0 1rem; border-left:2px solid var(--brass); max-width:34rem}
.soon-hook p{margin:0; font-family:var(--display); font-size:1.3rem; line-height:1.3; color:var(--fg)}
.soon-hook em{color:var(--accent)}
.soon-hook p.hook-src{margin-top:.4rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.soon-text > p strong{color:var(--fg); font-weight:500}

.soon-more{margin:0 0 1.1rem; border-top:1px dashed var(--rule); border-bottom:1px dashed var(--rule)}
.soon-more > summary{
  list-style:none; cursor:pointer; padding:.75rem 0; display:flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass);
}
.soon-more > summary::-webkit-details-marker{display:none}
.soon-more > summary::before{
  content:"+"; display:inline-grid; place-items:center; width:1.1rem; height:1.1rem;
  border:1.5px solid currentColor; border-radius:2px; font-size:.85rem; line-height:1;
}
.soon-more[open] > summary::before{content:"−"}
.soon-more[open] > summary{color:var(--fg)}
.soon-more-body{padding-bottom:1rem}
.soon-more[open] .soon-more-body{animation:note-in .3s ease-out}
.soon-more-body h3{font-family:var(--typewriter); font-weight:400; font-size:.95rem; color:var(--brass); margin:1rem 0 .5rem}
.soon-more-body h3:first-child{margin-top:.25rem}
.soon-more-body p{color:var(--muted); margin:0; max-width:52ch}
.ritual{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem .25rem; align-items:center}
.ritual li{font-size:.9rem; padding:.25rem .6rem; border:1px solid var(--rule); border-radius:3px}
.ritual li:not(:last-child)::after{content:"→"; margin-left:.6rem; color:var(--brass)}
.ritual li:not(:last-child){border-right-color:var(--rule)}
.checks{list-style:none; margin:0; padding:0; display:grid; gap:.45rem; max-width:52ch}
.checks li{position:relative; padding-left:1.6rem; color:var(--muted); font-size:.95rem; line-height:1.45}
.checks li::before{
  content:"✓"; position:absolute; left:0; top:.05rem; width:1.05rem; height:1.05rem;
  display:grid; place-items:center; font-size:.75rem; font-weight:700;
  border:1.5px solid var(--brass); border-radius:2px; color:var(--brass);
}

@media (min-width: 60rem){
  .soon-card{grid-template-columns:17rem minmax(0,1fr); align-items:start; gap:2.5rem}
  .soon-cover{width:100%; position:sticky; top:1.5rem}
}


/* ---------- « vendre » au feutre rouge ---------- */
.vendre{position:relative; color:var(--vendre); white-space:nowrap}
.swash{position:absolute; left:-2%; right:-2%; bottom:-.14em; width:104%; height:.28em; overflow:visible}
.swash path{fill:none; stroke:var(--vendre); stroke-width:2.6; stroke-linecap:round; vector-effect:non-scaling-stroke;
  stroke-dasharray:130; stroke-dashoffset:0; transition:stroke-dashoffset .6s ease}
@media (hover:hover) and (pointer:fine){
  .soon-card:hover .swash path{animation:swash .7s ease-out}
}
@keyframes swash{from{stroke-dashoffset:130} to{stroke-dashoffset:0}}

/* ---------- Phases : réactions au survol ---------- */
.phases li{transition:transform .16s ease, border-color .16s ease}
.phases li::before{transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
@media (hover:hover) and (pointer:fine){
  .phases li:hover{transform:translateY(-3px); border-color:var(--brass)}
  .phases li:hover::before{transform:rotate(-12deg) scale(1.15)}
}

/* ---------- Le cahier qui s'ouvre ---------- */
.book{all:unset; display:block; width:100%; cursor:pointer; -webkit-tap-highlight-color:transparent}
.book:focus-visible{outline:2px solid var(--brass); outline-offset:6px; border-radius:4px}
.book-inner{
  display:block; position:relative; width:100%; aspect-ratio:480 / 621;
  perspective:2000px; perspective-origin:0% 50%;
  transform-origin:0 50%;
  transform:translateX(var(--tx, 0px)) scale(var(--s, 1)) rotate(-2.5deg);
  transition:transform .75s cubic-bezier(.3,.7,.2,1);
}
.book-page, .book-face{position:absolute; inset:0; display:block; border-radius:2px 3px 3px 2px; overflow:hidden; background:#FFFCF5}
.book-page img, .book-face img, .book-page picture, .book-face picture{display:block; width:100%; height:100%; object-fit:cover}
.book-right{box-shadow:0 2px 0 rgba(0,0,0,.25), 0 22px 40px -18px rgba(0,0,0,.75); opacity:0; transition:opacity .2s ease .1s}
.book-right::after{ /* creux de la reliure, côté droit */
  content:""; position:absolute; inset:0 auto 0 0; width:14%; pointer-events:none;
  background:linear-gradient(90deg, rgba(40,20,50,.32), rgba(40,20,50,0));
}
.book-cover{
  position:absolute; inset:0; display:block; transform-origin:0 50%; transform-style:preserve-3d;
  transition:transform .95s cubic-bezier(.5,.05,.2,1);
}
.book-front{backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 2px 0 rgba(0,0,0,.25), 0 22px 40px -18px rgba(0,0,0,.75)}
.book-back{transform:rotateY(180deg); backface-visibility:hidden; -webkit-backface-visibility:hidden}
.book-back::after{ /* creux de la reliure, côté gauche */
  content:""; position:absolute; inset:0 0 0 auto; width:14%; pointer-events:none;
  background:linear-gradient(270deg, rgba(40,20,50,.32), rgba(40,20,50,0));
}

/* survol : on soulève le cahier et on entrouvre la couverture */
.book.is-peek .book-inner{transform:translateX(var(--tx, 0px)) scale(var(--s, 1)) rotate(0deg) translateY(-4px)}
.book.is-peek .book-right{opacity:1}
.book.is-peek .book-cover{transform:rotateY(-16deg)}
/* ouverture complète */
.book.is-open .book-inner{transform:translateX(var(--tx, 0px)) scale(var(--s, 1)) rotate(0deg)}
.book.is-open .book-right{opacity:1; transition-delay:0s}
.book.is-open .book-cover{transform:rotateY(-180deg)}
.book.is-open .book-back{box-shadow:0 2px 0 rgba(0,0,0,.25), 0 22px 40px -18px rgba(0,0,0,.75)}

.book-hint{
  margin-top:1.1rem; text-align:center; font-family:var(--typewriter); font-size:.85rem; color:var(--muted);
  transition:opacity .3s ease;
}
.soon-cover.has-open .book-hint{opacity:0}
@media (prefers-reduced-motion: reduce){
  .book-inner, .book-cover, .book-right{transition:none!important}
}

/* =========================================================
   Fiches : fil de lecture, tampon, sommaire, sources, visuels
   ========================================================= */
.readbar{position:fixed; inset:0 0 auto; height:calc(3px + env(safe-area-inset-top, 0px)); z-index:30; pointer-events:none}
.readbar i{position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, var(--accent), var(--brass));
  transform-origin:0 50%; transform:scaleX(var(--p, 0))}

.verified{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem; margin:1rem 0 0; font-size:.9rem; color:var(--muted)}
.v-stamp{
  display:inline-block; transform:rotate(-6deg); font-family:var(--mono); font-weight:500; font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent); border:2px solid var(--accent); border-radius:3px;
  padding:.18rem .5rem; animation:stamp-in .5s cubic-bezier(.2,1.6,.4,1) .2s both;
}
@keyframes stamp-in{from{transform:rotate(-14deg) scale(1.8); opacity:0} to{transform:rotate(-6deg) scale(1); opacity:1}}
.v-txt{font-family:var(--typewriter)}
.upd{flex-basis:100%; font-size:.85rem; color:var(--brass)}

.toc{margin-top:1.1rem; border:1px solid var(--rule); border-radius:6px; background:var(--surface)}
.toc > summary{cursor:pointer; list-style:none; padding:.7rem .9rem; display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase}
.toc > summary::-webkit-details-marker{display:none}
.toc > summary span{color:var(--muted); letter-spacing:.04em}
.toc ol{margin:0; padding:0 .9rem .9rem 2.2rem; display:grid; gap:.3rem; font-size:.95rem}
.toc a{color:var(--fg); text-decoration:none}
.toc a:hover{color:var(--accent)}
.toc li::marker{color:var(--brass); font-family:var(--mono); font-size:.8em}

.prose h2{position:relative; padding-bottom:.35rem; scroll-margin-top:1.5rem}
.prose h2::after{content:""; position:absolute; left:0; bottom:0; width:2.5rem; height:2px; background:var(--brass);
  transform-origin:0 50%; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.prose h2.pre::after{transform:scaleX(0)}

.sources{margin-top:2.5rem; padding:1.2rem 1.1rem; border:1.5px dashed var(--rule); border-radius:8px; max-width:65ch}
.sources h2{font-family:var(--display-sc); font-weight:400; font-size:1.35rem; margin:0 0 .2rem}
.sources-lead{margin:0 0 .8rem; color:var(--muted); font-size:.92rem}
.sources ol{margin:0; padding-left:1.4rem; display:grid; gap:.45rem; font-size:.92rem}
.sources li::marker{font-family:var(--mono); color:var(--brass)}
.sources a{color:var(--fg); overflow-wrap:anywhere; text-underline-offset:.18em}
.sources a:hover{color:var(--accent)}

/* --- socle commun des visuels --- */
.viz{margin:1.6rem 0 1.8rem; padding:1.1rem 1rem 1rem; border:1px solid var(--rule); border-radius:8px; background:var(--surface); max-width:65ch}
.viz figcaption{font-family:var(--typewriter); font-size:.92rem; color:var(--fg); margin:0 0 .9rem}
.viz-note{font-family:var(--body); font-size:.82rem; color:var(--muted)}
.viz > .viz-note{margin:.7rem 0 0}

/* ISBN */
.isbn-num{margin:.2rem 0 1rem; font-family:var(--mono); font-size:clamp(1.3rem, 6vw, 2rem); letter-spacing:.04em; display:flex; flex-wrap:wrap; gap:0 .1rem; font-variant-numeric:tabular-nums}
.isbn-num .seg{padding:0 .15rem .1rem; border-bottom:3px solid currentColor; transition:transform .25s ease, opacity .4s ease}
.isbn-num .dash{color:var(--muted)}
.viz-isbn .i1{color:var(--accent)} .viz-isbn .i2{color:var(--brass)} .viz-isbn .i3{color:color-mix(in srgb, var(--accent) 60%, var(--fg))}
.viz-isbn .i4{color:#C98A6A} .viz-isbn .i5{color:#5E9C8C}
.isbn-legend{list-style:none; padding:0; margin:0; display:grid; gap:.35rem; font-size:.93rem}
.isbn-legend li{display:grid; grid-template-columns:.8rem 4.2rem minmax(0,1fr); align-items:baseline; gap:.5rem}
.isbn-legend i{width:.7rem; height:.7rem; border-radius:2px; background:currentColor; align-self:center}
.isbn-legend b{font-family:var(--mono); font-weight:500; color:var(--fg)}
.viz-isbn.pre .seg{opacity:0; transform:translateY(.4rem)}
.viz-isbn .seg:nth-of-type(2){transition-delay:.1s} .viz-isbn .seg:nth-of-type(3){transition-delay:.2s}
.viz-isbn .seg:nth-of-type(4){transition-delay:.3s} .viz-isbn .seg:nth-of-type(5){transition-delay:.4s}
@media (hover:hover){ .isbn-num .seg:hover{transform:translateY(-3px)} }

/* Simulateur */
.calc-grid{display:grid; gap:1.2rem}
.calc-in{display:grid; gap:.55rem; min-width:0}
.calc-in label{display:flex; justify-content:space-between; gap:1rem; font-size:.92rem}
.calc-in output{font-family:var(--mono); color:var(--brass); font-variant-numeric:tabular-nums}
.calc-in input[type=range]{width:100%; accent-color:var(--accent)}
.calc-seg{border:0; padding:0; margin:.3rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem}
.calc-seg legend{font-size:.8rem; font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; padding:0}
.calc-seg label{display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--rule); border-radius:999px; padding:.3rem .7rem; cursor:pointer; font-size:.88rem}
.calc-seg label:has(input:checked){border-color:var(--accent); color:var(--accent)}
.calc-seg input{accent-color:var(--accent); margin:0}
.calc-out{margin:0; display:grid; gap:.1rem; align-content:start}
.calc-out div{display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0; border-bottom:1px solid var(--rule); font-size:.92rem}
.calc-out dt{color:var(--muted); min-width:0}
.calc-out dd{margin:0; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.calc-out .calc-main dt{color:var(--fg); font-weight:700}
.calc-out .calc-main dd{color:var(--brass); font-size:1.15rem; font-weight:500}
.calc-note{margin:.8rem 0 0; font-size:.85rem; color:var(--fg)}
.calc-msg{margin:.3rem 0 0; font-size:.85rem; color:var(--muted)}
.calc-msg.warn{color:var(--vendre)}
.bump{animation:bump .3s ease}
@keyframes bump{40%{transform:scale(1.08)}}
@media (min-width:40rem){ .calc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }

/* Fonds KDP */
.fund-chart{position:relative}
.fund-svg{width:100%; height:auto; display:block; overflow:visible}
.fund-svg .grid line{stroke:var(--rule); stroke-width:1}
.fund-svg .grid text, .fund-svg .xl{fill:var(--muted); font-family:var(--mono); font-size:10px}
.fund-svg .bar{fill:var(--accent); transition:opacity .2s ease, transform .7s cubic-bezier(.2,.8,.2,1); transform-box:fill-box; transform-origin:50% 100%}
.fund-svg .bar.first{fill:var(--brass)}
.fund-svg .bar:hover, .fund-svg .bar:focus{opacity:.75; outline:none}
.fund-svg .vl{fill:var(--fg); font-family:var(--mono); font-size:10px; font-weight:500}
.viz-fund.pre .bar{transform:scaleY(0)}
.fund-tip{position:absolute; pointer-events:none; background:var(--bg); color:var(--fg); border:1px solid var(--rule); border-radius:4px;
  padding:.3rem .5rem; font-family:var(--mono); font-size:.78rem; white-space:nowrap; transform:translate(-50%, -110%)}

/* Entonnoir */
.funnel{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.funnel li{display:grid; gap:.3rem}
.f-bar{display:block; width:var(--w); min-width:6.5rem; padding:.45rem .7rem; border-radius:4px; background:var(--accent); color:var(--btn-fg);
  font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; transition:width .8s cubic-bezier(.2,.8,.2,1)}
.funnel li:nth-child(2) .f-bar{background:color-mix(in srgb, var(--accent) 75%, var(--brass))}
.funnel li:nth-child(3) .f-bar{background:var(--brass)}
.f-txt{font-size:.93rem; color:var(--muted)}
.viz-funnel.pre .f-bar{width:6.5rem}

/* Focalisations */
.focal-grid{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 11rem), 1fr))}
.focal{border:1px solid var(--rule); border-radius:6px; padding:.75rem; min-width:0}
.focal h4{margin:0; font-family:var(--display); font-weight:400; font-size:1.1rem}
.focal-sub{margin:.1rem 0 .7rem; font-size:.85rem; color:var(--muted)}
.kb{display:grid; grid-template-columns:5.5rem minmax(0,1fr); align-items:center; gap:.5rem; font-size:.8rem; margin-top:.35rem}
.kb span{font-family:var(--mono); color:var(--muted)}
.kb i{display:block; height:.55rem; width:var(--k); border-radius:0 4px 4px 0; background:var(--accent); transition:width .8s cubic-bezier(.2,.8,.2,1)}
.kb + .kb i{background:var(--brass)}
.viz-focal.pre .kb i{width:0}

/* Enveloppe */
.viz-envelope{background:transparent; border:0; padding:0}
.env{position:relative; background:#EFE6D3; color:#2B2030; border-radius:4px; padding:1.2rem 1.1rem 1.4rem; min-height:11rem;
  box-shadow:0 1px 0 rgba(0,0,0,.2), 0 16px 30px -20px rgba(0,0,0,.7);
  background-image:linear-gradient(135deg, transparent 49.5%, rgba(43,32,48,.12) 50%, transparent 50.5%),
                   linear-gradient(225deg, transparent 49.5%, rgba(43,32,48,.12) 50%, transparent 50.5%);
  background-size:100% 60%; background-repeat:no-repeat}
.env-stamp{position:absolute; top:.9rem; right:.9rem; width:9.5rem; display:grid; gap:.1rem; text-align:center;
  border:2px solid #6A2FA3; color:#6A2FA3; border-radius:4px; padding:.35rem .4rem; transform:rotate(-7deg);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.25;
  transition:transform .45s cubic-bezier(.2,1.6,.4,1), opacity .3s ease}
.env-stamp span:first-child{font-weight:500; font-size:.7rem}
.env-addr{margin-top:4.6rem; margin-left:auto; width:max-content; max-width:100%; font-family:var(--typewriter); font-size:.92rem; line-height:1.45}
.viz-envelope figcaption{margin:.7rem 0 0; font-size:.88rem; color:var(--muted)}
.viz-envelope.pre .env-stamp{transform:rotate(-16deg) scale(1.9); opacity:0}

/* Longueur des chapitres */
.ranges{display:grid; gap:.7rem}
.rg{display:grid; gap:.25rem}
.rg-l{font-size:.9rem}
.rg-t{position:relative; display:block; height:1.6rem; background:linear-gradient(90deg, var(--rule) 1px, transparent 1px) 0 0/25% 100%; border-bottom:1px solid var(--rule)}
.rg-t i{position:absolute; top:.3rem; bottom:.3rem; left:calc(var(--a) / 8000 * 100%); width:calc((var(--b) - var(--a)) / 8000 * 100%);
  background:var(--accent); border-radius:4px; transition:transform .7s cubic-bezier(.2,.8,.2,1); transform-origin:0 50%}
.rg-t b{position:absolute; top:50%; transform:translateY(-50%); left:calc(var(--b, 0) / 8000 * 100%); font-family:var(--mono); font-weight:500; font-size:.75rem}
.rg:nth-child(1) .rg-t b{left:calc(2000 / 8000 * 100% + .5rem)}
.rg:nth-child(2) .rg-t b{left:calc(2500 / 8000 * 100% + .5rem)}
.rg:nth-child(3) .rg-t b{left:auto; right:calc(0% + .4rem); color:var(--btn-fg)}
.rg-axis{display:flex; justify-content:space-between; margin-top:.3rem; font-family:var(--mono); font-size:.7rem; color:var(--muted)}
.viz-ranges.pre .rg-t i{transform:scaleX(0)}

/* Actes d'une nouvelle */
.acts{display:flex; gap:2px; border-radius:6px; overflow:hidden}
.acts span{flex:var(--w) 1 0; min-width:0; padding:.6rem .6rem; background:var(--accent); color:var(--btn-fg); font-size:.85rem; display:grid; gap:.1rem;
  transition:flex-grow .8s cubic-bezier(.2,.8,.2,1)}
.acts span:nth-child(2){background:color-mix(in srgb, var(--accent) 70%, var(--brass))}
.acts span:nth-child(3){background:var(--brass)}
.acts b{font-family:var(--mono); font-weight:500}
.viz-acts.pre .acts span{flex-grow:1}

@media (prefers-reduced-motion: reduce){
  .v-stamp{animation:none}
  .viz.pre *, .prose h2.pre::after{transition:none!important}
}

/* ---------- Lien affilié ---------- */
.aff-tag{font-family:var(--mono); font-weight:400; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.1rem .35rem; border:1px solid currentColor; border-radius:3px; opacity:.85; white-space:nowrap}
.soon-text > p.aff-note{margin:.9rem 0 0; font-size:.82rem; line-height:1.45; color:var(--muted); max-width:52ch}
.aff-k{font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brass);
  border:1px solid var(--rule); border-radius:3px; padding:.08rem .35rem; margin-right:.4rem}