/**
 * 10 · LE SOCLE — réinitialisation et éléments HTML nus.
 *
 * Ce fichier ne connaît aucun composant. Il rend lisible un document qui
 * n'aurait aucune classe : titres, paragraphes, listes, liens, formulaires.
 *
 * ⚠ **C'est aussi le filet de l'accessibilité.** Le focus visible, la cible
 * tactile de 44 px et `prefers-reduced-motion` sont posés ICI, une fois, pour
 * tout le site. Un composant qui les redéfinit doit dire pourquoi — sinon on
 * répare cent fois ce qui se règle une fois.
 */

/* ═══ RÉINITIALISATION ════════════════════════════════════════════════ */

*,
*::before,
*::after { box-sizing: border-box; }

/* La marge par défaut du navigateur est la première source d'espacements
   qu'on ne comprend pas. On la retire ; l'espacement vient de la mise en
   page (`gap`), jamais d'un héritage. */
* { margin: 0; }

html {
  /* Pas de `scroll-behavior: smooth` : il se compose mal avec les
     défilements programmés, qui se retrouvent lissés par-dessus une
     animation qui pose déjà une position par image. Les deux s'annulent. */
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hauteur-entete) + var(--e-4));

  /*
   * ⚠ **Le garde-fou contre le glissement latéral.**
   *
   * Il n'était posé que sur `body`. La propagation de l'`overflow` du corps
   * vers la fenêtre est bien au standard, mais elle n'est pas honorée
   * partout pour la valeur `clip` — et là où elle ne l'est pas, la page se
   * fait tirer sur le côté au doigt. Signalé par Ismail le 6 septembre.
   *
   * `hidden` ici, `clip` juste en dessous sous `@supports` : un moteur qui
   * ne connaît pas `clip` coupe quand même, un moteur qui le connaît prend
   * `clip`, qui ne fait PAS de la racine un conteneur de défilement et
   * laisse donc `position: sticky` fonctionner pour l'entête.
   *
   * ⚠ Ce n'est qu'un filet. Ce qui dépasse est corrigé à la source (les
   * grands boutons sous 375 px, le halo des cartes) : le contrôle se fait
   * filet RETIRÉ, sinon on ne mesure que le pansement.
   */
  overflow-x: hidden;
}

body {
  min-height: 100svh;
  background: var(--noir);
  color: var(--texte);
  font-family: var(--corps);
  font-size: var(--t-base);
  line-height: var(--interligne-corps);
  -webkit-font-smoothing: antialiased;

  /* Le même filet que sur la racine, pour la même raison. */
  overflow-x: hidden;
}

/* Là où `clip` existe, il vaut mieux : il coupe sans créer de conteneur de
   défilement, donc sans risque pour `position: sticky` ni pour les ancres. */
@supports (overflow-x: clip) {
  html,
  body { overflow-x: clip; }
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* ⚠ Une image sans `width`/`height` déclarés fait sauter la page pendant le
   chargement. On ne peut pas les poser depuis le CSS — c'est aux gabarits de
   le faire. Cette règle-ci ne fait que garantir le rapport une fois les
   attributs présents.

   ⚠ **`:where()` EST INDISPENSABLE ICI, ET ÇA M'A COÛTÉ UNE CASE VIDE.**

   Écrite `img[width][height] { height: auto }`, cette règle pèse (0,2,1) : elle
   écrase tout composant qui pose `block-size: 100%` sur une image — lequel ne
   pèse que (0,1,0). Résultat observé : dans le héros, l'image de scène gardait
   sa hauteur naturelle et laissait 400 px de case vide en dessous, sans qu'aucune
   règle ne paraisse fautive à la lecture.

   `:where()` met la spécificité à zéro : le garde-fou reste le défaut, et
   n'importe quel composant peut le préciser sans surencherir. C'est la même
   raison qui fait poser les cibles tactiles en `:where()` plus bas.          */
:where(img[width][height]) { height: auto; }

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

p,
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul, ol { padding: 0; list-style: none; }


/* ═══ TYPOGRAPHIE ═════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--titre);
  font-weight: 400;          /* Bebas Neue n'a qu'une graisse */
  line-height: var(--interligne-titre);
  letter-spacing: var(--lettrage-titre);
  text-transform: uppercase;
  color: var(--blanc);
  text-wrap: balance;
}

h1 { font-size: var(--t-5xl); }
h2 { font-size: var(--t-4xl); }
h3 { font-size: var(--t-2xl); }
h4 { font-size: var(--t-xl); }

p { text-wrap: pretty; }

/* Un paragraphe de contenu suivi ne dépasse pas la mesure confortable. Posé
   sur `p` seul et non sur le conteneur : une carte étroite n'a pas besoin
   qu'on lui répète sa largeur. */
.prose p,
.prose li { max-width: var(--mesure); }

strong, b { font-weight: 600; color: var(--blanc); }

a {
  color: var(--rouge);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color var(--duree-action) var(--sortie);
}

a:hover { color: var(--or); }

/* Les chiffres qui s'alignent en colonne : prix, quantités, totaux. */
.chiffres,
td.prix,
.prix { font-variant-numeric: tabular-nums; }


/* ═══ LE FOCUS ════════════════════════════════════════════════════════
   ⚠ **Ne jamais retirer sans remplacer.** `outline: none` sans contrepartie
   rend le site inutilisable au clavier — et c'est le manquement WCAG le plus
   fréquent du web.

   `:focus-visible` et non `:focus` : le contour n'apparaît qu'à la navigation
   clavier, jamais sur un clic de souris. C'est ce qui permet de le rendre
   franc sans gêner personne.                                              */

:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
  border-radius: 1px;
}

:focus:not(:focus-visible) { outline: none; }


/* ═══ LES CIBLES TACTILES ═════════════════════════════════════════════
   44 × 44 px, le plancher recommandé. Posé sur les éléments interactifs
   plutôt que composant par composant : un lien d'icône ajouté dans six mois
   en hérite sans qu'on y pense.

   `:where()` garde la spécificité à zéro — n'importe quelle règle de motif
   peut donc le préciser sans avoir à surenchérir.                          */

:where(button, [role="button"], input[type="submit"], .lien-icone) {
  min-block-size: 44px;
  min-inline-size: 44px;
}


/* ═══ TEXTE RÉSERVÉ AUX LECTEURS D'ÉCRAN ══════════════════════════════
   ⚠ Ce bloc n'est pas décoratif : sans lui, WooCommerce affiche « PLAGE DE
   PRIX : … » en clair à côté de chaque prix, parce qu'il compte sur la
   classe du thème pour le masquer. C'est arrivé.                           */

.lecteur-seul {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Le lien d'évitement : invisible jusqu'au premier Tab, puis bien visible. */
.evitement {
  position: absolute;
  top: var(--e-2);
  left: var(--e-2);
  z-index: var(--plan-voile);
  padding: var(--e-3) var(--e-4);
  background: var(--rouge);
  color: var(--blanc);
  font-family: var(--titre);
  text-transform: uppercase;
  letter-spacing: var(--lettrage-capital);
  text-decoration: none;
  transform: translateY(-200%);
}

.evitement:focus { transform: translateY(0); }


/* ═══ MOUVEMENT RÉDUIT ════════════════════════════════════════════════
   Une seule déclaration pour tout le site. Un composant qui anime sans passer
   par une transition ou une animation CSS doit se couper lui-même.

   On ne met pas les durées à zéro : `0.01ms` laisse les événements `*end`
   se déclencher, donc les scripts qui attendent la fin d'une transition
   continuent de fonctionner au lieu de rester bloqués.                     */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * ⚠ Les quatre `!important` ci-dessus sont **la seule exception du thème**,
 * et ils sont justifiés : cette règle doit gagner contre n'importe quelle
 * transition écrite plus loin, y compris celles d'une extension tierce. C'est
 * la recommandation officielle du W3C pour ce cas précis. Toute autre
 * occurrence de `!important` dans ce thème est un défaut à corriger.
 */


/* ═══ LES CONTENEURS ══════════════════════════════════════════════════ */

.page {
  width: 100%;
  max-width: var(--largeur-page);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.page--etroite { max-width: var(--largeur-texte); }

/* Une section respire toujours pareil. C'est ce qui donne son rythme au site,
   et ça ne se décide pas section par section. */
.section { padding-block: var(--e-24); }


/* ═══ CE QUI DÉBORDE ══════════════════════════════════════════════════
   Un tableau, un bloc de code ou une frise défilent DANS leur boîte. Le corps
   de la page, lui, ne défile jamais latéralement.                          */

.deborde {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}