/* ==========================================================================
   Private Ski Instructor — socle CSS (fondations)
   Mobile-first · Charte : blanc, bleu glacier, montagne & neige
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
    /* Palette */
    --white: #ffffff;
    --snow-50: #f6fafd;
    --snow-100: #eaf3fa;
    --ice-200: #cfe6f5;
    --ice-300: #a9d4ec;
    --glacier-400: #6db3dd;
    --glacier-600: #006ec2;
    --night-700: #1f5078;
    --night-800: #16395a;
    --night-900: #0f2740;
    --text: #22313f;
    --text-soft: #52667a;

    /* Typographie — polices display self-hostées à ajouter en phase design */
    --font-display: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --fs-h1: clamp(2rem, 6vw, 3.5rem);
    --fs-h2: clamp(1.5rem, 4vw, 2.25rem);
    --fs-h3: clamp(1.2rem, 3vw, 1.5rem);
    --fs-lead: clamp(1.05rem, 2.5vw, 1.3rem);

    /* Espacements & divers */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;
    --space-6: 6rem;
    --radius: 12px;
    --container: 1140px;
    --header-h: 72px;
    /* le hero/page-hero glisse dessous d'autant ; agrandi en desktop */
    --shadow-soft: 0 8px 30px rgba(15, 39, 64, 0.08);
    --shadow-card: 0 24px 60px rgba(15, 39, 64, 0.12);
    --gold: #e8a12c;

    /* Braise — l'accent chaud, complémentaire du bleu glacier (teinte ~20°,
       le glacier est à 206°). Trois crans parce qu'aucun orange ne tient à la
       fois sur le blanc et sur le bleu nuit : 400 pour les fonds sombres,
       500 pour les filets et aplats sur blanc, 700 dès qu'il porte du texte
       (5,2:1 sur blanc). Le bleu reste la couleur du cliquable et de
       l'ossature ; la braise marque la parole et l'engagement. */
    --ember-400: #f2994a;
    --ember-500: #e2703a;
    --ember-700: #c2410c;
}

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

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3 {
    font-family: var(--font-display);
    line-height: 1.15;
    color: var(--night-800);
    margin: 0 0 var(--space-2);
}

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

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
}

p {
    margin: 0 0 var(--space-2);
}

a {
    color: var(--glacier-600);
}

a:hover {
    color: var(--night-700);
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Marges par défaut du navigateur, hors de la logique d'espacement du site.
   `figure` vaut « 1em 40px » : ces 40px latéraux élargissaient chaque carte d'avis
   de 80px et faisaient déborder le carrousel de son conteneur. */
figure,
blockquote {
    margin: 0;
}

/* ---------- Utilitaires ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-2);
}

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

/* Boutons — angles droits (charte : pas de border-radius) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.85rem 2rem;
    border: 1px solid var(--glacier-600);
    border-radius: 0;
    background: var(--glacier-600);
    color: var(--white);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.btn:hover {
    background: var(--night-700);
    border-color: var(--night-700);
    color: var(--white);
}

.btn--lg {
    padding: 1.05rem 2.6rem;
    font-size: 0.9rem;
}

/* Variante « fantôme » sur fond sombre/photo */
.btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.7);
    color: var(--white);
}

.btn--ghost:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--night-800);
}

/* Variante pleine claire, pour les fonds photo bleutés (hero) : le bleu glacier
   du bouton par défaut s'y noyait dans le décor. Le blanc est la seule teinte de
   la charte qui tranche vraiment sur la neige à l'ombre. */
.btn--light {
    background: var(--white);
    border-color: var(--white);
    color: var(--night-900);
    box-shadow: 0 16px 38px rgba(5, 18, 32, 0.4);
}

.btn--light:hover {
    background: var(--night-900);
    border-color: var(--night-900);
    color: var(--white);
}

/* Variante contour sur fond clair */
.btn--outline {
    background: transparent;
    border-color: var(--glacier-600);
    color: var(--glacier-600);
}

.btn--outline:hover {
    background: var(--glacier-600);
    border-color: var(--glacier-600);
    color: var(--white);
}

/* ---------- Header ---------- */
/* Transparent tout en haut de page, fond blanc translucide flouté dès qu'on
   défile (classe .is-scrolled posée par main.js). Le fond vit sur un
   pseudo-élément pour découpler le backdrop-filter du positionnement sticky
   (sinon bug de rendu sur iOS Safari / Chrome Android).
   L'encre (texte, burger) est pilotée par des variables : sombre par défaut,
   blanche sur la home tant qu'on est tout en haut (hero vidéo sombre). */
.site-header {
    --ink: var(--night-800);
    --ink-soft: var(--glacier-600);
    --ink-line: rgba(34, 49, 63, 0.18);
    /* Pastilles des liens du menu desktop : en relief au survol, enfoncée
       pour la page courante (variantes claires ; la version sur hero sombre
       est plus bas, avec l'encre blanche). */
    --nav-btn-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(234, 243, 250, 0.92));
    --nav-btn-line: rgba(34, 49, 63, 0.12);
    --nav-btn-lift:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 2px 0 rgba(15, 39, 64, 0.1),
        0 8px 18px rgba(15, 39, 64, 0.14);
    --nav-btn-press-bg: linear-gradient(180deg, rgba(190, 218, 236, 0.95), rgba(240, 247, 252, 0.9));
    --nav-btn-press-line: rgba(34, 49, 63, 0.2);
    --nav-btn-press:
        inset 0 3px 6px rgba(15, 39, 64, 0.22),
        inset 0 1px 2px rgba(15, 39, 64, 0.3);
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.site-header.is-scrolled::before,
.no-js .site-header::before {
    opacity: 1;
}

/* Voile sombre derrière le drawer mobile (clic dessus = fermeture, cf. main.js).
   Vit sur le ::after du header : peint au-dessus du logo et du fond du header,
   sous le drawer (z-index 1) et le burger (z-index 2). */
.site-header::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background: rgba(15, 39, 64, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease;
}

body.nav-open .site-header::after {
    opacity: 1;
    pointer-events: auto;
}

/* Encre blanche tout en haut des pages à hero sombre (home + pages activités) */
.js .page-home:not(.nav-open) .site-header:not(.is-scrolled),
.js .page-ski:not(.nav-open) .site-header:not(.is-scrolled),
.js .page-offpiste:not(.nav-open) .site-header:not(.is-scrolled),
.js .page-touring:not(.nav-open) .site-header:not(.is-scrolled),
.js .page-others:not(.nav-open) .site-header:not(.is-scrolled) {
    --ink: var(--white);
    --ink-soft: var(--ice-200);
    --ink-line: rgba(255, 255, 255, 0.4);
    /* Pastilles en verre teinté sur le hero sombre */
    --nav-btn-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16));
    --nav-btn-line: rgba(255, 255, 255, 0.3);
    --nav-btn-lift:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 2px 0 rgba(10, 25, 42, 0.3),
        0 10px 22px rgba(10, 25, 42, 0.32);
    --nav-btn-press-bg: linear-gradient(180deg, rgba(10, 25, 42, 0.44), rgba(10, 25, 42, 0.22));
    --nav-btn-press-line: rgba(255, 255, 255, 0.22);
    --nav-btn-press:
        inset 0 3px 7px rgba(5, 15, 28, 0.55),
        inset 0 1px 2px rgba(5, 15, 28, 0.6);
}

.site-header__inner {
    position: relative;
    /* ancre le sélecteur de langue en absolu (desktop) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: var(--header-h);
}

/* Signature du header : le logo rond, centré dans la barre (le vide laissé
   entre les deux groupes de liens en desktop). Sorti du flux comme le drapeau,
   sans z-index pour rester sous le voile du drawer mobile.
   Sur l'accueil il prend le relais du logo du hero : masqué tant que celui-ci
   est à l'écran, il apparaît en fondu quand le hero défile
   (classe .is-logo-visible posée par main.js). */
.site-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 46px;
    transform: translate(-50%, -50%);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-logo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    /* le fichier a des coins carrés */
    filter: drop-shadow(0 4px 14px rgba(15, 39, 64, 0.28));
}

.js .page-home .site-logo {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
    pointer-events: none;
}

.js .page-home .site-header.is-logo-visible .site-logo {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

/* Burger (mobile) */
.nav-toggle {
    position: relative;
    z-index: 2;
    /* au-dessus du drawer : devient la croix de fermeture */
    order: 1;
    /* tout à droite de la barre, après le drapeau */
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease, background 0.35s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Nav mobile : drawer blanc qui coulisse depuis la droite, page assombrie
   derrière (::after du header). Le burger du header, au-dessus, sert de croix. */
.site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(82vw, 340px);
    padding: 0 var(--space-3) var(--space-3);
    background: var(--white);
    box-shadow: -18px 0 50px rgba(15, 39, 64, 0.3);
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.32s ease, visibility 0.32s ease;
    overflow-y: auto;
}

.site-nav::before {
    content: 'Menu';
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-height: var(--header-h);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--glacier-600);
    border-bottom: 1px solid var(--ice-200);
}

.site-nav.is-open {
    visibility: visible;
    transform: none;
}

body.nav-open {
    overflow: hidden;
}

/* Les deux groupes de liens : empilés dans le drawer mobile,
   réunis en une rangée centrée en desktop (cf. @media 900px). */
.site-nav__group {
    display: flex;
    flex-direction: column;
}

.site-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0.95rem 0.15rem;
    color: var(--night-800);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--snow-100);
}

/* Chevron discret à droite de chaque lien */
.site-nav__link::after {
    content: '\203A';
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    color: var(--ice-300);
    transition: color 0.2s ease, transform 0.2s ease;
}

.site-nav__link:hover,
.site-nav__link.is-active {
    color: var(--glacier-600);
}

.site-nav__link.is-active::after {
    color: var(--glacier-600);
}

/* Entrée en cascade des liens à l'ouverture du drawer (mobile uniquement) */
@media (max-width: 899.98px) {
    .site-nav__link {
        opacity: 0;
        transform: translateX(16px);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .site-nav.is-open .site-nav__link {
        opacity: 1;
        transform: none;
    }

    .site-nav.is-open .site-nav__group--left .site-nav__link:nth-child(1) {
        transition-delay: 0.05s;
    }

    .site-nav.is-open .site-nav__group--left .site-nav__link:nth-child(2) {
        transition-delay: 0.09s;
    }

    .site-nav.is-open .site-nav__group--left .site-nav__link:nth-child(3) {
        transition-delay: 0.13s;
    }

    .site-nav.is-open .site-nav__group--right .site-nav__link:nth-child(1) {
        transition-delay: 0.17s;
    }

    .site-nav.is-open .site-nav__group--right .site-nav__link:nth-child(2) {
        transition-delay: 0.21s;
    }
}

/* Bascule de langue : un seul drapeau, celui de l'autre langue. Mobile : à
   gauche de la barre (burger à droite). Desktop : dans le coin droit
   (cf. @media). Sous le voile du drawer (pas de z-index). */
.lang-switch {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    padding: 10px;
    /* zone tactile ~44px */
    transition: opacity 0.2s ease;
}

.lang-switch:hover {
    opacity: 0.75;
}

.flag {
    display: block;
    width: 30px;
    height: 20px;
    box-shadow: 0 1px 6px rgba(15, 39, 64, 0.25);
}

@media (min-width: 900px) {
    :root {
        --header-h: 92px;
        /* barre plus aérée en desktop (le hero suit) */
    }

    .nav-toggle {
        display: none;
    }

    .site-header::after {
        content: none;
        /* pas de voile sombre en desktop */
    }

    .site-logo {
        width: 58px;
    }

    .site-nav {
        position: static;
        z-index: auto;
        flex: 1;
        /* occupe la barre : les deux groupes se rejoignent au centre */
        flex-direction: row;
        align-items: center;
        gap: clamp(4.5rem, 8vw, 8rem);
        /* réserve le vide central pour le logo */
        width: auto;
        margin: 0;
        padding: 0;
        background: none;
        box-shadow: none;
        visibility: visible;
        transform: none;
        overflow: visible;
    }

    /* Chaque groupe occupe une moitié et pousse ses liens vers le centre :
       la rangée reste ainsi centrée dans la barre, drapeau mis à part. */
    .site-nav__group {
        flex: 1;
        flex-direction: row;
        align-items: center;
        gap: 0;
        /* l'espacement est porté par le padding des liens (pastille au survol) */
    }

    .site-nav__group--left {
        justify-content: flex-end;
    }

    .site-nav__group--right {
        justify-content: flex-start;
    }

    .site-nav::before {
        content: none;
        /* label « Menu » du drawer */
    }

    .site-nav__link::after {
        content: none;
        /* chevrons du drawer */
    }

    /* Liens en texte nu au repos ; la pastille n'apparaît qu'à l'interaction :
       en relief au survol (liseré clair en haut + ombre portée), enfoncée pour
       la page courante et au clic (ombres internes, texte décalé d'1px).
       Les surfaces viennent des variables --nav-btn-* du header, qui suivent
       l'encre. Le padding remplace l'ancien gap : l'espacement visuel entre
       les libellés reste celui d'avant. */
    .site-nav__link {
        padding: 0.42rem 0.85rem;
        font-size: 1.25rem;
        /* liens agrandis ×1.5 */
        font-weight: 500;
        color: var(--ink);
        border: 1px solid transparent;
        border-radius: 999px;
        background: none;
        box-shadow: none;
        transition: color 0.2s ease, background 0.25s ease,
            border-color 0.25s ease, box-shadow 0.25s ease,
            transform 0.12s ease;
    }

    .site-nav__link:hover {
        color: var(--ink);
        background: var(--nav-btn-bg-hover);
        border-color: var(--nav-btn-line);
        box-shadow: var(--nav-btn-lift);
        transform: translateY(-1px);
    }

    /* Clic maintenu : le bouton s'enfonce, comme l'état actif */
    .site-nav__link:active,
    .site-nav__link.is-active,
    .site-nav__link.is-active:hover {
        color: var(--ink);
        background: var(--nav-btn-press-bg);
        border-color: var(--nav-btn-press-line);
        box-shadow: var(--nav-btn-press);
        transform: translateY(1px);
    }

    /* Sélecteur de langue sorti du flux, calé dans le coin droit : la nav
       reste ainsi parfaitement centrée dans la barre. */
    .lang-switch {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        padding: 10px;
        transition: opacity 0.2s ease;
    }

    .flag {
        width: 24px;
        height: 16px;
    }
}

/* ---------- Hero photo (accueil) ---------- */
/* Marge négative : la photo passe sous le header sticky transparent.
   Plein écran : 100svh = hauteur réelle sur mobile (barres du navigateur
   déduites), vh en secours pour les anciens navigateurs. */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    margin-top: calc(-1 * var(--header-h));
    padding-top: var(--header-h);
    overflow: hidden;
    color: var(--white);
}

/* Fond : la couleur reste posée dessous, le temps que la photo charge */
.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--night-800);
}

.hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Photo panoramique dans un cadre plein écran : sur mobile le recadrage est
       très serré, on garde la ligne de crête plutôt que le premier plan. */
    object-position: center 40%;
}

/* Voile dégradé par-dessus la photo (hero-1.webp).
   Historique : 0.30/0.58 (vidéo), 0.24/0.48 (03/08), 0.05/0.24 (10/09/2026,
   demande de Maxim : photo plus claire). Les nuages derrière le texte sont
   presque blancs : le voile seul ne suffit plus à la lisibilité, ce sont les
   ombres serrées (1er calque des text-shadow ci-dessous) qui la tiennent.
   Alléger encore = renforcer ces ombres en même temps. */
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 39, 64, 0.05) 0%, rgba(15, 39, 64, 0.24) 100%);
}

.hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
    padding-block: var(--space-5);
}

/* Halo discret derrière le texte (demande de Maxim, 10/09/2026) : la photo
   reste claire dans le ciel et sur les bords, seul le cœur du bloc est
   assombri. Ellipse plus large que le texte (qui prend toute la largeur sur
   mobile, d'où le +10rem rogné par l'overflow du hero), fondue jusqu'au
   transparent pour ne dessiner aucune forme. Passe sous le texte grâce au
   contexte d'empilement de .hero__content (z-index: 1). */
.hero__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block: 0;
    left: 50%;
    width: min(calc(100% + 10rem), 62rem);
    transform: translateX(-50%);
    background: radial-gradient(closest-side,
        rgba(15, 39, 64, 0.32) 0%,
        rgba(15, 39, 64, 0.26) 55%,
        rgba(15, 39, 64, 0.1) 80%,
        rgba(15, 39, 64, 0) 100%);
    pointer-events: none;
}

.hero__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

/* Logo du hero : reprend le rôle de signature visuelle laissé libre par le
   header. Cercle (le fichier a un fond carré sombre), halo doux sur la vidéo. */
.hero__logo {
    width: clamp(84px, 18vw, 141px);
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: drop-shadow(0 10px 34px rgba(0, 0, 0, 0.45));
}

.hero__brand-name {
    color: var(--white);
    font-family: var(--font-display, inherit);
    font-size: clamp(1.6rem, 4.4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 3px rgba(15, 39, 64, 0.55), 0 2px 18px rgba(0, 0, 0, 0.4);
}

.hero__title {
    color: var(--white);
    font-size: clamp(1.1rem, 2.4vw, 1.65rem);
    font-weight: 500;
    max-width: 48ch;
    margin-inline: auto;
    text-shadow: 0 1px 3px rgba(15, 39, 64, 0.6), 0 2px 24px rgba(0, 0, 0, 0.35);
}

/* Plusieurs paragraphes possibles : interligne resserré entre eux, respiration
   normale avant les boutons (dernier <p> du hero). */
.hero__lead {
    max-width: 54ch;
    margin: 0 auto var(--space-2);
    font-size: var(--fs-lead);
    color: var(--snow-100);
    text-shadow: 0 1px 3px rgba(15, 39, 64, 0.6), 0 1px 12px rgba(0, 0, 0, 0.35);
}

.hero__lead:last-of-type {
    margin-bottom: var(--space-3);
}

.hero__eyebrow {
    margin-bottom: var(--space-2);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ember-400);
    text-shadow: 0 1px 3px rgba(15, 39, 64, 0.65), 0 1px 10px rgba(0, 0, 0, 0.35);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

/* ---------- Hero de page (pages intérieures : 404, réservation, lieux, légal) ---------- */
/* Même glissement sous le header que .hero — fond clair, l'encre du header
   reste donc sombre sur ces pages. */
.page-hero {
    margin-top: calc(-1 * var(--header-h));
    padding-block: var(--space-5);
    padding-top: calc(var(--header-h) + var(--space-4));
    background: linear-gradient(180deg, var(--snow-100) 0%, var(--white) 100%);
    text-align: center;
}

.page-hero__title {
    margin-inline: auto;
    max-width: 22ch;
}

.page-hero__lead {
    font-size: var(--fs-lead);
    color: var(--text-soft);
    max-width: 60ch;
    margin-inline: auto;
}

/* ---------- Footer ---------- */
/* Vue satellite de la vallée de Chamonix en fond, sous un voile bleu nuit très
   dense : la photo est claire par endroits (glaciers, névés) et l'encre --ice-200
   du footer y deviendrait illisible. `--night-900` reste posé dessous, le temps
   que l'image charge et si elle venait à manquer. */
.site-footer {
    margin-top: var(--space-5);
    padding-block: var(--space-4) var(--space-2);
    background:
        linear-gradient(180deg,
            rgba(15, 39, 64, 0.94) 0%,
            rgba(15, 39, 64, 0.88) 45%,
            rgba(15, 39, 64, 0.96) 100%),
        var(--night-900) url('/assets/img/gmap-chamonix.webp') center / cover no-repeat;
    color: var(--snow-100);
}

/* Liens en blanc franc sur le texte déjà très clair : c'est le survol (bleu
   glacier) qui marque l'interaction, pas un écart de luminosité au repos.
   Sans soulignement non plus (demande de Maxim) : le pied de page n'est qu'une
   liste de liens, le trait sous chacun d'eux faisait un pavé rayé. Il revient au
   survol et au focus clavier, où il double utilement le changement de couleur. */
.site-footer a {
    color: var(--white);
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--glacier-400);
    text-decoration: underline;
}

.site-footer__grid {
    display: grid;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
}

.site-footer__title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--space-1);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.site-footer__logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 0.1rem;
}

.site-footer__tagline {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ember-400);
    margin-bottom: var(--space-2);
}

.site-footer__role {
    font-size: 0.9rem;
    margin: 0;
}

/* Les popups des liens utiles vivent DANS le pied de page : sans ces reprises,
   `.site-footer a` peindrait en blanc, sur le fond clair du panneau, la croix
   de fermeture et les boutons. */
.site-footer .lmodal__panel {
    color: var(--text-soft);
}

.site-footer .lmodal__close,
.site-footer .lmodal__links a {
    color: var(--night-800);
}

.site-footer .lmodal__close:hover,
.site-footer .lmodal__links a:hover {
    color: var(--glacier-600);
}

.site-footer .lmodal__panel .btn--outline {
    color: var(--glacier-600);
}

.site-footer .lmodal__panel .btn--outline:hover,
.site-footer .lmodal__panel .btn--outline:focus-visible {
    color: var(--white);
}

/* Liens utiles de la colonne marque : mêmes puces-liens que la colonne contact,
   trois d'entre elles ouvrant un popup en bas de footer. */
.site-footer__tools {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__tools li {
    padding-block: 0.25rem;
}

.site-footer__tools a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.site-footer__tools svg {
    color: var(--glacier-400);
    flex: none;
}

/* Popup portant un plan : le panneau prend la largeur disponible pour que la
   carte reste lisible, l'image se cale dessus sans déborder. */
.lmodal__panel--wide {
    max-width: min(60rem, 92vw);
}

.lmodal__img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: var(--space-2);
    border: 1px solid var(--ice-200);
    background: var(--white);
}

/* Loueurs partenaires : une ligne cliquable par magasin, nom au-dessus du rôle. */
.lmodal__links {
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

.lmodal__links a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--ice-200);
    background: var(--snow-50);
    text-decoration: none;
}

.lmodal__links a:hover,
.lmodal__links a:focus-visible {
    border-color: var(--glacier-400);
    background: var(--white);
}

.lmodal__links li + li {
    margin-top: 0.5rem;
}

/* Logo du loueur, à gauche du nom. Hauteur bornée et `object-fit: contain` :
   les fichiers n'ont ni le même format ni le même rapport (svg large de Skiset,
   webp carré de Bozon), la boîte les met au même gabarit sans les déformer. */
.lmodal__link-logo {
    flex: none;
    width: 3.4rem;
    height: 2.2rem;
    object-fit: contain;
    object-position: left center;
}

.lmodal__link-name {
    font-weight: 700;
    color: var(--night-800);
}

.lmodal__link-role {
    flex: 1;
    font-size: 0.88rem;
    color: var(--text-soft);
}

.lmodal__links svg {
    flex: none;
    color: var(--glacier-600);
}

/* Second intertitre d'une même colonne (« Réservations » sous « Contact ») :
   il ouvre un bloc, pas la colonne — d'où l'air au-dessus. */
.site-footer__title--sub {
    margin-top: var(--space-2);
}

.site-footer__contact li {
    padding-block: 0.25rem;
}

.site-footer__contact a,
.site-footer__contact span {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.site-footer__contact svg {
    color: var(--glacier-400);
    flex: none;
}

.site-footer__social {
    display: flex;
    gap: var(--space-1);
}

.site-footer__social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--night-700);
    color: var(--ice-300);
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* `a.` : sans lui, le survol générique `.site-footer a:hover` (plus spécifique
   d'un cran) repeindrait ces boutons en bleu glacier. */
.site-footer a.site-footer__social-btn:hover {
    border-color: var(--glacier-400);
    background: var(--night-800);
    color: var(--white);
}

/* Invitation à laisser un avis (sous les réseaux sociaux) */
.site-footer__review {
    margin-top: var(--space-2);
    max-width: 34ch;
    font-size: 0.9rem;
}

.site-footer__review-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

.site-footer__review-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--night-700);
    font-size: 0.85rem;
    font-weight: 600;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.site-footer__review-link svg {
    color: var(--glacier-400);
    flex: none;
}

.site-footer a.site-footer__review-link:hover {
    border-color: var(--glacier-400);
    background: var(--night-800);
    color: var(--white);
}

/* « Google » aux couleurs de la marque : chaque lettre porte sa couleur en
   style en ligne (cf. layouts/base.php), donc immunisée au survol du bouton. */
.gword {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.site-footer__legal {
    border-top: 1px solid var(--night-700);
    padding-top: var(--space-2);
    font-size: 0.85rem;
    color: var(--ice-200);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.site-footer__legal p {
    margin: 0;
}

.site-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem var(--space-2);
}

@media (min-width: 700px) {
    .site-footer__grid {
        grid-template-columns: 1.4fr 1fr 1fr;
    }

    .site-footer__legal {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem var(--space-3);
    }
}

/* ==========================================================================
   Page d'accueil — sections éditoriales
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

.about,
.services,
.contact {
    scroll-margin-top: 5rem;
}

@media (min-width: 900px) {
    .section {
        padding-block: var(--space-5);
    }
}

/* ---------- Composants transverses ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--space-2);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ember-700);
}

.eyebrow::before {
    content: "";
    width: 2.5rem;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

.section-head {
    max-width: 44rem;
    margin-bottom: var(--space-4);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.section-head--center .eyebrow {
    justify-content: center;
}

.section-head--center .eyebrow::after {
    content: "";
    width: 2.5rem;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

.section-head__lead {
    font-size: var(--fs-lead);
    color: var(--text-soft);
    margin-bottom: 0;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--glacier-600);
    text-decoration: none;
}

.link-arrow::after {
    content: "\2192";
    transition: transform 0.3s ease;
}

.link-arrow:hover {
    color: var(--night-700);
}

.link-arrow:hover::after {
    transform: translateX(5px);
}

/* Révélation au défilement (activée seulement si JS présent) */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: var(--reveal-delay, 0s);
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- Barre de confiance ---------- */
.trustbar {
    background: var(--night-900);
    color: var(--ice-200);
}

.trustbar__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-4);
    padding-block: var(--space-2);
    text-align: center;
}

.trustbar__item {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.trustbar__item::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--glacier-400);
    transform: rotate(45deg);
}

/* Les 5 arguments sur UNE seule ligne dès qu'il y a la place (demande de Maxim) :
   à 0,14 em d'interlettrage et 40 px de gouttière, ils débordaient de ~130 px sur
   un écran de 1000 px et le dernier passait seul à la ligne. L'interlettrage
   descend à 0,08 em (95 caractères en tout : ~70 px gagnés) et la gouttière
   repart de 1,1 rem pour retrouver son ampleur sur les écrans larges.
   Mesuré à 1000 px : une ligne, 20 px de marge. En dessous, le repli est inchangé. */
@media (min-width: 1000px) {
    .trustbar__list {
        /* 🔴 Surtout PAS `nowrap` : la rangée déborderait de la page dès qu'un
           libellé s'allonge (l'anglais n'a pas la même longueur que le français).
           On garde le repli comme filet et on gagne la place par la gouttière. */
        column-gap: clamp(1.25rem, 2vw, var(--space-4));
    }

    .trustbar__item {
        letter-spacing: 0.08em;
        white-space: nowrap;
    }
}

/* ---------- Présentation de la monitrice ---------- */
/* Texture neige partagée : présentation, FAQ (home) et formulaire de contact.
   (cover : l'image n'est pas une tuile répétable) */
.about,
.faq,
.contact {
    background: var(--white) url('/assets/img/snow-background-texture.webp') center / cover no-repeat;
}

/* Page réservation : photo de neige à la place de la texture, portée par <main>
   pour couvrir d'un seul tenant le titre et le formulaire, cadrée sur le haut
   de l'image. Voile blanc plus dense en haut : l'encre du header (transparent
   tant qu'on n'a pas défilé) doit rester lisible sur le ciel sombre. */
.page-book #main {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(255, 255, 255, 0.6) 28%,
            rgba(234, 243, 250, 0.82) 100%),
        url('/assets/img/raquettes-1.webp') center top / cover no-repeat;
}

/* Les sections deviennent transparentes pour laisser passer cette photo… */
.page-book .page-hero,
.page-book .contact {
    background: none;
}

/* Fonds fusionnés : on resserre le blanc entre le titre et la bulle
   (sinon padding-bottom du hero + padding-top de la section = ~6,5 rem). */
.page-hero--book {
    padding-bottom: var(--space-2);
}

.page-book .contact {
    padding-top: var(--space-2);
}

/* …et le footer se colle au contenu (sinon bande blanche sous la photo). */
.page-book .site-footer {
    margin-top: 0;
}

/* Titre plus discret (la bulle de Christelle prend le relais), posé sur la
   photo : encre nuit + halo blanc, souligné d'un trait glacier comme les
   eyebrows centrés du reste du site. */
.page-hero--book .page-hero__title {
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--night-800);
    text-shadow: 0 1px 16px rgba(255, 255, 255, 0.65);
}

.page-hero--book .page-hero__title::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 3px;
    margin: 0.85rem auto 0;
    background: var(--glacier-600);
}

/* Séparateur « traces de ski » entre deux sections (voir _trail.php).
   Le fond = couleur de la section du dessus, pour fondre la neige du SVG. */
.trail {
    background: var(--snow-50);
    line-height: 0;
    /* supprime l'espace inline sous le <svg> */
}

.trail__svg {
    display: block;
    width: 100%;
    height: clamp(56px, 9vw, 120px);
}

/* Traces : traits fins bleutés, sans remplissage */
.trail__line {
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Les traces les plus lointaines sont les plus fines et les plus claires.
   Traits volontairement très fins (< 1.5px) : un dessin à la pointe fine,
   pas un trait de contour. */
.trail__back .trail__line {
    stroke: var(--glacier-400);
    stroke-width: 0.8;
    opacity: 0.75;
}

.trail__mid .trail__line {
    stroke: var(--glacier-600);
    stroke-width: 1;
}

.trail__front .trail__line {
    stroke: var(--glacier-600);
    stroke-width: 1.2;
}

/* Pages activités : le séparateur est entouré de sections blanches
   (activity-intro au-dessus, pricing en dessous) → fond blanc pour fondre.
   Page autres activités : même cas, ses trois activités sont sur fond blanc et
   c'est le séparateur seul qui les distingue. */
.page-ski .trail,
.page-offpiste .trail,
.page-touring .trail,
.page-others .trail {
    background: var(--white);
}

.about__grid {
    display: grid;
    gap: var(--space-4);
}

.about__media {
    position: relative;
    z-index: 0;
}

.about__img {
    width: 100%;
    aspect-ratio: 8 / 7;
    /* hauteur réduite de 30 % vs 4/5 (à largeur égale) */
    object-fit: cover;
    /* photo-christelle.webp est en paysage, Christelle à droite du cadre */
    object-position: 80% center;
}

.about__title {
    margin-bottom: 0.25rem;
}

.about__role {
    margin-bottom: var(--space-3);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--glacier-600);
}

/* Accroche de la bio, entre le rôle et les paragraphes */
/* Qualifications / langues / secteurs : l'émoji tient lieu de puce (les
   losanges glacier feraient doublon), d'où l'absence de ::before ici. */
.credentials {
    display: grid;
    gap: 0.7rem;
    margin: var(--space-3) 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--ice-200);
}

.credentials li {
    display: grid;
    grid-template-columns: 1.7rem 1fr;
    align-items: start;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.55;
}

.credentials__icon {
    font-size: 1.05rem;
    line-height: inherit;
}

.credentials__label {
    font-weight: 700;
    color: var(--night-700);
}

.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3) var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--ice-200);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.stat__value {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--night-800);
}

/* Les ★ sont rendues par une police de secours et pèsent bien plus lourd que
   les chiffres à taille égale : on les descend d'un cran. La line-height
   compense la baisse de font-size (1.3 × 1.46 ≈ 1.9rem) pour que la hauteur de
   la ligne reste celle des autres chiffres → libellés alignés sur la rangée. */
.stat__value--stars {
    font-size: 1.3rem;
    line-height: 1.46;
    letter-spacing: 0.04em;
}

.stat__label {
    font-size: 0.8rem;
    color: var(--text-soft);
}

/* Seule la stat étoilée est un lien (vers la page d'avis TripAdvisor). Elle
   reprend la mise en page de .stat — c'est le <a> qui porte désormais la
   colonne — et reste identique aux trois autres au repos : seul le survol la
   signale, pour ne pas déséquilibrer la rangée. */
.stat__link {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: inherit;
    text-decoration: none;
}

.stat__link:hover .stat__value,
.stat__link:focus-visible .stat__value {
    color: var(--glacier-600);
}

.stat__link:hover .stat__label,
.stat__link:focus-visible .stat__label {
    color: var(--night-800);
}

.stat__link:focus-visible {
    outline: 3px solid var(--glacier-400);
    outline-offset: 4px;
}

@media (min-width: 900px) {
    .about__grid {
        grid-template-columns: 5fr 6fr;
        align-items: center;
        gap: var(--space-5);
    }

    .about__media::before {
        content: "";
        position: absolute;
        inset: 16px -16px -16px 16px;
        border: 1px solid var(--ice-300);
        z-index: -1;
    }

    .stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ---------- Activités (cartes plein cadre) ---------- */
.services {
    padding-block: var(--space-5);
}

.services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: var(--space-4);
}

.service {
    position: relative;
    display: block;
    overflow: hidden;
    /* ⚠️ Sans cette largeur définie, `aspect-ratio` + `min-height` font calculer
       la largeur depuis la hauteur minimale : la carte déborde alors de sa piste
       de grille (384 px pour une piste de 233 px) et pousse un défilement
       horizontal sur toute la page. L'étirement automatique de l'item ne joue
       pas ici, le ratio tient déjà l'autre axe. */
    width: 100%;
    aspect-ratio: 4 / 5;
    min-height: 22rem;
    background: var(--night-800);
    color: var(--white);
    text-decoration: none;
}

.service__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cartes en 4/5 puis 3/4 : une photo paysage y perd la moitié de sa largeur.
       --card-pos (posé par la vue) décale le recadrage quand le sujet n'est pas
       au milieu ; par défaut, rien ne change. Même logique que --hero-pos. */
    object-position: var(--card-pos, center);
    transition: transform 0.9s ease;
}

.service::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: 3px;
    background: var(--glacier-400);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s ease;
}

.service__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 39, 64, 0) 35%, rgba(15, 39, 64, 0.55) 65%, rgba(15, 39, 64, 0.9) 100%);
}

.service__body {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-3);
}

.service__title {
    position: relative;
    margin-bottom: 0.7rem;
    padding-bottom: 0.7rem;
    font-size: clamp(2.5rem, 6.6vw, 3.2rem);
    font-weight: 700;
    line-height: 1.05;
    hyphens: auto;
    /* « randonnée » ne tient pas en 1 ligne sur les cartes 4 col. étroites */
    color: var(--white);
    text-shadow: 0 2px 20px rgba(15, 39, 64, 0.45);
}

/* Filet glacier sous le titre, s'étire au survol de la carte */
.service__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3.2rem;
    height: 3px;
    background: linear-gradient(90deg, var(--glacier-400), rgba(109, 179, 221, 0));
    transition: width 0.35s ease;
}

.service:hover .service__title::after {
    width: 6rem;
}

.service__text {
    color: var(--snow-100);
    font-size: 0.95rem;
}

.service__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--space-2);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--white);
}

.service__cta::after {
    content: "\2192";
    transition: transform 0.3s ease;
}

.service:hover .service__img {
    transform: scale(1.06);
}

.service:hover::before {
    transform: scaleX(1);
}

.service:hover .service__cta::after {
    transform: translateX(5px);
}

.service:focus-visible {
    outline: 3px solid var(--glacier-400);
    outline-offset: -3px;
}

@media (min-width: 600px) {
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .services__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .service {
        aspect-ratio: 3 / 4;
    }

    /* 4 cartes sur une ligne = cartes étroites : titre proportionné à la carte */
    .service__title {
        font-size: clamp(1.7rem, 2.6vw, 2.4rem);
    }
}

/* ---------- Coaching en ligne (page « Autres activités ») ---------- */
/* Ancienne carte « 5e activité » de l'accueil, promue en vraie section le
   17/08/2026. Aucune photo de coaching n'existe : le visuel reste un décor
   dessiné en CSS (crêtes en clip-path + écran de visio), conservé tel quel. */
/* Fond blanc comme les deux autres activités de la page (24/08/2026) : la
   coupure entre elles est faite par le séparateur `.trail`, plus par
   l'alternance des teintes. Le panneau de droite reste blanc sur blanc, son
   ombre et son liseré suffisent à le détacher. */
.coach {
    background: var(--white);
}

.coach__grid {
    display: grid;
    gap: var(--space-4);
    align-items: start;
}

.coach__title {
    margin-bottom: var(--space-2);
}

.coach__lead {
    font-size: var(--fs-lead);
    color: var(--night-700);
}

.coach__intro p {
    color: var(--text-soft);
    line-height: 1.7;
}

/* Format, langues, tarif : trois lignes sèches sous le texte, filet à gauche */
/* Intertitre des modalités : il annonce la liste encadrée qui suit, d'où la
   marge basse nulle — c'est `.coach__facts` qui garde son propre écart. */
.coach__facts-title {
    margin: var(--space-3) 0 0;
    font-weight: 700;
    color: var(--night-800);
}

.coach__facts-title + .coach__facts {
    margin-top: 0.6rem;
}

.coach__facts {
    margin: var(--space-3) 0;
    padding: 0 0 0 var(--space-2);
    border-left: 3px solid var(--glacier-400);
    list-style: none;
}

.coach__facts li {
    padding-block: 0.35rem;
}

.coach__fact-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--glacier-600);
}

.coach__fact-text {
    display: block;
    font-size: 0.95rem;
    color: var(--text-soft);
}

/* ----- Panneau de droite : décor + ce que l'on travaille ----- */
.coach__panel {
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-card);
    border-top: 3px solid var(--glacier-600);
}

/* 4/3 plutôt que l'ancienne bande de 11 rem (demande de Maxim, 10/09/2026) :
   la vidéo est tournée en PORTRAIT (576 × 1024), une bande basse n'en montrait
   qu'un sixième. Ratio plutôt que hauteur fixe : la zone grandit avec la
   colonne, ~260 px en mobile, ~370 px à côté du texte en desktop. */
.coach__visual {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    min-height: 11rem;
    overflow: hidden;
    background: linear-gradient(155deg, var(--night-700), var(--night-900) 72%);
}

/* Vidéo d'ambiance du panneau coaching : elle recouvre le décor de crêtes, qui
   reste dessous comme repli. `scale` = le léger zoom demandé, il resserre le
   cadrage sans toucher au fichier ; `object-fit: cover` fait le reste.
   🔴 `z-index: 2` obligatoire : `.coach__screen` (l'écran décoratif) est déjà en
   `z-index: 1`, sans ça l'icône caméra flottait par-dessus la vidéo. */
.coach__video {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.12);
}

/* Deux lignes de crêtes : la lointaine plus pâle, pour la profondeur */
.coach__peaks {
    position: absolute;
    inset: auto 0 0 0;
    height: 58%;
    background: rgba(109, 179, 221, 0.22);
    clip-path: polygon(0 100%, 16% 42%, 33% 76%, 52% 20%, 71% 68%, 86% 46%, 100% 100%);
}

.coach__peaks--far {
    height: 74%;
    background: rgba(109, 179, 221, 0.1);
    clip-path: polygon(0 100%, 24% 34%, 45% 78%, 63% 40%, 82% 72%, 100% 30%, 100% 100%);
}

/* L'écran : cadre carré (charte) + deux halos = « en direct » */
.coach__screen {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.07);
    color: var(--glacier-400);
}

.coach__screen::before,
.coach__screen::after {
    content: "";
    position: absolute;
    inset: -0.75rem;
    border: 1px solid rgba(109, 179, 221, 0.45);
}

.coach__screen::after {
    inset: -1.6rem;
    border-color: rgba(109, 179, 221, 0.25);
}

.coach__items-title {
    margin: 0;
    padding: var(--space-3) var(--space-3) 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--glacier-600);
}

.coach__items {
    margin: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
    list-style: none;
}

/* Étapes numérotées : le numéro occupe la case de l'ancienne icône, même
   gabarit de 2,4 rem — d'où le seul réglage typographique ici. */
.coach__item-step {
    font-weight: 700;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.coach__item {
    display: flex;
    gap: 0.9rem;
    padding-block: 0.9rem;
    border-top: 1px solid var(--ice-200);
}

.coach__item:first-child {
    border-top: 0;
}

.coach__item-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    background: var(--snow-100);
    color: var(--glacier-600);
}

.coach__item-title {
    display: block;
    margin-bottom: 0.15rem;
    font-weight: 700;
    color: var(--night-800);
}

.coach__item-text {
    display: block;
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--text-soft);
}

@media (min-width: 900px) {
    .coach__grid {
        grid-template-columns: 1.05fr 1fr;
        gap: var(--space-5);
    }
}

/* ---------- Lieux (domaines couverts) ---------- */
.places {
    background: var(--snow-50);
}

.places__grid {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

/* Page dédiée : la grille suit directement le hero, pas de section-head au-dessus */
.places__grid--flush {
    margin-top: 0;
}

.place {
    padding: var(--space-3);
    background: var(--white);
    border: 1px solid var(--snow-100);
    border-top: 3px solid var(--glacier-400);
    box-shadow: var(--shadow-soft);
}

.place__pin {
    display: inline-flex;
    color: var(--glacier-600);
}

.place__name {
    margin: 0.35rem 0 0.4rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--night-800);
}

.place__text {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-soft);
}

@media (min-width: 640px) {
    .places__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .places__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------- Bande cadeau ---------- */
/* Photo de fond floutée + voile profond : le décor ne sert plus que d'ambiance,
   toute la lisibilité revient au texte. Des paquets cadeaux en fil de fer
   dérivent par-dessus, pilotés par le défilement (--gp, cf. main.js). */
.giftband {
    /* Course maximale de la photo, dans un sens comme dans l'autre. Seul
       curseur à toucher pour doser la parallaxe : le débordement de
       .giftband__bg s'en déduit, impossible de découvrir la section. */
    --gift-parallax: 110px;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-6);
    background: var(--night-900);
    color: var(--white);
    text-align: center;
}

/* Photo nette et à pleine luminosité — comme les cartes d'activité, qui n'ont
   pas de filtre non plus : tout le contraste du texte vient du voile.
   (Un `brightness(0.76)` traînait ici ; retiré le 17/08/2026. Le voile porte
   la lisibilité seul — cf. .giftband__veil pour le calcul de contraste.)
   Parallaxe : elle remonte moins vite que la section via --gp (cf. main.js).
   Débordement = 1,5 × la course, soit plus que le maximum atteignable
   (--gp est borné à ±1.4 par le JS) : les bords ne se découvrent jamais. */
.giftband__bg {
    position: absolute;
    inset: calc(var(--gift-parallax) * -1.5) 0;
    z-index: -2;
    /* Photo de Christelle (test 11/08/2026) ; visuel précédent : ski-1.webp */
    background: url('/assets/img/cadeau-1.webp') center / cover no-repeat;
    transform: translate3d(0, calc(var(--gp, 0) * var(--gift-parallax) * -1), 0);
    will-change: transform;
}

/* C'est ce voile — et non plus le flou — qui porte la lisibilité du texte :
   assombrissement d'ensemble + halo central un peu plus dense derrière le bloc.
   Allégé en deux temps le 18/08/2026 : 0,86 -> 0,66 -> 0,60 d'opacité cumulée
   au centre, pour laisser ressortir la photo.

   0,60 est le plancher, pas un réglage libre. Mesure faite sur cadeau-1.webp
   (ffmpeg, zone centrale) : le cliché contient du blanc saturé — rgb(255,255,252),
   de la neige au soleil — pile derrière le bloc de texte. Sous ce voile il
   remonte à 4,68:1 contre du texte blanc : au-dessus du 4,5:1 exigé en AA, mais
   de peu. Descendre le voile plus bas fait passer sous le seuil (0,59 -> 4,49:1).
   Le texte contraignant est le paragraphe et l'eyebrow (texte normal, 4,5:1) ;
   le titre est du grand texte et ne demande que 3:1.

   Pour éclaircir davantage il faudra donc un fond porté par le bloc de texte
   lui-même (scrim/panneau), et non par un voile pleine largeur. */
.giftband__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(62% 58% at 50% 50%, rgba(9, 24, 40, 0.37), transparent 72%),
        linear-gradient(180deg, rgba(15, 39, 64, 0.29), rgba(9, 24, 40, 0.45));
}

.giftband__sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.giftband__scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* --gp : progression du défilement, de -1 (section en bas de l'écran) à 1
   (section sortie par le haut). Chaque paquet l'amplifie via --depth/--spin. */
.giftfloat {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    margin: calc(var(--size) / -2);
    color: var(--white);
    opacity: 0.42;
    transform:
        translate3d(0, calc(var(--gp, 0) * var(--depth) * -1px), 0)
        rotate(calc(var(--tilt) + var(--gp, 0) * var(--spin) * 1deg));
    will-change: transform;
}

.giftfloat__svg {
    display: block;
    width: 100%;
    height: 100%;
    /* Ombre portée marquée : le trait fin doit rester lisible même au-dessus
       des zones claires de la photo (neige, ciel). */
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7));
}

.giftband__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 42rem;
}

/* Libellé « Idée cadeau » : capitales très espacées encadrées de deux filets
   qui s'effacent vers l'extérieur — même vocabulaire graphique que les traces
   (_trail.php), plus habillé qu'un eyebrow standard. */
.giftband__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.7rem, 2.5vw, 1.2rem);
    width: 100%;
    margin: 0 0 var(--space-2);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--white);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

/* Le letter-spacing ajoute un blanc après la dernière lettre : on le compense
   à gauche pour que le mot reste optiquement centré entre les deux filets. */
.giftband__eyebrow span {
    padding-left: 0.34em;
}

.giftband__eyebrow::before,
.giftband__eyebrow::after {
    content: '';
    flex: 0 1 clamp(32px, 14vw, 88px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85));
}

.giftband__eyebrow::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.85), transparent);
}

.giftband__title {
    max-width: 18ch;
    margin: 0 auto 0.9rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.7rem, 3.8vw, 2.8rem);
    line-height: 1.15;
    color: var(--white);
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55);
}

.giftband__text {
    max-width: 46ch;
    margin: 0 auto var(--space-3);
    font-size: var(--fs-lead);
    line-height: 1.6;
    /* Blanc pur et non 90 % : sur une photo, ce 0,9 coûtait 0,6 point de
       contraste pour rien — récupéré ici pour alléger le voile d'autant. */
    color: var(--white);
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
}

/* Mobile : on ne garde que les deux paquets des bords, sinon la scène charge
   trop l'écran derrière le texte. */
@media (max-width: 767.98px) {
    .giftfloat--inner {
        display: none;
    }

    .giftfloat {
        opacity: 0.24;
    }
}

/* Sans JS (ni --gp) et en mouvement réduit, les paquets restent simplement
   posés à leur place : la scène garde du sens, sans animation. */
@media (prefers-reduced-motion: reduce) {
    .giftfloat {
        transform: rotate(var(--tilt));
    }
}

/* ---------- Avis TripAdvisor ---------- */
.reviews {
    background: var(--snow-50);
}

.reviews__rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.75rem;
    margin-top: var(--space-2);
    margin-bottom: 0;
}

.stars {
    color: var(--gold);
    letter-spacing: 0.1em;
    font-size: 1.1rem;
}

.reviews__score {
    font-weight: 700;
    color: var(--night-800);
}

.reviews__based {
    font-size: 0.9rem;
    color: var(--text-soft);
}

/* Carrousel à défilement horizontal (scroll-snap) — à TOUTES les largeurs.
   Seul le nombre de cartes visibles change (cf. flex-basis de .review) : les avis
   restent sur une seule ligne au lieu de passer en grille sur plusieurs rangées. */
.reviews__grid {
    position: relative;
    /* référent des offsetLeft pour le défilement auto (JS) */
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    padding-bottom: var(--space-2);
    /* évite le rognage de l'ombre des cartes */
    cursor: grab;
    /* défilement à la souris en maintenant le clic (voir main.js) */
}

/* Pendant le glissement : curseur fermé + snap coupé pour un défilement fluide */
.reviews__grid.is-grabbing {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
    user-select: none;
}

.reviews__grid::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.review {
    position: relative;
    overflow: hidden;
    flex: 0 0 100%;
    /* une carte pleine largeur ; 2 puis 3 par vue plus bas */
    scroll-snap-align: start;
    padding: var(--space-3);
    background: var(--white);
    border: 1px solid var(--ice-200);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    /* citations de longueurs très inégales : la signature reste collée en bas */
}

/* Cartes toujours visibles dans le carrousel (le reveal masquerait celles hors écran) */
.js .reviews__grid [data-reveal] {
    opacity: 1;
    transform: none;
}

.review__mark {
    position: absolute;
    top: -0.6rem;
    right: 0.6rem;
    font-family: var(--font-display);
    font-size: 5rem;
    line-height: 1;
    color: var(--ice-200);
}

.review__stars {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--gold);
    letter-spacing: 0.1em;
}

.review__quote {
    flex: 1;
    /* pousse .review__caption en bas de carte, quelle que soit la longueur */
    margin: 0 0 var(--space-3);
    font-size: 1.02rem;
    color: var(--text);
}

.review__caption {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.review__author {
    font-weight: 700;
    color: var(--night-800);
}

.review__meta {
    font-size: 0.85rem;
    color: var(--text-soft);
}

.reviews__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* Le carrousel reste un carrousel : on n'élargit que le nombre de cartes par vue.
   La largeur retire les gouttières pour que la dernière carte tombe pile au bord. */
@media (min-width: 640px) {
    .review {
        flex-basis: calc((100% - var(--space-3)) / 2);
    }
}

@media (min-width: 1000px) {
    .review {
        flex-basis: calc((100% - 2 * var(--space-3)) / 3);
    }
}

/* ---------- FAQ (accordéon) ---------- */
.faq__list {
    max-width: 48rem;
    margin: var(--space-4) auto 0;
    border-top: 1px solid var(--ice-200);
}

.faq__item {
    border-bottom: 1px solid var(--ice-200);
}

.faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: inherit;
    font-weight: 600;
    font-size: 1.05rem;
    text-align: left;
    color: var(--night-800);
    cursor: pointer;
}

.faq__q:hover {
    color: var(--glacier-600);
}

.faq__icon {
    position: relative;
    flex: none;
    width: 18px;
    height: 18px;
}

.faq__icon::before,
.faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    background: var(--glacier-600);
    transition: transform 0.3s ease;
}

.faq__icon::after {
    transform: rotate(90deg);
}

.faq__item.is-open .faq__icon::after {
    transform: rotate(90deg) scaleX(0);
}

.faq__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease;
}

.faq__answer {
    padding-bottom: var(--space-3);
    color: var(--text-soft);
}

.faq__answer p {
    margin: 0;
}

/* Réponses en plusieurs paragraphes (domaines, matériel) */
.faq__answer p + p {
    margin-top: var(--space-2);
}

/* ---------- Flux Instagram ---------- */
.insta {
    background: var(--snow-50);
    overflow: hidden;
}

/* Carrousel horizontal à défilement magnétique, sur tous les écrans */
.insta__track {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: 0 var(--space-2) var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--ice-300) transparent;
    cursor: grab;
    /* défilement à la souris en maintenant le clic (voir main.js) */
}

/* Pendant le glissement : curseur fermé + snap coupé pour un défilement fluide */
.insta__track.is-grabbing {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
    user-select: none;
}

.insta__cell {
    flex: 0 0 min(74vw, 320px);
    scroll-snap-align: start;
}

.insta__card {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--ice-200);
    background: var(--night-900);
    box-shadow: var(--shadow-soft);
}

.insta__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Voile dégradé + légende : révélés au survol / focus clavier */
.insta__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 39, 64, 0) 30%, rgba(15, 39, 64, 0.88) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.insta__badge {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--white);
    background: rgba(15, 39, 64, 0.45);
    backdrop-filter: blur(6px);
    transition: background-color 0.25s ease;
}

.insta__caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Garde-fou : `-webkit-line-clamp` n'est fiable que sur Chromium — Firefox
       laisse les longues légendes déborder sous la carte. Trois lignes de 1.5
       plus le padding, en border-box : la coupe tient sans lui. */
    max-height: calc(4.5em + 2 * var(--space-2));
    padding: var(--space-2);
    color: var(--white);
    font-size: 0.85rem;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.insta__card:hover .insta__img,
.insta__card:focus-visible .insta__img {
    transform: scale(1.06);
}

.insta__card:hover .insta__overlay,
.insta__card:focus-visible .insta__overlay {
    opacity: 1;
}

.insta__card:hover .insta__caption,
.insta__card:focus-visible .insta__caption {
    opacity: 1;
    transform: none;
}

.insta__card:hover .insta__badge {
    background: var(--glacier-600);
}

.insta__cta {
    margin-top: var(--space-3);
    text-align: center;
}

@media (min-width: 900px) {

    /* Desktop : on garde le carrousel une seule ligne, centré sur le conteneur */
    .insta__track {
        gap: var(--space-3);
        max-width: var(--container);
        margin-inline: auto;
        padding-inline: var(--space-2);
        scroll-padding-inline: var(--space-2);
    }

    .insta__cell {
        flex-basis: clamp(280px, 30%, 340px);
    }

    .insta__cta {
        margin-top: var(--space-4);
    }
}

@media (min-width: 1400px) {

    /* Grand écran : la piste déborde du conteneur pour exploiter la largeur
       et afficher davantage de photos (le titre reste dans le conteneur). */
    .insta__track {
        max-width: min(1600px, 92vw);
    }
}

/* ---------- En pratique : météo, forfaits, webcams, partenaires ---------- */
/* Seule bande sombre entre l'accueil et le formulaire. Photo de montagne
   laissée le plus claire possible (demande Maxim du 30/08/2026) : le voile
   bleu nuit n'est dense que là où il y a du texte blanc — le bloc de titre,
   dans les 300 premiers px de la section — puis s'efface derrière les cartes,
   qui sont blanches et n'ont donc pas besoin d'un fond sombre pour ressortir.
   📌 Les 0,66 du haut sont un plancher mesuré, pas un réglage à l'œil : c'est
   l'opacité minimale qui garde 4,5:1 (WCAG AA) entre le blanc du texte et le
   pire cas de la photo, une plaque de neige à ~100 % de luminance — cas réel
   en desktop, où le fond est en `fixed` et défile derrière le titre. */
/* Fond « pratique-1 » = PAYSAGE 9 du Drive ; il remplace ski-rando-initiation-1,
   conservé dans public/assets/img/ pour un retour arrière sans réencodage. */
.practical {
    /* Densité du voile derrière le bloc de titre : seul chiffre à retoucher
       pour éclaircir ou assombrir le haut de la bande (le reste de la section
       n'a que du texte sur fond blanc, il reste donc clair quoi qu'il arrive). */
    --practical-veil: 0.66;
    /* Dénivelé du bord incliné des bandeaux titre (carte météo, cartes-liens,
       panneau partenaires) : leur hauteur à gauche moins celle à droite. Seul
       réglage de l'angle pour toute la section — les trois bandeaux doivent
       tomber ensemble, sinon la famille se défait. Valeur fixe et non relative
       à la largeur : les cartes étant plus étroites en mobile, la pente y est
       plus marquée — c'est le rendu voulu, pas un oubli. */
    --card-slant: 3rem;
    position: relative;
    background:
        linear-gradient(180deg,
            rgba(15, 39, 64, calc(var(--practical-veil) + 0.06)) 0,
            rgba(15, 39, 64, var(--practical-veil)) 300px,
            rgba(15, 39, 64, 0.26) 560px,
            rgba(15, 39, 64, 0.24) calc(100% - 260px),
            rgba(22, 57, 90, 0.5) 100%),
        var(--night-900) url('/assets/img/pratique-1.webp') center / cover no-repeat;
    color: var(--snow-100);
    scroll-margin-top: 5rem;
}

/* Sans parallaxe (mobile et petites fenêtres), le fond est ancré à la section :
   on sait donc exactement quel morceau de photo passe derrière le titre — le
   haut de l'image, rocher et ciel sombres, dont le pixel le plus clair mesure
   0,37 de luminance. 0,40 de voile y suffit pour tenir le 4,5:1, contre 0,66
   en desktop où le `fixed` peut amener une plaque de neige sous le texte. */
@media (max-width: 899.98px) {
    .practical {
        --practical-veil: 0.4;
    }
}

/* Parallaxe réservée au desktop pointeur : iOS ignore `fixed` et Android le
   rend saccadé (même arbitrage que .cta-band). Le voile, lui, reste solidaire
   de la section — fixé, il se recadrerait sur la fenêtre et laisserait fuiter
   la photo en pleine lumière aux deux extrémités de la bande. */
@media (min-width: 900px) and (hover: hover) {
    .practical {
        background-attachment: scroll, fixed;
    }
}

/* Entête sur fond sombre : l'encre par défaut (--night-800) y serait illisible.
   Surtitre en blanc (demande Maxim du 17/08/2026) plutôt qu'en --glacier-400. */
.practical .eyebrow {
    color: var(--ember-400);
}

.practical .section-head h2 {
    font-size: clamp(1.8rem, 4.4vw, 3rem);
    color: var(--white);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(5, 18, 32, 0.5);
}

.practical .section-head__lead {
    color: var(--white);
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(5, 18, 32, 0.45);
}

/* Météo à gauche sur toute la hauteur, les deux cartes-liens empilées à droite */
.practical__grid {
    display: grid;
    gap: var(--space-3);
}

/* Quatre cartes-liens de même poids : logo couleur, titre, appel à l'action.
   2×2 sur tablette (à 4 colonnes elles y seraient trop étroites), puis une seule
   rangée de 4 quand la largeur le permet. 🔴 Le nombre de colonnes doit diviser
   le nombre de cartes, sinon la dernière rangée reste orpheline. */
@media (min-width: 700px) {
    .practical__grid {
        grid-template-columns: repeat(2, 1fr);
        align-items: stretch;
    }
}

@media (min-width: 1040px) {
    .practical__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Ombre portée plus dense que --shadow-card : sur le bleu nuit de la bande,
   l'ombre claire d'origine ne se voyait pas et les cartes semblaient collées.
   Le voile glacier en angle haut-droit est mutualisé avec .lcard : trois aplats
   blancs stricts sur la photo sombre faisaient bloc administratif. */
.wcard {
    /* Repris en marge négative par le bandeau titre, qui doit sortir du padding
       pour toucher les deux bords de la carte. Chaque carte porte le sien : les
       trois n'ont pas le même padding, le bandeau doit suivre celui de la carte
       qui l'accueille. L'angle, lui, est commun (--card-slant sur .practical). */
    --card-pad: clamp(1.25rem, 3vw, 1.75rem);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: var(--card-pad);
    background:
        radial-gradient(115% 80% at 100% 0%,
            rgba(109, 179, 221, 0.3) 0%,
            rgba(109, 179, 221, 0) 60%),
        var(--white);
    /* Ambre plutôt que bleu glacier (demande Maxim du 30/08/2026) : le liseré
       du haut et l'icône du titre sont les deux seules touches de couleur de la
       carte, elles vont ensemble. 📌 Les cartes-liens voisines et le panneau
       partenaires gardent leur liseré bleu. */
    border-top: 3px solid var(--gold);
    box-shadow: 0 26px 60px rgba(5, 18, 32, 0.45);
}

/* Bandeau titre en bleu glacier, coupé en biais sur son bord bas. Essayé le
   30/08/2026 sur la seule carte météo, puis étendu aux deux cartes-liens et au
   panneau partenaires à la demande de Maxim : les trois portent la même entête.
   Marges négatives : le bandeau va d'un bord à l'autre de la carte, alors que
   son titre, lui, reste aligné sur le texte du dessous. */
.wcard__head,
.lcard__head,
.partners__head {
    margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) var(--space-3);
    padding: var(--card-pad) var(--card-pad) calc(0.5rem + var(--card-slant));
    background: linear-gradient(115deg, var(--ice-200) 0%, var(--snow-100) 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--card-slant)), 0 100%);
}

.wcard__title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--night-800);
}

/* Icône nue, en ambre : plus de pastille dégradée — sur le bandeau incliné,
   deux aplats bleus se cognaient — et l'ambre reprend celui du liseré du haut
   de la carte. 26 px pour tenir tête au titre maintenant qu'elle n'a plus de
   fond. Les cartes-liens ont suivi (leur pastille bleue de 44 px a sauté) :
   dans un bandeau commun, deux entêtes différentes ne tenaient pas ensemble. */
.wcard__title svg,
.lcard__icon svg {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    color: var(--gold);
}

.wcard__place,
.wcard__empty {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--text-soft);
}

/* API muette : le message se cale au milieu du vide laissé par les tuiles
   absentes, au lieu de rester collé sous le titre d'une carte pleine hauteur. */
.wcard__empty {
    margin-block: auto;
}

/* Trois jours de front, même en mobile : les tuiles restent lisibles.
   flex + align-content : en desktop la carte est étirée sur la hauteur des deux
   cartes-liens voisines ; sans ça les tuiles restaient collées en haut et la
   moitié basse de la carte était un grand vide blanc. */
.wcard__days {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-content: center;
    gap: 0.5rem;
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}

@media (min-width: 900px) {
    .wcard__days {
        flex: 1;
    }
}

.wday {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.9rem 0.4rem;
    text-align: center;
    background: var(--snow-50);
}

/* Le jour même est traité en plein : dégradé glacier et encre inversée. Il fait
   le point d'accroche coloré de la carte, que le simple aplat --snow-100 ne
   donnait pas (les trois tuiles se ressemblaient trop).
   📌 Testé le 17/08/2026 : un fond différent par famille de temps (ciel bleu,
   gris couvert, bleu-gris de pluie…). Écarté par Maxim — trop sombre. Les
   tuiles restent donc neutres, c'est le picto qui porte l'information. */
.wday--today {
    background: linear-gradient(155deg, var(--glacier-600), var(--night-700));
    box-shadow: 0 10px 24px rgba(0, 110, 194, 0.25);
}

.wday__name {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.wday--today .wday__name {
    color: var(--ice-300);
}

.wday--today .wpart__icon,
.wday--today .wpart__temp {
    color: var(--white);
}

.wday--today .wpart__name,
.wday--today .wpart__label {
    color: var(--ice-200);
}

/* Le filet qui sépare les deux demi-journées suit l'encre inversée de la tuile */
.wday--today .wpart + .wpart {
    border-color: rgba(255, 255, 255, 0.28);
}

.wday--today .wday__snow {
    color: var(--night-800);
    background: var(--ice-300);
}

/* Matin et après-midi, l'un sous l'autre — à toutes les largeurs. Côte à côte,
   la demi-journée ne fait que 57 px de large à 940 px de fenêtre (la carte
   n'occupe qu'une colonne sur deux, elle-même divisée en trois jours) : les
   libellés y partaient sur trois lignes. Ce sont les trois jours qui restent
   de front, jamais les deux tranches. */
.wday__parts {
    display: grid;
    gap: 0.45rem;
    width: 100%;
}

.wpart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

/* Filet de séparation entre les deux tranches */
.wpart + .wpart {
    padding-top: 0.45rem;
    border-top: 1px solid var(--ice-200);
}

.wpart__name {
    margin: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--glacier-600);
}

.wpart__icon {
    margin: 0.1rem 0;
    line-height: 0;
    color: var(--glacier-600);
}

.wpart__temp {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--night-800);
}

.wpart__label {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--text-soft);
}

.wday__snow {
    margin: 0.15rem 0 0;
    padding: 0.1rem 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--night-700);
    background: var(--ice-200);
}

/* Lien météo poussé en bas de carte, aligné avec les CTA des cartes voisines.
   text-decoration: none — sans ça le soulignement par défaut du navigateur
   court sous tout le contenu des cartes-liens (titre, description, CTA). */
.wcard__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    font-weight: 700;
    color: var(--glacier-600);
    text-decoration: none;
}

.wcard__link:hover {
    color: var(--night-800);
}

/* Liseré ambre, voile d'angle et bandeau incliné repris de .wcard : les trois
   cartes de la section se lisent alors comme une même famille.
   Une seule colonne : le bandeau titre (icône + titre) va d'un bord à l'autre,
   la description et le CTA se rangent dessous.
   📌 `align-content: space-between` et non `align-items: center` : en desktop la
   carte est étirée par la carte météo voisine, qui tient sur deux rangées. Avec
   des rangées étirées, le bandeau se serait allongé avec elles — son biseau
   serait descendu jusqu'au milieu de la carte. Ici il garde sa hauteur propre,
   et c'est le vide qui s'ouvre entre les trois blocs. */
.lcard {
    --card-pad: clamp(1.25rem, 3vw, 1.6rem);
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: center;
    justify-items: center;
    row-gap: 0.35rem;
    padding: var(--space-4) var(--card-pad);
    text-align: center;
    background:
        radial-gradient(115% 80% at 100% 0%,
            rgba(109, 179, 221, 0.3) 0%,
            rgba(109, 179, 221, 0) 60%),
        var(--white);
    border-top: 3px solid var(--gold);
    box-shadow: 0 20px 48px rgba(5, 18, 32, 0.4);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 64px rgba(5, 18, 32, 0.5);
}

/* Icône et titre sur une ligne, dans le bandeau : exactement .wcard__title. */
.lcard__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

/* 📌 Plus de pastille bleue de 44 px : l'icône est nue et ambre comme celle de
   la carte météo (cf. la règle .wcard__title svg plus haut). Il ne reste ici
   que le grossissement au survol, propre aux cartes-liens. */
.lcard__icon {
    display: flex;
    transition: transform 0.25s ease;
}

.lcard:hover .lcard__icon {
    transform: scale(1.06);
}

/* Logo couleur : posé au-dessus du titre, il porte la carte à lui seul
   maintenant que le paragraphe descriptif a disparu. */
.lcard__logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-2);
}

.lcard__logo {
    transition: transform 0.25s ease;
}

.lcard:hover .lcard__logo {
    transform: scale(1.06);
}

.lcard__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--night-800);
    transition: color 0.25s ease;
}

.lcard:hover .lcard__title {
    color: var(--glacier-600);
}


.lcard__text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-soft);
}

.lcard__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-weight: 700;
    color: var(--glacier-600);
}

.lcard:hover .lcard__cta {
    color: var(--night-800);
}


/* --- Partenaires --- */
/* Un seul panneau blanc plutôt que trois cartes flottantes : sur la bande
   sombre, trois boîtes séparées faisaient doublon avec les trois cartes du
   dessus. Le panneau se lit comme un « mur de partenaires », les colonnes
   étant séparées par un filet obtenu avec gap: 1px sur fond --snow-100. */
.partners {
    --card-pad: clamp(1.5rem, 4vw, 2.5rem);
    margin-top: var(--space-4);
    /* ⚠️ Obligatoire depuis que le panneau porte un bandeau : celui-ci sort du
       padding par marges négatives, sans quoi il déborde en largeur et la page
       gagne un défilement horizontal. Le défilement propre à .partners__list
       (piste mobile) n'en est pas affecté, il a son overflow à lui. */
    overflow: hidden;
    padding: var(--card-pad);
    text-align: center;
    background: var(--white);
    border-top: 3px solid var(--gold);
    box-shadow: 0 26px 60px rgba(5, 18, 32, 0.45);
}

/* Agrandi (0,78 rem à l'origine) : dans le bandeau incliné, l'ancien corps de
   12,5 px se lisait comme une étiquette perdue en haut d'un grand aplat bleu,
   alors que les cartes voisines y posent un vrai titre. 1,1 rem le met au
   niveau de `.lcard__title` (1,15 rem) sans le faire passer devant.
   📌 Interlettrage ramené de 0,2 à 0,14 em : à ce corps-là, 0,2 em étalait
   « MES PARTENAIRES » sur presque toute la largeur de la carte en mobile. */
.partners__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--glacier-600);
}

.partners__lead {
    margin: 0.4rem auto 0;
    max-width: 46ch;
    font-size: 0.95rem;
    color: var(--text-soft);
}

/* Mobile : piste à défilement magnétique, doublée d'un défilement automatique
   (cf. main.js). Empilés, les 4 partenaires ajoutaient près de 800 px de haut à
   une section déjà longue, et le dernier n'était jamais vu. */
.partners__list {
    /* référent des offsetLeft pour le défilement auto (JS) */
    position: relative;
    display: flex;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--snow-100);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Firefox */
    scrollbar-width: none;
}

.partners__list::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* Une carte par vue, plus l'amorce de la suivante : sans ce bout de voisine
   dépassant du cadre, rien ne dit qu'il y a d'autres partenaires à droite. */
.partners__item {
    flex: 0 0 min(72%, 15rem);
    scroll-snap-align: start;
    background: var(--white);
}

/* 4 partenaires depuis le 10/09/2026 (Mont Blanc Energy ajouté) : 2x2 dès
   720 px, une rangée de 4 dès 1000 px. La piste redevient une grille à 720 px et
   main.js démonte le carrousel (son media query est le même : max-width 719px).
   🔴 Le nombre de colonnes DOIT diviser le nombre de partenaires : sinon les
   cases vides laissent voir le fond, et les filets d'1 px les dessinent en
   creux (piège rencontré le 30/08 avec la rangée orpheline, le 31/08 à 2
   partenaires, et le 06/09 en repassant à 3 — une rangée de 3 à l'époque). */
@media (min-width: 720px) {
    .partners__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        overflow: visible;
    }
}

@media (min-width: 1000px) {
    .partners__list {
        grid-template-columns: repeat(4, 1fr);
    }
}


.partner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    height: 100%;
    padding: var(--space-3) var(--space-2);
    text-decoration: none;
    transition: background-color 0.25s ease;
}

a.partner:hover {
    background: var(--snow-50);
}

/* Boîte de hauteur fixe : les logos ont des formats très différents
   (badge rond, pictogramme vertical, wordmark large) — sans elle, les noms et
   les rôles se retrouvaient à trois hauteurs différentes sur la même ligne. */
.partner__frame {
    display: grid;
    place-items: center;
    width: 100%;
    height: 5.5rem;
}

/* Logos en couleur au repos, niveaux de gris au survol (demande Maxim du
   17/08/2026 — l'inverse de la première version). L'opacité, elle, reste à 1
   dans les deux états : la faire baisser au survol donnerait l'impression d'un
   lien désactivé. C'est le grandissement qui signale l'interaction. */
.partner__logo {
    max-width: 12rem;
    max-height: 5.5rem;
    width: auto;
    height: auto;
    transition: filter 0.25s ease, transform 0.25s ease;
}

a.partner:hover .partner__logo,
a.partner:focus-visible .partner__logo {
    filter: grayscale(1);
    transform: scale(1.05);
}

/* Repli tant qu'un logo n'a pas été fourni : le nom, traité en signature */
.partner__wordmark {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--night-800);
}

.partner__name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--night-800);
}

.partner__role {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-soft);
}

/* Le « Voir le site » ne se dévoile qu'au survol : au repos, trois libellés
   identiques alourdissaient le panneau sans rien apprendre. */
.partner__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: auto;
    padding-top: 0.4rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--glacier-600);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

a.partner:hover .partner__cta,
a.partner:focus-visible .partner__cta {
    opacity: 1;
    transform: none;
}

/* Sans survol possible, le « Voir le site » est montré d'emblée. Les logos, eux,
   n'ont plus besoin de dérogation : ils sont déjà en couleur au repos. */
@media (hover: none) {
    .partner__cta {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .partner__cta {
        transition: none;
        transform: none;
    }

    a.partner:hover .partner__logo,
    a.partner:focus-visible .partner__logo,
    .lcard:hover .lcard__icon {
        transform: none;
    }
}

/* ---------- Formulaire de réservation ---------- */
/* Fond : texture neige mutualisée avec .about (voir plus haut) */
.contact__whatsapp {
    margin-top: var(--space-2);
    margin-bottom: 0;
    font-size: 0.95rem;
    color: var(--text-soft);
}

.contact__whatsapp a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    color: var(--night-700);
    white-space: nowrap;
}

.contact__whatsapp a svg {
    color: #25d366;
}

/* ---------- Liens au fil du texte : couleur seule, pas de soulignement ----------
   Demande répétée de Maxim (numéro WhatsApp, « Contactez-moi » des niveaux et des
   tarifs) : dans un paragraphe en gris, le bleu — ou le gras — suffit à désigner
   le lien, le trait du navigateur alourdit la ligne. Le soulignement revient au
   survol ET au focus clavier : sans lui, un lien au clavier ne se distinguerait
   plus du texte. Liste explicite plutôt qu'une règle sur `a` : les liens de
   navigation, de pied de page et de mentions légales gardent le leur. */
.contact__whatsapp a,
.levels__hint a,
.pricing__lead a {
    text-decoration: none;
}

.contact__whatsapp a:hover,
.contact__whatsapp a:focus-visible,
.levels__hint a:hover,
.levels__hint a:focus-visible,
.pricing__lead a:hover,
.pricing__lead a:focus-visible {
    text-decoration: underline;
}

.cform {
    max-width: 62rem;
    margin: var(--space-4) auto 0;
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--white);
    border-top: 3px solid var(--glacier-600);
    box-shadow: var(--shadow-card);
}

.cform__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

/* min-width: 0 — sans ça, un champ placé en colonne de grille refuse de
   descendre sous la largeur intrinsèque de son <select> (option la plus longue
   + 5,3 rem de padding) : le formulaire déborde à droite sur mobile, le
   document devient plus large que la fenêtre et le header sticky décroche. */
.field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Le display:flex ci-dessus l'emporterait sur la règle [hidden] du navigateur :
   sans ça, le champ « précisez votre activité » resterait visible hors
   « Autres activités ». */
.field[hidden] {
    display: none;
}

.field--full {
    grid-column: 1 / -1;
}

/* Deux champs côte à côte, même sur mobile (nom+prénom, date+heure).
   minmax(0, 1fr) et non 1fr : les pistes doivent pouvoir passer sous la
   largeur min-content de leur contenu (cf. .field). */
.field-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3);
}

.field label {
    margin-bottom: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--night-700);
}

/* ---------- Périodes du séjour ----------
   Une réservation peut porter plusieurs périodes (dates, durée et créneau
   propres à chacune) : chacune est encadrée pour qu'on voie d'un coup d'œil
   ce qui va ensemble, d'autant qu'elles se ressemblent toutes. */
.cform__periods {
    display: grid;
    gap: var(--space-2);
}

/* <fieldset> remis à plat : seuls le fond et le liseré gauche marquent le bloc */
.period {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    padding: var(--space-2);
    border: 1px solid var(--ice-200);
    border-left: 3px solid var(--glacier-400);
    background: var(--snow-50);
}

/* Un <legend> ne se laisse pas mettre en flex de façon fiable selon les
   navigateurs : on le sort du flux d'entête natif et on le pose comme une
   ligne normale au-dessus des champs. */
.period__head {
    display: flex;
    float: left;
    width: 100%;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    padding: 0;
}

.period__title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--night-800);
}

.period__remove {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.4rem;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--text-soft);
    cursor: pointer;
}

.period__remove:hover,
.period__remove:focus-visible {
    color: #a5322a;
}

/* Le bouton d'ajout n'apparaît (via main.js) qu'une fois la période remplie */
.cform__periods-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.cform__periods-note {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-soft);
}

/* Libellé + lien d'aide sur la même ligne (« Quel est mon niveau ? ») */
.field__labelrow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Volontairement voyant : c'est le lien qui évite les niveaux mal déclarés */
.field__help {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--ice-300);
    background: var(--snow-100);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--glacier-600);
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.field__help svg {
    flex: none;
}

.field__help:hover,
.field__help:focus-visible {
    border-color: var(--glacier-600);
    background: var(--glacier-600);
    color: var(--white);
}

/* Précision liée au choix courant (prérequis de niveau / d'âge) */
.field__note {
    margin: 0.45rem 0 0;
    padding-left: 0.7rem;
    border-left: 3px solid var(--ice-300);
    font-size: 0.82rem;
    color: var(--text-soft);
}

.field__control {
    position: relative;
    min-width: 0;
}

.field__icon {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--glacier-600);
    pointer-events: none;
    transition: color 0.2s ease;
}

.field__control--textarea .field__icon {
    top: 0.95rem;
    transform: none;
}

.field:focus-within .field__icon {
    color: var(--night-700);
}

/* min-width: 0 : les contrôles natifs (date, number, select) ont une largeur
   minimale intrinsèque que width: 100% ne suffit pas à annuler. */
.field input,
.field select,
.field textarea {
    width: 100%;
    min-width: 0;
    padding: 0.85rem 1rem 0.85rem 2.7rem;
    border: 1px solid var(--ice-300);
    border-radius: 0;
    background: var(--snow-50);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.field textarea {
    min-height: 7.5rem;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--glacier-600);
    background-color: var(--white);
    box-shadow: 0 0 0 3px rgba(63, 143, 196, 0.16);
}

/* Créneau horaire verrouillé tant que la durée n'est pas choisie */
.field select:disabled {
    background-color: var(--snow-100);
    color: var(--text-soft);
    cursor: not-allowed;
}

.field select:disabled + .field__icon,
.field:has(select:disabled) .field__icon {
    opacity: 0.5;
}

.field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232d74a6' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

/* ---------- Formulaire en deux étapes ---------- */
/* .cform--stepped n'est posée que par le JS : sans lui, les deux étapes
   restent affichées et le formulaire s'envoie d'un seul tenant. */
.cform--stepped .cform__step:not(.is-active) {
    display: none;
}

.cform__progress {
    display: none;
    margin: 0 0 var(--space-3);
    padding: 0 0 var(--space-3);
    border-bottom: 1px solid var(--ice-300);
    list-style: none;
    gap: var(--space-3);
}

.cform--stepped .cform__progress {
    display: flex;
}

.cform__progress-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-soft);
    transition: color 0.2s ease;
}

.cform__progress-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--ice-300);
    background: var(--snow-50);
    font-size: 0.85rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cform__progress-item.is-current {
    color: var(--night-700);
}

.cform__progress-item.is-current .cform__progress-num,
.cform__progress-item.is-done .cform__progress-num {
    border-color: var(--glacier-600);
    background: var(--glacier-600);
    color: var(--white);
}

/* Étape franchie : la pastille passe en coche */
.cform__progress-item.is-done .cform__progress-num {
    font-size: 0;
}

.cform__progress-item.is-done .cform__progress-num::after {
    content: "✓";
    font-size: 0.9rem;
}

/* Entête d'étape : masquée quand le JS gère la progression (redondante) */
.cform__step-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 var(--space-3);
}

.cform--stepped .cform__step-head {
    display: none;
}

.cform__step-number {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--glacier-600);
}

.cform__step-title {
    font-weight: 600;
    color: var(--night-700);
}

.cform__nav {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* Boutons Continuer / Retour : sans JS ils n'ont aucun sens */
.cform--stepped .cform__nav {
    display: flex;
}

/* Étape 2 : le bouton d'envoi reste toujours affiché, avec le devis à sa gauche
   (sous lui tant qu'on manque de largeur). */
.cform__nav--end {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-3);
}

.cform__nav-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* Formulaire d'un seul tenant (page « Autres activités ») : pas d'étapes, donc
   pas de devis à gauche du bouton — il se cale simplement à droite. */
.cform--plain .cform__nav--end {
    justify-content: flex-end;
}

/* ---------- Devis (total + acompte) à côté du bouton d'envoi ---------- */
.cform__quote {
    flex: 1 1 19rem;
    padding: 0.85rem 1rem;
    background: var(--snow-50);
    border-left: 3px solid var(--ember-500);
}

.cform__quote-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ember-700);
}

.cform__quote-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0;
    color: var(--night-800);
}

.cform__quote-line strong {
    font-size: 1.25rem;
    font-weight: 700;
    white-space: nowrap;
}

/* L'acompte est l'information secondaire : même ligne, poids plus léger */
.cform__quote-line--deposit {
    color: var(--text-soft);
}

.cform__quote-line--deposit strong {
    font-size: 1rem;
    font-weight: 600;
}

.cform__quote-detail,
.cform__quote-note {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-soft);
}

.cform__quote-detail {
    color: var(--night-700);
}

.cform__step-alert {
    margin: var(--space-3) 0 0;
    padding: 0.7rem 0.95rem;
    border-left: 3px solid #d0453b;
    background: #fbeceb;
    font-size: 0.9rem;
    color: #a5322a;
}

/* Champ obligatoire laissé vide au moment de passer à l'étape suivante */
.field__error {
    margin: 0.4rem 0 0;
    font-size: 0.82rem;
    color: #a5322a;
}

.field--invalid input,
.field--invalid select {
    border-color: #d0453b;
    background-color: #fdf6f5;
}

.field--invalid .field__icon {
    color: #d0453b;
}

/* ---------- Téléphone : indicatif + numéro + WhatsApp ---------- */
/* Indicatif : une largeur souhaitée de 9 rem, mais compressible (minmax(0, …))
   pour ne pas forcer un débordement sur les écrans de 320 px. */
.phone-group {
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    gap: var(--space-2);
}

/* L'indicatif n'a pas d'icône : le texte reprend toute la largeur */
.field__control--prefix select {
    padding-left: 1rem;
}

.wa-check {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}

/* Case native masquée : on dessine .wa-check__box à la place */
.wa-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.wa-check__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--ice-300);
    background: var(--snow-50);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wa-check input:checked + .wa-check__box {
    border-color: #25d366;
    background: #25d366;
}

.wa-check input:checked + .wa-check__box::after {
    content: "✓";
    font-size: 0.8rem;
    line-height: 1;
    color: var(--white);
}

.wa-check input:focus-visible + .wa-check__box {
    outline: 2px solid var(--glacier-600);
    outline-offset: 2px;
}

.wa-check__icon {
    display: inline-flex;
    color: #25d366;
}

/* ---------- Popup « détail des niveaux » ---------- */
/* Ouvert par :target (lien du champ Niveau) : fonctionne sans JS, qui n'ajoute
   que la fermeture par Échap. Même principe que les fiches du back-office. */
.lmodal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.lmodal:target {
    visibility: visible;
    opacity: 1;
}

.lmodal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 39, 64, 0.55);
    backdrop-filter: blur(2px);
}

.lmodal__panel {
    position: relative;
    width: min(46rem, 100%);
    max-height: 88vh;
    overflow-y: auto;
    padding: var(--space-3);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    background: var(--white);
    border-top: 3px solid var(--glacier-600);
    box-shadow: var(--shadow-card);
    transform: translateY(1.5rem);
    transition: transform 0.28s ease;
}

.lmodal:target .lmodal__panel {
    transform: translateY(0);
}

.lmodal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.lmodal__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--night-800);
}

/* Titre accentué (popup des loueurs) : l'orange de la charte, celui déjà utilisé
   pour accentuer du texte (.pricing__accent, .level__item--accent). Pas l'ambre
   --gold, qui sert aux liserés et aux icônes : sur fond blanc il ne tient pas le
   contraste demandé pour du texte. */
.lmodal__title--accent {
    color: var(--ember-700);
}

.lmodal__lead {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: var(--text-soft);
}

.lmodal__close {
    flex: none;
    line-height: 1;
    padding: 0.1rem 0.45rem;
    font-size: 1.7rem;
    color: var(--text-soft);
    text-decoration: none;
}

.lmodal__close:hover {
    color: var(--night-800);
}

.lmodal__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lmodal__item {
    padding: 0.8rem 0;
    border-top: 1px solid var(--ice-200);
}

.lmodal__level {
    display: block;
    margin-bottom: 0.15rem;
    font-weight: 700;
    color: var(--night-700);
}

/* Semaines du popup « Consulter le calendrier » : le libellé porte une icône,
   d'où la mise en ligne (les niveaux, eux, restent de simples blocs). */
.lmodal__level--date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lmodal__level--date svg {
    flex: none;
    color: var(--glacier-600);
}

.lmodal__text {
    display: block;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-soft);
}

/* Restriction de la semaine (« Samedi et dimanche exclus ») : à distinguer du
   repère libre, qui est une simple précision de calendrier. */
.lmodal__text--warn {
    margin-top: 0.15rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--night-800);
}

/* Aucune semaine ouverte : même cadre qu'un item de la liste */
.lmodal__empty {
    margin: 0;
    padding: 0.8rem 0;
    border-top: 1px solid var(--ice-200);
    color: var(--text-soft);
}

/* Les boutons sont en `inline-flex` : alignés au fil du texte, ils se coupaient
   n'importe où et le dernier partait seul sur une ligne. En flex, ils restent
   groupés à droite et passent à la ligne proprement quand la place manque. */
.lmodal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: var(--space-2);
}

@media (min-width: 700px) {
    .lmodal {
        align-items: center;
        padding: var(--space-3);
    }

    .lmodal__panel {
        padding: var(--space-4);
        transform: translateY(0) scale(0.96);
    }

    .lmodal:target .lmodal__panel {
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lmodal,
    .lmodal__panel {
        transition: none;
    }
}

/* Message d'accueil de la page dédiée (paramétré dans le back-office) :
   présenté comme une bulle de conversation envoyée par Christelle. */
.say {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    max-width: 62rem;
    margin: 0 auto;
}

.say__avatar {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    /* photo-christelle.webp est en paysage, Christelle à droite du cadre */
    object-position: 80% center;
    border: 3px solid var(--white);
    box-shadow: var(--shadow-soft);
}

.say__bubble {
    position: relative;
    margin: 0;
    padding: 1rem 1.3rem;
    background: var(--white);
    border-radius: var(--radius);
    border-top-left-radius: 4px;
    box-shadow: var(--shadow-soft);
}

/* Pointe de la bulle, dirigée vers l'avatar */
.say__bubble::before {
    content: '';
    position: absolute;
    top: 16px;
    left: -9px;
    border-style: solid;
    border-width: 8px 10px 8px 0;
    border-color: transparent var(--white) transparent transparent;
}

.say__name {
    margin: 0 0 0.15rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--glacier-600);
}

.say__text {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--night-800);
}

@media (min-width: 700px) {
    .say__avatar {
        width: 88px;
        height: 88px;
    }

    .say__text {
        font-size: 1.08rem;
    }
}

.cform__whatsapp {
    max-width: 62rem;
    margin: var(--space-3) auto 0;
    font-size: 0.95rem;
    text-align: center;
    color: var(--text-soft);
}

.cform__whatsapp a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    color: var(--night-700);
    white-space: nowrap;
}

.cform__whatsapp a svg {
    color: #25d366;
}

.cform__required {
    margin-top: var(--space-3);
    margin-bottom: var(--space-2);
    font-size: 0.85rem;
    color: var(--text-soft);
}

.cform__privacy {
    margin-top: var(--space-2);
    margin-bottom: 0;
    font-size: 0.8rem;
    color: var(--text-soft);
}

@media (min-width: 640px) {
    .cform__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Honeypot anti-spam : hors écran, jamais rempli par un humain */
.cform__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Retour du formulaire (succès / erreurs) */
.form-alert {
    max-width: 62rem;
    margin: var(--space-4) auto 0;
    padding: 1.1rem 1.4rem;
    border-left: 4px solid var(--glacier-600);
    background: var(--snow-100);
    color: var(--text);
}

.form-alert p {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
}

.form-alert__title {
    margin: 0 !important;
    font-weight: 700;
    font-size: 1.05rem !important;
    color: var(--night-800);
}

.form-alert ul {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.92rem;
}

.form-alert--success {
    border-left-color: #2e9e6b;
    background: #eaf7f0;
}

.form-alert--success .form-alert__title {
    color: #1c6e49;
}

.form-alert--error {
    border-left-color: #d0453b;
    background: #fbeceb;
}

.form-alert--error .form-alert__title {
    color: #a5322a;
}

/* ---------- Note « équipe de confiance » (sous le formulaire) ---------- */
/* Encart discret, aligné sur la largeur du formulaire : filet glacier à gauche
   et fond neige pour se distinguer de la carte blanche du .cform sans créer une
   seconde section à part entière. */
.teamnote {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    max-width: 62rem;
    margin: var(--space-4) auto 0;
    padding: clamp(1.25rem, 3.5vw, 2rem);
    background: var(--snow-50);
    border-left: 3px solid var(--ember-500);
    box-shadow: var(--shadow-soft);
}

.teamnote__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    color: var(--ember-700);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.teamnote__body {
    min-width: 0;
}

/* Orange de la charte (demande de Maxim), le même que les autres titres et
   fragments accentués — pas l'ambre --gold, réservé aux liserés et aux icônes. */
.teamnote__title {
    margin-bottom: var(--space-2);
    font-size: var(--fs-h3);
    color: var(--ember-700);
}

.teamnote__text {
    margin-bottom: var(--space-2);
    color: var(--text-soft);
}

.teamnote__text:last-child {
    margin-bottom: 0;
}

/* Mobile : l'icône passe au-dessus du texte plutôt que de manger la largeur. */
@media (max-width: 599.98px) {
    .teamnote {
        flex-direction: column;
        gap: var(--space-2);
    }
}

/* ---------- Pages légales ---------- */

.page-hero--legal .eyebrow {
    color: var(--ember-700);
}

.legal-layout {
    display: grid;
    gap: var(--space-4);
    align-items: start;
}

.legal-toc {
    border: 1px solid var(--ice-200);
    background: var(--snow-50);
    padding: var(--space-2) var(--space-3);
}

.legal-toc__title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--glacier-600);
    margin-bottom: var(--space-1);
}

.legal-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}

.legal-toc__list li {
    counter-increment: toc;
}

.legal-toc__list li+li a {
    border-top: 1px solid var(--snow-100);
}

.legal-toc__list a {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding-block: 0.35rem;
    font-size: 0.92rem;
    color: var(--text-soft);
    text-decoration: none;
}

.legal-toc__list a::before {
    content: counter(toc, decimal-leading-zero);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--glacier-600);
}

.legal-toc__list a:hover {
    color: var(--night-700);
}

.legal {
    max-width: 46rem;
}

.legal__title {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 1.35rem;
    margin-top: var(--space-4);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--ice-200);
    /* 🔴 L'en-tête est collant (92 px) : à 1,5 rem de marge, un lien vers
       #section-N amenait le titre DERRIÈRE lui. La hauteur d'en-tête doit être
       comprise dans la marge — c'est ce que font déjà les autres ancres du site. */
    scroll-margin-top: calc(var(--header-h) + var(--space-3));
}

.legal__title:first-child {
    margin-top: 0;
}

.legal__num {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--glacier-600);
}

.legal p,
.legal li {
    color: var(--text-soft);
}

.legal__list {
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
}

.legal__list li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.45rem;
}

/* Puce losange, cohérente avec la barre de confiance de l'accueil */
.legal__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    background: var(--glacier-400);
    transform: rotate(45deg);
}


/* Informations à compléter avant la mise en ligne */
.legal mark {
    background: #fceeb5;
    padding: 0.05em 0.3em;
}

@media (min-width: 900px) {
    .legal-layout {
        grid-template-columns: 250px minmax(0, 1fr);
    }

    .legal-toc {
        position: sticky;
        top: var(--space-3);
    }
}

/* ==========================================================================
   Pages activités (cours de ski, hors-piste, rando, autres)
   ========================================================================== */

/* ---------- Hero image ---------- */
/* Comme le hero de l'accueil : passe sous le header sticky transparent. */
.activity-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(78vh, 720px);
    margin-top: calc(-1 * var(--header-h));
    padding-top: var(--header-h);
    overflow: hidden;
    background: var(--night-800);
    color: var(--white);
}

.activity-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Le hero couvre du 0,6:1 (mobile) au 2:1 (desktop) : chaque photo perd une
       part différente de son cadre. --hero-pos (posé par la vue) recentre le
       sujet quand « center » le couperait ; par défaut, rien ne change. */
    object-position: var(--hero-pos, center);
}

.activity-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 39, 64, 0.32) 0%, rgba(15, 39, 64, 0.42) 50%, rgba(15, 39, 64, 0.84) 100%);
}

.activity-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-block: var(--space-5) var(--space-4);
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--space-3);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--snow-100);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.crumbs a {
    color: var(--snow-100);
    text-decoration: none;
}

.crumbs a:hover {
    color: var(--white);
}

.crumbs__sep {
    opacity: 0.5;
}

/* Variante encre sombre : fil d'Ariane sur fond clair (.page-hero, centré) */
.crumbs--ink {
    justify-content: center;
    color: var(--text-soft);
    text-shadow: none;
}

.crumbs--ink a {
    color: var(--glacier-600);
}

.crumbs--ink a:hover {
    color: var(--night-800);
}

.activity-hero__eyebrow {
    margin-bottom: var(--space-2);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ember-400);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.activity-hero__title {
    color: var(--white);
    font-size: clamp(2.3rem, 5.5vw, 3.9rem);
    max-width: 16ch;
    margin-bottom: var(--space-2);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

/* Plusieurs lignes possibles : interligne resserré entre elles, respiration
   normale avant les boutons (dernier <p> du hero). */
.activity-hero__lead {
    max-width: 56ch;
    margin-bottom: var(--space-2);
    font-size: var(--fs-lead);
    color: var(--white);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.activity-hero__lead:last-of-type {
    margin-bottom: var(--space-3);
}

.activity-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ---------- Présentation + fiche « en bref » ---------- */
.activity-intro__grid {
    display: grid;
    gap: var(--space-4);
    align-items: start;
}

/* Sous-titres et listes des blocs titrés de `about.paragraphs` */
.activity-intro__title {
    margin-top: var(--space-3);
}

.activity-intro__list {
    margin-bottom: var(--space-2);
}

.activity-intro__list li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.45rem;
}

/* Puce losange, cohérente avec les listes des pages légales */
.activity-intro__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    background: var(--glacier-400);
    transform: rotate(45deg);
}

.activity-intro__list strong,
.level__text strong,
.focus-card__list strong,
.pricing__lead-list strong {
    color: var(--night-800);
}

/* Puce mise en avant (rando : « Haute montagne », clé 'highlight') : même
   habillage que les encarts du site — fond neige, filet glacier, liseré braise
   à gauche — et la puce losange passe en braise, à l'intérieur du cadre. */
.pricing__lead-list li.pricing__lead-item--highlight {
    margin-top: 0.9rem;
    padding: 0.9rem 1.1rem 1rem 2.4rem;
    background: var(--snow-50);
    border: 1px solid var(--ice-200);
    border-left: 3px solid var(--ember-500);
}

.pricing__lead-list li.pricing__lead-item--highlight::before {
    left: 1rem;
    top: calc(0.9rem + 0.55em);
    background: var(--ember-500);
}

/* Bouton sous une puce de l'accroche (rando : « Haute montagne → Demander un
   devis ») : sur sa propre ligne, au gabarit réduit de l'ancien encart — il ne
   doit pas concurrencer le « Réserver » de bas de section. */
.pricing__lead-cta {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin-top: 0.6rem;
    padding: 0.62rem 1.3rem;
    font-size: 0.74rem;
}

.pricing__lead a.pricing__lead-cta:hover,
.pricing__lead a.pricing__lead-cta:focus-visible {
    text-decoration: none;
}

.activity-facts {
    padding: var(--space-3);
    border: 1px solid var(--ice-200);
    border-top: 3px solid var(--glacier-600);
    background: var(--snow-50);
}

.activity-facts__title {
    margin-bottom: var(--space-2);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--glacier-600);
}

.activity-facts__list {
    display: grid;
    gap: var(--space-2);
}

.activity-facts__item {
    display: flex;
    gap: 0.9rem;
}

.activity-facts__item svg {
    flex: none;
    margin-top: 0.2rem;
    color: var(--glacier-600);
}

.activity-facts__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--night-700);
}

.activity-facts__text {
    display: block;
    color: var(--text-soft);
    font-size: 0.95rem;
}

/* Fiche « Participants » : une ligne par précision */
.activity-facts__text + .activity-facts__text {
    margin-top: 0.25rem;
}

/* Fragment mis en avant dans une fiche (clé 'strong' de la langue) : le bleu nuit
   des `strong` du site, pour ressortir du gris de la ligne. Le gras vient du
   <strong> lui-même, il n'y a que la couleur à poser ici. */
.activity-facts__accent {
    color: var(--night-800);
}

@media (min-width: 900px) {
    .activity-intro__grid {
        grid-template-columns: 7fr 4fr;
        gap: var(--space-5);
    }

    .activity-facts {
        position: sticky;
        top: calc(var(--header-h) + var(--space-2));
    }
}

/* ---------- Niveaux : accordéon d'images (page Cours de ski) ---------- */
.levels {
    margin-top: var(--space-5);
}

.levels__head {
    max-width: 44rem;
}

.levels__title {
    margin-bottom: 0.4rem;
    font-size: clamp(1.45rem, 4.4vw, 1.9rem);
}

.levels__hint {
    margin-bottom: 0;
    color: var(--text-soft);
    font-size: 0.95rem;
}

/* Une ligne par précision (`hint` en tableau) */
.levels__hint + .levels__hint {
    margin-top: 0.25rem;
}


.levels__grid {
    display: grid;
    gap: 6px;
    align-items: start;
    margin-top: var(--space-3);
}

.level__card {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    min-height: 12rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--night-800);
    color: var(--white);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.level__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: 3px;
    background: var(--glacier-400);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s ease;
}

.level__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s ease;
}

/* Drapeau 'light' d'une vignette : les photos à contre-jour (Vallée Blanche)
   s'assombrissent encore sous le dégradé du libellé. Un cran de luminosité, pas
   plus — au-delà, la neige part en blanc bouché. */
.level__img--light {
    filter: brightness(1.12);
}

.level__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 39, 64, 0) 30%, rgba(15, 39, 64, 0.55) 65%, rgba(15, 39, 64, 0.9) 100%);
}

.level__body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3);
}

.level__title {
    font-size: clamp(1.5rem, 5vw, 1.9rem);
    font-weight: 700;
    line-height: 1.1;
    text-shadow: 0 2px 20px rgba(15, 39, 64, 0.45);
    /* Un titre de niveau peut porter un retour à la ligne voulu (cf. « Progression
       Tout Terrain », page hors-piste) : il est écrit comme un vrai saut de ligne
       dans le fichier de langue, pas comme un <br> — la langue reste du texte.
       `pre-line` l'honore et laisse les espaces se replier normalement ailleurs. */
    white-space: pre-line;
}

/* Signe + / − repris de la FAQ */
.level__icon {
    position: relative;
    flex: none;
    width: 18px;
    height: 18px;
}

.level__icon::before,
.level__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    background: var(--white);
    transition: transform 0.3s ease;
}

.level__icon::after {
    transform: rotate(90deg);
}

.level.is-open .level__icon::after {
    transform: rotate(90deg) scaleX(0);
}

.level__card:hover .level__img,
.level.is-open .level__img {
    transform: scale(1.06);
}

.level__card:hover::before,
.level.is-open .level__card::before {
    transform: scaleX(1);
}

.level__card:focus-visible {
    outline: 3px solid var(--glacier-400);
    outline-offset: -3px;
}

.level__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease;
}

.level__text {
    padding: var(--space-3);
    border-left: 3px solid var(--glacier-600);
    background: var(--snow-50);
    color: var(--text-soft);
}

.level__text p {
    margin: 0;
    max-width: 70ch;
}

.level__text p + p {
    margin-top: 0.9rem;
}

/* Bloc titré d'un panneau (« Un aperçu de ce que vous apprendrez… », « Journée type »…) :
   les infos pratiques ne sont pas des puces d'apprentissage, un filet les sépare. */
.level__block {
    margin-top: var(--space-2);
}

.level__block + .level__block {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--ice-200);
}

/* Paragraphe qui suit un bloc titré (« L'objectif : » des panneaux 1, 2 et 4) :
   `.level__text p` le met à `margin: 0` et la règle `p + p` ne s'applique pas —
   son voisin est un <div>. Sans ça il se collait à la dernière puce du bloc. */
.level__block + p {
    margin-top: var(--space-2);
}

/* Même angle mort pour la conclusion d'un bloc ('after', qui suit la liste) :
   `p + p` ne s'applique pas derrière un <ul>, elle se collait à la dernière puce. */
.level__list + p {
    margin-top: var(--space-2);
}

/* Accroche du panneau : le vrai titre de la formule, là où la vignette ne porte
   qu'un libellé court. Plus haut dans la hiérarchie que `.level__subtitle`
   (« Pour qui ? », « Au programme : »), qui découpe le panneau sous elle. */
.level__lead {
    margin-bottom: 0.9rem;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--night-800);
}

.level__subtitle {
    margin-bottom: 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--glacier-600);
}

.level__text .level__subtitle + p {
    margin-top: 0;
}

/* Puce losange, cohérente avec les listes de la présentation */
.level__list li,
.focus-card__list li,
.pricing__lead-list li,
.pricing__deposit-list li {
    position: relative;
    max-width: 70ch;
    padding-left: 1.4rem;
    margin-bottom: 0.45rem;
}

.level__list li::before,
.focus-card__list li::before,
.pricing__lead-list li::before,
.pricing__deposit-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    background: var(--glacier-400);
    transform: rotate(45deg);
}

.level__list li:last-child,
.focus-card__list li:last-child,
.pricing__lead-list li:last-child,
.pricing__deposit-list li:last-child {
    margin-bottom: 0;
}

/* Renvoi vers un popup depuis un panneau de niveau (loueurs partenaires) : même
   pastille que l'aide « Niveau » du formulaire (.field__help), au corps du texte
   courant puisqu'elle se lit dans un paragraphe et non dans une étiquette. */
.level__modal-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--ice-300);
    background: var(--snow-100);
    font-weight: 700;
    color: var(--glacier-600);
    text-decoration: none;
}

.level__modal-link svg {
    flex: none;
}

.level__modal-link:hover,
.level__modal-link:focus-visible {
    border-color: var(--glacier-600);
    background: var(--glacier-600);
    color: var(--white);
}

/* Item de liste à détacher du reste (drapeau 'accent' dans le fichier de langue) :
   même orange de charte que les fragments accentués des tarifs (.pricing__accent),
   losange compris — sinon la puce bleue coupe la ligne en deux. */
.level__list li.level__item--accent {
    color: var(--ember-700);
}

.level__list li.level__item--accent::before {
    background: var(--ember-700);
}

/* Lien externe d'un panneau (billetterie Compagnie du Mont-Blanc) : il clôt le
   panneau, il lui faut donc l'air d'un bloc, pas d'un paragraphe de plus. */
.level__text .level__link {
    margin-top: var(--space-3);
}

.level__link a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

/* Logo de l'exploitant à la place de l'icône : calé sur la hauteur d'une
   majuscule du libellé, la largeur suit le ratio du fichier. */
.level__link-logo {
    flex: none;
    width: auto;
    height: 1.5em;
}

@media (min-width: 800px) {
    /* Les 3 visuels sur une ligne ; « display: contents » sort le panneau du
       wrapper pour qu'il s'étende sous toute la rangée quand il est déplié. */
    .levels__grid {
        grid-template-columns: repeat(3, 1fr);
        column-gap: var(--space-2);
        row-gap: 0;
    }

    .level {
        display: contents;
    }

    .level__card {
        grid-row: 1;
    }

    .level__panel {
        grid-row: 2;
        grid-column: 1 / -1;
    }

    /* Même corps de titre que les cartes de la page hors-piste : une fois la
       rangée formée, les 3 cartes d'ici (dès 800 px) et les 4 de là-bas (dès
       1060 px) font la même largeur — ~245 px — et le titre pleine taille y
       débordait sur deux lignes. Le `:not()` laisse les 4 cartes en grand tant
       qu'elles sont encore empilées sur toute la largeur, entre 800 et 1060 px. */
    .levels__grid:not(.levels__grid--4) .level__title {
        font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    }

    /* 4 cartes : la rangée unique serait trop étroite ici, on reste empilé.
       `display: block` sur .level suffit à neutraliser les grid-row/column. */
    .levels__grid--4 {
        grid-template-columns: 1fr;
        row-gap: 6px;
    }

    .levels__grid--4 .level {
        display: block;
    }
}

@media (min-width: 1060px) {
    .levels__grid--4 {
        grid-template-columns: repeat(4, 1fr);
        row-gap: 0;
    }

    .levels__grid--4 .level {
        display: contents;
    }

    /* Cartes plus étroites : titres plus courts en hauteur */
    .levels__grid--4 .level__body {
        padding: var(--space-2);
    }

    .levels__grid--4 .level__title {
        font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    }
}

/* Renvoi vers le coaching à distance, entre les niveaux et les blocs « focus » :
   une phrase et un bouton, centrés. Rendu seulement si la page déclare la clé
   'remote' (_activity.php). Encadré (10/09/2026, demande de Maxim) sur le même
   habillage que les autres encarts du site (`.pricing__callout`, acompte) :
   fond neige, filet glacier, liseré braise à gauche. Texte au corps « lead ». */
.activity-remote {
    max-width: 46rem;
    margin: var(--space-4) auto 0;
    padding: var(--space-3);
    text-align: center;
    background: var(--snow-50);
    border: 1px solid var(--ice-200);
    border-left: 3px solid var(--ember-500);
}

/* Pas de max-width : l'encadré (46 rem) borne déjà la ligne, et `balance`
   répartit la phrase en deux lignes égales en desktop. */
.activity-remote__text {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--night-700);
    text-wrap: balance;
}

/* ---------- Blocs « enfants » & « ski guiding » (page Cours de ski) ---------- */
.focus {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
    align-items: start;
}

.focus-card {
    padding: var(--space-3);
    background: var(--white);
    border: 1px solid var(--ice-200);
    border-top: 3px solid var(--glacier-600);
    box-shadow: var(--shadow-soft);
    color: var(--text-soft);
}

.focus-card p {
    margin: 0;
}

.focus-card p + p {
    margin-top: 0.9rem;
}

/* Titre centré entre deux traits (demande Maxim du 30/08/2026, en remplacement
   de l'icône qui ouvrait l'entête). Mêmes traits que ceux de `.eyebrow`, mais
   en `flex: 1` plutôt qu'en largeur fixe : ils vont d'un bord à l'autre de la
   carte, donc ils s'arrêtent au même endroit d'une carte à l'autre quelle que
   soit la longueur du titre. `0 1.5rem` de base : ils restent visibles même
   quand un titre long occupe toute la ligne. */
/* Sélecteurs qualifiés (p.classe) : ils doivent l'emporter sur le
   « .focus-card p { margin: 0 } » ci-dessus sans recourir à !important. */
.focus-card p.focus-card__head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: var(--space-2);
    color: var(--glacier-600);
    text-align: center;
}

.focus-card__head::before,
.focus-card__head::after {
    content: "";
    flex: 1 0 1.5rem;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

/* Soleil / lune devant le titre d'une sortie : décoratif, en ambre comme les
   autres pictogrammes de la charte (le bleu reste à l'ossature et aux liens). */
.focus-card__icon {
    flex: none;
    display: inline-flex;
    color: var(--gold);
}

.focus-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.2;
    color: var(--night-700);
}

/* Accroche de carte, avant les sous-parties : `.focus-card p { margin: 0 }` la
   collerait au premier groupe, et `p + p` ne joue pas puisque le groupe est un div. */
.focus-card p.focus-card__lead {
    margin-bottom: var(--space-3);
}

/* La liste succède soit au titre du groupe, soit à un paragraphe : dans les deux
   cas il faut l'écart qu'aurait posé `p + p`. */
.focus-card__list {
    margin-top: 0.9rem;
}

.focus-card p.focus-card__group-title + .focus-card__list {
    margin-top: 0;
}

.focus-card__list + p {
    margin-top: 0.9rem;
}

/* Sous-partie titrée (« De 3 à 6 ans », « De 7 ans et plus… ») */
.focus-card__group + .focus-card__group {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--ice-200);
}

.focus-card p.focus-card__group-title {
    margin-bottom: 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--night-700);
}

.focus-card p.focus-card__note {
    display: flex;
    gap: 0.7rem;
    margin-top: var(--space-3);
    padding: 0.9rem var(--space-2);
    background: var(--snow-50);
    border-left: 3px solid var(--ember-500);
    font-size: 0.95rem;
    color: var(--night-700);
}

.focus-card__note svg {
    flex: none;
    margin-top: 0.15rem;
    color: var(--ember-700);
}

.focus-card p.focus-card__closing {
    margin-top: var(--space-2);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--night-700);
}

@media (min-width: 800px) {
    .focus {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
}

/* ---------- Offres détaillées de la page « Autres activités » ----------
   Snowboard et randonnées raquettes : deux sections écrites à la main dans
   others.php (la page n'est pas sur le gabarit _activity.php, cf. son
   docblock). Elles réutilisent les cartes `.focus-card` ci-dessus, d'où les
   quelques ajustements qui suivent. */
/* Cibles des ancres `#snowboard` (bouton du hero) et `#raquettes` : sans marge
   de défilement, le header collant recouvre le haut de la section. */
.offer {
    scroll-margin-top: var(--header-h);
}

.offer--tinted {
    background: var(--snow-50);
}

/* La grille suit ici le bloc photo + texte, qui pose déjà sa marge basse : le
   `margin-top` de `.focus` doublerait l'écart.
   `stretch` (au lieu du `start` de `.focus`) : les trois niveaux de snowboard
   ont des textes de longueurs très inégales, des bas de cartes en escalier
   feraient désordre sur une rangée de trois. */
.offer .focus {
    margin-top: 0;
    align-items: stretch;
}

/* Photo d'un côté, présentation de l'autre. En mobile la photo passe au-dessus
   du texte — c'est l'ordre du DOM, aucune règle n'est nécessaire. */
.offer__split {
    display: grid;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-4);
}

/* Cadre 4/3 : c'est le format natif de `snowboard-1`. Il rogne 25 % de la
   largeur de `raquettes-3` (16/9), soit 12,5 % de chaque côté : la file de
   raquetteurs, qui occupe le tiers central, reste entière. */
.offer__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    box-shadow: var(--shadow-card);
}

.offer__lead {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.6vw, 1.4rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--night-800);
}

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

@media (min-width: 860px) {
    .offer__split {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-5);
        margin-bottom: var(--space-5);
    }

    /* Section raquettes : photo à droite, pour alterner avec le snowboard.
       L'ordre du DOM reste photo puis texte (la photo doit passer en premier en
       lecture mobile), d'où l'inversion faite ici et pas dans la vue. */
    .offer__split--flip .offer__media {
        order: 2;
    }
}

/* Précisions de fin de section (durée conseillée, format 2 h…) */
.offer__notes {
    max-width: 46rem;
    margin: var(--space-4) auto 0;
    display: grid;
    gap: 0.55rem;
}

.offer__notes li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.9rem;
    color: var(--text-soft);
}

.offer__notes li::before,
.focus-card__specs li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 7px;
    height: 7px;
    background: var(--glacier-400);
    transform: rotate(45deg);
}

.offer__cta {
    margin-top: var(--space-3);
    text-align: center;
}

/* Caractéristiques d'une sortie raquettes : « Durée », « Équipement »… */
.focus-card__specs {
    margin-top: var(--space-3);
    display: grid;
    gap: 0.65rem;
}

.focus-card__specs li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.95rem;
}

.focus-card__spec-label {
    font-weight: 700;
    color: var(--night-800);
}

/* Lignes suivantes d'une spec (réserve, précision) : à la ligne sous la
   première, alignées avec elle. */
.focus-card__spec-more {
    display: block;
    margin-top: 0.25rem;
}

/* Trois cartes de front dès qu'il y a la place : sur la grille à deux colonnes
   de `.focus`, la troisième resterait seule sur sa ligne. */
@media (min-width: 1000px) {
    .focus--trio {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------- Tarifs ---------- */
.pricing {
    scroll-margin-top: var(--header-h);
}

/* Page autres activités : les tarifs ne sont pas une section, ils prolongent la
   présentation du snowboard dans la sienne (cf. `$pricingBare` dans
   _pricing.php) — pas d'en-tête, pas de fond propre, juste l'écart qu'aurait
   posé le bas de l'en-tête supprimé. */
.pricing--inline {
    margin-top: var(--space-4);
}

/* Titre du bloc en ligne : le gabarit du titre de l'accordéon des niveaux
   (`.levels__title`), centré au-dessus des cartes de prix qu'il annonce. */
.pricing__title {
    margin-bottom: var(--space-3);
    font-size: clamp(1.45rem, 4.4vw, 1.9rem);
    text-align: center;
}

/* Accroche détaillée des tarifs (page cours de ski) : elle sort de l'en-tête
   centré parce qu'une liste à puces ne se lit pas centrée. Bloc centré, texte
   aligné à gauche, largeur de lecture calée sur celle des autres accroches. */
.pricing__lead {
    max-width: 46rem;
    margin: calc(-1 * var(--space-2)) auto var(--space-3);
}

.pricing__lead-list {
    margin-bottom: 0.9rem;
}

/* Italique : ces deux lignes commentent la grille de prix, elles ne l'énoncent
   pas — c'est ce qui les distingue des puces tarifaires juste au-dessus. */
.pricing__lead p {
    margin: 0 0 0.5rem;
    font-style: italic;
    color: var(--text-soft);
}

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

.pricing__grid {
    display: grid;
    gap: var(--space-2);
}

.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-3);
    background: var(--white);
    border: 1px solid var(--ice-200);
    box-shadow: var(--shadow-soft);
    text-align: center;
}

.price-card__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.3rem 0.9rem;
    background: var(--glacier-600);
    color: var(--white);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Badge cliquable : il ouvre le popup des semaines où la formule est proposée.
   Habillé comme un bouton, pas comme l'étiquette qu'est le badge inerte —
   casse basse plutôt que capitales espacées, icône « clic » et ombre portée :
   trois signaux sans lesquels le badge se lisait comme une simple mention.
   La casse basse rend aussi le libellé assez court pour tenir dans une carte
   de la grille à 5 colonnes (~180 px à 1000 px de large). */
a.price-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(15, 39, 64, 0.24);
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a.price-card__badge svg {
    flex-shrink: 0;
}

/* `transform` porte le centrage du badge sur le bord de la carte : tout état
   qui le redéfinit doit reconduire le translate, sinon le badge saute. */
a.price-card__badge:hover,
a.price-card__badge:focus-visible {
    background: var(--night-700);
    /* Sans cette ligne, `a:hover` (plus spécifique que .price-card__badge)
       repeint le texte en --night-700, soit la couleur du fond survolé. */
    color: var(--white);
    box-shadow: 0 6px 18px rgba(15, 39, 64, 0.34);
    transform: translate(-50%, -50%) scale(1.05);
}

a.price-card__badge:focus-visible {
    outline: 2px solid var(--night-800);
    outline-offset: 3px;
}

.price-card__name {
    margin-bottom: 0.2rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--night-800);
}

.price-card__schedule {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: var(--space-2);
    font-size: 0.85rem;
    color: var(--text-soft);
}

.price-card__schedule svg {
    color: var(--glacier-600);
}

.price-card__price {
    margin: auto 0 0.2rem;
    padding-top: var(--space-2);
    border-top: 1px solid var(--snow-100);
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--night-800);
}

/* Une formule à plusieurs tarifs selon le niveau : chaque montant porte son
   libellé. `margin-top: auto` reprend le rôle du grand prix qu'elle remplace —
   les montants restent alignés en bas quelle que soit la hauteur des cartes. */
.price-card__rates {
    margin: auto 0 0.2rem;
    padding: var(--space-2) 0 0;
    border-top: 1px solid var(--snow-100);
    list-style: none;
    text-align: left;
}

.price-card__rates li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}

.price-card__rates li + li {
    margin-top: 0.5rem;
}

.price-card__rate-label {
    font-size: 0.82rem;
    line-height: 1.25;
    color: var(--text-soft);
}

/* Les niveaux renvoient sur leur carte de l'accordéon : gras et bleu, sans trait,
   comme le renvoi de la note juste au-dessus. */
.price-card__rate-label a {
    font-weight: 700;
    color: var(--glacier-600);
    text-decoration: none;
}

.price-card__rate-label a:hover,
.price-card__rate-label a:focus-visible {
    text-decoration: underline;
}

.price-card__rate-price {
    flex: none;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--night-800);
}

.price-card__unit {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--glacier-600);
}

/* Reserve propre a une formule + son bouton (Vallee Blanche : taille de
   cordee du guide). Le bouton se cale en bas de carte, largeur pleine. */
/* Réserve d'une formule, sous son nom : pictogramme d'attention aligné sur la
   première ligne (`align-items: flex-start`, pas `center` — sur deux lignes il
   flotterait au milieu du texte) et en ambre, comme les autres pictogrammes. */
/* 0,95 rem depuis le 10/09/2026 (0,82 avant, demande de Maxim) : c'est une
   condition d'accès à la formule, elle doit se lire sans effort. */
.price-card__note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.35rem;
    margin: 0.35rem 0 0;
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--text-soft);
}

.price-card__note svg {
    flex: none;
    margin-top: 0.2rem;
    color: var(--gold);
}

/* Renvoi dans la note (« … pour une initiation ») : gras et bleu, sans trait —
   même parti pris que les autres liens au fil du texte. */
.price-card__note a {
    font-weight: 700;
    color: var(--glacier-600);
    text-decoration: none;
}

.price-card__note a:hover,
.price-card__note a:focus-visible {
    text-decoration: underline;
}

.price-card__cta {
    justify-content: center;
    margin-top: 0.7rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.72rem;
}

.price-card__duration {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
}

/* Formule mise en avant : carte nuit */
.price-card--featured {
    background: var(--night-900);
    border-color: var(--night-800);
}

.price-card--featured .price-card__name,
.price-card--featured .price-card__price {
    color: var(--white);
}

.price-card--featured .price-card__schedule,
.price-card--featured .price-card__duration,
.price-card--featured .price-card__unit {
    color: var(--ice-300);
}

.price-card--featured .price-card__schedule svg {
    color: var(--glacier-400);
}

.price-card--featured .price-card__price {
    border-top-color: var(--night-700);
}

/* Formule réservée aux vacances scolaires : la pastille déborde en haut de la
   carte, il lui faut de l'air au-dessus de la grille. */
.pricing__grid {
    padding-top: 0.6rem;
}

.price-card__schedule span {
    text-wrap: balance;
}

/* Note sous l'accroche des tarifs : un cas qui ne rentre pas dans la grille et
   se discute (page rando : la Haute montagne). Même habillage que l'encart
   « acompte », mais posé avant les cartes puisqu'il nuance leurs prix. */
.pricing__callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    max-width: 46rem;
    margin: var(--space-3) auto 0;
    padding: var(--space-2) var(--space-3);
    background: var(--snow-50);
    border: 1px solid var(--ice-200);
    border-left: 3px solid var(--ember-500);
}

/* flex-basis large : le texte garde une colonne lisible tant qu'il tient à côté
   du bouton, et passe au-dessus dès que la place manque. */
.pricing__callout p {
    flex: 1 1 22rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-soft);
}

/* Bouton secondaire : il ne doit pas concurrencer le « Réserver » en bas de
   section, d'où le gabarit réduit. */
.pricing__callout .btn {
    flex: 0 0 auto;
    padding: 0.62rem 1.3rem;
    font-size: 0.74rem;
}

/* Équipement à prévoir (section snowboard) : une liste dense sous les cartes de
   niveau, calée sur la largeur de l'encart acompte qui la suit. */
.gearlist {
    max-width: 46rem;
    margin: var(--space-3) auto 0;
    padding: var(--space-2) var(--space-3);
    background: var(--snow-50);
    border: 1px solid var(--ice-200);
    border-left: 3px solid var(--glacier-400);
}

.gearlist__title {
    margin: 0 0 var(--space-2);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--glacier-600);
}

.gearlist__list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
    color: var(--text-soft);
}

.gearlist__list > li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.55rem;
}

.gearlist__list > li:last-child {
    margin-bottom: 0;
}

.gearlist__list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    background: var(--glacier-400);
    transform: rotate(45deg);
}

.gearlist__list strong {
    color: var(--night-800);
}

.gearlist__sublist {
    margin: 0.3rem 0 0;
    padding-left: 1.1rem;
    list-style: disc;
}

.gearlist__sublist li {
    margin-bottom: 0.2rem;
}

/* Encart « acompte » */
.pricing__deposit {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    max-width: 40rem;
    margin: var(--space-3) auto 0;
    padding: var(--space-2) var(--space-3);
    background: var(--snow-50);
    border: 1px solid var(--ice-200);
    border-left: 3px solid var(--ember-500);
}

.pricing__deposit svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--glacier-600);
}

.pricing__deposit-label {
    margin: 0 0 0.15rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--night-800);
}

/* Le libellé renvoie à la page « Conditions de réservation ». */
.pricing__deposit-label a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--glacier-600);
    transition: color 0.2s ease;
}

.pricing__deposit-label a:hover,
.pricing__deposit-label a:focus-visible {
    color: var(--glacier-600);
}

/* Conditions en deux échéances : même corps que le texte simple qu'elles
   remplacent, la puce losange en plus. Les lignes secondaires (change, frais
   bancaires) passent à la ligne sous leur échéance, alignées avec elle. */
.pricing__deposit-list {
    font-size: 0.95rem;
    color: var(--text-soft);
}

.pricing__deposit-list strong {
    color: var(--night-800);
}

/* Fragments à ne pas manquer (« avant le début du cours », « en espèces ») :
   gras + orange de la charte, posés par $accentuer dans _pricing.php. */
.pricing__deposit-list .pricing__accent {
    color: var(--ember-700);
}


.pricing__deposit-more {
    display: block;
}

.pricing__deposit-text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-soft);
}

.pricing__notes {
    max-width: 46rem;
    margin: var(--space-4) auto 0;
    display: grid;
    gap: 0.55rem;
}

.pricing__notes li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.9rem;
    color: var(--text-soft);
}

.pricing__notes li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 7px;
    height: 7px;
    background: var(--glacier-400);
    transform: rotate(45deg);
}

.pricing__cta {
    margin-top: var(--space-3);
    text-align: center;
}

/* Bouton de réservation posé avant la section « Tarifs » des pages activité :
   il ferme la présentation, d'où l'air au-dessus comme en dessous. */
.activity-cta {
    margin-block: var(--space-3);
    text-align: center;
}

@media (min-width: 600px) {
    .pricing__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Les 5 formules sur une seule ligne : cartes plus étroites, donc un peu moins
   de rembourrage et un prix légèrement réduit. */
@media (min-width: 1000px) {
    .pricing__grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .price-card {
        padding: var(--space-3) var(--space-2);
    }

    .price-card__price {
        font-size: 2.1rem;
    }
}

/* Deux formules seulement (ski de rando : demi-journée / journée) : la grille
   resterait collée à gauche des 5 colonnes → 2 colonnes centrées et resserrées.
   Placé après les media queries ci-dessus pour les emporter à specificité égale. */
@media (min-width: 600px) {
    .pricing__grid--duo {
        max-width: 44rem;
        margin-inline: auto;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    /* Cartes larges : on annule le resserrement prévu pour 5 colonnes */
    .pricing__grid--duo .price-card {
        padding: var(--space-3);
    }

    .pricing__grid--duo .price-card__price {
        font-size: 2.4rem;
    }
}

/* Trois ou quatre formules (hors-piste : pas de formule 2 h) : les 5 colonnes
   laisseraient un vide à droite. Largeur calée sur quatre cartes, `auto-fit`
   supprimant la piste inutile s'il n'y en a que trois. Après les règles
   ci-dessus pour les emporter à specificité égale. */
@media (min-width: 1000px) {
    .pricing__grid--quad {
        max-width: 58rem;
        margin-inline: auto;
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    }
}

/* ---------- FAQ teintée (pages activités) ---------- */
.faq--tinted {
    background: var(--snow-50);
}

/* ---------- Autres activités (maillage interne) ---------- */
.explore {
    background: var(--snow-50) url('/assets/img/snow-background-texture.webp') center / cover no-repeat;
}

.explore__grid {
    display: grid;
    gap: 6px;
}

.service--wide {
    aspect-ratio: 16 / 10;
    min-height: 15rem;
}

/* Cartes 16/10, deux fois moins hautes que les 4/5 de l'accueil : le corps
   pleine page (jusqu'à 3,2 rem) y prenait la moitié de la carte et coupait
   « Ski de randonnée » en deux lignes dès 390 px. */
.explore__grid .service__title {
    font-size: clamp(1.75rem, 4.6vw, 2.4rem);
}

@media (min-width: 800px) {
    .explore__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }

    /* Trois cartes de front : ~234 px de piste à 800 px de large, dont 186 px
       utiles une fois le rembourrage retiré. Le corps pleine page (jusqu'à
       3.2 rem) y tenait « randonnée » en travers de la carte voisine. Même
       traitement que la rangée de 4 de l'accueil, un cran plus bas. */
    .explore__grid .service__title {
        font-size: clamp(1.1rem, 1.7vw, 1.4rem);
    }
}

@media (min-width: 1200px) {
    .explore__grid {
        gap: var(--space-6);
    }
}

/* ---------- Bande CTA finale ---------- */
.cta-band {
    position: relative;
    padding-block: var(--space-6);
    background: var(--night-800) center / cover no-repeat;
    color: var(--white);
    text-align: center;
}

.cta-band__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 39, 64, 0.6), rgba(15, 39, 64, 0.78));
}

.cta-band__content {
    position: relative;
    z-index: 1;
}

.cta-band__title {
    max-width: 20ch;
    margin: 0 auto var(--space-2);
    color: var(--white);
    font-size: clamp(1.8rem, 4.5vw, 3rem);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.cta-band__text {
    max-width: 52ch;
    margin: 0 auto var(--space-3);
    font-size: var(--fs-lead);
    color: var(--snow-100);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

@media (min-width: 900px) and (hover: hover) {
    .cta-band {
        background-attachment: fixed;
    }
}

/* La bande CTA colle au footer (pas de blanc entre les deux fonds sombres).
   Sur « Autres activités », encore une ébauche, c'est « Infos pratiques » —
   tout aussi sombre — qui ferme la page. */
.page-ski .site-footer,
.page-offpiste .site-footer,
.page-touring .site-footer,
.page-others .site-footer {
    margin-top: 0;
}

/* Home : la section contact (texture neige) doit toucher le footer,
   sinon le margin laisse apparaître une bande de fond blanc du body */
.page-home .site-footer {
    margin-top: 0;
}

/* ---------- Préférence : animations réduites ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    /* La vidéo du panneau coaching tourne en boucle : on la retire, le décor de
       crêtes qu'elle recouvrait reprend sa place tout seul. */
    .coach__video {
        display: none;
    }

    .site-nav,
    .site-header::after,
    .site-nav__link {
        transition: none;
    }

    /* Le logo du header garde son fondu, mais sans le mouvement d'échelle */
    .site-logo {
        transition: opacity 0.3s ease;
    }

    .js .page-home .site-logo {
        transform: translate(-50%, -50%);
    }

    .service__img {
        transition: none;
    }

    .js [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}