/* Volcano — système partagé. Basalte, lave, cendre, crème. Archivo (titres en largeur étendue), JetBrains Mono (données). */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=JetBrains+Mono:wght@400;500;700&display=swap");
:root {
  --basalt: #14110F; --rock: #1F1A17; --rock2: #29231F; --line: #4A4038; --ash: #B9B2A8; --cream: #F3EEE6;
  --lava: #FF4A1C; --lava-hot: #FF8A3D; --red: #FF3B5C;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --gut: clamp(16px, 4vw, 48px); --max: 1240px; --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--basalt); scrollbar-color: var(--line) var(--basalt); scrollbar-width: thin; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--basalt); color: var(--cream); font: 400 16px/1.55 var(--sans); font-stretch: 100%; -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { background: var(--lava); color: var(--basalt); }
:focus-visible { outline: 2px solid var(--lava); outline-offset: 3px; }
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a.txt { text-decoration: underline; text-decoration-color: var(--line); } a.txt:hover { text-decoration-color: var(--lava); }
h1, h2, h3 { font-family: var(--sans); font-stretch: 125%; font-weight: 800; line-height: .98; letter-spacing: -.02em; margin: 0; text-wrap: balance; text-transform: uppercase; }
h1 { font-size: clamp(2.5rem, 7.2vw, 5.75rem); } h2 { font-size: clamp(1.75rem, 4vw, 3rem); } h3, h2.h3 { font-size: 1.05rem; letter-spacing: 0; line-height: 1.2; }
p { margin: 0; max-width: 68ch; text-wrap: pretty; } .lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ash); }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } .ash { color: var(--ash); } .lava { color: var(--lava); }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }
section { padding-block: clamp(56px, 9vw, 120px) 0; } section > .wrap > h2 + p { margin-top: 18px; }

/* en-tête */
.nav { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 32px); padding: 16px var(--gut); position: relative; z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; font: 800 1.05rem/1 var(--sans); font-stretch: 125%; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.brand svg { width: 26px; height: 26px; } .brand-mark { display: inline-flex; } .brand img { width: 28px; height: 28px; border-radius: 50%; display: block; }
.nav .links { display: flex; gap: clamp(12px, 2vw, 28px); margin-left: auto; align-items: center; font: 500 .8125rem/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.nav .links a { text-decoration: none; color: var(--ash); padding: 8px 0; } .nav .links a:hover, .nav .links a[aria-current] { color: var(--cream); }
.xbtn { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 2px; color: var(--ash); } .xbtn:hover { color: var(--cream); border-color: var(--ash); }
.xbtn svg { width: 15px; height: 15px; } .xbtn[aria-disabled="true"] { cursor: default; }
@media (max-width: 620px) { .nav .links a.opt { display: none; } }

/* boutons : angles nets */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px; border: 1px solid var(--lava); border-radius: 2px; background: var(--lava); color: var(--basalt);
  font: 700 .875rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.btn:hover { background: var(--lava-hot); border-color: var(--lava-hot); } .btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--cream); border-color: var(--line); } .btn.ghost:hover { border-color: var(--cream); background: transparent; }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: .75rem; } .btn[disabled] { opacity: .45; cursor: not-allowed; }
.nav .links a.btn { color: var(--basalt); padding: 0 14px; }

/* statuts d'une tranche */
.st { display: inline-flex; align-items: center; gap: 7px; font: 700 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.st::before { content: ""; width: 9px; height: 9px; border: 1.5px solid currentColor; }
.st.armed { color: var(--ash); } .st.burned { color: var(--lava); } .st.burned::before { background: currentColor; }
.st.cancelled { color: var(--red); text-decoration: line-through; text-decoration-thickness: 1px; } .st.cancelled::before { background: linear-gradient(45deg, transparent 42%, currentColor 42% 58%, transparent 58%); }

/* bandeau « simulé », emplacements vides, filets */
.sim { font: 500 .72rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--basalt); background: var(--ash); padding: 3px 7px; border-radius: 2px; display: inline-block; }
.slot { border: 1px dashed var(--line); color: var(--ash); font: 400 .75rem/1.4 var(--mono); display: grid; place-items: center; text-align: center; padding: 16px; min-height: 120px; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.ca { font: 500 .8rem/1 var(--mono); color: var(--ash); } .ca b { color: var(--cream); font-weight: 500; }

/* FAQ : accordéon natif */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: baseline; padding: 20px 10px 20px 0; font: 700 1.05rem/1.3 var(--sans); font-stretch: 112%; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.2rem/1 var(--mono); color: var(--lava); transition: transform .3s var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--ash); }

/* pied */
.foot { margin-top: clamp(64px, 10vw, 140px); border-top: 1px solid var(--line); padding: 28px var(--gut) 36px; display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; font: 400 .78rem/1.5 var(--mono); color: var(--ash); }
.foot a { color: var(--ash); text-decoration: none; } .foot a:hover { color: var(--cream); } .foot .sp { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }