/* Orenlia / Volupté — feuille commune, itération 2 (tasteskill, direction « name-as-monument »).
   Idée : le nom vient du refrain de Baudelaire, « luxe, calme et volupté ». Le mot est le monument.
   Peau pâle, encre lie-de-vin, un seul accent grenat. Pas de filets, pas de dégradés, pas d'ombres. */

/* Cabinet Grotesk (Indian Type Foundry, Fontshare, licence ITF Free Font License : usage commercial et web autorisés), auto-hébergée. */
@font-face{font-family:"Cabinet Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/cabinet-grotesk-400.woff2) format("woff2")}
@font-face{font-family:"Cabinet Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/cabinet-grotesk-500.woff2) format("woff2")}
@font-face{font-family:"Cabinet Grotesk";font-weight:800;font-style:normal;font-display:swap;src:url(/assets/fonts/cabinet-grotesk-800.woff2) format("woff2")}

:root{
  --bg:#EFE1DA;        /* peau, papier */
  --surface:#E4D1C8;   /* un ton plus bas */
  --ink:#2A0F18;       /* lie-de-vin presque noire */
  --muted:#6B4650;
  --accent:#7A1C30;    /* grenat : l'action et le monument */
  --accent-strong:#5E1223;
  --accent-ink:#F7EDEF;
  --font:"Cabinet Grotesk","Helvetica Neue",Arial,sans-serif;

  --step-small:clamp(.8125rem,.79rem + .1vw,.875rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);
  --margin:clamp(1.25rem,2.2vw,1.75rem);
  --section:clamp(6rem,13vw,13rem);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--step-body);line-height:1.5;
  font-kerning:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul[class],ol[class]{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto;background:var(--surface)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
p{max-width:62ch;text-wrap:pretty}

.lien{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.2em;text-decoration-thickness:.07em;transition:text-decoration-color 180ms ease}
@media (hover:hover) and (pointer:fine){.lien:hover{text-decoration-color:currentColor}}
.bouton{display:inline-block;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:500;
  padding:1.05rem 1.6rem;border-radius:0;transition:transform 140ms var(--ease-out),background-color 180ms ease}
.bouton:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.bouton:hover{background:var(--accent-strong)}}

/* ---------- le monument ---------- */
.ouverture{position:relative;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;padding:var(--margin)}
.barre{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:var(--step-body)}
.barre .marque{font-weight:800;text-decoration:none;letter-spacing:-.01em}
.barre nav{display:flex;gap:1.4rem}
.barre nav a{text-decoration:none}
.accroche{margin-top:6rem;max-width:34ch;font-size:var(--step-lead);line-height:1.3;font-weight:500}
.ouverture .acheter{margin-top:1.75rem}
.ouverture .conditions{margin-top:1rem;font-size:var(--step-small);color:var(--muted);max-width:44ch}
.monument{position:absolute;left:-4.5vw;bottom:-.1em;margin:0;white-space:nowrap;pointer-events:none;
  font-weight:800;font-size:clamp(10rem,35.5vw,56rem);line-height:.8;letter-spacing:-.05em;color:var(--accent);
  transform-origin:30% 100%}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .monument{animation:monument linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes monument{to{transform:scale(.93)}}
  }
}
@media (max-width:640px){
  .accroche{margin-top:3rem;max-width:58vw;font-size:1.0625rem}
  .ouverture .conditions{max-width:52vw}
  .barre nav{display:none}
  .monument{left:auto;right:-14vw;bottom:auto;top:-4svh;writing-mode:vertical-rl;font-size:60vw;line-height:.82;transform-origin:100% 50%}
}

/* ---------- le tirage : un plat carré, du texte rare ---------- */
.tirage{display:grid;grid-template-columns:1fr 1fr;min-height:88svh;background:var(--surface)}
.tirage .plat{display:flex;align-items:center;justify-content:center;padding:2.5rem}
.carre{width:100%;max-width:38rem;aspect-ratio:1;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;padding:clamp(1.75rem,5vw,4.5rem);
  transition:transform 420ms var(--ease-out),opacity 300ms ease}
.carre{flex-direction:column;gap:clamp(.75rem,2.2vw,1.75rem)}
.carre .trait{flex:0 1 42%;min-height:0;width:100%;background:#E8A0B0;
  -webkit-mask:var(--art) center/contain no-repeat;mask:var(--art) center/contain no-repeat}
.carre .trait[hidden]{display:none}
.carre p{font-weight:500;font-size:clamp(1.5rem,2.4vw,2.25rem);line-height:1.18;letter-spacing:-.01em;max-width:none;text-wrap:balance}
.carre.tourne{transform:rotate(-3deg) scale(.96);opacity:0}
.tirage .colonne{display:flex;flex-direction:column;justify-content:space-between;gap:3rem;padding:2.5rem var(--margin) 2.5rem 1rem}
.onglets{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;font-size:var(--step-body)}
.onglets button{color:var(--muted);font-weight:500;transition:color 180ms ease}
.onglets button[aria-selected=true]{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.onglets button:hover{color:var(--ink)}}
.tirage h2{font-size:clamp(1.75rem,2.4vw,2.25rem);font-weight:800;line-height:1.02;letter-spacing:-.025em}
.tirage .desc{margin-top:1.25rem;max-width:34ch}
.cellules{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.cellules > *{display:flex;align-items:center;justify-content:center;min-height:72px;padding:0 1rem;text-align:center;
  font-weight:500;text-decoration:none;transition:transform 140ms var(--ease-out),background-color 180ms ease}
.cellules > *:active{transform:scale(.97)}
.cellules .encre{background:var(--ink);color:var(--bg)}
.cellules .ton{background:var(--bg);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.cellules .encre:hover{background:var(--accent)}.cellules .ton:hover{background:#F6ECE6}}
@media (max-width:760px){
  .tirage{grid-template-columns:1fr}
  .tirage .plat{padding:1rem 1rem 0}
  .tirage .colonne{padding:2rem 1rem 1.5rem;gap:2rem}
  .onglets{font-size:1.0625rem}
  .tirage h2{font-size:1.75rem}
  .cellules{grid-template-columns:1fr}
  .cellules > *{min-height:60px}
}

/* ---------- le tableau : d'où vient le nom ---------- */
.tableau{padding:var(--section) var(--margin) 0;display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;align-items:end}
.tableau figure{grid-column:1 / span 8;overflow:hidden}
.tableau img{width:100%;height:auto;aspect-ratio:1024/818;object-fit:cover}
.tableau .vers{grid-column:9 / span 4;padding-bottom:.5rem}
.tableau blockquote{font-size:clamp(1.5rem,2.4vw,2.25rem);font-weight:500;line-height:1.15;letter-spacing:-.015em}
.tableau .source{margin-top:1rem;color:var(--muted);font-size:var(--step-small)}
@media (max-width:760px){.tableau{grid-template-columns:1fr}.tableau figure,.tableau .vers{grid-column:1}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .tableau img{animation:derive linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes derive{from{transform:scale(1.08) translateY(-2%)}to{transform:scale(1.02) translateY(2%)}}
  }
}

/* ---------- comment on joue : une colonne, des incises ---------- */
.deroule{padding:var(--section) var(--margin)}
.deroule .col{max-width:36rem;margin-left:max(0px,calc(30vw - var(--margin)))}
.deroule h2{font-size:var(--step-head);font-weight:800;letter-spacing:-.025em;line-height:1.05;margin-bottom:3rem}
.deroule .etape + .etape{margin-top:4.5rem}
.deroule .etape p{max-width:none}
.deroule .etape p b{font-weight:800}
.deroule .etape img{margin-top:1.25rem;width:100%;height:auto}
.echelle{margin-top:1.25rem;display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem}
.echelle li{font-size:var(--step-small);font-weight:500;padding-top:.6rem}
.echelle li::before{content:"";display:block;height:.6rem;background:var(--teinte);margin-bottom:.5rem}
@media (max-width:760px){.deroule .col{margin-left:0}.deroule .etape + .etape{margin-top:3.5rem}.deroule h2{font-size:1.5rem;margin-bottom:2rem}}

/* ---------- questions ---------- */
.questions{overflow-x:clip;padding:var(--section) var(--margin) calc(var(--section) * .8);display:grid;grid-template-columns:repeat(12,1fr);gap:0 1.5rem}
.questions h2{grid-column:1 / -1;font-size:clamp(2.5rem,5.5vw,5.5rem);font-weight:800;letter-spacing:-.035em;line-height:.95;margin-bottom:5rem}
.questions .liste{grid-column:5 / -1;display:flex;flex-direction:column;gap:.75rem}
.questions details{padding:1rem 1.5rem;margin:0 -1.5rem;transition:background-color 240ms ease}
.questions details[open]{background:var(--surface)}
.questions summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  font-size:var(--step-lead);font-weight:500;line-height:1.25}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"";flex:0 0 auto;width:.6rem;height:.6rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-25%);transition:transform 240ms var(--ease-out)}
.questions details[open] summary::after{transform:rotate(225deg) translateY(-25%)}
.questions details p{margin-top:1rem;max-width:48ch}
@media (max-width:760px){
  .questions h2{font-size:10vw;margin-bottom:3rem}
  .questions .liste{grid-column:1 / -1}
  .questions details{margin:0 calc(var(--margin) * -1);padding:1rem var(--margin)}
}

/* ---------- pied : le nom revient, couleurs inversées ---------- */
.pied{background:var(--accent);color:var(--accent-ink);min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:2.5rem var(--margin) 1.25rem;
  position:sticky;bottom:0;z-index:0}
main{position:relative;z-index:1;background:var(--bg)}
.pied .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem 1.5rem;font-size:var(--step-body)}
.pied .cols ul{list-style:none;margin:0;padding:0}
.pied .cols li{margin-bottom:.3rem}
.pied .cols li:first-child{font-weight:500}
.pied .cols a{text-decoration:none}
.pied .cols [aria-current]{text-decoration:underline;text-underline-offset:.2em}
.pied .nom{width:100%;height:auto;margin-top:2rem}
.pied .nom text{fill:var(--accent-ink);font-family:var(--font);font-weight:800;letter-spacing:-.045em}
.pied .legal{margin-top:1.25rem;font-size:var(--step-small);opacity:.85}
@media (max-width:760px){.pied{position:static}.pied .cols{grid-template-columns:1fr 1fr}}

/* ---------- entrées (une fois) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js [data-rise]{opacity:0;transform:translateY(18px);animation:rise 800ms var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 90ms + 120ms)}
  .js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out);transition-delay:calc(var(--i,0) * 75ms)}
  .js [data-reveal].is-in{opacity:1;transform:none}
}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- pages de lecture : guides, confidentialité, assistance ---------- */
.lecture{max-width:44rem;padding:2.5rem var(--margin) 5rem}
.lecture-page .barre{padding:var(--margin)}
.lecture .crumb,.lecture .fil{font-size:var(--step-small);color:var(--muted);margin:0 0 2.5rem}
.lecture .crumb a{color:var(--muted)}
.lecture h1{font-size:clamp(2.4rem,5.6vw,4.5rem);font-weight:800;line-height:.98;letter-spacing:-.035em;text-wrap:balance}
.lecture h2{margin:4rem 0 .9rem;font-size:var(--step-head);font-weight:800;letter-spacing:-.025em;line-height:1.05}
.lecture h3{margin:2.25rem 0 .4rem;font-size:1.1875rem;font-weight:500}
.lecture p,.lecture li{max-width:62ch}
.lecture p + p{margin-top:1rem}
.lecture > .lede,.lecture .lead{margin-top:1.5rem;font-size:var(--step-lead);line-height:1.35;font-weight:500}
.lecture strong{font-weight:500}
.lecture ol.list{padding-left:1.5rem;margin:3rem 0 0}
.lecture ol.list li{margin:0 0 1.75rem;padding-left:.35rem}
.lecture ol.list li::marker{font-weight:800;color:var(--accent)}
.lecture ol.list b{display:block;font-size:1.375rem;font-weight:800;letter-spacing:-.015em;line-height:1.2;margin-bottom:.3rem}
.lecture .btn{display:inline-block;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:500;padding:1rem 1.45rem;
  transition:transform 140ms var(--ease-out),background-color 180ms ease}
.lecture .btn:active{transform:scale(.97)}
.lecture .btn.ghost{background:var(--surface);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.lecture .btn:hover{background:var(--accent-strong)}.lecture .btn.ghost:hover{background:#D9C3B9}}
.lecture .appcta{margin:4rem calc(var(--margin) * -1) 0;padding:2rem var(--margin);background:var(--surface)}
.lecture .appcta p{margin:0 0 1.25rem}
.lecture .appcta p.age{margin:1rem 0 0 !important;font-size:var(--step-small);color:var(--muted)}
.lecture .more{display:grid;gap:1.5rem 2.5rem;grid-template-columns:1fr;margin:4rem 0 0}
@media (min-width:40rem){.lecture .more{grid-template-columns:1fr 1fr}}
.lecture .more a{text-decoration:none}
.lecture .more b{display:block;font-size:1.375rem;font-weight:800;letter-spacing:-.015em}
.lecture .more span{display:block;color:var(--muted);margin-top:.3rem}
.lecture .foot,.lecture .meta{margin:4.5rem 0 0;font-size:var(--step-small);color:var(--muted);word-spacing:.15em}
.lecture .foot a,.lecture .meta a{color:var(--muted);margin-right:1rem}
.lecture .langs{font-size:var(--step-small);color:var(--muted);margin:0 0 3rem;display:flex;flex-wrap:wrap;gap:.3rem 1.1rem}
.lecture .langs a{color:var(--muted)}
.lecture .langs [aria-current]{color:var(--ink)}
.lecture .mail{display:inline-block;font-size:1.5rem;font-weight:800;margin:1rem 0 2rem;letter-spacing:-.015em}
.lecture .qa{margin-top:2rem}
.lecture .q{font-size:1.1875rem;font-weight:500;margin:0 0 .35rem}
/* le tirage gratuit */
.lecture .moods{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:2.5rem 0 1.25rem;font-size:1.0625rem}
.lecture .mood{color:var(--muted);font-weight:500;padding:.3rem 0;transition:color 180ms ease}
.lecture .mood[aria-pressed=true]{color:var(--ink)}
.lecture .deck{background:var(--accent);color:var(--accent-ink);aspect-ratio:1;max-width:30rem;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.75rem,6vw,3.5rem)}
.lecture .kind{margin:0 0 1rem;font-size:var(--step-small);font-weight:500;opacity:.85}
.lecture .card-text{font-size:clamp(1.4rem,3.6vw,2rem);font-weight:500;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.lecture .draw{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 0}
.lecture .locknote{color:var(--muted);font-size:var(--step-small);margin:.9rem 0 0}
.questions .lire{font-size:var(--step-lead);font-weight:500}
.ecrans{padding:var(--section) var(--margin) 0;display:grid;grid-template-columns:5fr 4fr 4fr;gap:1.5rem;align-items:start}
.ecrans img{width:100%;height:auto}
.ecrans img:nth-child(2){margin-top:6rem}
.ecrans img:nth-child(3){margin-top:12rem}
@media (max-width:760px){.ecrans{grid-template-columns:1fr}.ecrans img:nth-child(n){margin-top:0}}
/* en-tête des pages de lecture */
.masthead{padding:var(--margin);font-size:var(--step-body)}
.wordmark{font-weight:800;text-decoration:none;letter-spacing:-.01em}
/* guides : l'article ouvre sur de vraies cartes du jeu */
.lecture .crumb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lecture h1{font-size:clamp(2.1rem,3.4vw,3.25rem);max-width:none}
.lecture{max-width:52rem}
.lecture > .acheter{margin-top:1.75rem}
.cartes-guide{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin:2.5rem 0 0}
.cartes-guide img{width:100%;height:auto;aspect-ratio:2/3}
.cartes-guide img:nth-child(even){margin-top:2rem}
@media (max-width:640px){.cartes-guide{grid-template-columns:repeat(2,1fr)}}
.lecture .deck{display:flex;flex-direction:column}
.lecture .kind{order:2;margin:1.25rem 0 0}