/* Fashion Geek Histoire — interface « esprit Apple » commune aux sites Fashion Geek (copie de culture.css)
   + composants propres : carte, frise, labos, quiz. */
:root{
  --bg:#ffffff; --tile:#f5f5f7; --tile2:#ebebf0; --ink:#1d1d1f; --ink2:#424245; --ink3:#6e6e73; --rule:#d2d2d7;
  --blue:#0071e3; --link:#0066cc; --violet:#8e44d8; --violet-s:#f3eafb; --ok:#1f9d55; --bad:#e0452f;
  --card:#ffffff; --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
  --sea:#e9eef4; --landc:#f7f5f0; --landline:#c9c4b8; --st:#e4e1d9; --stline:#ffffff; --river:#6aa7d8; --shelfc:#d7e2ea;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000; --tile:#161618; --tile2:#222226; --ink:#f5f5f7; --ink2:#d2d2d7; --ink3:#a1a1a6; --rule:#3a3a3c;
  --blue:#2997ff; --link:#2997ff; --violet:#bf8cf0; --violet-s:#2a1d36; --card:#1c1c1e; --shadow:none; color-scheme:dark;
  --sea:#0e1520; --landc:#26262a; --landline:#3d3d43; --st:#323238; --stline:#1c1c1e; --river:#4b8fc7; --shelfc:#17222f}}
:root[data-theme="dark"]{
  --bg:#000; --tile:#161618; --tile2:#222226; --ink:#f5f5f7; --ink2:#d2d2d7; --ink3:#a1a1a6; --rule:#3a3a3c;
  --blue:#2997ff; --link:#2997ff; --violet:#bf8cf0; --violet-s:#2a1d36; --card:#1c1c1e; --shadow:none; color-scheme:dark;
  --sea:#0e1520; --landc:#26262a; --landline:#3d3d43; --st:#323238; --stline:#1c1c1e; --river:#4b8fc7; --shelfc:#17222f}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;margin:0;overflow-x:hidden}
a{color:var(--link)}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{letter-spacing:-.025em;text-wrap:balance;margin:0}
h1{font-size:clamp(40px,6.4vw,80px);line-height:1.02;font-weight:800;letter-spacing:-.045em}
h2{font-size:clamp(30px,4.2vw,52px);line-height:1.06;font-weight:750;letter-spacing:-.035em}
h3{font-size:22px;line-height:1.2;font-weight:700}
p{margin:0}
.k{font-size:12px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--violet)}
.lede{font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--ink3);max-width:36em}
.muted{color:var(--ink3)}
em.v{font-style:normal;color:var(--violet)}
b.v{color:var(--violet)}

body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid color-mix(in srgb,var(--rule) 60%,transparent)}
.bar .wrap{display:flex;align-items:center;gap:18px;min-height:52px}
.brand{font-weight:700;font-size:17px;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand span{color:var(--violet)}
.bar nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.bar nav a{font-size:13px;color:var(--ink2);text-decoration:none;padding:6px 10px;border-radius:980px;white-space:nowrap}
.bar nav a:hover,.bar nav a[aria-current]{background:var(--tile);color:var(--ink)}

section{padding-block:72px}
section.tight{padding-block:40px}
.sec-head{display:grid;gap:12px;margin-bottom:32px;max-width:52em}
.tile{background:var(--tile);border-radius:28px;padding:clamp(20px,3vw,40px)}
.card{background:var(--card);border-radius:20px;box-shadow:var(--shadow)}
.grid{display:grid;gap:20px}
.btn{appearance:none;border:0;font:600 15px var(--sans);background:var(--blue);color:#fff;border-radius:980px;padding:11px 20px;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn.ghost{background:transparent;color:var(--link);padding-inline:6px}
.btn.soft{background:var(--tile2);color:var(--ink)}
.btn:disabled{opacity:.4;cursor:default}
.btn:focus-visible,.chip:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--blue) 55%,transparent);outline-offset:2px}
.chip{appearance:none;border:1px solid var(--rule);background:var(--card);color:var(--ink);font:500 14px var(--sans);border-radius:980px;padding:8px 14px;cursor:pointer;min-height:40px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

.univ{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.univ .k{color:var(--ink3);margin-right:6px}
.univ a{font-size:13px;text-decoration:none;color:var(--ink2);background:var(--tile);padding:7px 12px;border-radius:980px}
.univ a[aria-current]{background:var(--ink);color:var(--bg)}

footer.site{border-top:1px solid var(--rule);padding-block:36px;color:var(--ink3);font-size:13px;margin-top:40px}
footer.site .wrap{display:grid;gap:12px}
.ok{color:var(--ok)} .bad{color:var(--bad)}
.score{font-variant-numeric:tabular-nums;font-weight:700}
.fade{animation:fade .45s ease}
@keyframes fade{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
select{font:500 15px var(--sans);padding:10px 12px;border-radius:12px;border:1px solid var(--rule);background:var(--card);color:var(--ink);min-height:44px}
input[type=range]{width:100%;accent-color:var(--violet);min-height:32px}

/* ---------- En-tête de salle ---------- */
.room-hero{padding-block:48px 24px}
.room-hero .wrap{display:grid;gap:18px}
.room-hero .era{display:flex;gap:10px;flex-wrap:wrap;align-items:center;color:var(--ink3);font-size:14px}
.room-hero .era b{font-variant-numeric:tabular-nums;color:var(--ink)}
.toc{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.toc a{font-size:14px;text-decoration:none;color:var(--ink2);background:var(--tile);border-radius:980px;padding:8px 14px}
.toc a:hover{background:var(--tile2);color:var(--ink)}

/* ---------- Carte ---------- */
.fgmap{position:relative;background:var(--sea);border-radius:24px;overflow:hidden;aspect-ratio:2/1;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.fgmap.tall{aspect-ratio:16/10}
.fgmap svg{display:block;width:100%;height:100%;cursor:grab}
.fgmap svg:active{cursor:grabbing}
.m-sea{fill:var(--sea)}
.m-grat{fill:none;stroke:color-mix(in srgb,var(--ink3) 16%,transparent);stroke-width:calc(.8px * var(--u,1))}
.m-shelf{fill:var(--shelfc);transition:opacity .6s}
.m-land{fill:var(--landc);stroke:var(--landline);stroke-width:calc(.9px * var(--u,1))}
.m-coast{fill:none;stroke:var(--landline);stroke-width:calc(.9px * var(--u,1));pointer-events:none}
.m-st{fill:var(--st);stroke:var(--stline);stroke-width:calc(.9px * var(--u,1));stroke-linejoin:round;transition:fill .35s,opacity .35s;opacity:.0}
.m-yr .m-coast{fill:none;stroke:var(--landline);stroke-width:calc(.9px * var(--u,1));pointer-events:none}
.m-st{animation:stIn .45s ease forwards}
@keyframes stIn{to{opacity:1}}
.m-yr.m-out{transition:opacity .35s;opacity:0}
.m-st.m-folk{fill:transparent;stroke:transparent}
.m-st.m-other{fill:color-mix(in srgb,var(--st) 100%,transparent)}
.m-st.m-emp{stroke:color-mix(in srgb,#fff 70%,transparent)}
.m-st:hover{filter:brightness(1.08) saturate(1.1)}
.m-lake{fill:var(--sea);stroke:var(--river);stroke-width:calc(.6px * var(--u,1))}
.m-river{fill:none;stroke:var(--river);stroke-width:calc(1.4px * var(--u,1));opacity:.75;stroke-linecap:round}
.m-river.hi{stroke-width:calc(3.4px * var(--u,1));opacity:1;stroke:#2f6bff}
.m-lab{font:700 calc(15px * var(--u,1)) var(--sans);fill:color-mix(in srgb,var(--c) 70%,#000);paint-order:stroke;stroke:color-mix(in srgb,#fff 85%,transparent);stroke-width:calc(3.5px * var(--u,1));text-anchor:middle;pointer-events:none;letter-spacing:-.01em}
.m-route{fill:none;stroke:var(--violet);stroke-width:calc(2.6px * var(--u,1));stroke-linecap:round;stroke-linejoin:round}
.m-route.dash{stroke-dasharray:calc(6px * var(--u,1)) calc(5px * var(--u,1))}
.m-zone{fill:var(--violet);opacity:.28;stroke:none}
.m-pt .m-dot{fill:var(--violet);stroke:#fff;stroke-width:1.6px}
.m-ptl{font:600 13px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:3px;pointer-events:none}
.m-ptl.l{text-anchor:end}
.m-txt{font:italic 600 calc(16px * var(--u,1)) Georgia,serif;fill:color-mix(in srgb,var(--river) 80%,var(--ink));text-anchor:middle;letter-spacing:.04em;pointer-events:none}
.m-tip{position:absolute;z-index:3;background:var(--card);box-shadow:0 6px 24px rgba(0,0,0,.18);border-radius:14px;padding:10px 12px;display:grid;gap:2px;font-size:13px;max-width:240px;pointer-events:none}
.m-tip b{font-size:15px}.m-tip span,.m-tip small{color:var(--ink3)}
.m-tip i{font-style:normal;font-weight:600;color:var(--c)}
.mapctl{position:absolute;right:12px;top:12px;display:grid;gap:6px;z-index:2}
.mapctl button{width:36px;height:36px;border-radius:12px;border:0;background:color-mix(in srgb,var(--card) 90%,transparent);box-shadow:var(--shadow);font:600 18px var(--sans);color:var(--ink);cursor:pointer}
.mapnote{font-size:12px;color:var(--ink3);margin-top:8px}

/* ---------- Curseur temporel ---------- */
.yearbar{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.yearbig{font-size:clamp(34px,5vw,56px);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.yearbig small{font-size:.42em;font-weight:650;color:var(--ink3);letter-spacing:0}
.ticks{position:relative;height:18px;font-size:11px;color:var(--ink3)}
.ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.play{width:48px;height:48px;border-radius:50%;padding:0;justify-content:center}

/* ---------- Légende ---------- */
.legend{display:flex;flex-wrap:wrap;gap:6px}
.legend button{appearance:none;border:1px solid var(--rule);background:var(--card);border-radius:980px;padding:6px 12px 6px 8px;font:500 13px var(--sans);color:var(--ink);display:inline-flex;gap:7px;align-items:center;cursor:pointer;min-height:36px}
.legend button i{width:12px;height:12px;border-radius:4px;background:var(--c);display:inline-block}
.legend button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* ---------- Frise ---------- */
.frise{position:relative;overflow-x:auto;scrollbar-width:thin;padding-bottom:8px}
.frise .track{position:relative;min-width:900px}
.f-row{position:relative;height:30px;margin-bottom:6px}
.f-bar{position:absolute;height:28px;border-radius:9px;font-size:12px;font-weight:600;color:#fff;display:flex;align-items:center;padding:0 8px;white-space:nowrap;overflow:hidden;cursor:pointer;border:0;font-family:var(--sans)}
.f-bar:hover{filter:brightness(1.08)}
.f-axis{position:relative;height:24px;border-top:1px solid var(--rule);font-size:11px;color:var(--ink3)}
.f-axis span{position:absolute;top:4px;transform:translateX(-50%);white-space:nowrap}

/* ---------- Blocs de contenu ---------- */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.two.wide{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:900px){.two,.two.wide,.three{grid-template-columns:minmax(0,1fr)}.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.panel{background:var(--card);border-radius:20px;padding:20px 22px;box-shadow:var(--shadow);display:grid;gap:10px;align-content:start}
.tile .panel{box-shadow:none}
.fact{display:grid;gap:4px;padding:16px 18px;border-radius:18px;background:var(--card)}
.fact b.n{font-size:30px;letter-spacing:-.03em;color:var(--violet);font-variant-numeric:tabular-nums;line-height:1.1}
.fact span{font-size:14px;color:var(--ink3)}
.anec{border-left:3px solid var(--violet);padding:4px 0 4px 16px;display:grid;gap:4px}
.anec .k{font-size:11px}
.anec p{font-size:15px;color:var(--ink2)}
.src{font-size:12px;color:var(--ink3)}
.q{font-size:19px;font-weight:650;letter-spacing:-.01em}
.reveal{border-radius:18px;background:var(--violet-s);padding:16px 18px;display:block}
.reveal > * + *{margin-top:8px}
.reveal[hidden]{display:none}
.reveal b{color:var(--violet)}
.harari{display:grid;gap:8px;padding:20px 22px;border-radius:20px;background:linear-gradient(135deg,var(--violet-s),var(--tile));}
.harari .k{color:var(--ink3)}
.harari blockquote{margin:0;font-size:19px;line-height:1.45;font-weight:600;letter-spacing:-.01em}
.debat{font-size:14px;color:var(--ink3);border-top:1px solid var(--rule);padding-top:8px}
.debat b{color:var(--ink2)}
.figure{border-radius:20px;overflow:hidden;background:var(--tile)}
.figure img{width:100%;height:100%;object-fit:cover}
.figcap{font-size:12px;color:var(--ink3);margin-top:6px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts .chip.right{background:var(--ok);border-color:var(--ok);color:#fff}
.opts .chip.wrong{background:var(--bad);border-color:var(--bad);color:#fff}
.meter{height:10px;border-radius:6px;background:var(--tile2);overflow:hidden}
.meter i{display:block;height:100%;background:var(--violet);border-radius:6px;transition:width .4s}
.stat{font-variant-numeric:tabular-nums;font-weight:750;font-size:22px}
.next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.next a{display:grid;gap:4px;padding:20px 22px;border-radius:20px;background:var(--tile);text-decoration:none;color:inherit}
.next a b{font-size:20px;letter-spacing:-.02em}
.next a span{color:var(--link);font-weight:600;font-size:14px}
@media (max-width:700px){.next{grid-template-columns:minmax(0,1fr)}}
.kbd{font:600 12px var(--mono);background:var(--tile2);border-radius:6px;padding:2px 6px}
.btn[hidden]{display:none}

/* ---------- Cartes v2 : relief ombré Natural Earth (domaine public) ---------- */
.fgmap{background:#a4c4dc;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.fgmap::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 60px rgba(20,40,70,.18)}
.m-sea{fill:#a4c4dc}
.m-relief{image-rendering:auto}
.m-grat{stroke:rgba(255,255,255,.16)}
.m-shelf{fill:#c9d6bf}
.m-land{fill:none!important;stroke:none!important}
.m-coast{stroke:none}
.m-st{fill:transparent;stroke:rgba(255,255,255,.7);stroke-width:calc(.8px * var(--u,1))}
.m-st.m-other{fill:rgba(255,255,255,.22)}
.m-st.m-emp{fill-opacity:.58;stroke:rgba(255,255,255,.9);stroke-width:calc(1.1px * var(--u,1))}
.m-st:hover{filter:none;fill-opacity:.75}
.m-lake{fill:#9fc0da;stroke:rgba(40,70,100,.35)}
.m-river{stroke:#4f8fc4;opacity:.85}
.m-lab{fill:color-mix(in srgb,var(--c) 55%,#111);stroke:rgba(255,255,255,.88)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .m-relief{filter:brightness(.62) saturate(.85)}}
:root[data-theme="dark"] .m-relief{filter:brightness(.62) saturate(.85)}
.m-zone{mix-blend-mode:multiply}

/* ---------- En-têtes de salle illustrés (images GPT, lot HIS1) ---------- */
.room-hero.hx-img{position:relative;overflow:hidden;padding-block:clamp(48px,6vw,88px) clamp(28px,4vw,48px);background:#fff}
.room-hero.hx-img::before{content:"";position:absolute;inset:0;background:var(--hero) right center/min(72vw,1240px) auto no-repeat;pointer-events:none}
.room-hero.hx-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#fff 0,#fff 34%,rgba(255,255,255,.7) 44%,rgba(255,255,255,0) 54%)}
.room-hero.hx-img .wrap{position:relative;z-index:1}
.room-hero.hx-img .wrap>*{max-width:min(540px,46%)}
.room-hero.hx-img .toc{max-width:min(560px,48%)}
.room-hero.hx-img{min-height:clamp(420px,36vw,540px);display:flex;align-items:center}.room-hero.hx-img>.wrap{width:100%}
@media (max-width:820px){
 .room-hero.hx-img{min-height:0;padding-top:min(46vw,300px);display:block}
 .room-hero.hx-img::before{background-position:70% 0;background-size:auto min(46vw,300px)}
 .room-hero.hx-img::after{background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) calc(min(46vw,300px) - 50px),#fff min(46vw,300px))}
 .room-hero.hx-img .wrap>*,.room-hero.hx-img .toc{max-width:none}
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .room-hero.hx-img{background:#fff;color:#1d1d1f}
 :root:not([data-theme="light"]) .room-hero.hx-img .lede,:root:not([data-theme="light"]) .room-hero.hx-img .era{color:#6e6e73}}