/* =========================================================================
   La Suite d'Elisabeth — feuille de style
   -------------------------------------------------------------------------
   Organisation : variables → polices → base → composants → pages → footer.
   Les valeurs répétées (noir, blanc, hauteur de nav, transitions, points de
   rupture) sont centralisées en variables : avant, la même couleur et les
   mêmes marges étaient réécrites des dizaines de fois, parfois avec
   « !important » pour se corriger l'une l'autre.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Variables
   ------------------------------------------------------------------------- */

:root {
    --couleur-noir: #000;
    --couleur-blanc: #fff;
    --couleur-texte: #111;
    --couleur-gris: #666;
    --couleur-gris-clair: #bbb;
    --couleur-erreur: #b3261e;
    --couleur-succes: #1b5e20;
    --couleur-voile: rgba(255, 255, 255, 0.64);
    --couleur-voile-carte: rgba(255, 255, 255, 0.4);
    --couleur-overlay: rgba(0, 0, 0, 0.6);

    --police-titre: 'Allura', cursive;
    --police-texte: 'Roboto', sans-serif;

    /* Corps de texte. Sans cette déclaration, les paragraphes s'affichaient
       dans la police par défaut du navigateur — Times New Roman — ce qui
       donnait à des pages entières un air de document non mis en forme. */
    --police-prose: 'Lora', Georgia, 'Times New Roman', serif;

    --mesure: 68ch;
    --transition-douce: cubic-bezier(0.22, 0.7, 0.28, 1);

    --nav-hauteur: 55px;
    --nav-bordure: 3px;

    --transition-rapide: 0.3s;
    --transition-lente: 0.7s;

    /* Échelle d'arrondis.
       Règle appliquée : ce qui touche les deux bords de l'écran reste vif
       (bandeau d'accueil, bandes photo, section noire, barre de navigation,
       pied de page) ; ce qui est posé sur la page comme un objet s'arrondit.
       Un bloc pleine largeur aux coins arrondis laisse des angles vides qui
       trahissent la mise en page.

       Pour une version plus arrondie, il suffit de monter ces trois valeurs
       (12 / 16 / 20 px donnent un rendu nettement plus « application »). */
    --rayon-s: 4px;   /* champs de saisie */
    --rayon-m: 8px;   /* boutons, cartes, cadres */
    --rayon-l: 12px;  /* photos posées sur la page */

    --trait: 3px;
}

/* -------------------------------------------------------------------------
   2. Polices — servies depuis le site
   -------------------------------------------------------------------------
   Auparavant chargées depuis fonts.googleapis.com : deux requêtes bloquantes
   vers un tiers, et l'adresse IP de chaque visiteur transmise à Google sans
   son consentement.
   ------------------------------------------------------------------------- */

@font-face {
    font-family: 'Allura';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/allura-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/roboto-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* Fonte variable : un seul fichier couvre les graisses 400 à 700. */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/lora-latin-var.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/lora-latin-var-italic.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* -------------------------------------------------------------------------
   3. Base
   ------------------------------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    color: var(--couleur-texte);
    overflow-x: hidden;
    font-family: var(--police-prose);
    font-size: 1.0625rem;
    line-height: 1.7;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.has-menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
}

picture {
    display: contents;
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

h1,
h2,
h3 {
    font-weight: 700;
}

/* Classes utilitaires conservées : elles sont posées directement dans les
   gabarits pour appliquer une police à un bloc. */
.Roboto {
    font-family: var(--police-texte);
}

.Allura {
    font-family: var(--police-titre);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Permet d'atteindre le contenu sans dérouler tout le menu au clavier. */
.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 200;
    padding: 12px 20px;
    background-color: var(--couleur-noir);
    color: var(--couleur-blanc);
    font-family: var(--police-texte);
}

.skip-link:focus {
    left: 0;
    top: 0;
}

/* -------------------------------------------------------------------------
   3 bis. Transition entre les pages
   -------------------------------------------------------------------------
   Le passage d'une page à l'autre était brutal : écran blanc, puis apparition
   sèche du nouveau contenu.

   L'API View Transitions s'en charge sans une ligne de JavaScript. Les
   navigateurs qui ne la connaissent pas ignorent simplement ces règles et
   naviguent comme avant : aucun risque de page bloquée, contrairement à un
   fondu piloté par script qui laisserait l'écran vide si la navigation traîne.
   ------------------------------------------------------------------------- */

@view-transition {
    navigation: auto;
}

/* Court volontairement : au-delà de 300 ms, une transition de page cesse
   d'être fluide et devient une attente. */
::view-transition-old(root) {
    animation: sortie-page 0.18s ease-in both;
}

::view-transition-new(root) {
    animation: entree-page 0.32s var(--transition-douce) both;
}

@keyframes sortie-page {
    to {
        opacity: 0;
    }
}

@keyframes entree-page {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* La navigation et le pied de page sont identiques d'une page à l'autre :
   nommés, ils sont traités comme un même élément qui persiste, au lieu de
   disparaître et réapparaître à chaque passage. */
.nav {
    view-transition-name: barre-navigation;
}

.footer {
    view-transition-name: pied-de-page;
}

/* Nommer ne suffit pas : sans consigne, un élément nommé reçoit l'animation par
   défaut, soit un fondu croisé entre son ancienne et sa nouvelle image. Sur une
   barre identique d'une page à l'autre, cela produit un scintillement — la
   sensation que la navigation se recharge alors qu'elle ne change pas.
   On supprime l'ancienne image et on affiche la nouvelle sans animation : la
   barre reste parfaitement immobile, seul le soulignement de la page courante
   se trouve déjà à sa nouvelle place. */
::view-transition-group(barre-navigation),
::view-transition-group(pied-de-page) {
    animation: none;
}

::view-transition-old(barre-navigation),
::view-transition-old(pied-de-page) {
    display: none;
    animation: none;
}

::view-transition-new(barre-navigation),
::view-transition-new(pied-de-page) {
    animation: none;
}

/* Repli pour les navigateurs sans l'API : un simple fondu à l'arrivée. Il est
   porté par une animation CSS et non par une opacité que du script devrait
   lever — si quoi que ce soit échoue, la page reste visible. */
@supports not (view-transition-name: none) {
    body {
        animation: entree-page 0.3s var(--transition-douce) both;
    }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    body {
        animation: none;
    }
}

/* -------------------------------------------------------------------------
   3 ter. Apparition au défilement
   -------------------------------------------------------------------------
   Le masquage est conditionné à la classe `js`, posée sur <html> par un script
   en ligne du gabarit. Sans JavaScript — ou si reveal.js ne se charge pas — la
   règle ne s'applique pas et la page reste intégralement lisible.
   ------------------------------------------------------------------------- */

.js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.75s var(--transition-douce) var(--delai, 0ms),
        transform 0.75s var(--transition-douce) var(--delai, 0ms);
    will-change: opacity, transform;
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    /* Le contenu apparaît sans transition : jamais masqué, jamais animé. */
    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

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

/* -------------------------------------------------------------------------
   4. Navigation
   ------------------------------------------------------------------------- */

.nav {
    position: fixed;
    top: 0;
    z-index: 100;
    display: flex;
    width: 100%;
    height: var(--nav-hauteur);
    background-color: var(--couleur-blanc);
    border-bottom: var(--nav-bordure) solid var(--couleur-noir);
}

.nav__brand {
    width: 50%;
    margin: 12px 12px 12px 50px;
    font-family: var(--police-titre);
    font-size: 23px;
    white-space: nowrap;
}

.nav__list {
    display: flex;
    justify-content: flex-end;
    width: 50%;
    margin: 0;
    padding: 0;
    margin-right: 50px;
    list-style: none;
    font-family: var(--police-texte);
    white-space: nowrap;
}

.nav__item {
    position: relative;
    margin: 15px 35px 15px 15px;
}

/* Le trait était calé à `bottom: 0`, donc contre les jambages du texte, et sa
   largeur fixe de 30 px ne soulignait qu'une partie du mot. Il est descendu,
   affiné, et se déploie sur toute la largeur de l'entrée. */
.nav__item::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--couleur-noir);
    transition: width var(--transition-rapide) var(--transition-douce);
}

.nav__item:hover::after,
.nav__item.is-active::after {
    width: 100%;
}

/* Bouton hamburger — masqué au-dessus du point de rupture. */
.nav-toggle {
    display: none;
    position: fixed;
    top: 0;
    right: 30px;
    z-index: 101;
    width: 37px;
    height: var(--nav-hauteur);
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    position: absolute;
    height: 4px;
    width: 100%;
    background-color: var(--couleur-noir);
    transition: var(--transition-rapide);
}

.nav-toggle__bar {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.nav-toggle__bar::before {
    content: '';
    left: 0;
    top: -10px;
}

.nav-toggle__bar::after {
    content: '';
    left: 0;
    top: 10px;
}

.nav-toggle.is-open .nav-toggle__bar {
    background-color: transparent;
}

.nav-toggle.is-open .nav-toggle__bar::before {
    top: 0;
    transform: rotate(135deg);
}

.nav-toggle.is-open .nav-toggle__bar::after {
    top: 0;
    transform: rotate(-135deg);
}

.menu-mobile {
    display: none;
    position: fixed;
    top: var(--nav-hauteur);
    left: 0;
    z-index: 100;
    width: 100%;
    height: calc(100vh - var(--nav-hauteur));
    /* Voile presque opaque : à 60 %, la photo du bandeau d'accueil
       transparaissait derrière les entrées et les rendait illisibles. */
    background-color: rgba(0, 0, 0, 0.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.menu-mobile__list {
    margin: 0;
    padding: 20px 0;
    list-style: none;
}

.menu-mobile__item {
    position: relative;
    margin: 40px;
    font-family: var(--police-texte);
    font-size: 20px;
}

/* Le trait est porté par le lien, pas par l'élément de liste : celui-ci occupe
   toute la largeur de l'écran, le soulignement aurait traversé la page. */
.menu-mobile__item a {
    position: relative;
    display: inline-block;
    color: var(--couleur-blanc);
}

.menu-mobile__item a::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--couleur-blanc);
    transition: width var(--transition-rapide) var(--transition-douce);
}

.menu-mobile__item a:hover::after,
.menu-mobile__item.is-active a::after {
    width: 100%;
}

@media (max-width: 1160px) {
    .nav__list {
        display: none;
    }

    .nav-toggle {
        display: block;
    }

    .menu-mobile:not([hidden]) {
        display: block;
    }
}

/* -------------------------------------------------------------------------
   5. Boutons
   ------------------------------------------------------------------------- */

/* Une base commune et quatre variantes, selon le fond sur lequel le bouton est
   posé. L'ancienne variante « outline » écrivait en 30 px avec une bordure de
   4 px, ce qui écrasait tout le bloc qui l'entourait. */
.button {
    border-radius: var(--rayon-m);
    display: inline-block;
    padding: 15px 30px;
    font-family: var(--police-texte);
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-align: center;
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        background-color var(--transition-rapide),
        color var(--transition-rapide),
        border-color var(--transition-rapide);
}

/* Fond clair. */
.button--solid {
    background-color: var(--couleur-noir);
    color: var(--couleur-blanc);
    border-color: var(--couleur-noir);
}

.button--solid:hover {
    background-color: transparent;
    color: var(--couleur-noir);
}

.button--outline-dark {
    background-color: transparent;
    color: var(--couleur-noir);
    border-color: rgba(0, 0, 0, 0.3);
}

.button--outline-dark:hover {
    background-color: var(--couleur-noir);
    color: var(--couleur-blanc);
    border-color: var(--couleur-noir);
}

/* Fond sombre ou photographique. */
.button--light {
    background-color: var(--couleur-blanc);
    color: var(--couleur-noir);
    border-color: var(--couleur-blanc);
}

.button--light:hover {
    background-color: transparent;
    color: var(--couleur-blanc);
}

.button--ghost {
    background-color: transparent;
    color: var(--couleur-blanc);
    border-color: rgba(255, 255, 255, 0.55);
}

.button--ghost:hover {
    background-color: var(--couleur-blanc);
    color: var(--couleur-noir);
    border-color: var(--couleur-blanc);
}

/* -------------------------------------------------------------------------
   6. En-tête de page
   ------------------------------------------------------------------------- */

/* Le retrait haut doit dégager le menu, qui est en position fixe. Attention
   au raccourci `padding` : il écrase cette valeur si on le réécrit ailleurs. */
.page-header {
    max-width: 1100px;
    margin: 0 auto;
    padding: 104px 24px 0;
    text-align: center;
}

.page-header__eyebrow {
    margin: 0 0 14px;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--couleur-gris);
}

.page-header__title {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
}

.page-header__rule {
    width: 56px;
    margin: 22px auto;
    border: 0;
    border-top: 1px solid var(--couleur-noir);
}

.page-header__intro {
    max-width: 62ch;
    margin: 0 auto;
    color: var(--couleur-gris);
}

@media (max-width: 620px) {
    .page-header {
        padding: 88px 20px 0;
    }

    .page-header__intro {
        font-size: 0.95rem;
    }
}

/* -------------------------------------------------------------------------
   7. Accueil — bandeau d'ouverture
   -------------------------------------------------------------------------
   L'image est un <img> et non un arrière-plan CSS : c'est l'élément le plus
   grand de la page (le « LCP »), le navigateur doit pouvoir le découvrir tôt,
   choisir la bonne largeur via srcset et le charger en priorité.
   ------------------------------------------------------------------------- */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--couleur-noir);
    overflow: hidden;
}

.hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Voile dégradé : sans lui, le texte blanc devient illisible dès que la photo
   comporte une zone claire. */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.25) 35%,
        rgba(0, 0, 0, 0.55) 100%
    );
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    padding: 120px 24px;
    color: var(--couleur-blanc);
    text-align: center;
}

.hero__eyebrow {
    margin: 0 0 20px;
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    animation: montee 1s var(--transition-douce) both;
}

.hero__title {
    margin: 0;
    font-size: clamp(3.2rem, 11vw, 8rem);
    font-weight: 400;
    line-height: 1.05;
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
    animation: montee 1.1s var(--transition-douce) 0.12s both;
}

.hero__tagline {
    max-width: 34ch;
    margin: 18px auto 0;
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    animation: montee 1.1s var(--transition-douce) 0.24s both;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 36px;
    animation: montee 1.1s var(--transition-douce) 0.36s both;
}

@keyframes montee {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 36px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transform: translateX(-50%);
    color: var(--couleur-blanc);
}

.hero__scroll-label {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Trait qui descend en boucle : plus discret qu'une flèche qui rebondit. */
.hero__scroll-line {
    position: relative;
    display: block;
    width: 1px;
    height: 56px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.35);
}

.hero__scroll-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--couleur-blanc);
    animation: descente 2.4s ease-in-out infinite;
}

@keyframes descente {
    0% {
        transform: translateY(-100%);
    }

    60%,
    100% {
        transform: translateY(100%);
    }
}

@media (max-width: 620px) {
    .hero__content {
        padding: 100px 20px;
    }

    .hero__scroll {
        bottom: 20px;
    }

    .hero__scroll-line {
        height: 36px;
    }
}

/* -------------------------------------------------------------------------
   8. Accueil — introduction, atouts, cartes de découverte
   ------------------------------------------------------------------------- */

.intro {
    display: flex;
    justify-content: center;
    padding: 104px 24px 0;
}

.intro__inner {
    max-width: 62ch;
    text-align: center;
}

.intro__eyebrow {
    margin: 0 0 16px;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--couleur-gris);
}

.intro__lead {
    margin: 0 0 28px;
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    line-height: 1.6;
}

.features {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 24px 0;
}

.features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 40px 32px;
}

.feature {
    text-align: center;
}

.feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
}

.feature__title {
    margin: 0 0 6px;
    font-size: 1.05rem;
}

.feature__text {
    margin: 0;
    font-size: 0.95rem;
    color: var(--couleur-gris);
}

.discover {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 24px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 104px 24px 0;
}

.discover__card {
    border-radius: var(--rayon-l);
    position: relative;
    display: block;
    overflow: hidden;
    background-color: var(--couleur-noir);
}

.discover__media {
    border-radius: var(--rayon-l);
    overflow: hidden;
}

.discover__image {
    border-radius: var(--rayon-l);
    display: block;
    width: 100%;
    height: clamp(320px, 46vh, 460px);
    object-fit: cover;
    transition: transform 1.1s var(--transition-douce);
}

.discover__card:hover .discover__image {
    transform: scale(1.06);
}

.discover__body {
    position: absolute;
    inset: auto 0 0 0;
    padding: 32px 28px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    color: var(--couleur-blanc);
}

.discover__eyebrow {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

.discover__title {
    display: block;
    margin: 8px 0 14px;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.1;
}

.discover__arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
}

.discover__arrow span {
    transition: transform var(--transition-rapide);
}

.discover__card:hover .discover__arrow span {
    transform: translateX(5px);
}

/* -------------------------------------------------------------------------
   9. Tarifs
   -------------------------------------------------------------------------
   Les cartes étaient posées sur une photo, derrière un voile blanc à 40 % :
   le texte se lisait mal et le prix — l'information la plus recherchée —
   passait au second plan. Fond neutre, cartes cerclées.
   ------------------------------------------------------------------------- */

.pricing-section {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px 104px;
}

.pricing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 16px;
    max-width: 1180px;
    margin: 0 auto;
}

.pricing__card {
    border-radius: var(--rayon-m);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 20px 28px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    text-align: center;
    transition:
        transform var(--transition-rapide),
        box-shadow var(--transition-rapide),
        border-color var(--transition-rapide);
}

.pricing__card:hover {
    transform: translateY(-4px);
    border-color: var(--couleur-noir);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1);
}

.pricing__season {
    margin: 0 0 20px;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--couleur-gris);
    min-height: 2.4em;
}

.pricing__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    margin: 0;
}

.pricing__amount {
    font-size: clamp(2.4rem, 5vw, 3rem);
    line-height: 1;
    letter-spacing: -0.02em;
}

.pricing__currency {
    font-size: 1.2rem;
    align-self: flex-start;
    margin-top: 4px;
}

.pricing__unit {
    margin-left: 6px;
    font-size: 0.8rem;
    color: var(--couleur-gris);
}

.pricing__period {
    flex-grow: 1;
    margin: 16px 0 24px;
    font-size: 0.92rem;
    color: #2a2a2a;
}

.pricing__note {
    max-width: 60ch;
    margin: 32px auto 0;
    font-size: 0.9rem;
    color: var(--couleur-gris);
    text-align: center;
}

/* -------------------------------------------------------------------------
   10. Accueil — formulaire de contact
   ------------------------------------------------------------------------- */

.contact {
    position: relative;
    padding: 96px 24px;
    background-color: var(--couleur-noir);
    overflow: hidden;
}

.contact__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.32;
}

.contact__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 64px;
    align-items: start;
    max-width: 1140px;
    margin: 0 auto;
}

.contact__eyebrow {
    margin: 0 0 12px;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.contact__title {
    margin: 0 0 20px;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--couleur-blanc);
}

.contact__text {
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.82);
}

.contact__text a {
    color: var(--couleur-blanc);
    text-decoration: underline;
}

.contact__list {
    margin: 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.92rem;
}

.contact__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.contact__list a:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .contact__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .intro,
    .discover {
        padding-top: 72px;
    }

    .features {
        padding-top: 56px;
    }
}

@media (max-width: 620px) {
    .contact {
        padding: 64px 20px;
    }

    .features__grid {
        gap: 32px 20px;
    }
}

/* -------------------------------------------------------------------------
   11. Formulaires
   ------------------------------------------------------------------------- */

/* Dégage la hauteur du menu, qui est en position fixe : sans cette réserve,
   arriver sur le formulaire par son ancre en masque le haut. */
.form {
    scroll-margin-top: calc(var(--nav-hauteur) + 24px);
}

.form__intro {
    margin: 0 0 1rem;
    text-align: center;
}

.form__row {
    display: flex;
    gap: 25px;
}

.form__field {
    flex: 1;
    min-width: 0;
    margin-bottom: 16px;
}

/* Les libellés sont invisibles à l'écran mais lus par les lecteurs d'écran :
   les champs n'avaient jusqu'ici qu'un placeholder, qui disparaît à la saisie. */
.form__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.form__field--date .form__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 6px;
    overflow: visible;
    clip: auto;
    display: block;
}

/* Pile système plutôt que `inherit` : sans cela les champs héritent du serif
   du corps de page, alors que les navigateurs les rendent nativement en
   sans-serif — c'est l'aspect qu'avaient les formulaires avant la refonte. */
.form__control {
    border-radius: var(--rayon-s);
    width: 100%;
    padding: 12px;
    font-size: 20px;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--couleur-blanc);
    color: var(--couleur-texte);
    resize: vertical;
}

textarea.form__control {
    min-height: 200px;
    max-height: 300px;
}

.form__control::placeholder {
    color: var(--couleur-texte);
    font-size: 20px;
    opacity: 1;
}

.form__control--invalid {
    outline: 2px solid var(--couleur-erreur);
}

.form__error {
    margin: 4px 0 0;
    color: var(--couleur-erreur);
    background-color: var(--couleur-blanc);
    padding: 2px 6px;
    font-family: var(--police-texte);
    font-size: 0.85rem;
}

.form__hint {
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

/* Le badge flottant de reCAPTCHA est posé en position fixe : il échappe au
   `overflow-x: hidden` du corps de page et provoquait un défilement horizontal
   sur mobile. Google autorise à le masquer dès lors que l'attribution est
   affichée dans le formulaire — c'est ce que fait `.form__legal`. */
.grecaptcha-badge {
    visibility: hidden;
}

.form__legal {
    margin: 18px 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--couleur-gris);
    text-align: center;
}

.form__legal a {
    color: inherit;
    text-decoration: underline;
}

.form--light .form__legal,
.form--dark .form__legal {
    color: rgba(255, 255, 255, 0.6);
}

.form__actions {
    display: flex;
    justify-content: center;
}

.form__submit {
    border-radius: var(--rayon-m);
    width: 150px;
    padding: 12px 20px;
    font-family: var(--police-texte);
    background-color: var(--couleur-blanc);
    color: var(--couleur-noir);
    cursor: pointer;
    transition: background-color var(--transition-rapide), color var(--transition-rapide);
}

.form__submit:hover {
    background-color: var(--couleur-noir);
    color: var(--couleur-blanc);
}

/* Champ piège : hors écran plutôt que display:none, que certains robots
   savent détecter. */
.form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Variante sur fond sombre : encadrés noirs (page d'accueil). */
.form--dark .form__control {
    border: 2px solid var(--couleur-noir);
}

.form--dark .form__submit {
    border: 2px solid var(--couleur-noir);
}

.form--dark .form__intro,
.form--dark .form__hint,
.form--dark .form__field--date .form__label {
    color: var(--couleur-blanc);
}

/* Variante sans bordure, sur fond sombre ou photographique. */
.form--light .form__control {
    border: 0;
}

.form--light .form__submit {
    border: 0;
}

.form--light .form__intro,
.form--light .form__hint,
.form--light .form__field--date .form__label {
    color: var(--couleur-blanc);
}

/* Variante sur fond clair : le formulaire est le contenu principal de la page
   réserver, il n'est plus posé sur une photo. */
.form--bordered .form__control {
    border: 1px solid rgba(0, 0, 0, 0.2);
    transition: border-color var(--transition-rapide);
}

.form--bordered .form__control:hover {
    border-color: rgba(0, 0, 0, 0.4);
}

.form--bordered .form__control:focus {
    border-color: var(--couleur-noir);
    outline: none;
}

.form--bordered .form__control::placeholder {
    color: var(--couleur-gris);
}

.form--bordered .form__field--date .form__label {
    color: var(--couleur-gris);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.form--bordered .form__hint {
    color: var(--couleur-gris);
    font-size: 0.85rem;
}

.form--bordered .form__submit {
    width: auto;
    min-width: 220px;
    padding: 16px 32px;
    background-color: var(--couleur-noir);
    color: var(--couleur-blanc);
    border: 1px solid var(--couleur-noir);
    letter-spacing: 0.1em;
}

.form--bordered .form__submit:hover {
    background-color: transparent;
    color: var(--couleur-noir);
}

@media (max-width: 950px) {
    .form__row {
        display: block;
    }

    .form__control {
        padding: 8px;
        font-size: 16px;
    }

    .form__control::placeholder {
        font-size: 15px;
    }

    textarea.form__control {
        min-height: 100px;
    }

    .form__submit {
        width: 100%;
    }
}

/* -------------------------------------------------------------------------
   12. Messages de retour
   ------------------------------------------------------------------------- */

.alert {
    border-radius: var(--rayon-m);
    margin-bottom: 1rem;
    padding: 12px 16px;
    background-color: var(--couleur-voile);
    font-family: var(--police-texte);
    text-align: center;
}

.alert--success {
    border: 2px solid var(--couleur-noir);
    color: var(--couleur-succes);
}

.alert--error {
    border: 2px solid var(--couleur-erreur);
    color: var(--couleur-erreur);
}

.alert__title {
    margin: 0 0 4px;
    font-size: 1.3rem;
    color: var(--couleur-texte);
}

.alert__text {
    margin: 0;
}

.alert__list {
    margin: 0;
    padding-left: 1.2rem;
    text-align: left;
}

/* -------------------------------------------------------------------------
   13. Galerie — carrousel
   ------------------------------------------------------------------------- */

.carousel {
    max-width: 1100px;
    margin: 56px auto 0;
    padding: 0 24px;
}

.carousel__viewport {
    border-radius: var(--rayon-l);
    position: relative;
    background-color: #111;
    overflow: hidden;
}

.carousel__slide {
    animation: apparition 0.9s var(--transition-douce);
}

.carousel__image {
    border-radius: var(--rayon-l);
    display: block;
    width: 100%;
    height: clamp(260px, 58vh, 620px);
    object-fit: cover;
}

@keyframes apparition {
    from {
        opacity: 0.35;
    }

    to {
        opacity: 1;
    }
}

/* Pastille circulaire plutôt qu'une bande pleine hauteur : moins envahissant
   sur la photo, et la cible reste large au doigt. */
.carousel__control {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    border: 0;
    border-radius: 50%;
    color: var(--couleur-noir);
    font-size: 18px;
    cursor: pointer;
    transition: background-color var(--transition-rapide), transform var(--transition-rapide);
}

.carousel__control:hover {
    background-color: var(--couleur-blanc);
    transform: translateY(-50%) scale(1.08);
}

.carousel__control--prev {
    left: 16px;
}

.carousel__control--next {
    right: 16px;
}

.carousel__counter {
    position: absolute;
    right: 16px;
    bottom: 16px;
    padding: 6px 12px;
    background-color: rgba(0, 0, 0, 0.55);
    color: var(--couleur-blanc);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
}

.carousel__dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.carousel__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: background-color var(--transition-rapide), transform var(--transition-rapide);
}

.carousel__dot:hover {
    background-color: rgba(0, 0, 0, 0.45);
}

.carousel__dot.is-active {
    background-color: var(--couleur-noir);
    transform: scale(1.4);
}

@media (max-width: 620px) {
    .carousel {
        padding: 0 16px;
    }

    .carousel__control {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }
}

/* -------------------------------------------------------------------------
   14. Galerie — filtres, grille et visionneuse
   ------------------------------------------------------------------------- */

.filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Pastilles cerclées : l'ancienne bordure noire de 3 px sur chaque bouton
   créait une rangée de rectangles plus lourde que les photos elles-mêmes. */
.filters__button {
    padding: 10px 20px;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 999px;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition:
        background-color var(--transition-rapide),
        color var(--transition-rapide),
        border-color var(--transition-rapide);
}

.filters__button:hover {
    border-color: var(--couleur-noir);
}

.filters__button.is-active {
    background-color: var(--couleur-noir);
    border-color: var(--couleur-noir);
    color: var(--couleur-blanc);
}

.filters__count {
    margin: 20px 0 0;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--couleur-gris);
    text-align: center;
}

/* La grille s'adapte à la largeur disponible. L'ancienne version imposait
   `min-width: 450px` à chaque vignette : sur un téléphone de 375 px, la page
   débordait horizontalement. */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 12px;
    max-width: 1500px;
    margin: 28px auto 0;
    padding: 0 24px;
}

.tile {
    border-radius: var(--rayon-l);
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    aspect-ratio: 3 / 2;
    border: 0;
    background: none;
    overflow: hidden;
    cursor: zoom-in;
}

.tile.is-hidden {
    display: none;
}

.tile__image {
    border-radius: var(--rayon-l);
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--transition-douce);
}

.tile:hover .tile__image,
.tile:focus-visible .tile__image {
    transform: scale(1.06);
}

.tile__overlay {
    border-radius: var(--rayon-l);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity var(--transition-rapide);
}

.tile:hover .tile__overlay,
.tile:focus-visible .tile__overlay {
    opacity: 1;
}

.tile__zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    color: var(--couleur-blanc);
    /* Léger agrandissement à l'apparition : renforce l'idée de zoom. */
    transform: scale(0.85);
    transition: transform var(--transition-rapide);
}

.tile:hover .tile__zoom,
.tile:focus-visible .tile__zoom {
    transform: scale(1);
}

/* --- Visionneuse --------------------------------------------------------- */

body.has-lightbox {
    overflow: hidden;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: rgba(0, 0, 0, 0.94);
    animation: fondu 0.25s ease-out;
}

.lightbox[hidden] {
    display: none;
}

@keyframes fondu {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

.lightbox__image {
    border-radius: var(--rayon-m);
    max-width: 100%;
    max-height: calc(100vh - 140px);
    object-fit: contain;
}

.lightbox__caption {
    display: flex;
    align-items: center;
    gap: 16px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.82rem;
    text-align: center;
}

.lightbox__counter {
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.6);
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--couleur-blanc);
    cursor: pointer;
    transition: background-color var(--transition-rapide);
}

.lightbox__close:hover,
.lightbox__nav:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.lightbox__close {
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
}

.lightbox__nav {
    top: 50%;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
    border-radius: 50%;
    font-size: 18px;
}

.lightbox__nav--prev {
    left: 20px;
}

.lightbox__nav--next {
    right: 20px;
}

@media (max-width: 620px) {
    .grid {
        gap: 8px;
        padding: 0 16px;
    }

    .lightbox {
        padding: 12px;
    }

    .lightbox__image {
        max-height: calc(100vh - 170px);
    }

    .lightbox__nav {
        top: auto;
        bottom: 20px;
        transform: none;
    }

    .lightbox__nav--prev {
        left: 24px;
    }

    .lightbox__nav--next {
        right: 24px;
    }
}

/* -------------------------------------------------------------------------
   15. Page description
   -------------------------------------------------------------------------
   Chiffres clés, sous-navigation collante, prose, titres de section,
   équipements en quinconce, fil d'accès, conditions, bande photo, appel
   à l'action.
   ------------------------------------------------------------------------- */

/* --- 15.1 Chiffres clés -------------------------------------------------- */

.stats {
    max-width: 1100px;
    margin: 48px auto 0;
    padding: 0 24px;
}

.stats__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--rayon-m);
    /* Les cellules ont un fond blanc opaque : sans découpe, leurs angles vifs
       débordent des coins arrondis du cadre. */
    overflow: hidden;
}

.stats__item {
    padding: 28px 20px;
    background-color: var(--couleur-blanc);
    text-align: center;
}

.stats__value {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1;
    letter-spacing: -0.02em;
}

.stats__unit {
    margin-left: 4px;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    vertical-align: super;
}

.stats__label {
    margin: 10px 0 0;
    font-size: 0.9rem;
    color: var(--couleur-gris);
}

/* --- 15.2 Sous-navigation collante --------------------------------------- */

.section-nav {
    position: sticky;
    top: var(--nav-hauteur);
    z-index: 50;
    margin: 48px 0 0;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.section-nav__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 32px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    list-style: none;
}

.section-nav__link {
    position: relative;
    display: block;
    padding: 16px 2px;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* Sans cela, « VOTRE ARRIVÉE » se coupe en deux lignes sur mobile et
       déforme la barre. */
    white-space: nowrap;
    color: var(--couleur-gris);
    transition: color var(--transition-rapide);
}

.section-nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 0;
    height: 2px;
    background-color: var(--couleur-noir);
    transition: width 0.35s var(--transition-douce);
}

.section-nav__link:hover,
.section-nav__link.is-active {
    color: var(--couleur-noir);
}

.section-nav__link.is-active::after,
.section-nav__link:hover::after {
    width: 100%;
}

/* --- 15.3 Prose ---------------------------------------------------------- */

.prose {
    display: flex;
    justify-content: center;
    margin: 72px 0;
}

.prose__inner {
    max-width: var(--mesure);
    margin: 0 24px;
}

.prose__inner p {
    margin: 0 0 1.4em;
}

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

/* Le premier paragraphe est légèrement plus grand : il porte la promesse. */
.prose__lead {
    font-size: 1.2rem;
    line-height: 1.65;
}

.prose__lead::first-letter {
    float: left;
    margin: 0.06em 0.1em 0 0;
    font-size: 3.4em;
    line-height: 0.82;
    font-weight: 600;
}

/* --- 15.4 Titres de section ---------------------------------------------- */

.section-title {
    /* Compense la hauteur du menu et de la sous-navigation quand on arrive
       ici par une ancre, sinon le titre passe dessous. */
    scroll-margin-top: calc(var(--nav-hauteur) + 60px);

    max-width: 1100px;
    margin: 96px auto 40px;
    padding: 0 24px;
    text-align: center;
}

.section-title__eyebrow {
    margin: 0 0 12px;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--couleur-gris);
}

.section-title__text {
    margin: 0;
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    letter-spacing: 0.04em;
}

.section-title__rule {
    display: block;
    width: 0;
    height: 2px;
    margin: 20px auto 0;
    background-color: var(--couleur-noir);
    transition: width 0.9s var(--transition-douce) 0.15s;
}

.js .section-title.is-visible .section-title__rule,
html:not(.js) .section-title__rule {
    width: 56px;
}

/* --- 15.5 Équipements ---------------------------------------------------- */

.equipments {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.equipment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
    margin: 64px 0;
}

/* Une ligne sur deux inverse photo et texte : sept blocs identiques les uns
   sous les autres se lisaient comme une liste, plus comme une visite. */
.equipment--reversed .equipment__media {
    order: 2;
}

.equipment__media {
    border-radius: var(--rayon-l);
    overflow: hidden;
}

.equipment__image {
    border-radius: var(--rayon-l);
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transform: scale(1.001);
    transition: transform 1.2s var(--transition-douce);
}

.equipment:hover .equipment__image {
    transform: scale(1.05);
}

.equipment__body {
    position: relative;
}

.equipment__number {
    display: block;
    margin-bottom: 8px;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    color: var(--couleur-gris);
}

.equipment__title {
    margin: 0 0 14px;
    font-size: 1.45rem;
    letter-spacing: 0.01em;
}

.equipment__title::after {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    margin-top: 14px;
    background-color: var(--couleur-noir);
}

.equipment__text {
    margin: 0;
    max-width: 52ch;
    color: #2a2a2a;
}

/* --- 15.6 Bande photo ---------------------------------------------------- */

.band {
    position: relative;
    margin: 104px 0;
    overflow: hidden;
}

.band__media {
    overflow: hidden;
}

.band__image {
    display: block;
    width: 100%;
    height: clamp(280px, 52vh, 520px);
    object-fit: cover;
    transform: scale(1.08);
    transition: transform 1.6s var(--transition-douce);
}

.js .band.is-visible .band__image,
html:not(.js) .band__image {
    transform: scale(1);
}

.band__quote {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 24px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.45));
    color: var(--couleur-blanc);
    font-size: clamp(1.8rem, 5vw, 3.4rem);
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

/* --- 15.7 Accès ---------------------------------------------------------- */

.accesses {
    display: flex;
    justify-content: center;
    margin: 0 0 40px;
}

.accesses__list {
    width: 100%;
    max-width: 780px;
    margin: 0;
    padding: 0 24px;
    list-style: none;
}

.access {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 24px;
    padding-bottom: 40px;
}

.access:last-child {
    padding-bottom: 0;
}

/* Le fil qui relie les étapes. Il s'arrête au dernier point. */
.access__marker {
    position: relative;
    display: flex;
    justify-content: center;
}

.access:not(:last-child) .access__marker::after {
    content: '';
    position: absolute;
    top: 60px;
    bottom: -40px;
    width: 1px;
    background-color: rgba(0, 0, 0, 0.15);
}

.access__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    background-color: var(--couleur-blanc);
    transition: border-color var(--transition-rapide), transform var(--transition-rapide);
}

.access:hover .access__dot {
    border-color: var(--couleur-noir);
    transform: translateY(-2px);
}

.access__dot img {
    display: block;
    width: auto;
    height: auto;
    max-width: 28px;
    max-height: 28px;
}

.access__body {
    padding-top: 6px;
}

.access__title {
    margin: 0 0 8px;
    font-size: 1.1rem;
}

.access__text {
    margin: 0;
    color: #2a2a2a;
}

/* --- 15.8 Conditions ----------------------------------------------------- */

.conditions {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.conditions__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px;
}

/* Bordure fine et coin discret plutôt qu'un cadre noir de 2 px à angles très
   arrondis : la grille se lit comme un ensemble, pas comme huit étiquettes. */
.condition {
    padding: 26px 24px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: var(--rayon-m);
    background-color: var(--couleur-blanc);
    transition:
        transform var(--transition-rapide),
        box-shadow var(--transition-rapide),
        border-color var(--transition-rapide);
}

.condition:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.condition__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 50%;
    background-color: #f2f2f2;
    color: var(--couleur-noir);
    transition: background-color var(--transition-rapide), color var(--transition-rapide);
}

.condition:hover .condition__icon {
    background-color: var(--couleur-noir);
    color: var(--couleur-blanc);
}

.condition__title {
    margin: 0 0 8px;
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.condition__text {
    margin: 0;
    font-size: 0.95rem;
    color: #2a2a2a;
}

/* --- 15.9 Appel à l'action ----------------------------------------------- */

.cta {
    margin: 104px 0 0;
    padding: 80px 24px;
    background-color: var(--couleur-noir);
    color: var(--couleur-blanc);
    text-align: center;
}

.cta__title {
    margin: 0 0 12px;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
}

.cta__text {
    max-width: 52ch;
    margin: 0 auto 32px;
    color: rgba(255, 255, 255, 0.8);
}

.cta__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.cta .button--solid {
    background-color: var(--couleur-blanc);
    color: var(--couleur-noir);
    border-color: var(--couleur-blanc);
    letter-spacing: 0.08em;
}

.cta .button--solid:hover {
    background-color: transparent;
    color: var(--couleur-blanc);
}

/* --- 15.10 Lien fléché --------------------------------------------------- */

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

.link-arrow span {
    transition: transform var(--transition-rapide);
}

.link-arrow:hover span {
    transform: translateX(4px);
}

.link-arrow--light {
    color: rgba(255, 255, 255, 0.85);
}

.link-arrow--light:hover {
    color: var(--couleur-blanc);
}

/* --- 15.11 Adaptations ---------------------------------------------------- */

@media (max-width: 900px) {
    .equipment {
        grid-template-columns: 1fr;
        gap: 24px;
        margin: 56px 0;
    }

    /* En une colonne, la photo repasse toujours au-dessus du texte. */
    .equipment--reversed .equipment__media {
        order: 0;
    }

    .section-title {
        margin: 72px auto 32px;
    }

    .band {
        margin: 72px 0;
    }
}

@media (max-width: 620px) {
    .stats {
        margin-top: 32px;
        padding: 0 16px;
    }

    /* Deux colonnes plutôt qu'une : en pile, les quatre chiffres occupaient un
       écran entier avant que le visiteur n'atteigne le texte. */
    .stats__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats__item {
        padding: 20px 12px;
    }

    .section-nav__list {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 24px;
        padding: 0 16px;
        scrollbar-width: none;
    }

    .section-nav__list::-webkit-scrollbar {
        display: none;
    }

    .prose {
        margin: 48px 0;
    }

    .prose__lead {
        font-size: 1.1rem;
    }

    .access {
        grid-template-columns: 44px 1fr;
        gap: 16px;
    }

    .access__dot {
        width: 44px;
        height: 44px;
    }

    .access__dot img {
        max-width: 22px;
        max-height: 22px;
    }

    .access:not(:last-child) .access__marker::after {
        top: 48px;
    }

    .cta {
        padding: 56px 20px;
    }
}

/* -------------------------------------------------------------------------
   16. Parcours de réservation — étapes, calendrier, page réserver
   ------------------------------------------------------------------------- */

/* --- 16.1 Étapes ---------------------------------------------------------- */

.steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 40px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Filet reliant les trois pictogrammes, tiré d'un centre de cercle à l'autre.
   Il n'apparaît qu'une fois la grille certainement sur trois colonnes
   (3 × 240 px + 2 × 32 px), sinon il relierait des blocs empilés. */
@media (min-width: 820px) {
    .steps--default::before {
        content: '';
        position: absolute;
        top: 27px;
        left: 16.66%;
        right: 16.66%;
        height: 1px;
        background-color: rgba(0, 0, 0, 0.14);
    }
}

.step {
    position: relative;
    text-align: center;
}

.step__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 50%;
    /* Fond opaque : c'est lui qui « perce » le filet de liaison. */
    background-color: var(--couleur-blanc);
}

/* Le chiffre était auparavant posé en filigrane derrière le pictogramme, dont
   le cercle blanc masquait la moitié : on n'en voyait que le sommet dépasser,
   ce qui se lisait comme un défaut. Il devient un surtitre, dans le même
   style que la numérotation des blocs équipements. */
.step__number {
    display: block;
    margin-bottom: 8px;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--couleur-gris);
}

.step__title {
    margin: 0 0 8px;
    font-size: 1.05rem;
}

.step__text {
    max-width: 34ch;
    margin: 0 auto;
    font-size: 0.95rem;
    color: var(--couleur-gris);
}

/* Variante en colonne, pour la colonne latérale de la page réserver. */
.steps--compact {
    display: block;
}

.steps--compact .step {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 14px;
    padding: 12px 0 0;
    text-align: left;
}

/* En colonne, le chiffre reprend la forme d'une pastille pleine : le surtitre
   du mode par défaut se perdrait à côté d'un titre de même taille. */
.steps--compact .step__number {
    position: static;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    transform: none;
    border-radius: 50%;
    background-color: var(--couleur-noir);
    color: var(--couleur-blanc);
    font-size: 0.7rem;
    letter-spacing: 0;
    line-height: 1;
}

.steps--compact .step__icon {
    display: none;
}

/* Titre et texte doivent être explicitement placés en deuxième colonne : sans
   cela le placement automatique renvoie le texte sous le numéro, dans une
   colonne de 28 px, et il se coupe à un mot par ligne. */
.steps--compact .step__title {
    grid-column: 2;
    margin: 0 0 2px;
    font-size: 0.95rem;
}

.steps--compact .step__text {
    grid-column: 2;
    font-size: 0.88rem;
}

/* --- 16.2 Calendrier ------------------------------------------------------ */

.steps-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 24px 0;
}

.calendar {
    max-width: 1100px;
    margin: 0 auto;
    padding: 64px 24px 0;
}

/* --- Calendrier dessiné par le site -------------------------------------- */

.availability__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    margin: 0 0 36px;
    padding: 0;
    list-style: none;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--couleur-gris);
}

.availability__legend li {
    display: flex;
    align-items: center;
    gap: 9px;
}

.availability__key {
    width: 16px;
    height: 16px;
    border-radius: var(--rayon-s);
}

.availability__key--free {
    border: 1px solid rgba(0, 0, 0, 0.22);
}

.availability__key--booked {
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(0, 0, 0, 0.16) 0,
        rgba(0, 0, 0, 0.16) 2px,
        transparent 2px,
        transparent 6px
    );
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.availability__key--selected {
    background-color: var(--couleur-noir);
}

.availability__key--past {
    background-color: #f0f0f0;
}

.availability__months {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 40px 32px;
}

.month {
    width: 100%;
    border-collapse: collapse;
}

.month__caption {
    padding-bottom: 16px;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
}

.month__year {
    color: var(--couleur-gris);
}

.month thead th {
    padding-bottom: 10px;
    font-family: var(--police-texte);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--couleur-gris);
}

/* Le calendrier occupe la colonne principale, le récapitulatif la colonne
   latérale. Le panneau était auparavant posé sous les huit mois : il fallait
   dérouler toute la page pour le découvrir. */
.availability__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    align-items: start;
}

@media (max-width: 980px) {
    .availability__layout {
        grid-template-columns: 1fr;
    }
}

.month__day {
    padding: 2px;
    text-align: center;
}

/* Même boîte que le jour soit un bouton (libre) ou une case inerte (réservé,
   passé) : sans réinitialisation, le bouton hérite des marges et de la police
   du navigateur et la grille se décale. */
.month__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--rayon-s);
    color: inherit;
    font-family: var(--police-texte);
    font-size: 0.82rem;
    line-height: 1;
}

button.month__number {
    cursor: pointer;
    transition:
        background-color var(--transition-rapide),
        color var(--transition-rapide),
        border-color var(--transition-rapide);
}

button.month__number:hover {
    border-color: var(--couleur-noir);
    background-color: #f2f2f2;
}

.month__day--free .month__number {
    border: 1px solid rgba(0, 0, 0, 0.16);
}

/* Réservé : hachures claires plutôt qu'un aplat noir. Deux raisons — le noir
   plein est réservé à la date que le visiteur choisit, sans quoi sa sélection
   se confondrait avec les jours indisponibles ; et une grille couverte de
   carrés noirs donnait l'impression que tout était pris.
   Les intitulés des agendas (« Reserved - George », « Airbnb ») ne sont pas
   exposés au public : ils ne servent qu'à distinguer les sources. */
.month__day--booked .month__number {
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(0, 0, 0, 0.16) 0,
        rgba(0, 0, 0, 0.16) 2px,
        transparent 2px,
        transparent 6px
    );
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #8a8a8a;
}

.month__day--past .month__number {
    background-color: #f7f7f7;
    color: #c4c4c4;
}

.month__day--empty {
    padding: 0;
}

/* Le jour même est cerclé, pour se repérer dans la suite de mois. */
.month__day[data-today] .month__number {
    box-shadow: 0 0 0 2px var(--couleur-noir);
}

/* --- Plage sélectionnée --------------------------------------------------- */

/* Le noir plein est réservé aux deux bornes du séjour choisi : c'est le seul
   aplat de la grille, il se repère immédiatement. */
.month__number.is-start,
.month__number.is-end {
    background-color: var(--couleur-noir);
    border-color: var(--couleur-noir);
    color: var(--couleur-blanc);
}

.month__number.is-start:hover,
.month__number.is-end:hover {
    background-color: #2a2a2a;
}

.month__number.is-between {
    background-color: #e6e6e6;
    border-color: #e6e6e6;
    color: #3a3a3a;
}

/* --- Barre récapitulative ------------------------------------------------- */

/* Panneau collant : il suit le défilement des huit mois, donc l'invitation à
   réserver reste sous les yeux pendant que le visiteur cherche ses dates. */
.selection {
    position: sticky;
    top: calc(var(--nav-hauteur) + 24px);
    padding: 26px 24px;
    background-color: var(--couleur-noir);
    color: var(--couleur-blanc);
    border-radius: var(--rayon-m);
}

.selection__label {
    margin: 0 0 14px;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.selection__hint {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

.selection__dates {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.4;
}

.selection__nights {
    margin: 6px 0 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.selection__cta {
    display: block;
    margin-top: 20px;
    text-align: center;
}

.selection__reset {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 0;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: underline;
    cursor: pointer;
}

.selection__reset:hover {
    color: var(--couleur-blanc);
}

/* Ce que chaque état montre. */
.selection[data-state='empty'] .selection__dates,
.selection[data-state='empty'] .selection__nights,
.selection[data-state='empty'] .selection__cta,
.selection[data-state='empty'] .selection__reset,
.selection[data-state='partial'] .selection__dates,
.selection[data-state='partial'] .selection__nights,
.selection[data-state='partial'] .selection__cta,
.selection[data-state='complete'] .selection__hint {
    display: none;
}

@media (max-width: 980px) {
    /* Faute de place pour une colonne, le panneau devient une barre fixe en bas
       d'écran, et ne s'affiche qu'une fois le séjour complet : une barre
       permanente mangerait un tiers de l'écran pendant la recherche. */
    .selection {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px 24px;
        border-radius: 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
    }

    .selection[data-state='empty'],
    .selection[data-state='partial'] {
        display: none;
    }

    .selection__label {
        display: none;
    }

    .selection__cta {
        margin-top: 0;
    }

    .selection__reset {
        width: auto;
        margin-top: 0;
    }

    /* Réserve la hauteur de la barre, qui recouvrirait sinon la fin de la page. */
    body.has-selection .calendar {
        padding-bottom: 140px;
    }
}

@media (max-width: 520px) {
    .selection {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* Bandeau confirmant que les dates viennent du calendrier. */
.booking__prefill {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    padding: 14px 18px;
    background-color: #f4f4f4;
    border-radius: var(--rayon-m);
    font-size: 0.88rem;
    color: #2a2a2a;
}

@media (max-width: 620px) {
    .availability__months {
        gap: 32px 20px;
    }

    .month__number {
        font-size: 0.78rem;
    }
}

/* --- Repli : iframe Google, si les agendas sont injoignables --------------- */

/* Encadré : sans cela, l'iframe flottait au milieu de la page sans limite
   visible et paraissait ne pas appartenir au site. */
.calendar__frame {
    border-radius: var(--rayon-m);
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background-color: var(--couleur-blanc);
}

.calendar__iframe {
    display: block;
    width: 100%;
    height: clamp(520px, 76vh, 780px);
    border: 0;
}

.calendar__note {
    max-width: 60ch;
    margin: 22px auto 0;
    font-size: 0.92rem;
    color: var(--couleur-gris);
    text-align: center;
}

.calendar__note a {
    color: var(--couleur-noir);
    text-decoration: underline;
}

/* --- 16.3 Page réserver --------------------------------------------------- */

.booking {
    display: grid;
    grid-template-columns: 1.45fr 0.85fr;
    gap: 48px;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 24px 96px;
}

/* Le formulaire suit le défilement pendant qu'on lit la colonne latérale, plus
   haute que lui (574 px contre 937 px) : il reste à portée de main au lieu de
   disparaître en haut de page.
   Deux garde-fous :
   - `align-items: start` sur `.booking` empêche l'élément de grille de s'étirer
     à la hauteur de la rangée, sans quoi il n'aurait aucune marge pour coller ;
   - la hauteur minimale d'écran évite qu'un formulaire plus haut que la fenêtre
     — cas d'une saisie en erreur, qui ajoute des messages — se retrouve épinglé
     avec son bouton d'envoi hors champ. */
@media (min-width: 901px) and (min-height: 820px) {
    .booking__form {
        position: sticky;
        top: calc(var(--nav-hauteur) + 24px);
        align-self: start;
    }
}

.booking__aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.booking__card {
    border-radius: var(--rayon-m);
    padding: 26px 24px;
    border: 1px solid rgba(0, 0, 0, 0.14);
}

.booking__card--muted {
    background-color: #fafafa;
}

.booking__card-title {
    margin: 0 0 16px;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.booking__contact {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.92rem;
}

.booking__contact li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.booking__contact li:first-child {
    border-top: 0;
    padding-top: 0;
}

.booking__contact a:hover {
    text-decoration: underline;
}

.booking__facts {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.92rem;
    color: #2a2a2a;
}

.booking__facts li {
    margin-bottom: 8px;
}

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

@media (max-width: 900px) {
    .booking {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-bottom: 72px;
    }
}

@media (max-width: 620px) {
    .steps-section,
    .calendar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .calendar__frame {
        padding: 8px;
        /* Le calendrier Google impose sa propre largeur minimale : sans
           défilement, la fin de la semaine est coupée et la grille devient
           illisible sur un téléphone. */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .calendar__iframe {
        min-width: 560px;
        height: 62vh;
    }
}

/* -------------------------------------------------------------------------
   17. Pages légales
   ------------------------------------------------------------------------- */

.legal {
    display: flex;
    justify-content: center;
    margin: 60px 100px 100px;
}

.legal__paper {
    border-radius: var(--rayon-m);
    max-width: 900px;
    padding: 60px;
    border: var(--trait) solid var(--couleur-noir);
}

.legal__section {
    margin-bottom: 40px;
}

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

.legal__title {
    margin: 0 0 12px;
    font-size: 1.15rem;
}

.legal__section p,
.legal__section li {
    line-height: 1.6;
}

.legal__section a {
    text-decoration: underline;
}

@media (max-width: 560px) {
    .legal {
        margin: 50px 25px;
    }

    .legal__paper {
        padding: 30px;
    }
}

/* -------------------------------------------------------------------------
   18. Pied de page
   ------------------------------------------------------------------------- */

.footer {
    width: 100%;
    background-color: var(--couleur-noir);
    color: var(--couleur-blanc);
}

.footer__grid {
    display: flex;
    justify-content: space-evenly;
    padding: 30px;
}

.footer__block {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.footer__map {
    border-radius: var(--rayon-m);
    width: 310px;
    height: 170px;
    border: 0;
}

.footer__contact {
    margin: 0;
    font-style: normal;
}

.footer__row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 0 14px;
}

.footer__icon {
    width: 28px;
    height: auto;
    flex-shrink: 0;
}

.footer__link {
    color: var(--couleur-blanc);
}

.footer__link:hover {
    text-decoration: underline;
}

.footer__legal {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.footer__copyright {
    margin: 16px 0 0;
    text-align: center;
}

@media (max-width: 1000px) {
    .footer__grid {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .footer__row {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 400px) {
    .footer__map {
        width: 250px;
        height: 140px;
    }

    .footer__grid {
        font-size: 13px;
    }

    .footer__icon {
        width: 22px;
    }
}

/* -------------------------------------------------------------------------
   19. Bandeau de consentement
   ------------------------------------------------------------------------- */

.consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 150;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    background-color: var(--couleur-noir);
    color: var(--couleur-blanc);
}

.consent__text {
    flex: 1 1 320px;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.consent__text a {
    color: var(--couleur-blanc);
    text-decoration: underline;
}

.consent__actions {
    display: flex;
    gap: 10px;
}

.consent__button {
    border-radius: var(--rayon-m);
    padding: 10px 20px;
    background-color: var(--couleur-blanc);
    color: var(--couleur-noir);
    border: 2px solid var(--couleur-blanc);
    cursor: pointer;
    transition: background-color var(--transition-rapide), color var(--transition-rapide);
}

.consent__button--ghost {
    background-color: transparent;
    color: var(--couleur-blanc);
}

.consent__button:hover {
    background-color: var(--couleur-gris);
    color: var(--couleur-blanc);
    border-color: var(--couleur-gris);
}