/* Genesis Civilisations · Grèce : compléments de style (chargé après civ.css) */
:root{--gold:#1d5f95;--aegean:#1d5f95;--aegean-s:#e8f1f9;--sea:#dfeaf5}
.wide{background:#e4edf6}

/* ---------- éléments de formulaire communs ---------- */
.sl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:baseline;font-size:15px;margin:10px 0}
.sl-t{color:var(--ink)}
.sl b.num{color:var(--blue);font-weight:650;font-variant-numeric:tabular-nums;text-align:right}
.sl input[type=range]{grid-column:1/-1}
.sl .sel{grid-column:auto}
.sel,input.num,input.al-in{border:1px solid rgba(0,0,0,.16);background:#fff;border-radius:12px;padding:9px 12px;font:inherit;font-size:16px;min-width:0;color:var(--ink)}
input.num{width:120px}
input.al-in{width:min(100%,300px);font-weight:600;letter-spacing:0}
.chipbtn{border:1px solid rgba(0,0,0,.14);background:#fff;border-radius:980px;padding:7px 14px;font-size:14px;line-height:1.2;transition:background .15s,color .15s,border-color .15s}
.chipbtn:hover{background:#fafafa}
.chipbtn.on,.chipbtn[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
.two-sl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 32px}
@media (max-width:700px){.two-sl{grid-template-columns:minmax(0,1fr)}}
.tablewrap{overflow-x:auto;border-radius:16px;background:#fff}
.fact.wideF{grid-column:1/-1}
.kl-msg{font-size:15.5px;color:#3a3a3c;line-height:1.5;margin:12px 0;min-height:1.5em}
.kl-msg b{color:var(--ink)}
.mo-h{font-size:19px;margin:24px 0 10px;letter-spacing:-.025em}
.lab .facts{margin-top:12px}
.lab .btn,.lab .chipbtn{min-height:38px}
.lab .row{margin:8px 0}

/* ---------- cartes ---------- */
.gm-wrap{border-radius:22px;overflow:hidden;background:var(--sea);margin-bottom:12px}
.gm{display:block;width:100%;height:auto}
.gm-sea{fill:var(--sea)}
.gm-land{fill:#f3f4f6;stroke:#c3ccd6;stroke-width:.7;stroke-linejoin:round}
.gm-gr{fill:#f5e8bf;stroke:#b9a15d;stroke-width:.8;stroke-linejoin:round}
.gm-pt{cursor:pointer;outline:none}
.gm-pt circle{fill:#fff;stroke:var(--blue);stroke-width:3;transition:fill .15s}
.gm-pt:hover circle,.gm-pt.on circle,.gm-pt:focus-visible circle{fill:var(--blue)}
.gm-pt.metro circle{fill:var(--violet);stroke:#fff;stroke-width:2.5}
.gm-pt.step circle{fill:var(--blue);stroke:#fff;stroke-width:2.5}
.gm-pt.step.on circle{fill:var(--violet)}
.gm-pt.end circle{fill:#fff;stroke:var(--violet)}
.gm-n{fill:#fff;font:700 11.5px var(--body);text-anchor:middle;pointer-events:none}
.gm-lab{font:600 14px var(--body);fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.gm-route{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.4;transition:opacity .2s}
.gm-route.on{opacity:1;stroke-width:3.8}
.gm-hit{fill:none;stroke:transparent;stroke-width:18;cursor:pointer}
.gm-rt{opacity:.22;transition:opacity .25s}
.gm-rt.on{opacity:1}
.gm-rt .gm-lab{opacity:0;transition:opacity .2s}
.gm-rt.on .gm-lab{opacity:1}
.gm-rt .gm-route{opacity:1;stroke:var(--violet);stroke-width:3.4}
.gm-rt .gm-route.g{stroke:var(--blue);stroke-dasharray:1 7}
.gm-rt.g .gm-route{stroke:var(--blue)}
.gm-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}

/* ---------- trière ---------- */
.tr-box{background:#fff;border-radius:22px;padding:10px;margin:12px 0;overflow:hidden}
.tr-svg{display:block;width:100%;height:auto}
.tr-t{font:600 13px var(--body);fill:var(--ink3)}
.tr-svg .oar{animation:grOar 1.7s ease-in-out infinite}
@keyframes grOar{0%,100%{transform:rotate(-13deg)}50%{transform:rotate(13deg)}}
.tr-svg.paused .oar{animation-play-state:paused}
.tr-info .facts{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}

/* ---------- monnaie ---------- */
.mo-row{margin:6px 0 14px;gap:10px}
.mo-eq{font-size:24px;color:var(--ink3)}
.mo-out{grid-template-columns:repeat(4,minmax(0,1fr))}
.mo-out .fact b{font-size:clamp(22px,2.6vw,30px)}
@media (max-width:900px){.mo-out{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- klérotérion ---------- */
.kl-wrap{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:760px){.kl-wrap{grid-template-columns:minmax(0,1fr)}}
.kl-stele{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;background:#fff;border-radius:22px;padding:16px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.kl-c{aspect-ratio:1.5/1;border:0;border-radius:6px;background:#e9e9ee;padding:0;transition:background .2s,transform .2s,box-shadow .2s}
.kl-c:hover{background:#dcdce3}
.kl-c.yes{background:var(--blue)}
.kl-c.no{background:#cfcfd6;opacity:.55}
.kl-c.me{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--violet)}
.kl-side{display:grid;gap:12px;align-content:start;justify-items:start}
.kl-k{font:600 13px var(--body);color:var(--gold)}
.kl-tube{display:flex;flex-direction:column;gap:4px;width:56px;padding:10px 8px;border-radius:12px;background:linear-gradient(90deg,#b78a52,#e8c58f 45%,#b78a52);min-height:200px}
.kl-b{display:block;height:11px;border-radius:50%;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.kl-b.w{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.kl-b.k{background:#2a2a2e}

/* ---------- ostracisme, oracle, jeux de choix ---------- */
.os-box{display:grid;gap:14px;background:#fff;border-radius:24px;padding:clamp(16px,3vw,26px)}
.os-box .lab-cap{margin:0}
.os-c{display:grid;gap:8px}
.os-cb{display:grid;gap:2px;text-align:left;border:0;background:var(--tile);border-radius:16px;padding:13px 16px;transition:background .15s}
.os-cb:hover{background:#ececf0}
.os-cb b{font-size:16.5px;letter-spacing:-.015em}
.os-cb span{font-size:14px;color:var(--ink3);line-height:1.4}
.os-sh{display:block;width:min(100%,360px);margin:0 auto}
.os-nm{font:700 24px var(--display);fill:#3b2a1d;letter-spacing:.06em}
.os-bars{display:grid;gap:8px}
.os-bar{display:grid;grid-template-columns:110px minmax(0,1fr) 54px;gap:10px;align-items:center;font-size:15px}
.os-bar>div{height:14px;border-radius:7px;background:#ececf0;overflow:hidden}
.os-bar i{display:block;height:100%;background:#b6c4d6;border-radius:7px}
.os-bar.top i{background:var(--violet)}
.os-bar.top span{font-weight:650}
.os-bar b{text-align:right;font-variant-numeric:tabular-nums}
.or-box{display:grid;gap:14px;background:#fff;border-radius:24px;padding:clamp(16px,3vw,26px)}
.or-q{margin:0;font:600 clamp(19px,2.3vw,24px)/1.3 var(--display);letter-spacing:-.025em;border-left:4px solid var(--violet);padding:4px 0 4px 16px;color:var(--ink)}
.or-box p{font-size:16px;line-height:1.5;color:#3a3a3c}
.or-box p b{color:var(--ink)}

/* ---------- qui vote ---------- */
.qv-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:22px;align-items:start}
@media (max-width:820px){.qv-wrap{grid-template-columns:minmax(0,1fr)}}
.qv-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;background:#fff;border-radius:22px;padding:18px}
.qv-grid i{aspect-ratio:1;border-radius:50%;transition:opacity .25s,transform .25s}
.qv-grid i.dim{opacity:.14;transform:scale(.8)}
.qv-side{display:grid;gap:12px;align-content:start}
.qv-leg{display:grid;gap:6px}
.qv-leg button{display:flex;align-items:center;gap:10px;border:0;background:#fff;border-radius:14px;padding:11px 14px;font-size:15px;text-align:left;transition:box-shadow .15s}
.qv-leg button i{width:14px;height:14px;border-radius:50%;flex:none}
.qv-leg button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--blue)}

/* ---------- apparier ---------- */
.ap-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;margin-bottom:6px}
.ap-col{display:grid;gap:8px;align-content:start}
.ap-b{border:0;background:#fff;border-radius:14px;padding:12px 14px;font-size:16px;text-align:left;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);transition:box-shadow .15s,background .15s}
.ap-b:hover:not(:disabled){background:#fafafa}
.ap-b.on{box-shadow:inset 0 0 0 2px var(--blue)}
.ap-b.ok{background:#f1faf4;box-shadow:inset 0 0 0 2px var(--green);color:var(--ink)}
.ap-b.no{background:#fff8e8;box-shadow:inset 0 0 0 2px #e8a317}
.ap-b:disabled{cursor:default}
.ap-wrap+.kl-msg{margin-top:6px}

/* ---------- alphabet ---------- */
.al-big{font:700 clamp(32px,6vw,60px)/1.1 var(--display);letter-spacing:.04em;margin:14px 0 8px;color:var(--ink);overflow-wrap:anywhere}
.al-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.al-chip{display:inline-flex;flex-direction:column;align-items:center;min-width:44px;background:#fff;border-radius:12px;padding:6px 8px;line-height:1.1}
.al-chip i{font:700 20px var(--display);font-style:normal}
.al-chip b{font:500 12px var(--body);color:var(--ink3)}
.al-tab{width:100%;border-collapse:collapse;font-size:15px}
.al-tab th{font:600 13px var(--body);color:var(--ink3);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line)}
.al-tab td{padding:8px 14px;border-bottom:1px solid var(--line)}
.al-tab tr:last-child td{border-bottom:0}

/* ---------- ordres, entasis, palan, Ératosthène, levier, couronne ---------- */
.or-wrap{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:22px;align-items:center}
@media (max-width:760px){.or-wrap{grid-template-columns:minmax(0,1fr)}}
.or-svg{display:block;width:100%;max-width:320px;height:auto;margin:0 auto;background:#fff;border-radius:22px}
.or-lab{font:500 12.5px var(--body);fill:var(--ink3)}
.en-box,.er-box,.mt-wrap svg{background:#fff;border-radius:22px}
.en-box{padding:8px;margin:10px 0;overflow:hidden}
.en-svg,.pa-svg,.er-svg,.lv-svg,.cr-svg,.mo-svg{display:block;width:100%;height:auto}
.er-box{padding:8px;margin:10px 0}
.mt-wrap{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:18px;align-items:center}
@media (max-width:700px){.mt-wrap{grid-template-columns:minmax(0,1fr)}}
.mt-svg{display:block;width:100%;max-width:300px;margin:0 auto;background:#14213a;border-radius:22px}
.mt-wrap .facts{grid-template-columns:minmax(0,1fr)}

/* ---------- Socrate ---------- */
.so-box{display:grid;gap:10px;background:#fff;border-radius:24px;padding:clamp(16px,3vw,26px)}
.so-log{display:grid;gap:10px}
.so-m{display:grid;gap:2px;max-width:88%;padding:10px 14px;border-radius:18px;background:var(--tile)}
.so-m b{font:600 12.5px var(--body);color:var(--ink3)}
.so-m p{font-size:16px;line-height:1.45;color:var(--ink)}
.so-m.t{justify-self:end;background:var(--blue)}
.so-m.t b,.so-m.t p{color:#fff}
.so-end{background:var(--aegean-s);border-radius:18px;padding:14px 18px;font-size:15.5px;line-height:1.5}

/* ---------- repères d’une journée ---------- */
.jr-box{display:grid;gap:10px;background:#fff;border-radius:24px;padding:clamp(16px,3vw,26px)}
.jr-clock{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.jr-clock b{font:700 clamp(40px,6vw,64px)/1 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--ink)}
.jr-clock span{font-size:15px;color:var(--ink3)}
.jr-tl{position:relative;height:18px;margin:2px 8px 6px;border-bottom:3px solid #e5e5ea}
.jr-tl i{position:absolute;top:2px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#d2d2d7}
.jr-tl i.past{background:#9bbfe8}
.jr-tl i.on{background:var(--blue);box-shadow:0 0 0 5px rgba(0,113,227,.2)}
.jr-card{background:var(--tile);margin-top:4px}
.jr-card h4{font-size:24px}

/* ---------- osselets ---------- */
.ot-box{display:grid;gap:12px;background:#fff;border-radius:24px;padding:clamp(16px,3vw,26px);margin-top:12px}
.ot-dice{display:flex;gap:12px;justify-content:center;align-items:flex-end;min-height:96px}
.ot-d{width:68px;height:76px;border-radius:30px 34px 28px 36px;background:linear-gradient(160deg,#f7f1e4,#e4dac4);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),0 8px 14px rgba(60,50,30,.12);display:grid;place-items:center}
.ot-d.narrow{width:46px;height:80px;border-radius:24px}
.ot-d b{font:700 28px var(--display);color:#4a3d28}
.ot-d.roll{animation:grRoll .5s ease-out both}
@keyframes grRoll{0%{transform:translateY(-26px) rotate(-40deg);opacity:.2}60%{transform:translateY(4px) rotate(10deg);opacity:1}100%{transform:none}}
.ot-v{text-align:center;font-size:16px;color:#3a3a3c;min-height:1.5em}
.ot-v.ok{color:var(--green);font-weight:650}
.ot-facts{margin-top:0}
.ot-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.ot-facts{grid-template-columns:minmax(0,1fr)}}
.ot-bars{display:grid;gap:6px}
.ot-bar{display:grid;grid-template-columns:62px minmax(0,1fr) 46px;gap:10px;align-items:center;font-size:14px}
.ot-bt{position:relative;display:block;height:12px;border-radius:6px;background:#ececf0}
.ot-bt i{position:absolute;left:0;top:0;height:100%;border-radius:6px;background:var(--blue);transition:width .25s;max-width:100%}
.ot-bt u{position:absolute;top:-4px;width:2px;height:20px;background:var(--violet);text-decoration:none;border-radius:2px}
.ot-bv{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink3)}

/* ---------- poses ---------- */
.po-box{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:22px;align-items:start;margin-top:12px}
@media (max-width:760px){.po-box{grid-template-columns:minmax(0,1fr)}}
.po-fig{background:#fff;border-radius:24px;padding:12px 12px 14px}
.po-svg{display:block;width:100%;max-width:260px;height:auto;margin:0 auto}
.po-leg{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;font-size:12.5px;color:var(--ink3);margin-top:6px}
.po-leg span::before{content:"";display:inline-block;width:16px;border-top:2px dashed;margin-right:6px;vertical-align:middle}
.po-leg .lg-b::before{border-color:#0071e3}.po-leg .lg-v::before{border-color:#8e44d8}.po-leg .lg-k::before{border-color:#6e6e73;border-top-style:dotted}
.po-side{display:grid;gap:12px;align-content:start}
.po-facts{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
.po-facts .fact b{font-size:30px}

/* ---------- cuisson ---------- */
.cu-box{background:#fff;border-radius:24px;padding:12px;margin:12px 0}
.cu-svg{display:block;width:100%;height:auto}
.cu-curve{display:block;width:100%;height:auto;margin-top:6px}
.cu-t{transition:fill .8s ease,stroke .8s ease}
.cu-tech{margin-top:4px;padding-top:10px;border-top:1px solid var(--line)}
.cu-row{margin-bottom:6px}
.cu-row+.row{margin-bottom:6px}

/* ---------- phalange ---------- */
.ph-svg{display:block;width:100%;height:auto;background:#fff;border-radius:22px;margin:12px 0}
.ph-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.ph-facts{grid-template-columns:minmax(0,1fr)}}
.lab .ph-facts+.lab-cap{margin-top:12px}

/* ---------- marathon ---------- */
.mr-grid{margin:14px 0}
.mr-grid .card{background:#fff}
.mr-t{display:block;font:700 clamp(26px,3vw,34px)/1.1 var(--display);letter-spacing:-.04em;margin:4px 0 8px;font-variant-numeric:tabular-nums}
.mr-need{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.mr-need{grid-template-columns:minmax(0,1fr)}}
.mr-need .fact{background:#fff}

/* ---------- plans interactifs ---------- */

/* ---------- tables et blocs de texte ---------- */
.gk{font-style:normal;font-weight:600;letter-spacing:.01em}
.tbl{width:100%;border-collapse:collapse;font-size:15.5px;background:#fff;border-radius:16px;overflow:hidden}
.tbl th{font:600 13px var(--body);color:var(--ink3);text-align:left;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--tile)}
.tbl td{padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:760px){.vs{grid-template-columns:minmax(0,1fr)}}
.link-h{display:inline-flex;gap:6px;align-items:center;font-size:15px;margin-top:8px}
.crossl{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.crossl a{display:inline-flex;align-items:center;gap:6px;border-radius:980px;background:var(--aegean-s);color:var(--aegean);padding:8px 14px;font-size:14px;font-weight:600;text-decoration:none}
.crossl a:hover{background:#d8e8f6}
.person{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start}
.person img{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:60% 40%}
.person h4{margin-bottom:2px}
.person .k{margin-bottom:2px}
@media (max-width:480px){.person{grid-template-columns:72px minmax(0,1fr)}.person img{width:72px;height:72px}}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:980px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pgrid{grid-template-columns:minmax(0,1fr)}}
.pcard{background:var(--tile);border-radius:22px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.pcard img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pcard div{padding:14px 16px 18px;display:grid;gap:4px;align-content:start}
.pcard h4{font-size:19px;letter-spacing:-.02em}
.pcard .k{margin:0}
.pcard p{font-size:15px;color:#424245;line-height:1.45}
/* frise des Jeux : étiquettes du bas séparées des années */
.ax-line{height:124px}
.ax-line::before{top:51px}
.ax-pt i{margin-top:44px}
.ax-pt{bottom:0;align-content:start}
.ax-pt.low b{top:auto;bottom:0}

/* grille de cinq objets : 5 / 3 / 2 colonnes, sans orphelin */
.objs.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:900px){.objs.five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.objs.five{grid-template-columns:repeat(2,minmax(0,1fr))}.objs.five>.obj:last-child{grid-column:1/-1;width:calc(50% - 6px);justify-self:center}}

/* ===== labos en mode « photo » (images générées) : le widget reçoit .ph quand ses images existent ===== */
.ph .kl-stele{background:#d9d3c5 url(img/l/gr-l-dalle.jpg) center/cover;padding:20px;gap:6px;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(60,48,30,.25),inset 0 10px 26px rgba(255,255,255,.35),0 22px 34px -12px rgba(40,30,10,.35)}
.ph .kl-c{border-radius:5px;background:rgba(48,38,26,.38) url(img/l/gr-l-plaquette.webp) center/94% 90% no-repeat;box-shadow:inset 0 3px 6px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.45);filter:saturate(.95)}
.ph .kl-c:hover{filter:brightness(1.12)}
.ph .kl-c.yes{filter:brightness(1.18) saturate(1.1);box-shadow:inset 0 3px 6px rgba(0,0,0,.35),0 0 0 2px #fff,0 0 0 4px var(--blue)}
.ph .kl-c.no{background-color:rgba(30,25,20,.7);filter:grayscale(.8) brightness(.55);opacity:.8}
.ph .kl-c.me{box-shadow:inset 0 3px 6px rgba(0,0,0,.35),0 0 0 2px #fff,0 0 0 5px var(--violet)}
.ph .kl-tube{width:60px;border-radius:14px 14px 22px 22px;background:linear-gradient(90deg,#5d3f1c,#c99a58 16%,#f4dcae 32%,#b5854a 58%,#6f4a22);box-shadow:0 14px 22px -8px rgba(60,40,10,.5),inset 0 0 0 1px rgba(0,0,0,.2)}
.ph .kl-b{height:15px;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.35),rgba(0,0,0,.12) 75%)}
.ph .kl-b.w{background:radial-gradient(circle at 35% 30%,#fff,#d9d5c9 70%)}
.ph .kl-b.k{background:radial-gradient(circle at 35% 30%,#76767c,#111 72%)}
.ph .ot-d{width:78px;height:90px;border-radius:0;background:url(img/l/gr-l-osselet-large.webp) center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 10px 8px rgba(60,48,26,.28));position:relative}
.ph .ot-d.narrow{width:56px;background-image:url(img/l/gr-l-osselet-etroit.webp)}
.ph .ot-d:nth-child(1){transform:rotate(-10deg)}.ph .ot-d:nth-child(2){transform:rotate(7deg)}.ph .ot-d:nth-child(3){transform:rotate(-4deg)}.ph .ot-d:nth-child(4){transform:rotate(12deg)}
.ph .ot-d b{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);min-width:26px;padding:2px 8px;border-radius:999px;background:#fff;color:var(--ink);font:700 15px var(--display);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.ph .ot-dice{min-height:116px;padding-bottom:18px}
.cu-ph{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:20px;align-items:center}
@media (max-width:760px){.cu-ph{grid-template-columns:minmax(0,1fr)}}
.cu-photo{position:relative;border-radius:22px;background:linear-gradient(180deg,#fbfbfd,#ececf1);padding:22px 26px 14px;overflow:hidden;display:grid;justify-items:center;gap:8px}
.cu-glow{position:absolute;inset:0;opacity:0;transition:opacity .5s;background:radial-gradient(ellipse at 50% 62%,rgba(255,126,40,.42),rgba(255,126,40,0) 68%)}
.cu-photo[data-heat="1"] .cu-glow{opacity:1}.cu-photo[data-heat="2"] .cu-glow{opacity:.45}
.cu-vimg{position:relative;display:block;width:100%;max-width:230px;height:auto;transition:opacity .25s;filter:drop-shadow(0 14px 14px rgba(40,30,20,.3))}
.cu-cap{position:relative;margin:0;font:700 16px var(--display);color:var(--ink)}


/* ordres : le vrai chapiteau à côté du dessin des proportions */
.or-cap{float:right;width:min(42%,150px);margin:0 0 8px 14px;aspect-ratio:1;border-radius:18px;background:radial-gradient(circle at 50% 40%,#fff,#ecebe6);display:grid;place-items:center;overflow:hidden}
.or-cap img{width:88%;height:88%;object-fit:contain;display:block;filter:drop-shadow(0 8px 8px rgba(60,48,26,.22))}

.mo-ph{display:block;width:100%;height:auto;touch-action:none;cursor:default}.mo-ph .mo-bridge{cursor:grab}.mo-ph.grab,.mo-ph.grab .mo-bridge{cursor:grabbing}