/* ==========================================================================
   Socle CSS — recopié à l'identique depuis l'export Floot officiel :
   _floot-export/base.css + _floot-export/global.css (global.css est un
   sous-ensemble strict de base.css : mêmes imports de polices, mêmes tokens
   :root et .dark ; base.css y ajoute uniquement le reset @layer base et la
   règle .rbc-month-view). Aucune valeur n'a été arrondie, convertie ou
   reformulée — seuls les commentaires de section ci-dessous ont été ajoutés.

   DEUX ÉCARTS À CETTE COPIE CONFORME, tous deux issus de l'audit technique du
   6 août 2026 et listés ici pour que la divergence avec l'export d'origine
   reste traçable :

   1. Les quatre @import vers fonts.googleapis.com sont retirés au profit de
      polices auto-hébergées, désormais déclarées dans assets/css/fonts.css
      (chargée avant cette feuille par inc/header.php). Motifs détaillés dans
      l'en-tête de ce fichier : RGPD, indépendance vis-à-vis d'un CDN tiers,
      et suppression d'une chaîne bloquante de trois allers-retours réseau.
      Les tokens --font-family-* ci-dessous sont inchangés : c'est uniquement
      la provenance des fichiers de police qui change, pas la typographie.

   2. Le bloc `.dark { ... }` (35 lignes de tokens de mode sombre) est retiré.
      Il était mort : aucun sélecteur de thème n'existe sur ce site, aucun
      élément ne porte ni ne pose jamais la classe `dark`, et layout.css
      documente déjà l'omission volontaire du mode sombre côté layout
      (« Mode: Light Mode Only »). Le laisser entretenait l'illusion d'un
      mode sombre fonctionnel dans une feuille bloquant le rendu. Si le club
      veut un jour un thème sombre, l'export Floot d'origine reste dans
      _floot-export/ et le bloc est récupérable tel quel dans l'historique
      git.
   ========================================================================== */

:root {
  /* Content layers */
  --z-content-low: 10; /* Minor elevated content */
  --z-content: 20; /* Standard elevated content */
  --z-content-high: 30; /* Important content that needs prominence */

  /* Navigation layers */
  --z-nav-low: 100; /* Secondary navigation components */
  --z-nav: 200; /* Primary navigation bars */
  --z-nav-sticky: 300; /* Sticky navigation elements */

  /* Overlay layers */
  --z-overlay: 400;

  --z-spotlight: 1000; /* Tutorial spotlights/guided help */

  /* System layers */
  --z-critical: 2000; /* Critical system notifications */

  /* spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
}

:root {
  /* Mode: Light Mode Only (The aesthetic relies on the "Rice Paper" feel) */

  /* Backgrounds - Warm, paper-like off-whites */
  --background: hsl(40 20% 96%);
  --foreground: hsl(220 40% 10%);

  /* Surfaces - Slightly elevated, warmer */
  --surface: hsl(40 25% 92%);
  --surface-foreground: hsl(220 40% 10%);

  /* Sidebar / Navigation */
  --sidebar: hsl(40 25% 90%);
  --sidebar-foreground: hsl(220 40% 10%);

  /* Cards - Distinct blocks */
  --card: hsl(40 30% 98%);
  --card-foreground: hsl(220 40% 10%);

  /* Popups */
  --popup: hsl(40 30% 98%);
  --popup-foreground: hsl(220 40% 10%);

  /* Primary - Deep Indigo (Aizome) */
  --primary: hsl(225 45% 25%);
  --primary-foreground: hsl(40 20% 96%);

  /* Secondary - Burnt Clay / Terracotta */
  --secondary: hsl(15 65% 45%);
  --secondary-foreground: hsl(40 20% 96%);

  /* Accent - Gold/Ochre for belts/highlights */
  --accent: hsl(42 80% 55%);
  --accent-foreground: hsl(220 40% 10%);

  /* Muted - Stone Grey */
  --muted: hsl(220 10% 85%);
  --muted-foreground: hsl(220 20% 40%);

  /* Functional Colors */
  --success: hsl(150 40% 35%);
  --success-foreground: hsl(0 0% 100%);
  --error: hsl(0 60% 45%);
  --error-foreground: hsl(0 0% 100%);
  --warning: hsl(35 80% 50%);
  --warning-foreground: hsl(0 0% 10%);
  --info: hsl(200 50% 45%);
  --info-foreground: hsl(0 0% 100%);
  --info-hover: hsl(200 50% 35%);
  --info-active: hsl(200 50% 25%);

  /* Borders - Thick and deliberate */
  --border: hsl(220 40% 10%);

  /* Font Families */
  --font-family-base: 'Sora', sans-serif;
  --font-family-heading: 'Teko', sans-serif;
  --font-family-monospace: 'Space Mono', monospace;
  --font-family-cursive: 'Kaushan Script', cursive; /* Used sparingly for "Do" (Way) concepts */

  /* Border Radius - Zero for discipline */
  --radius-sm: 0px;
  --radius: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-full: 0px;

  /* Shadows - Hard, directional shadows */
  --shadow: 2px 2px 0px 0px var(--border);
  --shadow-md: 4px 4px 0px 0px var(--border);
  --shadow-lg: 8px 8px 0px 0px var(--border);
  --shadow-focus: 0 0 0 2px var(--background), 0 0 0 4px var(--primary);

  /* Animation - Snappy and precise */
  --animation-duration-fast: 0.15s;
  --animation-duration-normal: 0.3s;
  --animation-duration-slow: 0.5s;

  /* Chart colors - Earthy and disciplined tones */
  --chart-color-1: hsl(225 45% 25%); /* Indigo */
  --chart-color-2: hsl(15 65% 45%);  /* Clay */
  --chart-color-3: hsl(42 80% 55%);  /* Gold */
  --chart-color-4: hsl(120 25% 35%); /* Moss Green */
  --chart-color-5: hsl(0 0% 20%);    /* Black Belt */

  /* Voiles neutres posés SUR les bandes de couleur sombre (indigo, terre
     cuite) : bordures fines et fonds légèrement détachés à l'intérieur d'un
     bloc déjà coloré. Ajout de l'audit du 6 août 2026 (P3) : ces valeurs
     étaient répétées en dur dans six feuilles de page (accueil, contact,
     a-propos, horaires), seul endroit du site à contourner le système de
     tokens. Volontairement du blanc et du noir transparents plutôt qu'une
     couleur de la charte : un voile neutre reste correct quelle que soit la
     couleur de fond sur laquelle il est posé, donc quelle que soit
     l'évolution future de la palette. Les trois intensités claires
     correspondent aux trois valeurs réellement employées dans la source
     Floot ; elles ne sont pas interchangeables (une bordure de 2px se pose
     avec --voile-clair-marque, une de 1px avec --voile-clair-moyen). */
  --voile-clair-leger:  rgba(255, 255, 255, 0.1);
  --voile-clair-moyen:  rgba(255, 255, 255, 0.2);
  --voile-clair-marque: rgba(255, 255, 255, 0.3);
  --voile-sombre-moyen: rgba(0, 0, 0, 0.2);
}
@layer base {
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-family-base);
  }

  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }


  button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  th, td {
    display: table-cell!important;
  }
}
.rbc-month-view {
  overflow: visible !important;
}

/* --------------------------------------------------------------------------
   Utilitaires transverses — ANCIENNEMENT dans assets/css/style.css (retiré,
   voir .superpowers/sdd/2026-08-05-site-php-karate-echirolles/
   task-css-convergence-report.md). N'appartiennent à AUCUNE page portée en
   particulier (utilisés par plusieurs pages à la fois, ou par le balisage du
   layout lui-même dans inc/nav.php et inc/header.php) : ils n'ont donc pas
   leur place dans un assets/css/pages/<page>.css scopé .page--<page>, ni
   dans assets/css/layout.css qui ne porte que le SharedLayout Floot. Valeurs
   inchangées par rapport à l'ancien style.css — seul l'emplacement change.
   -------------------------------------------------------------------------- */

/* Focus clavier — seule source du contrat d'accessibilité --shadow-focus
   (token déjà défini ci-dessus) sur tout le site : aucune page ni
   layout.css ne définit de style :focus-visible propre. */
:where(a, button, input, textarea):focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Confort de lecture réduit au minimum pour les utilisateurs demandant
   moins de mouvement — s'applique à toutes les transitions/animations du
   site (dont .bouton:hover ci-dessous). layout.css porte sa propre règle,
   plus étroite, pour l'animation d'ouverture du menu mobile uniquement. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Icônes inline (inc/icones.php, classe par défaut de icone()) : gabarit
   commun utilisé tel quel par la quasi-totalité des pages. Les pages qui
   ont besoin d'un gabarit différent le redéfinissent localement (ex.
   .page--contact .iconWrapper .icone). */
.icone { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.15em; }

/* Bouton — composant partagé par 404 et 6 des 9 pages portées (accueil,
   à propos, professeurs, horaires, tarifs, contact) ; aucune n'en reprend le
   style dans son propre pages/*.css, contrairement à .container ou aux
   titres. Design "Zen Brutalism" du projet (ombres dures, translate au
   survol), volontairement différent du Button.module.css Floot d'origine
   (fond dégradé color-mix, pas d'ombre) — voir le rapport de tâche. */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-6);
  border: 2px solid var(--border);
  font-family: var(--font-family-base);
  /* 700 et non 600 : Sora n'est embarquée qu'en 400/500/700 (assets/css/
     fonts.css), et l'algorithme d'appariement CSS résout une demande de 600
     vers la graisse supérieure la plus proche, soit 700. La déclaration
     annonce donc désormais ce qui est réellement rendu — aucun changement
     visuel, la page s'affichait déjà en 700. Même correction appliquée aux
     sept autres `font-weight: 600` du site (audit du 6 août 2026, P3). */
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.bouton--primaire { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow); }
.bouton--secondaire { background: transparent; color: var(--foreground); }

/* Variante du bouton secondaire posée SUR une bande de couleur sombre
   (--primary, --secondary). À cumuler avec .bouton--secondaire.

   Ajout de l'audit du 6 août 2026 (P1) : .bouton--secondaire tire son texte
   de --foreground et sa bordure de --border, deux quasi-noirs. Sur le fond
   papier c'est parfait (15,38:1, page À propos) ; posé sur la bannière Baby
   Karaté de la page Tarifs — fond --primary, indigo profond — le rapport
   tombait à 1,43:1 et le bouton disparaissait purement et simplement, texte
   ET bordure. Le composant n'avait aucune variante pour fond sombre, alors
   qu'il est partagé par sept pages : c'était un manque de contrat, pas un
   oubli local, d'où la correction ici et non dans tarifs.css. Mesuré après
   correction : 11,57:1 (--primary-foreground sur --primary). */
.bouton--secondaire.bouton--inverse {
  color: var(--primary-foreground);
  border-color: var(--primary-foreground);
}

.bouton:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-md); }
.bouton:active { transform: translate(0, 0); box-shadow: none; }

/* Badge — même constat que .bouton : utilisé par 8 des 9 pages portées,
   jamais redéfini dans leur propre pages/*.css. */
.badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border);
  font-family: var(--font-family-monospace);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Séparateur — utilisé par 3 pages (à propos, accueil, tarifs), jamais
   redéfini dans leur propre pages/*.css. */
.separateur {
  border: 0;
  border-top: 2px solid var(--border);
  margin: var(--spacing-8) 0;
}

/* Utilitaires d'accessibilité posés directement par le balisage du layout
   (inc/nav.php : bouton burger ; inc/header.php : lien d'évitement), hors
   du périmètre de layout.css (absents de SharedLayout.module.css). */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--primary); color: var(--primary-foreground);
  padding: var(--spacing-3) var(--spacing-4);
}
.skip-link:focus { left: var(--spacing-4); top: var(--spacing-4); z-index: var(--z-critical); }