/* Site DRIFT MA POULE — identité des logos : noir, blanc, gris, rouge crête. Deux modes : nuit (défaut) et jour
   (attribut data-mode sur <html>, posé avant l'affichage par le gabarit : choix du visiteur, sinon celui du système).
   Polices auto-hébergées (licence SIL OFL, voir assets/polices/OFL-*.txt). */

@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url(/assets/polices/barlow-400.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url(/assets/polices/barlow-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url(/assets/polices/barlow-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap; src: url(/assets/polices/barlow-700.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url(/assets/polices/barlowcond-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(/assets/polices/barlowcond-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(/assets/polices/barlowcond-700.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-style: italic; font-display: swap; src: url(/assets/polices/barlowcond-700i.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-style: italic; font-display: swap; src: url(/assets/polices/barlowcond-800i.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 900; font-style: italic; font-display: swap; src: url(/assets/polices/barlowcond-900i.woff2) format('woff2'); }
@font-face { font-family: 'Russo One'; font-display: swap; src: url(/assets/polices/russoone.woff2) format('woff2'); }
@font-face { font-family: 'Cinzel'; font-weight: 700; font-display: swap; src: url(/assets/polices/Cinzel-Bold.ttf) format('truetype'); }
@font-face { font-family: 'Bangers'; font-display: swap; src: url(/assets/polices/Bangers-Regular.ttf) format('truetype'); }

/* ---------- Couleurs : nuit (défaut) ---------- */

:root {
  color-scheme: dark;
  --fond: #0c0c0d;
  --fond-2: #111113;
  --surface: #161618;
  --surface-2: #1e1e21;
  --bord: #29292d;
  --bord-fort: #3a3a3f;
  --texte: #f5f5f3;
  --texte-2: #a8a8ad;
  --texte-3: #6f6f75;
  --accent: #e2475f;
  --accent-fort: #f05a71;
  --accent-texte: #ffffff;
  --accent-doux: rgba(226, 71, 95, .13);
  --crete: #c43c50;
  --rouge: #ff5d5d;
  --vert: #2fd27a;
  --bleu: #5b8cff;
  --rayon: 8px;
  --rayon-grand: 14px;
  --police-titre: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --titre-poids: 900;
  --titre-style: italic;
  --titre-casse: uppercase;
  --titre-espace: .005em;
  --police-texte: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --police-cond: 'Barlow Condensed', 'Barlow', sans-serif;
  --ombre: 0 18px 40px rgba(0, 0, 0, .45);
  --ombre-douce: 0 8px 24px rgba(0, 0, 0, .3);
  --lueur-titre: none;
  --entete-fond: rgba(12, 12, 13, .84);
  --hero-fond:
    radial-gradient(900px 480px at 80% 20%, rgba(226, 71, 95, .16), transparent 62%),
    radial-gradient(700px 520px at 0% 100%, rgba(255, 255, 255, .04), transparent 70%),
    linear-gradient(180deg, #0f0f11 0%, #0c0c0d 100%);
  --grille: rgba(255, 255, 255, .028);
  --rayure-claire: #f5f5f3;
  --rayure-sombre: #0c0c0d;
}

/* ---------- Couleurs : jour ---------- */

:root[data-mode="jour"] {
  color-scheme: light;
  --fond: #f4f4f2;
  --fond-2: #ebebe8;
  --surface: #ffffff;
  --surface-2: #f4f4f2;
  --bord: #e0e0dc;
  --bord-fort: #c9c9c4;
  --texte: #121214;
  --texte-2: #54545a;
  --texte-3: #8a8a90;
  --accent: #c43c50;
  --accent-fort: #a92f43;
  --accent-doux: rgba(196, 60, 80, .1);
  --rouge: #d6363f;
  --vert: #179c55;
  --ombre: 0 18px 40px rgba(18, 18, 20, .12);
  --ombre-douce: 0 8px 24px rgba(18, 18, 20, .08);
  --entete-fond: rgba(244, 244, 242, .86);
  --hero-fond:
    radial-gradient(900px 480px at 80% 20%, rgba(196, 60, 80, .12), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f4f4f2 100%);
  --grille: rgba(0, 0, 0, .035);
  --rayure-claire: #121214;
  --rayure-sombre: #f4f4f2;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 17px/1.6 var(--police-texte);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3, .h2, .h3 {
  font-family: var(--police-titre);
  font-weight: var(--titre-poids);
  font-style: var(--titre-style);
  text-transform: var(--titre-casse);
  letter-spacing: var(--titre-espace);
  line-height: 1.1;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 3.9rem); line-height: .95; }
h2, .h2 { font-size: clamp(1.9rem, 3.8vw, 2.7rem); line-height: 1; }
h3, .h3 { font-size: 1.35rem; }
.h3, h3 { font-weight: 800; }
p { margin: 0 0 1em; }
code, .mono { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .88em; }
code { background: var(--surface-2); border: 1px solid var(--bord); padding: .1em .4em; border-radius: 4px; }
.sr, .saut:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut:focus { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--accent); color: var(--accent-texte); padding: 8px 14px; border-radius: var(--rayon); }
.conteneur { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.conteneur-etroit { max-width: 820px; }
@media (min-width: 720px) { .conteneur { padding: 0 28px; } }
.discret { color: var(--texte-2); font-size: .92em; }
.vide { color: var(--texte-2); margin: .5em 0; }
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.surtitre {
  font-family: var(--police-cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .82rem;
  color: var(--accent);
  margin: 0 0 .7em;
  display: flex; align-items: center; gap: .55em;
}
.surtitre::before { content: ''; width: 22px; height: 4px; background: currentColor; transform: skewX(-24deg); flex: none; }
.surtitre .ico { display: none; }
.tag { color: var(--accent); font-weight: 600; }
.a-remplir { background: var(--accent-doux); color: var(--accent); padding: 0 .3em; border-radius: 3px; }

/* ---------- Boutons ---------- */

.btn {
  --b: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 46px; padding: .6em 1.35em;
  font: italic 800 1.08rem/1.1 var(--police-cond); letter-spacing: .03em; text-transform: uppercase;
  color: var(--accent-texte); background: var(--b);
  border: 1px solid var(--b); border-radius: var(--rayon);
  cursor: pointer; text-decoration: none !important;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--accent-fort); border-color: var(--accent-fort); transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-contour { background: transparent; color: var(--texte); border-color: var(--bord-fort); }
.btn-contour:hover { background: var(--surface-2); border-color: var(--accent); color: var(--texte); }
.btn-petit { min-height: 38px; padding: .4em .95em; font-size: .95rem; }
.btn-grand { min-height: 56px; padding: .8em 1.8em; font-size: 1.22rem; }
.btn-large { width: 100%; min-height: 56px; font-size: 1.2rem; }
.btn-blanc { --b: #f5f5f3; color: #121214; }
.btn-blanc:hover { background: #ffffff; border-color: #ffffff; }
.btn-danger { --b: transparent; color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 55%, transparent); }
.btn-danger:hover { background: color-mix(in srgb, var(--rouge) 14%, transparent); border-color: var(--rouge); color: var(--rouge); }
.btn-steam { --b: #1b2838; color: #fff; border-color: #2a475e; background: linear-gradient(180deg, #2a475e, #1b2838); }
.btn-steam:hover { background: linear-gradient(180deg, #34597a, #1f3045); border-color: #66c0f4; }
.lien-bouton { background: none; border: 0; color: var(--texte-2); font: inherit; cursor: pointer; display: flex; gap: .6em; align-items: center; padding: .55em .8em; width: 100%; border-radius: var(--rayon); }
.lien-bouton:hover { color: var(--texte); background: var(--surface-2); }
.lien { display: inline-flex; gap: .4em; align-items: center; font-weight: 600; }

/* ---------- En-tête ---------- */

.entete {
  position: sticky; top: 0; z-index: 50;
  background: var(--entete-fond);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--bord);
}
.entete-in { display: flex; align-items: center; gap: 20px; min-height: 70px; }
.mode-bouton { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; background: none; color: var(--texte-2); border: 1px solid var(--bord); border-radius: 999px; cursor: pointer; transition: color .15s, border-color .15s, transform .3s; }
.mode-bouton:hover { color: var(--texte); border-color: var(--bord-fort); }
.mode-bouton .ico { width: 20px; height: 20px; }
.mode-bouton .ico-lune, [data-mode="jour"] .mode-bouton .ico-soleil { display: none; }
[data-mode="jour"] .mode-bouton .ico-lune { display: block; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--texte); text-decoration: none !important; flex: none; }
.logo-img { display: block; height: 44px; width: auto; }
:root:not([data-mode="jour"]) .logo-jour, [data-mode="jour"] .logo-nuit { display: none !important; }
.logo-texte { font-family: var(--police-titre); font-weight: var(--titre-poids); font-style: var(--titre-style); text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; white-space: nowrap; }
.logo-texte b { color: var(--accent); font-weight: inherit; }
.nav { display: flex; gap: 4px; margin-left: 12px; }
.nav a { color: var(--texte-2); font: italic 800 1.12rem/1 var(--police-cond); letter-spacing: .04em; text-transform: uppercase; padding: .6em .85em; border-radius: var(--rayon); text-decoration: none; transition: color .15s, background .15s; }
.nav a:hover { color: var(--texte); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--texte); }
.nav a[aria-current="page"]::after { content: ''; display: block; height: 3px; margin-top: 5px; background: var(--accent); transform: skewX(-24deg); }
.nav .nav-mobile { display: none; }
.entete-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pastille {
  display: inline-flex; align-items: center; gap: .45em;
  font: 600 .85rem/1 var(--police-cond); letter-spacing: .06em; text-transform: uppercase;
  color: var(--texte-2); padding: .5em .8em; border: 1px solid var(--bord); border-radius: 999px; text-decoration: none !important;
}
.pastille i { width: 8px; height: 8px; border-radius: 50%; background: var(--texte-3); }
.pastille-on { color: var(--texte); }
.pastille-on i { background: var(--vert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 25%, transparent); animation: pulse 2.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px transparent; } }
.compte-lien { display: inline-flex; align-items: center; gap: .55em; color: var(--texte); font-weight: 600; padding: 4px 10px 4px 4px; border: 1px solid var(--bord); border-radius: 999px; text-decoration: none !important; max-width: 200px; }
.compte-lien span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compte-lien:hover { border-color: var(--accent); }
.avatar { border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2); }
.avatar-vide { display: inline-grid; place-items: center; color: var(--accent); font-weight: 700; background: var(--accent-doux); border: 1px solid var(--bord); }
.burger { display: none; background: none; border: 1px solid var(--bord); color: var(--texte); width: 42px; height: 42px; border-radius: var(--rayon); cursor: pointer; }
.burger .ico { width: 22px; height: 22px; }

@media (max-width: 860px) {
  .burger { display: inline-grid; place-items: center; }
  .nav {
    position: fixed; inset: 70px 0 auto 0; margin: 0; flex-direction: column; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--bord); padding: 8px 16px 16px;
    transform: translateY(-120%); transition: transform .25s ease; box-shadow: var(--ombre);
  }
  .nav.ouvert { transform: none; }
  .nav a { padding: .9em .4em; border-bottom: 1px solid var(--bord); border-radius: 0; }
  .nav a[aria-current="page"]::after { display: none; }
  .nav a[aria-current="page"] { color: var(--accent); }
  .nav .nav-mobile { display: block; }
  .compte-lien span { display: none; }
  .compte-lien { padding: 3px; }
}
@media (max-width: 520px) { .logo-img { height: 38px; } .entete-in { gap: 10px; } }
@media (max-width: 420px) { .pastille { display: none; } }

/* ---------- Messages ---------- */

.flashs { padding-top: 16px; display: grid; gap: 8px; }
.alerte { padding: .85em 1.1em; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--surface); margin: 0 0 16px; }
.alerte-ok { border-color: color-mix(in srgb, var(--vert) 45%, transparent); background: color-mix(in srgb, var(--vert) 10%, var(--surface)); }
.alerte-erreur { border-color: color-mix(in srgb, var(--rouge) 50%, transparent); background: color-mix(in srgb, var(--rouge) 10%, var(--surface)); }
.alerte-info { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.alerte-statut { display: flex; gap: .8em; align-items: center; flex-wrap: wrap; }

/* ---------- Sections ---------- */

.section { padding: clamp(48px, 8vw, 96px) 0; }
.section-serree { padding: 32px 0 72px; }
.section-alt { background: var(--fond-2); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); }
.section-tete { max-width: 720px; margin-bottom: 36px; }
.section-tete-ligne { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.section-tete-ligne > div { max-width: 720px; }
.section-tete-ligne .section-intro { margin-bottom: 0; }
.section-intro { color: var(--texte-2); font-size: 1.08rem; max-width: 680px; }
.page-tete { position: relative; overflow: hidden; isolation: isolate; padding: clamp(40px, 7vw, 84px) 0 clamp(28px, 4vw, 44px); background: var(--hero-fond); border-bottom: 1px solid var(--bord); }
.page-tete .rayures { mask-image: linear-gradient(90deg, transparent, #000 45%); opacity: .75; }
.page-tete:not(:has(.rayures))::after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; right: clamp(-120px, -4vw, -30px); width: clamp(160px, 26vw, 380px); transform: skewX(-22deg); transform-origin: top; opacity: .75; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--crete) 75%, transparent) 0 44%, transparent 44% 54%, color-mix(in srgb, var(--rayure-claire) 55%, transparent) 54% 62%, transparent 62% 72%, color-mix(in srgb, var(--crete) 55%, transparent) 72% 90%, transparent 90%);
  mask-image: linear-gradient(90deg, transparent, #000 45%), linear-gradient(180deg, #000, transparent); mask-composite: intersect; -webkit-mask-composite: source-in; }
@media (max-width: 760px) { .page-tete:not(:has(.rayures))::after { opacity: .3; } }
@media (max-width: 760px) { .page-tete .rayures { opacity: .3; } }
.page-tete h1 { text-shadow: var(--lueur-titre); }
.page-centree { min-height: 70vh; display: grid; place-items: center; padding: 48px 16px; }
.grille-2 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin-bottom: 20px; }
.grille-2-large { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 900px) { .grille-2-large { grid-template-columns: 1fr; } }

/* ---------- Héros (accueil) ---------- */

.hero { position: relative; overflow: hidden; background: var(--hero-fond); border-bottom: 1px solid var(--bord); isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(180deg, #000 20%, transparent 85%); pointer-events: none; }
.hero-image { background: linear-gradient(90deg, color-mix(in srgb, var(--fond) 95%, transparent) 0%, color-mix(in srgb, var(--fond) 78%, transparent) 55%, color-mix(in srgb, var(--fond) 45%, transparent) 100%), var(--hero-image) center / cover no-repeat; }
.hero-in { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding-top: clamp(40px, 7vw, 88px); padding-bottom: clamp(48px, 8vw, 104px); }
@media (max-width: 960px) { .hero-in { grid-template-columns: 1fr; } }
.hero-logo { display: block; width: min(100%, 290px); height: auto; margin: 0 0 14px -6px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .3)); }
.hero-titre { font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: .95; margin-bottom: .35em; max-width: 17ch; }
.hero-titre em, h1 em { font-style: inherit; color: var(--accent); }
.hero-intro { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--texte-2); max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 22px; }
.hero-infos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--texte-2); font-size: .95rem; }
.hero-infos li { display: inline-flex; align-items: center; gap: .45em; }
.hero-infos .ico { color: var(--accent); }
.hero-infos strong { color: var(--texte); }
.hero-cote { position: relative; padding-top: 150px; }
.hero-mascotte { position: absolute; z-index: 0; right: 28px; top: 0; width: 132px; height: auto; transform: rotate(8deg); filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .35)); }
.hero-cote .panneau-classement { z-index: 1; }
@media (max-width: 960px) { .hero-cote { padding-top: 128px; } .hero-mascotte { width: 112px; } }

/* Rayures façon livrée (rouge, blanc / noir, rouge), en biais */
.rayures { position: absolute; z-index: -1; top: 0; bottom: 0; right: clamp(-160px, -6vw, -40px); width: clamp(220px, 34vw, 520px); display: flex; gap: 14px; transform: skewX(-22deg); transform-origin: top; pointer-events: none; opacity: .9; }
.rayures i { display: block; height: 100%; }
.rayures i:nth-child(1) { width: 42%; background: linear-gradient(180deg, color-mix(in srgb, var(--crete) 85%, transparent), color-mix(in srgb, var(--crete) 25%, transparent)); }
.rayures i:nth-child(2) { width: 9%; background: linear-gradient(180deg, color-mix(in srgb, var(--rayure-claire) 70%, transparent), transparent); }
.rayures i:nth-child(3) { width: 18%; background: linear-gradient(180deg, color-mix(in srgb, var(--crete) 70%, transparent), transparent 85%); }
.hero .rayures { mask-image: linear-gradient(90deg, transparent, #000 35%); }
@media (max-width: 960px) { .hero .rayures { opacity: .35; } }

/* Classement (accueil) */
.panneau-classement { position: relative; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-grand); box-shadow: var(--ombre); padding: 18px 18px 10px; }
.panneau-classement-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 2px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--bord); }
.panneau-classement-tete span { display: inline-flex; gap: .5em; align-items: center; font: italic 800 1.15rem/1 var(--police-cond); text-transform: uppercase; letter-spacing: .02em; }
.panneau-classement-tete span .ico { color: var(--accent); }
.panneau-classement-tete a { display: inline-flex; gap: .35em; align-items: center; font: 700 .85rem var(--police-cond); letter-spacing: .08em; text-transform: uppercase; }
.mini-points { font: 700 1.1rem/1 var(--police-cond); font-variant-numeric: tabular-nums; color: var(--texte); white-space: nowrap; }
.mini-points small { color: var(--texte-3); font-size: .75rem; letter-spacing: .06em; }
.voyant { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--texte-3); flex: none; }
.voyant-on { background: var(--vert); box-shadow: 0 0 10px color-mix(in srgb, var(--vert) 60%, transparent); }

.mini-classement { list-style: none; margin: 0; padding: 0; }
.mini-classement li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--bord); }
.mini-classement li:last-child { border-bottom: 0; }
.mini-nom { color: var(--texte); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-nom .tag { color: var(--accent); }
.panneau-vide { text-align: center; padding: 26px 8px 16px; color: var(--texte-2); }
.panneau-vide .odo { margin-bottom: 14px; }

.mini-rang {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px;
  font: 700 .95rem/1 var(--police-cond); border-radius: 6px;
  color: var(--texte-2); background: var(--surface-2); border: 1px solid var(--bord);
}
.rang-1 { color: #fff !important; background: linear-gradient(180deg, #e2475f, #b8304a) !important; border-color: #e2475f !important; }
.rang-2 { color: #15171a !important; background: linear-gradient(180deg, #eef1f4, #b5bcc6) !important; border-color: #e2e6ea !important; }
.rang-3 { color: #1b0f05 !important; background: linear-gradient(180deg, #f0b07a, #b9692c) !important; border-color: #f0b07a !important; }

/* Compteur à tambours (comme le compteur de points en jeu) */
.odo { display: inline-flex; gap: 2px; padding: 3px; background: #050506; border-radius: 6px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9), 0 0 0 1px #2a2a30; font: 700 1.55rem/1 var(--police-cond); font-variant-numeric: tabular-nums; }
.odo-t { display: inline-grid; place-items: center; width: .82em; height: 1.32em; color: #f4f2ec; border-radius: 3px; background: linear-gradient(180deg, #1c1c20 0%, #2b2b31 22%, #34343b 50%, #2b2b31 78%, #141417 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.odo-zero { color: #5c5a55; }
.odo-rouge { color: #fff; background: linear-gradient(180deg, #5a0f0b 0%, #a3201a 25%, #c22b22 50%, #a3201a 75%, #4a0c08 100%); }
.odo-petit { font-size: 1.05rem; }

/* ---------- Bandes, étapes, cartes ---------- */

.bande-chiffres { border-bottom: 1px solid var(--bord); background: var(--fond-2); }
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .chiffres { grid-template-columns: repeat(2, 1fr); } }
.chiffre { padding: 26px 16px; text-align: center; border-right: 1px solid var(--bord); }
.chiffre:last-child { border-right: 0; }
@media (max-width: 720px) { .chiffre:nth-child(2) { border-right: 0; } .chiffre:nth-child(-n+2) { border-bottom: 1px solid var(--bord); } }
.chiffre strong { display: block; font: italic 900 clamp(1.9rem, 4vw, 2.7rem)/1.05 var(--police-cond); font-variant-numeric: tabular-nums; color: var(--texte); }
.chiffre span { color: var(--texte-2); font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--police-cond); font-weight: 600; }

.etapes { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); counter-reset: etape; }
.etape { position: relative; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-grand); padding: 28px 24px 22px; }
.etape p { color: var(--texte-2); margin: 0; }
.etape-num { display: inline-grid; place-items: center; width: 48px; height: 42px; margin-bottom: 16px; font: italic 900 1.5rem var(--police-cond); color: var(--accent-texte); background: var(--accent); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }

.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-grand); padding: 22px; margin-bottom: 20px; min-width: 0; }
.grille-2 > .carte { margin-bottom: 0; }
.carte-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.carte-tete h2, .carte-tete .h3 { margin: 0; display: flex; gap: .5em; align-items: center; }
.carte-tete a { font-weight: 600; font-size: .92rem; }
.carte-centree { width: 100%; max-width: 460px; text-align: center; padding: 36px 28px; }
.carte-centree .liste-check { text-align: left; }
.carte-large { max-width: 620px; text-align: left; }
.logo-grand { display: block; width: min(100%, 260px); height: auto; margin: 0 auto 18px; }
.carte-centree .logo-grand { width: 220px; }
.carte-vip { border-color: color-mix(in srgb, var(--accent) 45%, var(--bord)); background: linear-gradient(160deg, var(--accent-doux), transparent 60%), var(--surface); }
.carte-danger { border-color: color-mix(in srgb, var(--rouge) 35%, var(--bord)); }
.vide-grand { text-align: center; padding: 48px 20px; color: var(--texte-2); }
.vide-grand .ico { width: 42px; height: 42px; color: var(--vert); }
.vide-grand .odo { margin-bottom: 12px; }

.liste-teams, .liste-en-ligne, .liste-simple, .liste-runs, .liste-membres, .liste-fichiers { list-style: none; margin: 0; padding: 0; }
.liste-teams li, .liste-en-ligne li, .liste-simple li, .liste-runs li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--bord); flex-wrap: wrap; }
.liste-teams li:last-child, .liste-en-ligne li:last-child, .liste-simple li:last-child, .liste-runs li:last-child { border-bottom: 0; }
.liste-teams-nom { flex: 1; font-weight: 600; }
.liste-teams-pts { font: 700 1.05rem var(--police-cond); font-variant-numeric: tabular-nums; }
.liste-en-ligne a { color: var(--texte); font-weight: 600; }
.liste-en-ligne .discret, .liste-simple .discret { margin-left: auto; }
.liste-runs strong { font: 700 1.15rem var(--police-cond); min-width: 80px; font-variant-numeric: tabular-nums; }
.liste-runs .discret:last-child { margin-left: auto; }
.liste-membres li { display: inline-flex; margin: 0 8px 6px 0; gap: 6px; align-items: center; }
.liste-fichiers li { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; padding: 3px 0; }
.liste-check { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 9px; }
.liste-check li { display: flex; gap: .6em; align-items: flex-start; }
.liste-check .ico { color: var(--accent); margin-top: .22em; }
.liste-check-petite { font-size: .94rem; color: var(--texte-2); margin-top: 22px; }
.team-nom { font-size: 1.2rem; font-weight: 700; margin-bottom: .2em; }

/* ---------- Produits ---------- */

.prix { font: italic 900 1.7rem/1 var(--police-cond); color: var(--texte); font-variant-numeric: tabular-nums; }
.prix small { font: 500 .9rem var(--police-texte); color: var(--texte-2); }
.prix-grand { font-size: 3.1rem; }
/* Offres (cartes de prix) */
.grille-offres { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.offre { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 22px 22px; color: var(--texte); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-grand); text-decoration: none !important; overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.offre::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.offre:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 50%, var(--bord)); box-shadow: var(--ombre); }
.offre:hover::after { transform: scaleX(1); }
.offre h2, .offre h3 { margin: 0; font-size: 1.5rem; }
.offre p { color: var(--texte-2); font-size: .97rem; flex: 1; margin: 0; }
.offre-ico { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; color: var(--accent); background: var(--accent-doux); }
.offre-ico .ico { width: 26px; height: 26px; }
.offre-prix { font: italic 900 2.1rem/1 var(--police-cond); font-variant-numeric: tabular-nums; margin-top: 6px; }
.offre-prix small { font: 500 .9rem var(--police-texte); color: var(--texte-2); font-style: normal; }
.offre-lien { display: inline-flex; align-items: center; gap: .4em; font: italic 800 1rem var(--police-cond); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.offre-lien .ico { transition: transform .2s; }
.offre:hover .offre-lien .ico { transform: translateX(4px); }
.offre-vedette { border-color: color-mix(in srgb, var(--accent) 60%, var(--bord)); background: linear-gradient(165deg, var(--accent-doux), transparent 55%), var(--surface); }
.offre-vedette::after { transform: scaleX(1); }
.offre-ruban { position: absolute; top: 18px; right: 18px; padding: 6px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-texte); font: italic 800 .74rem/1 var(--police-cond); letter-spacing: .06em; text-transform: uppercase; }
.section-offres { padding: 28px 0 8px; }
@media (max-width: 560px) {
  .grille-offres { grid-template-columns: 1fr 1fr; gap: 10px; }
  .offre { padding: 16px 14px 14px; gap: 6px; }
  .offre p { display: none; }
  .offre h2, .offre h3 { font-size: 1.12rem; }
  .offre-ico { width: 38px; height: 38px; border-radius: 10px; }
  .offre-ico .ico { width: 20px; height: 20px; }
  .offre-prix { font-size: 1.6rem; }
  .offre-prix small { display: block; margin-top: 2px; font-size: .78rem; }
  .offre-ruban { top: 12px; right: 10px; padding: 4px 7px; font-size: .62rem; }
}
.alerte-haut { margin-top: 20px; margin-bottom: 0; }

.garanties { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; color: var(--texte-2); font-size: .95rem; }
.garanties li { display: flex; gap: .5em; align-items: center; }
.garanties .ico { color: var(--accent); }

.produits { display: grid; gap: 28px; }
.produit { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-grand); overflow: hidden; scroll-margin-top: 90px; }
.produit:nth-child(even) .produit-visuel { order: 2; }
@media (max-width: 860px) { .produit { grid-template-columns: 1fr; } .produit:nth-child(even) .produit-visuel { order: 0; } }
.produit-vedette { border-color: color-mix(in srgb, var(--accent) 50%, var(--bord)); }
.produit-texte { padding: clamp(24px, 4vw, 40px); }
.produit-texte h2 { margin-bottom: .35em; }
.produit-texte > p { color: var(--texte-2); }
.produit-texte h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
.produit-accroche { font-size: 1.15rem; color: var(--texte) !important; font-weight: 500; }
.produit-note { margin: 14px 0 0; }
.produit-visuel { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding: 32px 24px; min-height: 340px; background: radial-gradient(520px 280px at 50% 42%, var(--accent-doux), transparent 70%), repeating-linear-gradient(115deg, transparent 0 22px, var(--grille) 22px 23px), var(--fond-2); border-right: 1px solid var(--bord); }
.produit:nth-child(even) .produit-visuel { border-right: 0; border-left: 1px solid var(--bord); }
@media (max-width: 860px) { .produit-visuel, .produit:nth-child(even) .produit-visuel { border: 0; border-bottom: 1px solid var(--bord); } }
.visuel-legende { color: var(--texte-2); font-size: .9rem; margin: 0; text-align: center; }
.acc-galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; width: 100%; max-width: 460px; }
.acc-galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); }
.acc-galerie-vide { display: grid; place-items: center; width: 140px; height: 140px; border-radius: 50%; background: var(--accent-doux); color: var(--accent); }
.acc-galerie-vide .ico { width: 64px; height: 64px; }
.achat { border-top: 1px solid var(--bord); padding-top: 20px; margin-top: 8px; display: grid; gap: 14px; }
.achat-prix { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.achat-form { display: grid; gap: 14px; }
.achat-confiance { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; margin: 0; color: var(--texte-3); font-size: .86rem; }
.achat-confiance .ico { color: var(--texte-2); width: 1em; height: 1em; }

.demo-chat { width: min(100%, 400px); background: #0d0d0f; color: #ecebe8; border: 1px solid #2a2a2e; border-radius: 10px; padding: 12px 16px 14px; font-size: 1rem; box-shadow: var(--ombre); }
.demo-chat .demo-chat-tete { font: 700 .74rem var(--police-cond); letter-spacing: .14em; text-transform: uppercase; color: #8a8a90; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid #222226; }
.demo-chat p { margin: 4px 0; display: flex; gap: .4em; align-items: center; flex-wrap: wrap; }
.demo-nom { font-weight: 700; transition: color .2s; }
.demo-gris { color: #a9a9ae; }
.demo-pastilles, .choix-pastilles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.demo-pastilles button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); cursor: pointer; }
.demo-pastilles button:hover { transform: scale(1.15); }
.choix-pastilles button { font: 600 .85rem var(--police-texte); color: var(--texte-2); background: var(--surface); border: 1px solid var(--bord); padding: .4em .8em; border-radius: 999px; cursor: pointer; }
.choix-pastilles button[aria-pressed="true"] { color: var(--accent-texte); background: var(--accent); border-color: var(--accent); }
.demo-places { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; max-width: 320px; }
.demo-places span { width: 20px; height: 20px; border-radius: 5px; background: var(--bord-fort); }
.demo-places .place-vip { background: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); }
.demo-places small { width: 100%; text-align: center; color: var(--texte-2); margin-top: 6px; }
.plaque-apercu { display: block; width: 100%; max-width: 480px; height: auto; border-radius: 8px; box-shadow: 0 16px 32px rgba(0, 0, 0, .35); background: #ddd; aspect-ratio: 4 / 1; transform: perspective(800px) rotateX(8deg); }
.champ-plaque-demo, .champ-pseudo-demo { width: min(100%, 320px); text-align: center; }
.champ-plaque-demo input { text-align: center; }
.champ-pseudo-demo input { text-align: center; font-weight: 600; }
.plaque-apercu-grande { max-width: 640px; margin: 0 auto; }

/* Comparaison avant / après (skin) : photos de Thomas dans assets/img/boutique/, sinon démonstration */
.avant-apres { --pos: 50%; position: relative; width: 100%; max-width: 560px; aspect-ratio: 16 / 10; border-radius: var(--rayon-grand); overflow: hidden; box-shadow: var(--ombre); user-select: none; background: #1a1a1d; }
.aa-calque { position: absolute; inset: 0; }
.aa-calque img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.aa-apres { clip-path: inset(0 0 0 var(--pos)); }
.aa-curseur { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; min-height: 0; }
.aa-poignee { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .4); pointer-events: none; }
.aa-poignee .ico { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; padding: 10px; transform: translate(-50%, -50%); background: #fff; color: #121214; border-radius: 50%; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.aa-curseur:focus-visible ~ .aa-poignee .ico, .avant-apres:has(.aa-curseur:focus-visible) .aa-poignee .ico { outline: 3px solid var(--accent); }
.aa-etiquette { position: absolute; top: 14px; padding: 5px 10px; font: italic 800 .8rem/1 var(--police-cond); letter-spacing: .08em; text-transform: uppercase; border-radius: 4px; pointer-events: none; }
.aa-etiquette-avant { left: 14px; background: rgba(255, 255, 255, .9); color: #121214; }
.aa-etiquette-apres { right: 14px; background: var(--crete); color: #fff; }
/* Démonstration sans photos : tôle blanche brillante, puis covering aux couleurs de la marque */
.aa-tole { position: absolute; inset: 0; background: radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, .95), transparent 55%), linear-gradient(170deg, #f7f7f5 0%, #dcdcd8 48%, #f1f1ee 52%, #c9c9c4 100%); }
.aa-tole::after { content: ''; position: absolute; left: -10%; right: -10%; top: 46%; height: 2px; background: rgba(0, 0, 0, .12); transform: rotate(-4deg); }
.aa-covering { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, .35), transparent 55%), linear-gradient(170deg, #f5f5f3, #dededa); }
.aa-covering::before { content: ''; position: absolute; inset: -20% -10%; background: linear-gradient(105deg, transparent 0 18%, #121214 18% 21%, var(--crete) 21% 48%, #121214 48% 51%, transparent 51% 60%, var(--crete) 60% 66%, transparent 66%); transform: skewY(-8deg); }
.aa-covering::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(18, 18, 20, .55) 1.6px, transparent 2.2px) 0 0 / 14px 14px; mask-image: linear-gradient(90deg, transparent 55%, #000 100%); }
.aa-covering .aa-typo { position: absolute; z-index: 1; left: 8%; bottom: 12%; width: 46%; height: auto !important; filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff); }
.aa-covering .aa-mascotte { position: absolute; z-index: 1; right: 9%; top: 12%; width: 20% !important; height: auto !important; transform: rotate(8deg); }
.aa-numero { position: absolute; z-index: 1; right: 12%; bottom: 12%; display: grid; place-items: center; width: 78px; height: 64px; border-radius: 50%; background: #fff; color: #121214; border: 4px solid #121214; font: italic 900 2.3rem/1 var(--police-cond); }

/* Ornements (mêmes calques qu'en jeu) */
.orn { position: relative; width: 100%; container-type: inline-size; }
.orn img { position: absolute; max-width: none; pointer-events: none; }
.orn-pseudo { position: absolute; line-height: 1; white-space: nowrap; transform: translate(var(--ancre, -50%), -80%) skewX(var(--incline, 0deg)); letter-spacing: .03em; pointer-events: none; }
.orn-defile { display: grid; gap: 6px; width: 100%; max-width: 440px; }
.orn-cadre { width: 100%; }
.orn-vip { width: 100%; max-width: 420px; margin: 0 auto; }
.orn-fond-damier { background: repeating-conic-gradient(#2a2a2e 0 25%, #1d1d21 0 50%) 0 0 / 22px 22px; border-radius: var(--rayon); padding: 12px; }
.carte-orn .orn, .orn-apercu-envoi .orn { max-width: 460px; margin: 0 auto; }
.orn-apercu-envoi { background: #121216; border-radius: var(--rayon); padding: 14px; text-align: center; }
.depot-orn { display: grid; gap: 14px; }
.choix-ornements { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 20px; }
.choix-ornement { position: relative; display: grid; gap: 6px; padding: 12px; background: #111114; border: 2px solid #26262c; border-radius: var(--rayon); cursor: pointer; color: #ece9e2; text-align: center; font-size: .9rem; font-weight: 600; transition: border-color .15s; }
.choix-ornement input { position: absolute; opacity: 0; }
.choix-ornement:hover { border-color: #4a4a52; }
.choix-ornement:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.choix-ornement:has(input:focus-visible) { outline: 2px solid var(--accent); }
.ornement-factice { display: grid; place-items: center; gap: 6px; }

/* ---------- Tableaux ---------- */

.tableau-cadre { overflow-x: auto; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-grand); }
.tableau-cadre-nu { border: 0; background: none; border-radius: 0; margin: 0 -4px; }
.tableau { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tableau th { text-align: left; font: 600 .78rem var(--police-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); padding: 12px 14px; border-bottom: 1px solid var(--bord); white-space: nowrap; }
.tableau td { padding: 12px 14px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: var(--surface-2); }
.col-rang { width: 56px; }
.col-num { text-align: right !important; white-space: nowrap; }
.ligne-moi { background: var(--accent-doux) !important; box-shadow: inset 3px 0 0 var(--accent); }
.col-en-cours { color: var(--accent) !important; }
/* Manches de la saison (une piste par mois), au-dessus des classements. */
.manches-saison { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.manches-saison li { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; min-width: 150px; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); }
.manches-saison li strong { font: 600 .8rem var(--police-cond); letter-spacing: .12em; text-transform: uppercase; }
.manches-saison li.en-cours { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.manches-saison li.a-venir { opacity: .6; }
.nom-pilote { color: var(--texte); font-weight: 600; display: inline-flex; gap: .5em; align-items: center; }
@media (max-width: 640px) { .cacher-mobile { display: none; } .tableau td, .tableau th { padding: 10px 8px; } }

.badge { display: inline-flex; align-items: center; gap: .3em; font: 600 .74rem/1 var(--police-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); border: 1px solid var(--bord-fort); padding: .35em .55em; border-radius: 4px; vertical-align: middle; text-decoration: none !important; }
.badge .ico { width: 1em; height: 1em; }
.badge-vip { color: var(--accent-texte); background: var(--accent); border-color: var(--accent); }
.badge-titre { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.badge-danger { color: var(--rouge); border-color: var(--rouge); }
.badge-lien:hover { border-color: var(--accent); color: var(--texte); }

.statut { display: inline-flex; align-items: center; gap: .35em; font: 600 .78rem/1 var(--police-cond); letter-spacing: .08em; text-transform: uppercase; padding: .45em .65em; border-radius: 999px; white-space: nowrap; background: var(--surface-2); color: var(--texte-2); border: 1px solid var(--bord); }
.statut::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.statut-valide, .statut-paye { color: var(--vert); border-color: color-mix(in srgb, var(--vert) 40%, transparent); }
.statut-en_attente, .statut-a_faire { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.statut-refuse, .statut-rembourse, .statut-revoque { color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 40%, transparent); }
.statut-offert { color: var(--bleu, #5b8cff); }

/* ---------- Filtres, onglets, pagination ---------- */

.barre-filtres { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.onglets { display: inline-flex; padding: 4px; gap: 4px; background: var(--surface); border: 1px solid var(--bord); border-radius: calc(var(--rayon) + 4px); }
.onglets a, .onglets button { display: inline-flex; gap: .45em; align-items: center; padding: .55em 1em; border-radius: var(--rayon); color: var(--texte-2); font: 600 .95rem var(--police-texte); text-decoration: none !important; background: none; border: 0; cursor: pointer; }
.onglets [aria-selected="true"] { background: var(--accent); color: var(--accent-texte); }
.onglets-mode { display: flex; width: 100%; margin-bottom: 22px; flex-wrap: wrap; }
.onglets-mode button { flex: 1; justify-content: center; }
.champ-inline select, .champ-inline input { min-height: 44px; }
.champ-recherche { flex: 1; min-width: 200px; }
.champ-recherche input { width: 100%; }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 24px; }
.pagination a { min-width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--bord); border-radius: var(--rayon); color: var(--texte-2); text-decoration: none; }
.pagination a[aria-current="page"] { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }

/* ---------- Formulaires ---------- */

input, select, textarea { font: inherit; color: var(--texte); background: var(--fond-2); border: 1px solid var(--bord-fort); border-radius: var(--rayon); padding: .6em .8em; min-height: 44px; max-width: 100%; }
textarea { min-height: 90px; resize: vertical; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.formulaire { display: grid; gap: 16px; }
.formulaire-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.champ { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.champ > span, .champ > legend { font-weight: 600; font-size: .92rem; color: var(--texte-2); padding: 0; }
.champ input, .champ select { width: 100%; }
.champ-large { flex: 1; min-width: 240px; }
.grille-champs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.case { display: flex; gap: .7em; align-items: flex-start; font-size: .95rem; color: var(--texte-2); cursor: pointer; text-align: left; }
.case input { min-height: auto; width: 20px; height: 20px; margin: .15em 0 0; accent-color: var(--accent); flex: none; }
.cases-grille { display: grid; gap: 6px 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.form-inline { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.form-inline input { min-height: 36px; padding: .35em .6em; font-size: .9rem; }
.entree-plaque { font: 700 1.6rem var(--police-cond); letter-spacing: .12em; text-transform: uppercase; }
.boutons { display: flex; gap: 10px; flex-wrap: wrap; }
.barre-enregistrer { position: sticky; bottom: 12px; z-index: 5; }
.code-copier { display: flex; gap: 10px; align-items: flex-start; background: #0a0a0c; color: #e8e6e0; border: 1px solid var(--bord-fort); border-radius: var(--rayon); padding: 12px 14px; margin: 0 0 14px; }
.code-copier pre { margin: 0; flex: 1; overflow-x: auto; font: .92rem/1.5 ui-monospace, Consolas, monospace; }
.code-copier pre.code-long { max-height: 340px; overflow-y: auto; font-size: .82rem; }
.code-bloc { background: #0a0a0c; color: #d9d6cf; padding: 12px; border-radius: var(--rayon); overflow: auto; max-height: 360px; font-size: .8rem; }
details summary { cursor: pointer; font-weight: 600; }

.choix-cartes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.choix-carte { position: relative; display: grid; gap: 6px; padding: 8px; border: 2px solid var(--bord); border-radius: var(--rayon); cursor: pointer; text-align: center; font-weight: 600; font-size: .9rem; background: var(--fond-2); }
.choix-carte input { position: absolute; opacity: 0; }
.choix-carte img { width: 100%; border-radius: 4px; aspect-ratio: 4 / 1; }
.choix-carte:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.editeur-apercu { text-align: center; padding: 22px; background: radial-gradient(400px 160px at 50% 50%, var(--accent-doux), transparent 70%), var(--fond-2); border-radius: var(--rayon); }
.editeur-apercu .discret { margin: 10px 0 0; }

.depot { position: relative; display: grid; justify-items: center; gap: 8px; padding: 30px 18px; text-align: center; color: var(--texte-2); border: 2px dashed var(--bord-fort); border-radius: var(--rayon-grand); background: var(--fond-2); cursor: pointer; transition: border-color .15s, background .15s; }
.depot:hover, .depot.survol { border-color: var(--accent); background: var(--accent-doux); }
.depot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 0; }
.depot .ico { width: 34px; height: 34px; color: var(--accent); }
.depot img { max-width: 100%; }
.etapes-liste { margin: 0 0 16px; padding-left: 1.3em; display: grid; gap: 8px; color: var(--texte-2); }
.etapes-liste li::marker { color: var(--accent); font-weight: 700; }
.etapes-liste a { display: inline-flex; gap: .3em; align-items: center; font-weight: 600; }
.apercu-skin { width: 100%; border-radius: var(--rayon); margin: 8px 0; }
.texte-libre { white-space: normal; overflow-wrap: anywhere; }
.vignettes-exemples { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.vignettes-exemples img { width: 150px; height: 110px; object-fit: cover; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--fond-2); }

/* Boutique DriftCoins (administration) */
.liste-skins-dc { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.skin-dc { display: grid; grid-template-columns: 168px 1fr auto; gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-2); }
.skin-dc img, .skin-dc-sans { width: 168px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rayon); background: var(--surface-2); display: grid; place-items: center; color: var(--texte-3); }
.skin-dc-retire { opacity: .62; }
.skin-dc-infos p { margin: 0 0 8px; }
.skin-dc-champs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.skin-dc-champs input[name="nom"] { flex: 1 1 200px; }
.skin-dc-champs input[name="prix"] { width: 130px; }
.skin-dc-champs input[name="categorie"] { width: 150px; text-transform: uppercase; }
.categorie-dc { margin: 18px 0 10px; display: flex; align-items: center; gap: 8px; }
.categorie-dc:first-of-type { margin-top: 4px; }
.skin-dc-actions { display: grid; gap: 6px; }
@media (max-width: 760px) { .skin-dc { grid-template-columns: 1fr; } .skin-dc img, .skin-dc-sans { width: 100%; } }
.liste-musiques { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.musique { display: grid; grid-template-columns: 1fr 260px auto auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-2); }
.musique-infos { display: flex; gap: 8px; align-items: center; min-width: 0; }
.musique-infos input { flex: 1; min-width: 0; }
.musique audio { width: 100%; height: 36px; }
@media (max-width: 760px) { .musique { grid-template-columns: 1fr; } }
.liste-pubs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pub { display: grid; grid-template-columns: 200px 1fr auto; gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-2); }
.pub img { display: block; width: 200px; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--rayon); background: var(--surface-2); }
.pub-inactive img { opacity: .45; }
.pub-infos { min-width: 0; display: grid; gap: 8px; }
.pub-infos p { margin: 0; }
.pub-actions { display: grid; gap: 6px; justify-items: end; }
.pub-actions form { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pub-duree { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.pub-duree-champ { display: inline-flex; gap: 8px; align-items: center; }
.pub-duree-champ input { width: 100px; }
@media (max-width: 760px) { .pub { grid-template-columns: 1fr; } .pub img { width: 100%; } .pub-actions { justify-items: start; } .pub-actions form { justify-content: flex-start; } }

.nuancier { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.nuance { display: grid; justify-items: center; gap: 6px; cursor: pointer; font-size: .82rem; color: var(--texte-2); }
.nuance input { position: absolute; opacity: 0; }
.nuance span { width: 44px; height: 44px; border-radius: 50%; background: var(--c); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--bord-fort); transition: transform .15s; }
.nuance:hover span { transform: scale(1.08); }
.nuance:has(input:checked) span { box-shadow: 0 0 0 3px var(--c), 0 0 18px var(--c); }
.nuance:has(input:checked) small { color: var(--texte); font-weight: 600; }
.apercu-pseudo { display: grid; gap: 10px; margin-bottom: 18px; }
.apercu-chat, .apercu-tab { display: flex; gap: .6em; align-items: center; background: #0d0d10; color: #e8e5de; border: 1px solid #25252b; border-radius: var(--rayon); padding: 10px 14px; }
.apercu-nom { color: var(--couleur); font-weight: 700; text-shadow: 0 0 12px color-mix(in srgb, var(--couleur) 45%, transparent); }
.apercu-tab .mini-rang { color: #aaa69d; background: #17171b; border-color: #26262c; }

/* ---------- Espace joueur / admin ---------- */

.espace { display: grid; grid-template-columns: 250px 1fr; gap: 28px; padding-top: 32px; padding-bottom: 72px; align-items: start; }
@media (max-width: 900px) { .espace { grid-template-columns: 1fr; } }
.espace-contenu { min-width: 0; }
.espace-tete { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.espace-tete h1 { margin: 0; }
.menu-lateral { position: sticky; top: 84px; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-grand); padding: 14px; }
@media (max-width: 900px) { .menu-lateral { position: static; } .menu-lateral nav { display: flex; overflow-x: auto; gap: 4px; } .menu-lateral nav a { white-space: nowrap; } }
.menu-lateral-profil { display: flex; gap: 12px; align-items: center; padding: 6px 6px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--bord); }
.menu-lateral-profil strong { display: block; line-height: 1.2; }
.menu-lateral-profil span { font-size: .85rem; color: var(--texte-2); }
.menu-lateral-profil .avatar-vide { width: 44px; height: 44px; }
.menu-lateral nav { display: grid; gap: 2px; margin-bottom: 8px; }
.menu-lateral nav a { display: flex; gap: .65em; align-items: center; padding: .6em .8em; border-radius: var(--rayon); color: var(--texte-2); font-weight: 500; text-decoration: none; }
.menu-lateral nav a:hover { background: var(--surface-2); color: var(--texte); }
.menu-lateral nav a[aria-current="page"] { background: var(--accent-doux); color: var(--texte); box-shadow: inset 3px 0 0 var(--accent); }
.pastille-notif { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; font: 700 .75rem var(--police-texte); color: var(--accent-texte); background: var(--accent); border-radius: 999px; }
.profil-mini { display: flex; gap: 14px; align-items: center; }
.profil-mini h1 { margin: 0; }
.profil-mini .discret { margin: 0; }

.grille-stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 20px; }
.stat { display: grid; align-content: start; gap: 8px; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-grand); padding: 18px; min-width: 0; }
.stat-large { grid-column: span 2; }
@media (max-width: 520px) { .stat-large { grid-column: span 1; } .stat-large .odo { font-size: 1.25rem; } }
.stat-lib { font: 600 .78rem var(--police-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); }
.stat strong { font: 700 1.7rem/1.1 var(--police-cond); font-variant-numeric: tabular-nums; }
.stat-texte { font-size: 1.15rem !important; overflow-wrap: anywhere; }
.stat-sous { color: var(--texte-2); font-size: .88rem; }

.avantages { display: grid; gap: 10px; }
.avantage { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--fond-2); border: 1px solid var(--bord); border-radius: var(--rayon); color: var(--texte); text-decoration: none !important; transition: border-color .15s; }
.avantage:hover { border-color: var(--accent); }
.avantage-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--rayon); background: var(--accent-doux); color: var(--accent); flex: none; }
.avantage-txt { flex: 1; display: grid; min-width: 0; }
.avantage-txt small { color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avantage-actif { border-color: color-mix(in srgb, var(--accent) 45%, var(--bord)); }

.profil-tete { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.profil-tete .avatar { width: 96px; height: 96px; border: 3px solid var(--bord-fort); }
.profil-tete .avatar-vide { font-size: 2.4rem; }
.profil-id { flex: 1; min-width: 240px; }
.profil-id h1 { margin-bottom: .25em; overflow-wrap: anywhere; }
.profil-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.profil-rang { text-align: center; padding: 14px 22px; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-grand); }
.profil-rang span { display: block; font: 600 .78rem var(--police-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); }
.profil-rang strong { font: 700 2.4rem/1.1 var(--police-cond); color: var(--accent); }

.activite { margin: 0 0 12px; }
.activite svg { width: 100%; height: 150px; display: block; }
.activite-axe { stroke: var(--bord-fort); stroke-width: 1; }
.activite-barre { fill: var(--accent); }
.activite-barre:hover { fill: var(--accent-fort); }
.activite-vide { fill: var(--bord); }
.activite-txt { fill: var(--texte-3); font: 11px var(--police-texte); }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checklist li { display: flex; gap: .6em; align-items: center; }
.checklist li .ico { color: var(--accent); }
.checklist li.ok { color: var(--texte-2); text-decoration: line-through; }
.checklist li.ok .ico { color: var(--vert); }
.carte-etapes { border-color: color-mix(in srgb, var(--accent) 45%, var(--bord)); }
.prerequis { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 6px; font-size: .95rem; }
.prerequis li { display: flex; gap: .5em; align-items: center; flex-wrap: wrap; }
.prerequis .ok .ico { color: var(--vert); }
.prerequis .ko { color: var(--rouge); }
.prerequis small { width: 100%; color: var(--texte-2); padding-left: 1.7em; }
.barres-mois { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.barres-mois li { display: grid; grid-template-columns: 70px 1fr 90px 30px; gap: 10px; align-items: center; }
.barre { height: 10px; background: var(--fond-2); border-radius: 999px; overflow: hidden; }
.barre span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.verif-apercu { margin-bottom: 16px; }
.verif-apercu .orn { max-width: 520px; margin: 0 auto; }
.verif-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--bord); padding-top: 14px; }
.verif-actions .form-inline { margin-left: 0; flex: 1; }
.verif-actions .form-inline input { flex: 1; min-width: 200px; }

.merci-coche { display: inline-grid; place-items: center; width: 76px; height: 76px; margin-bottom: 16px; border-radius: 50%; background: color-mix(in srgb, var(--vert) 16%, transparent); color: var(--vert); animation: apparait .5s ease; }
.merci-coche .ico { width: 40px; height: 40px; stroke-width: 2.4; }
@keyframes apparait { from { transform: scale(.5); opacity: 0; } }

/* ---------- FAQ, prose, CTA, pied ---------- */

.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 0 18px; }
.faq summary { padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { color: var(--texte-2); padding-bottom: 6px; }
.prose h2 { font-size: 1.35rem; margin-top: 1.8em; }
.prose p, .prose li { color: var(--texte-2); }
.prose strong { color: var(--texte); }
.bande-cta { position: relative; overflow: hidden; isolation: isolate; padding: clamp(44px, 7vw, 80px) 0; background: linear-gradient(115deg, #b8304a 0%, var(--crete) 45%, #8f2236 100%); color: #fff; }
.bande-cta .rayures { opacity: .5; }
.bande-cta .rayures i:nth-child(1) { background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent); }
.bande-cta .rayures i:nth-child(2) { background: linear-gradient(180deg, rgba(255, 255, 255, .6), transparent); }
.bande-cta .rayures i:nth-child(3) { background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent 85%); }
.bande-cta h2 { color: #fff; }
.bande-cta-in { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.bande-cta-in p { color: rgba(255, 255, 255, .86); max-width: 560px; margin: 0; }
.bande-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-contour-blanc { --b: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.btn-contour-blanc:hover { background: rgba(255, 255, 255, .12); border-color: #fff; box-shadow: none; }

.pied { border-top: 1px solid var(--bord); background: var(--fond-2); padding-top: 48px; color: var(--texte-2); font-size: .95rem; }
.pied-in { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; }
@media (max-width: 760px) { .pied-in { grid-template-columns: 1fr 1fr; } .pied-marque { grid-column: 1 / -1; } }
.pied-marque p { margin: 14px 0; max-width: 380px; }
.pied-marque .logo-texte { display: inline; }
.pied-col { display: grid; align-content: start; gap: 8px; }
.pied-col h3 { font-size: .85rem; letter-spacing: .12em; color: var(--texte); margin-bottom: 4px; font-family: var(--police-cond); font-style: normal; font-weight: 700; text-transform: uppercase; }
.pied a { color: var(--texte-2); }
.pied a:hover { color: var(--texte); }
.pied-reseaux { display: flex; gap: 14px; }
.pied-reseaux a { font-weight: 600; }
.pied-bas { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 28px; border-top: 1px solid var(--bord); font-size: .85rem; color: var(--texte-3); }
.pied-bas span { display: inline-flex; gap: .4em; align-items: center; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.profil-ornement { width: min(100%, 300px); }
/* Pseudo VIP multicolore (comme en jeu) */
.multicolore { background: linear-gradient(90deg, #ff5a5a, #ffb000, #ffe14a, #29d398, #2ec5ff, #b36bff, #ff4fa3, #ff5a5a); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; text-shadow: none !important; animation: arcenciel 4s linear infinite; }
@keyframes arcenciel { to { background-position: 200% 0; } }
.menu-lateral-profil .badge-vip { color: var(--accent-texte); font-size: .72rem; }