/*
Theme Name:   Samouraï Karaté Club Nantes
Theme URI:    https://samourai-karate.fr/
Author:       Marie Paulon
Description:  Thème WordPress personnalisé pour le Samouraï Karaté Club Nantes (S.K.C.N.), développé à partir des maquettes Figma validées.
Version:      1.5.2
Text Domain:  skcn
*/

/* Version 1.5.2 — le rond rouge du menu qui signale "Actualités" comme
   page courante (article seul, archive annuelle, page Actualités elle-
   même) ne dépendait que du repli codé skcn_default_nav(), qui ne
   s'exécute que si aucun menu n'est assigné dans Apparence > Menus. Dès
   qu'un menu réel y est assigné, le rond disparaissait sur ces pages.
   Un filtre applique maintenant la même logique à n'importe quel menu
   assigné à cet emplacement (aucun changement visuel sur les autres
   pages). */

/* Version 1.5.1 — lien "Mentions légales" ajouté dans le pied de page,
   entre le copyright et le crédit de réalisation. Pointe vers
   /mentions-legales/ via home_url() (et non une URL en dur) : la page
   correspondante doit être créée côté admin avec ce même slug. */

/* Version 1.5.0 — tous les textes de l'accueil deviennent modifiables
   depuis l'administration (aucun changement visuel, vérifié par rendu
   comparé) :
   - nouveaux champs ACF pour l'encart rouge "Association sportive Loi
     1901...", les deux titres de la section Infos pratiques ("Le dojo et
     les horaires des cours", "Tarifs — Saison 2026-2027"), et la liste à
     puces des composants du Shotokan (Kihon, Ippon kumite...), désormais
     intégrée au champ "Texte — Les cours" ;
   - éditeur par blocs (Gutenberg) désactivé sur les Pages : cause probable
     du blocage de l'onglet "Visuel" des champs WYSIWYG après un premier
     enregistrement (conflit connu ACF/Gutenberg dans les méta-box
     TinyMCE). Les articles ne sont pas concernés. */

/* Version 1.4.2 — champs ACF de l'accueil (aucun changement visuel) :
   - onglet « Texte » réactivé sur les 5 champs WYSIWYG. Ils étaient limités
     à l'onglet « Visuel » : quand l'éditeur visuel ne se charge pas, il n'y
     avait alors plus AUCUN moyen de modifier le texte ;
   - les valeurs par défaut s'appliquent désormais aussi aux pages déjà
     existantes (ACF ne les applique qu'à la création). Les champs
     n'apparaissent donc plus vides dans l'administration alors que le site
     affiche bien les textes ;
   - point final retiré de la valeur par défaut de l'accroche du hero : le
     gabarit ajoute déjà ce point en rouge, il aurait été doublé. */

/* Version 1.4.1 — cibles tactiles portées à 24x24 px minimum (WCAG 2.2,
   critère 2.5.8) sur les deux liens qui restaient en dessous : le crédit
   photo du hero (21 -> 24 px) et le lien du pied de page (19 -> 25 px).
   Mise en page vérifiée strictement inchangée en desktop et en mobile
   (hauteur de page, du pied et du hero identiques au pixel près). */

/* Version 1.4.0 — audit qualité avant mise en ligne. Aucun changement
   visuel (rendu vérifié identique avant/après) :
   - les deux logos SVG contenaient une image matricielle de ~1950 px
     embarquée en base64, affichée à 260 px maximum : elle représentait
     98,7 % du poids du fichier. Raster ramené à 640 px, soit -85 % par
     logo. Poids de l'accueil : 1589 -> 609 Ko ; page Actualités :
     1212 -> 255 Ko ;
   - width/height ajoutés sur toutes les images qui n'en avaient pas
     (réservation de la place avant chargement, évite les sauts de mise
     en page) ;
   - dimensions de la photo du hero corrigées (968x672 annoncés pour un
     fichier réellement en 1936x1291) ;
   - fetchpriority="high" sur la photo du hero, qui détermine le LCP. */

/* Versions 1.2.0 et 1.3.0 — référencement (SEO). Aucun changement visuel :
   cette feuille de style n'a pas bougé, tout se joue dans inc/seo.php et
   dans les attributs alt de front-page.php.

   1.2.0 : meta description, Open Graph / Twitter Card, balise canonique
           pour la page Actualités et les archives annuelles, données
           structurées JSON-LD.
   1.3.0 : balise <title> de l'accueil et adresse du dojo rendues éditables
           (champs ACF « Référencement »), articles seuls exclus de l'index
           Google et du plan de site, correction du contenu dupliqué entre
           la page Actualités et l'archive de l'année en cours, alternatives
           descriptives sur les images de contenu. */

/* Version 1.1.0 — mise en conformité accessibilité (WCAG 2.2 niveau AA).
   Principaux changements dans cette feuille :
   - styles de focus clavier explicites et lien d'évitement ;
   - scroll-margin pour que le header sticky ne masque plus les ancres ;
   - hauteur du header centralisée dans --skcn-header-h ;
   - tailles de police en rem, pour suivre le réglage du navigateur ;
   - le rouge de la charte (#ff2e2e) est CONSERVÉ tel quel : il est
     conforme dans tous ses usages actuels. Seules deux retouches ciblées
     là où il ne passait pas — la pastille du menu actif
     (--skcn-rouge-pastille) et le texte de la carte de pagination, passé
     en noir. Voir les commentaires détaillés sur les tokens. */

/* ==========================================================================
   1. Design tokens (issus des variables Figma)
   ========================================================================== */
:root {
  /* Couleurs */
  --skcn-noir: #000000;
  --skcn-blanc: #ffffff;
  /* Rouge de la charte graphique du club — NE PAS MODIFIER : cette teinte
     est celle des logos et du sceau, qui ne peuvent pas être retouchés.
     Elle est conforme AA dans tous ses usages actuels, mais avec peu de
     marge (voir les ratios ci-dessous) :
       rouge sur blanc    3,70:1  -> OK car réservé aux GRANDS caractères
                                     (h1, h2, baseline 24px) : seuil 3:1
       noir sur rouge     5,68:1  -> OK à toute taille
       blanc sur rouge    3,70:1  -> OK uniquement à partir de 24px, ou de
                                     18,5px en gras
       rouge sur noir     5,68:1  -> OK à toute taille

     ⚠️ RÈGLE À RESPECTER POUR LA SUITE : ne jamais écrire de texte en rouge
     sur blanc, ni de texte blanc sur fond rouge, en dessous de 24px (ou
     18,5px en gras). En dessous de ces tailles, utiliser du NOIR sur le
     fond rouge — c'est le traitement déjà appliqué à toutes les cartes
     rouges du thème. */
  --skcn-rouge: #ff2e2e;

  /* Seule exception à la charte, et le seul usage du rouge qui échouait
     réellement : la pastille du lien de menu actif porte du texte blanc de
     16px, ce qui exige 4,5:1 — impossible avec #ff2e2e (3,70:1).
     Ce rond de 31px se trouve dans le header noir, à distance de tout logo :
     l'écart de teinte n'est visible nulle part sur la page.
       blanc sur #d40000  5,53:1  (WCAG 1.4.3, niveau AA) */
  --skcn-rouge-pastille: #d40000;

  /* Typographie — en rem plutôt qu'en px : les tailles suivent ainsi le
     réglage de taille de police du navigateur, que les personnes
     malvoyantes utilisent souvent avant le zoom (WCAG 1.4.4).
     Équivalences à la taille par défaut : 4.125rem = 66px, 2.375rem = 38px,
     1.125rem = 18px. */
  --skcn-font-h: "Lekton", monospace;
  --skcn-font-body: "Afacad", sans-serif;

  --skcn-h1-size: 4.125rem;
  --skcn-h2-size: 2.375rem;
  --skcn-body-size: 1.125rem;

  /* Hauteur du header, en rem elle aussi. Elle sert à trois endroits :
     la position de la carte "Saison" sticky, la marge de défilement des
     ancres, et la compensation du header fixe en mobile. En px, ces trois
     valeurs se désynchronisaient dès que l'internaute augmentait la taille
     de police de son navigateur (le menu passait alors sur deux lignes et
     le header grandissait, mais pas les compensations). 3.6875rem = 59px. */
  --skcn-header-h: 3.6875rem;

  /* Espacements de base (échelle 8px) */
  --skcn-space-1: 8px;
  --skcn-space-2: 16px;
  --skcn-space-3: 24px;
  --skcn-space-4: 32px;
  --skcn-space-6: 48px;
  --skcn-space-8: 64px;

  /* Largeur de mise en page (frame desktop Figma = 1440px) */
  --skcn-content-max: 1440px;

  /* Décalage entre le bord du viewport et le bord du contenu (utilisé pour
     les blocs qui "bleedent" volontairement hors de .skcn-container) */
  --skcn-bleed: max(
    var(--skcn-space-3),
    calc((100vw - var(--skcn-content-max)) / 2 + var(--skcn-space-3))
  );
}

/* ==========================================================================
   2. Polices auto-hébergées (fournies par Marie, google-webfonts-helper)
   ========================================================================== */
@font-face {
  font-family: "Lekton";
  src: url("assets/fonts/lekton-v21-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lekton";
  src: url("assets/fonts/lekton-v21-latin-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Afacad";
  src: url("assets/fonts/afacad-v3-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Afacad";
  src: url("assets/fonts/afacad-v3-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Afacad";
  src: url("assets/fonts/afacad-v3-latin-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   3. Reset minimal
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* PAS de overflow-x: hidden ici : sur <html>, cette propriété casse
     position: sticky pour TOUS les éléments de la page (header, carte
     Saison...) dans Chrome/Firefox — comportement constaté et confirmé.
     Le garde-fou contre le débordement horizontal reste sur <body>
     ci-dessous, qui lui ne pose pas ce problème. */
}

body {
  margin: 0;
  font-family: var(--skcn-font-body);
  font-size: var(--skcn-body-size);
  color: var(--skcn-noir);
  background: var(--skcn-blanc);
  line-height: 1.5;
  overflow-x: hidden; /* les blocs rouges/noirs "bleedent" volontairement hors du conteneur */
}

img {
  max-width: 100%;
  /* height: auto indispensable en complément de max-width : sans lui, une
     image portant des attributs width/height (celles de la médiathèque en
     ont toujours) garde sa hauteur d'origine pendant que sa largeur est
     réduite — donc étirée verticalement. */
  height: auto;
  display: block;
}

h1, h2, h3 {
  font-family: var(--skcn-font-h);
  font-weight: 700;
  margin: 0 0 var(--skcn-space-2);
  line-height: 1.05;
}

h1 { font-size: var(--skcn-h1-size); }
h2 { font-size: var(--skcn-h2-size); }

a {
  color: inherit;
}

.skcn-container {
  max-width: var(--skcn-content-max);
  margin-inline: auto;
  padding-inline: var(--skcn-space-3);
}

/* Lettre(s) mise(s) en évidence en rouge dans les titres (S.K.C.N, hero...) */
.skcn-accent {
  color: var(--skcn-rouge);
}

/* ==========================================================================
   4. Carte "Saison" — sticky dans la colonne de droite (PAS une bannière
   pleine largeur). Voir template-parts/carte-saison.php.
   ========================================================================== */
.skcn-sticky-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--skcn-space-6);
  align-items: start;
}

.skcn-sticky-wrap__main {
  min-width: 0; /* empêche le texte de forcer la colonne à s'élargir */
}

.skcn-sticky-wrap__aside {
  /* margin gauche via le "gap" de la grid, marge droite via le padding du
     conteneur .skcn-container : la carte ne peut donc jamais chevaucher
     le contenu principal ni déborder du viewport. */
  position: sticky;
  top: calc(var(--skcn-header-h) + var(--skcn-space-3));
  /* Chevauche le bas de la photo du hero (la carte "commence" avant la
     fin du hero) — valeur ajustée à l'oeil par Marie. */
  margin-top: -100px;
}

.skcn-infos-card {
  background: var(--skcn-rouge);
  color: var(--skcn-noir); /* meilleur contraste que le blanc d'origine */
  padding: var(--skcn-space-4);
}

.skcn-infos-card h2 {
  color: var(--skcn-blanc); /* le titre "Saison 2026-2027" reste blanc */
  font-size: 1.5rem; /* 24px */
}

.skcn-infos-card h3 {
  color: var(--skcn-noir);
  font-size: 1.5rem; /* 24px */
}

.skcn-infos-card a {
  color: var(--skcn-noir);
  text-decoration: underline;
}

/* Bandeau qui doit "bleeder" jusqu'au bord gauche du viewport tout en
   restant dans .skcn-sticky-wrap__main (donc plus étroit qu'avant à
   droite, pour ne jamais passer sous la carte "Saison"). */
.skcn-bleed-left {
  margin-left: calc(-1 * var(--skcn-bleed));
  padding-left: var(--skcn-bleed);
  padding-right: var(--skcn-space-3);
}

.skcn-infos-card ul {
  padding-left: var(--skcn-space-3);
  margin: 0 0 var(--skcn-space-2);
}

.skcn-infos-card p {
  margin: 0 0 var(--skcn-space-2);
}

/* ==========================================================================
   5. Header / navigation — fond noir (pas rouge)
   ========================================================================== */
.skcn-header {
  background: var(--skcn-noir);
  color: var(--skcn-blanc);
  position: sticky;
  top: 0;
  z-index: 100;
}

.skcn-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--skcn-space-3);
  min-height: var(--skcn-header-h);
}

.skcn-header__inner .skcn-nav {
  justify-self: center;
}

.skcn-header__logo {
  display: flex;
  align-items: center;
  gap: var(--skcn-space-1);
  font-family: var(--skcn-font-h);
  font-weight: 700;
  text-decoration: none;
  color: var(--skcn-blanc);
  /* Le nom du site n'est plus masqué par font-size: 0 (restitution non
     garantie par les lecteurs d'écran) mais par .sr-only dans header.php :
     on ne montre toujours que le sceau, et le lien conserve un nom
     accessible fiable. */
}

.skcn-header__logo img {
  width: 33px;
  height: 34px;
}

.skcn-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--skcn-space-3) var(--skcn-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.skcn-nav__list a {
  position: relative;
  /* Contexte d'empilement local : le rond rouge (z-index:-1 ci-dessous)
     doit rester coincé derrière CE lien précisément, pas fuiter derrière
     tout le header noir. */
  z-index: 0;
  text-decoration: none;
  font-size: 1rem; /* 16px */
}

.skcn-nav__list a:hover,
.skcn-nav__list a:focus-visible {
  text-decoration: underline;
}

/* Bouton "burger" : masqué par défaut, affiché uniquement en mobile (voir
   media query) quand la nav ne tient plus sur une ligne. */
.skcn-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}

.skcn-nav-toggle__icon {
  display: block;
  width: 28px;
  height: 19px;
}

/* Texte accessible non affiché à l'écran (lu par les lecteurs d'écran).
   .screen-reader-text est l'alias utilisé par WordPress lui-même (libellé
   du formulaire de recherche, "Aller au contenu" de certains widgets...) :
   sans cette déclaration, ces textes s'afficheraient en clair. */
.sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%); /* équivalent moderne de clip, désormais obsolète */
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   5 bis. Accessibilité clavier
   ========================================================================== */

/* --- Lien d'évitement (WCAG 2.4.1) ---
   Premier élément focalisable du document (voir header.php). Masqué au-
   dessus du viewport tant qu'il n'a pas le focus, il permet de sauter les
   six liens du menu répétés sur chaque page.
   position: fixed et non absolute : le header étant sticky, un lien
   positionné en haut du document deviendrait inatteignable après un
   défilement. z-index au-dessus du header (qui est à 100). */
.skcn-skip-link {
  position: fixed;
  top: var(--skcn-space-1);
  left: var(--skcn-space-1);
  z-index: 200;
  transform: translateY(-200%);
  padding: var(--skcn-space-2) var(--skcn-space-3);
  background: var(--skcn-noir);
  color: var(--skcn-blanc);
  font-family: var(--skcn-font-h);
  font-weight: 700;
  text-decoration: none;
}

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

/* --- Focus visible (WCAG 2.4.7) ---
   Aucun style de focus n'était défini : on dépendait du contour par défaut
   du navigateur, invisible sur le header noir dans Firefox.
   currentColor plutôt qu'une couleur fixe : le contour reprend la couleur
   du texte de l'élément, donc il est mécaniquement contrasté sur chacun
   des fonds du thème — blanc sur le header noir, noir sur les cartes
   rouges et sur le fond blanc (WCAG 1.4.11, seuil de 3:1). */
:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* Cible du lien d'évitement : le focus y est déposé par programme, pas
   atteint par tabulation — inutile d'encadrer toute la page. Le repère
   pour l'internaute est le défilement vers le contenu. */
main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible {
  outline: none;
}

/* Sur les liens du menu, le contour blanc jouxterait le rond rouge de
   l'élément actif : on l'écarte un peu plus. */
.skcn-nav__list a:focus-visible {
  outline-offset: 6px;
}

/* Le crédit photo est collé au bord de .skcn-hero__media, qui porte
   overflow: hidden — un contour vers l'extérieur y serait rogné. On le
   dessine donc vers l'intérieur (offset négatif) : blanc sur le fond noir
   translucide du badge, il reste parfaitement lisible. */
.skcn-hero__credit:focus-visible {
  outline: 3px solid var(--skcn-blanc);
  outline-offset: -3px;
}

/* --- Focus et ancres non masqués par le header (WCAG 2.2 — 2.4.11) ---
   Le header fait --skcn-header-h de haut et reste collé (sticky en desktop,
   fixed sous 780px). Sans cette marge de défilement, cliquer sur "Les
   cours" amenait le titre de la section DERRIÈRE le bandeau noir. */
[id] {
  scroll-margin-top: calc(var(--skcn-header-h) + var(--skcn-space-3));
}

:focus-visible {
  scroll-margin-top: calc(var(--skcn-header-h) + var(--skcn-space-3));
  scroll-margin-bottom: var(--skcn-space-3);
}

/* Page/section courante (page réelle comme "Actualités", ou ancre active
   détectée au scroll par assets/js/nav-scrollspy.js) : rond rouge, plus
   gros, centré derrière le texte du lien — pas un petit point à gauche. */
.skcn-nav__list .current a::before,
.skcn-nav__list .is-active a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 31px;
  height: 31px;
  border-radius: 50%;
  /* Rouge légèrement assombri ici, et ici SEULEMENT : le texte blanc du
     lien passe par-dessus ce rond, et 16px sur #ff2e2e ne donnait que
     3,70:1 (seuil 4,5:1). Voir --skcn-rouge-pastille. */
  background: var(--skcn-rouge-pastille);
  z-index: -1;
}

/* ==========================================================================
   6. Sections génériques de l'accueil
   ========================================================================== */
.skcn-section {
  padding-block: var(--skcn-space-8);
}

.skcn-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--skcn-space-6);
  align-items: center;
}

.skcn-section__media img {
  width: 100%;
  height: auto;
}

.skcn-section--reverse .skcn-section__media {
  order: 2;
}

/* Texte issu d'un champ ACF WYSIWYG (association, cours, infos, handicap) :
   les <p>/<strong> viennent directement du champ, on gère juste l'espacement. */
.skcn-richtext p {
  margin: 0 0 var(--skcn-space-3);
}

.skcn-richtext p:last-child {
  margin-bottom: 0;
}

.skcn-richtext strong {
  font-weight: 700;
}

/* Bloc "surligneur" rouge derrière un texte (association, actus...) */
.skcn-highlight {
  display: inline-block;
  background: var(--skcn-rouge);
  color: var(--skcn-noir);
  padding: var(--skcn-space-2) var(--skcn-space-3);
  margin-top: var(--skcn-space-2);
}

.skcn-section ul {
  padding-left: var(--skcn-space-3);
  list-style: none;
}

.skcn-section ul li {
  position: relative;
  padding-left: var(--skcn-space-2);
  margin-bottom: 4px;
}

.skcn-section ul li::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--skcn-rouge);
}

/* Hero — la photo touche le header (aucun espace blanc au-dessus) et va
   jusqu'au bord droit de l'écran, même au-delà de la largeur max 1440px. */

.skcn-hero__inner {
  display: grid;
  /* 20% texte / 80% photo : la photo doit dominer davantage la composition. */
  grid-template-columns: var(--skcn-bleed) minmax(0, 1fr) minmax(0, 4fr);
  column-gap: var(--skcn-space-6);
  align-items: start;
}

.skcn-hero__intro {
  grid-column: 2;
  padding-top: var(--skcn-space-8);
}

.skcn-hero__title {
  font-size: var(--skcn-h1-size);
  max-width: 5ch; /* force le retour à la ligne mot par mot, comme la maquette */
  margin-bottom: var(--skcn-space-2);
}

.skcn-hero__tagline {
  font-size: 1.5rem; /* 24px */
  font-family: var(--skcn-font-body);
}

.skcn-hero__stamp {
  width: 60px;
  height: auto;
  margin-top: var(--skcn-space-2);
}

.skcn-hero__media {
  grid-column: 3;
  position: relative;
  /* overflow:hidden nécessaire pour que object-fit: cover recadre proprement
     quand une hauteur fixe est imposée (ici comme en mobile) sans jamais
     déformer la photo. Hauteur plafonnée à 670px pour que la section Hero
     ne devienne pas trop haute sur les grands écrans (voir mobile pour le
     recadrage propre à ce format). */
  overflow: hidden;
  height: 670px;
  max-height: 670px;
}

.skcn-hero__media img.skcn-hero__photo {
  width: 100%;
  height: 100%;
  display: block;
  /* Remplit toujours son cadre sans étirement ni déformation, quelle que
     soit la hauteur imposée (recadrage plutôt qu'étirement). */
  object-fit: cover;
}

.skcn-hero__overlay {
  position: absolute;
  inset: 0; /* recouvre exactement la photo (avant : 3% de marge non couverte en haut/bas) */
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.skcn-hero__logo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 45%;
  max-width: 260px;
  height: auto;
}

.skcn-hero__credit {
  position: absolute;
  /* En haut à droite : le bas de la photo est maintenant chevauché par la
     carte "Saison" sticky, plus de place pour le crédit là en bas. */
  top: var(--skcn-space-1);
  right: var(--skcn-space-1);
  font-size: 0.6875rem; /* 11px */
  background: rgba(0, 0, 0, 0.55);
  color: var(--skcn-blanc);
  padding: 2px 8px;
  border-radius: 4px;
  text-decoration: none;
  /* Cible tactile d'au moins 24x24 px (WCAG 2.2, critère 2.5.8 « Taille de
     cible (minimum) »). Ce lien est isolé au-dessus de la photo, il ne
     bénéficie donc pas de l'exception prévue pour les liens intégrés dans
     une phrase. inline-flex + min-height plutôt qu'un simple padding :
     la hauteur est ainsi garantie quelles que soient les métriques de la
     police, et le texte reste centré dans la pastille. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Infos pratiques : le texte reste positionné/contraint par .skcn-bleed-left
   (pour ne jamais passer sous la carte "Saison"), mais le fond noir, lui,
   doit visuellement couvrir toute la largeur de l'écran — d'où un ::before
   séparé, indépendant de la boîte qui positionne le texte. */
.skcn-band--noir {
  background: transparent;
  color: var(--skcn-blanc);
  position: relative;
  z-index: 0; /* contient le ::before (z-index négatif) à CE bloc précisément */
}

.skcn-band--noir::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0; /* le bord gauche de la boîte est déjà au bord du viewport (bleed-left) */
  /* IMPORTANT : width, pas "right: -100vw" — combiné à left:0 sur une boîte
     absolue en auto-width, "right" s'ADDITIONNE à left plutôt que de le
     remplacer (largeur = containerWidth + 100vw), ce qui créait un
     débordement horizontal et une barre de scroll indésirable. */
  width: 100vw;
  background: var(--skcn-noir);
  z-index: -1;
}

.skcn-band--noir h2,
.skcn-band--noir h3 {
  color: var(--skcn-blanc);
}

.skcn-band--noir .skcn-accent-bar {
  position: absolute;
  left: 0;
  bottom: -60px;
  width: 96px;
  height: 260px;
  background: var(--skcn-rouge);
  z-index: -1; /* le texte doit toujours pouvoir passer par-dessus, quel que soit le responsive */
}

.skcn-infos-pratiques__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--skcn-space-6);
}

/* Contact : carte noire centrée */
.skcn-contact-card {
  background: var(--skcn-noir);
  color: var(--skcn-blanc);
  max-width: 520px;
  margin-inline: auto;
  padding: var(--skcn-space-4) var(--skcn-space-6);
  text-align: center;
}

.skcn-contact-card h2 {
  color: var(--skcn-blanc);
}

.skcn-contact-card__line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--skcn-space-2);
}

.skcn-contact-card__line img {
  width: 18px;
  height: auto;
  flex-shrink: 0;
}

/* Actualités (aperçu sur l'accueil) : bande noire + carte rouge en aparté.
   Le fond noir ne touche pas le bord gauche de l'écran : il démarre au
   milieu de la carte rouge "Actualités" (comme sur la maquette Figma),
   grâce à une carte qui occupe deux sous-colonnes égales et un fond qui
   ne démarre qu'à la 2e — donc pile à son milieu. */
.skcn-actu-preview {
  color: var(--skcn-blanc);
  position: relative;
  padding-block: var(--skcn-space-6);
  margin-top: var(--skcn-space-8);
}

.skcn-actu-preview__inner {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(120px, 0.5fr) minmax(120px, 0.5fr) 2fr;
  column-gap: var(--skcn-space-6);
  align-items: start;
}

.skcn-actu-preview__bg {
  position: absolute;
  /* Déborde au-dessus/en dessous du contenu pour créer un vrai "respire"
     entre le texte et le bord du fond noir (sinon le fond touchait le
     texte, verticalement). */
  top: calc(-1 * var(--skcn-space-8));
  bottom: calc(-1 * var(--skcn-space-8));
  left: 0;
  right: calc(-1 * var(--skcn-bleed));
  background: var(--skcn-noir);
  z-index: -1;
  grid-column: 2 / 4;
}

.skcn-actu-preview__card {
  grid-column: 1 / 3;
  background: var(--skcn-rouge);
  color: var(--skcn-noir);
  padding: var(--skcn-space-4);
  margin-left: calc(var(--skcn-space-3) * -1);
}

.skcn-actu-preview__card h2 {
  color: var(--skcn-noir);
}

.skcn-actu-preview__card a {
  color: var(--skcn-noir);
}

.skcn-liens-utiles {
  grid-column: 3;
}

.skcn-liens-utiles h3 {
  color: var(--skcn-blanc);
}

.skcn-liens-utiles ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.skcn-liens-utiles li {
  padding: var(--skcn-space-1) 0;
}

.skcn-liens-utiles a {
  text-decoration: underline;
}

/* Colonne simple : pages statiques (page.php), erreurs 404 (404.php) et
   gabarit générique de secours (index.php). Sans marge haute, le <h1>
   venait coller au header sticky. */
.skcn-page {
  padding-block: var(--skcn-space-8);
}

/* Largeur de lecture confortable : au-delà d'environ 80 caractères par
   ligne, l'œil perd le début de la ligne suivante — gêne réelle pour les
   personnes dyslexiques (WCAG 1.4.8 vise 80 caractères).
   À savoir : cette contrainte s'applique aussi aux blocs Gutenberg "pleine
   largeur" placés dans une page. Retirer la règle si le club a besoin d'y
   insérer une carte, un tableau large ou un formulaire. */
.skcn-page article,
.skcn-page__contenu {
  max-width: 75ch;
}

.skcn-page img {
  margin-block: var(--skcn-space-3);
}

/* Pagination interne d'un article ou d'une page découpés avec la balise
   <!--nextpage--> (single.php et page.php). */
.skcn-link-pages {
  margin-top: var(--skcn-space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--skcn-space-2);
  font-family: var(--skcn-font-h);
}

/* ==========================================================================
   7. Page Actualités (archive)
   ========================================================================== */
.skcn-actualites-header {
  text-align: center;
  padding-block: var(--skcn-space-8) var(--skcn-space-6);
  /* Compense le margin-top: -100px de la carte "Saison" sticky, pour
     qu'elle ne passe pas sur le titre de la page (valeur réduite en même
     temps que le margin-top ci-dessus, pour garder le même espace visuel). */
  margin-bottom: 60px;
}

.skcn-actualites-header img {
  margin-inline: auto;
  width: 220px;
  height: auto;
  margin-bottom: var(--skcn-space-3);
}

.skcn-actualites {
  padding-bottom: var(--skcn-space-8);
}

.skcn-actualites article {
  /* position: relative SANS z-index : on ne crée volontairement pas de
     nouveau contexte d'empilement ici, sinon ::before (z-index:-1) reste
     coincé AU-DESSUS du fond blanc de cet élément (juste en dessous de son
     contenu) au lieu de passer derrière toute la carte. */
  position: relative;
  background: var(--skcn-blanc);
  border: 1px solid var(--skcn-noir);
  padding: var(--skcn-space-4);
  margin-bottom: var(--skcn-space-6);
}

/* Carte noire décalée en fond, comme un "double" de la fiche */
.skcn-actualites article::before {
  content: "";
  position: absolute;
  top: var(--skcn-space-3);
  left: calc(var(--skcn-space-3) * -1);
  width: 100%;
  height: 100%;
  background: var(--skcn-noir);
  z-index: -1;
}

.skcn-actualites article ul {
  list-style: none;
  padding-left: var(--skcn-space-2);
  margin: 0 0 var(--skcn-space-2);
}

.skcn-actualites article li {
  position: relative;
  padding-left: var(--skcn-space-2);
}

.skcn-actualites article li::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--skcn-noir);
}

/* La date des articles n'est pas affichée (la maquette la reprend dans le
   titre), mais elle n'est plus supprimée par display: none — qui la
   retirait aussi de l'arbre d'accessibilité. Le <time> porte désormais la
   classe .sr-only dans home.php et archive.php : invisible à l'écran,
   toujours annoncée par les lecteurs d'écran. */

.skcn-pagination {
  background: var(--skcn-noir);
  padding: var(--skcn-space-6) var(--skcn-space-3);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: var(--skcn-space-4);
  align-items: center;
}

.skcn-pagination__card {
  background: var(--skcn-rouge);
  /* Texte noir et non blanc : le blanc sur rouge ne donne que 3,70:1, ce
     qui ne passe qu'au-dessus de 24px — donc pour le titre actuel, mais
     pour rien de ce qui pourrait y être ajouté ensuite. Le noir donne
     5,68:1 à toute taille, et c'est déjà le traitement des trois autres
     cartes rouges du thème (carte Saison, encart Actualités, surligné). */
  color: var(--skcn-noir);
  padding: var(--skcn-space-4);
  margin-left: calc(var(--skcn-space-3) * -1);
}

/* Le titre de cette carte est tantôt un lien (archives annuelles), tantôt
   un simple texte (page Actualités). Le soulignement le distingue sans
   reposer uniquement sur la couleur (WCAG 1.4.1). */
.skcn-pagination__card a {
  text-decoration: underline;
}

/* Date d'un article ouvert seul (single.php). Masquée dans les listes, où
   la maquette la reprend dans le titre, elle est en revanche affichée ici :
   rien d'autre ne situe l'actualité dans le temps. */
.skcn-article-date {
  font-family: var(--skcn-font-h);
  margin: 0;
}

/* Navigation vers l'actualité précédente / suivante (single.php). Même
   bandeau noir que la pagination par années, mais les libellés sont des
   titres d'articles : ils ne supporteraient pas le 1.75rem des années. */
.skcn-pagination__adjacent {
  display: flex;
  flex-wrap: wrap;
  gap: var(--skcn-space-2) var(--skcn-space-4);
}

.skcn-pagination__adjacent a {
  color: var(--skcn-blanc);
  text-decoration: underline;
}

.skcn-pagination__adjacent-vide {
  color: var(--skcn-blanc);
  margin: 0;
}

.skcn-pagination__years {
  display: flex;
  /* flex-wrap indispensable : le club publie depuis 1975, et body porte
     overflow-x: hidden — sans retour à la ligne, les dernières années
     sortaient du viewport sans possibilité de les atteindre (WCAG 1.4.10). */
  flex-wrap: wrap;
  gap: var(--skcn-space-3) var(--skcn-space-4);
}

.skcn-pagination__years a {
  font-family: var(--skcn-font-h);
  font-size: 1.75rem; /* 28px */
  color: var(--skcn-blanc);
  text-decoration: underline;
}

/* ==========================================================================
   8. Footer
   ========================================================================== */
.skcn-footer {
  padding-block: var(--skcn-space-4);
  background: var(--skcn-blanc);
  color: var(--skcn-noir);
  font-size: 0.875rem; /* 14px */
  text-align: center;
}

.skcn-footer a {
  text-decoration: underline;
  /* Cible tactile portée à 24 px de haut (WCAG 2.2, critère 2.5.8). Le lien
     reste en display: inline — sur un élément inline, le padding vertical
     agrandit la zone cliquable sans modifier la hauteur de ligne ni décaler
     la ligne de base : la mise en page du pied de page est donc strictement
     inchangée, seule la surface de clic grandit. */
  padding-block: 3px;
}

/* ==========================================================================
   9. Responsive — base mobile en attendant la maquette dédiée de Marie
   ========================================================================== */
@media (max-width: 780px) {
  /* --- Header : menu burger, la nav ne tient plus sur une ligne --- */
  .skcn-header__inner {
    display: grid;
    /* 1fr (pas "auto") sur la colonne du logo : quand la nav s'ouvre, elle
       occupe une des deux colonnes ("grid-column: 1 / -1"), ce qui peut
       agrandir une colonne "auto" pour loger son contenu et donc décaler
       le bouton burger. Une colonne flexible absorbe cet espace en premier
       et laisse la colonne du bouton (largeur fixe) immobile. */
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding-block: var(--skcn-space-2);
  }

  .skcn-header__logo {
    grid-column: 1;
    grid-row: 1;
  }

  .skcn-nav-toggle {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    position: relative;
  }

  /* Header fixe en mobile : le burger doit rester accessible où qu'on soit
     dans la page. On compense avec un padding-top équivalent à la hauteur
     du header fermé (voir min-height sur .skcn-header__inner) sur le
     premier élément de contenu de chaque gabarit. */
  .skcn-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-height: 100vh;
    overflow-y: auto;
  }

  /* .skcn-page ajouté : index.php sert en réalité tous les articles seuls,
     toutes les pages statiques, la recherche et les 404 (le thème n'a ni
     single.php ni page.php) — son contenu démarrait donc derrière le
     header fixe. */
  .skcn-front-page,
  .skcn-actualites-header {
    padding-top: var(--skcn-header-h);
  }

  /* .skcn-page a besoin des deux : dégager le header fixe ET garder sa
     respiration verticale, sans quoi le <h1> démarre au ras du bandeau
     (padding-top écrase le padding-block, il ne s'y ajoute pas). */
  .skcn-page {
    padding-top: calc(var(--skcn-header-h) + var(--skcn-space-6));
  }

  .skcn-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: none;
    width: 100%;
    min-width: 0; /* évite que le contenu de la nav ne pousse les colonnes */
  }

  .skcn-header__inner.skcn-nav-is-open .skcn-nav {
    display: block;
  }

  .skcn-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--skcn-space-2);
    padding-block: var(--skcn-space-2) var(--skcn-space-3);
  }

  :root {
    --skcn-h1-size: 2.5rem; /* 40px */
    --skcn-h2-size: 1.75rem; /* 28px */
  }

  .skcn-hero__title {
    max-width: none;
  }

  .skcn-section__inner,
  .skcn-hero__inner,
  .skcn-infos-pratiques__grid,
  .skcn-actu-preview__inner,
  .skcn-pagination,
  .skcn-sticky-wrap {
    grid-template-columns: 1fr;
  }

  /* Les colonnes explicites (grid-column: 2, 3, 1/3...) définies pour le
     desktop n'ont plus de sens sur une seule colonne : on les remet en
     flux normal (ordre du DOM). */
  .skcn-hero__intro,
  .skcn-hero__media,
  .skcn-actu-preview__card,
  .skcn-liens-utiles {
    grid-column: auto;
  }

  /* --- Hero : padding, texte + sceau centrés, photo à hauteur fixe --- */
  .skcn-hero__inner {
    row-gap: var(--skcn-space-4);
    padding-top: var(--skcn-space-4);
  }

  .skcn-hero__intro {
    padding-top: 0;
    padding-inline: 20px;
    text-align: center;
  }

  .skcn-hero__intro img.skcn-hero__stamp {
    margin-inline: auto;
  }

  .skcn-hero__media {
    padding-top: 0;
    height: 325px;
  }

  /* Sur mobile, le crédit repasse en bas à droite (en desktop il est en
     haut à droite pour laisser la place à la carte "Saison" qui chevauche
     le bas du hero — ce chevauchement ne s'applique pas en mobile). */
  .skcn-hero__credit {
    top: auto;
    bottom: var(--skcn-space-1);
  }

  /* --- Marges réduites entre le hero/association/cours --- */
  .skcn-hero {
    padding-bottom: var(--skcn-space-4);
  }

  .skcn-section {
    padding-block: var(--skcn-space-4);
  }

  /* Pas de place pour une colonne sticky en mobile : la carte repasse en
     flux normal, après le contenu principal, sans chevaucher le hero, et
     avec un espace réduit par rapport à la section Contact. */
  .skcn-sticky-wrap__aside {
    position: static;
    top: auto;
    margin-top: var(--skcn-space-1);
  }

  /* Le titre "Saison 2026-2027" est centré en mobile. */
  .skcn-infos-card h2 {
    text-align: center;
  }

  .skcn-section--reverse .skcn-section__media {
    order: 0;
  }

  .skcn-actu-preview__card,
  .skcn-pagination__card {
    margin-left: 0;
  }

  /* La carte rouge "Actualités" avait perdu son padding-top dans le reset
     de grid-column ci-dessus (elle n'en a pas besoin en desktop où le
     padding vient d'ailleurs) : on lui redonne un peu d'air en haut, et
     un espace avant "Les liens pour aller plus loin" qui la suit. */
  .skcn-actu-preview__card {
    padding-top: 30px;
    margin-bottom: 36px;
  }

  /* Le fond noir de la bande "Actualités / liens utiles" redevient un
     bandeau classique pleine largeur plutôt que la version alignée sur
     la carte rouge (technique desktop uniquement). */
  .skcn-actu-preview__bg {
    display: none;
  }

  .skcn-actu-preview {
    background: var(--skcn-noir);
  }

  .skcn-band--noir .skcn-accent-bar {
    display: none;
  }

  /* Les bandeaux "bleed-left" : le texte repasse en padding classique,
     mais le fond noir (::before) doit rester pleine largeur — donc on
     compense le padding du container pour qu'il touche bien les deux
     bords de l'écran. */
  .skcn-bleed-left {
    margin-left: 0;
    padding-left: var(--skcn-space-3);
    padding-right: var(--skcn-space-3);
  }

  .skcn-band--noir::before {
    left: calc(-1 * var(--skcn-space-3));
  }

  /* La carte Contact devient pleine largeur (fond noir jusqu'aux bords). */
  .skcn-contact-card {
    max-width: none;
    margin-inline: calc(-1 * var(--skcn-space-3));
    padding-inline: var(--skcn-space-3);
  }

  .skcn-actualites article::before {
    left: calc(var(--skcn-space-2) * -1);
  }

  /* En mobile, la carte Saison repasse en flux normal (voir
     .skcn-sticky-wrap__aside plus haut) : plus besoin de la marge de 100px
     ajoutée pour desktop/tablette qui compensait le chevauchement du
     margin-top:-140px (qui, lui, ne s'applique qu'en desktop). */
  .skcn-actualites-header {
    margin-bottom: 0;
  }
}

/* --- Tablette (ex. Galaxy Tab S9, 712px) : les photos d'illustration des
   sections (association, cours, handicap) sont réduites et centrées plutôt
   que de garder la largeur 100% du mobile. --- */
@media (min-width: 600px) and (max-width: 780px) {
  .skcn-section__media img {
    width: 45%;
    margin-inline: auto;
    display: block;
  }
}