/* =====================================================================
   SXR CHAMPIONSHIP — thème v7 « paddock »
   =====================================================================
   Fond noir profond, rouge course, titres condensés en capitales,
   photos de fond assombries, cartes à vignettes, barres d'accent rouges.
   Toutes les pages (publiques et staff) utilisent ces classes ; chaque
   module peut compléter dans css/<module>.css (chargé automatiquement).

   Palette : --fond #0a0a0d · panneaux #131318 / #18181e · bordure #26262e ·
   rouge #e10600 (#ff2a2a au survol) · texte #f2f2f4 / #a0a0ab / #6f6f7a.
   ===================================================================== */

/* Police de titres embarquée (Liberation Sans Narrow, licence SIL OFL) : rendu identique sur tous les appareils. */
@font-face { font-family: "SXR Titres"; src: url(/fonts/LiberationSansNarrow-Bold.ttf) format("truetype"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "SXR Titres"; src: url(/fonts/LiberationSansNarrow-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }

:root {
    --fond: #04060d; --fond-2: #070a14;
    --panneau: #0b0e19; --panneau-2: #10141f; --panneau-3: #171c29;
    --bordure: #1c2130; --bordure-2: #2b3245; --bleu-vif: #3d8bff;
    --rouge: #e10600; --rouge-vif: #ff2a2a; --rouge-fonce: #b00500; --rouge-ombre: rgba(225, 6, 0, 0.35); --rouge-pale: rgba(225, 6, 0, 0.14);
    --texte: #f4f4f6; --texte-2: #a7a7b3; --texte-3: #6e6e7a;
    --vert: #2ecc71; --bleu: #4c8dff; --orange: #f5a623; --or: #ffd166; --argent: #c8ccd4; --bronze: #d08a4e;
    --titre: "SXR Titres", "Oswald", "Barlow Condensed", "Roboto Condensed", "Arial Narrow", Impact, Arial, sans-serif;
    --texte-police: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --rayon: 6px; --rayon-grand: 10px;
    --ombre: 0 14px 40px rgba(0, 0, 0, 0.55);
    --largeur: 100%;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--texte-police); overflow-x: hidden; background: var(--fond); color: var(--texte); line-height: 1.5; -webkit-font-smoothing: antialiased; }
/* Cadre arrondi de la maquette : en-tête, contenu et pied centrés sur 1400 px, fond légèrement plus clair que l'extérieur */
.cadre { width: 100%; margin: 0; background: var(--fond); position: relative; overflow-x: clip; }
.accueil-grille > *, .fiche-colonnes > *, .gp-colonnes > *, .classements-accueil > *, .page-section, .encadre, .carte { min-width: 0; }
.tableau { max-width: 100%; }
img, canvas, svg, video { max-width: 100%; }   /* pas d'overflow:hidden : la barre de menu doit rester collée en haut (sticky) */
main, footer, .onglets-staff { position: relative; z-index: 1; }
html { scroll-padding-top: 76px; }

a { color: var(--rouge); }
img { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--titre); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; line-height: 1.1; }
h1, .bloc-prochain-gp h2, .hero h1, .page-hero h1, .fiche-entete h1 { font-style: normal; }
h1 { font-size: 46px; } h2 { font-size: 26px; } h3 { font-size: 19px; } h4 { font-size: 16px; }
small { color: var(--texte-2); }
code { background: var(--panneau-3); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
::selection { background: var(--rouge); color: white; }

/* ---- Conteneur : contenu centré sur 1280 px, 16 px de marge sur téléphone ---- */
.page-publique, .admin, .accueil { width: 100%; margin: 0; padding: 0 32px 60px; }
@media (min-width: 1800px) { .page-publique, .admin, .accueil { padding: 0 56px 60px; } header { padding: 0 56px; } .onglets-staff { padding-left: 56px; padding-right: 56px; } }
@media (max-width: 600px) { .page-publique, .admin, .accueil { padding: 0 14px 40px; } }

/* ---- Accent rouge devant un libellé ---- */
.section-label, .admin-label { display: inline-flex; align-items: center; gap: 10px; color: var(--rouge-vif); font-family: var(--titre); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; }
.section-label::before, .admin-label::before { content: ""; width: 4px; height: 14px; background: var(--rouge); transform: skewX(-15deg); }

/* =====================================================================
   BARRE DE NAVIGATION (sous-menus au survol, recherche, Espace staff, Connexion)
   ===================================================================== */
header { position: sticky; top: 0; z-index: 50; height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 28px; background: linear-gradient(180deg, rgba(4, 6, 13, 0.85), rgba(4, 6, 13, 0.55)); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.accueil-page header { margin-bottom: -66px; background: linear-gradient(180deg, rgba(4, 6, 13, 0.75), rgba(4, 6, 13, 0)); border-bottom: 0; }
.logo { display: flex; align-items: center; }
.logo a { color: var(--texte); text-decoration: none; font-family: var(--titre); font-size: 24px; font-weight: 700; }
.logo img { height: 40px; width: auto; display: block; }
.logo img.logo-clair { display: none; }
header nav { display: flex; align-items: center; gap: 2px; }
.menu-item { position: relative; }
header nav a { color: var(--texte); text-decoration: none; font-family: var(--texte-police); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 10px 9px; border-radius: 4px; white-space: nowrap; transition: color .2s, background .2s; display: inline-flex; align-items: center; gap: 4px; }
header nav a:hover { color: var(--texte); }
header nav .menu-item > a.actif { color: var(--texte); box-shadow: none; border-radius: 0; position: relative; }
header nav .menu-item > a.actif::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 2px; height: 2px; background: var(--rouge); }
header nav .chevron { font-size: 9px; color: var(--texte-3); }
.sous-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--panneau); border: 1px solid var(--bordure); border-top: 2px solid var(--rouge); border-radius: 0 0 6px 6px; padding: 6px; box-shadow: var(--ombre); z-index: 60; }
.menu-item:hover .sous-menu, .menu-item:focus-within .sous-menu { display: flex; flex-direction: column; }
.sous-menu a { font-family: var(--texte-police); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; padding: 9px 12px; border-radius: 4px; white-space: normal; }
.sous-menu a:hover { background: rgba(255, 255, 255, 0.06); }
header nav a.lien-icone { padding: 8px; color: var(--texte); }
header nav a.lien-icone .ico { width: 20px; height: 20px; }
header nav a.lien-staff, nav a.lien-admin { margin-left: 6px; padding: 9px 16px; border: 1px solid var(--bordure-2); color: white; border-radius: 4px; }
header nav a.lien-staff { color: var(--texte) !important; }
header nav a.lien-staff:hover { border-color: var(--rouge); }
header nav a.lien-admin { background: var(--rouge); border-color: var(--rouge); color: white; box-shadow: 0 6px 18px var(--rouge-ombre); }
header nav a.lien-admin:hover { background: var(--rouge-fonce); color: white; }
.menu-burger { display: none; background: transparent; border: 1px solid var(--bordure-2); color: var(--texte); font-size: 20px; width: 42px; height: 42px; border-radius: 4px; cursor: pointer; }
@media (max-width: 1480px) { header nav a { font-size: 13px; padding: 9px 7px; } header nav a.lien-staff, header nav a.lien-admin { padding: 8px 11px; margin-left: 4px; } header { padding: 0 14px; } .logo img { height: 36px; } }
@media (max-width: 1280px) { header nav a.lien-icone { display: none; } header nav a { font-size: 12px; padding: 9px 5px; } }
@media (max-width: 1100px) {
    .menu-burger { display: block; }
    header nav { display: none; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--panneau); box-shadow: var(--ombre); border-bottom: 1px solid var(--bordure); padding: 10px 16px 16px; max-height: calc(100vh - 66px); overflow-y: auto; }
    header nav.ouvert { display: flex; }
    .menu-item { display: flex; flex-direction: column; }
    header nav a { padding: 12px 10px; border-bottom: 1px solid var(--bordure); border-radius: 0; font-size: 13px; }
    .sous-menu { display: flex; flex-direction: column; position: static; border: 0; box-shadow: none; background: transparent; padding: 0 0 6px 14px; }
    .sous-menu a { border-bottom: 0; color: var(--texte-2); }
    header nav a.lien-staff, nav a.lien-admin { margin: 10px 0 0; justify-content: center; }
}

img.drapeau { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; vertical-align: -2px; margin: 0 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.carte-gp .image .drapeau img, .fiche-entete img.drapeau { width: 26px; height: 20px; }
footer .credits { color: var(--texte-3); font-size: 11px; }
header nav a.lien-staff .ico { width: 16px; height: 16px; }

/* ---- Bandes rouges obliques (coin haut gauche du bandeau, comme sur la maquette claire) ---- */
.hero .bandes, .page-hero .bandes { position: absolute; left: 0; top: 0; width: 220px; height: 150px; z-index: 1; pointer-events: none;
    background: linear-gradient(118deg, transparent 0 14%, var(--rouge) 14% 24%, transparent 24% 31%, rgba(225, 6, 0, 0.35) 31% 39%, transparent 39%);
    -webkit-mask-image: linear-gradient(90deg, black 10%, transparent 90%); mask-image: linear-gradient(90deg, black 10%, transparent 90%); opacity: .9; }
@media (max-width: 700px) { .hero .bandes, .page-hero .bandes { display: none; } }
/* Barre oblique rouge à côté du logo, comme sur la maquette */


/* =====================================================================
   BANDEAUX (hero) : photo de fond assombrie, grand titre, pastilles
   ===================================================================== */
.hero, .page-hero { position: relative; overflow: hidden; margin: 0 -32px 28px; padding: 56px 56px 48px; min-height: 300px; display: flex; flex-direction: column; justify-content: center; background: var(--fond-2); isolation: isolate; border-bottom: 1px solid var(--bordure); }
@media (min-width: 1800px) { .hero, .page-hero { margin: 0 -56px 28px; padding-left: 80px; padding-right: 80px; } }
@media (max-width: 600px) { .hero, .page-hero { margin: 0 -14px 20px; padding: 32px 18px 28px; min-height: 240px; } .hero { min-height: 300px; } .hero h1, .page-hero h1 { font-size: 36px; } .bloc-prochain-gp h2 { font-size: 30px; } .bloc-prochain-gp .texte { padding: 18px 16px 20px; } .metas > div { border-right: 0; margin-right: 0; padding-right: 0; width: 100%; } .titre-section-ligne .lien-discret { width: 100%; } .pastilles { gap: 6px; } .pastille-lien { padding: 9px 14px; } }
.hero::before, .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--image, none); background-size: cover; background-position: center; filter: saturate(0.9); }
.hero::after, .page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(4, 6, 13, 0.9) 0%, rgba(4, 6, 13, 0.65) 30%, rgba(4, 6, 13, 0.15) 55%, rgba(4, 6, 13, 0) 100%), linear-gradient(0deg, var(--fond) 0%, rgba(4, 6, 13, 0) 30%); }
@media (max-width: 700px) { .hero::after, .page-hero::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.85) 60%, var(--fond) 100%); } }
.hero:not([style*="--image"])::before, .page-hero:not([style*="--image"])::before {
    background-image: radial-gradient(ellipse at 80% 0%, rgba(225, 6, 0, 0.35), transparent 55%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 14px); }
.hero { min-height: min(640px, 78vh); text-align: left; justify-content: center; padding-top: 96px; padding-bottom: 70px; }
@media (max-width: 900px) { .hero { min-height: 520px; } }
.hero h1, .page-hero h1 { font-size: clamp(36px, 5vw, 64px); line-height: 0.95; margin: 10px 0 14px; }
.hero h1 .accent, .page-hero h1 .accent { color: var(--texte); }
.hero .accroche { font-family: var(--texte-police); font-weight: 400; color: var(--texte); font-size: 16px; letter-spacing: 7px; line-height: 1.3; text-transform: uppercase; margin: 6px 0 16px; }
.hero .logo-geant { width: min(460px, 80vw); height: auto; display: block; margin-bottom: 10px; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.7)); }
.hero .valeurs { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-family: var(--texte-police); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--texte); margin-bottom: 28px; }
.hero .valeurs span::after { content: ""; display: inline-block; width: 60px; height: 1px; background: var(--rouge); margin-left: 18px; vertical-align: middle; }
.hero .valeurs span:first-child::after { background: var(--bleu-vif); }
@media (max-width: 600px) { .hero .accroche { font-size: 14px; letter-spacing: 3px; } .hero .valeurs { gap: 10px; font-size: 11px; letter-spacing: 2px; } .hero .valeurs span::after { width: 20px; margin-left: 10px; } .hero .logo-geant { width: min(300px, 70vw); } }
.hero .valeurs span:last-child::after { display: none; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .actions .bouton, .hero .actions .bouton-secondaire { border-radius: 999px; padding: 13px 26px; display: inline-flex; align-items: center; gap: 10px; }
.hero .actions .bouton-secondaire { border-color: rgba(255, 255, 255, 0.6); background: rgba(4, 6, 13, 0.45); color: var(--texte); }
.hero .actions .bouton { font-size: 12px; } .hero .actions .bouton-secondaire { font-size: 12px; }
.hero .bandes { display: none; }
.hero p, .page-hero > p { color: var(--texte-2); font-size: 15px; max-width: 560px; line-height: 1.6; }
.page-hero .fil { color: var(--texte-3); font-size: 13px; margin-bottom: 12px; }
.page-hero .fil a { color: var(--texte-2); text-decoration: none; }
.page-hero .fil a:hover { color: var(--texte); }
.hero .bouton { margin-top: 24px; }
.hero .divisions-accueil { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
.hero .divisions-accueil a { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--bordure-2); color: var(--texte); padding: 10px 18px; border-radius: 4px; text-decoration: none; font-family: var(--titre); text-transform: uppercase; letter-spacing: 1px; font-size: 13px; }
.hero .divisions-accueil a:hover { border-color: var(--rouge); }

/* Pastilles F1 / F2 / Saison ▾ (bandeaux) */
.pastilles { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.pastille-lien { font-family: var(--titre); text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; font-weight: 700; color: var(--texte); text-decoration: none; padding: 10px 20px; border: 1px solid var(--bordure-2); border-radius: 999px; background: rgba(0, 0, 0, 0.45); transition: .2s; }
.pastille-lien:hover { border-color: var(--rouge); }
.pastille-lien.actif { background: var(--rouge); border-color: var(--rouge); box-shadow: 0 6px 18px var(--rouge-ombre); }
.pastille-select select { font-family: var(--titre); text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; font-weight: 700; color: var(--texte); background: rgba(0, 0, 0, 0.45); border: 1px solid var(--bordure-2); border-radius: 999px; padding: 10px 14px; cursor: pointer; }
.pastille-select select:focus { border-color: var(--rouge); outline: none; }
.hero p + .pastilles, .page-hero p + .pastilles { margin-top: 22px; }
.hero .pastilles + p { margin-top: 18px; }

/* Pastilles de division (F1 rouge actif / F2 contour) + saison */
.onglets-categories, .saisons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.onglets-categories a, .saisons a { font-family: var(--titre); text-transform: uppercase; letter-spacing: 1px; font-size: 13px; font-weight: 700; color: var(--texte-2); text-decoration: none; padding: 9px 18px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--panneau); transition: .2s; }
.onglets-categories a:hover, .saisons a:hover { color: var(--texte); border-color: var(--rouge); }
.onglets-categories a.actif, .saisons a.actif { background: var(--rouge); border-color: var(--rouge); color: white; box-shadow: 0 6px 18px var(--rouge-ombre); }
.saisons { margin-top: 12px; color: var(--texte-3); font-size: 13px; }
.saisons a { padding: 7px 14px; }
.page-hero .onglets-categories + .saisons { margin-top: 10px; }

/* =====================================================================
   SECTIONS ET CARTES
   ===================================================================== */
.page-section { padding: 10px 0 28px; }
.page-section + .page-section { border-top: 1px solid var(--bordure); padding-top: 30px; }
.page-section h2 { margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.page-section h2::before { content: ""; width: 5px; height: 22px; background: var(--rouge); transform: skewX(-15deg); }
.page-section h2 small, .encadre h2 small { font-family: var(--texte-police); text-transform: none; letter-spacing: 0; color: var(--texte-3); font-size: 13px; font-weight: normal; }
.titre-section-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.titre-section-ligne h2 { margin-bottom: 0; }
.encadre { background: var(--panneau); border: 1px solid var(--bordure); border-radius: var(--rayon-grand); padding: 22px 24px; margin-bottom: 22px; }
.encadre h2, .encadre h3 { margin-bottom: 14px; }
.encadre.accent { border-left: 4px solid var(--rouge); }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.carte { background: var(--panneau); border: 1px solid var(--bordure); border-radius: var(--rayon-grand); padding: 18px 20px; color: inherit; text-decoration: none; display: block; position: relative; overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; }
a.carte:hover, .carte-lien:hover { border-color: var(--rouge); transform: translateY(-3px); box-shadow: var(--ombre); }
.carte h3 { margin: 0 0 6px; }
.carte p { color: var(--texte-2); font-size: 14px; margin: 0; }
.carte .meta { color: var(--texte-3); font-size: 12px; margin-top: 10px; text-transform: uppercase; letter-spacing: 1.5px; font-family: var(--titre); }
.carte img.vignette-large { width: calc(100% + 40px); margin: -18px -20px 14px; height: 150px; object-fit: cover; border-radius: 0; max-width: none; }
.liste-cartes { display: flex; flex-direction: column; gap: 10px; }
.carte-ligne { display: flex; align-items: center; gap: 16px; background: var(--panneau); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 12px 16px; color: inherit; text-decoration: none; transition: .2s; }
.carte-ligne:hover { border-color: var(--rouge); transform: translateX(4px); }
.carte-ligne .manche { font-family: var(--titre); color: var(--rouge-vif); font-size: 18px; min-width: 48px; }
.carte-ligne .nom { flex: 1; font-weight: 600; }
.carte-ligne .nom small { display: block; font-weight: normal; }
.carte-ligne .date { color: var(--texte-2); font-size: 13px; }
.empty-message { color: var(--texte-3); padding: 28px 20px; text-align: center; border: 1px dashed var(--bordure-2); border-radius: var(--rayon-grand); }
.centre { text-align: center; }
.lien-discret { color: var(--texte-2); text-decoration: none; font-size: 14px; font-weight: 600; }
.lien-discret:hover { color: var(--rouge-vif); }
.vignette { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 8px; background: var(--panneau-3); }
.couleur { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); }
.ronde, .pastille { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); }

/* ---- Tuiles de statistiques ---- */
.stats-tuiles, .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 20px 0; }
.stat-tuile, .admin-card { background: var(--panneau); border: 1px solid var(--bordure); border-radius: var(--rayon-grand); padding: 16px 18px; position: relative; overflow: hidden; }
.stat-tuile::before, .admin-card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--rouge); }
.stat-tuile span, .admin-card span { display: block; color: var(--texte-3); font-family: var(--titre); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; }
.stat-tuile strong, .admin-card strong { display: block; font-family: var(--titre); font-size: 30px; margin-top: 4px; line-height: 1; color: var(--texte); }
.stat-tuile small { color: var(--texte-3); }
.stat-tuile .positif, .positif { color: var(--vert); } .stat-tuile .negatif, .negatif { color: var(--rouge-vif); }

/* ---- Fiche (pilote, écurie, circuit) ---- */
.fiche-entete { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; background: var(--panneau); border: 1px solid var(--bordure); border-left: 5px solid var(--rouge); border-radius: var(--rayon-grand); padding: 26px 30px; margin: 0 0 24px; box-shadow: var(--ombre); }
.fiche-entete img.portrait { width: 150px; height: 150px; object-fit: cover; border-radius: var(--rayon-grand); background: var(--panneau-3); }
.fiche-entete .numero-geant { font-family: var(--titre); font-size: 76px; font-weight: 800; color: var(--rouge-vif); line-height: 1; min-width: 130px; text-align: center; text-shadow: 0 0 40px var(--rouge-ombre); }
.fiche-entete h1 { font-size: 40px; margin: 0 0 6px; }
.fiche-entete .sous-titre { color: var(--texte-2); }
.fiche-entete .badges { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.fiche-colonnes { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
@media (max-width: 900px) { .fiche-colonnes { grid-template-columns: minmax(0, 1fr); } }

/* ---- Chronologie ---- */
.chronologie { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--bordure-2); }
.chronologie li { position: relative; padding: 0 0 18px 22px; }
.chronologie li::before { content: ""; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--rouge); border: 2px solid var(--fond); box-shadow: 0 0 0 2px var(--rouge-ombre); }
.chronologie .quand { color: var(--texte-3); font-family: var(--titre); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.chronologie .quoi { font-weight: 600; }
.chronologie .detail { color: var(--texte-2); font-size: 14px; }

/* =====================================================================
   TABLEAUX
   ===================================================================== */
.tableau { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--bordure); border-radius: var(--rayon-grand); background: var(--panneau); }
.tableau table { min-width: 520px; }
.tableau-compact table { min-width: 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; padding: 12px 14px; font-family: var(--titre); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--texte-3); border-bottom: 1px solid var(--bordure-2); background: var(--panneau-2); }
td { padding: 11px 14px; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--panneau-2); }
td small { color: var(--texte-3); display: inline-block; }
td code { font-size: 12px; }
table .num { text-align: right; font-variant-numeric: tabular-nums; }
table .centre { text-align: center; }
table tr.moi td, table tr.surligne td { background: rgba(225, 6, 0, 0.08); }
table .ecart { color: var(--texte-3); font-size: 12px; }
.tableau-compact td, .tableau-compact th { padding: 7px 10px; font-size: 13px; }
table.classement td.rang { font-family: var(--titre); font-size: 20px; color: var(--texte-3); width: 50px; }
table.classement tr:nth-child(1) td.rang { color: var(--or); } table.classement tr:nth-child(2) td.rang { color: var(--argent); } table.classement tr:nth-child(3) td.rang { color: var(--bronze); }
table.classement td.points { font-family: var(--titre); font-size: 20px; text-align: right; }
table input[type=number], table input[type=text], table select { background: var(--panneau); color: var(--texte); border: 1px solid var(--bordure-2); border-radius: 4px; padding: 7px 9px; font-size: 13px; width: 100%; min-width: 60px; }
table.saisie-resultats input[type=number] { width: 70px; }
tr.ligne-alerte td { background: rgba(245, 166, 35, 0.08); }
td.actions { white-space: nowrap; text-align: right; }
td.actions form { display: inline; }
td.actions .bouton-secondaire, td.actions button, td.actions .btn-rouge, td.actions .btn-vert { margin-left: 4px; padding: 6px 11px; font-size: 12px; }
.pagination { display: flex; gap: 6px; justify-content: center; margin: 22px 0; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 7px 12px; border: 1px solid var(--bordure-2); border-radius: 4px; color: var(--texte-2); text-decoration: none; font-size: 13px; }
.pagination a:hover, .pagination .actif { border-color: var(--rouge); color: var(--texte); }

/* =====================================================================
   BADGES, BOUTONS, ALERTES
   ===================================================================== */
.badge { display: inline-block; padding: 3px 9px; border-radius: 3px; font-family: var(--titre); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; background: var(--panneau-3); color: var(--texte-2); vertical-align: middle; }
.badge-vert, .badge-officiel { background: rgba(46, 204, 113, 0.15); color: #5fe39b; }
.badge-bleu { background: rgba(76, 141, 255, 0.16); color: #86b3ff; }
.badge-gris { background: var(--panneau-3); color: var(--texte-2); }
.badge-rouge { background: rgba(225, 6, 0, 0.18); color: #ff7b7b; }
.badge-orange { background: rgba(245, 166, 35, 0.16); color: #ffc45c; }
.badge-couleur { color: white; }
.bouton, .admin-form button, .auth-box button, button.btn-vert, button.btn-rouge, button.btn-gris, button.btn-bleu, .admin-panel .bouton {
    display: inline-block; background: var(--rouge); color: white; border: 0; padding: 12px 24px; border-radius: 4px; font-family: var(--titre); font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s; box-shadow: 0 6px 18px var(--rouge-ombre); line-height: 1.2; }
.bouton:hover, .admin-form button:hover, .auth-box button:hover { background: var(--rouge-vif); transform: translateY(-1px); }
.bouton-secondaire { display: inline-block; background: var(--panneau); color: var(--texte); border: 1px solid var(--bordure-2); padding: 9px 16px; border-radius: 4px; font-family: var(--titre); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: .2s; box-shadow: none; }
.bouton-secondaire:hover { border-color: var(--rouge); color: var(--texte); background: var(--rouge-pale); }
.bouton.bouton-secondaire { background: transparent; }
.btn-rouge { background: transparent !important; color: var(--rouge-vif) !important; border: 1px solid rgba(225, 6, 0, 0.5) !important; box-shadow: none !important; }
.btn-rouge:hover { background: var(--rouge) !important; color: white !important; }
.btn-vert { background: #1f9d55 !important; color: white !important; box-shadow: none !important; } .btn-vert:hover { background: #26b864 !important; }
.btn-gris { background: #6b7280 !important; color: white !important; box-shadow: none !important; }
.btn-bleu { background: #2f6fd6 !important; color: white !important; box-shadow: none !important; }
button[disabled] { opacity: 0.45; cursor: not-allowed; transform: none !important; }
button.lien { background: none; border: 0; color: var(--rouge-vif); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.lien-annuler { color: var(--texte-2); font-size: 13px; align-self: center; }
.lien-form { background: none; border: 0; color: var(--texte-2); cursor: pointer; font: inherit; text-decoration: underline; }
.flash { margin: 16px 32px 0; padding: 12px 18px; border-radius: var(--rayon); background: rgba(46, 204, 113, 0.12); border: 1px solid rgba(46, 204, 113, 0.4); color: #7ff0ae; font-size: 14px; }
.flash-erreur { background: rgba(225, 6, 0, 0.12); border-color: rgba(225, 6, 0, 0.5); color: #ff8a8a; }
.alerte { background: rgba(245, 166, 35, 0.1); border: 1px solid rgba(245, 166, 35, 0.4); color: #ffc45c; padding: 12px 16px; border-radius: var(--rayon); margin: 14px 0; font-size: 14px; }
.alerte-rouge { background: rgba(225, 6, 0, 0.12); border-color: rgba(225, 6, 0, 0.45); color: #ff8a8a; }
.alerte-verte { background: rgba(46, 204, 113, 0.1); border-color: rgba(46, 204, 113, 0.4); color: #7ff0ae; }
.alerte-lien { color: var(--orange); font-weight: 600; }
.prive { border-left: 3px solid var(--orange); padding-left: 12px; }
.prive::before { content: "🔒 Privé"; display: block; font-family: var(--titre); font-size: 11px; color: var(--orange); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 4px; }
.prive-inline { color: var(--orange); font-size: 12px; }
.aide { color: var(--texte-3); font-size: 13px; margin: 8px 0; line-height: 1.6; }
.visuellement-cache { position: absolute; left: -9999px; }
.texte-2 { color: var(--texte-2); } .texte-3 { color: var(--texte-3); }

/* ---- Filtres / recherche ---- */
.filtres { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 4px 0 24px; }
.filtres input, .filtres select { background: var(--panneau); color: var(--texte); border: 1px solid var(--bordure-2); border-radius: 4px; padding: 10px 14px; font-size: 14px; min-width: 160px; }
.filtres input:focus, .filtres select:focus { border-color: var(--rouge); outline: none; }
.filtres label { display: flex; flex-direction: column; gap: 4px; color: var(--texte-3); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-family: var(--titre); }
.filtres .bouton-secondaire { padding: 10px 16px; }

/* ---- Onglets locaux ---- */
.onglets-locaux { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--bordure); margin: 14px 0 22px; }
.onglets-locaux button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--texte-2); padding: 12px 16px; cursor: pointer; font-family: var(--titre); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; margin-bottom: -1px; }
.onglets-locaux button.actif { color: var(--texte); border-bottom-color: var(--rouge); }
.onglets-locaux button:hover { color: var(--texte); }

/* ---- Texte riche ---- */
.texte-riche h3 { font-size: 22px; margin: 28px 0 10px; color: var(--texte); display: flex; align-items: center; gap: 10px; }
.texte-riche h3::before { content: ""; width: 4px; height: 18px; background: var(--rouge); transform: skewX(-15deg); }
.texte-riche h4 { font-size: 16px; margin: 20px 0 8px; color: #d0d0d6; }
.texte-riche p { color: #d0d0d6; line-height: 1.75; margin-bottom: 14px; }
.texte-riche ul, .texte-riche ol { color: #d0d0d6; line-height: 1.75; margin: 0 0 14px 22px; }
.texte-riche a { color: var(--rouge); }
.texte-riche strong { color: var(--texte); }

/* ---- Podiums ---- */
.podium { list-style: none; margin: 10px 0 0; padding: 0; }
.podium li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.podium .place { font-family: var(--titre); font-size: 16px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--panneau-3); color: var(--texte-2); }
.podium li:nth-child(1) .place { background: var(--or); color: #000; } .podium li:nth-child(2) .place { background: var(--argent); color: #000; } .podium li:nth-child(3) .place { background: var(--bronze); color: #000; }
.podium a { color: inherit; text-decoration: none; } .podium a:hover { color: var(--rouge-vif); }
.podium-grand { display: flex; gap: 14px; align-items: flex-end; justify-content: center; margin: 24px 0; flex-wrap: wrap; }
.podium-grand .marche { background: var(--panneau-2); border: 1px solid var(--bordure); border-radius: var(--rayon-grand) var(--rayon-grand) 0 0; text-align: center; padding: 16px 14px 12px; min-width: 160px; }
.podium-grand .marche.p1 { order: 2; padding-top: 32px; border-top: 4px solid var(--or); } .podium-grand .marche.p2 { order: 1; border-top: 4px solid var(--argent); } .podium-grand .marche.p3 { order: 3; border-top: 4px solid var(--bronze); }
.podium-grand .place { font-family: var(--titre); font-size: 34px; font-weight: 800; }
.podium-grand .pilote { font-weight: 700; }
.podium-grand small { color: var(--texte-2); }

/* ---- Compte à rebours en blocs ---- */
.compte-a-rebours { display: flex; gap: 10px; margin: 14px 0; flex-wrap: wrap; color: var(--texte-3); font-family: var(--titre); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.compte-a-rebours b { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; padding: 10px 8px 6px; background: var(--panneau); border: 1px solid var(--bordure); border-top: 3px solid var(--rouge); border-radius: 6px; color: var(--texte); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.compte-a-rebours b::after { content: attr(data-unite); font-size: 10px; color: var(--texte-3); margin-top: 6px; letter-spacing: 2px; }

/* ---- Icônes en ligne (SVG) ---- */
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; flex: none; }
.metas { display: flex; gap: 0; flex-wrap: wrap; margin: 16px 0; }
.metas > div { display: flex; align-items: center; gap: 10px; color: var(--texte-2); font-size: 14px; padding: 2px 18px 2px 0; margin-right: 18px; border-right: 1px solid var(--bordure-2); }
.metas > div:last-child { border-right: 0; }
.metas .ico { color: var(--texte); width: 34px; height: 34px; padding: 7px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--panneau-2); }
.metas strong { display: block; color: var(--texte); font-family: var(--titre); font-size: 15px; letter-spacing: .5px; }
.metas span { display: block; color: var(--texte-3); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }

/* ---- Graphique ---- */
canvas.courbes { width: 100%; height: 260px; display: block; background: var(--panneau-2); border: 1px solid var(--bordure); border-radius: var(--rayon-grand); }
.legende-courbes { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--texte-2); }

/* ---- Bandeau de chiffres (équipes, pilotes, courses, champion) ---- */
.chiffres { display: flex; justify-content: center; gap: 0; flex-wrap: wrap; margin: -58px 0 26px; position: relative; z-index: 2; }
.chiffres > a, .chiffres > div { display: flex; align-items: center; gap: 12px; padding: 14px 34px; border-right: 1px solid var(--bordure-2); color: inherit; text-decoration: none; }
.chiffres > :last-child { border-right: 0; }
.chiffres .ico { width: 30px; height: 30px; color: var(--bleu-vif); }
.chiffres strong { display: block; font-family: var(--texte-police); font-weight: 700; font-size: 22px; line-height: 1; }
.chiffres span { display: block; font-family: var(--texte-police); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--texte-2); margin-top: 3px; }
.chiffres-reseaux { margin: 6px 0 40px; }   /* entre le bandeau et les tuiles, sans chevauchement */
.chiffres-reseaux .ico-reseau { width: 30px; height: 30px; fill: var(--bleu-vif); color: var(--bleu-vif); stroke: none; transition: transform .2s; }
.chiffres-reseaux strong { font-size: 18px; letter-spacing: .5px; }
.chiffres-reseaux > a:hover .ico-reseau { transform: scale(1.12); }
.chiffres-reseaux > a:hover strong { color: var(--bleu-vif); }
@media (max-width: 700px) { .chiffres { margin-top: 10px; } .chiffres > a, .chiffres > div { padding: 12px 16px; flex: 1 1 45%; border-right: 0; } }

/* ---- Tuiles photo (Le championnat, Les pilotes, Le calendrier, Classements) ---- */
.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 40px; }
@media (max-width: 1000px) { .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tuiles { grid-template-columns: minmax(0, 1fr); } }
.tuile { position: relative; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; color: inherit; text-decoration: none; background: var(--panneau); border: 1px solid var(--bordure); transition: transform .3s, border-color .3s; }
.tuile:hover { transform: translateY(-4px); border-color: var(--bordure-2); }
.tuile .image { height: 180px; background: var(--panneau-3) center/cover no-repeat; position: relative; }
.tuile .image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 6, 13, 0) 55%, var(--panneau) 100%); }
.tuile.sans-image .image { background-image: radial-gradient(ellipse at 70% 30%, rgba(225, 6, 0, 0.35), transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(61, 139, 255, 0.25), transparent 55%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 16px); }
.tuile .texte { position: static; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 6px 18px 18px; }
.tuile .texte > div::before { content: ""; display: block; width: 26px; height: 2px; background: var(--rouge); margin-bottom: 10px; }
.tuile h3 { font-family: var(--texte-police); font-size: 18px; font-weight: 800; letter-spacing: .5px; }
.tuile p { color: var(--texte-2); font-family: var(--texte-police); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; margin-top: 4px; }
.tuile .rond { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--texte); background: transparent; }
.tuile .rond .ico { width: 20px; height: 20px; }

/* ---- Titres de section « Lamborghini » : ligne fine + libellé ---- */
.titre-section-ligne { border-bottom: 1px solid var(--bordure); padding-bottom: 12px; }

/* =====================================================================
   ACCUEIL
   ===================================================================== */
.accueil-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 26%); gap: 24px; align-items: start; }
.accueil-grille > div > .page-section, .accueil-grille > aside > .page-section { background: var(--panneau); border: 1px solid var(--bordure); border-radius: var(--rayon-grand); padding: 18px 20px 20px; box-shadow: var(--ombre); }
.accueil-grille > div > .page-section + .page-section { margin-top: 20px; border-top: 1px solid var(--bordure); }
.accueil-grille h2 { font-size: 15px; letter-spacing: 1.5px; }
.accueil-grille h2::before { height: 16px; }
.accueil-grille .titre-section-ligne { margin-bottom: 12px; }
.accueil-grille .lien-discret { font-size: 12px; }
.accueil-grille .page-section { padding: 6px 0 20px; }
@media (max-width: 1000px) { .accueil-grille { grid-template-columns: minmax(0, 1fr); } }
.bloc-prochain-gp { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; margin-bottom: 28px; }
.bloc-prochain-gp .texte { background: var(--panneau); border: 1px solid var(--bordure); border-radius: var(--rayon-grand); box-shadow: var(--ombre); }
.bloc-prochain-gp .visuel { border-radius: var(--rayon-grand); border: 1px solid var(--bordure); box-shadow: var(--ombre); overflow: hidden; }
.bloc-prochain-gp .texte .bouton-secondaire.voir-circuit { position: absolute; right: 22px; top: 22px; font-size: 11px; padding: 8px 12px; }
.bloc-prochain-gp .texte .voir-circuit .ico { width: 14px; height: 14px; }
@media (max-width: 600px) { .bloc-prochain-gp .texte .bouton-secondaire.voir-circuit { position: static; display: inline-flex; margin-bottom: 12px; } }
@media (max-width: 900px) { .bloc-prochain-gp { grid-template-columns: minmax(0, 1fr); } .bloc-prochain-gp .visuel { min-height: 170px; order: -1; } .bloc-prochain-gp .visuel.sans-image { display: none; } }
.bloc-prochain-gp .texte { padding: 22px 28px 24px; position: relative; }
.bloc-prochain-gp .texte::before { display: none; }
.bloc-prochain-gp h2 { font-size: 40px; margin: 6px 0 2px; }
.bloc-prochain-gp h2 a { color: inherit; text-decoration: none; }
.bloc-prochain-gp .circuit { color: var(--texte-2); font-family: var(--titre); text-transform: uppercase; letter-spacing: 2px; font-size: 14px; }
.bloc-prochain-gp .pays { color: var(--texte-3); font-size: 13px; margin-top: 4px; }
.bloc-prochain-gp .deux-boites { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
@media (max-width: 600px) { .bloc-prochain-gp .deux-boites { grid-template-columns: 1fr; } }
.bloc-prochain-gp .boite { background: var(--panneau-2); border: 1px solid var(--bordure); border-left: 3px solid var(--rouge); border-radius: var(--rayon); padding: 14px 16px; }
.bloc-prochain-gp .boite.meteo-boite { border-left-color: var(--bordure); }
.bloc-prochain-gp .boite .section-label { font-size: 11px; }
.bloc-prochain-gp .boite .section-label .ico { width: 16px; height: 16px; color: var(--rouge-vif); }
.temperatures { display: flex; gap: 14px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--bordure); width: 100%; }
.temperatures > div { display: flex; align-items: center; gap: 8px; padding-right: 14px; border-right: 1px solid var(--bordure-2); white-space: nowrap; }
.temperatures > div:last-child { border-right: 0; }
.temperatures .ico { width: 20px; height: 20px; color: var(--texte-2); }
.temperatures small { display: block; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--texte-3); }
.temperatures strong { font-family: var(--titre); font-size: 15px; }
.bloc-prochain-gp .boite .compte-a-rebours { margin: 10px 0 0; }
.bloc-prochain-gp .boite .compte-a-rebours { gap: 0; flex-wrap: nowrap; }
.bloc-prochain-gp .boite .compte-a-rebours b { min-width: 0; flex: 1; font-size: 26px; padding: 6px 4px 4px; background: none; border: 0; border-right: 1px solid var(--bordure-2); border-radius: 0; }
.bloc-prochain-gp .boite .compte-a-rebours b:last-child { border-right: 0; }
.bloc-prochain-gp .boite .compte-a-rebours b::after { font-size: 9px; letter-spacing: 1.5px; }
.meteo-contenu { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.meteo-contenu > div:first-of-type { flex: 1; min-width: 140px; }
.meteo-contenu .ico { width: 34px; height: 34px; color: var(--bleu); }
.meteo-contenu strong { display: block; font-size: 14px; font-family: var(--titre); letter-spacing: .4px; text-transform: uppercase; line-height: 1.25; }
.meteo-contenu small { color: var(--texte-3); font-size: 12px; }
.sessions-ligne { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; color: var(--texte-3); font-size: 12px; }
.sessions-ligne strong { color: var(--texte-2); }
.bloc-prochain-gp .visuel .bouton-secondaire .ico { width: 16px; height: 16px; margin-right: 4px; }
.bloc-prochain-gp .visuel { position: relative; min-height: 240px; background: var(--panneau-3) center/cover no-repeat; }
.bloc-prochain-gp .visuel::after { display: none; }
.bloc-prochain-gp .visuel a { position: absolute; right: 16px; top: 16px; z-index: 1; }
.bloc-prochain-gp .visuel .vide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--texte-3); font-family: var(--titre); letter-spacing: 2px; text-transform: uppercase; background: var(--panneau-3); }
.meteo-bloc { display: flex; gap: 18px; align-items: center; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 12px 16px; margin-top: 14px; font-size: 14px; color: var(--texte-2); }
.meteo-bloc .ico { color: var(--bleu); width: 26px; height: 26px; }
.meteo-bloc .libelle { font-family: var(--titre); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--texte-3); display: block; }
.calendrier-cartes { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--bordure-2) transparent; }
.calendrier-cartes > * { flex: 0 0 250px; scroll-snap-align: start; }
.carte-gp { display: flex; flex-direction: column; background: var(--panneau); border: 1px solid var(--bordure); border-radius: 12px; color: inherit; text-decoration: none; transition: .2s; min-height: 0; position: relative; }
.carte-gp:hover { border-color: var(--rouge); transform: translateY(-2px); box-shadow: var(--ombre); }
.carte-gp .corps { padding: 14px 16px 12px; }
.carte-gp .ligne-titre { display: flex; align-items: center; gap: 10px; }
.carte-gp .ligne-titre strong { font-family: var(--titre); text-transform: uppercase; font-size: 14px; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; order: 2; }
.carte-gp .ligne-titre .manche { display: none; }
.carte-gp .ligne-titre img.drapeau { width: 24px; height: 17px; flex: none; order: 1; }
.carte-gp .corps small { display: flex; align-items: center; gap: 4px; color: var(--texte-3); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; margin: 4px 0 0 34px; }
.carte-gp .corps small .ico { display: none; }
.carte-gp .image { display: none; }
.carte-gp .etat { margin: 10px 0 0 34px; }
.carte-gp .etat .badge { background: var(--rouge-pale); color: var(--rouge-vif); }
.carte-gp.terminee .etat .badge { background: var(--panneau-3); color: var(--texte-2); }
.carte-gp .chevron { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--texte-3); }
.carte-gp .chevron .ico { width: 16px; height: 16px; }
.carte-gp.prochaine { border-color: var(--rouge); box-shadow: 0 0 0 1px var(--rouge-ombre); }
.carte-voir-tout { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 14px 10px; border-style: solid; flex-basis: 70px !important; }
.carte-voir-tout .plus { font-size: 18px; color: var(--texte-3); }
.carte-voir-tout .rond { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bordure-2); display: inline-flex; align-items: center; justify-content: center; color: var(--rouge-vif); }
.carte-voir-tout strong, .carte-voir-tout .plus { display: none; }
.podium-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.podium-chips .chip { background: var(--panneau-3); border: 1px solid var(--bordure-2); border-radius: 4px; padding: 4px 9px; font-size: 12px; }
.podium-chips .chip b { font-family: var(--titre); margin-right: 4px; }
.podium-chips .p1 b { color: var(--or); } .podium-chips .p2 b { color: var(--argent); } .podium-chips .p3 b { color: var(--bronze); }
.actu-ligne .categorie time { color: var(--texte-3); font-family: var(--texte-police); letter-spacing: 0; text-transform: none; }
.carte-gp.terminee .image::before { content: "✓"; position: absolute; right: 10px; bottom: 6px; z-index: 1; color: var(--vert); font-weight: bold; }
.liste-actus { display: flex; flex-direction: column; gap: 0; }
.actu-ligne { display: flex; gap: 12px; align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--bordure); border-radius: 0; padding: 10px 0; color: inherit; text-decoration: none; transition: .2s; }
.actu-ligne:last-child { border-bottom: 0; }
.actu-ligne:hover strong { color: var(--rouge); }
.actu-ligne .image { width: 64px; height: 44px; flex: none; border-radius: 6px; background: var(--panneau-3) center/cover no-repeat; }
.actu-ligne .categorie { display: inline-block; color: var(--rouge-vif); border: 1px solid rgba(225, 6, 0, 0.6); border-radius: 4px; padding: 1px 7px; font-family: var(--titre); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 3px; }
.actu-ligne strong { display: block; font-size: 13px; line-height: 1.3; font-weight: 600; }
.actu-ligne .texte-actu { flex: 1; min-width: 0; }
.actu-ligne time { color: var(--texte-3); font-size: 11px; white-space: nowrap; }
.actu-ligne .chevron { color: var(--texte-3); display: inline-flex; }
.actu-ligne .chevron .ico { width: 14px; height: 14px; }
.resultats-recents { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 900px) { .resultats-recents { grid-template-columns: 1fr; } }
.carte-resultat { display: flex; align-items: center; gap: 12px; background: var(--panneau); border: 1px solid var(--bordure); border-radius: 8px; padding: 12px 14px; color: inherit; text-decoration: none; transition: .2s; }
.carte-resultat:hover { border-color: var(--rouge); }
.carte-resultat .gp { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.carte-resultat .gp strong { font-family: var(--titre); text-transform: uppercase; font-size: 14px; }
.carte-resultat > small { color: var(--texte-3); font-size: 11px; white-space: nowrap; }
.carte-resultat .podium-chips { margin: 0 0 0 auto; flex-wrap: nowrap; }
.carte-resultat .chevron-droite { color: var(--texte-2); display: inline-flex; }
.carte-resultat .chevron-droite .ico { width: 16px; height: 16px; }
.podium-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.podium-chips .chip { background: var(--panneau-3); border: 1px solid var(--bordure-2); border-radius: 4px; padding: 3px 7px; font-size: 11px; white-space: nowrap; }
.podium-chips .chip b { font-family: var(--titre); margin-right: 3px; }
.podium-chips .p1 b { color: var(--or); } .podium-chips .p2 b { color: var(--argent); } .podium-chips .p3 b { color: var(--bronze); }
.actu-ligne .categorie time { color: var(--texte-3); font-family: var(--texte-police); letter-spacing: 0; text-transform: none; }
.mise-en-avant { position: relative; overflow: hidden; padding: 40px 36px; margin: 0 0 28px; border: 1px solid var(--bordure); border-radius: var(--rayon-grand); background: linear-gradient(120deg, #1d0a0a, var(--panneau) 60%); }
.mise-en-avant::after { content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, var(--rouge-ombre), transparent 65%); }
.mise-en-avant h2 { font-size: 34px; margin: 8px 0 10px; }
.mise-en-avant p { color: var(--texte-2); max-width: 760px; margin-bottom: 14px; }
.classements-accueil { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .classements-accueil { grid-template-columns: minmax(0, 1fr); } }
.classement-bloc { background: var(--panneau); border: 1px solid var(--bordure); border-radius: var(--rayon-grand); padding: 16px 18px; }
.classement-bloc h3 { font-size: 15px; letter-spacing: 2px; color: var(--texte-2); margin-bottom: 10px; }
.mini-classement { list-style: none; margin: 0 0 10px; padding: 0; counter-reset: rang; }
.mini-classement li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bordure); counter-increment: rang; font-size: 14px; }
.mini-classement li::before { content: counter(rang); font-family: var(--titre); font-size: 16px; color: var(--texte-3); width: 20px; }
.mini-classement li:nth-child(1)::before { color: var(--or); } .mini-classement li:nth-child(2)::before { color: var(--argent); } .mini-classement li:nth-child(3)::before { color: var(--bronze); }
.mini-classement .nom { flex: 1; color: inherit; text-decoration: none; }
.mini-classement .points { font-family: var(--titre); font-size: 16px; }
.titre-division { font-family: var(--titre); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--texte-3); margin: 24px 0 10px; }
.rejoindre { text-align: center; padding: 40px 20px 20px; }
.rejoindre h2 { font-size: 22px; letter-spacing: 3px; margin-bottom: 18px; }
.rejoindre .bouton { margin: 6px; }
.actus-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.actu-carte { display: block; background: var(--panneau); border: 1px solid var(--bordure); border-radius: var(--rayon-grand); overflow: hidden; color: inherit; text-decoration: none; transition: .2s; }
.actu-carte:hover { border-color: var(--rouge); transform: translateY(-3px); box-shadow: var(--ombre); }
.actu-carte img { width: 100%; height: 160px; object-fit: cover; display: block; }
.actu-texte { padding: 14px 16px 16px; }
.actu-texte time { color: var(--rouge-vif); font-family: var(--titre); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.actu-texte h3 { margin: 6px 0 6px; font-size: 18px; }
.actu-texte p { color: var(--texte-2); font-size: 14px; }

/* ---- Calendrier (page) ---- */
.calendrier { display: flex; flex-direction: column; gap: 14px; }
.course { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 20px; align-items: center; background: var(--panneau); border: 1px solid var(--bordure); border-radius: var(--rayon-grand); padding: 18px 22px; }
.course.prochaine { border-color: var(--rouge); box-shadow: 0 0 0 1px var(--rouge-ombre), var(--ombre); }
.course.annulee { opacity: 0.55; }
.course-date { text-align: center; border-right: 1px solid var(--bordure); padding-right: 16px; }
.course-date .jour { display: block; font-family: var(--titre); font-size: 40px; line-height: 1; color: var(--rouge-vif); }
.course-date .mois { display: block; font-family: var(--titre); font-size: 13px; letter-spacing: 3px; color: var(--texte-2); }
.course-date .annee { display: block; color: var(--texte-3); font-size: 12px; }
.course-infos h2 { font-size: 24px; margin: 2px 0 4px; }
.course-infos h2 a { color: inherit; text-decoration: none; } .course-infos h2 a:hover { color: var(--rouge-vif); }
.course-infos .manche { color: var(--rouge-vif); font-family: var(--titre); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.course-infos p { color: var(--texte-2); font-size: 14px; }
.course-infos .notes { color: var(--texte-3); font-size: 13px; margin-top: 6px; }
@media (max-width: 760px) { .course { grid-template-columns: 70px 1fr; } .course > .podium, .course > .cote { grid-column: 1 / -1; } }

/* =====================================================================
   ESPACE STAFF
   ===================================================================== */
.onglets-staff { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; width: 100%; margin: 0; padding: 10px 32px; border-bottom: 1px solid var(--bordure); }
.onglets-staff a { color: var(--texte-2); text-decoration: none; font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: 4px; border-bottom: 2px solid transparent; }
.onglets-staff a:hover { color: var(--texte); background: rgba(255, 255, 255, 0.05); }
.onglets-staff a.actif { color: var(--texte); border-bottom-color: var(--rouge); border-radius: 0; }
.onglets-staff .famille { color: var(--texte-3); font-family: var(--titre); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--bordure-2); }
.onglets-staff .famille:empty { margin-left: auto; border: 0; padding: 0; }
.onglets-staff .onglet-droite { color: var(--texte-3); }
.admin-header { padding: 34px 0 18px; }
.admin-header h1 { font-size: 38px; margin: 8px 0 8px; }
.admin-header p { color: var(--texte-2); max-width: 900px; }
.admin-section { background: var(--panneau); border: 1px solid var(--bordure); border-radius: var(--rayon-grand); padding: 22px 24px; margin-bottom: 20px; }
.admin-section h2 { font-size: 20px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.admin-section h2::before { content: ""; width: 4px; height: 18px; background: var(--rouge); transform: skewX(-15deg); }
.admin-section .sous-section { border-top: 1px solid var(--bordure); margin-top: 20px; padding-top: 16px; }
.admin-infos p { color: var(--texte-2); }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.admin-panel { background: var(--panneau); border: 1px solid var(--bordure); border-radius: var(--rayon-grand); padding: 18px; display: flex; flex-direction: column; gap: 8px; transition: .2s; }
.admin-panel:hover { border-color: var(--rouge); }
.admin-panel h3 { font-size: 16px; }
.admin-panel p { color: var(--texte-2); font-size: 13px; flex: 1; }
.admin-panel .bouton { align-self: flex-start; padding: 8px 16px; font-size: 12px; box-shadow: none; }
.liste-alertes { list-style: none; margin: 0; padding: 0; }
.liste-alertes li { padding: 11px 0; border-bottom: 1px solid var(--bordure); display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 14px; }
.liste-alertes li:last-child { border-bottom: 0; }
.liste-alertes small { color: var(--texte-3); }

/* ---- Formulaires staff ---- */
.admin-form { display: grid; grid-template-columns: 1fr; gap: 12px 14px; align-items: end; }
.admin-form-2 { grid-template-columns: 2fr 1fr; } .admin-form-2 button { grid-column: span 2; }
.admin-form-3 { grid-template-columns: repeat(3, 1fr); } .admin-form-3 button { grid-column: span 3; }
.admin-form-4 { grid-template-columns: repeat(4, 1fr); } .admin-form-4 button { grid-column: span 4; }
.admin-form-params, .admin-form-roles { grid-template-columns: 1fr; } .admin-form-roles { grid-template-columns: 1fr 1fr 2fr; }
.admin-form .pleine-largeur, .admin-form .pleine-largeur-2 { grid-column: 1 / -1; }
.admin-form input, .admin-form select, .admin-form textarea, .auth-box input, .champ-param input, .champ-param select, .champ-param textarea {
    width: 100%; background: var(--panneau); color: var(--texte); border: 1px solid var(--bordure-2); border-radius: 4px; padding: 11px 13px; font-size: 14px; font-family: inherit; transition: border-color .2s, box-shadow .2s; }
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus, .auth-box input:focus, .champ-param input:focus, .champ-param select:focus, .champ-param textarea:focus, .filtres input:focus { border-color: var(--rouge); outline: none; box-shadow: 0 0 0 3px var(--rouge-ombre); }
.admin-form input::placeholder, .auth-box input::placeholder { color: var(--texte-3); }
.admin-form label.champ, .champ-param { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--texte-3); text-transform: uppercase; letter-spacing: 1px; font-family: var(--titre); }
.admin-form label.champ > span, .champ-param > span { font-family: var(--titre); }
.admin-form label.champ > input, .admin-form label.champ > select, .admin-form label.champ > textarea { font-family: var(--texte-police); text-transform: none; letter-spacing: 0; }
.admin-form label.case, label.case { display: flex; align-items: center; gap: 8px; color: var(--texte-2); font-size: 14px; font-family: var(--texte-police); text-transform: none; letter-spacing: 0; }
label.case input { width: auto; accent-color: var(--rouge); }
.admin-form button { justify-self: start; }
.admin-form .lien-annuler { justify-self: start; }
.champ-fichier { display: flex; flex-direction: column; gap: 6px; color: var(--texte-2); font-size: 13px; }
.champ-fichier input { padding: 8px; }
.champ-couleur { display: flex; align-items: center; gap: 10px; color: var(--texte-2); font-size: 13px; }
.champ-couleur input { width: 48px; height: 36px; padding: 2px; }
fieldset.droits { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 12px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; }
fieldset.droits legend { color: var(--texte-3); font-family: var(--titre); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 0 6px; }
.inline { display: inline; }
.admin-form-mfa .ligne { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.admin-form-mfa .ligne input { max-width: 220px; }
.qr { background: var(--panneau); border: 1px solid var(--bordure); padding: 10px; display: inline-block; border-radius: 8px; margin: 10px 0; }
.image-actuelle { max-height: 80px; border-radius: 4px; }

/* =====================================================================
   CONNEXION
   ===================================================================== */
.auth-page { min-height: calc(100vh - 70px); display: flex; align-items: center; justify-content: center; padding: 50px 16px; position: relative; isolation: isolate; }
.auth-page::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 0%, rgba(225, 6, 0, 0.25), transparent 60%), var(--fond); }
.auth-box { width: 100%; max-width: 440px; background: var(--panneau); border: 1px solid var(--bordure); border-top: 4px solid var(--rouge); border-radius: var(--rayon-grand); padding: 36px 36px 28px; box-shadow: var(--ombre); }
.auth-box-large { max-width: 560px; }
.auth-box h1 { font-size: 30px; margin: 10px 0 8px; }
.auth-description { color: var(--texte-2); font-size: 14px; margin-bottom: 20px; line-height: 1.6; }
.auth-box form { display: flex; flex-direction: column; gap: 12px; }
.auth-box label { color: var(--texte-3); font-family: var(--titre); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.auth-box button { width: 100%; margin-top: 6px; }
.auth-message { min-height: 20px; color: #ff8a8a; font-size: 14px; margin-top: 12px; }
.auth-link { margin-top: 16px; text-align: center; font-size: 13px; }
.auth-link a { color: var(--texte-2); } .auth-link a:hover { color: var(--texte); }
.auth-etape { color: var(--texte-3); font-size: 12px; }
.auth-box code { font-size: 15px; letter-spacing: 2px; }
.auth-page + footer { margin-top: 0; }

/* =====================================================================
   ARTICLE
   ===================================================================== */
.article { max-width: 820px; margin: 0 auto; }
.article h1 { font-size: 40px; margin: 10px 0 12px; }
.article-meta { color: var(--texte-3); font-size: 13px; margin-bottom: 18px; }
.article-image { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--rayon-grand); margin: 10px 0 24px; }
.article-resume { color: var(--texte-2); font-size: 18px; line-height: 1.6; margin-bottom: 20px; }
.article-contenu p { color: #d0d0d6; line-height: 1.8; margin-bottom: 16px; font-size: 16px; }

/* =====================================================================
   PIED DE PAGE
   ===================================================================== */
footer { margin-top: 40px; padding: 40px 24px 30px; background: #02030a; border-top: 1px solid var(--bordure); text-align: center; color: var(--texte-3); font-size: 13px; }
footer .reseaux { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
footer .reseaux a { color: var(--texte); text-decoration: none; background: var(--panneau); border: 1px solid var(--bordure-2); padding: 7px 14px; border-radius: 4px; font-family: var(--titre); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
footer .reseaux a:hover { border-color: var(--rouge); }
footer .liens-pied { margin: 10px 0 14px; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
footer .liens-pied a { color: var(--texte-2); text-decoration: none; }
footer .liens-pied a:hover { color: var(--texte); }
footer a { color: var(--texte-2); }

/* ---- Accessibilité ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--rouge-vif); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }

/* =====================================================================
   TÉLÉPHONE — règles finales (après tout le reste pour l'emporter)
   ===================================================================== */
@media (max-width: 600px) {
    .podium-grand { flex-direction: column; align-items: stretch; } .podium-grand .marche { order: initial !important; padding-top: 14px !important; min-width: 0; }
    .actu-ligne time { display: none; } .actu-ligne .chevron { display: none; }
    .carte-resultat { flex-wrap: wrap; } .carte-resultat .podium-chips { margin-left: 0; width: 100%; flex-wrap: wrap; } .carte-resultat .chevron-droite { display: none; }
    .calendrier-cartes > * { flex-basis: 220px; } .calendrier-cartes { margin-right: -14px; padding-right: 14px; }
    .titre-section-ligne { flex-direction: column; align-items: flex-start; gap: 4px; }
    .page-section h2, .admin-section h2 { font-size: 18px; } .accueil-grille h2 { font-size: 14px; }
    .stats-tuiles, .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .course { grid-template-columns: 56px minmax(0, 1fr); } .course-date .jour { font-size: 30px; }
    .auth-page { min-height: 0; padding: 24px 12px 40px; align-items: flex-start; } .auth-box { padding: 26px 20px 22px; }
    .filtres input, .filtres select { min-width: 0; width: 100%; } .filtres > * { flex: 1 1 100%; }
    .metas { gap: 10px 0; }
    footer .reseaux { gap: 6px; } footer .reseaux a { font-size: 11px; padding: 6px 10px; }
    .podium-grand .marche { width: 100%; margin: 0; }
    .bloc-prochain-gp .texte { padding: 16px 14px 18px; }
    .nav-manches { flex-direction: column; gap: 6px; }
}

/* =====================================================================
   FINITION « ESTHÉTIQUE LÉCHÉE » (Porsche / Ferrari) : rythme, transitions, détails
   ===================================================================== */
body { letter-spacing: 0.1px; }
h1, h2, h3 { letter-spacing: 1px; }
.page-section, .accueil-grille, .tuiles, .chiffres, .bloc-prochain-gp, .mise-en-avant { margin-bottom: 56px; }
.page-section + .page-section { padding-top: 48px; }
.titre-section-ligne { padding-bottom: 14px; margin-bottom: 22px; }
.page-section h2, .accueil-grille h2 { font-family: var(--texte-police); font-weight: 800; letter-spacing: 2px; font-size: 14px; }
.page-section h2::before, .admin-section h2::before { width: 22px; height: 2px; transform: none; }
.lien-discret { font-family: var(--texte-police); text-transform: uppercase; letter-spacing: 2px; font-size: 11px; font-weight: 700; color: var(--texte); display: inline-flex; align-items: center; gap: 8px; }
.lien-discret:hover { color: var(--texte); }
.lien-discret::after { content: "→"; transition: transform .3s; }
.lien-discret:hover::after { transform: translateX(4px); }
.bouton, .bouton-secondaire, .carte, .carte-gp, .tuile, .actu-ligne, .carte-resultat, .pastille-lien, .stat-tuile, .encadre { transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s, box-shadow .35s, background .35s, color .35s; }
.bouton:hover, .bouton-secondaire:hover { transform: translateY(-2px); }
.bouton .ico, .bouton-secondaire .ico { transition: transform .3s; }
.bouton:hover .ico, .bouton-secondaire:hover .ico { transform: translateX(4px); }
.tuile .image { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.tuile:hover .image { transform: scale(1.04); }
.tuile { overflow: hidden; }
.tuile .rond .ico { transition: transform .3s; }
.tuile:hover .rond .ico { transform: translateX(4px); }
.carte-gp:hover, .carte:hover, .actu-ligne:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.hero .logo-geant, .hero .duel-logos, .hero .accroche, .hero .valeurs, .hero .actions { animation: apparition .9s cubic-bezier(.2, .8, .2, 1) both; }
.hero .accroche { animation-delay: .15s; } .hero .valeurs { animation-delay: .3s; } .hero .actions { animation-delay: .45s; }
@keyframes apparition { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.reveler { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); }
.reveler.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveler { opacity: 1; transform: none; } .hero .logo-geant, .hero .accroche, .hero .valeurs, .hero .actions { animation: none; } }
table.classement td.points { letter-spacing: .5px; }
footer { padding-top: 56px; }
footer .liens-pied a { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; }
header nav a { letter-spacing: 1.6px; }
img { image-rendering: auto; }

/* =====================================================================
   ACCUEIL « DUEL » (Paramètres → Bandeau de l'accueil = dégradé) : dégradé bleu → rouge animé, sans photo.
   Moitié gauche = F2 (bleu), moitié droite = F1 (rouge). Au survol (souris) ou au toucher (téléphone, appli),
   script.js pose data-cote="f2|f1" sur le bandeau ET sur <body> : la couleur envahit le bandeau (voile circulaire),
   le logo et le texte changent, les boutons s'allument, et l'accent du site passe au bleu côté F2.
   ===================================================================== */
.hero.hero-duel { border-bottom: 0; padding-top: 72px; padding-bottom: 64px; min-height: min(680px, 82vh); cursor: default; touch-action: pan-y; }   /* pan-y : le glissement horizontal sert à changer de couleur, le défilement vertical reste au navigateur */
.hero.hero-duel::before { background: linear-gradient(90deg, #026ed7 0%, #026ed7 8%, #f82202 92%, #f82202 100%); filter: none; animation: duel-respiration 9s ease-in-out infinite alternate; }   /* dégradé entier, jamais déplacé ni zoomé */
.hero.hero-duel::after { background: linear-gradient(180deg, rgba(4, 6, 13, 0) 0%, rgba(4, 6, 13, 0) 72%, var(--fond) 100%); }
@keyframes duel-respiration { from { filter: saturate(1) brightness(1); } to { filter: saturate(1.2) brightness(1.08); } }
.duel-zone { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1; display: block; -webkit-tap-highlight-color: transparent; outline: none; }
.duel-zone-f2 { left: 0; } .duel-zone-f1 { right: 0; }
.duel-fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.duel-voile { position: absolute; inset: 0; transition: clip-path 1s cubic-bezier(0.22, 0.8, 0.3, 1); }
.duel-voile-f2 { background: radial-gradient(circle at 25% 45%, #3a95ff 0%, #026ed7 42%, #033f93 100%); clip-path: circle(0% at 12% 50%); }
.duel-voile-f1 { background: radial-gradient(circle at 75% 45%, #ff6a4a 0%, #f82202 42%, #8f1000 100%); clip-path: circle(0% at 88% 50%); }
.hero-duel[data-cote="f2"] .duel-voile-f2 { clip-path: circle(160% at 12% 50%); }
.hero-duel[data-cote="f1"] .duel-voile-f1 { clip-path: circle(160% at 88% 50%); }
/* Champ d'étoiles en vitesse lumière : visible dès qu'une moitié est active, file vers l'extérieur du côté choisi */
.duel-etoiles { position: absolute; inset: -10%; opacity: 0; transition: opacity 0.6s; mix-blend-mode: screen;
    background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 70% 60%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 45% 80%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 85% 15%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 10% 70%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 55% 25%, #fff 50%, transparent 51%);
    background-size: 260px 260px, 200px 200px, 320px 320px, 180px 180px, 240px 240px, 150px 150px; }
.hero-duel[data-cote] .duel-etoiles { opacity: 0.9; }
.hero-duel[data-cote="f2"] .duel-etoiles { animation: duel-etoiles-droite 1.2s linear infinite; }
.hero-duel[data-cote="f1"] .duel-etoiles { animation: duel-etoiles-gauche 1.2s linear infinite; }
@keyframes duel-etoiles-droite { to { background-position: 520px 0, 400px 0, 640px 0, 360px 0, 480px 0, 300px 0; } }
@keyframes duel-etoiles-gauche { to { background-position: -520px 0, -400px 0, -640px 0, -360px 0, -480px 0, -300px 0; } }
/* Onde de choc au basculement + traînées lumineuses obliques */
.duel-onde { position: absolute; top: 50%; width: 40vmax; height: 40vmax; margin: -20vmax 0 0 -20vmax; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.7); opacity: 0; transform: scale(0.1); }
.hero-duel[data-cote="f2"] .duel-onde { left: 12%; animation: duel-onde 1.1s ease-out; }
.hero-duel[data-cote="f1"] .duel-onde { left: 88%; animation: duel-onde 1.1s ease-out; }
@keyframes duel-onde { 0% { opacity: 0.9; transform: scale(0.1); } 100% { opacity: 0; transform: scale(2.6); } }
.duel-eclat { position: absolute; top: -30%; bottom: -30%; width: 22%; left: -40%; transform: skewX(-22deg); opacity: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 100%); }
.hero-duel[data-cote="f2"] .duel-eclat { animation: duel-eclat-droite 1.3s cubic-bezier(0.4, 0, 0.2, 1); }
.hero-duel[data-cote="f1"] .duel-eclat { animation: duel-eclat-gauche 1.3s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes duel-eclat-droite { 0% { left: -40%; opacity: 1; } 100% { left: 130%; opacity: 0; } }
@keyframes duel-eclat-gauche { 0% { left: 130%; opacity: 1; } 100% { left: -40%; opacity: 0; } }
/* Contenu : laisse passer les touchers vers les moitiés, sauf sur les liens */
.duel-contenu { position: relative; z-index: 2; pointer-events: none; }
.duel-contenu a { pointer-events: auto; }
.duel-logos { position: relative; width: min(620px, 88vw); aspect-ratio: 5 / 2; margin-bottom: 10px; }
.duel-logos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; filter: drop-shadow(0 14px 40px rgba(0, 0, 0, 0.45));
    transition: opacity 0.55s ease, transform 0.8s cubic-bezier(0.22, 0.8, 0.3, 1), filter 0.55s ease; }
.duel-logos .logo-f1, .duel-logos .logo-f2 { opacity: 0; transform: scale(0.6) translateY(30px); filter: blur(14px); }
.hero-duel[data-cote] .duel-logos .logo-base { opacity: 0; transform: scale(1.2); filter: blur(12px); }
.hero-duel[data-cote="f2"] .duel-logos .logo-f2, .hero-duel[data-cote="f1"] .duel-logos .logo-f1 { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 0 34px rgba(255, 255, 255, 0.5)); }
.duel-pile { display: grid; }
.duel-pile > span { grid-area: 1 / 1; transition: opacity 0.45s ease, transform 0.6s ease; }
.duel-pile .texte-f1, .duel-pile .texte-f2 { opacity: 0; transform: translateY(12px); }
.hero-duel[data-cote] .duel-pile .texte-base { opacity: 0; transform: translateY(-12px); }
.hero-duel[data-cote="f2"] .duel-pile .texte-f2, .hero-duel[data-cote="f1"] .duel-pile .texte-f1 { opacity: 1; transform: none; }
.hero-duel .accroche, .hero-duel .valeurs { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4); }
.hero-duel .valeurs span::after, .hero-duel .valeurs span:first-child::after { background: rgba(255, 255, 255, 0.85); }
.hero-duel .actions .bouton { border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: transform 0.4s ease, opacity 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease; }
.hero-duel .actions .bouton-f2 { background: #026ed7; } .hero-duel .actions .bouton-f2:hover { background: #2b8cff; }
.hero-duel .actions .bouton-f1 { background: #f82202; } .hero-duel .actions .bouton-f1:hover { background: #ff4a2e; }
.hero-duel[data-cote="f2"] .actions .bouton-f2, .hero-duel[data-cote="f1"] .actions .bouton-f1 { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 14px 40px rgba(0, 0, 0, 0.45); }
.hero-duel[data-cote="f2"] .actions .bouton-f1, .hero-duel[data-cote="f1"] .actions .bouton-f2 { opacity: 0.55; }
.hero-duel .actions .bouton-secondaire { border-color: rgba(255, 255, 255, 0.85); background: rgba(4, 6, 13, 0.35); backdrop-filter: blur(6px); }
/* Le reste du site suit la couleur : accent bleu côté F2, halo de couleur en haut de page */
body[data-cote="f2"] { --rouge: #026ed7; --rouge-vif: #2b8cff; --rouge-fonce: #0354a6; --rouge-ombre: rgba(2, 110, 215, 0.35); --rouge-pale: rgba(2, 110, 215, 0.14); }
body[data-cote] { background-image: radial-gradient(ellipse at 50% 0%, var(--rouge-ombre), transparent 60%); background-attachment: fixed; }
@media (max-width: 700px) {
    .hero.hero-duel { text-align: center; align-items: center; padding: 44px 18px 40px; min-height: 560px; }
    .duel-logos { width: min(360px, 86vw); margin: 0 auto 12px; }
    .duel-logos img { object-position: center; }
    .hero-duel .valeurs, .hero-duel .actions { justify-content: center; }
    .hero-duel .actions { width: 100%; }
    .hero-duel .actions a { flex: 1 1 100%; justify-content: center; }
    .duel-onde { width: 90vmax; height: 90vmax; margin: -45vmax 0 0 -45vmax; }
}
@media (prefers-reduced-motion: reduce) {
    .hero.hero-duel::before, .duel-etoiles, .duel-onde, .duel-eclat { animation: none !important; }
    .duel-voile, .duel-logos img, .duel-pile > span { transition-duration: 0.2s; }
}