/*
 * base.css — socle du thème : réinitialisation courte, rythme typographique, sections éditoriales,
 * liens, focus, lien d'évitement, tableaux, images, impression.
 * Toutes les valeurs viennent des tokens (assets/css/tokens.css, généré depuis design/tokens.json) :
 * aucune couleur ni taille en dur. Registre imposé par la décision D10 du 07/09/2026 (sobre, éditorial,
 * presque monochrome, sans ombre) — voir .claude/rules/frontend.md.
 * Spec : docs/architecture/15-design-system.md §1 et §3 ; 14-design-direction.md §5 ; D10.
 * Chargée après tokens.css et avant components.css (inc/assets.php).
 */

/* ------------------------------------------------------------------ 1. Réinitialisation */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--spp-bg);
  color: var(--spp-fg);
  font-family: var(--spp-font-text);
  font-size: var(--spp-text-body);
  font-weight: var(--spp-text-body-weight);
  line-height: var(--spp-text-body-leading);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

/*
 * Filet de sécurité pour le mouvement : les durées des tokens tombent déjà à 0 sous prefers-reduced-motion,
 * cette règle neutralise en plus toute animation venue d'un bloc WordPress. `!important` est nécessaire ici
 * pour l'emporter sur les styles en ligne des blocs — c'est, avec le bloc d'impression plus bas, la seule
 * dérogation admise hors de utilities.css (WCAG 2.2, critère 2.3.3).
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ------------------------------------------------------------------ 2. Typographie */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--spp-space-4);
  font-family: var(--spp-font-display);
  text-wrap: balance;
}

h1 {
  font-size: var(--spp-text-h1);
  font-weight: var(--spp-text-h1-weight);
  line-height: var(--spp-text-h1-leading);
  letter-spacing: var(--spp-text-h1-tracking);
}

/*
 * D27 : les titres de section parlent la même langue que les titres de page — police de sport, capitales,
 * interligne serré. Un titre de section en bas de casse à côté d'un titre de page en capitales donnait
 * deux sites en un.
 */
h2 {
  font-family: var(--spp-font-sport);
  font-size: calc(var(--spp-text-h2) * 1.2);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

h3 {
  font-size: var(--spp-text-h3);
  font-weight: var(--spp-text-h3-weight);
  line-height: var(--spp-text-h3-leading);
}

h4,
h5,
h6 {
  font-family: var(--spp-font-text);
  font-size: var(--spp-text-h4);
  font-weight: var(--spp-text-h4-weight);
  line-height: var(--spp-text-h4-leading);
}

p,
ul,
ol,
dl,
figure,
blockquote,
pre {
  margin: 0 0 var(--spp-space-5);
}

p:last-child,
ul:last-child,
ol:last-child,
dl:last-child {
  margin-bottom: 0;
}

/* Corps de texte confortable : la mesure est bornée par le conteneur, pas par une largeur en dur. */
p,
li {
  text-wrap: pretty;
}

strong,
b {
  font-weight: 600;
}

small {
  font-size: var(--spp-text-small);
  line-height: var(--spp-text-small-leading);
}

code,
kbd,
samp,
pre {
  font-family: var(--spp-font-mono);
  font-size: 0.9em;
}

hr,
.wp-block-separator {
  height: 0;
  margin: var(--spp-space-8) 0;
  border: 0;
  border-top: var(--spp-border-width) solid var(--spp-border);
  opacity: 1;
}

/* Étiquette : petites capitales espacées — catégories, sur-titres, en-têtes de colonne (D10). */
.spp-label,
.has-label-font-size {
  margin-bottom: var(--spp-space-3);
  font-family: var(--spp-font-text);
  font-size: var(--spp-text-label);
  font-weight: var(--spp-text-label-weight);
  line-height: var(--spp-text-label-leading);
  letter-spacing: var(--spp-text-label-tracking);
  text-transform: uppercase;
  color: var(--spp-fg-muted);
}

/* ------------------------------------------------------------------ 3. Liens et focus */

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--spp-duration-fast) var(--spp-easing);
}

a:hover {
  color: var(--spp-fg-muted);
}

/*
 * L'anneau de focus est bleu, pas volt : le volt du logo est éclatant sur fond nuit mais quasi invisible sur
 * l'off-white (1,05:1). Le bleu tient sur les deux fonds et bascule avec le thème (--spp-focus).
 */
:focus-visible {
  outline: var(--spp-border-thick) solid var(--spp-focus);
  outline-offset: 2px;
  border-radius: var(--spp-radius-sm);
}

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

/* ------------------------------------------------------------------ 4. Structure de page */

.wp-site-blocks > * {
  margin-block: 0;
}

.spp-skip-link {
  position: absolute;
  top: var(--spp-space-2);
  left: var(--spp-space-2);
  z-index: var(--spp-z-modal);
  padding: var(--spp-space-3) var(--spp-space-4);
  background-color: var(--spp-fg);
  color: var(--spp-bg);
  font-size: var(--spp-text-small);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--spp-space-4)));
  transition: transform var(--spp-duration-fast) var(--spp-easing);
}

.spp-skip-link:focus {
  transform: translateY(0);
}

.spp-main {
  display: block;
  min-height: 40vh;
}

.spp-main:focus {
  outline: none;
}

/* Section éditoriale : le rythme du site tient dans cette seule règle (grands blancs, D10). */
.spp-section {
  padding-block: var(--spp-space-8);
}

.spp-section--intro {
  padding-block: var(--spp-space-9) var(--spp-space-8);
}

.spp-section--tight {
  padding-block: var(--spp-space-7);
}

/* Section sombre : bord à bord, couleurs reprises des tokens du thème sombre. */
.spp-section--dark {
  background-color: var(--spp-bg);
  color: var(--spp-fg);
}

/*
 * Séparateurs (D27) : un filet entre deux sections de même couleur. Entre une bande noire et une bande blanche, le
 * contraste fait déjà la séparation : le filet disparaît. Les numéros « 02 », « 03 » sont retirés le 02/11/2026 (D73).
 */
.spp-section + .spp-section {
  position: relative;
  border-top: var(--spp-border-width) solid var(--spp-border);
}

.spp-section--dark + .spp-section:not(.spp-section--dark),
.spp-section:not(.spp-section--dark) + .spp-section--dark {
  border-top-color: transparent;
}

/*
 * Le séparateur en biais (D38), repris de la fiche d'un tournoi et étendu à **tout le site**.
 *
 * C'est la **bande sombre** qu'on découpe, jamais la claire. Première version : on découpait la section
 * qui suit, en la faisant remonter. Ça marchait sur la fiche d'un tournoi, où les deux bandes vont d'un
 * bord à l'autre — et ça ratait ailleurs. Sur `/tournois/`, la section claire est centrée et large de
 * 1280 px au plus : la découper laissait le fond sombre visible **de part et d'autre**, en marches
 * d'escalier au bord droit (constaté à l'image le 22/09/2026).
 *
 * Une section sombre, elle, peint toujours son fond d'un bord à l'autre. La découper retire un triangle
 * qui laisse voir le fond de page — blanc, comme les sections claires. Aucune marge négative, aucun fond à
 * ajouter aux sections claires, et le résultat est juste quelle que soit leur largeur.
 *
 * `clip-path` ne se cumule pas : une bande encadrée de deux sections claires a besoin de son propre
 * polygone, d'où les trois règles. La dernière gagne, elle doit donc rester la dernière.
 */
:root {
  --spp-slant: clamp(28px, 4vw, 72px);
}

/*
 * Sur l'accueil, le manifeste vient du gabarit et la compétition du contenu de la page : ils ne sont pas frères, le sélecteur
 * `+` ne les voit pas, et c'était la seule jonction droite de la page. D'où le second sélecteur des règles suivantes (D82).
 */

/* Bord haut biseauté : une section claire précède. */
.spp-section:not(.spp-section--dark) + .spp-section--dark,
.spp-section--intro + .wp-block-post-content > .spp-section--dark:first-child {
  clip-path: polygon(0 var(--spp-slant), 100% 0, 100% 100%, 0 100%);
  padding-top: calc(var(--spp-space-8) + var(--spp-slant));
}

/* Bord bas biseauté : une section claire suit. Le hero est sombre lui aussi. */
.spp-section--dark:has(+ .spp-section:not(.spp-section--dark)),
.spp-hero:has(+ .spp-section:not(.spp-section--dark)) {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--spp-slant)), 0 100%);
  padding-bottom: calc(var(--spp-space-8) + var(--spp-slant));
}

/* Les deux à la fois : le cas le plus courant, une bande sombre entre deux claires. */
.spp-section:not(.spp-section--dark) + .spp-section--dark:has(+ .spp-section:not(.spp-section--dark)),
.spp-section--intro + .wp-block-post-content > .spp-section--dark:first-child:has(+ .spp-section:not(.spp-section--dark)) {
  clip-path: polygon(0 var(--spp-slant), 100% 0, 100% calc(100% - var(--spp-slant)), 0 100%);
}

/*
 * La **dernière** section d'une page, quand elle est sombre : le pied de page s'ouvre désormais sur une
 * bande claire (l'appel à l'action), il y a donc bien une jonction de couleur juste après elle — que la
 * page contienne une section claire de plus ou non. C'est le cas de la fiche d'un tournoi, qui se termine
 * sur une bande noire : sans cette règle, elle butait à angle droit contre le pied de page.
 *
 * « Aucune section frère après moi » plutôt que « une section claire me suit » : le bandeau d'action du
 * jour J (`.spp-event-bar`) est un frère lui aussi, et `:last-child` aurait raté le cas.
 */
.spp-section--dark:not(:has(~ .spp-section)) {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--spp-slant)), 0 100%);
  padding-bottom: calc(var(--spp-space-8) + var(--spp-slant));
}

.spp-section:not(.spp-section--dark) + .spp-section--dark:not(:has(~ .spp-section)) {
  clip-path: polygon(0 var(--spp-slant), 100% 0, 100% calc(100% - var(--spp-slant)), 0 100%);
}

@media (min-width: 768px) {
  .spp-section:not(.spp-section--dark) + .spp-section--dark,
  .spp-section--intro + .wp-block-post-content > .spp-section--dark:first-child {
    padding-top: calc(var(--spp-space-9) + var(--spp-slant));
  }

  .spp-section--dark:has(+ .spp-section:not(.spp-section--dark)),
  .spp-section--dark:not(:has(~ .spp-section)),
  .spp-hero:has(+ .spp-section:not(.spp-section--dark)) {
    padding-bottom: calc(var(--spp-space-9) + var(--spp-slant));
  }
}

/*
 * Un en-tête de section typé comme sur la fiche d'un tournoi : le numéro en petites capitales, puis le
 * titre. Les motifs de page qui posent `.spp-section__n` en profitent ; les autres gardent le numéro sur
 * le filet, comme avant.
 */
.spp-section__n {
  margin: 0 0 var(--spp-space-2);
  font-family: var(--spp-font-text);
  font-size: var(--spp-text-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--spp-fg-muted);
  font-variant-numeric: tabular-nums;
}

/* Sur l'accueil, le manifeste a le même souffle que les autres bandes claires (D82). */
.spp-main--front > .spp-section--intro {
  padding-top: var(--spp-space-8);
}

@media (min-width: 768px) {
  .spp-section {
    padding-block: var(--spp-space-9);
  }

  .spp-section--intro {
    padding-block: var(--spp-space-10) var(--spp-space-9);
  }

  .spp-main--front > .spp-section--intro {
    padding-top: var(--spp-space-9);
  }

  .spp-section--tight {
    padding-block: var(--spp-space-8);
  }
}

/*
 * Les titres de sport (D22).
 *
 * Big Shoulders est **très condensée** : à taille égale, elle occupe environ trois quarts de la largeur de
 * Bricolage Grotesque et paraît plus petite. On la monte donc d'environ 22 %, on serre l'interligne, et on
 * l'emploie en capitales avec une approche positive — c'est là qu'elle sonne « affiche de tournoi » plutôt
 * que « texte étroit ».
 *
 * Elle ne sert **jamais** au texte courant : condensée, elle se lit mal au-delà d'une ligne ou deux.
 */
.spp-title-sport,
.spp-page-title,
.spp-hero__title,
.spp-tournament-hero__title,
.spp-event-hero__title,
.spp-calendar-intro__title,
.spp-figures__value,
.spp-calendar__month {
  font-family: var(--spp-font-sport);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 0.92;
}

.spp-page-title,
.spp-hero__title,
.spp-tournament-hero__title,
.spp-calendar-intro__title {
  font-size: calc(var(--spp-text-h1) * 1.22);
}

.spp-hero__title {
  font-size: calc(var(--spp-text-display) * 0.98);
}

.spp-calendar__month {
  font-size: calc(var(--spp-text-h2) * 1.18);
}

.spp-figures__value {
  font-size: calc(var(--spp-text-h1) * 1.15);
  letter-spacing: 0;
}

/*
 * En-tête de page : sur-titre, titre, chapô.
 *
 * Deux défauts mesurés le 15/09 et corrigés ici. Le titre des pages intérieures passait **sous la barre
 * d'en-tête** : `<main>` n'avait aucun retrait haut et l'interligne de 0,94 fait dépasser les hampes au-dessus
 * de la ligne de base. Et un trou de 235 px s'ouvrait sous le titre, produit par le cumul d'une marge de
 * 48 px, d'un conteneur d'image à la une vide et d'une intro à 128 px de retrait.
 */
.spp-main {
  padding-block-start: var(--spp-space-8);
}

/* L'accueil n'en veut pas : son hero passe sous l'en-tête transparent, bord à bord. */
.home .spp-main,
.spp-main:has(> .spp-hero),
.spp-main:has(> .wp-block-post-content > .spp-hero:first-child),
.spp-main:has(> .spp-section--dark:first-child) {
  padding-block-start: 0;
}

.spp-page-header {
  margin-bottom: var(--spp-space-5);
}

.spp-page-title {
  margin-bottom: var(--spp-space-4);
  padding-top: 0.06em;
}

/* Conteneur d'image à la une : il occupait la place même quand la page n'a pas d'image. */
.spp-page-media:not(:has(img)) {
  display: none;
}

/*
 * `wp:post-content` enveloppe le contenu : l'intro n'est donc pas une sœur de l'en-tête de page mais le
 * premier enfant de cette enveloppe. C'est ce lien-là qu'il faut viser pour refermer le trou.
 */
.spp-main--page .entry-content > .spp-section--intro:first-child,
.spp-main--page .wp-block-post-content > .spp-section--intro:first-child {
  padding-block-start: var(--spp-space-3);
}

.spp-page-lead,
.has-body-l-font-size {
  font-size: var(--spp-text-body-l);
  line-height: var(--spp-text-body-l-leading);
  color: var(--spp-fg-muted);
}

.spp-page-header .spp-page-lead:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ 5. Médias et tableaux */

figure {
  margin-inline: 0;
}

figcaption,
.wp-element-caption {
  margin-top: var(--spp-space-2);
  font-size: var(--spp-text-caption);
  line-height: var(--spp-text-caption-leading);
  color: var(--spp-fg-muted);
}

.wp-block-image img {
  border-radius: var(--spp-radius-none);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

th,
td {
  padding: var(--spp-space-3) var(--spp-space-3) var(--spp-space-3) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: var(--spp-border-width) solid var(--spp-border);
}

thead th {
  font-family: var(--spp-font-text);
  font-size: var(--spp-text-label);
  font-weight: var(--spp-text-label-weight);
  letter-spacing: var(--spp-text-label-tracking);
  text-transform: uppercase;
  color: var(--spp-fg-muted);
}

blockquote,
.wp-block-quote {
  padding-left: var(--spp-space-5);
  border-left: var(--spp-border-thick) solid var(--spp-color-sand);
  font-family: var(--spp-font-display);
  font-size: var(--spp-text-body-l);
}

/* ------------------------------------------------------------------ 6. Impression */

/*
 * Seul bloc du thème où des valeurs littérales et `!important` sont admis : à l'impression, les tokens de thème
 * (fond nuit, texte craie) n'ont pas de sens — on force l'encre noire sur papier blanc. Contrôle /audit-design :
 * ces occurrences sont attendues, elles ne concernent aucune surface d'écran.
 */
@media print {
  .spp-header,
  .spp-footer,
  .spp-skip-link,
  .spp-nav,
  .wp-block-search {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}