/* ── colors.css ── */
/* ASBB — couleurs. Valeurs de base + alias sémantiques.
   Règle absolue : l'Or ne s'utilise JAMAIS en aplat, uniquement en dégradé. */
:root{
  /* ── Base ───────────────────────────────────────────────────────────── */
  --noir:#070707;
  --gris-fonce:#1C1C1E;
  --gris:#8A8A8E;
  --gris-clair:#D4D4D6;
  --blanc:#FFFFFF;
  --blanc-casse:#F5F4F2;
  --rouge:#E7011D;
  --rouge-fonce:#8C0012;
  --or-clair:#D6BB80;
  --or-fonce:#917844;

  /* ── Dégradés ───────────────────────────────────────────────────────── */
  --or:linear-gradient(135deg,#D6BB80 0%,#917844 100%); /* @kind color */
  --grad-rouge:linear-gradient(135deg,#E7011D 0%,#8C0012 100%); /* @kind color */
  --grad-sombre:linear-gradient(180deg,#070707 0%,#1C1C1E 100%); /* @kind color */
  --grad-verre:linear-gradient(145deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 100%); /* @kind color */

  /* ── Surfaces ───────────────────────────────────────────────────────── */
  --surface-page:var(--noir);
  --surface-card:var(--gris-fonce);
  --surface-eleve:#242427;
  --surface-claire:var(--blanc-casse);
  --surface-inverse:var(--blanc);

  /* ── Texte ──────────────────────────────────────────────────────────── */
  --texte-titre:var(--blanc);
  --texte-corps:var(--gris-clair);
  --texte-secondaire:var(--gris);
  --texte-accent:var(--rouge);
  --texte-sur-rouge:var(--blanc);
  --texte-sur-or:var(--noir);
  --texte-sur-clair:var(--noir);
  --texte-corps-clair:#3A3A3C;
  --texte-secondaire-clair:#6C6C70;

  /* ── Bordures et séparations ────────────────────────────────────────── */
  --bordure:rgba(255,255,255,.10);
  --bordure-forte:rgba(255,255,255,.22);
  --bordure-claire:rgba(7,7,7,.12);
  --bordure-outline:var(--gris-clair);
  --separateur:rgba(255,255,255,.08);

  /* ── États ──────────────────────────────────────────────────────────── */
  --rouge-hover:#F51A35;
  --rouge-press:#BB0118;
  --focus-ring:var(--rouge);
  --disabled-fg:var(--gris);
  --disabled-bg:var(--gris-fonce);
  --disabled-opacity:.6; /* @kind other */

  /* ── Sémantique état de match ───────────────────────────────────────── */
  --live:var(--rouge);
  --victoire:#3FBF6A;
  --defaite:var(--gris);
}

/* ── typography.css ── */
/* ASBB — typographie. Winner Sans pour tout ce qui titre, Satoshi pour tout ce qui se lit. */
:root{
  --display:'Winner Sans','Helvetica Neue',Arial,sans-serif; /* @kind font */
  --texte:'Satoshi','Helvetica Neue',Arial,sans-serif; /* @kind font */
  --display-wide:'Winner Sans Wide',var(--display); /* @kind font */
  --display-narrow:'Winner Sans Cond',var(--display); /* @kind font */
  --display-ultra:'Winner Sans Comp',var(--display); /* @kind font */

  /* Graisses */
  --w-gros-titre:700; /* @kind font */ /* Winner Sans Bold */
  --w-petit-titre:500; /* @kind font */ /* Winner Sans Medium */
  --w-corps:400; /* @kind font */ /* Satoshi Regular */
  --w-corps-fort:700; /* @kind font */

  /* Échelle — desktop */
  --fs-h1:64px; /* @kind font */
  --fs-h1-min:56px; /* @kind font */
  --fs-h1-max:72px; /* @kind font */
  --fs-h2:40px; /* @kind font */
  --fs-h3:26px; /* @kind font */
  --fs-h4:17px; /* @kind font */
  --fs-corps:17px; /* @kind font */
  --fs-corps-lg:19px; /* @kind font */
  --fs-petit:13.5px; /* @kind font */
  --fs-bouton:15px; /* @kind font */
  --fs-pill:12px; /* @kind font */

  /* Interlignes */
  --lh-titre:.94; /* @kind font */
  --lh-h3:1.15; /* @kind font */
  --lh-corps:1.55; /* @kind font */
  --lh-corps-long:1.6; /* @kind font */
  --lh-petit:1.45; /* @kind font */

  /* Tracking — les titres Winner Sans se resserrent, les petites capitales s'ouvrent */
  --ls-h1:-.02em; /* @kind font */
  --ls-h2:-.015em; /* @kind font */
  --ls-h3:0em; /* @kind font */
  --ls-surtitre:.14em; /* @kind font */
  --ls-bouton:.06em; /* @kind font */
  --ls-pill:.09em; /* @kind font */
  --ls-corps:0em; /* @kind font */
}

/* ── spacing.css ── */
/* ASBB — espacement. Échelle 8px stricte. */
:root{
  --s-1:4px;
  --s-2:8px;
  --s-3:16px;
  --s-4:24px;
  --s-5:32px;
  --s-6:48px;
  --s-7:64px;
  --s-8:96px;
  --s-9:128px;

  /* Rythme vertical des sections */
  --section-y:96px; /* @kind spacing */
  --section-y-large:128px; /* @kind spacing */
  --section-y-compact:64px; /* @kind spacing */

  /* Gouttières et conteneurs */
  --gap-card:24px;
  --gap-grille:24px;
  --pad-card:24px;
  --pad-card-lg:32px;
  --conteneur:1240px; /* @kind spacing */
  --conteneur-texte:720px; /* @kind spacing */
  --marge-page:24px;
  --header-h:76px; /* @kind spacing */
}

/* ── effects.css ── */
/* ASBB — rayons, ombres, mouvement. Net et contrasté, jamais glossy. */
:root{
  /* Rayons */
  --r-sm:6px; /* @kind radius */
  --r-md:10px; /* @kind radius */
  --r-lg:16px; /* @kind radius */
  --r-pill:999px; /* @kind radius */

  /* Épaisseurs de trait */
  --trait-fin:1px; /* @kind spacing */
  --trait-outline:1.5px; /* @kind spacing */
  --trait-fort:2px; /* @kind spacing */

  /* Ombres — discrètes, elles posent la profondeur sans halo coloré diffus */
  --ombre-sm:0 1px 2px rgba(0,0,0,.45); /* @kind shadow */
  --ombre-md:0 8px 24px rgba(0,0,0,.45); /* @kind shadow */
  --ombre-lg:0 24px 64px rgba(0,0,0,.55); /* @kind shadow */
  --ombre-rouge:0 8px 24px rgba(231,1,29,.28); /* @kind shadow */
  --ombre-interne:inset 0 1px 0 rgba(255,255,255,.06); /* @kind shadow */

  /* Gradients de protection — texte posé sur photo */
  --protection-bas:linear-gradient(180deg,rgba(7,7,7,0) 0%,rgba(7,7,7,.35) 45%,rgba(7,7,7,.92) 100%); /* @kind color */
  --protection-haut:linear-gradient(180deg,rgba(7,7,7,.85) 0%,rgba(7,7,7,0) 100%); /* @kind color */

  /* Mouvement */
  --dur-rapide:120ms; /* @kind other */
  --dur:180ms; /* @kind other */
  --dur-lente:320ms; /* @kind other */
  --ease:cubic-bezier(.2,.6,.2,1); /* @kind other */
  --ease-sortie:cubic-bezier(.4,0,1,1); /* @kind other */

  /* Flou */
  --flou-header:saturate(140%) blur(14px); /* @kind other */
}

/* ── base.css ── */
/* ASBB — socle : reset léger, défauts de type, liens, focus, utilitaires Or. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--texte-corps);font-family:var(--texte);font-weight:var(--w-corps);font-size:var(--fs-corps);line-height:var(--lh-corps);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--texte-titre);font-family:var(--display-narrow);font-weight:700;text-wrap:balance}
h1{font-weight:var(--w-gros-titre);font-size:var(--fs-h1);line-height:var(--lh-titre);letter-spacing:var(--ls-h1);text-transform:uppercase}
h2{font-weight:var(--w-gros-titre);font-size:var(--fs-h2);line-height:var(--lh-titre);letter-spacing:var(--ls-h2);text-transform:uppercase}
h3{font-weight:var(--w-petit-titre);font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
h4{font-weight:var(--w-petit-titre);font-size:var(--fs-h4);line-height:1.3}
p{margin:0 0 var(--s-3);text-wrap:pretty}
small{font-size:var(--fs-petit);line-height:var(--lh-petit);color:var(--texte-secondaire)}
a{color:var(--rouge);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--rouge-hover);text-decoration:underline;text-underline-offset:3px}
a:active{color:var(--rouge-press)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:2px}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
hr{border:0;border-top:var(--trait-fin) solid var(--separateur);margin:var(--s-5) 0}
::selection{background:var(--rouge);color:var(--blanc)}
::placeholder{color:var(--texte-secondaire)}

/* Sur-titre : la petite capitale espacée qui annonce une section */
.asbb-surtitre{font-family:var(--display);font-weight:var(--w-petit-titre);font-size:var(--fs-h4);letter-spacing:var(--ls-surtitre);text-transform:uppercase;color:var(--rouge)}

/* Or : uniquement en dégradé. Ces deux utilitaires sont la seule façon correcte de l'appliquer. */
.asbb-or-texte{background:var(--or);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.asbb-or-fond{background:var(--or);color:var(--texte-sur-or)}

/* Sections claires en alternance */
.asbb-section-claire{background:var(--surface-claire);color:var(--texte-corps-clair)}
.asbb-section-claire h1,.asbb-section-claire h2,.asbb-section-claire h3,.asbb-section-claire h4{color:var(--texte-sur-clair)}
.asbb-section-claire small{color:var(--texte-secondaire-clair)}