@font-face{font-family:Anton;src:url(/polices/anton-latin.woff2) format("woff2");font-display:swap}
@font-face{font-family:Archivo;src:url(/polices/archivo-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--nuit:#0b0a0d;--nuit2:#16141b;--nuit3:#221f29;--papier:#f4f1ec;--doux:#d9d4df;--gris:#a9a3b3;--rose:#ff2d6f;--trait:#2d2935;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--nuit);color:var(--papier);font:17px/1.6 Archivo,system-ui,sans-serif}
a{color:inherit}
.col{max-width:760px;margin:0 auto;padding-inline:18px}
header{padding-block:36px 30px;border-bottom:1px solid var(--trait)}
.tete{display:flex;gap:18px;align-items:flex-end;justify-content:space-between}
.vignette{width:112px;height:112px;border-radius:24px;flex:none}
.fil{font:600 14px/1 Archivo,sans-serif;color:var(--gris);margin-bottom:18px}
h1{font:400 clamp(2.4rem,1.6rem + 3.6vw,4.2rem)/.95 Anton,Impact,sans-serif;text-transform:uppercase;margin:0;text-wrap:balance;letter-spacing:.01em}
h1 em{font-style:normal;color:var(--rose)}
.chapo{font-size:19px;color:var(--doux);margin:20px 0 0;max-width:60ch}
.faits{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.faits span{border:1px solid var(--trait);background:var(--nuit2);border-radius:999px;padding:7px 13px;font:700 14px/1 Archivo,sans-serif}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;margin-top:24px;border-radius:14px;background:var(--rose);color:var(--nuit);font:800 19px/1 Archivo,sans-serif;text-decoration:none}
.cta:focus-visible,a:focus-visible{outline:3px solid var(--papier);outline-offset:3px}
section{padding-block:36px 4px}
h2{font:400 clamp(1.8rem,1.4rem + 1.6vw,2.4rem)/1 Anton,Impact,sans-serif;text-transform:uppercase;margin:0 0 16px;text-wrap:balance}
p{margin:0 0 14px}
.regles{list-style:none;counter-reset:r;margin:0;padding:0;display:grid;gap:12px}
.regles li{counter-increment:r;display:grid;grid-template-columns:44px 1fr;gap:14px;background:var(--nuit2);border:1px solid var(--trait);border-radius:14px;padding:16px}
.regles li:before{content:counter(r);font:400 34px/1 Anton,sans-serif;color:var(--rose);text-align:center}
.regles b{display:block;font-size:19px}
.regles span{color:var(--gris)}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.role{background:var(--nuit2);border:1px solid var(--trait);border-radius:14px;padding:16px}
.role b{font:400 22px/1 Anton,sans-serif;text-transform:uppercase;display:block;margin-bottom:8px}
.role.fort b{color:var(--rose)}
.role p{margin:0;color:var(--doux);font-size:16px}
.prefixe{font-weight:800;color:var(--rose)}
.exemples{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ambiance{background:var(--nuit2);border:1px solid var(--trait);border-radius:14px;padding:16px}
.ambiance h3{margin:0 0 10px;font:800 13px/1 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.ambiance ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ambiance li{border-bottom:1px dashed var(--trait);padding-bottom:8px;font-weight:600}
.ambiance li:last-child{border:0;padding:0}
.ambiance.paires li{display:flex;justify-content:space-between;gap:10px}
.ambiance.paires li i{font-style:normal;color:var(--rose)}
.ambiance.puces ul{display:flex;flex-wrap:wrap;gap:8px}
.ambiance.puces li{border:1px solid var(--trait);border-radius:999px;padding:6px 12px;font:800 13px/1 Archivo,sans-serif;letter-spacing:.08em}
details{border-top:1px solid var(--trait);padding-block:14px}
details:last-of-type{border-bottom:1px solid var(--trait)}
summary{cursor:pointer;font-weight:800;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:12px;min-height:44px;align-items:center}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--rose);font:400 26px/1 Anton,sans-serif}
details[open] summary:after{content:"–"}
details p{margin:8px 0 0;color:var(--doux)}
.fin{margin-block:40px 8px;background:var(--nuit3);border-radius:18px;padding:26px;display:grid;gap:10px;justify-items:start}
.fin h2,.fin p{margin:0}
.fin .cta{margin-top:6px}
.autres ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.autres a{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--trait);border-radius:999px;padding:0 16px;font-weight:700;text-decoration:none}
footer{margin-top:40px;border-top:1px solid var(--trait);padding-block:22px 34px;color:var(--gris);font-size:14px}
@media (max-width:640px){.roles,.exemples{grid-template-columns:1fr}.vignette{width:76px;height:76px;border-radius:18px}}