/* ============================================================
   SOCLE PARTAGÉ — front statique ET thème WordPress.
   Ne contient que ce qui transfère réellement entre les deux :
   le header, le menu mobile et le footer du front n'ont aucun
   équivalent de balisage dans WordPress et restent dans
   src/assets/css/site.css.
   Chargé APRÈS tokens.css, AVANT le CSS propre à chaque système.
   ============================================================ */

/* ── Les valeurs du bouton, partagées ─────────────────────────
   Le balisage diffère des deux côtés — `.btn` sur le front,
   `.button` / `.button.alt` posés par Storefront et WooCommerce —
   mais les VALEURS sont les mêmes. Elles vivent ici, une fois :
   `theme.css` consomme ces propriétés au lieu de les recopier.
   C'était l'écart relevé en revue finale (I4) : mêmes padding,
   même rayon, même ombre, écrits deux fois dans deux fichiers,
   libres de diverger sans que rien ne le signale.
   ------------------------------------------------------------
   Ces propriétés vivent ici et non dans `tokens.css` à dessein :
   `tokens.css` porte la PALETTE et les polices (invariant 3),
   ceci porte les dimensions d'UN composant. */
:root {
  --btn-padding: 15px 28px;
  --btn-radius: 100px;
  --btn-weight: 700;
  --btn-transition: .25s;
  --btn-lift: translateY(-3px);
  /* Couleur en dur, exception connue et volontaire (RULING T6-a) : `rgba()`
     ne sait pas interpoler `--or` (jeton hexadécimal) sans jeton de canaux
     compagnon ni `color-mix()`, dont aucun n'existe dans `tokens.css`.
     Traitement d'ensemble inscrit au BACKLOG.md. Elle n'est désormais écrite
     qu'UNE fois pour les deux systèmes, au lieu de deux. */
  --btn-ombre-or: 0 14px 30px -10px rgba(248, 190, 23, .7);

  /* Le contour de focus, valeur unique pour les deux systèmes. `theme.css` la
     consomme pour la reposer sur les sélecteurs de Storefront, qui l'emportent
     en spécificité (voir plus bas). */
  --focus-contour: 3px solid var(--bleu);
  --focus-decalage: 2px;
}

.kick{font-size:12px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--bleu)}
h2.big{font-size:clamp(2rem,4.2vw,3rem);font-weight:800;line-height:1.06;letter-spacing:-.01em}

.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:var(--btn-weight);font-size:14.5px;padding:var(--btn-padding);border-radius:var(--btn-radius);border:0;cursor:pointer;text-decoration:none;transition:var(--btn-transition)}
.btn-or{background:var(--or);color:var(--marine)}
.btn-or:hover{transform:var(--btn-lift);box-shadow:var(--btn-ombre-or)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.22);transform:var(--btn-lift)}

/* ── Les états de focus visibles ──────────────────────────────
   Annoncés dans la spec de phase §4.2 comme l'un des trois
   contenus de cette feuille, ils n'y étaient pas : ils
   n'existaient que dans `theme.css`, donc les 28 pages du front
   n'avaient AUCUNE règle de focus visible (relevé en revue
   finale, I4).

   C'est le seul des trois contenus qui transfère vraiment sans
   réserve : des sélecteurs d'ÉLÉMENTS NUS, présents des deux
   côtés — là où `.btn` et `h2.big` sont du balisage propre au
   front. Un visiteur qui navigue au clavier doit voir où il est,
   sur le site comme dans le tunnel de paiement.

   `:focus-visible` et non `:focus` : le second dessinerait un
   contour au moindre clic de souris, ce que les navigateurs ont
   précisément cessé de faire.

   Côté WordPress, ces sélecteurs d'éléments nus ne suffisent pas
   partout : Storefront imprime une feuille EN LIGNE posant
   `outline-color:#7f54b3` sur `.button.alt:focus` (spécificité
   0-2-1), qui l'emporte. `theme.css` repose donc le contour sur
   ces sélecteurs-là, avec la MÊME valeur (`--focus-contour`). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{outline:var(--focus-contour);outline-offset:var(--focus-decalage)}