/**
 * Bois de Faral — Styles des pages intérieures (hors accueil).
 * Chargé uniquement quand ! is_front_page() (voir inc/scripts.php).
 * Sections déplacées telles quelles depuis custom.css (story 4.9) —
 * split mécanique par section, aucune règle réécrite.
 */

/* ========================================
   Breadcrumb (Rank Math)
   ======================================== */
.bdf-breadcrumb {
    padding: var(--wp--preset--spacing--10) 0;
    font-size: var(--wp--preset--font-size--small);
    color: var(--text-muted);
}
.bdf-breadcrumb a {
    color: var(--text-link);
    text-decoration: none;
}
.bdf-breadcrumb a:hover {
    color: var(--text-link-hover);
}

/* ========================================
   Page 404
   ======================================== */
.bdf-404-photo {
    border-radius: 8px;
    max-height: 400px;
    object-fit: cover;
    width: 100%;
}

/* ========================================
   Hero éditorial (refresh 2026-07 — ui_kit page-editoriale)
   Gabarit générique des pages de contenu long (templates/page.html) — distinct de
   .bdf-hero (hero d'accueil, spécifique à cette page, cf. Dev Notes story 9.5 :
   ne pas réutiliser/étendre celui-ci).
   ======================================== */
.bdf-hero-editorial {
    position: relative;
    background-color: var(--ink-900); /* repli neutre si la page n'a pas d'image mise en avant (AC2) */
    background-size: cover;
    background-position: center;
}
/* Dégradé de lisibilité posé sur le calque .wp-block-cover__background natif (déjà en
   position:absolute;inset:0 via le CSS core du bloc) plutôt qu'un ::before dédié comme
   .bdf-hero : ici useFeaturedImage peut insérer une vraie balise <img> entre ce calque
   et .wp-block-cover__inner-container, et le CSS core du bloc place alors cette image
   en z-index:0 sous ce calque (z-index:1, à égalité avec le contenu) — l'empilement
   photo → dégradé → texte est donc déjà correct sans z-index à ajouter ici. */
.bdf-hero-editorial .wp-block-cover__background {
    opacity: 1;
    background: linear-gradient(180deg, rgba(50,47,42,.15) 0%, rgba(50,47,42,.72) 100%);
}
/* Le bloc Cover pose padding:1em (16px) sur LUI-MÊME (wp-includes/blocks/cover/style.min.css,
   vérifié sur le CSS servi par dev). Avec is-position-bottom-left (align-items:flex-end),
   l'inner-container s'arrête donc déjà à 16px du bord bas : c'est exactement la source des
   « 16px sous le titre » que l'AC8 constate. Un padding vertical posé sur l'inner-container
   s'AJOUTE à ces 16px (32 → 48px rendus, écart au ui_kit inversé de -16 à +16px) — d'où la
   neutralisation ci-dessous, qui rend à l'inner-container le contrôle exclusif de son padding,
   comme dans le ui_kit (.ehero sans padding, .ehero__in avec). Story 9.13, code review. */
.bdf-hero-editorial {
    padding: 0;
}
.bdf-hero-editorial .wp-block-cover__inner-container {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    /* var(--space-6) vertical (32px) conforme à .ehero__in du ui_kit — story 9.13 (AC8). */
    padding: var(--space-6) var(--space-5);
}
.bdf-hero-editorial .wp-block-post-title {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.05;
    font-size: clamp(2rem, 5vw, var(--text-4xl));
    margin: 0;
    max-width: 18ch;
    text-shadow: 0 2px 4px rgba(50,47,42,.5), 0 4px 22px rgba(50,47,42,.55);
}

/* Graisse 600, conforme à .art a.inline du ui_kit (600 contre 400) — story 9.13 (AC10).
   Scopée à .bdf-prose, classe posée sur le wp:post-content des DEUX gabarits éditoriaux
   (page.html, page-aux-alentours.html) : `.entry-content` seul est la classe que
   render_block_core_post_content() pose sur TOUS les gabarits, la graisse aurait donc
   changé aussi le rendu de front-page, single et single-gite — hors périmètre (AC11).
   Arbitrage Samuel au triage de la code review. */
.bdf-prose a:not(.bdf-btn) {
    font-weight: 600;
}

/* Taille et rythme du corps éditorial, homologue de `.art` au ui_kit (17px /
   `--leading-relaxed`, contre 16px / 1.6 hérités de theme.json — mesurés en recette).

   Scopé à .bdf-prose et non porté sur le preset `medium` de theme.json, bien que ce
   preset vaille 1rem là où `--text-md` vaut 1,0625rem (dette réelle : la rampe des
   tailles n'a été qu'à moitié transcrite depuis les tokens, `small` diverge aussi,
   0,875 contre 0,9375rem). Corriger le preset ferait grandir d'1px les 43 entrées de
   la navigation du header, qui en héritent — or le méga-menu de la 9.9 est déjà juste
   en largeur, et le ui_kit veut la nav en `--text-sm` (15px), donc plus petite, pas
   plus grande. Le ui_kit lui-même scope ces valeurs à `.art`. */
.bdf-prose {
    font-size: var(--text-md);
}
.bdf-prose p {
    line-height: var(--leading-relaxed);
    /* WordPress pose 1em en haut ET en bas ; le ui_kit ne descend que (`.art p`). */
    margin-top: 0;
    margin-bottom: 1.1em;
}
/* `.art h2` / `.art h3` : marge haute franche, marge basse serrée sur le paragraphe qui
   suit. Sans ces règles c'est la feuille du navigateur qui décide, et elle met la même
   valeur des deux côtés (19,92px mesurés en recette). */
.bdf-prose h2 {
    margin-top: var(--space-6);
    margin-bottom: 12px;
}
.bdf-prose h3 {
    margin-top: var(--space-5);
    margin-bottom: 8px;
}

/* ========================================
   Bandeau CTA sticky (pages intérieures)
   ======================================== */
.bdf-bandeau-cta {
    z-index: 9998;
}

@media (max-width: 767px) {
    .bdf-bandeau-cta p {
        display: none;
    }
}

/* ========================================
   Grille des gîtes (page Nos gîtes)
   ======================================== */
.bdf-grille-gites__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--30);
}
@media (min-width: 768px) {
    .bdf-grille-gites__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .bdf-grille-gites__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   Grille tarifaire — responsive
   ======================================== */
.bdf-tarifs-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.bdf-tarifs-table table {
    min-width: 600px;
}
.bdf-tarifs-table th {
    background: var(--wp--preset--color--anthracite);
    color: var(--wp--preset--color--blanc);
    font-family: var(--wp--preset--font-family--josefin-sans);
    font-weight: 600;
    text-align: center;
    padding: 0.75rem;
}
.bdf-tarifs-table th:first-child {
    text-align: left;
}
.bdf-tarifs-table td {
    text-align: center;
    padding: 0.75rem;
    vertical-align: middle;
}
.bdf-tarifs-table td:first-child {
    text-align: left;
    font-family: var(--wp--preset--font-family--josefin-sans);
}
.bdf-tarifs-table small {
    font-size: var(--wp--preset--font-size--small);
    opacity: 0.8;
}
.bdf-tarifs-table figcaption {
    text-align: center;
    font-size: var(--wp--preset--font-size--small);
    opacity: 0.7;
    margin-top: var(--wp--preset--spacing--10);
}

/* ========================================
   Sections éditoriales (Media & Text)
   ======================================== */
.bdf-section-editoriale {
    margin-bottom: var(--wp--preset--spacing--30);
}
/* `.figure img` du ui_kit : --radius-lg et --shadow-md. Le 8px posé ici valait --radius-sm,
   soit le rayon des petits éléments, pas celui d'une photo pleine colonne. */
.bdf-section-editoriale img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* Légende d'image. La classe est posée sur le contenu en base par la migration, mais
   aucune règle ne la reprenait : les légendes tombaient en Nunito 16 anthracite alignées
   à gauche, contre Gochi Hand 20 vert centré au ui_kit (`.figure figcaption`). */
.bdf-media-caption {
    font-family: var(--font-hand);
    font-size: var(--text-lg);
    color: var(--green-600);
    text-align: center;
    margin-top: 8px;
}

/* Un media-text est un bloc à deux colonnes : enfermé dans la colonne de prose (760px)
   il tombait à 302px de texte utile par colonne, mesuré à 1440px. `max-width: none` le
   laisse remplir le <main> — 1000px, la largeur de `.ehero__in` au ui_kit. Aucune valeur
   n'est dupliquée ici : elle suit le gabarit. Le contenu en base ne porte pas `align:wide`
   (176 blocs sur 80 pages), d'où la règle CSS plutôt qu'une migration. */
.bdf-prose .wp-block-media-text {
    max-width: none;
    gap: var(--space-6);
}
/* Le cœur pose `padding: 0 8%` sur la colonne de texte (wp-includes/blocks/media-text) en
   guise de gouttière — remplacée ci-dessus par un `gap`, qui a l'avantage de disparaître
   en mode empilé : à 390px, ces 8% décalaient le texte de 28,8px vers la droite par
   rapport à l'image, mesuré en recette. */
.bdf-prose .wp-block-media-text > .wp-block-media-text__content {
    padding-left: 0;
    padding-right: 0;
}

/* Aparté en bulle (refresh 2026-07 — ui_kit page-editoriale, pattern aparte-bulle.php) */
.bdf-aparte {
    align-items: flex-start;
    gap: var(--space-4);
    margin: var(--space-6) 0;
}
.bdf-aparte .bdf-icon {
    width: 56px;
    height: 56px;
    flex: none;
}

/* Encart label (refresh 2026-07 — ui_kit page-editoriale, pattern encart-label.php)
   Classe dédiée, ne réutilise pas .bdf-card (collision connue, deferred-work.md:31) */
.bdf-label-card {
    align-items: center;
    /* .is-layout-flex impose flex-wrap:wrap (WordPress core, wp_get_layout_definitions()) ;
       le ui_kit .label-card n'a pas de flex-wrap donc vaut nowrap (valeur initiale) —
       à 390px l'icône passait sous ce wrap au-dessus du texte (182,6px de haut mesurés
       contre 116,7 au ui_kit). Cascade vérifiée (story 9.13, Dev Notes § flex-wrap) :
       custom.css charge après global-styles-inline-css et core-block-supports-inline-css,
       et gagne à spécificité égale sans !important. */
    flex-wrap: nowrap;
    /* 14px, valeur du ui_kit (.label-card) — var(--space-4) valait 16px (code review 9.13). */
    gap: 14px;
    background: var(--green-50);
    border: var(--border-w) solid var(--green-200);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin: var(--space-5) 0;
}
.bdf-label-card .bdf-icon {
    width: 56px;
    height: 56px;
    flex: none;
}
/* Colonne texte : min-width:0 obligatoire depuis le passage en flex-wrap:nowrap ci-dessus.
   Un item flex vaut min-width:auto par défaut, soit la largeur de son contenu insécable ;
   sans retour à la ligne possible, une URL ou un nom de label composé déborderait la colonne
   et provoquerait un scroll horizontal, ce que le wrap absorbait auparavant. Même garde que
   .bdf-child-card__content. Code review 9.13. */
.bdf-label-card > .wp-block-group {
    min-width: 0;
}
.bdf-label-card__title {
    color: var(--green-800);
    margin: 0;
}
.bdf-label-card__desc {
    font-size: var(--text-sm);
    color: var(--ink-700);
    margin: 2px 0 0;
}

/* CTA de fin (refresh 2026-07 — ui_kit page-editoriale, pattern cta-fin-editoriale.php)
   Distinct du bandeau CTA sticky existant (.bdf-bandeau-cta, non touché par cette story). */
.bdf-cta-fin {
    padding: var(--space-7) var(--space-5);
}
.bdf-cta-fin__title {
    color: var(--green-800);
    font-size: var(--text-2xl);
    /* Espacements explicites du ui_kit (story 9.13, AC9). Le groupe .bdf-cta-fin ne fixe
       pas de blockGap sur son bloc, l'écart de 24px partout venait donc du blockGap global
       de WordPress. Règle réellement servie (vérifiée sur dev, global-styles-inline-css) :
       `:root :where(.is-layout-constrained) > *{margin-block-start:24px;margin-block-end:0}`
       — sur `> *`, PAS sur `> * + *`, et neutralisée seulement par `> :first-child`.
       Conséquence : chaque enfant reçoit une marge HAUTE, y compris le bloc boutons ; poser
       une marge basse sur l'élément précédent ne suffit pas, les deux marges adjacentes
       fusionnent en max(). D'où le margin-block-start:0 explicite sur .wp-block-buttons
       ci-dessous. Spécificité : (0,1,0) de part et d'autre, custom.css charge après et gagne. */
    margin: 0 0 6px;
}
.bdf-cta-fin__tagline {
    font-family: var(--font-hand);
    font-size: var(--text-xl);
    color: var(--green-700);
    margin: 0 0 18px;
}
/* Gap entre les deux boutons : sélecteur à 2 classes, plus spécifique que la règle de
   layout flex par défaut de WordPress (0,1,0 avec ou sans :where()) quel que soit
   l'ordre de cascade — aucun doute possible sur ce point.
   margin-block-start:0 : annule le blockGap global de 24px que le bloc boutons reçoit en
   tant qu'enfant du groupe constrained (cf. commentaire de .bdf-cta-fin__title). Sans lui,
   l'écart accroche→boutons rendait 24px et non les 18px de l'AC9. */
.bdf-cta-fin .wp-block-buttons {
    margin-block-start: 0;
    gap: 14px;
}

/* ========================================
   Galeries photos
   ======================================== */
.bdf-galerie {
    margin-bottom: var(--wp--preset--spacing--40);
}
.bdf-galerie img {
    border-radius: 4px;
}

/* ========================================
   Navigation cocon — pages filles, cartes horizontales
   (refresh 2026-07 — ui_kit navigation-cocon)
   ======================================== */
.bdf-child-cards-wrap {
    margin-top: var(--space-7);
}
.bdf-child-cards-wrap .bdf-eyebrow {
    margin: 0 0 2px;
}
.bdf-child-cards-wrap__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-2xl);
    color: var(--ink-900);
    margin: 0 0 var(--space-4);
}
.bdf-child-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
/* 721px, pas 640 : le ui_kit navigation-cocon repasse en 1 colonne sous 720px
   (`@media (max-width:720px)`). À 700px, les 2 colonnes du thème mesuraient 326px,
   soit ~172px de colonne texte une fois la vignette, le chevron et les gouttières
   déduits — carte à 439px de haut (recette 9.17). */
@media (min-width: 721px) {
    .bdf-child-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}
.bdf-child-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
    border: var(--border-w) solid var(--paper-200);
    transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), border-color var(--dur-fast);
}
.bdf-child-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--green-300);
}
.bdf-child-card__link {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    text-decoration: none;
    color: inherit;
}
.bdf-child-card__image {
    width: 84px;
    height: 66px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex: none;
    box-shadow: var(--shadow-sm);
}
.bdf-child-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bdf-child-card__placeholder {
    width: 100%;
    height: 100%;
    background: var(--paper-200);
}
.bdf-child-card__content {
    flex: 1 1 auto;
    min-width: 0;
}
.bdf-child-card__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-lg);
    color: var(--ink-900);
    margin: 0 0 3px;
    line-height: 1.1;
}
.bdf-child-card__excerpt {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}
.bdf-child-card__arrow {
    margin-left: auto;
    color: var(--green-600);
    flex: none;
    align-self: center;
}

/* ========================================
   Navigation cocon — pages sœurs, pilules
   (refresh 2026-07 — ui_kit navigation-cocon)
   ======================================== */
.bdf-sibling-links {
    margin-top: var(--space-7);
}
.bdf-sibling-links .bdf-eyebrow {
    margin: 0 0 2px;
}
.bdf-sibling-links__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-2xl);
    color: var(--ink-900);
    margin: 0 0 var(--space-4);
}
.bdf-sibling-links__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.bdf-sibling-links__pill {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--ink-900);
    text-decoration: none;
    background: var(--paper-0);
    border: var(--border-w) solid var(--paper-300);
    border-radius: var(--radius-pill);
    padding: 8px 16px;
    transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
a.bdf-sibling-links__pill:hover {
    border-color: var(--green-500);
    color: var(--green-700);
}
.bdf-sibling-links__pill--current {
    background: var(--green-300);
    border-color: var(--green-500);
    color: var(--green-800);
    cursor: default;
}

/* --- Offres spéciales --- */
.bdf-offres-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--wp--preset--spacing--30);
}
.bdf-offre-card {
    background: var(--wp--preset--color--blanc);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.bdf-offre-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}
.bdf-offre-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.bdf-offre-content {
    padding: var(--wp--preset--spacing--20);
}
.bdf-offre-title {
    font-family: var(--wp--preset--font-family--patrick-hand);
    font-size: var(--wp--preset--font-size--x-large);
    margin: 0 0 0.5rem;
    color: var(--wp--preset--color--anthracite);
}
.bdf-offre-tarif {
    display: inline-block;
    background: var(--wp--preset--color--orange);
    color: var(--wp--preset--color--anthracite);
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}
.bdf-offre-texte {
    margin-bottom: 0.75rem;
    line-height: 1.6;
}
.bdf-offre-texte p {
    margin: 0;
}
.bdf-offre-dates {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 1rem;
}
.bdf-offre-cta {
    display: inline-block;
    background: var(--wp--preset--color--orange);
    color: var(--wp--preset--color--anthracite);
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.bdf-offre-cta:hover {
    opacity: 0.85;
}