/* ============================================================
   THEME.CSS — CHRONORALLYERACE
   Style commun à toutes les pages de la plateforme.

   Pour changer l'apparence PARTOUT d'un coup, modifie les
   variables de la section :root ci-dessous. Un seul endroit.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* ── COULEURS (change ici → change partout) ── */
  --asphalt:#0e1013;      /* fond principal de la page       */
  --asphalt-2:#15181d;    /* fond des cartes et des blocs     */
  --line:#2a2f37;         /* traits, bordures, séparateurs    */
  --fog:#8b929c;          /* texte secondaire (gris)          */
  --paper:#eceef1;        /* texte principal (clair)          */
  --accent:#f97316;       /* ORANGE — l'accent de toute la plateforme */
  --accent-soft:#fdba74;  /* orange clair (survols doux)      */
  --red:#dc2626;          /* rouge — réservé aux alertes / abandons */

  /* ── FORMES ── */
  --radius:12px;          /* arrondi des cartes et des blocs  */

  /* ── ÉCRITURES ── */
  --font-titre:"Chakra Petch",sans-serif;   /* tous les titres */
  --font-corps:"Space Mono",monospace;      /* le corps de texte */
}

/* ── Reset léger ── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

/* ── Fond de page + texture asphalte ── */
body{
  background:var(--asphalt);
  color:var(--paper);
  font-family:var(--font-corps);
  line-height:1.5;
  min-height:100%;
  background-image:
    radial-gradient(circle at 15% 8%, rgba(249,115,22,.07), transparent 42%),
    radial-gradient(circle at 92% 90%, rgba(249,115,22,.05), transparent 46%);
}

/* ============================================================
   TITRES
   Les balises h1/h2/h3 prennent automatiquement Chakra Petch.
   Utilise .titre-xl pour un très gros titre, .titre-accent
   pour colorer un mot en orange.
   ============================================================ */
h1,h2,h3,.titre{
  font-family:var(--font-titre);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.05;
}
.titre-xl{
  font-family:var(--font-titre);font-weight:700;text-transform:uppercase;
  font-size:clamp(34px,7vw,60px);line-height:.98;letter-spacing:.01em;
}
.titre-accent{color:var(--accent)}

/* ── Sur-titre (petit label au-dessus d'un titre) ── */
.eyebrow{
  font-family:var(--font-corps);
  font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent);
}

/* ============================================================
   EN-TÊTE DE SITE
   ============================================================ */
.site-header{
  border-bottom:1px solid var(--line);
  padding:22px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.mark{font-family:var(--font-titre);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:18px}
.mark span{color:var(--accent)}
.tc{font-family:var(--font-corps);font-size:11px;color:var(--fog);letter-spacing:.18em;text-transform:uppercase}

/* ============================================================
   CARTE STANDARD
   Coins arrondis, cadre orange qui s'allume + léger zoom au survol.
   Structure attendue :
     <a class="card">
       <span class="num">/ 01</span>
       <h2>Titre</h2>
       <p>Description.</p>
       <span class="go">Entrer <span class="chev">→</span></span>
     </a>
   ============================================================ */
.card{
  position:relative;display:block;text-decoration:none;color:inherit;
  background:var(--asphalt-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px 22px;
  overflow:hidden;
  transition:transform .2s ease, border-color .2s ease;
}
.card::after{
  content:"";position:absolute;inset:0;
  border:1.5px solid transparent;border-radius:var(--radius);
  transition:border-color .2s ease;pointer-events:none;
}
.card:hover,.card:focus-visible{transform:scale(1.03);border-color:var(--accent);outline:none}
.card:hover::after,.card:focus-visible::after{border-color:rgba(249,115,22,.4)}

.card .num{font-family:var(--font-titre);font-size:12px;letter-spacing:.2em;color:var(--fog)}
.card h2{font-size:23px;margin:14px 0 8px}
.card p{color:var(--fog);font-size:12px;line-height:1.55}

.go{
  margin-top:18px;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-titre);text-transform:uppercase;letter-spacing:.1em;
  font-size:13px;color:var(--accent);
}
.go .chev{transition:transform .2s ease}
.card:hover .go .chev,.card:focus-visible .go .chev{transform:translateX(6px)}

/* ── Grille prête à l'emploi pour aligner des cartes ── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}

/* ============================================================
   BOUTONS
   .btn = bouton sobre ; ajoute .btn-primary pour l'orange plein.
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-titre);text-transform:uppercase;letter-spacing:.08em;
  font-size:14px;font-weight:600;
  padding:11px 22px;border-radius:var(--radius);
  border:1px solid var(--line);background:transparent;color:var(--paper);
  cursor:pointer;transition:border-color .18s ease, background .18s ease, transform .12s ease;
}
.btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#141414}
.btn-primary:hover{background:var(--accent-soft);border-color:var(--accent-soft)}

/* ============================================================
   BULLE D'INFO AU SURVOL (tooltip)
   Structure attendue :
     <span class="tip">Nom
       <span class="bulle">
         <span class="b-name">Nom</span>
         <span class="b-row">Info : <b>valeur</b></span>
       </span>
     </span>
   ============================================================ */
.tip{position:relative;cursor:help;color:var(--paper);border-bottom:1px dashed var(--accent);padding-bottom:1px}
.bulle{
  position:absolute;left:50%;bottom:calc(100% + 12px);
  transform:translateX(-50%) translateY(6px);
  width:210px;opacity:0;pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  font-family:var(--font-corps);text-align:left;z-index:20;
  background:#1b1f26;border:1px solid rgba(249,115,22,.45);
  border-radius:10px;box-shadow:0 10px 26px -8px rgba(0,0,0,.6);
  padding:11px 13px;
}
.bulle::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#1b1f26}
.tip:hover .bulle{opacity:1;transform:translateX(-50%) translateY(0)}
.bulle .b-name{font-family:var(--font-titre);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:13px;color:var(--accent);margin-bottom:5px}
.bulle .b-row{font-size:11px;color:var(--fog);line-height:1.7}
.bulle .b-row b{color:var(--paper);font-weight:400}


/* ── Logo cliquable : retour au menu ── */
.mark,.brand,.hdr-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
a.mark,a.brand,a.hdr-logo{cursor:pointer;transition:opacity .15s}
a.mark:hover,a.brand:hover,a.hdr-logo:hover{opacity:.82}
.brand-logo{height:48px;width:auto;flex-shrink:0;display:block}
.brand-txt{font-family:var(--font-titre);font-weight:700;letter-spacing:.08em;font-size:20px;line-height:1;text-transform:uppercase;color:#fff}
.brand-txt .c1{color:#fff}
.brand-txt .c2{color:#F57C00}
.brand-txt .c3{color:#fff}
@media(max-width:600px){.brand-logo{height:40px}.brand-txt{font-size:17px}}

/* ── Accessibilité : couper les animations si l'utilisateur le demande ── */
@media (prefers-reduced-motion:reduce){ *{transition:none !important} }