/**
 * Bois de Faral — Styles complémentaires.
 * Couleurs/typo/espacements : uniquement via var(--wp--preset--...).
 */

/* ========================================
   Skip link (accessibilité)
   ======================================== */
.bdf-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100001;
    padding: 0.5rem 1rem;
    background: var(--wp--preset--color--orange);
    color: var(--wp--preset--color--anthracite);
    font-weight: 600;
    text-decoration: none;
}
.bdf-skip-link:focus {
    left: 0;
    position: fixed;
}

/* ========================================
   Header (refresh 2026-07 — ui_kit header-menu / header-hero)

   Ces règles sont la COPIE du bloc <style> du ui_kit, appliquées au markup libre du même
   ui_kit (inc/header.php). Elles remplacent ~430 lignes qui tentaient de reproduire ce
   rendu sur le DOM du bloc `core/navigation` : structure différente du ui_kit (la
   navigation principale posée à côté de la colonne [secondaire + langues + Réserver] au
   lieu d'être sous elle), donc « Aux alentours » qui repassait à la ligne dès 1440 px, et
   une pile de `!important` pour reprendre la main sur les styles du bloc.

   Breakpoint desktop/mobile : 1080px, celui du ui_kit. L'implémentation précédente avait
   choisi 768px « convention du projet », en notant que le ui_kit divergeait sciemment sur
   ce point et que l'arbitrage restait à faire ; il est fait ici en faveur du ui_kit — la
   rangée haute + les 4 entrées principales ne tiennent pas sous 1080px.
   ======================================== */
/* Le header est `sticky` : sans cette réserve, toute cible d'ancre se cale en haut du
   viewport et disparaît sous lui — le lien d'évitement « Aller au contenu » y déposait le
   focus sur un élément invisible (WCAG 2.2, SC 2.4.11 Focus Not Obscured, niveau AA). Header
   mesuré à 114px en desktop et ~72px sous 1080px. Posé sur `html` une fois pour toutes plutôt
   qu'en `scroll-margin-top` sur chaque cible : les deux `scroll-margin-top: 80px` de
   fiche-gite.css étaient d'ailleurs devenus insuffisants sans que personne ne le voie. */
html {
    scroll-padding-top: 120px;
}
@media (max-width: 1080px) {
    html {
        scroll-padding-top: 80px;
    }
}

/* WordPress enveloppe le template part dans <header class="wp-block-template-part">, dont la
   hauteur est exactement celle du header : le sticky n'y a aucune plage où coller et repartait
   avec le scroll. `display: contents` retire ce wrapper de la mise en page, .bdfhdr colle alors
   dans .wp-site-blocks comme dans le ui_kit (où il est enfant direct de body). */
.wp-site-blocks > header.wp-block-template-part {
    display: contents;
}

.bdfhdr {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--paper-50) 82%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: var(--border-w) solid var(--paper-300);
    overflow: visible; /* la feuille du logo déborde sur le hero */
}
.bdfhdr__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 10px var(--space-5);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
}

/* Logo calé en bas, la feuille déborde sur le hero. z-index au-dessus des panneaux de
   menu (qui montent à 10) pour rester visible quand l'un d'eux est ouvert. */
.bdfhdr__logo {
    display: block;
    flex: none;
    position: relative;
    z-index: 50;
    transform: translateY(34px);
}
.bdfhdr__logo img {
    height: 92px;
    width: auto;
    display: block;
}

.bdfhdr__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    min-width: 0;
}
.bdfhdr__top {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

/* --- Menu secondaire (rangée haute) --- */
.bdf-sec {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}
.bdf-sec > li {
    position: relative; /* ancre le panneau déroulant de « À propos » */
}
.bdf-sec a {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-700);
    text-decoration: none;
    padding: 4px 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.bdf-sec a:hover {
    color: var(--green-600);
}
.bdf-caret {
    width: 9px;
    height: 9px;
    flex: none;
}

/* --- Sélecteur de langue ---
   Déclaré une seule fois, dans la section « Sélecteur de langue » plus bas : le séparateur
   vertical, le style des drapeaux et cette déclaration de conteneur y vivent ensemble. Un
   doublon existait ici, chacun renvoyant à l'autre en commentaire — exactement le terrain sur
   lequel le piège de spécificité du séparateur des drapeaux s'était déclenché en recette. */

/* --- Navigation principale --- */
.bdfhdr__main {
    display: flex;
    align-items: flex-end;
}
.bdf-nav {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.bdf-nav__item {
    position: relative;
}
.bdf-nav__link {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-md);
    color: var(--ink-900);
    text-decoration: none;
    padding: 8px 14px 10px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: none;
    border: 0;
    transition: color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.bdf-nav__link:hover {
    color: var(--green-600);
    background: var(--green-50);
}
.bdf-nav__item.is-active > .bdf-nav__link {
    color: var(--green-700);
}
.bdf-nav__item.is-active > .bdf-nav__link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 4px;
    background: var(--green-300);
    border-radius: 999px;
    transform: rotate(-.5deg);
}

/* --- Méga-menu (Nos gîtes / Aux alentours) --- */
.bdf-mega {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--surface-card);
    border: var(--border-w) solid var(--paper-300);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-5) var(--space-6);
    display: none;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: var(--space-5) var(--space-6);
    z-index: 10;

    /* Deux filets que le ui_kit n'a pas — sa démo est figée à 1320x820, il ne pouvait pas
       les voir. Ils existaient avant la 9.9, qui les a perdus en recopiant le ui_kit.

       Horizontal : le panneau est ancré `right: 0` sur son entrée et s'étend donc vers la
       GAUCHE. Mesuré : panneau de 827px, bord droit de la 1re entrée à 405px du bord droit
       de la nav → bord gauche à -56px de viewport à 1200px de large, -156px à 1100px. Le
       débordement à gauche ne crée aucune barre de défilement : le panneau est simplement
       coupé, en silence. La grille de recette (1440/1280/1024/768/390) tombe dans l'angle
       mort — 1280 passe à 2px près, 1024 est déjà en panneau escamotable.

       Vertical : mesuré à 1920x929, le panneau « Aux alentours » fait 934px de haut. Comme
       il est `absolute` dans un header `sticky`, défiler fait suivre les deux : le bas ne
       remonte jamais et ses liens sont définitivement inatteignables. */
    max-width: min(980px, calc(100vw - 2 * var(--space-4)));
    /* 180px et non 120 : `.bdf-mega` est en `box-sizing: content-box`, donc `max-height`
       borne la boîte de CONTENU — ses 2x24px de padding et ses 2x1.5px de bordure s'ajoutent
       par-dessus. Mesuré en recette post-déploiement : 559px calculés donnaient 610px rendus,
       et le panneau dépassait encore de 41px sous la ligne de flottaison. 180 = header (114)
       + détachement (8) + chrome de la boîte (51) + marge. */
    max-height: calc(100svh - 180px);
    overflow-y: auto;
}
/* `.is-open` est le crochet du ui_kit (header-hero/index.html:52), posé au doigt par
   assets/js/nav-touch.js : au-dessus de 1080px un écran tactile n'a ni :hover ni
   :focus-within, et le panneau ne s'ouvrait donc jamais. */
.bdf-nav__item:hover > .bdf-mega,
.bdf-nav__item:focus-within > .bdf-mega,
.bdf-nav__item.is-open > .bdf-mega {
    display: grid;
}
/* `min-width` posé ici seulement : `nav-menu.php` émet toujours `--wide`, le 620px du
   ui_kit n'était jamais atteint. */
.bdf-mega--wide {
    min-width: min(760px, calc(100vw - 2 * var(--space-4)));
}
/* Borner la largeur ne suffit pas : ancré `right: 0` sur SON entrée, le panneau large sort
   par la gauche dès que cette entrée est trop à gauche, quelle que soit sa largeur. Entre le
   breakpoint desktop (1081px) et ~1284px, on l'ancre donc sur la nav entière — dont le bord
   droit est celui du conteneur, ce qui le fait toujours rentrer. Au-dessus, on garde
   l'ancrage sur l'entrée, qui est celui du ui_kit. `position: static` est limité aux entrées
   qui portent un panneau large : les déroulants simples (263px) tiennent partout. */
.bdf-nav {
    position: relative;
}
@media (min-width: 1081px) and (max-width: 1300px) {
    .bdf-nav__item:has(> .bdf-mega--wide) {
        position: static;
    }
}
.bdf-mega__col h4 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--green-700);
    margin: 0 0 10px;
    line-height: 1.1;
}
/* Un titre de colonne qui correspond à une vraie page reste cliquable, sans prendre le
   style de lien global (souligné + couleur de lien). */
.bdf-mega__col h4 a {
    color: inherit;
    text-decoration: none;
}
.bdf-mega__col h4 a:hover {
    text-decoration: underline;
}
.bdf-mega__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.bdf-mega__list a {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--ink-700);
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 6px;
    display: block;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.bdf-mega__list a:hover {
    background: var(--green-50);
    color: var(--green-700);
}
.bdf-mega__sub {
    margin: 2px 0 6px 10px;
    padding-left: 10px;
    border-left: 2px solid var(--paper-200);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bdf-mega__group {
    font-weight: 700;
    color: var(--ink-900) !important;
}
/* Regroupement sans page propre : rendu en <span> plutôt qu'en ancre morte. */
span.bdf-mega__group {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    padding: 4px 6px;
}

/* --- Panneau déroulant simple (Tarifs, Faites du vélo, À propos) --- */
.bdf-drop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    /* Même filet vertical que `.bdf-mega` : la mise à plat des descendants ajoutée par la
       code review peut allonger un déroulant, et rien ne le bornait. */
    max-height: calc(100svh - 180px);
    overflow-y: auto;
    min-width: 240px;
    background: var(--surface-card);
    border: var(--border-w) solid var(--paper-300);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    display: none;
    z-index: 10;
}
.bdf-nav__item:hover > .bdf-drop,
.bdf-nav__item:focus-within > .bdf-drop,
.bdf-nav__item.is-open > .bdf-drop,
.bdf-sec > li:hover > .bdf-drop,
.bdf-sec > li:focus-within > .bdf-drop {
    display: block;
}

/* Regroupement sans page propre dans un déroulant : libellé non cliquable plutôt que la
   suppression de l'entrée ET de tout son sous-arbre (cf. inc/nav-menu.php). Même rôle que
   span.bdf-mega__group côté méga-menu. */
.bdf-drop__group,
.bdf-sec__group {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--ink-900);
    padding: 6px 10px;
}
.bdf-sec__group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 2px;
}

/* Bande de liaison entre un libellé et son panneau.

   Le ui_kit détache les panneaux de 8px (`top: calc(100% + 8px)`), mais ces 8px
   n'appartiennent ni au libellé ni au panneau : la souris qui descend les traverse,
   perd le survol de l'entrée, et le menu se referme avant d'être atteignable. Le
   panneau était donc consultable mais pas navigable.

   Ce pont était porté par le panneau (`.bdf-mega::before` à `top: -8px`), et il n'a
   jamais rien comblé : les deux panneaux ont `overflow-y: auto` (filet vertical), et un
   scroller clippe ses descendants à sa boîte de CONTENU — un pseudo-élément au-dessus du
   bord haut n'est ni peint ni survolable, et l'overflow vers le haut ne défile pas.

   Il est donc porté par l'entrée, que rien ne clippe. Il n'existe que pendant que le
   panneau est ouvert (donc n'ouvre rien au survol de l'interstice), et le survol se
   maintient parce qu'il fait partie de l'entrée pour le test de survol. Restreint au
   desktop : sous 1081px les panneaux se déplient en flux et le pont recouvrirait leurs
   premiers liens. `:has` limite le pont aux entrées qui portent un panneau. */
@media (min-width: 1081px) {
    .bdf-nav__item:has(> .bdf-mega, > .bdf-drop):hover::after,
    .bdf-nav__item:has(> .bdf-mega, > .bdf-drop):focus-within::after,
    .bdf-nav__item:has(> .bdf-mega, > .bdf-drop).is-open::after,
    .bdf-sec > li:has(> .bdf-drop):hover::after,
    .bdf-sec > li:has(> .bdf-drop):focus-within::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 8px;
    }
}
.bdf-drop ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bdf-drop a {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--ink-700);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    display: block;
}
.bdf-drop a:hover {
    background: var(--green-50);
    color: var(--green-700);
}

/* --- Bouton d'ouverture mobile ---
   <details> réduit à son résumé : il pilote le panneau frère (cf. inc/header.php).
   Masqué en desktop, où le panneau est affiché en permanence. */
.bdfhdr__burger-wrap {
    display: none;
}
.bdf-burger {
    list-style: none; /* retire le triangle natif du <summary> */
    margin-bottom: 4px;
}
.bdf-burger::-webkit-details-marker {
    display: none;
}
.bdf-burger::before {
    content: "\2630"; /* ☰ */
    font-size: 1.1em;
    line-height: 1;
}

/* ========================================
   Header — sous 1080px : panneau escamotable

   Zone non couverte par le ui_kit, qui n'en donne qu'un aperçu statique (un burger, pas
   de panneau ouvert). Le parti pris : un seul markup pour les deux affichages, les
   panneaux flottants du desktop étant simplement dépliés en place et indentés.

   Les sous-menus restent ouverts : les replier demanderait un <details> par entrée, alors
   que le survol/focus qui les ouvre en desktop n'a pas d'équivalent tactile.
   ======================================== */
@media (max-width: 1080px) {
    .bdfhdr__inner {
        align-items: center;
        padding: 8px var(--space-4);
        position: relative;
    }
    .bdfhdr__logo {
        transform: translateY(14px);
    }
    .bdfhdr__logo img {
        height: 56px;
    }
    /* Le logo est à z-index 50 pour passer au-dessus des panneaux flottants du desktop
       (z-index 10). Le panneau mobile, lui, est à 30 : le logo lui peignait dessus et
       recouvrait son coin haut-gauche, première zone où arrivent les entrées du menu
       secondaire. Il repasse dessous pendant que le panneau est ouvert. */
       `:has()` et non `~` : le logo PRÉCÈDE le <details> dans le DOM, un sélecteur de frère
       suivant ne l'atteindrait pas. */
    .bdfhdr__inner:has(.bdfhdr__burger-wrap[open]) .bdfhdr__logo {
        z-index: 20;
    }

    .bdfhdr__burger-wrap {
        display: block;
    }

    /* Panneau replié par défaut, déplié par le <details> qui le précède. */
    .bdfhdr__right {
        display: none;
    }
    .bdfhdr__burger-wrap[open] ~ .bdfhdr__right {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-5);

        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 30;

        padding: var(--space-5) var(--space-5) var(--space-6);
        background: var(--paper-50);
        border-bottom: var(--border-w) solid var(--paper-300);
        box-shadow: var(--shadow-lg);

        /* Le menu complet dépasse la hauteur d'un écran de téléphone. */
        max-height: calc(100svh - 100%);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* --- Rangée haute : menu secondaire empilé, puis langues et CTA sur une ligne --- */
    .bdfhdr__top {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
    }
    .bdf-sec {
        flex: 1 0 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .bdf-sec > li {
        border-bottom: var(--border-w) solid var(--paper-200);
    }
    .bdf-sec a {
        justify-content: space-between;
        padding: 10px 0;
        font-size: var(--text-md);
    }
    /* --- Navigation principale --- */
    .bdfhdr__main,
    .bdf-nav {
        display: block;
    }
    .bdf-nav__item + .bdf-nav__item {
        margin-top: var(--space-4);
    }
    .bdf-nav__link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        font-size: var(--text-lg);
    }
    /* Le soulignement de l'entrée active est ancré au bas de l'item en desktop ; déplié,
       l'item fait toute la hauteur de son panneau — on le recale sous le seul libellé. */
    .bdf-nav__item.is-active > .bdf-nav__link {
        position: relative;
    }
    .bdf-nav__item.is-active > .bdf-nav__link::after {
        left: 0;
        right: auto;
        width: 40px;
        bottom: 2px;
    }

    /* Panneaux dépliés en place plutôt que flottants. */
    .bdf-mega,
    .bdf-drop {
        position: static;
        display: block;
        min-width: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
        padding: 0 0 0 var(--space-4);
    }
    .bdf-mega {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .bdf-mega__col + .bdf-mega__col {
        margin-top: var(--space-4);
    }
    .bdf-mega__col h4 {
        font-size: var(--text-md);
        margin-bottom: 4px;
    }
    .bdf-drop ul {
        gap: 0;
    }
}

/* La règle `@media (min-width: 1081px) { .bdfhdr__right { display: flex } }` qui vivait ici
   était un no-op — c'est déjà la déclaration de base, et le bloc `max-width: 1080px` cesse de
   s'appliquer tout seul — et son commentaire décrivait un « état résiduel » qui n'existe pas :
   au-dessus de 1080px le <details> est en `display: none`. Supprimée. */

/* ========================================
   Footer (refresh 2026-07 — ui_kit footer)
   ======================================== */
.bdf-footer {
    background: var(--green-800);
    /* Sépare nettement le bloc « Qui sommes-nous ? » (bandeau) du bloc
       « Nous trouver » (footer), à l'image de .ftr__block + .ftr__block
       du ui_kit — les deux sections partagent le même aplat --green-800. */
    border-top: 1px solid color-mix(in srgb, var(--paper-50) 16%, transparent);
}
.bdf-footer a {
    text-decoration: none;
}

.bdf-footer-social {
    display: flex;
    gap: 10px;
    margin-top: var(--wp--preset--spacing--20);
}
.bdf-footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: var(--border-w) solid color-mix(in srgb, var(--paper-50) 30%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--paper-50);
    transition: background var(--dur-fast), border-color var(--dur-fast);
}
.bdf-footer-social a:hover {
    background: var(--green-500);
    border-color: var(--green-500);
}

/* Barre de menu du footer — horizontale (ui_kit .ftr-nav : liens en ligne,
   gap 8px 28px, gras), remplace la disposition verticale d'origine. */
.bdf-footer-nav {
    margin-top: var(--wp--preset--spacing--40);
    padding-top: var(--wp--preset--spacing--30);
    border-top: 1px solid color-mix(in srgb, var(--paper-50) 18%, transparent);
}
.bdf-footer-nav.wp-block-navigation,
.bdf-footer-nav .wp-block-navigation__container {
    gap: 8px 28px;
}
.bdf-footer-nav a {
    font-weight: 700;
}
/* Spécificité renforcée : bat .bdf-on-dark a:not(.bdf-btn):hover (0,3,1)
   de primitives.css, sinon le hover repasse en blanc au lieu de --green-300. */
.bdf-footer .bdf-footer-nav a:not(.bdf-btn):hover {
    color: var(--green-300);
}

/* Barre basse — liens légaux + copyright, simple séparation (pas de fond
   plus sombre, cf. Dev Notes story 9.3). */
.bdf-footer-bottom {
    margin-top: var(--wp--preset--spacing--30);
    padding-top: var(--wp--preset--spacing--20);
    border-top: 1px solid color-mix(in srgb, var(--paper-50) 12%, transparent);
}
/* Liens légaux distinguables du texte © voisin sans reposer sur la seule
   couleur (WCAG 1.4.1) : soulignement discret au repos, plein au survol.
   Spécificité (0,2,1) pour battre .bdf-footer a { text-decoration:none }. */
.bdf-footer .bdf-footer-bottom a {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--paper-50) 45%, transparent);
    text-underline-offset: 0.2em;
}
.bdf-footer .bdf-footer-bottom a:not(.bdf-btn):hover {
    text-decoration-color: currentColor;
}

/* ========================================
   Widget Hippocamp — conteneur (positionnement/fallback)
   Habillage visuel du widget/tunnel lui-même : assets/css/hippocamp.css
   ======================================== */
.bdf-hippocamp-container {
    max-width: 100%;
    margin: var(--wp--preset--spacing--30) auto;
    min-height: 120px;
    position: relative;
}
/* Le conteneur porte toujours un <noscript> enfant direct (hero-hippocamp.php:49-51) :
   ":empty" ne peut donc jamais matcher, même avant que le script Hippocamp n'injecte son
   propre DOM (story 9.4, Task 2 — le fallback ci-dessous n'affichait donc jamais rien en
   pratique). ":has(> noscript:only-child)" cible précisément l'état "rien d'autre que le
   noscript" : avant l'injection JS, et durablement si JS est désactivé. */
.bdf-hippocamp-container:has(> noscript:only-child)::after {
    content: "Chargement du formulaire de réservation...";
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    color: var(--wp--preset--color--anthracite);
    opacity: 0.6;
    font-size: var(--wp--preset--font-size--medium);
}

/* ========================================
   Hero d'accueil (refresh 2026-07 — ui_kit header-hero)

   Ces règles sont la COPIE du bloc <style> du ui_kit, appliquées au markup libre du
   même ui_kit (patterns/hero-hippocamp.php). Elles ne traduisent plus rien sur un DOM
   Gutenberg : c'est ce travail de traduction qui avait posé un `max-width:46ch` — destiné
   au seul sous-titre — sur le conteneur entier, réduisant le hero à 441 px de large
   (titre sur 4 lignes, boutons empilés). Les `!important` qui reprenaient la main sur les
   styles inline du bloc `core/cover` ont disparu avec lui ; les trois qui subsistent dans
   cette section ne visent pas des styles de bloc mais le layout racine de WordPress, qui pose
   ses marges de flux en `:where()` — inatteignable autrement à cette spécificité.

   Toute retouche ici doit rester alignée sur le ui_kit ; les trois écarts volontaires
   sont isolés plus bas et justifiés un par un.
   ======================================== */
/* WordPress espace les enfants de `.wp-site-blocks` de `--wp--style--block-gap` (24px,
   valeur par défaut du cœur — `theme.json` n'en déclare pas), ce qui insère une bande de
   fond crème entre chaque bande pleine largeur.

   Règle posée au NIVEAU, plutôt que composant par composant. La version précédente
   énumérait `#main-content`, `main` et `.wp-block-cover`, et laissait donc passer tout ce
   qui n'y figurait pas : mesuré le 2026-08-15 sur les 80 pages éditoriales, 24px entre
   `<main>` et le CTA de fin, PUIS 24px entre le CTA et le `<footer>`. Une énumération se
   fait rattraper au prochain `template-part` posé à la racine ; le niveau, non.

   L'inventaire des enfants directs de `.wp-site-blocks` est fait sur les cinq gabarits
   (accueil, éditorial, fiche gîte, article, 404) : header, hero, `<main>`, CTA de fin,
   footer, bandeau CTA mobile. Ce sont tous des bandes qui s'empilent bord à bord — aucune
   ne veut de gouttière ici. Les enfants des groupes INTERNES gardent la leur, cette règle
   ne descend pas jusqu'à eux.

   Pas de `!important` : le cœur pose ses marges de flux en `:where(.wp-site-blocks) > *`,
   de spécificité nulle. `.wp-site-blocks > *` suffit largement — le `!important` de la
   version précédente, justifié par une prétendue inatteignabilité, n'a jamais été
   nécessaire. Vérifié par la mesure : 0px partout sans lui. */
.wp-site-blocks > * {
    margin-block-start: 0;
}

/* Le formulaire Hippocamp doit rester accolé au bas du hero à TOUTES les largeurs. La 9.9
   l'avait retiré de la liste ci-dessus, et son seul remplaçant (le chevauchement négatif) est
   enfermé dans `@media (min-width: 768px)` : sous 768px il récupérait donc 24px de block-gap,
   ce qui contredit le calcul de hauteur du hero mobile
   `clamp(220px, calc(100svh - 60px - 438px), 420px)` — la ligne de flottaison était manquée
   d'autant. La règle desktop, plus bas et `!important` elle aussi, reprend la main au-dessus. */
.bdf-hippocamp-section {
    margin-block-start: 0 !important;
}

.bdf-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 560px;
    background: linear-gradient(180deg, rgba(50,47,42,.12) 0%, rgba(50,47,42,.34) 42%, rgba(50,47,42,.82) 100%),
                url(/wp-content/uploads/2026/02/cover-bois-de-faral-1920.webp) center 38%/cover no-repeat var(--ink-700);
}
.bdf-hero__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    width: 100%;
    padding: var(--space-7) var(--space-5) var(--space-8);
}
.bdf-hero__eyebrow {
    font-family: var(--font-hand);
    font-size: var(--text-xl);
    color: var(--paper-50);
    margin: 0 0 2px;
    text-shadow: 0 1px 10px rgba(50,47,42,.6);
}
.bdf-hero__title {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.02;
    font-size: clamp(2.6rem, 6vw, var(--text-5xl));
    margin: 0 0 8px;
    max-width: 14ch;
    text-shadow: 0 2px 4px rgba(50,47,42,.5), 0 4px 24px rgba(50,47,42,.6);
}
.bdf-hero__sub {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    max-width: 46ch;
    margin: 0 0 24px;
    text-shadow: 0 2px 12px rgba(50,47,42,.55);
}
.bdf-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
}
.bdf-hero__cta .bdf-btn {
    font-size: var(--text-lg);
}

/* Écart assumé 1/3 — image responsive.
   Le ui_kit sert une image unique. Un background-image n'accepte pas de srcset, donc les
   3 tailles WebP de la médiathèque sont servies par bascule CSS. Le dégradé doit être
   répété : il fait partie de la même propriété background-image que la photo. */
@media (max-width: 767px) {
    .bdf-hero {
        background-image: linear-gradient(180deg, rgba(50,47,42,.12) 0%, rgba(50,47,42,.34) 42%, rgba(50,47,42,.82) 100%),
                          url(/wp-content/uploads/2026/02/cover-bois-de-faral-800.webp);
    }
}
@media (min-width: 768px) and (max-width: 1279px) {
    .bdf-hero {
        background-image: linear-gradient(180deg, rgba(50,47,42,.12) 0%, rgba(50,47,42,.34) 42%, rgba(50,47,42,.82) 100%),
                          url(/wp-content/uploads/2026/02/cover-bois-de-faral-1280.webp);
    }
}

/* Écart assumé 2/3 — hauteur et chevauchement du formulaire (desktop).
   Le ui_kit fige le hero à 560px et ne montre pas le formulaire Hippocamp. Décision
   produit du projet : header + hero + formulaire doivent tenir au-dessus de la ligne de
   flottaison, le formulaire venant chevaucher le bas du hero.
   160px = header (99) + formulaire (181) − chevauchement (140) + marge de sécurité. */
@media (min-width: 768px) {
    .bdf-hero {
        --bdf-hero-overlap: 140px;
        min-height: clamp(480px, calc(100svh - 160px), 900px);
    }
    /* Ajouté au padding-bottom du ui_kit plutôt que substitué : le texte doit rester
       au-dessus de la zone que le formulaire recouvre. */
    .bdf-hero__inner {
        padding-bottom: calc(var(--space-8) + var(--bdf-hero-overlap));
    }
    .bdf-hippocamp-section {
        margin-block-start: calc(-1 * var(--bdf-hero-overlap, 140px)) !important;
        position: relative;
        z-index: 2;
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    }
}

/* Écart assumé 3/3 — compression mobile.
   Pas de chevauchement sous 768px (le widget de réservation est trop haut pour flotter) :
   le hero prend la place restante sous le header compact (~55px), le widget faisant 438px.
   Typographie réduite, sinon le texte impose sa hauteur et repousse le formulaire.
   Boutons pleine largeur empilés, conformément à l'aperçu mobile du ui_kit. */
@media (max-width: 767px) {
    .bdf-hero {
        min-height: clamp(220px, calc(100svh - 60px - 438px), 420px);
    }
    .bdf-hero__inner {
        padding: var(--space-5) var(--space-4) var(--space-6);
    }
    .bdf-hero__eyebrow {
        font-size: var(--text-lg);
    }
    .bdf-hero__title {
        font-size: 2.2rem;
    }
    .bdf-hero__sub {
        font-size: 1rem;
    }
    .bdf-hero__cta {
        flex-direction: column;
        align-items: stretch;
    }
    .bdf-hero__cta .bdf-btn {
        font-size: var(--text-md);
    }
}

/* ========================================
   Corps de contenu éditorial (refresh 2026-07 — ui_kit page-editoriale)
   Liens inline et style de liste « feuille » (register_block_style, inc/setup.php)
   ======================================== */
.entry-content a:not(.bdf-btn) {
    /* La couleur reste --text-link (--green-600) contre --green-700 au ui_kit : écart
       assumé et documenté par la 9.5, non repris ici (contraste 4,57:1, AA). Portée
       inchangée depuis la 9.5 : tous les gabarits. */
    color: var(--text-link);
}
.entry-content a:not(.bdf-btn):hover {
    color: var(--text-link-hover);
}
/* Style de bloc natif "Feuille" pour core/list (is-style-feuille) */
.entry-content ul.is-style-feuille {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2em;
}
.entry-content ul.is-style-feuille > li {
    position: relative;
    padding: 4px 0 4px 26px;
}
.entry-content ul.is-style-feuille > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green-400);
}

/* Style de bloc natif "Filet dessiné" pour core/separator (is-style-dessine) —
   inspiré visuellement de .bdf-underline (primitives.css:118-119) sans le réutiliser
   tel quel (celui-ci est pensé comme soulignement de titre, pas séparateur autonome). */
.wp-block-separator.is-style-dessine {
    border: 0;
    height: 10px;
    margin: var(--space-6) auto;
    max-width: 220px;
    background: radial-gradient(circle at 12px 5px, var(--green-300) 3px, transparent 3.5px) 0 0/24px 10px repeat-x;
    opacity: .8;
}

/* ========================================
   Bloc rassurance — colonnes alignées sur les titres
   ======================================== */

/* Zone picto : hauteur fixe, picto collé en bas */
.bdf-rassurance .bdf-picto {
    height: 80px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 0.5rem;
}

/* Titres et descriptions : flush */
.bdf-rassurance h4 {
    margin-top: 0;
    margin-bottom: 0.25rem;
}
.bdf-rassurance p {
    margin-top: 0;
}

/* Pictos SVG — style dessin enfantin */
.bdf-picto svg {
    width: 60px;
    height: 60px;
}
.bdf-picto svg {
    width: 60px;
    height: 60px;
}
.bdf-picto--vert-olive { color: var(--wp--preset--color--vert-olive); }
.bdf-picto--orange     { color: var(--wp--preset--color--anthracite); }
.bdf-picto--gris-bleu  { color: var(--wp--preset--color--gris-bleu); }

/* PNG blanc → anthracite via inversion */
.bdf-picto-img {
    display: block;
    margin: 0 auto 0.75rem;
    filter: invert(1) brightness(0.25);
}

/* Story 9.12 : les deux règles `.bdf-carte-gite:focus-within{outline:… orange}` (dupliquées ici
   et ~70 lignes plus bas, la seconde l'emportant) sont retirées. L'orange #f6bf27 ne tenait que
   1,60:1 sur --paper-50 (échec WCAG 1.4.11) et faisait une TROISIÈME couleur d'anneau sur le
   site, contre l'AC2. L'article porte déjà tabindex="0" (patterns/grille-gites.php) : l'anneau
   global du thème prend le relais avec la bonne couleur. Effet de bord bienvenu — :focus-within
   se déclenchait aussi à la souris, ce que :focus-visible ne fait pas.

   Story 9.18 : le premier bloc `.bdf-carte-gite` / `:hover` qui vivait ici est supprimé — il
   faisait doublon avec celui de la section « Grille des gîtes » plus bas, avec des valeurs
   DIFFÉRENTES (translateY -2px contre -3px, ombre 4/16 contre 6/20). Seul le second
   s'appliquait, la recette mesurant bien -3px au survol. Un seul jeu de règles subsiste. */

/* ========================================
   Fiche gîte — CSS déplacé dans fiche-gite.css (story 9.6)
   Anciennes règles pré-refresh supprimées : .bdf-gite-badges/.bdf-badge*
   (bloc mort, collisionnait silencieusement avec la primitive .bdf-badge
   de primitives.css — jamais consommé, bdf_gite_badge_shortcode() n'était
   appelé nulle part), .bdf-gite-gallery (classe orpheline, jamais appliquée),
   .bdf-gite-nav, .bdf-gite-infos*, .bdf-cuisine-2cols, .bdf-bandeau-cta-mobile :
   tout restylé et déplacé dans fiche-gite.css (chargé uniquement sur les
   fiches gîte).
   .bdf-gite-hero également supprimé (code review 9.13) : la 9.6 l'avait conservé
   ici parce que templates/page-aux-alentours.html le consommait encore, ce qui
   n'est plus le cas — la 9.13 remplace ce wp:post-featured-image par le hero
   éditorial (bloc Cover). Plus aucun consommateur dans templates/, parts/ ni
   patterns/ ; malgré son nom, single-gite.html ne l'utilisait pas.
   ======================================== */

/* Grille de l'aperçu d'accueil — mêmes paliers que la page Nos gîtes (story 9.18) */
.bdf-apercu-gites__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--30);
}
@media (min-width: 768px) {
    .bdf-apercu-gites__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Carte gîte — lien pleine carte */
.bdf-carte-gite {
    border-radius: 8px;
    overflow: hidden;
    background: var(--wp--preset--color--blanc);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    /* Story 9.18 : sans cette hauteur, la carte ne remplit pas sa cellule de grille et le bas
       des cartes se désaligne dès que les extraits n'ont pas le même nombre de lignes — c'est
       ce que la recette a mesuré sur l'accueil (413/438/438 px à 1440). */
    height: 100%;
}
.bdf-carte-gite:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transform: translateY(-3px);
}
/* (règle `:focus-within` orange retirée par la story 9.12 — voir la note plus haut) */
.bdf-carte-gite__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    min-height: 44px;
}

/* Image */
.bdf-carte-gite__image {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.bdf-carte-gite__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bdf-carte-gite__placeholder {
    width: 100%;
    height: 100%;
    background: var(--wp--preset--color--gris-clair);
}

/* Pastille capacité */
.bdf-carte-gite__pastille {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: rgba(255,255,255,0.95);
    color: var(--wp--preset--color--anthracite);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
}

/* Badge éco */
.bdf-carte-gite__eco {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--wp--preset--color--vert-olive);
    color: var(--wp--preset--color--anthracite);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
}

/* Contenu */
.bdf-carte-gite__content {
    padding: var(--wp--preset--spacing--20);
    /* Occupe la hauteur restante pour que le CTA se pose en bas de toutes les cartes. */
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bdf-carte-gite__title {
    /* Story 9.18 : était en patrick-hand-sc, police d'avant le refresh. Le rendu actuel de
       l'accueil sort en Gochi Hand (titres de blocs core) — garder patrick-hand-sc ici aurait
       changé la police des titres de carte en réactivant ce markup. */
    font-family: var(--wp--preset--font-family--gochi-hand);
    font-size: var(--wp--preset--font-size--large);
    margin: 0 0 0.25rem;
    line-height: 1.3;
}
.bdf-carte-gite__extrait {
    margin: 0 0 var(--wp--preset--spacing--20);
    font-size: var(--wp--preset--font-size--medium);
}
.bdf-carte-gite__prix {
    font-size: var(--wp--preset--font-size--medium);
    margin: 0 0 0.5rem;
    color: var(--wp--preset--color--anthracite);
}
.bdf-carte-gite__prix strong {
    font-size: 1.25rem;
}
.bdf-carte-gite__cta {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    color: var(--wp--preset--color--anthracite);
    transition: color 0.15s;
    /* Pousse le CTA en pied de carte, quelle que soit la longueur de l'extrait. */
    margin-top: auto;
}
.bdf-carte-gite:hover .bdf-carte-gite__cta {
    /* Story 9.18 : était `--orange` #f6bf27, soit 1,60:1 sur blanc — la valeur même que la
       9.12 avait écartée pour l'anneau de focus (échec WCAG 1.4.11). Avec un lien qui
       enveloppe désormais toute la carte, c'est `rouge-grange` (#c03e0b, 5,7:1), la couleur
       d'action déjà portée par le CTA du hero. */
    color: var(--wp--preset--color--rouge-grange);
    text-decoration: underline;
}

/* --- Sélecteur de langue — 3 drapeaux côte à côte --- */
/* Conteneur nommé .bdf-lang comme dans le ui_kit. Le séparateur vertical qu'il y porte
   est ici sur .bdf-flags (ci-dessous), qui joue le même rôle : ne pas le doubler. */
.bdf-lang {
    display: flex;
    align-items: center;
}

/* Widget GTranslate : invisible mais dans le DOM pour que load_tlib() se déclenche */
.bdf-lang .gtranslate_wrapper {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Conteneur des drapeaux (refresh 2026-07 — séparateur ui_kit) */
.bdf-flags {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: var(--space-4);
    border-left: var(--border-w) solid var(--paper-300);
}

/* Dans le panneau escamotable, les drapeaux ouvrent une ligne : le séparateur vertical
   qui les détache du menu secondaire en desktop n'y a plus de sens.
   Déclaré ici et non dans la section header : les media queries n'ajoutent aucune
   spécificité, une neutralisation placée plus haut dans le fichier se ferait écraser par
   la règle ci-dessus. */
@media (max-width: 1080px) {
    .bdf-flags {
        padding-left: 0;
        border-left: 0;
    }
}

/* Chaque drapeau */
.bdf-flag {
    display: inline-flex;
    align-items: center;
    opacity: .55;
    border-radius: 3px;
    border: 1.5px solid var(--paper-300);
    transition: opacity var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
    overflow: hidden;
    line-height: 0;
}

.bdf-flag img {
    display: block;
    border-radius: 2px;
}

/* Langue active */
.bdf-flag--active {
    opacity: 1;
    border-color: var(--green-400);
    box-shadow: 0 0 0 2px var(--green-400);
}

/* Hover sur les inactifs */
.bdf-flag:not(.bdf-flag--active):hover {
    opacity: 1;
    border-color: var(--green-400);
}

/* La règle `.bdf-lang { order: 10 }` qui vivait ici servait la disposition verticale de
   `.bdf-header-actions`, disparu avec le header en blocs. La 9.9 l'a renommée
   (`.bdf-lang-switcher` → `.bdf-lang`) au lieu de la supprimer : elle s'appliquait donc à un
   enfant flex de `.bdfhdr__top` et inversait drapeaux et « Réserver » à 390px, un palier de
   recette. Supprimée. */

/* Hippocamp: exclude from GTranslate */
.notranslate {
    transform: none !important;
}

/* ========================================
   Section « Autour du Bois de Faral » — carte + liens
   ======================================== */
.bdf-alentours-chapo {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--wp--preset--spacing--40);
    font-size: var(--text-md);
}

.bdf-alentours-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--40);
}
@media (min-width: 900px) {
    .bdf-alentours-grille {
        /* 1.55fr comme le ui_kit (.grid) : à 1.35fr la carte perdait 39 px au profit
           de la colonne de liens, alors qu'elle est l'élément principal du bloc. */
        grid-template-columns: 1.55fr 1fr;
        align-items: start;
    }
}

/* --- La carte --- */
.bdf-carte-zone {
    position: relative;
}
.bdf-carte {
    /* Proportion du ui_kit (.map) plutôt qu'une hauteur fixe : à 460 px constants, le
       rapport largeur/hauteur dérivait de 1,05 (390 px) à 1,60 (768 px) au lieu du
       1,43 constant du mockup — carte quasi carrée sur mobile, trop haute à 1024.
       min-height : sous ~430 px de large, la proportion seule donnerait moins de
       250 px, trop bas pour une carte réellement manipulable au doigt. */
    aspect-ratio: 800 / 560;
    min-height: 300px;
    overflow: hidden;
    /* Coins du haut redéclarés ici plutôt que délégués au seul .bdf-card parent : sur
       WebKit, les panes Leaflet en translate3d ignorent le clip arrondi d'un ancêtre. */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    /* !important : leaflet.css pose .leaflet-container{background:#ddd} à spécificité
       égale et s'injecte après custom.css — sans lui ce fond n'est jamais visible. */
    background:
        radial-gradient(120% 90% at 20% 15%, color-mix(in srgb, var(--green-200) 60%, var(--paper-50)) 0%, transparent 55%),
        radial-gradient(120% 90% at 85% 80%, color-mix(in srgb, var(--green-300) 45%, var(--paper-50)) 0%, transparent 50%),
        var(--paper-100) !important;
    z-index: 0; /* garde les contrôles Leaflet sous le header sticky */
}
/* Fond affiché avant l'activation de Leaflet (déclenchée par IntersectionObserver, sans
   clic du visiteur). Aucune requête tierce n'est émise avant ce moment ; ensuite les
   tuiles transitent par le relais Nginx /tuiles/, jamais par openstreetmap.org. */
.bdf-carte-voile {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: var(--wp--preset--spacing--30);
    text-align: center;
    background: linear-gradient(160deg, var(--green-200), var(--green-300));
    color: var(--ink-900);
}
#bdf-carte.est-active ~ .bdf-carte-voile {
    display: none;
}
#bdf-carte.est-en-chargement ~ .bdf-carte-voile {
    opacity: 0.6;
}
.bdf-carte-voile-titre {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
}
.bdf-carte-voile-texte {
    margin: 0;
    max-width: 420px;
    font-size: var(--wp--preset--font-size--small);
    opacity: 0.85;
}

/* --- Marqueurs (aussi utilisés dans la légende) --- */
.bdf-marqueur {
    display: inline-block;
    width: 22px;
    height: 22px;
    /* border-box : les tailles ci-dessus doivent correspondre exactement à l'iconSize
       des divIcon (carte-alentours.js), sinon la bordure décale le point d'ancrage. */
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid var(--paper-0);
    box-shadow: var(--shadow-sm);
    background: var(--ochre-500);
}
.bdf-marqueur--village {
    background: var(--green-500);
}
.bdf-marqueur--site {
    background: var(--ochre-500);
}
.bdf-marqueur--faral {
    width: 34px;
    height: 34px;
    border: 3px solid var(--paper-0);
    background: var(--red-500);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--red-500) 25%, transparent), var(--shadow-md);
}

/* --- Légende --- */
.bdf-carte-legende {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--20);
    margin: var(--wp--preset--spacing--20) 0 0;
    padding: 14px 18px;
    list-style: none;
    font-size: var(--text-sm);
}
.bdf-carte-legende li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.bdf-carte-legende .bdf-marqueur {
    width: 14px;
    height: 14px;
    border-width: 1px;
}
.bdf-carte-legende .bdf-marqueur--faral {
    width: 18px;
    height: 18px;
    /* Le halo de 4px du marqueur de carte déborderait sur le libellé voisin. */
    box-shadow: var(--shadow-sm);
}
.bdf-legende-riviere {
    display: inline-block;
    width: 20px;
    height: 4px;
    border-radius: 2px;
    background: #2f7f9e;
}

/* --- Colonne de liens --- */
.bdf-alentours-liens h3 {
    margin: 0 0 0.5rem;
    /* --text-lg et non le --text-xl du ui_kit : le mockup a un h2 de section à 2,75 rem,
       le thème l'a à 1,5 rem (x-large de theme.json). Reprendre --text-xl ici mettrait
       ces h3 à la taille exacte de leur propre h2 — même arbitrage que le surtitre des
       témoignages plus bas dans ce fichier. */
    font-size: var(--text-lg);
    color: var(--green-700);
}
.bdf-alentours-liens h3 + ul {
    margin: 0 0 var(--wp--preset--spacing--30);
    padding: 0;
    list-style: none;
}
.bdf-alentours-liens li {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: var(--text-sm);
}
.bdf-alentours-liens a {
    color: var(--ink-900);
    font-weight: 600;
    text-decoration: none;
}
.bdf-alentours-liens a:hover {
    color: var(--green-600);
}
.bdf-alentours-tout a {
    color: var(--green-700);
    text-decoration: underline;
}

/* --- Popups Leaflet --- */
.bdf-popup-nom {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink-900);
}
.bdf-popup-temps {
    display: inline-block;
    margin: 6px 0;
    background: var(--green-200);
    color: var(--green-800);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
    /* font-family explicite : sans elle, héritage du Helvetica de .leaflet-container. */
    font-family: var(--font-body);
    font-weight: var(--weight-extrabold);
    font-size: var(--text-2xs);
}
.bdf-popup-desc {
    margin: 0.5rem 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.bdf-popup-lien {
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    /* La couleur est posée plus bas, scopée : .leaflet-container a la battrait ici. */
}

/* --- Conteneurs Leaflet natifs (popups + contrôles) ---
   leaflet.css est injecté en JS après custom.css : à spécificité égale il gagne la
   cascade. On repasse devant en préfixant par .bdf-carte-zone (0,2,x contre 0,1,x)
   plutôt qu'avec !important, qui écraserait aussi les états natifs (:hover, :focus,
   .leaflet-disabled) et la variante tactile .leaflet-touch. Corollaire voulu : sur
   tactile, .leaflet-touch .leaflet-bar{box-shadow:none} reste gagnant et l'ombre ne
   se cumule pas à la bordure que Leaflet pose à sa place. */
.bdf-carte-zone .leaflet-popup-content-wrapper,
.bdf-carte-zone .leaflet-popup-tip {
    background: var(--surface-card);
    box-shadow: var(--shadow-lg);
}
.bdf-carte-zone .leaflet-popup-content-wrapper {
    border-radius: var(--radius-md);
}
.bdf-carte-zone .leaflet-control-zoom,
.bdf-carte-zone .leaflet-bar {
    box-shadow: var(--shadow-sm);
}
.bdf-carte-zone .leaflet-bar a {
    background: var(--paper-0);
    color: var(--ink-900);
}
.bdf-carte-zone .leaflet-bar a:hover,
.bdf-carte-zone .leaflet-bar a:focus {
    background: var(--paper-100);
}
.bdf-carte-zone .leaflet-bar a.leaflet-disabled {
    background: var(--paper-100);
    color: var(--ink-300);
}
.bdf-carte-zone .leaflet-control-attribution {
    background: color-mix(in srgb, var(--paper-0) 82%, transparent);
    /* font-family et font-size explicites : sans elles, héritage du Helvetica 12px de
       .leaflet-container, qui rendait l'attribution deux fois plus large que dans le
       ui_kit — jusqu'à 56 % de la carte sur mobile, par-dessus les marqueurs.
       10px suit le ui_kit (.map__attr) ; aucun token ne descend sous --text-2xs. */
    font-family: var(--font-body);
    font-size: 10px;
    /* --ink-700 et non le --ink-500 du ui_kit : le mockup pose son attribution sur un
       dégradé clair uniforme, ici c'est sur des tuiles OSM arbitraires vues par 18 % de
       transparence. Mesuré sur les tuiles réelles, --ink-500 tombe à 3,86:1 dans les
       zones boisées — sous AA. --ink-700 tient 6,64:1 au pire cas en restant discret. */
    color: var(--ink-700);
    border-top-left-radius: 6px;
}
/* .leaflet-container a (0,1,1) bat .bdf-popup-lien (0,1,0) et impose son bleu #0078A8
   aux liens de popup comme à l'attribution : les deux se reprennent ici en 0,2,1. */
.bdf-carte-zone a.bdf-popup-lien,
.bdf-carte-zone .leaflet-control-attribution a {
    color: var(--green-700);
}
/* Même piège de cascade sur la marge : .leaflet-popup-content p (0,1,1) impose son
   1.3em et écrasait le 0.5rem de .bdf-popup-desc (0,1,0), d'où 16,9 px mesurés au
   lieu de 8. Repris en 0,2,1, aux valeurs du ui_kit (.popup__desc). */
.bdf-carte-zone p.bdf-popup-desc {
    margin: 4px 0 8px;
}

/* ========================================
   Section « Que disent nos vacanciers ? » — avis clients
   Réf. : design-system/refresh-2026-07/ui_kits/section-avis/index.html
   ======================================== */

/* Bande verte très douce : sépare la section de « Aux alentours » (gris-clair)
   qui la suit, sans ajouter de 3e couleur de fond dans la page. */
.bdf-temoignages {
    background: var(--green-50);
}
.bdf-temoignages-tete {
    text-align: center;
    margin-bottom: var(--space-6);
}
/* text-lg et non text-xl comme dans le ui_kit : le h2 du thème est à 1,5 rem
   (x-large theme.json) et non aux 2,75 rem du mockup — un surtitre à 1,5 rem
   passerait devant son propre titre. */
.bdf-temoignages-surtitre {
    margin: 0 0 2px;
    font-family: var(--font-hand);
    font-size: var(--text-lg);
    /* green-700 et non le green-600 du surtitre standard : sur la bande green-50,
       green-600 retombe à 4,44:1 — sous les 4,5:1 exigés à cette taille. */
    color: var(--green-700);
}
/* Trait dessiné sous le titre — reprise de .bdf-section-title, qui attend un span
   interne que le h2 de section n'a pas. */
.bdf-temoignages-titre {
    position: relative;
    display: inline-block;
    margin: 0;
}
.bdf-temoignages-titre::after {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: -0.16em;
    height: 7px;
    background: var(--green-300);
    border-radius: var(--radius-pill);
    transform: rotate(-0.7deg);
}

/* --- Étoiles dessinées (rangée pleine rognée par-dessus la rangée vide) --- */
/* width: max-content — sans quoi le span s'étire sur toute la largeur de la carte
   en flex column, et le pourcentage de remplissage porte sur la carte, pas sur les
   étoiles : une note de 4,5 s'afficherait pleine. */
.bdf-etoiles {
    position: relative;
    display: inline-block;
    width: max-content;
    line-height: 0;
}
.bdf-etoiles-rang {
    display: flex;
    gap: 2px;
}
/* flex: none — sinon la rangée pleine, contrainte en largeur, comprime les étoiles
   au lieu de les rogner. */
.bdf-etoiles-rang svg {
    flex: none;
    display: block;
    width: 1em;
    height: 1em;
}
.bdf-etoiles-fond svg {
    fill: var(--paper-300);
}
.bdf-etoiles-plein {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.bdf-etoiles-plein svg {
    fill: var(--ochre-400);
    /* liseré encre : l'ocre seul manque de contraste sur fond clair */
    stroke: var(--ink-900);
    stroke-width: 0.9;
    stroke-opacity: 0.3;
}

/* --- Notes globales des plateformes : une seule carte, une colonne par plateforme --- */
.bdf-temoignages-notes {
    box-sizing: border-box; /* la carte est bornée par max-width : padding compris */
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: 0 auto var(--space-7);
    gap: var(--space-6);
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-5) var(--space-6);
}
.bdf-note-plateforme {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 210px; /* colonnes de même largeur quel que soit le libellé */
}
.bdf-note-plateforme + .bdf-note-plateforme {
    border-left: var(--border-w) solid var(--paper-200);
    padding-left: var(--space-6);
}
.bdf-note-plateforme-valeur {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--ink-900);
}
.bdf-note-plateforme-valeur small {
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--ink-300);
}
.bdf-note-plateforme .bdf-etoiles {
    font-size: 22px;
}
.bdf-note-plateforme-source {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.bdf-note-plateforme-source b {
    color: var(--ink-900);
    font-weight: var(--weight-extrabold);
}
.bdf-note-plateforme-lien {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--green-700);
}

/* --- Extraits d'avis : petits papiers blancs légèrement de travers --- */
.bdf-temoignages-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
}
.bdf-temoignage {
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-5) var(--space-5) var(--space-4);
    transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
/* Léger désalignement « épinglé au mur », redressé au survol. */
.bdf-temoignages-grille > :nth-child(3n+1) {
    transform: rotate(-0.7deg);
}
.bdf-temoignages-grille > :nth-child(3n+2) {
    transform: rotate(0.45deg);
}
.bdf-temoignages-grille > :nth-child(3n) {
    transform: rotate(-0.35deg);
}
.bdf-temoignage:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: var(--shadow-lg);
}
@media (prefers-reduced-motion: reduce) {
    .bdf-temoignages-grille > *,
    .bdf-temoignage:hover {
        transform: none;
    }
}
/* Guillemet dessiné en filigrane */
.bdf-temoignage::before {
    content: "\201C";
    position: absolute;
    top: -6px;
    right: 16px;
    font-family: var(--font-display);
    font-size: 78px;
    line-height: 1;
    color: var(--green-200);
    pointer-events: none;
}
.bdf-temoignage .bdf-etoiles {
    font-size: 18px;
}
.bdf-temoignage-titre {
    margin: 0;
    padding-right: 42px; /* dégage le guillemet */
    font-family: var(--font-display);
    font-weight: var(--weight-normal);
    font-size: var(--text-lg);
    line-height: 1.1;
    color: var(--green-800);
}
.bdf-temoignage-texte {
    margin: 0;
    flex: 1 1 auto;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--ink-700);
}
.bdf-temoignage-source {
    margin: 4px 0 0;
    padding-top: 10px;
    border-top: var(--border-w) solid var(--paper-200);
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.bdf-temoignage-source a {
    color: var(--green-700);
    font-weight: var(--weight-bold);
}
.bdf-temoignages-mention {
    max-width: 62ch;
    margin: var(--space-6) auto 0;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

@media (max-width: 700px) {
    .bdf-temoignages-notes {
        flex-direction: column;
        /* annule le width:max-content : en colonne il ne vaut plus que la largeur
           d'une plateforme (274 px à 390), et la carte se désaligne de la grille
           d'avis en dessous. Le ui_kit la passe en display:grid, donc pleine largeur. */
        width: auto;
    }
    .bdf-note-plateforme + .bdf-note-plateforme {
        border-left: 0;
        padding-left: 0;
        border-top: var(--border-w) solid var(--paper-200);
        padding-top: var(--space-5);
    }
}

/* ========================================
   Bandeau « Qui sommes-nous ? » + contact
   (au-dessus du footer, sur toutes les pages)
   ======================================== */
.bdf-presentation-contact {
    background: var(--green-800);
    border-top: 1px solid color-mix(in srgb, var(--paper-50) 16%, transparent);
}

/* --- Colonne gauche : présentation des propriétaires --- */
.bdf-presentation-picto {
    display: block;
    width: 110px;
    height: 110px;
    margin: 0 0 var(--wp--preset--spacing--20);
}
.bdf-presentation-titre {
    margin: 0 0 0.75rem;
    font-family: var(--font-hand);
    font-size: var(--wp--preset--font-size--x-large);
    line-height: 1.2;
}
.bdf-presentation-texte {
    max-width: 46ch;
}
.bdf-presentation-texte p {
    margin: 0 0 1rem;
}
.bdf-presentation-texte p:last-child {
    margin-bottom: 0;
}

/* --- Colonne droite : formulaire de contact, en carte claire sur le fond
   sombre .bdf-on-dark du bandeau. Tous les sélecteurs qui doivent regagner
   une couleur sombre sur un h1-h4/p ciblent au moins 2 classes : une seule
   classe (0,1,0) perd contre .bdf-on-dark h2/p (0,1,1) quel que soit l'ordre
   des feuilles (voir Dev Notes story 9.3). --- */
.bdf-presentation-contact .bdf-contact {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
}
.bdf-presentation-contact .bdf-contact-titre {
    margin: 0 0 1rem;
    font-family: var(--font-hand);
    font-size: var(--wp--preset--font-size--large);
    color: var(--ink-900);
    line-height: 1.2;
}
.bdf-presentation-contact .bdf-contact-form .bdf-champ {
    margin: 0 0 0.9rem;
}
.bdf-presentation-contact .bdf-contact-form label {
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--wp--preset--font-family--josefin-sans);
    font-weight: 600;
    font-size: var(--wp--preset--font-size--small);
    color: var(--ink-900);
}
.bdf-requis {
    color: var(--wp--preset--color--orange);
}
.bdf-presentation-contact .bdf-contact-form input[type="text"],
.bdf-presentation-contact .bdf-contact-form input[type="email"],
.bdf-presentation-contact .bdf-contact-form input[type="tel"],
.bdf-presentation-contact .bdf-contact-form textarea {
    width: 100%;
    padding: 11px 14px;
    border: var(--border-w-bold) solid var(--paper-300);
    border-radius: var(--radius-md);
    background: var(--paper-0);
    font-family: inherit;
    font-size: var(--text-md);
    color: var(--ink-900);
    box-sizing: border-box;
    transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.bdf-presentation-contact .bdf-contact-form input:focus,
.bdf-presentation-contact .bdf-contact-form textarea:focus {
    outline: none;
    border-color: var(--green-500);
    box-shadow: 0 0 0 3px var(--green-100);
}
.bdf-presentation-contact .bdf-contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

/* Champ leurre anti-robot : masqué hors écran (pas display:none, ignoré par certains bots) */
.bdf-champ-leurre {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.bdf-presentation-contact .bdf-contact-rgpd {
    margin: 0 0 1rem;
    font-size: var(--wp--preset--font-size--small);
    color: var(--text-muted);
}
.bdf-presentation-contact .bdf-contact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    padding: 11px 24px;
    border: var(--border-w-bold) solid var(--red-600);
    border-radius: var(--radius-pill);
    background: var(--red-500);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: var(--text-md);
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(192, 62, 11, .24);
    transition: background var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-bounce);
}
.bdf-presentation-contact .bdf-contact-submit:hover {
    background: var(--red-600);
    color: #fff;
    transform: translateY(-1px);
}

/* Message de confirmation / erreur d'envoi (teintes ok/erreur déjà lisibles sur fond clair) */
.bdf-presentation-contact .bdf-contact-message {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--wp--preset--font-size--small);
}
.bdf-presentation-contact .bdf-contact-message--ok {
    background: rgba(196, 200, 133, 0.35);
    border-left: 4px solid var(--wp--preset--color--vert-olive);
    color: #3c4a1f;
}
.bdf-presentation-contact .bdf-contact-message--erreur {
    background: rgba(214, 79, 79, 0.12);
    border-left: 4px solid #d64f4f;
    color: #8a2b2b;
}