/* ==========================================================================
   Le Barbier de Tayfun — feuille de style du site public
   --------------------------------------------------------------------------
   CSS natif, sans préprocesseur ni build. Organisation en couches (@layer) :
   l'ordre déclaré ci-dessous fixe la priorité, quelle que soit la position
   des règles dans le fichier.
   ========================================================================== */

@layer reset, base, layout, composants, utilitaires;

/* --------------------------------------------------------------------------
   Transitions entre pages, en amélioration progressive : les navigateurs qui
   ne connaissent pas cette règle l'ignorent et naviguent normalement. Aucune
   ligne de JavaScript n'est nécessaire, et la préférence « moins d'animations »
   est respectée plus bas dans la couche reset.
   -------------------------------------------------------------------------- */
@view-transition {
    navigation: auto;
}

/* --------------------------------------------------------------------------
   Polices auto-hébergées (RGPD : aucun appel à un serveur tiers).
   Polices variables : un seul fichier couvre toutes les graisses.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Big Shoulders Display';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/big-shoulders-display-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Big Shoulders Display';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/big-shoulders-display-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/source-sans-3-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Thème : un seul endroit pour les couleurs, espacements, rayons et ombres.
   -------------------------------------------------------------------------- */

:root {
    /* Univers barbershop vintage : bleu nuit, ardoise, laiton, crème. */
    --bleu-nuit: #101a2e;
    --bleu-profond: #0a1120;
    --ardoise: #1b2740;
    --ardoise-clair: #2b3a56;
    --laiton: #c9a227;
    --laiton-clair: #e3c55f;
    --creme: #f7f2e8;
    --creme-ombre: #ebe2d2;
    --blanc: #ffffff;
    --rouge-barber: #a8262b;

    /* Rôles : on manipule ces variables-là dans les composants. */
    --fond: var(--creme);
    --fond-carte: var(--blanc);
    --fond-sombre: var(--bleu-nuit);
    --texte: #16203a;
    --texte-doux: #4a566e;
    --texte-sur-sombre: #f2ece0;
    --texte-doux-sur-sombre: #b9c2d2;
    --accent: #8a6d12;           /* laiton assombri : contraste AA sur crème */
    --accent-sur-sombre: var(--laiton);
    --bordure: #ddd2be;
    --bordure-sombre: #34405c;
    --succes: #1f6b45;
    --alerte: #8a4b07;
    --erreur: #9c2226;

    /* Variantes lisibles sur fond sombre : le vert et le rouge ci-dessus sont
       calculés pour le fond crème et deviendraient illisibles sur le bleu nuit. */
    --succes-sur-sombre: #6fd5a3;
    --erreur-sur-sombre: #ff9ba0;

    /* Typographie fluide : une seule échelle, de 320 px à grand écran. */
    --police-titre: 'Big Shoulders Display', 'Haettenschweiler', 'Arial Narrow', sans-serif;
    --police-texte: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --taille-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
    --taille-sm: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
    --taille-base: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
    --taille-md: clamp(1.13rem, 1.05rem + 0.4vw, 1.35rem);
    --taille-lg: clamp(1.4rem, 1.2rem + 1vw, 2rem);
    --taille-xl: clamp(1.9rem, 1.5rem + 2vw, 3rem);
    --taille-hero: clamp(2.6rem, 1.8rem + 4.5vw, 5.5rem);

    /* Espacements */
    --espace-3xs: 0.25rem;
    --espace-2xs: 0.5rem;
    --espace-xs: 0.75rem;
    --espace-sm: 1rem;
    --espace-md: 1.5rem;
    --espace-lg: 2.25rem;
    --espace-xl: clamp(3rem, 2rem + 4vw, 5.5rem);

    --rayon-sm: 4px;
    --rayon-md: 10px;
    --rayon-lg: 18px;
    --rayon-pilule: 999px;

    --ombre-douce: 0 1px 2px rgb(16 26 46 / 8%), 0 4px 16px rgb(16 26 46 / 6%);
    --ombre-marquee: 0 8px 30px rgb(16 26 46 / 18%);

    --largeur-max: 72rem;
    --largeur-texte: 62ch;

    --transition: 160ms ease;

    /* Hauteur de la barre d'action fixe sur mobile : sert à réserver la place
       en bas de page pour que rien ne passe dessous. */
    --hauteur-cta-mobile: 4.5rem;

    accent-color: var(--accent);
    color-scheme: light;
}

/* ========================================================================== */
@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    * {
        margin: 0;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        min-block-size: 100svh;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
    }

    img,
    picture,
    svg,
    video {
        display: block;
        max-inline-size: 100%;
        block-size: auto;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
        color: inherit;
    }

    h1, h2, h3, h4 {
        text-wrap: balance;
    }

    p, li {
        text-wrap: pretty;
    }

    ul[class],
    ol[class] {
        list-style: none;
        padding-inline-start: 0;
    }

    /* Une personne qui a demandé moins d'animations n'en reçoit aucune. */
    @media (prefers-reduced-motion: reduce) {
        /* Y compris les transitions entre pages. */
        ::view-transition-group(*),
        ::view-transition-old(*),
        ::view-transition-new(*) {
            animation: none !important;
        }

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

/* ========================================================================== */
@layer base {
    body {
        background-color: var(--fond);
        color: var(--texte);
        font-family: var(--police-texte);
        font-size: var(--taille-base);
        font-weight: 400;
    }

    h1, h2, h3 {
        font-family: var(--police-titre);
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: 0.01em;
        text-transform: uppercase;
    }

    h1 {
        font-size: var(--taille-xl);
    }

    h2 {
        font-size: var(--taille-lg);
    }

    h3 {
        font-size: var(--taille-md);
        text-transform: none;
        letter-spacing: 0;
    }

    a {
        color: inherit;
        text-decoration-color: color-mix(in srgb, currentcolor 45%, transparent);
        text-underline-offset: 0.2em;

        &:hover {
            text-decoration-color: currentcolor;
        }
    }

    /* Un contour visible au clavier, jamais à la souris. */
    :focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 3px;
        border-radius: var(--rayon-sm);
    }

    ::selection {
        background-color: var(--laiton);
        color: var(--bleu-nuit);
    }

    strong {
        font-weight: 600;
    }

    /*
     * Taille par défaut des icônes intégrées au HTML.
     *
     * Les SVG en ligne n'ont ni largeur ni hauteur : sans cette règle, une
     * icône placée dans un contexte qui ne lui en donne pas s'étire jusqu'à
     * remplir son conteneur. Les composants qui veulent une autre taille la
     * redéfinissent par leur classe, plus spécifique.
     */
    svg:not([width]):not([height]) {
        inline-size: 1.25em;
        block-size: 1.25em;
        flex: none;
    }

    hr {
        border: 0;
        border-block-start: 1px solid var(--bordure);
    }
}

/* ========================================================================== */
@layer layout {
    .conteneur {
        inline-size: min(100% - 2rem, var(--largeur-max));
        margin-inline: auto;
    }

    .conteneur--etroit {
        inline-size: min(100% - 2rem, 48rem);
        margin-inline: auto;
    }

    .section {
        padding-block: var(--espace-xl);
    }

    .section--sombre {
        background-color: var(--fond-sombre);
        color: var(--texte-sur-sombre);

        & h2 {
            color: var(--blanc);
        }
    }

    .section__entete {
        display: grid;
        gap: var(--espace-2xs);
        margin-block-end: var(--espace-lg);
        max-inline-size: var(--largeur-texte);
    }

    .section__surtitre {
        color: var(--accent);
        font-family: var(--police-titre);
        font-size: var(--taille-sm);
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .section--sombre .section__surtitre {
        color: var(--accent-sur-sombre);
    }

    .grille {
        display: grid;
        gap: var(--espace-md);
    }

    .grille--auto {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    }

    .grille--deux {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    }

    .pile {
        display: grid;
        gap: var(--espace-sm);
    }

    .rangee {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--espace-sm);
    }

    /* Sur mobile, la barre d'action fixe ne doit masquer aucun contenu. */
    body:has(.cta-mobile) {
        padding-block-end: var(--hauteur-cta-mobile);
    }

    @media (min-width: 48rem) {
        body:has(.cta-mobile) {
            padding-block-end: 0;
        }
    }
}

/* ========================================================================== */
@layer composants {

    /* --- Lien d'évitement ------------------------------------------------ */
    .lien-evitement {
        position: absolute;
        inset-inline-start: var(--espace-sm);
        inset-block-start: -100%;
        z-index: 100;
        padding: var(--espace-2xs) var(--espace-sm);
        background-color: var(--laiton);
        color: var(--bleu-nuit);
        font-weight: 600;
        border-radius: 0 0 var(--rayon-md) var(--rayon-md);
        transition: inset-block-start var(--transition);

        &:focus {
            inset-block-start: 0;
        }
    }

    /* --- Boutons --------------------------------------------------------- */
    .bouton {
        --bouton-fond: var(--laiton);
        --bouton-texte: var(--bleu-nuit);
        --bouton-bordure: transparent;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--espace-2xs);
        /* Zone tactile d'au moins 44 px, recommandation WCAG. */
        min-block-size: 2.75rem;
        padding: var(--espace-2xs) var(--espace-md);
        border: 2px solid var(--bouton-bordure);
        border-radius: var(--rayon-pilule);
        background-color: var(--bouton-fond);
        color: var(--bouton-texte);
        font-family: var(--police-texte);
        font-size: var(--taille-base);
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition: background-color var(--transition), border-color var(--transition),
            transform var(--transition), box-shadow var(--transition);

        &:hover:not(:disabled, [aria-disabled='true']) {
            background-color: color-mix(in srgb, var(--bouton-fond) 85%, var(--blanc));
            box-shadow: var(--ombre-douce);
        }

        &:active:not(:disabled, [aria-disabled='true']) {
            transform: translateY(1px);
        }

        &:disabled,
        &[aria-disabled='true'] {
            opacity: 0.55;
            cursor: not-allowed;
        }

        /* État « en cours » : le bouton garde sa largeur et affiche un témoin. */
        &[data-chargement='true'] {
            color: transparent;
            pointer-events: none;
            position: relative;

            &::after {
                content: '';
                position: absolute;
                inline-size: 1.25rem;
                block-size: 1.25rem;
                border: 2px solid color-mix(in srgb, var(--bouton-texte) 35%, transparent);
                border-block-start-color: var(--bouton-texte);
                border-radius: 50%;
                animation: rotation 700ms linear infinite;
            }
        }

        & svg {
            inline-size: 1.15em;
            block-size: 1.15em;
            flex: none;
        }
    }

    .bouton--secondaire {
        --bouton-fond: transparent;
        --bouton-texte: var(--texte);
        --bouton-bordure: var(--texte);

        &:hover:not(:disabled) {
            background-color: color-mix(in srgb, var(--texte) 8%, transparent);
        }
    }

    .bouton--sur-sombre {
        --bouton-fond: transparent;
        --bouton-texte: var(--texte-sur-sombre);
        --bouton-bordure: var(--texte-doux-sur-sombre);

        &:hover:not(:disabled) {
            background-color: rgb(255 255 255 / 10%);
        }
    }

    .bouton--fantome {
        --bouton-fond: transparent;
        --bouton-texte: var(--texte);
        --bouton-bordure: transparent;
        text-decoration: underline;
        text-underline-offset: 0.25em;
    }

    .bouton--bloc {
        inline-size: 100%;
    }

    .bouton--petit {
        min-block-size: 2.25rem;
        padding-inline: var(--espace-sm);
        font-size: var(--taille-sm);
    }

    @keyframes rotation {
        to { transform: rotate(360deg); }
    }

    /* --- Note et étiquettes ---------------------------------------------- */
    .note {
        display: inline-flex;
        align-items: center;
        gap: var(--espace-2xs);
        padding: var(--espace-3xs) var(--espace-xs);
        border-radius: var(--rayon-pilule);
        background-color: rgb(255 255 255 / 12%);
        font-size: var(--taille-sm);
        font-weight: 600;
    }

    .note__valeur {
        font-family: var(--police-titre);
        font-size: var(--taille-md);
        color: var(--laiton);
    }

    .note__etoiles {
        display: inline-flex;
        color: var(--laiton);

        & svg {
            inline-size: 1rem;
            block-size: 1rem;
        }
    }

    .etiquette {
        display: inline-block;
        padding: var(--espace-3xs) var(--espace-2xs);
        border-radius: var(--rayon-sm);
        background-color: color-mix(in srgb, var(--accent) 15%, transparent);
        color: var(--accent);
        font-size: var(--taille-xs);
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .etiquette--ouvert {
        background-color: color-mix(in srgb, var(--succes) 15%, transparent);
        color: var(--succes);
    }

    .etiquette--ferme {
        background-color: color-mix(in srgb, var(--erreur) 12%, transparent);
        color: var(--erreur);
    }

    /* Étiquette neutre posée sur fond sombre (« Avec ou sans rendez-vous »). */
    .hero .etiquette,
    .section--sombre .etiquette {
        background-color: rgb(255 255 255 / 12%);
        color: var(--texte-sur-sombre);
    }

    /* Sur le hero et les sections sombres, on bascule sur les variantes claires. */
    .hero .etiquette--ouvert,
    .section--sombre .etiquette--ouvert {
        background-color: color-mix(in srgb, var(--succes-sur-sombre) 20%, transparent);
        color: var(--succes-sur-sombre);
    }

    .hero .etiquette--ferme,
    .section--sombre .etiquette--ferme {
        background-color: color-mix(in srgb, var(--erreur-sur-sombre) 18%, transparent);
        color: var(--erreur-sur-sombre);
    }

    /* --- Cartes ---------------------------------------------------------- */
    .carte {
        container-type: inline-size;
        display: flex;
        flex-direction: column;
        gap: var(--espace-xs);
        padding: var(--espace-md);
        border: 1px solid var(--bordure);
        border-radius: var(--rayon-lg);
        background-color: var(--fond-carte);
        box-shadow: var(--ombre-douce);
    }

    /* --- Formulaires ----------------------------------------------------- */
    .champ {
        display: grid;
        gap: var(--espace-3xs);
    }

    .champ__libelle {
        font-weight: 600;
        font-size: var(--taille-sm);
    }

    .champ__aide {
        color: var(--texte-doux);
        font-size: var(--taille-sm);
    }

    .champ__erreur {
        color: var(--erreur);
        font-size: var(--taille-sm);
        font-weight: 600;
    }

    .champ__controle {
        min-block-size: 2.75rem;
        /* Un champ de formulaire a une largeur minimale propre, héritée du
           navigateur : une vingtaine de caractères pour un « input », la plus
           longue option pour un « select ». Cette largeur est un plancher que
           « min-inline-size: auto » impose à la colonne de grille qui le
           contient, donc à la carte, donc à la page : sur un téléphone, tout
           le back-office se met à défiler horizontalement pour un seul champ.
           Le plancher est retiré ; le champ suit la place disponible. */
        min-inline-size: 0;
        padding: var(--espace-2xs) var(--espace-xs);
        border: 2px solid var(--bordure);
        border-radius: var(--rayon-md);
        background-color: var(--blanc);
        color: var(--texte);
        transition: border-color var(--transition), box-shadow var(--transition);

        &::placeholder {
            color: color-mix(in srgb, var(--texte-doux) 75%, transparent);
        }

        &:hover:not(:disabled) {
            border-color: color-mix(in srgb, var(--texte-doux) 60%, var(--bordure));
        }

        &:focus-visible {
            border-color: var(--accent);
            outline-offset: 1px;
        }

        &:disabled {
            background-color: var(--creme-ombre);
            cursor: not-allowed;
        }

        /* Champ invalide, mais seulement après une saisie : on ne signale pas
           une erreur avant que la personne ait eu l'occasion de répondre. */
        &:user-invalid {
            border-color: var(--erreur);
        }
    }

    textarea.champ__controle {
        min-block-size: 6rem;
        resize: vertical;
    }

    /* Le message d'erreur d'un champ ne s'affiche que si le champ est fautif. */
    .champ:has(.champ__controle:user-invalid) .champ__erreur {
        display: block;
    }

    .champ__erreur {
        display: none;
    }

    .case {
        display: flex;
        align-items: start;
        gap: var(--espace-2xs);
        font-size: var(--taille-sm);

        & input[type='checkbox'] {
            inline-size: 1.25rem;
            block-size: 1.25rem;
            margin-block-start: 0.15rem;
            flex: none;
        }
    }

    /* Piège à robots : invisible à l'écran, ignoré par les lecteurs d'écran. */
    .pot-de-miel {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* --- Messages -------------------------------------------------------- */
    .alerte {
        display: flex;
        gap: var(--espace-2xs);
        padding: var(--espace-sm);
        border-inline-start: 4px solid var(--accent);
        border-radius: var(--rayon-md);
        background-color: color-mix(in srgb, var(--accent) 10%, var(--blanc));
        font-size: var(--taille-sm);

        & svg {
            flex: none;
            inline-size: 1.25rem;
            block-size: 1.25rem;
        }
    }

    .alerte--succes {
        border-color: var(--succes);
        background-color: color-mix(in srgb, var(--succes) 10%, var(--blanc));
    }

    .alerte--erreur {
        border-color: var(--erreur);
        background-color: color-mix(in srgb, var(--erreur) 8%, var(--blanc));
    }

    /* --- En-tête et navigation ------------------------------------------- */
    .entete {
        position: sticky;
        inset-block-start: 0;
        z-index: 50;
        background-color: color-mix(in srgb, var(--bleu-nuit) 96%, transparent);
        color: var(--texte-sur-sombre);
        border-block-end: 1px solid var(--bordure-sombre);
        backdrop-filter: blur(6px);
    }

    .entete__contenu {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--espace-sm);
        padding-block: var(--espace-2xs);
    }

    .logo {
        display: inline-flex;
        align-items: center;
        gap: var(--espace-2xs);
        font-family: var(--police-titre);
        font-size: var(--taille-md);
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--blanc);
        line-height: 1.05;
        /* La police des titres est très condensée : sans cela, « Le Barbier »
           se coupait en deux lignes de plus dans l'en-tête. */
        white-space: nowrap;

        & svg {
            inline-size: 1.5rem;
            block-size: 1.5rem;
            flex: none;
            color: var(--laiton);
        }
    }

    .logo__marque {
        color: var(--laiton);
    }

    /* Le logo du salon est un disque noir : sur l'en-tête bleu nuit, il est
       posé sur une pastille crème cerclée de laiton, comme un badge émaillé. */
    .logo__image {
        inline-size: 2.6rem;
        block-size: 2.6rem;
        flex: none;
        padding: 3px;
        border: 2px solid var(--laiton);
        border-radius: 50%;
        background-color: var(--creme);
    }

    .pied__logo {
        inline-size: 4.5rem;
        block-size: 4.5rem;
        margin-block-end: var(--espace-2xs);
        padding: 5px;
        border: 2px solid var(--laiton);
        border-radius: 50%;
        background-color: var(--creme);
    }

    .nav {
        display: flex;
        align-items: center;
        gap: var(--espace-md);
    }

    .nav__liste {
        display: flex;
        gap: var(--espace-md);
        margin: 0;
    }

    .nav__lien {
        display: inline-block;
        padding-block: var(--espace-2xs);
        color: var(--texte-doux-sur-sombre);
        font-weight: 600;
        text-decoration: none;

        &:hover,
        &[aria-current='page'] {
            color: var(--laiton);
        }
    }

    /* Menu mobile : une case à cocher masquée pilote l'ouverture, sans JS. */
    .nav__bascule {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-inline-size: 2.75rem;
        min-block-size: 2.75rem;
        border: 1px solid var(--bordure-sombre);
        border-radius: var(--rayon-md);
        background: transparent;
        color: var(--texte-sur-sombre);
        cursor: pointer;
    }

    @media (max-width: 47.999rem) {
        .nav__liste {
            position: absolute;
            inset-inline: 0;
            inset-block-start: 100%;
            flex-direction: column;
            gap: 0;
            padding: var(--espace-sm);
            background-color: var(--bleu-profond);
            border-block-end: 1px solid var(--bordure-sombre);
        }

        .nav:not([data-ouvert='true']) .nav__liste {
            display: none;
        }

        .nav__lien {
            display: block;
            padding: var(--espace-xs) var(--espace-2xs);
            border-block-end: 1px solid var(--bordure-sombre);
        }
    }

    @media (min-width: 48rem) {
        .nav__bascule {
            display: none;
        }
    }

    /* --- Barre d'action fixe sur mobile ---------------------------------- */
    .cta-mobile {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 60;
        display: flex;
        align-items: center;
        gap: var(--espace-sm);
        padding: var(--espace-2xs) var(--espace-sm);
        padding-block-end: max(var(--espace-2xs), env(safe-area-inset-bottom));
        background-color: color-mix(in srgb, var(--bleu-nuit) 97%, transparent);
        border-block-start: 1px solid var(--bordure-sombre);
        color: var(--texte-sur-sombre);
        box-shadow: 0 -4px 20px rgb(0 0 0 / 25%);
    }

    .cta-mobile__info {
        display: grid;
        font-size: var(--taille-xs);
        line-height: 1.3;
    }

    @media (min-width: 48rem) {
        .cta-mobile {
            display: none;
        }
    }

    /* --- Pied de page ---------------------------------------------------- */
    .pied {
        background-color: var(--bleu-profond);
        color: var(--texte-doux-sur-sombre);
        padding-block: var(--espace-xl) var(--espace-lg);
        font-size: var(--taille-sm);

        & h2 {
            color: var(--blanc);
            font-size: var(--taille-md);
            margin-block-end: var(--espace-2xs);
        }

        & a:hover {
            color: var(--laiton);
        }
    }

    .pied__bas {
        margin-block-start: var(--espace-lg);
        padding-block-start: var(--espace-sm);
        border-block-start: 1px solid var(--bordure-sombre);
        display: flex;
        flex-wrap: wrap;
        gap: var(--espace-sm);
        justify-content: space-between;
        font-size: var(--taille-xs);
    }
}

/* ========================================================================== */
@layer utilitaires {
    .visuellement-masque {
        position: absolute !important;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .texte-doux { color: var(--texte-doux); }
    .texte-centre { text-align: center; }
    .texte-sm { font-size: var(--taille-sm); }
    .texte-md { font-size: var(--taille-md); }
    .gras { font-weight: 600; }
    .mesure { max-inline-size: var(--largeur-texte); }
    .sans-marge { margin: 0; }
    .pleine-largeur { inline-size: 100%; }

    .empiler-sm { display: grid; gap: var(--espace-2xs); }
    .empiler-md { display: grid; gap: var(--espace-sm); }
    .empiler-lg { display: grid; gap: var(--espace-lg); }

    .masque-mobile {
        @media (max-width: 47.999rem) {
            display: none !important;
        }
    }

    .masque-bureau {
        @media (min-width: 48rem) {
            display: none !important;
        }
    }
}

/* ========================================================================== */
@layer composants {

    /* --- Liste d'horaires (pied de page et infos pratiques) -------------- */
    .horaires-pied {
        display: grid;
        gap: var(--espace-3xs);
        margin: 0;

        & > div {
            display: flex;
            justify-content: space-between;
            gap: var(--espace-sm);
            padding: var(--espace-3xs) var(--espace-2xs);
            border-radius: var(--rayon-sm);
        }

        & dt {
            font-weight: 600;
        }

        & dd {
            margin: 0;
            font-variant-numeric: tabular-nums;
            text-align: end;
        }
    }

    /* Le jour en cours est mis en évidence. */
    .horaires-pied__jour--actif {
        background-color: rgb(255 255 255 / 8%);
        color: var(--blanc);

        & dd {
            color: var(--laiton);
        }
    }
}

/* ==========================================================================
   Composants de la vitrine
   ========================================================================== */
@layer composants {

    /* --- Photos et emplacements en attente ------------------------------- */
    .photo {
        display: block;
        aspect-ratio: var(--photo-ratio, 4 / 3);
        overflow: hidden;
        border-radius: var(--rayon-md);
        background-color: var(--creme-ombre);

        & img {
            inline-size: 100%;
            block-size: 100%;
            object-fit: cover;
        }
    }

    .photo--attente {
        display: grid;
        place-content: center;
        gap: var(--espace-2xs);
        justify-items: center;
        padding: var(--espace-md);
        border: 1px dashed var(--bordure);
        background:
            repeating-linear-gradient(
                45deg,
                color-mix(in srgb, var(--creme-ombre) 70%, transparent) 0 10px,
                color-mix(in srgb, var(--creme) 85%, transparent) 10px 20px
            );
        color: var(--texte-doux);
        text-align: center;
    }

    .photo__icone {
        inline-size: 2rem;
        block-size: 2rem;
        opacity: 0.55;
    }

    .photo__legende {
        font-size: var(--taille-xs);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .photo--ronde {
        border-radius: 50%;
    }

    /* --- Hero ------------------------------------------------------------ */
    .hero {
        position: relative;
        display: grid;
        background-color: var(--bleu-nuit);
        color: var(--texte-sur-sombre);
        overflow: hidden;
    }

    .hero__visuel {
        grid-area: 1 / 1;
        /* Sur mobile, la photo passe derrière le texte : on la met en retrait
           pour que l'accroche reste parfaitement lisible. */
        opacity: 0.25;

        & .photo {
            block-size: 100%;
            border-radius: 0;
            aspect-ratio: auto;
        }
    }

    .hero__contenu {
        grid-area: 1 / 1;
        position: relative;
        display: grid;
        gap: var(--espace-sm);
        align-content: center;
        padding-block: clamp(3rem, 2rem + 8vw, 7rem);
        /* Voile sombre : garantit la lisibilité même sur une photo claire. */
        background: linear-gradient(
            to right,
            color-mix(in srgb, var(--bleu-nuit) 92%, transparent) 0%,
            color-mix(in srgb, var(--bleu-nuit) 70%, transparent) 65%,
            transparent 100%
        );
        background-clip: padding-box;
    }

    .hero__surtitre {
        color: var(--laiton);
        font-family: var(--police-titre);
        font-size: var(--taille-sm);
        letter-spacing: 0.24em;
        text-transform: uppercase;
    }

    .hero__titre {
        font-size: var(--taille-hero);
        line-height: 0.92;
        color: var(--blanc);
    }

    .hero__titre-marque {
        color: var(--laiton);
    }

    .hero__accroche {
        max-inline-size: 42ch;
        font-size: var(--taille-md);
        color: var(--texte-doux-sur-sombre);
    }

    .hero__note,
    .hero__statut {
        justify-self: start;
    }

    .hero__statut {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--espace-2xs);
        color: var(--texte-doux-sur-sombre);
    }

    .hero__actions {
        margin-block-start: var(--espace-2xs);
    }

    @media (min-width: 62rem) {
        .hero__visuel {
            opacity: 1;
            justify-self: end;
            inline-size: 52%;
        }

        .hero__contenu {
            padding-inline-end: 45%;
        }
    }

    /* --- Bandeau d'arguments --------------------------------------------- */
    .argument {
        container-type: inline-size;
        display: grid;
        gap: var(--espace-2xs);
        align-content: start;
    }

    .argument__icone {
        inline-size: 2rem;
        block-size: 2rem;
        color: var(--accent);
    }

    /* --- Titres de page et sections -------------------------------------- */
    .section-titre {
        padding-block: var(--espace-lg) var(--espace-md);
        background-color: var(--creme-ombre);
        border-block-end: 1px solid var(--bordure);
    }

    .section--compacte {
        padding-block: var(--espace-lg);
    }

    .categorie__titre {
        margin-block-end: var(--espace-md);
        padding-block-end: var(--espace-2xs);
        border-block-end: 2px solid var(--laiton);
        color: var(--texte);
    }

    /* --- Ancres de catégories -------------------------------------------- */
    .ancres {
        position: sticky;
        inset-block-start: 3.5rem;
        z-index: 20;
        padding-block: var(--espace-2xs);
        background-color: color-mix(in srgb, var(--fond) 92%, transparent);
        backdrop-filter: blur(6px);

        & ul {
            display: flex;
            gap: var(--espace-2xs);
            overflow-x: auto;
            padding-block-end: var(--espace-3xs);
            scrollbar-width: thin;
        }
    }

    .ancres__lien {
        display: inline-block;
        padding: var(--espace-3xs) var(--espace-xs);
        border: 1px solid var(--bordure);
        border-radius: var(--rayon-pilule);
        background-color: var(--blanc);
        font-size: var(--taille-sm);
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;

        &:hover {
            border-color: var(--accent);
            color: var(--accent);
        }
    }

    /* --- Carte prestation ------------------------------------------------ */
    .carte-prestation {
        justify-content: space-between;
    }

    .carte-prestation__nom {
        font-size: var(--taille-md);
        font-weight: 600;
    }

    .carte-prestation__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--espace-2xs);
        margin-block-start: auto;
        padding-block-start: var(--espace-2xs);
        border-block-start: 1px solid var(--bordure);
        color: var(--texte-doux);
        font-size: var(--taille-sm);

        & span {
            display: inline-flex;
            align-items: center;
            gap: var(--espace-3xs);
        }

        & svg {
            inline-size: 1rem;
            block-size: 1rem;
        }
    }

    .carte-prestation__prix {
        font-family: var(--police-titre);
        font-size: var(--taille-md);
        font-weight: 700;
        color: var(--texte);
    }

    /* Carte étroite (colonne mobile) : le prix passe sous la durée. */
    @container (max-width: 15rem) {
        .carte-prestation__meta {
            flex-direction: column;
            align-items: start;
        }
    }

    /* --- Équipe ---------------------------------------------------------- */
    .barbier {
        display: flex;
        align-items: center;
        gap: var(--espace-md);

        & .photo {
            inline-size: clamp(5rem, 4rem + 8vw, 8rem);
            flex: none;
        }
    }

    .barbier-fiche {
        gap: var(--espace-sm);
    }

    /* --- Galerie --------------------------------------------------------- */
    .galerie {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
        gap: var(--espace-sm);
        margin: 0;
    }

    .galerie--apercu {
        grid-template-columns: repeat(auto-fill, minmax(min(45%, 10rem), 1fr));
    }

    .galerie__vignette {
        display: block;
        inline-size: 100%;
        padding: 0;
        border: 0;
        background: none;
        cursor: zoom-in;
        border-radius: var(--rayon-md);
        overflow: hidden;

        & .photo {
            transition: transform var(--transition);
        }

        &:hover .photo {
            transform: scale(1.03);
        }
    }

    /* --- Visionneuse (dialog natif) -------------------------------------- */
    .visionneuse {
        inline-size: min(96vw, 60rem);
        max-block-size: 92svh;
        padding: 0;
        border: 0;
        border-radius: var(--rayon-lg);
        background-color: var(--bleu-profond);
        color: var(--texte-sur-sombre);
        overflow: hidden;

        &::backdrop {
            background-color: rgb(8 14 26 / 82%);
        }
    }

    .visionneuse__image {
        inline-size: 100%;
        max-block-size: 76svh;
        object-fit: contain;
        background-color: #000;
    }

    .visionneuse__fermer {
        position: absolute;
        inset-block-start: var(--espace-2xs);
        inset-inline-end: var(--espace-2xs);
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-inline-size: 2.75rem;
        min-block-size: 2.75rem;
        border: 0;
        border-radius: 50%;
        background-color: rgb(0 0 0 / 55%);
        color: #fff;
        cursor: pointer;
    }

    .visionneuse__navigation {
        display: flex;
        justify-content: space-between;
        gap: var(--espace-sm);
        padding: var(--espace-2xs) var(--espace-sm) var(--espace-sm);
    }

    /* --- Avis ------------------------------------------------------------ */
    .avis {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: min(85%, 22rem);
        gap: var(--espace-md);
        margin: 0;
        padding-block-end: var(--espace-sm);
        overflow-x: auto;
        /* Défilement avec accroche : fonctionne au doigt et au clavier,
           sans une ligne de JavaScript. */
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
    }

    .avis__carte {
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        gap: var(--espace-2xs);
        padding: var(--espace-md);
        border: 1px solid var(--bordure-sombre);
        border-radius: var(--rayon-lg);
        background-color: color-mix(in srgb, var(--ardoise) 70%, transparent);
    }

    .avis__etoiles {
        display: flex;
        gap: 2px;
        color: var(--laiton);

        & svg {
            inline-size: 1rem;
            block-size: 1rem;
        }
    }

    .avis__texte {
        margin: 0;
        font-size: var(--taille-base);
    }

    .avis__auteur {
        margin-block-start: auto;
        font-weight: 600;
        font-size: var(--taille-sm);
    }

    /* --- Horaires -------------------------------------------------------- */
    .horaires {
        display: grid;
        gap: var(--espace-3xs);
        margin-block: var(--espace-sm);

        & > div {
            display: flex;
            justify-content: space-between;
            gap: var(--espace-sm);
            padding: var(--espace-3xs) var(--espace-2xs);
            border-radius: var(--rayon-sm);
            border-block-end: 1px solid var(--bordure);
        }

        & dt {
            font-weight: 600;
        }

        & dd {
            margin: 0;
            font-variant-numeric: tabular-nums;
            text-align: end;
        }
    }

    .horaires__jour--actif {
        background-color: color-mix(in srgb, var(--laiton) 18%, transparent);

        & dd {
            font-weight: 600;
        }
    }

    /* --- Listes de définitions (mentions légales) ------------------------ */
    .definitions {
        display: grid;
        gap: var(--espace-2xs);

        & > div {
            display: grid;
            gap: var(--espace-3xs);
            padding-block-end: var(--espace-2xs);
            border-block-end: 1px solid var(--bordure);
        }

        & dt {
            font-weight: 600;
            font-size: var(--taille-sm);
            color: var(--texte-doux);
        }

        & dd {
            margin: 0;
        }
    }

    /* --- Carte Google chargée après consentement ------------------------- */
    .carte-rgpd {
        position: relative;
        aspect-ratio: 4 / 3;
        border: 1px solid var(--bordure);
        border-radius: var(--rayon-lg);
        overflow: hidden;
        background-color: var(--creme-ombre);

        & iframe {
            inline-size: 100%;
            block-size: 100%;
            border: 0;
        }
    }

    .carte-rgpd__ecran {
        display: grid;
        place-content: center;
        gap: var(--espace-2xs);
        block-size: 100%;
        padding: var(--espace-md);
        text-align: center;
    }

    .carte-rgpd__icone {
        inline-size: 2.5rem;
        block-size: 2.5rem;
        justify-self: center;
        color: var(--accent);
    }
}

/* ==========================================================================
   Tunnel de réservation
   ========================================================================== */
@layer composants {

    /* --- Fil des étapes -------------------------------------------------- */
    .etapes {
        display: flex;
        flex-wrap: wrap;
        gap: var(--espace-2xs);
        margin: 0 0 var(--espace-lg);
        padding: 0;
        list-style: none;
        counter-reset: etape;
    }

    .etapes__item {
        display: inline-flex;
        align-items: center;
        gap: var(--espace-3xs);
        padding: var(--espace-3xs) var(--espace-xs);
        border: 1px solid var(--bordure);
        border-radius: var(--rayon-pilule);
        background-color: var(--blanc);
        color: var(--texte-doux);
        font-size: var(--taille-sm);
        font-weight: 600;

        & > span {
            display: inline-grid;
            place-content: center;
            inline-size: 1.5rem;
            block-size: 1.5rem;
            border-radius: 50%;
            background-color: var(--creme-ombre);
            font-size: var(--taille-xs);
        }
    }

    .etapes__item--actif {
        border-color: var(--accent);
        color: var(--texte);

        & > span {
            background-color: var(--laiton);
            color: var(--bleu-nuit);
        }
    }

    .etapes__item--fait {
        color: var(--succes);
        border-color: color-mix(in srgb, var(--succes) 40%, var(--bordure));

        & > span {
            background-color: color-mix(in srgb, var(--succes) 18%, transparent);
            color: var(--succes);
        }
    }

    /* --- Étapes ---------------------------------------------------------- */
    .etape {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .etape__titre {
        display: block;
        margin-block-end: var(--espace-md);
        padding: 0;
        font-family: var(--police-titre);
        font-size: var(--taille-lg);
        text-transform: uppercase;
        line-height: 1.1;

        &:focus-visible {
            outline: 3px solid var(--accent);
            outline-offset: 4px;
        }
    }

    .etape__categorie {
        margin-block: var(--espace-md) var(--espace-2xs);
        color: var(--accent);
        font-family: var(--police-titre);
        font-size: var(--taille-sm);
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .etape__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--espace-sm);
        margin-block-start: var(--espace-lg);
    }

    /* --- Choix (prestation, barbier) ------------------------------------- */
    .choix-liste {
        display: grid;
        gap: var(--espace-2xs);
    }

    .choix {
        display: flex;
        align-items: center;
        gap: var(--espace-sm);
        /* Cible tactile confortable : toute la carte est cliquable. */
        min-block-size: 3.5rem;
        padding: var(--espace-xs) var(--espace-sm);
        border: 2px solid var(--bordure);
        border-radius: var(--rayon-md);
        background-color: var(--blanc);
        cursor: pointer;
        transition: border-color var(--transition), background-color var(--transition);

        &:hover {
            border-color: color-mix(in srgb, var(--accent) 50%, var(--bordure));
        }

        /* La carte entière réagit à la sélection du bouton radio. */
        &:has(.choix__controle:checked) {
            border-color: var(--accent);
            background-color: color-mix(in srgb, var(--laiton) 10%, var(--blanc));
        }

        &:has(.choix__controle:focus-visible) {
            outline: 3px solid var(--accent);
            outline-offset: 2px;
        }
    }

    .choix--indisponible {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .choix__controle {
        inline-size: 1.25rem;
        block-size: 1.25rem;
        flex: none;
    }

    .choix__corps {
        display: grid;
        gap: 2px;
        flex: 1;
    }

    .choix__titre {
        font-weight: 600;
    }

    .choix__detail {
        color: var(--texte-doux);
        font-size: var(--taille-sm);
    }

    .choix__meta {
        display: grid;
        justify-items: end;
        gap: 2px;
        text-align: end;
        flex: none;
    }

    .choix__duree {
        color: var(--texte-doux);
        font-size: var(--taille-sm);
    }

    .choix__prix {
        font-family: var(--police-titre);
        font-size: var(--taille-md);
        font-weight: 700;
    }

    /* --- Calendrier ------------------------------------------------------ */
    .calendrier {
        container-type: inline-size;
        padding: var(--espace-sm);
        border: 1px solid var(--bordure);
        border-radius: var(--rayon-lg);
        background-color: var(--blanc);
    }

    .calendrier__entete {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--espace-sm);
        margin-block-end: var(--espace-sm);
    }

    .calendrier__mois {
        font-family: var(--police-titre);
        font-size: var(--taille-md);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .calendrier__jours-entete {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
        margin-block-end: var(--espace-3xs);
        color: var(--texte-doux);
        font-size: var(--taille-xs);
        font-weight: 600;
        text-align: center;
    }

    .calendrier__grille {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
    }

    .calendrier__jour {
        display: grid;
        place-content: center;
        /* 44 px minimum : utilisable au doigt, y compris sur petit écran. */
        min-block-size: 2.75rem;
        padding: 0;
        border: 1px solid var(--bordure);
        border-radius: var(--rayon-md);
        background-color: var(--blanc);
        color: var(--texte);
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        cursor: pointer;
        transition: background-color var(--transition), border-color var(--transition);

        &:hover {
            border-color: var(--accent);
            background-color: color-mix(in srgb, var(--laiton) 12%, var(--blanc));
        }

        &[aria-pressed='true'] {
            background-color: var(--bleu-nuit);
            border-color: var(--bleu-nuit);
            color: var(--blanc);
        }
    }

    .calendrier__jour--ferme {
        border-style: dashed;
        border-color: color-mix(in srgb, var(--bordure) 70%, transparent);
        background-color: var(--creme-ombre);
        color: color-mix(in srgb, var(--texte-doux) 70%, transparent);
        cursor: not-allowed;
        text-decoration: line-through;
    }

    .calendrier__vide {
        min-block-size: 2.75rem;
    }

    /* --- Créneaux -------------------------------------------------------- */
    .creneaux {
        margin-block-start: var(--espace-md);
    }

    .creneaux__titre {
        margin-block-end: var(--espace-2xs);
        font-weight: 600;
    }

    .creneaux__liste {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
        gap: var(--espace-2xs);
    }

    .creneau {
        min-block-size: 2.75rem;
        border: 2px solid var(--bordure);
        border-radius: var(--rayon-md);
        background-color: var(--blanc);
        color: var(--texte);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        cursor: pointer;
        transition: border-color var(--transition), background-color var(--transition);

        &:hover {
            border-color: var(--accent);
            background-color: color-mix(in srgb, var(--laiton) 12%, var(--blanc));
        }
    }

    .creneau--choisi {
        background-color: var(--bleu-nuit);
        border-color: var(--bleu-nuit);
        color: var(--blanc);
    }

    /* --- Récapitulatif et confirmation ----------------------------------- */
    .recapitulatif {
        margin-block-end: var(--espace-md);
        padding: var(--espace-sm) var(--espace-md);
        border-inline-start: 4px solid var(--laiton);
        border-radius: var(--rayon-md);
        background-color: color-mix(in srgb, var(--laiton) 12%, var(--blanc));
    }

    .recapitulatif__ligne {
        margin: 0;
    }

    .confirmation {
        display: grid;
        gap: var(--espace-md);
        justify-items: start;
    }

    .confirmation__icone {
        color: var(--succes);

        & svg {
            inline-size: 3rem;
            block-size: 3rem;
        }
    }

    .recap-rdv {
        inline-size: 100%;
    }

    .recap-rdv__date {
        font-family: var(--police-titre);
        font-size: var(--taille-lg);
        text-transform: uppercase;
        line-height: 1.1;
    }
}