/* ============================================================
   XKS PUBLISHING — Feuille de styles principale
   ------------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Accessibilité
   4.  Header & navigation
   5.  Menu mobile
   6.  Hero
   7.  Boutons
   8.  Activités
   9.  Contact
   10. Pages d'erreur
   11. Footer
   12. Animations
   13. Fallbacks
   14. Responsive
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   Source unique de vérité. Aucune valeur brute hors de ce bloc.
   ============================================================ */
:root {
    /* --- Couleurs de marque --- */
    --color-primary:        #7c4dff;
    --color-primary-light:  #b47cff;
    --color-primary-hover:  #6d3dfa;  /* Survol : contraste AA avec texte blanc */
    --color-primary-dark:   #3f1dcb;

    /* --- Couleurs de fond --- */
    --color-bg:             #0a0a0c;
    --color-bg-elevated:    #1a1a2e;

    /* --- Couleurs de texte --- */
    --color-text:           #ffffff;
    --color-text-dim:       #a0a0ab;
    --color-text-on-primary:#ffffff;
    /* Texte posé sur une photo : plus clair que --color-text-dim,
       qui n'atteint pas le contraste AA sur un visuel lumineux. */
    --color-text-on-media:  #e6e6ec;

    /* --- Surfaces & bordures (verre) --- */
    --color-surface:        rgba(255, 255, 255, 0.05);
    --color-border:         rgba(255, 255, 255, 0.10);
    --color-border-strong:  rgba(255, 255, 255, 0.18);

    /* --- Voile du hero (texte sur photo) --- */
    --color-scrim-top:   rgba(10, 10, 12, 0.62);
    --color-scrim-mid:   rgba(10, 10, 12, 0.68);
    --color-glow-wash:   rgba(124, 77, 255, 0.10);

    /* --- Impression (contexte monochrome dédié) --- */
    --color-print-bg:    #ffffff;
    --color-print-text:  #000000;
    --color-print-dim:   #333333;

    /* --- Voiles opaques (dérivés de --color-bg) --- */
    --color-veil-medium:    rgba(10, 10, 12, 0.80);
    --color-veil-strong:    rgba(10, 10, 12, 0.94);
    --color-veil-solid:     rgba(10, 10, 12, 0.98);

    /* --- Familles typographiques --- */
    --font-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

    /* --- Échelle typographique --- */
    --fs-xs:     0.8rem;
    --fs-sm:     0.875rem;
    --fs-base:   1rem;
    --fs-md:     1.125rem;
    --fs-lg:     1.25rem;
    --fs-xl:     1.5rem;
    --fs-2xl:    2rem;
    --fs-logo:   1.75rem;
    --fs-title:  clamp(2rem, 5vw, 3.5rem);
    --fs-hero:   clamp(2.5rem, 9vw, 6rem);
    /* Déclinaisons du titre hero pour les écrans courts */
    --fs-hero-md:    clamp(2.25rem, 7vw, 4rem);
    --fs-hero-sm:    clamp(2rem, 6vw, 3rem);
    --fs-hero-xs:    clamp(1.75rem, 6vw, 2.5rem);
    --fs-code-compact: clamp(2.5rem, 8vw, 4rem);

    /* --- Graisses --- */
    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    900;

    /* --- Interlignes --- */
    --lh-tight:  0.95;
    --lh-snug:   1.4;
    --lh-base:   1.6;
    --lh-loose:  1.8;

    /* --- Interlettrages --- */
    --ls-tight:  -0.02em;
    --ls-wide:   0.06em;
    --ls-wider:  0.1em;

    /* --- Échelle d'espacement (base 4px) --- */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;
    --space-32:  8rem;
    --space-40:  10rem;

    /* --- Gouttières de page --- */
    --gutter:        5%;
    --gutter-narrow: 4%;

    /* --- Rayons --- */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   12px;
    --radius-xl:   20px;
    --radius-full: 999px;

    /* --- Ombres --- */
    --shadow-glow:       0 0 20px rgba(124, 77, 255, 0.30);
    --shadow-glow-hover: 0 10px 30px rgba(124, 77, 255, 0.50);

    /* --- Flous (glassmorphism) --- */
    --blur-sm: blur(12px);
    --blur-lg: blur(20px);

    /* --- Durées & courbes --- */
    --ease:         cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast:   0.2s;
    --duration-base:   0.3s;
    --duration-slow:   0.4s;
    --duration-slower: 0.6s;
    --duration-enter:  0.9s;

    --transition-base: all var(--duration-slow) var(--ease);

    /* --- Dimensions de composants --- */
    --tap-target: 44px;   /* Cible tactile minimale WCAG */
    --card-height:        360px;
    --card-height-tablet: 320px;
    --card-height-mobile: 300px;
    --bar-width:    20px;   /* Barres du bouton hamburger */
    --reveal-shift: 40px;   /* Décalage d'entrée des cartes */
    --enter-shift:  30px;   /* Décalage des animations d'entrée */
    --card-min:     300px;  /* Largeur mini d'une carte en grille auto */
    --content-max:  900px;
    --box-max:      800px;
    --measure:      600px;  /* Longueur de ligne lisible */

    /* --- Échelle z-index --- */
    --z-card-content: 5;
    --z-hero-content: 10;
    --z-nav-overlay:  900;
    --z-menu-toggle:  950;   /* Au-dessus du voile, sous le header */
    --z-header:       1000;
    --z-skip-link:    9999;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Compense le header fixe lors des sauts d'ancre */
    scroll-padding-top: var(--space-20);
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-base);
    background-color: var(--color-bg);
    color: var(--color-text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    text-transform: uppercase;
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-snug);
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--duration-base) var(--ease),
                border-color var(--duration-base) var(--ease);
}

button {
    font: inherit;
}

/* ============================================================
   3. ACCESSIBILITÉ
   ============================================================ */

/* Lien d'évitement */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: var(--z-skip-link);
    padding: var(--space-3) var(--space-6);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    transition: top var(--duration-fast) ease;
}

.skip-link:focus {
    top: var(--space-4);
}

/* Focus clavier visible */
:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

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

/* Masqué visuellement mais lisible par lecteur d'écran */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   4. HEADER & NAVIGATION
   ============================================================ */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: var(--z-header);
    padding: var(--space-6) var(--gutter);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    background: var(--color-veil-medium);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    border-bottom: 1px solid var(--color-border);
    transition: padding var(--duration-base) ease,
                background var(--duration-base) ease;
}

header.scrolled {
    padding: var(--space-4) var(--gutter);
    background: var(--color-veil-strong);
}

/* Logo — identique en header et footer */
.logo {
    font-family: var(--font-display);
    font-size: var(--fs-logo);
    font-weight: var(--fw-black);
    text-transform: uppercase;
    letter-spacing: var(--ls-tight);
    white-space: nowrap;
    background: linear-gradient(135deg, var(--color-text), var(--color-primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    flex-shrink: 0;
}

/* Liste de navigation — motif unique, réutilisé en header et footer */
.nav-list {
    display: flex;
    list-style: none;
    gap: var(--space-10);
    flex-wrap: wrap;
    justify-content: center;
}

.nav-list a {
    display: inline-block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--color-text-dim);
    /* Cible tactile agrandie par le padding, compensée par une marge
       négative : la zone cliquable grandit, le texte ne bouge pas. */
    padding: var(--space-3) var(--space-2);
    margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-2));
}

.nav-list a:hover {
    color: var(--color-primary-light);
}

/* État actif (piloté par JS via aria-current) */
.nav-list a[aria-current='true'] {
    color: var(--color-primary-light);
}

/* ============================================================
   5. MENU MOBILE
   ============================================================ */
.mobile-menu-toggle {
    display: none;
    justify-self: end;
    /* Le menu plein ecran est un descendant du header : sans z-index
       explicite, il se peint AU-DESSUS de ce bouton et rend la fermeture
       impossible au clic. */
    position: relative;
    z-index: var(--z-menu-toggle);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: var(--tap-target);
    height: var(--tap-target);
    padding: var(--space-2);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color var(--duration-base) ease;
}

.mobile-menu-toggle:hover {
    border-color: var(--color-primary-light);
}

.mobile-menu-toggle span {
    display: block;
    width: var(--bar-width);
    height: 2px;
    background: var(--color-text);
    border-radius: var(--radius-xs);
    transform-origin: center;
    transition: transform var(--duration-base) var(--ease),
                opacity var(--duration-fast) ease;
}

/* État ouvert — croix */
.mobile-menu-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-menu-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   6. HERO
   ============================================================ */
.hero {
    min-height: 100vh;
    min-height: 100svh;   /* Évite le saut lié à la barre d'URL mobile */
    display: flex;
    text-align: center;
    position: relative;
    padding: var(--space-32) var(--gutter) var(--space-24);
    /* Voile assombrissant : sans lui, le texte posé sur la photo
       (badge, titre, accroche) n'atteint pas le contraste AA. */
    background:
        linear-gradient(
            180deg,
            var(--color-scrim-top) 0%,
            var(--color-scrim-mid) 45%,
            var(--color-bg) 100%
        ),
        url('assets/hero.png') no-repeat center center / cover;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, var(--color-glow-wash) 0%, transparent 70%);
    pointer-events: none;
}

/* `margin: auto` centre sur les deux axes SANS jamais bloquer le
   défilement : si le contenu dépasse, les marges se réduisent à 0
   au lieu de rogner le haut et le bas (piège de `justify-content: center`). */
.hero-content {
    position: relative;
    z-index: var(--z-hero-content);
    max-width: var(--content-max);
    margin: auto;
}

.badge {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    margin-bottom: var(--space-6);
    /* Pastille opaque : le violet a besoin d'un fond sombre stable,
       une surface à 5 % ne suffit pas au-dessus d'une photo. */
    background: var(--color-veil-strong);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--color-primary-light);
    animation: fadeInDown var(--duration-enter) ease both;
}

.hero h1 {
    font-size: var(--fs-hero);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-6);
    animation: fadeInUp var(--duration-enter) ease both;
    animation-delay: 0.1s;
}

.hero p {
    font-size: var(--fs-lg);
    color: var(--color-text-on-media);
    max-width: var(--measure);
    margin: 0 auto var(--space-10);
    animation: fadeInUp var(--duration-enter) ease both;
    animation-delay: 0.2s;
}

.hero-actions {
    animation: fadeInUp var(--duration-enter) ease both;
    animation-delay: 0.3s;
}

/* ============================================================
   7. BOUTONS
   ============================================================ */
.cta-button {
    display: inline-block;
    padding: var(--space-4) var(--space-10);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    cursor: pointer;
    box-shadow: var(--shadow-glow);
    transition: var(--transition-base);
}

.cta-button:hover {
    background: var(--color-primary-hover);
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow-hover);
}

.cta-button:active {
    transform: translateY(-1px);
}

/* ============================================================
   8. ACTIVITÉS
   ============================================================ */
.activities {
    padding: var(--space-32) var(--gutter);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
    gap: var(--space-12);
}

.activity-card {
    position: relative;
    height: var(--card-height);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: transform var(--duration-slower) ease,
                opacity var(--duration-slower) ease,
                border-color var(--duration-slow) ease,
                box-shadow var(--duration-slow) ease;
}

/* Révélation au scroll — activée uniquement si JS est disponible.
   Sans JS, les cartes restent visibles (aucun contenu masqué). */
.js .activity-card {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
}

.js .activity-card:nth-child(1) { transition-delay: 0s; }
.js .activity-card:nth-child(2) { transition-delay: 0.12s; }
.js .activity-card:nth-child(3) { transition-delay: 0.24s; }

.js .activity-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.activity-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-glow);
}

.card-image {
    position: absolute;
    inset: 0;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6) grayscale(20%);
    transition: filter var(--duration-slower) ease,
                transform var(--duration-slower) ease;
}

.activity-card:hover .card-image img {
    transform: scale(1.08);
    filter: brightness(0.75) grayscale(0%);
}

.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--space-10);
    z-index: var(--z-card-content);
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--color-veil-medium) 45%,
        var(--color-veil-strong) 100%
    );
}

.card-content h2 {
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-3);
}

/* Descriptions toujours visibles : parité desktop / mobile,
   et accessibilité tactile + clavier (pas de contenu réservé au survol). */
.card-content p {
    color: var(--color-text-dim);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

/* ============================================================
   9. CONTACT
   ============================================================ */
.contact-cta {
    padding: var(--space-40) var(--gutter);
    text-align: center;
    background: radial-gradient(circle at center, var(--color-bg-elevated), var(--color-bg));
}

.contact-box {
    max-width: var(--box-max);
    margin: 0 auto;
    padding: var(--space-16);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
}

.contact-box h2 {
    font-size: var(--fs-title);
    margin-bottom: var(--space-6);
}

.contact-box p {
    color: var(--color-text-dim);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    margin-bottom: var(--space-10);
}

.email-link {
    color: var(--color-primary-light);
    font-weight: var(--fw-bold);
    border-bottom: 1px solid transparent;
}

.email-link:hover {
    border-bottom-color: var(--color-primary-light);
}

/* Repli sans JavaScript — masqué par défaut, révélé dans <noscript>.
   Défini ici (feuille externe) car la CSP interdit les styles en ligne. */
.noscript-fallback {
    color: var(--color-primary-light);
    font-weight: var(--fw-bold);
}

/* ============================================================
   10. PAGES D'ERREUR (404 / 500)
   ============================================================ */
.error-page {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    text-align: center;
    padding: var(--space-32) var(--gutter) var(--space-24);
    background: radial-gradient(circle at center, var(--color-bg-elevated), var(--color-bg));
}

.error-content {
    max-width: var(--box-max);
    margin: auto;   /* Même motif que .hero-content : centre sans rogner */
}

.error-code {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    background: linear-gradient(135deg, var(--color-text), var(--color-primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--space-4);
}

.error-content h1 {
    font-size: var(--fs-title);
    margin-bottom: var(--space-6);
}

/* `:not(.error-code)` est indispensable : `.error-content p` (0,1,1)
   l'emporte sinon sur `.error-code` (0,1,0) et ecrase la taille du code
   d'erreur, qui retombe a 18px au lieu de son echelle d'affichage. */
.error-content p:not(.error-code) {
    color: var(--color-text-dim);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    max-width: var(--measure);
    margin: 0 auto var(--space-10);
}

/* ============================================================
   11. FOOTER
   ============================================================ */
footer {
    padding: var(--space-16) var(--gutter);
    border-top: 1px solid var(--color-border);
    text-align: center;
    background: var(--color-bg);
}

.footer-logo {
    font-size: var(--fs-logo);
    margin-bottom: var(--space-6);
    display: block;
}

.footer-nav {
    margin-bottom: var(--space-8);
}

.footer-nav .nav-list {
    gap: var(--space-8);
}

.copyright {
    color: var(--color-text-dim);
    font-size: var(--fs-sm);
}

/* ============================================================
   12. ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(var(--enter-shift)); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   13. FALLBACKS
   ============================================================ */

/* Navigateurs sans backdrop-filter — on renforce l'opacité du fond */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    header {
        background: var(--color-veil-strong);
    }
    nav#navbar {
        background: var(--color-veil-solid);
    }
    .contact-box {
        background: var(--color-bg-elevated);
    }
}

/* Respect de la préférence « animations réduites » */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    /* Les cartes restent visibles sans translation */
    .js .activity-card {
        opacity: 1;
        transform: none;
    }

    .cta-button:hover,
    .activity-card:hover .card-image img {
        transform: none;
    }
}

/* ============================================================
   14. RESPONSIVE
   ------------------------------------------------------------
   Les seuils sont ecrits en pixels litteraux : la specification CSS
   n'autorise pas les custom properties dans une condition de media
   query. C'est la seule exception a la regle « tout vient des jetons ».

   Seuils utilises :
     480px  petits mobiles      600/601px  bascule de grille
     768/769px  mobile/tablette 1024px     tablette/desktop
     800px, 680px, 500px        paliers de HAUTEUR
   ============================================================ */

/* --- Tablette (769px – 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
    .activities {
        padding: var(--space-24) var(--gutter);
        gap: var(--space-8);
    }

    .activity-card {
        height: var(--card-height-tablet);
    }

    .contact-cta {
        padding: var(--space-24) var(--gutter);
    }

    .contact-box {
        padding: var(--space-12);
    }

    .nav-list {
        gap: var(--space-6);
    }
}

/* --- Mobile (≤ 768px) --- */
@media (max-width: 768px) {
    /* La nav est retiree du flux : deux colonnes suffisent et le logo
       recupere toute la largeur restante (sinon il passe sur 2 lignes). */
    header {
        grid-template-columns: 1fr auto;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* Menu plein écran.
       `inset: 0` fixe la hauteur au viewport et `overflow-y: auto` autorise
       le défilement. Le centrage est fait par `margin: auto` sur la liste,
       JAMAIS par `justify-content: center` : combiné au débordement, celui-ci
       rend le haut de la liste inatteignable (rien ne défile vers le haut). */
    nav#navbar {
        display: none;
        position: fixed;
        inset: 0;
        z-index: var(--z-nav-overlay);
        background: var(--color-veil-solid);
        backdrop-filter: var(--blur-lg);
        -webkit-backdrop-filter: var(--blur-lg);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Dégage la hauteur du header, qui reste au-dessus et cliquable */
        padding: var(--space-24) var(--gutter) var(--space-12);
    }

    nav#navbar.open {
        display: flex;
    }

    /* CRITIQUE : `backdrop-filter` sur le header en fait un bloc conteneur
       pour ses descendants en `position: fixed`. Le menu plein ecran serait
       alors rogne a la hauteur du header (~144px au lieu du viewport), et
       tout son contenu deviendrait inatteignable. On neutralise le filtre
       pendant l'ouverture : le menu fournit deja le fond, et le header
       (logo + bouton fermer) reste au-dessus via son z-index. */
    body.menu-open #main-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: transparent;
        border-bottom-color: transparent;
    }

    /* Le logo doit rester visible et cliquable par-dessus le voile */
    body.menu-open #main-header .logo {
        position: relative;
        z-index: var(--z-menu-toggle);
    }

    nav#navbar .nav-list {
        margin: auto;
        flex-direction: column;
        gap: var(--space-10);
        text-align: center;
    }

    nav#navbar .nav-list a {
        font-size: var(--fs-2xl);
        font-weight: var(--fw-bold);
        color: var(--color-text);
    }

    nav#navbar .nav-list a:hover,
    nav#navbar .nav-list a[aria-current='true'] {
        color: var(--color-primary-light);
    }

    .hero {
        padding: var(--space-24) var(--gutter) var(--space-20);
    }

    .hero p {
        font-size: var(--fs-base);
    }

    .activities {
        padding: var(--space-20) var(--gutter);
        gap: var(--space-8);
    }

    .activity-card {
        height: var(--card-height-mobile);
    }

    .card-content {
        padding: var(--space-6);
    }

    .contact-cta {
        padding: var(--space-24) var(--gutter);
    }

    .contact-box {
        padding: var(--space-10) var(--space-6);
    }

    .contact-box p {
        font-size: var(--fs-base);
    }

    .error-page {
        padding: var(--space-24) var(--gutter) var(--space-20);
    }

    .error-content p {
        font-size: var(--fs-base);
    }

    .footer-nav .nav-list {
        gap: var(--space-5);
    }
}

/* --- Petits mobiles (≤ 480px) --- */
@media (max-width: 480px) {
    header {
        padding: var(--space-4) var(--gutter-narrow);
    }

    header.scrolled {
        padding: var(--space-3) var(--gutter-narrow);
    }

    .logo {
        font-size: var(--fs-xl);
    }

    .activity-card {
        height: var(--card-height-mobile);
    }

    .cta-button {
        padding: var(--space-3) var(--space-8);
        font-size: var(--fs-xs);
    }

    nav#navbar .nav-list a {
        font-size: var(--fs-xl);
    }
}

/* ------------------------------------------------------------
   PALIERS DE GRILLE — activites
   Regles explicites plutot qu'un `auto-fit` qui produit, entre
   601 et 768px, deux colonnes avec une 3e carte orpheline.
     <= 600px       : 1 colonne
     601px – 1024px : 2 colonnes, 3e carte pleine largeur
     > 1024px       : 3 colonnes (regle de base)
   ------------------------------------------------------------ */
@media (max-width: 600px) {
    .activities {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 601px) and (max-width: 1024px) {
    .activities {
        grid-template-columns: repeat(2, 1fr);
    }

    .activity-card:nth-child(3) {
        grid-column: 1 / -1;
    }
}

/* ------------------------------------------------------------
   PALIERS DE HAUTEUR
   La hauteur casse plus souvent que la largeur. Cibles réelles :
   13" 1366x768 (~640 px utiles), 14" 1080p à 125–150 % (~620 px),
   tablette en paysage. On COMPACTE le contenu au lieu de le
   faire défiler.
   ------------------------------------------------------------ */

/* --- Écrans courts (≤ 800px de haut) : 13"/14" à l'échelle --- */
@media (max-height: 800px) {
    .hero {
        padding-top: var(--space-24);
        padding-bottom: var(--space-16);
    }

    .hero h1 {
        font-size: var(--fs-hero-md);
        margin-bottom: var(--space-4);
    }

    .hero p {
        margin-bottom: var(--space-8);
    }

    .badge {
        margin-bottom: var(--space-4);
    }

    .error-page {
        padding-top: var(--space-24);
        padding-bottom: var(--space-16);
    }
}

/* --- Écrans très courts (≤ 680px de haut) --- */
@media (max-height: 680px) {
    .hero,
    .error-page {
        min-height: auto;
        padding-top: var(--space-20);
        padding-bottom: var(--space-12);
    }

    .hero h1 {
        font-size: var(--fs-hero-sm);
        margin-bottom: var(--space-3);
    }

    .hero p {
        font-size: var(--fs-base);
        margin-bottom: var(--space-6);
    }

    .badge {
        margin-bottom: var(--space-3);
        padding: var(--space-1) var(--space-4);
    }

    .error-code {
        font-size: var(--fs-code-compact);
    }

    .error-content h1 {
        margin-bottom: var(--space-4);
    }

    .error-content p {
        font-size: var(--fs-base);
        margin-bottom: var(--space-6);
    }

    .activities,
    .contact-cta {
        padding-top: var(--space-16);
        padding-bottom: var(--space-16);
    }
}

/* --- Paysage sur petit écran --- */
@media (max-height: 500px) and (orientation: landscape) {
    .hero,
    .error-page {
        min-height: auto;
        padding: var(--space-20) var(--gutter) var(--space-10);
    }

    .hero h1 {
        font-size: var(--fs-hero-xs);
    }

    .hero p {
        font-size: var(--fs-sm);
        margin-bottom: var(--space-5);
    }

    .activities,
    .contact-cta {
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
    }

    /* Menu : liste alignée en haut et défilante, jamais rognée */
    nav#navbar {
        padding-top: var(--space-20);
        padding-bottom: var(--space-10);
    }

    nav#navbar .nav-list {
        margin: 0 auto;
        gap: var(--space-5);
    }

    nav#navbar .nav-list a {
        font-size: var(--fs-lg);
    }
}

/* --- Impression --- */
@media print {
    header,
    .mobile-menu-toggle,
    .skip-link,
    .hero::after {
        display: none;
    }

    body {
        background: var(--color-print-bg);
        color: var(--color-print-text);
    }

    .card-content p,
    .contact-box p,
    .copyright {
        color: var(--color-print-dim);
    }
}