/* ==========================================================================
   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; }

/* --------------------------------------------------------------------------
   Adaptation à l'entrée tactile (11 août 2026)

   Sur un écran tactile, :hover ne se comporte pas comme avec une souris : il
   s'applique à l'appui et RESTE ensuite jusqu'à ce qu'on touche ailleurs. Les
   effets de survol du site — cartes qui se soulèvent de quelques pixels avec
   une ombre portée — restaient donc figés en position haute après chaque
   toucher, sur une carte choisie au hasard par le doigt du visiteur. Le public
   premier du site étant un parent sur son téléphone (PRODUCT.md), c'est l'état
   que la plupart des visiteurs voyaient.

   Regroupé ici plutôt que dupliqué dans les neuf pages/*.css : la modalité
   d'entrée est une préoccupation transversale, et ces fichiers sont des
   portages fidèles de l'export Floot qu'il vaut mieux ne pas parsemer de
   media queries. Aucune de ces douze cartes ne porte d'ombre ni de
   transformation au repos (vérifié) : les remettre à `none` restitue donc
   exactement leur état normal, sans avoir à deviner une valeur d'origine.

   Volontairement limité aux effets de RELIEF. Les survols qui ne changent
   qu'une couleur restent actifs : un changement de teinte figé ne se remarque
   pas et sert de retour visuel à l'appui, ce que le tactile n'a pas autrement.
   -------------------------------------------------------------------------- */
/* Le préfixe :root n'est pas décoratif, il est NÉCESSAIRE. inc/header.php
   charge ce fichier AVANT la feuille de la page ; à spécificité égale, c'est
   la dernière déclarée qui l'emporte, et « .page--tarifs .pricingCard:hover »
   pèse exactement autant ici que là-bas. Sans lui, tout ce bloc serait du code
   mort — vérifié dans le navigateur avant d'écrire ces lignes. :root ajoute un
   niveau de spécificité (0,4,0 contre 0,3,0) sans changer ce qui est ciblé, et
   sans recourir à !important, qu'aucune règle du site n'utilise. */
@media (hover: none) {
  :root .page--accueil .statBox:hover,
  :root .page--accueil .courseCard:hover,
  :root .page--a-propos .statCard:hover,
  :root .page--a-propos .missionCard:hover,
  :root .page--professeurs .professorsCard:hover,
  :root .page--professeurs .expertiseCard:hover,
  :root .page--programme .techCard:hover,
  :root .page--style .pillarCard:hover,
  :root .page--style .gradeCard:hover,
  :root .page--glossaire .termCard:hover,
  :root .page--tarifs .pricingCard:hover,
  :root .page--horaires .dayRow:hover,
  :root .bouton:hover {
    transform: none;
    box-shadow: none;
  }

  /* .bouton--primaire porte une ombre AU REPOS, que la règle ci-dessus vient
     d'effacer avec les autres : on la lui rend. */
  :root .bouton--primaire:hover {
    box-shadow: var(--shadow);
  }

  /* Même cas pour la formule mise en avant de la page Tarifs. */
  :root .page--tarifs .pricingCard[data-featured="true"]:hover {
    box-shadow: var(--shadow);
  }
}

/* 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); }