/* Rap France — site officiel. Thème : la photo de profil du serveur (papier déchiré, grain gris, encre noire,
   disque à l'aquarelle) aux couleurs du jeu. Toutes les couleurs et polices sont définies ici, une seule fois. */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("/polices/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("/polices/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-weight: 900; font-style: normal; font-display: swap; src: url("/polices/InterDisplay-Black.woff2") format("woff2"); }

:root {
  --papier: #eeebe5;
  --papier-clair: #f8f6f2;
  --papier-fonce: #e1dcd3;
  --encre: #141216;
  --encre-2: #221e27;
  --encre-3: #332e39;
  --texte: #1b181e;
  --texte-doux: #57515d;
  --texte-clair: #f3f0ea;
  --texte-clair-doux: #b9b2c0;
  --or: #ffc23d;
  --rose: #ff3d6e;
  --violet: #7b3dff;
  --violet-fonce: #3b1d8f;
  --scotch: rgba(238, 226, 192, 0.78);
  --discord: #5865f2;
  --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-titre: "Inter Display", "Inter", system-ui, sans-serif;
  --largeur: 1180px;
  --marge: clamp(16px, 4vw, 40px);
  --rayon: 6px;
  --ombre-photo: 0 14px 30px -8px rgba(20, 18, 22, 0.35), 0 2px 5px rgba(20, 18, 22, 0.14);
  --grain: url("/img/grain.webp");
  --dechirure-h: 30px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grain) repeat, var(--papier);
  color: var(--texte);
  font: 400 1.0625rem/1.6 var(--police);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
/* les taches et ombres décoratives peuvent dépasser des blocs : jamais de défilement horizontal pour autant */
main, .pied { overflow-x: clip; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--or); color: var(--encre); }

.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aller-contenu { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--encre); color: var(--texte-clair); padding: 10px 16px; border-radius: var(--rayon); text-decoration: none; font-weight: 600; }
.aller-contenu:focus { top: 12px; }

.conteneur { width: min(100% - 2 * var(--marge), var(--largeur)); margin-inline: auto; }

/* ------------------------------------------------------------------------------------------------ titres */
.titre-geant, .titre-section {
  font-family: var(--police-titre);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.88;
}
.titre-section { font-size: clamp(2.3rem, 5.5vw, 4.2rem); position: relative; display: inline-block; margin-bottom: 0.35em; isolation: isolate; text-wrap: balance; }
.titre-section::before {
  content: ""; position: absolute; z-index: -1; left: -0.6em; top: -0.62em; width: 2.7em; height: 1.95em;
  background: url("/img/tache-1.webp") center / contain no-repeat; opacity: 0.7; transform: rotate(-8deg);
}
.titre-section.tache-violette::before { background-image: url("/img/tache-2.webp"); }
.titre-section.tache-orangee::before { background-image: url("/img/tache-3.webp"); }
.surtitre {
  display: inline-block; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--encre); color: var(--texte-clair); padding: 4px 10px 3px; transform: rotate(-1.5deg); margin-bottom: 18px;
}
.chapeau { text-wrap: pretty; font-size: 1.15rem; color: var(--texte-doux); max-width: 46rem; }
.doux { color: var(--texte-doux); }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.9em; }
.aquarelle-texte {
  background: url("/img/aquarelle.webp") 30% 40% / 900px auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) { .aquarelle-texte { color: var(--rose); } }

/* ------------------------------------------------------------------------------------------------ boutons */
.bouton {
  --fond: var(--encre); --texte-bouton: var(--texte-clair);
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 12px 22px; border: 0; border-radius: var(--rayon);
  background: var(--fond); color: var(--texte-bouton);
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bouton svg { width: 22px; height: 22px; flex: none; fill: currentColor; }
.bouton small { display: block; font-weight: 400; font-size: 0.8rem; opacity: 0.78; margin-top: 2px; }
.bouton-principal { isolation: isolate; background: transparent; }
.bouton-principal::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--rayon); background: var(--encre); }
.bouton-principal::before {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: var(--rayon);
  background: url("/img/aquarelle.webp") 60% 30% / 600px auto; transform: translate(7px, 7px);
  transition: transform 0.15s ease;
}
.bouton-principal:hover { transform: translate(-2px, -2px); }
.bouton-principal:hover::before { transform: translate(10px, 10px); }
.bouton-principal:active { transform: translate(2px, 2px); }
.bouton-principal:active::before { transform: translate(4px, 4px); }
.bouton-discord { --fond: var(--discord); --texte-bouton: #fff; }
.bouton-discord:hover { box-shadow: 0 6px 18px -6px rgba(88, 101, 242, 0.7); transform: translateY(-1px); }
.bouton-clair { --fond: var(--papier-clair); --texte-bouton: var(--encre); box-shadow: inset 0 0 0 2px var(--encre); }
.bouton-clair:hover { --fond: #fff; transform: translateY(-1px); }
.bouton-petit { min-height: 40px; padding: 8px 16px; font-size: 0.92rem; }
.lien-fleche { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--rose); padding-bottom: 1px; }
.lien-fleche:hover { border-bottom-color: var(--encre); }

/* ------------------------------------------------------------------------------------------------ en-tête */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: var(--grain), rgba(238, 235, 229, 0.94);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(20, 18, 22, 0.08);
}
.entete-dedans { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--police-titre); font-weight: 900; text-transform: uppercase; font-size: 1.25rem; letter-spacing: -0.01em; }
.marque img { width: 40px; height: 40px; }
.menu { display: flex; gap: 4px; margin-left: auto; }
.menu a { text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 8px 10px; border-radius: var(--rayon); }
.menu a:hover { background: rgba(20, 18, 22, 0.07); }
.burger { display: none; margin-left: auto; width: 46px; height: 46px; border: 0; background: transparent; border-radius: var(--rayon); cursor: pointer; }
.burger span:not(.visuellement-cache) { display: block; width: 24px; height: 3px; margin: 5px auto; background: var(--encre); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.burger[aria-expanded="true"] span:nth-of-type(2) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-of-type(3) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-of-type(4) { transform: translateY(-8px) rotate(-45deg); }

/* ------------------------------------------------------------------------------------------------ ouverture */
.ouverture { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 96px) 0 clamp(70px, 9vw, 120px); }
.ouverture-grunge { position: absolute; top: 0; right: 0; width: min(62vw, 760px); pointer-events: none; user-select: none; }
.ouverture-dedans { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.titre-geant { font-size: clamp(4.2rem, 13vw, 10.5rem); margin-bottom: 0.18em; }
.titre-geant span { display: block; }
.accroche { text-wrap: balance; font-weight: 600; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.3; margin-bottom: 0.6em; }
.ouverture .intro { color: var(--texte-doux); font-size: 1.1rem; max-width: 34rem; }
.actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 30px; }
.ouverture-visuel { position: relative; min-height: 380px; }
.ouverture-visuel .photo { width: 92%; margin-left: auto; margin-top: 40px; }
.ouverture-disque {
  position: absolute; width: clamp(150px, 42%, 300px); left: -6%; bottom: -14%;
  filter: drop-shadow(0 12px 18px rgba(20, 18, 22, 0.28)); animation: tourne 60s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------------------------------------ photos scotchées */
.photo { --r: -2deg; position: relative; margin: 0; padding: 10px 10px 12px; background: #fbfaf7; box-shadow: var(--ombre-photo); transform: rotate(var(--r)); transition: transform 0.25s ease; }
.photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--encre); }
.photo figcaption { font-size: 0.86rem; font-weight: 600; color: var(--texte-doux); padding: 8px 2px 0; }
.photo::before {
  content: ""; position: absolute; top: -13px; left: 50%; width: 112px; height: 30px; z-index: 2;
  background: var(--scotch); transform: translateX(-50%) rotate(-4deg);
  clip-path: polygon(3% 8%, 0 30%, 4% 52%, 1% 78%, 4% 100%, 97% 92%, 100% 70%, 96% 46%, 99% 22%, 95% 0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.r1 { --r: -3deg; } .r2 { --r: 2deg; } .r3 { --r: -1.5deg; } .r4 { --r: 3deg; } .r5 { --r: -2.5deg; } .r6 { --r: 1.2deg; }
a.photo, button.photo { display: block; border: 0; cursor: zoom-in; text-align: left; color: inherit; text-decoration: none; }
a.photo:hover, button.photo:hover { transform: rotate(0deg) scale(1.02); }

/* ------------------------------------------------------------------------------------------------ bandes d'encre (bords déchirés) */
.bande-encre {
  position: relative; background: var(--grain) repeat, var(--encre); color: var(--texte-clair);
  margin: var(--dechirure-h) 0;
}
.bande-encre::before, .bande-encre::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--dechirure-h); background: var(--encre);
  -webkit-mask: url("/img/dechirure-2.svg") repeat-x 0 0 / 1440px 100%; mask: url("/img/dechirure-2.svg") repeat-x 0 0 / 1440px 100%;
}
.bande-encre::before { top: calc(1px - var(--dechirure-h)); }
.bande-encre::after { bottom: calc(1px - var(--dechirure-h)); transform: scaleY(-1); -webkit-mask-image: url("/img/dechirure-3.svg"); mask-image: url("/img/dechirure-3.svg"); }
.bande-encre .titre-section::before { opacity: 0.85; }
.bande-encre .chapeau, .bande-encre .doux { color: var(--texte-clair-doux); }

.bande-papier-fonce { position: relative; background: var(--grain) repeat, var(--papier-fonce); margin: var(--dechirure-h) 0; }
.bande-papier-fonce::before, .bande-papier-fonce::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--dechirure-h); background: var(--papier-fonce);
  -webkit-mask: url("/img/dechirure-1.svg") repeat-x 0 0 / 1440px 100%; mask: url("/img/dechirure-1.svg") repeat-x 0 0 / 1440px 100%;
}
.bande-papier-fonce::before { top: calc(1px - var(--dechirure-h)); }
.bande-papier-fonce::after { bottom: calc(1px - var(--dechirure-h)); transform: scaleY(-1); }

/* ------------------------------------------------------------------------------------------------ chiffres */
.chiffres { padding: 26px 0 22px; }
.chiffres ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 28px; }
.chiffres li { display: flex; align-items: baseline; gap: 10px; font-weight: 600; color: var(--texte-clair-doux); }
.chiffres strong { font-family: var(--police-titre); font-weight: 900; font-size: clamp(1.9rem, 3.6vw, 2.6rem); color: var(--texte-clair); line-height: 1; }
.chiffres li:nth-child(1) strong { color: var(--or); }
.chiffres li:nth-child(3) strong { color: var(--rose); }
.chiffres li:nth-child(5) strong { color: #b48cff; }

/* ------------------------------------------------------------------------------------------------ sections */
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section-tete { margin-bottom: clamp(30px, 4vw, 48px); }

.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: etape; }
.etapes li { counter-increment: etape; }
.etapes li::before {
  content: counter(etape); display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 16px;
  border-radius: 50%; background: url("/img/aquarelle.webp") var(--pos, 20% 30%) / 420px auto;
  font-family: var(--police-titre); font-weight: 900; font-size: 1.9rem; color: #fff; text-shadow: 0 2px 6px rgba(20, 18, 22, 0.45);
  box-shadow: 0 6px 14px -6px rgba(20, 18, 22, 0.45);
}
.etapes li:nth-child(2)::before { --pos: 70% 60%; }
.etapes li:nth-child(3)::before { --pos: 40% 80%; }
.etapes li:nth-child(4)::before { --pos: 85% 15%; }
.etapes h3 { font-size: 1.3rem; line-height: 1.2; margin-bottom: 8px; }
.etapes p { color: var(--texte-doux); font-size: 0.98rem; margin: 0; }

.galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 48px); margin-top: clamp(44px, 6vw, 72px); }

.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.carte {
  position: relative; background: var(--papier-clair); padding: 26px 22px 24px; border-radius: 3px;
  box-shadow: 0 1px 0 rgba(20, 18, 22, 0.06), 0 10px 24px -14px rgba(20, 18, 22, 0.3);
}
.carte::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: url("/img/aquarelle.webp") var(--pos, 10% 50%) / 700px auto; }
.modes .carte:nth-child(2)::after { --pos: 55% 20%; }
.modes .carte:nth-child(3)::after { --pos: 90% 70%; }
.modes .carte:nth-child(4)::after { --pos: 30% 90%; }
.carte h3 { font-family: var(--police-titre); font-weight: 900; text-transform: uppercase; font-size: 1.35rem; letter-spacing: -0.01em; margin-bottom: 10px; }
.carte p { color: var(--texte-doux); font-size: 0.97rem; margin: 0; }
.bande-encre .carte { background: var(--encre-2); color: var(--texte-clair); box-shadow: none; }
.bande-encre .carte p { color: var(--texte-clair-doux); }

/* campagne */
.chapitres { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.chapitre { background: var(--encre-2); border-radius: 3px; padding: 20px 18px 18px; position: relative; overflow: hidden; }
.chapitre::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: url("/img/aquarelle.webp") var(--pos, 10% 50%) / 700px auto; }
.chapitre:nth-child(2)::before { --pos: 40% 30%; } .chapitre:nth-child(3)::before { --pos: 70% 60%; }
.chapitre:nth-child(4)::before { --pos: 20% 85%; } .chapitre:nth-child(5)::before { --pos: 90% 10%; }
.chapitre-num { font-weight: 600; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or); }
.chapitre h3 { font-family: var(--police-titre); font-weight: 900; text-transform: uppercase; font-size: 1.3rem; line-height: 1.05; margin: 4px 0 8px; }
.chapitre > p { color: var(--texte-clair-doux); font-size: 0.88rem; line-height: 1.45; margin-bottom: 14px; }
.chapitre ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--encre-3); }
.chapitre li { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--encre-3); font-size: 0.92rem; }
.chapitre li span { font-family: var(--police-titre); font-weight: 900; color: var(--texte-clair-doux); min-width: 1.6em; }
.chapitre li small { display: block; color: var(--texte-clair-doux); font-size: 0.78rem; }

/* décors */
.decors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.decor { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--encre); cursor: zoom-in; overflow: hidden; border-radius: 3px; box-shadow: 0 8px 18px -10px rgba(20, 18, 22, 0.5); }
.decor img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.35s ease; }
.decor:hover img { transform: scale(1.06); }
.decor span {
  position: absolute; left: 0; bottom: 0; max-width: 100%;
  background: var(--encre); color: var(--texte-clair); font-weight: 600; font-size: 0.8rem; line-height: 1.25; padding: 5px 8px 4px; text-align: left;
}

/* défis du jour */
.defis-tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; }
.compte { font-weight: 600; background: var(--papier-clair); padding: 10px 14px; border-radius: var(--rayon); box-shadow: inset 0 0 0 2px var(--encre); }
.compte strong { font-variant-numeric: tabular-nums; }
.defis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.defi { background: var(--papier-clair); border-radius: 3px; overflow: hidden; box-shadow: 0 10px 24px -14px rgba(20, 18, 22, 0.35); display: flex; flex-direction: column; }
.defi img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--encre); }
.defi-corps { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.defi h3 { font-family: var(--police-titre); font-weight: 900; text-transform: uppercase; font-size: 1.25rem; line-height: 1.1; }
.defi p { margin: 0; color: var(--texte-doux); font-size: 0.95rem; }
.defi .infos { font-size: 0.86rem; color: var(--texte); }
.niveaux-defi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.niveaux-defi span { font-size: 0.78rem; font-weight: 600; padding: 3px 8px; border-radius: 20px; background: var(--papier-fonce); }
.niveaux-defi span:nth-child(1) { background: #ffe7a8; }
.niveaux-defi span:nth-child(2) { background: #ffc6d4; }
.niveaux-defi span:nth-child(3) { background: #d7c6ff; }
.attente { color: var(--texte-doux); }

/* musique */
.musique-dedans { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.pistes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.piste { color: var(--texte-clair); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; background: var(--encre-2); border-radius: var(--rayon); padding: 10px 16px 10px 10px; position: relative; overflow: hidden; }
.piste-bouton {
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: url("/img/aquarelle.webp") var(--pos, 30% 30%) / 400px auto; color: #fff;
}
.piste:nth-child(2) .piste-bouton { --pos: 70% 50%; } .piste:nth-child(3) .piste-bouton { --pos: 20% 80%; }
.piste:nth-child(4) .piste-bouton { --pos: 85% 20%; } .piste:nth-child(5) .piste-bouton { --pos: 45% 65%; } .piste:nth-child(6) .piste-bouton { --pos: 10% 10%; }
.piste-bouton svg { width: 20px; height: 20px; fill: currentColor; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.piste-bouton .icone-pause { display: none; }
.piste-bouton[aria-pressed="true"] .icone-lecture { display: none; }
.piste-bouton[aria-pressed="true"] .icone-pause { display: block; }
.piste-titre { font-weight: 600; line-height: 1.25; }
.piste-titre small { display: block; font-weight: 400; color: var(--texte-clair-doux); font-size: 0.84rem; }
.piste-bpm { font-variant-numeric: tabular-nums; color: var(--texte-clair-doux); font-size: 0.84rem; }
.piste-progres { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--rose); transform-origin: left; transform: scaleX(0); }

/* discord */
.discord-dedans { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.statut-maquette { background: #232428; border-radius: 10px; padding: 16px; max-width: 400px; color: #dbdee1; font-size: 0.9rem; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.8); transform: rotate(1.5deg); }
.statut-maquette .etiquette { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #b5bac1; margin-bottom: 10px; }
.statut-ligne { display: flex; gap: 14px; align-items: center; }
.statut-ligne img { width: 72px; height: 72px; border-radius: 10px; background: var(--papier); }
.statut-ligne strong { display: block; color: #fff; }
.statut-ligne span { display: block; color: #b5bac1; }
.statut-bouton { margin-top: 14px; display: block; text-align: center; background: #4e5058; color: #fff; border-radius: 4px; padding: 7px; font-weight: 600; font-size: 0.85rem; }
.commandes { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; }
.commandes li { font-size: 0.93rem; color: var(--texte-clair-doux); }
.commandes code { display: inline-block; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.86rem; background: var(--encre-3); color: var(--or); padding: 2px 7px; border-radius: 4px; margin-right: 6px; }
.discord-points { display: grid; gap: 18px; margin: 26px 0 28px; }
.discord-points h3 { font-size: 1.1rem; margin-bottom: 4px; }
.discord-points p { margin: 0; color: var(--texte-clair-doux); }

/* téléchargement */
.telecharger-dedans { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
.carte-telechargement { background: var(--papier-clair); padding: clamp(24px, 4vw, 40px); border-radius: 3px; box-shadow: var(--ombre-photo); position: relative; }
.carte-telechargement::before { content: ""; position: absolute; top: -14px; left: 32px; width: 120px; height: 30px; background: var(--scotch); transform: rotate(-5deg); }
.version { font-weight: 600; color: var(--texte-doux); margin-bottom: 18px; }
.boutons-telechargement { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 26px; }
.config { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.config li { display: flex; gap: 10px; }
.config li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 0.55em; border-radius: 50%; background: var(--rose); }
.note { font-size: 0.92rem; color: var(--texte-doux); background: var(--papier-fonce); padding: 12px 14px; border-radius: var(--rayon); }
.nouveautes h3 { font-family: var(--police-titre); font-weight: 900; text-transform: uppercase; font-size: 1.35rem; margin-bottom: 12px; }
.nouveautes ul { margin: 0 0 14px; padding-left: 1.1em; }
.nouveautes li { margin-bottom: 8px; color: var(--texte-doux); }
.nouveautes li strong { color: var(--texte); }
.nouveautes code { font-family: ui-monospace, Consolas, monospace; font-size: 0.88em; background: var(--papier-fonce); padding: 1px 5px; border-radius: 3px; }
.faq { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.faq h2 { grid-column: 1 / -1; }
.faq details { border-top: 2px solid var(--encre); padding: 14px 0; }
.faq summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--police-titre); font-weight: 900; font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 10px 0 0; color: var(--texte-doux); }

/* ------------------------------------------------------------------------------------------------ pied de page */
.pied { padding: 56px 0 40px; margin-bottom: 0; }
.pied::after { display: none; }
.pied-dedans { display: flex; flex-wrap: wrap; gap: 28px 48px; justify-content: space-between; align-items: start; }
.pied .marque { color: var(--texte-clair); }
.pied nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pied a { color: var(--texte-clair); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.pied a:hover { text-decoration: underline; }
.pied p { color: var(--texte-clair-doux); font-size: 0.86rem; margin: 18px 0 0; max-width: 40rem; }

/* ------------------------------------------------------------------------------------------------ visionneuse */
.visionneuse { border: 0; padding: 0; background: transparent; max-width: min(1200px, 94vw); width: 100%; }
.visionneuse::backdrop { background: rgba(14, 12, 16, 0.86); }
.visionneuse figure { margin: 0; background: #fbfaf7; padding: 10px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); }
.visionneuse img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; background: var(--encre); }
.visionneuse figcaption { font-weight: 600; padding: 10px 4px 2px; }
.visionneuse-fermer { position: absolute; top: -48px; right: 0; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--papier-clair); cursor: pointer; font-size: 1.5rem; line-height: 1; }

/* ------------------------------------------------------------------------------------------------ pages simples (mentions, 404) */
.page-simple { padding: clamp(48px, 8vw, 96px) 0; }
.page-simple .conteneur { max-width: 820px; }
.page-simple h2 { font-size: 1.35rem; margin: 2em 0 0.5em; }
.page-simple p, .page-simple li { color: var(--texte-doux); }
.erreur-404 { text-align: center; }
.erreur-404 img { width: 220px; margin: 0 auto 24px; }

/* ------------------------------------------------------------------------------------------------ adaptation à l'écran */
@media (max-width: 1080px) {
  .chapitres { grid-template-columns: repeat(3, 1fr); }
  .decors { grid-template-columns: repeat(4, 1fr); }
  .modes { grid-template-columns: repeat(2, 1fr); }
  .etapes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 8px var(--marge) 16px; background: var(--grain), var(--papier); border-bottom: 2px solid var(--encre); }
  .menu.ouvert { display: flex; }
  .menu a { padding: 12px 6px; font-size: 1.05rem; border-bottom: 1px solid rgba(20, 18, 22, 0.08); }
  .burger { display: block; }
  .entete-dedans > .bouton-petit { display: none; }
  .ouverture-dedans, .musique-dedans, .discord-dedans, .telecharger-dedans { grid-template-columns: 1fr; }
  .ouverture-visuel { min-height: 0; margin-top: 10px; }
  .ouverture-disque { width: 34%; left: -2%; bottom: -16%; }
  .defis { grid-template-columns: repeat(2, 1fr); }
  .decors { grid-template-columns: repeat(3, 1fr); }
  .chapitres { grid-template-columns: repeat(2, 1fr); }
  .faq { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .modes, .etapes, .galerie, .defis, .chapitres, .commandes { grid-template-columns: 1fr; }
  .decors { grid-template-columns: repeat(2, 1fr); }
  .actions .bouton { width: 100%; justify-content: center; }
  .boutons-telechargement .bouton { width: 100%; }
  .chiffres ul { justify-content: flex-start; }
  .ouverture-grunge { width: 90vw; }
  :root { --dechirure-h: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .entete, .ouverture-grunge, .bouton-principal::before { display: none; }
  body { background: #fff; }
}