qui reste alors à 0). */ .bdf-gite-gallery-anchor { display: block; height: 0; } /* wpautop peut envelopper le lien d'overlay dans un
: neutralisé pour qu'il
reste un élément de grille quoi qu'il arrive. */
.bdf-gite-gallery > p {
display: contents;
}
.bdf-gite-gallery .wp-block-image {
margin: 0;
border-radius: var(--radius-md);
overflow: hidden;
height: 100%;
}
.bdf-gite-gallery .wp-block-image:first-child {
grid-row: span 2;
border-radius: var(--radius-lg);
}
.bdf-gite-gallery .wp-block-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Au-delà des 5 cellules de la grille du mockup (cf. le `> 5` de
bdf_gite_galerie_shortcode(), calé sur la même valeur). */
.bdf-gite-gallery > figure:nth-of-type(n + 6) {
display: none;
}
/* Overlay « Voir toutes les photos » posé PAR-DESSUS la 5e photo, comme au
mockup. Les deux sont placées explicitement sur la même cellule : sans cela
l'auto-placement de la grille, qui évite les cellules déjà prises, pousserait
la 5e photo sur une rangée supplémentaire au lieu de la laisser sous le voile. */
.bdf-gite-gallery > figure:nth-of-type(5),
.bdf-gite-gallery__more {
grid-column: 3;
grid-row: 2;
}
.bdf-gite-gallery__more {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--ink-900) 50%, transparent);
color: var(--paper-0);
font-family: var(--font-body);
font-weight: 800;
font-size: var(--text-md);
text-align: center;
text-decoration: none;
padding: var(--space-3);
transition: background var(--dur-fast) var(--ease-soft);
}
.bdf-gite-gallery__more:hover,
.bdf-gite-gallery__more:focus-visible {
background: color-mix(in srgb, var(--ink-900) 68%, transparent);
color: var(--paper-0);
}
.bdf-gite-gallery__more svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.bdf-gite-gallery__fold {
display: none;
margin: calc(var(--space-3) * -1) 0 var(--space-4);
text-align: center;
font-family: var(--font-body);
font-size: var(--text-sm);
}
/* Déplié : toutes les photos, hauteur libre, overlay remplacé par le repli.
Les sélecteurs portent le même `nth-of-type` que les règles qu'ils lèvent, pour
gagner par la spécificité et non par l'ordre de déclaration. */
.bdf-gite-gallery:target {
grid-template-rows: none;
grid-auto-rows: 140px;
height: auto;
}
.bdf-gite-gallery:target > figure:nth-of-type(n + 6) {
display: block;
}
.bdf-gite-gallery:target > figure:nth-of-type(5) {
grid-column: auto;
grid-row: auto;
}
.bdf-gite-gallery:target .bdf-gite-gallery__more {
display: none;
}
.bdf-gite-gallery:target ~ .bdf-gite-gallery__fold {
display: block;
}
.bdf-gite-gallery--empty {
display: block;
height: auto;
background: var(--surface-sunk);
border-radius: var(--radius-lg);
padding: var(--space-6);
text-align: center;
color: var(--text-muted);
}
/* Bascule mobile calée sur le ui_kit (860px, et non 760 : entre 768 et 860 le
site gardait 3 colonnes de ~180px là où le mockup était déjà passé en 2). */
@media (max-width: 860px) {
.bdf-gite-gallery {
grid-template-columns: 1fr 1fr;
grid-template-rows: 220px 120px 120px;
height: auto;
}
.bdf-gite-gallery .wp-block-image:first-child {
grid-row: 1;
grid-column: 1 / 3;
}
.bdf-gite-gallery > figure:nth-of-type(5),
.bdf-gite-gallery__more {
grid-column: 2;
grid-row: 3;
}
.bdf-gite-gallery:target {
grid-template-rows: 220px;
grid-auto-rows: 120px;
}
}
/* ========================================
Titre + badges (AC6)
Le ui_kit pose le titre à --text-3xl (44px) et le cale à gauche avec ses
badges. theme.json fixe h1 à 2rem pour tout le site : la valeur propre à ce
gabarit se surcharge ici, dans la feuille chargée sur is_singular('gite')
seulement — pas dans theme.json, qui affecterait toutes les pages.
======================================== */
.wp-block-post-title {
font-size: var(--text-3xl);
line-height: var(--leading-tight);
}
.bdf-gite-badges {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: var(--space-2);
margin: 0 0 var(--space-5);
}
/* ========================================
Bloc infos 3 colonnes ([bdf_gite_infos], AC6)
Restylage aux tokens du refresh — structure/PHP inchangés (inc/shortcodes.php).
======================================== */
.bdf-gite-infos {
/* Sans border-box, `max-width: 1180px` (posé par le layout constrained) +
64px de padding donnaient une largeur rendue de 1244px : le bandeau beige
débordait de 32px de chaque côté de la grille du reste de la page
(mesuré à 1280 et 1440 le 2026-08-16). Aucun box-sizing global dans le thème. */
box-sizing: border-box;
background: var(--surface-sunk);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-6);
margin: 0 0 var(--space-6);
}
.bdf-gite-infos__cols {
display: grid;
grid-template-columns: 1fr 1.4fr 1.6fr;
gap: 0;
}
.bdf-gite-infos__col {
padding: var(--space-2) var(--space-5) var(--space-2) 0;
}
.bdf-gite-infos__col + .bdf-gite-infos__col {
padding-left: var(--space-5);
border-left: var(--border-w) solid var(--border-soft);
}
.bdf-gite-infos__col-label {
font-family: var(--font-body);
font-size: var(--text-2xs);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
font-weight: 700;
color: var(--text-muted);
margin: 0 0 var(--space-2);
line-height: 1;
}
/* Ancres (col 1) */
.bdf-gite-anchors {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.bdf-gite-anchors a {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 700;
color: var(--ink-900);
text-decoration: none;
border: var(--border-w) solid var(--ink-900);
border-radius: var(--radius-pill);
padding: 0.2rem 0.85rem;
transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
align-self: flex-start;
}
.bdf-gite-anchors a::before { content: "↓ "; }
.bdf-gite-anchors a:hover {
background: var(--ink-900);
color: var(--paper-0);
}
/* Stats (col 2) */
.bdf-gite-stats {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.bdf-gite-stat {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 700;
color: var(--ink-900);
}
.bdf-gite-stat svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--green-600); }
.bdf-gite-stat--eco { color: var(--green-700); }
.bdf-gite-stat--eco svg { color: var(--green-700); }
/* Couchages + équipements (col 3) */
.bdf-gite-infos__couchages {
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--ink-900);
margin-bottom: var(--space-2);
}
.bdf-gite-infos__couchages svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--text-muted); }
.bdf-gite-infos__equip {
display: flex;
flex-wrap: wrap;
gap: 0.3rem var(--space-4);
margin-bottom: var(--space-2);
}
.bdf-equip {
display: flex;
align-items: center;
gap: 0.35rem;
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--ink-900);
}
.bdf-equip svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--green-600); }
/* Badge PMR */
.bdf-gite-pmr {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: var(--green-700);
color: var(--paper-0);
border-radius: var(--radius-sm);
padding: 0.2rem 0.6rem;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 700;
margin-top: var(--space-1);
}
.bdf-gite-pmr svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
.bdf-gite-infos__cols { grid-template-columns: 1fr; }
.bdf-gite-infos__col { padding: var(--space-3) 0; }
.bdf-gite-infos__col + .bdf-gite-infos__col {
padding-left: 0;
border-left: none;
border-top: var(--border-w) solid var(--border-soft);
}
.bdf-gite-anchors { flex-direction: row; flex-wrap: wrap; }
}
/* ========================================
Layout 2 colonnes : corps + encart réservation (Task 4)
======================================== */
.bdf-gite-layout {
display: grid;
grid-template-columns: 1fr 350px;
gap: var(--space-7);
align-items: start;
margin-bottom: var(--space-6);
}
/* ========================================
Encart réservation ([bdf_gite_encart_reservation], AC6)
======================================== */
.bdf-gite-book {
position: sticky;
/* 114px de header sticky + 12px de respiration. Valait 96px : l'encart collé
passait sous le header, coin arrondi et bordure haute coupés
(recouvrement de 18px mesuré le 2026-08-16). */
top: 126px;
background: var(--surface-card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
border: var(--border-w) solid var(--paper-200);
padding: var(--space-5);
}
.bdf-gite-book__from {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--text-muted);
margin: 0;
}
.bdf-gite-book__price {
font-family: var(--font-body);
font-weight: 800;
font-size: var(--text-3xl);
color: var(--green-700);
line-height: 1;
margin: 2px 0 0;
}
.bdf-gite-book__unit {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--text-muted);
margin: 2px 0 var(--space-4);
}
.bdf-gite-book__specs { margin-bottom: var(--space-2); }
.bdf-gite-book__spec {
display: flex;
justify-content: space-between;
font-family: var(--font-body);
font-size: var(--text-sm);
padding: 9px 0;
border-top: var(--border-w) solid var(--paper-200);
color: var(--ink-900);
}
.bdf-gite-book__spec strong { font-weight: 800; color: var(--ink-900); }
.bdf-gite-book__cta { margin-top: var(--space-4); }
.bdf-gite-book__cta .bdf-btn { width: 100%; box-sizing: border-box; }
.bdf-gite-book__badge { margin-top: var(--space-3); text-align: center; }
/* Bascule 1 colonne. Déclarée APRÈS `.bdf-gite-book { position: sticky }` :
une media query n'ajoute aucune spécificité, et cette règle placée avant était
silencieusement écrasée — l'encart restait `sticky` à 768 et 390px (mesuré). */
@media (max-width: 860px) {
.bdf-gite-layout { grid-template-columns: 1fr; }
.bdf-gite-book { position: static; }
}
/* ========================================
Corps de contenu (wp:post-content)
======================================== */
.bdf-gite-layout__body { min-width: 0; }
/* Sections ancres dans le contenu — la réserve de défilement est globale
(`scroll-padding-top` sur `html`, custom.css), calée sur la hauteur réelle du header. */
/* ========================================
Plans dessinés ([bdf_gite_plans], AC2)
Bandeau pleine largeur sous les deux colonnes, comme le ui_kit. La section
vivait dans wp:post-content, donc confinée à la colonne de corps : 782px de
large et des plans de 379px contre 1180 / 578 au mockup (mesuré 2026-08-16).
Les figures reprennent le traitement « carte » du mockup (fond, rayon, ombre),
qui n'avait jamais été repris — seule la légende l'avait été.
======================================== */
.bdf-section-plan {
margin: var(--space-8) 0 var(--space-6);
}
.bdf-section-plan__titre {
text-align: center;
margin: 0 0 4px;
}
.bdf-section-plan__chapo {
font-family: var(--font-hand);
font-size: var(--text-xl);
color: var(--green-600);
text-align: center;
margin: 0 0 var(--space-5);
}
.bdf-section-plan__grille {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
}
.bdf-section-plan__grille > p {
display: contents;
}
.bdf-section-plan__grille .wp-block-image {
margin: 0;
background: var(--surface-card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.bdf-section-plan__grille img {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 760px) {
.bdf-section-plan__grille { grid-template-columns: 1fr; }
}
/* Repli "plan disponible à l'accueil" */
.bdf-plan-fallback {
color: var(--text-muted);
text-align: center;
}
/* Légendes des plans (wp:image caption natif) */
.bdf-section-plan figcaption.wp-element-caption {
font-family: var(--font-body);
font-weight: 800;
font-size: var(--text-sm);
color: var(--green-800);
text-align: center;
padding: var(--space-3);
background: var(--green-50);
margin: 0;
}
/* Inventaire — liste cuisine sur 2 colonnes CSS */
.bdf-cuisine-2cols {
column-count: 2;
column-gap: var(--space-5);
}
@media (max-width: 640px) {
.bdf-cuisine-2cols { column-count: 1; }
}
/* ========================================
Pop-up inventaire CSS-only, zéro JS (Task 6, AC3/AC5)
Masquée par défaut (display:none) : ne perturbe ni le flux ni le défilement
avant activation par :target. Fermeture via lien vers l'ancre neutre
#main-content déjà posée sur