/*
Theme Name: L’Espace entre
Theme URI: https://play.philosophiai.com/
Description: Thème enfant d'Astra pour « L’Espace entre » : philosophie, conscience, intelligence et sagesse. Pages en blocs natifs, instruments interactifs en blocs « Instrument », jeu d'entrée, miroir guidé, atelier et mur modéré.
Author: Intelligence Anonyme
Template: astra
Version: 1.0.0
Requires at least: 6.8
Requires PHP: 7.4
Text Domain: espace-entre
License: GNU General Public License v2 or later
*/

/* Layout: une seule colonne de lecture qui s’élargit pour les « instruments » interactifs ; chaque notion est un chapitre, étiqueté par le récit et l’année d’où elle vient. Le titre se reflète comme dans l’eau. */
:root{
  --bg:#E7EAEF;        /* papier argenté, froid */
  --surface:#F3F5F8;   /* verre clair des instruments */
  --ink:#141826;       /* encre */
  --muted:#596177;     /* encre diluée */
  --line:#BCC3CF;      /* filets */
  --accent:#225D6A;    /* eau profonde du miroir */
  --glint:#8792A8;     /* mercure */
  --saffron:#A85F00;   /* Līlā : le jeu */
  --f-display:"Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body:"Newsreader", "Iowan Old Style", Georgia, serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter:clamp(16px, 4vw, 48px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1017; --surface:#151B27; --ink:#E2E6EE; --muted:#9AA3B6; --line:#2A3243;
    --accent:#7DC3CE; --glint:#5E6982; --saffron:#EFAE48; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1017; --surface:#151B27; --ink:#E2E6EE; --muted:#9AA3B6; --line:#2A3243;
  --accent:#7DC3CE; --glint:#5E6982; --saffron:#EFAE48; color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:1.125rem; line-height:1.65;
  font-optical-sizing:auto;
  padding-inline:var(--gutter); padding-block:0;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:var(--bg)}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{max-width:1160px;margin-inline:auto}
.prose{max-width:64ch}
.prose p{margin:0 0 1em}
h1,h2,h3{font-family:var(--f-display);font-weight:500;text-wrap:balance;margin:0;font-optical-sizing:auto}
h2{font-size:clamp(2rem, 4.6vw, 3.4rem);line-height:1.12;letter-spacing:-.01em}
h2 em,h1 em{font-style:italic;color:var(--accent)}
h3{font-size:clamp(1.3rem, 2.2vw, 1.6rem);line-height:1.25}
:is(.label,.is-style-surtitre){font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--f-mono);font-size:.86em}
.muted{color:var(--muted)}

/* ——— Navigation ——— */
.topnav{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
  margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topnav .wrap{display:flex;align-items:center;gap:24px;min-height:52px}
.brand{font-family:var(--f-display);font-style:italic;font-size:1.15rem;text-decoration:none;color:var(--ink);white-space:nowrap}
.navlinks{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-left:auto}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;text-decoration:none;color:var(--muted);padding:6px 10px;border-radius:999px;white-space:nowrap}
.navlinks a:hover,.navlinks a.on{color:var(--ink);background:color-mix(in srgb, var(--accent) 12%, transparent)}
@media (max-width:640px){.brand{display:none}.navlinks{margin-left:0}}

/* ——— Hero ——— */
.hero{padding-block:clamp(48px, 9vw, 110px) clamp(40px, 6vw, 80px)}
.hero :is(.label,.is-style-surtitre){display:block;margin-bottom:28px}
.mtitle{font-size:clamp(3.2rem, 11.5vw, 8.4rem);font-family:var(--f-display);line-height:.98;letter-spacing:-.02em}
.mtitle h1{font-size:1em;line-height:.98;font-weight:500}
.refl{height:.62em;overflow:hidden;margin-top:.04em;opacity:.38;filter:url(#ripple);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 92%);mask-image:linear-gradient(to bottom, #000 0%, transparent 92%);
  user-select:none;pointer-events:none}
.refl > div{transform:scaleY(-1);transform-origin:50% 50%;line-height:.98;font-weight:500;height:1.8em}
.refl em{font-style:italic;color:var(--accent)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:end;margin-top:8px}
@media (max-width:860px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
:is(.lead,.is-style-chapo){font-size:clamp(1.2rem, 2vw, 1.42rem);line-height:1.55;max-width:34ch}
:is(.lead,.is-style-chapo) strong{font-weight:500;font-style:italic;color:var(--accent)}
.hero-sub{color:var(--muted);max-width:52ch;margin:0}

/* ——— Instrument (cartes interactives) ——— */
.instrument{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(18px,3vw,30px)}
.instrument :is(.label,.is-style-surtitre){margin-bottom:14px;display:block}
.instr-title{font-family:var(--f-display);font-size:1.3rem;margin:0 0 4px}

/* Espace pouvoir / vouloir / choisir */
.tracks{display:grid;gap:14px;margin-block:18px 14px}
.track{display:grid;grid-template-columns:7.2em minmax(0,1fr);align-items:center;gap:12px}
.track span{font-family:var(--f-mono);font-size:.74rem;color:var(--muted);line-height:1.25}
.track span b{display:block;color:var(--ink);font-weight:500;font-size:.8rem;letter-spacing:.04em}
.bar{position:relative;height:12px;border-radius:999px;background:color-mix(in srgb, var(--line) 50%, transparent)}
.bar i{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--ink);transition:width .25s ease}
.bar.v i{background:var(--glint)}
.bar.c i{background:var(--accent)}
.bar .gap{position:absolute;top:-5px;bottom:-5px;border-radius:4px;transition:left .25s ease,width .25s ease;
  background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 38%, transparent) 0 2px, transparent 2px 7px);
  border:1px dashed color-mix(in srgb, var(--accent) 70%, transparent)}
.gap-tag{font-family:var(--f-mono);font-size:.72rem;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
.range-row{display:grid;gap:8px;margin-top:6px}
.range-row label{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-mono);font-size:.74rem;color:var(--muted)}
.range-row label output{color:var(--ink)}
input[type=range]{width:100%;accent-color:var(--accent);margin:0}
.caption{font-style:italic;color:var(--muted);margin:14px 0 0;min-height:3.2em;font-size:1.02rem}

/* ——— Chapitres ——— */
:is(.chap,.is-style-chapitre){border-top:1px solid var(--line);padding-block:clamp(64px, 10vw, 130px);scroll-margin-top:52px}
.chap-head{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:clamp(16px,4vw,56px);margin-bottom:clamp(32px,5vw,56px)}
.chap-head .meta{display:grid;gap:6px;align-content:start;padding-top:.7em}
.chap-head .meta .src{font-family:var(--f-body);font-style:italic;color:var(--muted);font-size:.98rem;line-height:1.35}
@media (max-width:760px){.chap-head{grid-template-columns:minmax(0,1fr)}.chap-head .meta{padding-top:0}}
.body-grid{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:clamp(16px,4vw,56px)}
.body-grid > *{grid-column:2;min-width:0}
.body-grid > .wide{grid-column:1 / -1}
@media (max-width:760px){.body-grid{grid-template-columns:minmax(0,1fr)}.body-grid > *{grid-column:1}}
.stack{display:grid;gap:clamp(28px,4vw,48px)}

blockquote{margin:0}
:is(.pull,.is-style-grande-citation){font-family:var(--f-display);font-style:italic;font-size:clamp(1.5rem, 3.2vw, 2.25rem);line-height:1.25;max-width:30ch;text-wrap:balance;margin:0}
:is(.pull,.is-style-grande-citation) + :is(.who,.is-style-source){display:block;margin-top:12px}
:is(.who,.is-style-source){font-family:var(--f-mono);font-size:.74rem;color:var(--muted);letter-spacing:.06em}
.dlg{border-left:1px solid var(--line);padding-left:clamp(14px,2.4vw,24px);max-width:62ch}
.dlg p{margin:0 0 .55em}
.dlg .n{color:var(--muted);font-style:italic}
:is(.big-q,.is-style-grande-question){font-family:var(--f-display);font-size:clamp(1.9rem, 5vw, 3.4rem);line-height:1.1;text-wrap:balance;margin:0;max-width:22ch}
:is(.big-q,.is-style-grande-question) em{color:var(--accent)}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,32px)}
@media (max-width:700px){.split{grid-template-columns:minmax(0,1fr)}}

/* Frontière */
.frontier{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
@media (max-width:760px){.frontier{grid-template-columns:minmax(0,1fr)}}
.frontier svg{width:100%;max-width:300px;height:auto;display:block;margin-inline:auto}
.frontier circle.ring{fill:transparent;stroke:var(--line);stroke-width:1.2;cursor:pointer;transition:stroke .2s,fill .2s}
.frontier circle.ring.in{fill:color-mix(in srgb, var(--accent) 8%, transparent);stroke:var(--accent)}
.frontier circle.ring.edge{stroke-width:2.4}
.frontier text{font-family:var(--f-mono);font-size:9px;fill:var(--muted);letter-spacing:.06em;pointer-events:none}
.frontier text.in{fill:var(--accent)}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.seg button,.chip-btn{font-family:var(--f-mono);font-size:.74rem;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"],.chip-btn[aria-pressed="true"],.seg button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.seg button:hover,.chip-btn:hover{color:var(--ink);border-color:var(--glint)}
.seg button[aria-pressed="true"]:hover,.seg button[aria-selected="true"]:hover{color:var(--bg)}
.kv{display:grid;gap:14px}
.kv div{display:grid;gap:2px}
.kv dt{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kv dd{margin:0;font-size:1.08rem}
.kv dd.out{color:var(--accent);font-style:italic}

/* Comparaison */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--ink)}
.compare > :is(div,p){padding:18px 18px 18px 0;border-bottom:1px solid var(--line)}
.compare > :is(div,p):nth-child(2n){padding-left:18px;border-left:1px solid var(--line)}
.compare .h{font-family:var(--f-display);font-size:1.35rem}
.compare .h em{color:var(--accent)}
.compare .k{display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
@media (max-width:560px){.compare > :is(div,p){padding-right:10px}.compare > :is(div,p):nth-child(2n){padding-left:10px}}

/* Boucle du pouvoir */
.loop{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
@media (max-width:760px){.loop{grid-template-columns:minmax(0,1fr)}}
.loop svg{width:100%;max-width:360px;height:auto;display:block;margin-inline:auto}
.loop .node{fill:var(--surface);stroke:var(--ink);stroke-width:1}
.loop .nt{font-family:var(--f-display);font-size:15px;fill:var(--ink);text-anchor:middle}
.loop .lt{font-family:var(--f-mono);font-size:8.5px;fill:var(--muted);letter-spacing:.08em}
.loop .path{fill:none;stroke:var(--ink);stroke-width:1}
.loop .outer{fill:none;stroke:var(--accent);stroke-width:1;stroke-dasharray:3 5}
.loop .dot{fill:var(--accent)}
.temptation{display:grid;gap:4px;font-family:var(--f-display);font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.2}
.temptation s{text-decoration-thickness:1px;text-decoration-color:var(--glint);color:var(--muted)}
.meters{display:grid;gap:12px;margin-top:12px}

/* Principes */
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
@media (max-width:900px){.principles{grid-template-columns:minmax(0,1fr)}}
.principle{border:1px solid var(--line);border-radius:14px;padding:clamp(20px,2.6vw,28px);display:grid;gap:14px;align-content:start;background:var(--surface)}
.principle .num{font-family:var(--f-display);font-style:italic;font-size:3rem;line-height:1;color:var(--accent)}
.principle p{margin:0;font-size:1.06rem}
.principle :is(.label,.is-style-surtitre){margin-top:auto}

/* Miroir */
.mirror{display:grid;grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr);gap:clamp(14px,2.6vw,28px);align-items:stretch;margin-top:18px}
.mirror .glass{background:linear-gradient(180deg, var(--glint), var(--accent), var(--glint));border-radius:999px;opacity:.55}
@media (max-width:700px){.mirror{grid-template-columns:minmax(0,1fr)}.mirror .glass{height:6px}}
.ask{font-family:var(--f-display);font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.25;margin:6px 0 0}
.worlds{display:grid;gap:10px;margin-top:8px}
.world{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--bg)}
.world :is(.label,.is-style-surtitre){margin:0 0 2px;display:block}
.turn{font-style:italic;color:var(--accent);font-size:1.12rem;margin:14px 0 0}
.after{color:var(--muted);font-size:.98rem;margin:8px 0 0}

/* Dilemmes */
.dilemmas{display:grid;gap:14px}
.dilemma{border-top:1px solid var(--line);padding-top:16px;display:grid;gap:10px}
.dilemma h4{font-family:var(--f-display);font-weight:500;font-size:1.25rem;margin:0}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice-out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;font-size:1rem}
.choice-out div{display:grid;gap:2px}
@media (max-width:560px){.choice-out{grid-template-columns:minmax(0,1fr)}}
:is(.hint,.is-style-indication){font-size:.98rem;color:var(--muted);font-style:italic;margin:0}

/* Penser ensemble */
.tt-canvas{width:100%;height:240px;display:block;border-radius:10px;background:var(--bg)}
.log{display:grid;gap:8px;margin-top:16px;min-height:9em}
.log p{margin:0;display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:10px;font-size:1.02rem}
.log p span{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);padding-top:.35em;letter-spacing:.06em;text-transform:uppercase}
.log p.ia span{color:var(--accent)}
.log p.entre{font-style:italic;color:var(--accent)}
.log p.entre span{color:var(--saffron)}
.btn{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.04em;padding:10px 16px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink)}
.btn:disabled{opacity:.4;cursor:default}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* Consciences */
.reactions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.reactions > :is(div,p){background:var(--bg);padding:14px;display:grid;gap:2px}
.reactions b{font-family:var(--f-display);font-weight:500;font-size:1.3rem;font-style:italic}
.reactions span{font-size:.92rem;color:var(--muted)}
@media (max-width:640px){.reactions{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bestiary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
@media (max-width:1040px){.bestiary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.bestiary{grid-template-columns:minmax(0,1fr)}}
.being{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);display:grid;grid-template-rows:auto 1fr}
.being canvas{width:100%;height:150px;display:block;background:var(--bg);border-bottom:1px solid var(--line)}
.being .txt{padding:14px 16px 18px;display:grid;gap:6px;align-content:start}
.being h4{font-family:var(--f-display);font-weight:500;font-size:1.55rem;margin:0;letter-spacing:.02em}
.being .kind{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.being p{margin:0;font-size:.98rem;line-height:1.5}
.being q{display:block;font-style:italic;color:var(--muted);font-size:.96rem;line-height:1.45;quotes:"« " " »"}
.conf{display:grid;gap:0;border-top:1px solid var(--ink)}
.conf > :is(div,p){display:grid;grid-template-columns:8rem minmax(0,1fr);gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.conf b{font-family:var(--f-mono);font-weight:500;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding-top:.3em}
.conf span{font-family:var(--f-display);font-style:italic;font-size:1.2rem}
@media (max-width:520px){.conf > :is(div,p){grid-template-columns:minmax(0,1fr);gap:2px}}
.phen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin-top:16px;padding:0;list-style:none}
@media (max-width:560px){.phen{grid-template-columns:minmax(0,1fr)}}
.phen li{display:grid;grid-template-columns:1.4em minmax(0,1fr) auto;gap:8px;align-items:baseline;font-size:1.02rem;padding-bottom:6px;border-bottom:1px dotted var(--line)}
.phen li i{font-style:normal;color:var(--accent)}
.phen li em{font-family:var(--f-mono);font-style:normal;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.phen li.n{color:var(--muted)}
.phen li.n i{color:var(--glint)}
.phen li.u i{color:var(--saffron)}
.where{text-align:left;font-family:var(--f-display);font-size:clamp(2rem,6vw,4.4rem);line-height:1.05;text-wrap:balance;max-width:18ch;margin:0}
.where em{color:var(--accent)}

/* Līlā */
#lila{--accent:var(--saffron)}
.dash{font-family:var(--f-mono);font-size:.84rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.dash .hd{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);color:var(--muted);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.dash table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.dash td{padding:8px 14px;border-bottom:1px solid var(--line)}
.dash td:last-child{text-align:right}
.dash tr:last-child td{border-bottom:0}
.dash .wis td{color:var(--saffron)}
.voices{display:grid;gap:10px}
.voice{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:14px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:10px}
.voice span{font-size:.98rem;color:var(--muted)}
.voice b{font-weight:400;font-style:italic;font-family:var(--f-display);font-size:1.2rem}
@media (max-width:560px){.voice{grid-template-columns:minmax(0,1fr);gap:2px}}
.seesaw{font-family:var(--f-mono);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.seesaw > :is(div,p){background:var(--bg);padding:18px;display:grid;gap:4px}
.seesaw b{font-weight:500;letter-spacing:.12em;font-size:.8rem}
.seesaw .v{font-size:1.6rem;letter-spacing:.1em}
.seesaw .up{color:var(--ink)} .seesaw .down{color:var(--saffron)}
.chain{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:none}
.chain li{padding:9px 0 9px 1.6em;position:relative;border-bottom:1px solid var(--line);font-size:1.04rem}
.chain li::before{content:"↓";position:absolute;left:0;color:var(--glint);font-family:var(--f-mono)}
.chain li:first-child::before{content:"·"}
.chain li.back{color:var(--saffron);font-style:italic;border-bottom:0}
.chain li.back::before{content:"↺";color:var(--saffron)}
.river-wrap{position:relative}
.river{width:100%;height:280px;display:block;border-radius:14px;background:var(--surface);border:1px solid var(--line);cursor:crosshair;touch-action:manipulation}
.river-hud{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center;margin-top:12px}
.river-hud :is(.label,.is-style-surtitre) b{color:var(--ink);font-weight:500}
.inner-voice{min-height:2.4em;font-style:italic;color:var(--muted);margin:10px 0 0;font-size:1.06rem}
.two-phrases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,3vw,32px)}
@media (max-width:640px){.two-phrases{grid-template-columns:minmax(0,1fr)}}
.two-phrases div{display:grid;gap:8px;align-content:start;padding-top:14px;border-top:2px solid var(--line)}
.two-phrases div:last-child{border-top-color:var(--saffron)}
.two-phrases p{margin:0;font-family:var(--f-display);font-size:1.35rem;line-height:1.3}
.two-phrases .small{font-family:var(--f-body);font-size:1rem;color:var(--muted)}
.aside{border:1px dashed var(--line);border-radius:14px;padding:clamp(18px,3vw,28px);display:grid;gap:10px}
.aside p{margin:0}
.motto{font-family:var(--f-display);font-size:clamp(1.7rem,4.4vw,3rem);line-height:1.15;margin:0;text-wrap:balance;max-width:24ch}
.motto em{color:var(--saffron)}

/* Bibliothèque */
.library{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
@media (max-width:980px){.library{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.library{grid-template-columns:minmax(0,1fr)}}
.book{border-top:2px solid var(--ink);padding-top:14px;display:grid;gap:8px;align-content:start}
.book h4{font-family:var(--f-display);font-weight:500;font-size:1.4rem;line-height:1.15;margin:0}
.book p{margin:0;font-size:1rem;color:var(--muted)}
.book a,.book button.linkish{font-family:var(--f-mono);font-size:.76rem;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-align:left;text-decoration:underline;text-underline-offset:3px}
.next{margin-top:clamp(40px,6vw,72px);display:grid;gap:12px}

/* ——— Miroir vivant, atelier, traces ——— */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-cta{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.04em;color:var(--bg);background:var(--accent);padding:11px 18px;border-radius:999px;width:fit-content}
.hero-cta:hover{background:var(--ink)}
.vpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
@media (max-width:820px){.vpick{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.vpick{grid-template-columns:minmax(0,1fr)}}
.vp{text-align:left;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--bg);cursor:pointer;display:grid;gap:2px;font:inherit;color:var(--ink)}
.vp b{font-family:var(--f-display);font-weight:500;font-size:1.08rem}
.vp span{font-size:.86rem;color:var(--muted);line-height:1.35}
.vp:hover{border-color:var(--glint)}
.vp[aria-checked="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:color-mix(in srgb, var(--accent) 9%, var(--bg))}
textarea{display:block;width:100%;min-height:5.5em;resize:vertical;font:inherit;font-size:1.05rem;line-height:1.5;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.field-label{display:block;margin:20px 0 8px}
.examples{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.examples button{font-family:var(--f-body);font-style:italic;font-size:.92rem;padding:5px 11px;border-radius:999px;border:1px dashed var(--line);background:transparent;color:var(--muted);cursor:pointer;text-align:left}
.examples button:hover{color:var(--ink);border-color:var(--glint)}
.status{font-family:var(--f-mono);font-size:.74rem;color:var(--muted)}
.notice{font-size:.98rem;color:var(--muted);border:1px dashed var(--line);border-radius:10px;padding:12px 14px;margin:14px 0 0}
.mirror.live{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.rsec{display:grid;gap:4px;padding:10px 0 12px;border-bottom:1px solid var(--line)}
.rsec:last-child{border-bottom:0}
.rsec p{margin:0;font-size:1.04rem}
.rsec.world p:first-of-type{font-family:var(--f-display);font-size:1.12rem}
.rsec .q{font-family:var(--f-display);font-style:italic;font-size:1.3rem;line-height:1.3;color:var(--accent)}
.rsec.wait{opacity:.4}
.rsec.presence p{font-size:1.1rem}
.talv{font-family:var(--f-mono);font-size:.72rem;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;margin-right:8px}
.dots{animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){.dots{animation:none}}
.chat{display:grid;gap:10px;margin:10px 0 12px}
.msg{display:grid;gap:2px;max-width:60ch}
.msg :is(.label,.is-style-surtitre){font-size:.66rem}
.msg p{margin:0 0 .35em;font-size:1.02rem}
.msg.me{justify-self:end;text-align:right}
.msg.me p{font-style:italic;color:var(--muted)}
.msg.ia{border-left:2px solid var(--accent);padding-left:12px}
.chatwrap{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.story{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);max-width:64ch}
.story .st-title{font-family:var(--f-display);font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.1;margin:4px 0 18px}
.story .pass{margin-bottom:1.2em}
.story .pass p{margin:0 0 .4em}
.story .pass.mine{border-left:2px solid var(--saffron);padding-left:14px}
.story .pass :is(.label,.is-style-surtitre){display:block;margin-bottom:4px}
.compose{margin-top:16px;display:grid;gap:10px}
.trace-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
@media (max-width:700px){.trace-list{grid-template-columns:minmax(0,1fr)}}
.trace{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--surface);display:grid;gap:6px;align-content:start;min-width:0}
.trace .tq{font-family:var(--f-display);font-style:italic;font-size:1.2rem;line-height:1.3;margin:0;overflow-wrap:anywhere}
.trace .tx{margin:0;font-size:.98rem;color:var(--muted);overflow-wrap:anywhere}
.trace .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px}
.linkbtn{font-family:var(--f-mono);font-size:.74rem;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linkbtn.danger{color:var(--muted)}
.linkbtn.danger[data-armed="1"]{color:var(--saffron)}
.empty{color:var(--muted);font-style:italic;margin:14px 0 0}

/* chemins */
.paths-wrap{margin-top:clamp(36px,5vw,64px)}
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,3vw,32px);margin-top:12px}
@media (max-width:860px){.paths{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.paths{grid-template-columns:minmax(0,1fr)}}
.paths a{display:grid;gap:3px;padding:14px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.paths a:hover b{color:var(--accent)}
.paths b{font-family:var(--f-display);font-weight:500;font-size:1.35rem}
.paths span{font-size:.95rem;color:var(--muted)}
.deeper{font-family:var(--f-mono);font-size:.74rem;color:var(--accent);text-decoration:underline;text-underline-offset:3px}

footer{border-top:1px solid var(--line);padding-block:48px 64px;color:var(--muted);font-size:.95rem}
footer .wrap{display:grid;gap:22px}
.closing{display:grid;gap:4px}

/* Lecteur */
dialog.reader{width:min(760px, calc(100vw - 24px));max-height:calc(100dvh - 24px);border:1px solid var(--line);border-radius:16px;padding:0;background:var(--bg);color:var(--ink)}
dialog.reader::backdrop{background:color-mix(in srgb, #0B0E14 55%, transparent);backdrop-filter:blur(3px)}
.reader-hd{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;background:var(--bg);border-bottom:1px solid var(--line)}
.reader-body{padding:clamp(20px,5vw,56px);font-size:1.12rem;line-height:1.7}
.reader-body h3{margin:2em 0 .8em;font-size:1.5rem}
.reader-body h3:first-child{margin-top:0}
.reader-body p{margin:0 0 .7em;max-width:60ch}
.reader-body p.d{padding-left:.4em}
.reader-body p.k{font-family:var(--f-display);font-style:italic;font-size:1.3rem;color:var(--accent);margin-block:1em}
.reader-body .tt{font-family:var(--f-display);font-size:2.2rem;line-height:1.1;margin-bottom:.2em}

/* ——— Accueil : routeur ——— */
.home-hero{padding-block:clamp(40px,7vw,96px) clamp(24px,4vw,48px)}
.home-hero :is(.lead,.is-style-chapo){max-width:30ch}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.hero-cta.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.hero-cta.ghost:hover{border-color:var(--accent);color:var(--accent)}
.home-sec{padding-block:clamp(48px,7vw,96px)}
.sec-head{display:grid;gap:10px;margin-bottom:clamp(24px,4vw,40px);max-width:60ch}
.sec-head p{margin:0}
.route{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.route li{border-top:1px solid var(--line)}
.route a{display:grid;grid-template-columns:2.6rem minmax(0,1.1fr) minmax(0,1fr) 1.4rem;gap:clamp(12px,2.6vw,36px);padding:clamp(20px,2.8vw,30px) 0;text-decoration:none;color:var(--ink);align-items:start}
.route .n{font-family:var(--f-mono);font-size:.74rem;color:var(--muted);padding-top:.45em}
.route .t{display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.route .q{display:block;font-family:var(--f-display);font-weight:500;font-size:clamp(1.3rem,2.3vw,1.7rem);line-height:1.25;text-wrap:balance;transition:color .2s}
.route .why{font-size:1rem;line-height:1.55;color:var(--muted);padding-top:1.5em}
.route .why b{color:var(--ink);font-weight:500}
.route .meta-i{display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.04em;margin-top:10px}
.route .go{font-family:var(--f-mono);color:var(--accent);padding-top:1.6em;transition:transform .2s}
.route a:hover .q{color:var(--accent)}
.route a:hover .go{transform:translateX(4px)}
@media (max-width:760px){
  .route a{grid-template-columns:1.8rem minmax(0,1fr) 1rem;row-gap:10px}
  .route .why{grid-column:2;grid-row:2;padding-top:0}
  .route .go{grid-column:3;grid-row:1;padding-top:1.4em}
}
.practice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,22px)}
@media (max-width:860px){.practice{grid-template-columns:minmax(0,1fr)}}
.practice a{display:grid;gap:8px;align-content:start;padding:clamp(18px,2.4vw,26px);border:1px solid var(--line);border-radius:14px;background:var(--surface);text-decoration:none;color:var(--ink);transition:border-color .2s}
.practice a:hover{border-color:var(--accent)}
.practice b{font-family:var(--f-display);font-weight:500;font-size:1.5rem;line-height:1.2}
.practice p{margin:0;color:var(--muted);font-size:1rem;line-height:1.55}
.practice .go{font-family:var(--f-mono);font-size:.76rem;color:var(--accent);margin-top:6px}

/* ——— Vues « Pratiquer » ——— */
.subnav{display:flex;flex-wrap:wrap;gap:6px;padding-top:clamp(24px,4vw,40px)}
.subnav a{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.04em;text-decoration:none;color:var(--muted);padding:7px 13px;border-radius:999px;border:1px solid var(--line)}
.subnav a:hover{color:var(--ink)}
.subnav a[aria-current]{color:var(--bg);background:var(--accent);border-color:var(--accent)}
#pratique :is(.chap,.is-style-chapitre){border-top:0;padding-top:clamp(28px,4vw,48px)}
.navlinks .sep{width:1px;background:var(--line);margin:6px 6px;flex:none}
.navlinks a[aria-current]{color:var(--ink);background:color-mix(in srgb, var(--accent) 12%, transparent)}

/* ——— Lire le récit ——— */
details.readall{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
details.readall summary{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:clamp(16px,2.4vw,24px);cursor:pointer;list-style:none}
details.readall summary::-webkit-details-marker{display:none}
details.readall[open] summary .btn{background:transparent;color:var(--ink)}
details.readall .reader-body{border-top:1px solid var(--line)}

/* ——— Le jeu d’entrée : une question → une histoire ——— */
.qlist{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.qcard{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:2.6rem minmax(0,1.5fr) minmax(0,.8fr) 1.4rem;gap:clamp(12px,2.6vw,36px);padding:clamp(20px,2.8vw,30px) 0;border-top:1px solid var(--line);color:var(--ink);align-items:start}
.qcard:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.qcard .n{font-family:var(--f-mono);font-size:.74rem;color:var(--muted);padding-top:.6em}
.qcard .q{display:block;font-family:var(--f-display);font-weight:500;font-size:clamp(1.45rem,2.7vw,2.05rem);line-height:1.2;text-wrap:balance;transition:color .2s}
.qcard .why{display:block;margin-top:8px;font-size:1.02rem;line-height:1.55;color:var(--muted);max-width:52ch}
.qcard .where{display:grid;gap:8px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);padding-top:.8em}
.qcard .mark{color:var(--saffron);text-transform:none;letter-spacing:.02em}
.qcard .go{font-family:var(--f-mono);color:var(--accent);padding-top:.5em;transition:transform .2s}
.qcard:hover .q{color:var(--accent)}
.qcard:hover .go{transform:translateX(4px)}
.qcard.done .n{color:var(--saffron)}
.qprogress{margin:16px 0 0}
@media (max-width:720px){
  .qcard{grid-template-columns:1.8rem minmax(0,1fr) 1rem;row-gap:10px}
  .qcard .where{grid-column:2;grid-row:2;padding-top:0}
  .qcard .go{grid-column:3;grid-row:1}
}
.story{max-width:48rem}
.story-head{scroll-margin-top:72px}
.story-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.linkbtn{background:none;border:0;padding:4px 0;font-family:var(--f-mono);font-size:.78rem;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.story-q{font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.15;margin-top:10px;scroll-margin-top:72px}
.story-q:focus,.scene-text:focus,.ending h3:focus{outline:none}
.story-intro{font-size:clamp(1.15rem,1.9vw,1.3rem);line-height:1.6;color:var(--muted);font-style:italic;margin:18px 0 0}
.scene{margin-top:clamp(32px,5vw,48px);padding-top:clamp(24px,3.5vw,32px);border-top:1px dashed var(--line);scroll-margin-top:72px}
.scene-meta{display:flex;align-items:center;gap:14px}
.dots{display:inline-flex;gap:6px}
.dots i{width:8px;height:8px;border-radius:50%;border:1px solid var(--glint)}
.dots i.on{background:var(--accent);border-color:var(--accent)}
.dots i.now{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)}
.scene-text{font-size:clamp(1.2rem,2vw,1.42rem);line-height:1.55;margin:14px 0 22px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){.choices{grid-template-columns:1fr}}
.choice{text-align:left;font-family:var(--f-body);font-size:1.12rem;line-height:1.4;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .2s, opacity .3s, transform .2s}
.choice:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}
.choice:disabled{cursor:default}
.choice.chosen{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.choice.faded{opacity:.42}
.reply{font-style:italic;font-size:1.15rem;line-height:1.6;border-left:2px solid var(--accent);padding-left:16px;margin:22px 0}
.ending{margin-top:clamp(40px,6vw,64px);padding-top:clamp(32px,4.5vw,48px);border-top:1px solid var(--line);scroll-margin-top:72px}
.mtitle.mini{font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1.05}
.mtitle.mini h3{font-size:1em;line-height:1.05;font-weight:500}
.mtitle.mini .refl > div{line-height:1.05;height:auto}
.ending > .muted{margin:4px 0 24px;max-width:56ch}
.doors{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.doors .you{display:block;margin-bottom:8px;text-transform:none;letter-spacing:.02em}
.door{display:grid;gap:8px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .2s}
.door:hover{border-color:var(--accent)}
.door .dq{font-family:var(--f-display);font-weight:500;font-size:clamp(1.15rem,2vw,1.35rem);line-height:1.3;text-wrap:balance}
.door .dto{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;color:var(--accent)}
.ending .cta-row{margin-top:28px}
.ending .hero-cta{border:0;cursor:pointer;font-family:var(--f-mono)}
.ending .hero-cta.ghost{border:1px solid var(--line)}
.finale{margin-top:40px;display:grid;gap:12px}
.finale p{margin:0}
.others{margin-top:36px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{font-family:var(--f-body);font-size:1rem;padding:8px 15px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.done{color:var(--muted)}
@media (prefers-reduced-motion: no-preference){
  .enter{animation:jeu-in .55s ease-out both}
  @keyframes jeu-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}


/* ——— Pages thématiques (ajouté au style de l’accueil) ——— */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}
.page-hero{padding-block:clamp(40px,7vw,96px) clamp(24px,4vw,48px)}
.page-hero .mtitle{font-size:clamp(2.9rem,9.5vw,7rem)}
.page-hero .refl > div{height:auto}
.page-hero :is(.lead,.is-style-chapo){max-width:44ch;margin:14px 0 0}
:is(.toc,.is-style-sommaire){display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0;margin:30px 0 0;font-family:var(--f-mono);font-size:.76rem}
:is(.toc,.is-style-sommaire) a{color:var(--muted);text-decoration:none}
:is(.toc,.is-style-sommaire) a:hover{color:var(--accent)}
:is(.toc,.is-style-sommaire) b{color:var(--accent);font-weight:500;margin-right:8px}
.navlinks a[aria-current="page"]{color:var(--ink);background:color-mix(in srgb, var(--accent) 14%, transparent)}
.chap-head .meta .num{font-family:var(--f-display);font-style:italic;font-size:2.4rem;line-height:1;color:var(--accent)}
.refs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media (max-width:900px){.refs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.refs{grid-template-columns:minmax(0,1fr)}}
.ref{background:var(--bg);padding:16px 18px;display:grid;gap:4px;align-content:start;min-width:0}
.ref b{font-family:var(--f-display);font-weight:500;font-size:1.15rem;line-height:1.2}
.ref .yr{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;color:var(--accent)}
.ref p{margin:0;font-size:.98rem;color:var(--muted);line-height:1.5}
:is(.oq-list,.is-style-questions-ouvertes){list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
:is(.oq-list,.is-style-questions-ouvertes) li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.oq{font-family:var(--f-display);font-size:clamp(1.12rem,2vw,1.35rem);line-height:1.3}
@media (max-width:560px){:is(.oq-list,.is-style-questions-ouvertes) li{grid-template-columns:minmax(0,1fr);gap:8px}}
:is(.books,.is-style-livres){list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px}
@media (max-width:640px){:is(.books,.is-style-livres){grid-template-columns:minmax(0,1fr)}}
:is(.books,.is-style-livres) li{display:grid;gap:2px;padding-top:10px;border-top:1px solid var(--line)}
:is(.books,.is-style-livres) i{font-family:var(--f-display);font-size:1.12rem}
:is(.books,.is-style-livres) span{font-size:.95rem;color:var(--muted)}
.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pager a{border-top:2px solid var(--ink);padding-top:12px;text-decoration:none;color:var(--ink);display:grid;gap:4px}
.pager a:hover b{color:var(--accent)}
.pager a b{font-family:var(--f-display);font-weight:500;font-size:clamp(1.3rem,3vw,1.9rem)}
.pager a.next{text-align:right}
.pager :is(.label,.is-style-surtitre){display:block}
:is(.cta-band,.is-style-bandeau-appel){display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:14px;padding:clamp(18px,3vw,28px);background:var(--surface)}
:is(.cta-band,.is-style-bandeau-appel) p{margin:0;max-width:52ch}
a.btn{text-decoration:none;display:inline-block}
.chart{width:100%;height:240px;display:block;border-radius:10px;background:var(--bg)}
.chart.tall{height:300px}
.readout{display:flex;flex-wrap:wrap;gap:8px 24px;font-family:var(--f-mono);font-size:.76rem;color:var(--muted);margin-top:12px}
.readout b{color:var(--ink);font-weight:500}
.steps{list-style:none;counter-reset:s;padding:0;margin:0;border-top:1px solid var(--ink)}
.steps li{counter-increment:s;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s);font-family:var(--f-display);font-style:italic;font-size:2rem;color:var(--accent);line-height:1}
.steps h4{font-family:var(--f-display);font-weight:500;font-size:1.25rem;margin:0 0 4px}
.steps p{margin:0}
.steps .q{display:block;margin-top:6px;font-style:italic;color:var(--muted);font-size:.98rem}
.two-q{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media (max-width:700px){.two-q{grid-template-columns:minmax(0,1fr)}}
.two-q > div{background:var(--bg);padding:clamp(18px,3vw,28px);display:grid;gap:10px;align-content:start}
.two-q h4{font-family:var(--f-display);font-weight:500;font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.2;margin:0}
.two-q ul{margin:0;padding-left:1.1em;display:grid;gap:4px}
.mx-wrap{overflow-x:auto;margin-top:14px}
.mx{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem}
.mx th,.mx td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:center}
.mx th{font-family:var(--f-mono);font-weight:500;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mx td:first-child,.mx th:first-child{text-align:left}
.mx td.y{color:var(--accent);font-size:1.1rem}
.mx td.n{color:var(--glint);font-size:1.1rem}
.mx td.u{color:var(--saffron);font-size:1.1rem}
.checks{display:grid;gap:10px;margin-top:6px}
.checks label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;font-size:1.02rem;cursor:pointer}
.checks input{width:18px;height:18px;margin-top:.25em;accent-color:var(--accent)}
.chipset{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn[data-state="fin"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip-btn[data-state="acte"]{background:var(--saffron);border-color:var(--saffron);color:var(--bg)}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--f-mono);font-size:.72rem;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.chain-out{list-style:none;margin:12px 0 0;padding:0}
.chain-out li{padding:9px 0 9px 1.6em;position:relative;border-bottom:1px solid var(--line)}
.chain-out li::before{content:"↓";position:absolute;left:0;color:var(--glint);font-family:var(--f-mono)}
.chain-out li:first-child::before{content:"·"}
.chain-out li.stop{color:var(--saffron);font-style:italic;border-bottom:0}
.chain-out li.stop::before{content:"◌";color:var(--saffron)}
.guided{min-height:7.5em;display:grid;align-content:center}
.guided p{font-family:var(--f-display);font-size:clamp(1.3rem,3vw,1.9rem);line-height:1.3;margin:0;max-width:30ch;transition:opacity .6s}
.guided p.fade{opacity:0}
.sand{width:100%;height:300px;display:block;border-radius:14px;background:var(--surface);border:1px solid var(--line);cursor:pointer;touch-action:manipulation}
.lens-out{border-left:2px solid var(--accent);padding-left:16px;margin-top:14px;min-height:5em}
.lens-out p{margin:0 0 .4em}
.lens-out :is(.label,.is-style-surtitre){display:block;margin-bottom:6px}
.pair-out{margin-top:14px;display:grid;gap:8px}
.pair-out h4{font-family:var(--f-display);font-weight:500;font-size:1.3rem;margin:0}
.pair-out p{margin:0}
/* accueil : chemins */
.paths-wrap{margin-top:clamp(36px,5vw,64px)}
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,3vw,32px);margin-top:12px}
@media (max-width:860px){.paths{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.paths{grid-template-columns:minmax(0,1fr)}}
.paths a{display:grid;gap:3px;padding:14px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.paths a:hover b{color:var(--accent)}
.paths b{font-family:var(--f-display);font-weight:500;font-size:1.35rem}
.paths span{font-size:.95rem;color:var(--muted)}
.deeper{font-family:var(--f-mono);font-size:.74rem;color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ——— Adaptation au balisage des blocs WordPress (le reste vient du site d'origine) ——— */

/* Astra : son CSS n'est pas chargé ; on neutralise ce qui resterait de sa structure */
body.espace-site #page, body.espace-site .site-content, body.espace-site .ast-container,
body.espace-site #primary, body.espace-site .site-main, body.espace-site article.page,
body.espace-site .entry-content{margin:0;padding:0;max-width:none;display:block;border:0;background:none}
body.espace-site .entry-header, body.espace-site .post-thumb-img-content{display:none}
.screen-reader-text, .sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
.skip-link:focus{position:fixed !important;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:100;background:var(--bg);color:var(--ink);padding:10px 14px;border-radius:8px}

/* Blocs : pas de marges ajoutées par WordPress, le CSS du site décide */
:where(.entry-content, .wp-block-group) > *{margin-block:0}
:where(.entry-content) p:where(:not([class])){margin:0 0 1em}
.wp-block-quote{border:0;padding:0;margin:0}
.wp-block-quote p{margin:0}
:where(.wp-block-list){margin:0}
:where(.wp-block-heading){margin:0}
.prose > p, .prose > .wp-block-list{margin:0 0 1em}
.chap-head .meta > p{margin:0}
.dlg > p{margin:0 0 .55em}
.has-text-align-center{text-align:center}

/* Boutons (styles de bouton « Appel », « Appel discret », « Bouton », « Bouton discret ») */
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.wp-block-button .wp-block-button__link{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.04em;line-height:1.4;border-radius:999px;padding:11px 18px;color:var(--bg);background:var(--accent);border:1px solid var(--accent);transition:background .2s,color .2s,border-color .2s}
.wp-block-button .wp-block-button__link:hover{background:var(--ink);border-color:var(--ink)}
.wp-block-button.is-style-appel-discret .wp-block-button__link{background:transparent;color:var(--ink);border-color:var(--line)}
.wp-block-button.is-style-appel-discret .wp-block-button__link:hover{border-color:var(--accent);color:var(--accent);background:transparent}
.wp-block-button.is-style-bouton .wp-block-button__link{font-size:.78rem;padding:10px 16px;background:var(--ink);border-color:var(--ink);color:var(--bg)}
.wp-block-button.is-style-bouton-discret .wp-block-button__link{font-size:.78rem;padding:10px 16px;background:transparent;border-color:var(--ink);color:var(--ink)}
.hero .wp-block-buttons{margin-top:0}

/* Navigation (menu « Navigation » de WordPress) */
.topnav .navlinks .sep{display:inline-block;width:1px;align-self:stretch;margin:6px 6px;background:var(--line)}
.navlinks a[aria-current]{color:var(--ink);background:color-mix(in srgb, var(--accent) 12%, transparent)}
.subnav{margin:0}
.subnav a{display:inline-block;margin:0 6px 6px 0}

/* Cartes entièrement cliquables (accueil · Pratiquer) */
.practice .lien-carte{position:relative;display:grid;gap:8px;align-content:start;padding:clamp(18px,2.4vw,26px);border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);transition:border-color .2s}
.practice .lien-carte:hover{border-color:var(--accent)}
.practice .lien-carte > p{margin:0}
.practice .lien-carte .go a{color:var(--accent);text-decoration:none}
.practice .lien-carte .go a::after{content:"";position:absolute;inset:0;border-radius:14px}
.practice .lien-carte .go a:focus-visible{outline:none}
.practice .lien-carte:focus-within{outline:2px solid var(--accent);outline-offset:3px}

/* Étapes numérotées (listes dont chaque élément contient un titre et un texte) */
.steps.liste-blocs{counter-reset:s;border-top:1px solid var(--ink)}
.steps.liste-blocs > .step{counter-increment:s;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:0 16px;padding:16px 0;border-bottom:1px solid var(--line)}
.steps.liste-blocs > .step::before{content:counter(s);grid-row:1 / span 4;font-family:var(--f-display);font-style:italic;font-size:2rem;color:var(--accent);line-height:1}
.steps.liste-blocs > .step > *{grid-column:2}
.steps .step .q{display:block;margin-top:6px}

/* Références : année, auteur, texte */
.ref > p{margin:0}
.ref > .yr{display:block}

/* Questions ouvertes */
.oq-list li .linkbtn, .is-style-questions-ouvertes li .linkbtn{justify-self:end;white-space:nowrap;text-decoration:none}
@media (max-width:560px){.oq-list li .linkbtn, .is-style-questions-ouvertes li .linkbtn{justify-self:start}}

/* Pied de page (bloc synchronisé) */
.espace-footer{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
.espace-footer .closing .is-style-grande-citation{max-width:none}
.espace-footer .wrap > p{margin:0}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--accent)}

/* Récit à déplier (Le miroir) */
.wp-block-details.readall > summary{list-style:none}
.wp-block-details.readall > summary::-webkit-details-marker{display:none}

/* Espacements en ligne du site d'origine */
.wide.stack{gap:14px}
.hero-grid .stack{gap:18px}
#formes .body-grid{scroll-margin-top:64px}

/* Pager */
p.pager{margin:0}

/* Miroir guidé et atelier (sans IA) */
.guided{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.guided .ask{font-family:var(--f-display);font-style:italic;font-size:1.3rem;margin:0 0 8px}
.rsec.guide .prompt{font-style:italic;color:var(--muted);margin:2px 0 8px}
.rsec.guide textarea{min-height:4.2em}
.relance{font-family:var(--f-display);font-style:italic;font-size:1.15rem;color:var(--saffron);border-left:2px solid var(--saffron);padding-left:12px;margin:14px 0 0}
input[type=text]{display:block;width:100%;font:inherit;font-size:1.05rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
input[type=text]:focus{outline:2px solid var(--accent);outline-offset:1px}
.reader-body h3{font-family:var(--f-display)}
#tr .hint{margin:0 0 1em}

/* Reflet du titre : la hauteur suit le titre (une ou plusieurs lignes) */
.refl > div{height:auto}