/* ==========================================================================
   OCCITEAM — CHARTE GRAPHIQUE UNIQUE
   Ce fichier est la seule source des couleurs, polices, du logo et de l'en-tête /
   pied de page. Il est copié tel quel dans le site WordPress, inscription. et
   resultats. (script charte/appliquer_charte.py) : on le modifie ICI, une seule fois.
   ========================================================================== */

:root{
  /* --- COULEURS PRINCIPALES ------------------------------------------------ */
  --accent:#E0492B;          /* couleur de marque (boutons, dossard, liens actifs) */
  --accent-strong:#B93A21;   /* accent au survol */
  --accent-ink:#FFFFFF;      /* texte posé sur l'accent */
  --accent-soft:#FBE4DD;     /* fond clair teinté accent (bandeaux) */

  /* --- NEUTRES -------------------------------------------------------------- */
  --bg:#F4F6F5;              /* fond des pages */
  --surface:#FFFFFF;         /* fond des cartes / panneaux */
  --surface-2:#EAEFEC;       /* fond secondaire (survols, en-têtes de tableau) */
  --border:#DCE3DF;
  --ink:#12181A;             /* texte principal */
  --ink-soft:#3E4A46;
  --muted:#6B7671;
  --focus:#1F6E76;           /* anneau de focus des champs */

  /* --- TYPES D'ÉPREUVES (pastilles) ---------------------------------------- */
  --road:#4C5B6B; --trail:#4B6B3A; --swimrun:#1F6E76; --triathlon:#5A4B8C;

  /* --- ÉTATS ----------------------------------------------------------------- */
  --ok:#2E7D4F;     --ok-soft:#E1F1E6;
  --warn:#946417;   --warn-soft:#FBEED9;
  --danger:#B93A21; --danger-soft:#FBE4DD;

  /* --- FORMES ---------------------------------------------------------------- */
  --radius:14px;
  --shadow:0 1px 2px rgba(18,24,26,.06), 0 10px 28px -14px rgba(18,24,26,.22);

  /* --- POLICES (changer ici ET dans fonts_url de brand_config.php) ---------- */
  --font-display:"Barlow Condensed",system-ui,sans-serif;  /* titres */
  --font-body:"Work Sans",system-ui,sans-serif;            /* texte */
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;      /* chiffres, dossards */

  /* --- LOGO ------------------------------------------------------------------ */
  --logo-height:44px;        /* hauteur du logo image (quand un logo est défini) */
}

/* ---------- En-tête commun ---------- */
header.site{max-width:1120px; margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:20px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;}
.brand img.logo{height:var(--logo-height); width:auto; display:block;}
/* Pastille « dossard » : sert de logo tant qu'aucune image n'est définie */
.bib{position:relative; display:inline-block; background:var(--accent); color:var(--accent-ink); font-family:var(--font-display); font-weight:800; font-size:1.05rem; letter-spacing:.04em; text-transform:uppercase; padding:6px 12px 6px 14px; border-radius:6px; transform:rotate(-3deg); box-shadow:var(--shadow); text-decoration:none;}
.brand small{font-size:.75rem; color:var(--muted); font-weight:600;}
nav.site{display:flex; gap:4px; flex-wrap:wrap;}
nav.site a{padding:8px 14px; border-radius:999px; text-decoration:none; font-weight:600; font-size:.8125rem; color:var(--ink-soft);}
nav.site a:hover{background:var(--surface-2);}
nav.site a.current{background:var(--ink); color:var(--bg);}
@media (max-width:720px){
  header.site{flex-direction:column; align-items:flex-start; gap:10px; padding-block:14px;}
  nav.site{gap:2px; margin-inline:-6px;}
  nav.site a{padding:7px 11px;}
}

/* ---------- Pied de page commun ---------- */
footer.site{max-width:1120px; margin-inline:auto; padding-block:28px; margin-top:24px; border-top:1px solid var(--border); color:var(--muted); font-size:.8125rem; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
footer.site a{color:inherit;}