/* ============================================================
   KARTA RACING — Socle commun (à charger sur toutes les pages)
   Déploiement : déposer ce fichier à la RACINE du site, puis
   ajouter dans chaque page <link rel="stylesheet" href="/karta.css">
   ============================================================ */

:root{
  /* Palette */
  --red:#C8102E;
  --white:#F2EFE8;
  --white-dim:#A09A90;
  --black:#08080A;
  --black-mid:#111115;
  --black-surface:#16161C;
  --black-card:#1C1C24;
  --black-border:rgba(242,239,232,0.08);

  /* Typo */
  --mono:'Share Tech Mono', monospace;
  --cond:'Barlow Condensed', sans-serif;
  --body:'Barlow', sans-serif;

  /* Système de mise en page — la clé de l'homogénéité */
  --pad-x:clamp(24px, 5vw, 80px);         /* gouttière latérale fluide (mobile -> desktop) */
  --measure:68ch;                         /* largeur max d'une colonne de texte (~66 caractères) */
  --section-y:clamp(56px, 8vw, 100px);     /* rythme vertical des sections */
  --hero-top:clamp(104px, 12vw, 140px);   /* dégagement sous la barre de nav fixe */

  /* Point de bascule responsive unique */
  --bp:1024px;
}

/* Disposition pleine largeur : sections bord à bord, calées sur une gouttière fixe.
   Modèle repris de l'index de référence — aucune largeur maximale centrée. */
.bleed-center,
nav, footer, .page-hero{
  padding-inline:var(--pad-x);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--black); color:var(--white);
  font-family:var(--body); min-height:100vh;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}

/* ---------------- NAVIGATION (sous-pages) ---------------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding-block:14px;
  background:rgba(8,8,10,0.94); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--black-border);
}
.nav-logo{
  font-family:var(--cond); font-weight:900; font-size:20px;
  text-transform:uppercase; letter-spacing:0.06em;
  color:var(--white); text-decoration:none;
}
.nav-logo span{ color:var(--red); }
.nav-back{
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--white-dim);
  text-decoration:none; display:flex; align-items:center; gap:8px;
  transition:color .2s;
}
.nav-back::before{ content:'←'; }
.nav-back:hover{ color:var(--white); }
.lang-controls{ display:flex; gap:4px; }
.lang-btn{
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em;
  color:var(--white-dim); background:none;
  border:1px solid transparent; padding:5px 12px;
  cursor:pointer; transition:all .2s; text-transform:uppercase;
}
.lang-btn.active{ color:var(--white); border-color:rgba(242,239,232,0.25); }
.lang-btn:hover{ color:var(--white); }
.lang-btn:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

/* ---------------- HERO (sous-pages) ---------------- */
.page-hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--black-border);
  padding-top:var(--hero-top);
  padding-bottom:var(--section-y);
}
.page-hero-bg{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 0% 50%, rgba(200,16,46,0.06), transparent);
}
.grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(242,239,232,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,239,232,0.012) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
}
.page-hero-content{ position:relative; z-index:1; max-width:760px; }

.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em;
  color:var(--red); text-transform:uppercase; margin-bottom:16px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow.bar::before{ content:''; display:block; width:28px; height:1px; background:var(--red); }
.dot-live{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--red); animation:pulse-dot 1.4s ease-in-out infinite;
  vertical-align:middle;
}
@keyframes pulse-dot{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.8);} }
.check-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border:1px solid var(--red); border-radius:50%;
  font-size:10px; color:var(--red);
}
.page-title{
  font-family:var(--cond); font-weight:900;
  font-size:clamp(46px, 7vw, 78px); line-height:0.95;
  text-transform:uppercase; margin-bottom:20px;
}
.page-title span{ color:var(--red); display:block; }
.page-desc{
  font-size:16px; font-weight:300; line-height:1.7;
  color:var(--white-dim); max-width:var(--measure);
}
.page-desc strong{ color:var(--white); font-weight:500; }

/* ---------------- CONTENU DES SOUS-PAGES (pleine largeur) ----------------
   Comme l'index de référence : pleine largeur + gouttière, pas de plafond.
   Seuls les blocs de TEXTE sont bridés (--measure) pour rester lisibles.   */
.body-section,
.form-section,
.legal{
  width:100%;
  padding-inline:var(--pad-x);
  padding-block:var(--section-y);
}

/* ---------------- FOOTER (base commune) ---------------- */
footer{
  border-top:1px solid var(--black-border);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
  padding-block:32px;
}
.footer-brand{
  font-family:var(--cond); font-weight:900; font-size:20px;
  text-transform:uppercase; letter-spacing:0.05em;
}
.footer-brand span{ color:var(--red); }
.footer-copy{
  font-family:var(--mono); font-size:10px; letter-spacing:0.06em;
  color:rgba(160,154,144,0.35); text-transform:uppercase;
}

/* ---------------- Utilitaire de langue ---------------- */
.lang-fr .en{ display:none; }
.lang-en .fr{ display:none; }

/* ---------------- Accessibilité : mouvement réduit ---------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}