/*!
Theme Name: Clos de Royaucourt
Theme URI: http://underscores.me/
Author: José Portilla
Author URI: http://underscores.me/
Description: Thème personnalisé pour  \"closderoyaucourt.com\"
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: clos-royaucourt
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Clos de Royaucourt is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
# Polices (auto-hébergées, 20/08/2026)
--------------------------------------------------------------
Fraunces et Newsreader étaient chargées depuis fonts.googleapis.com
(cdr_enqueue_fonts() dans inc/clos-royaucourt-setup.php). Décision avec Jo :
les héberger dans le thème plutôt que de dépendre d'un service distant —
évite un point de ralentissement/indisponibilité externe ET la transmission
de l'IP du visiteur à Google (sujet RGPD abordé avec Jo).

Fichiers dans fonts/, récupérés depuis les .zip Google Fonts officiels
envoyés par Jo, puis retravaillés ici (fontTools) pour ne garder que ce que
le site utilise réellement :
- Fraunces : axes SOFT et WONK retirés (jamais utilisés sur ce site, seuls
  opsz et wght le sont, comme dans l'ancien chargement Google) ;
- Newsreader : axe opsz figé à sa valeur par défaut (18) — l'ancien chargement
  Google ne demandait pas non plus de variation d'opsz pour cette police.
- Les 2 polices sont sous-ensemblées au "latin" (Basic Latin + Latin-1
  Supplement + quelques signes), qui couvre déjà tous les accents français
  (é, è, à, ç, ô...) et le œ (U+0152-0153) — pas besoin de "latin-ext"
  (essentiellement des caractères vietnamiens, inutiles ici).

Résultat : tailles quasi identiques à ce que Google servait (69 Ko / 84 Ko
pour Fraunces normal/italique, 53 Ko / 59 Ko pour Newsreader normal/italique),
mais servies depuis le thème plutôt qu'un domaine tiers.
--------------------------------------------------------------*/

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

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

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

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

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# CODE HÉRITÉ DU THÈME D'ORIGINE (Underscores + normalize.css)
--------------------------------------------------------------
De la ligne ~115 à la ligne ~1032 : squelette CSS standard fourni par le
thème de base "Underscores" (_s, underscores.me) dont ce thème dérive, plus
normalize.css (harmonisation des styles par défaut entre navigateurs). Ce
bloc n'a pas été réécrit — il correspond au sommaire "TABLE OF CONTENTS"
ci-dessus (Generic, Base, Layouts, Components, Plugins, Utilities).

Repère utile : tout le design réel du site (palette Prune & Miel,
typographie Fraunces + Newsreader, mise en page des sections, couleurs des
boutons/liens...) est défini PLUS LOIN, à partir de la section clairement
identifiée "Le Clos de Royaucourt — Palette 4 · Prune & Miel..." (ligne
~1033). Les couleurs/polices "par défaut" que vous verrez dans les
règles ci-dessous (liens bleus, police système...) ne sont donc jamais
visibles sur le site : elles sont systématiquement remplacées plus loin.
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Bibliothèque tierce intégrée telle quelle par Underscores — harmonise le
   rendu par défaut des éléments HTML (titres, listes, formulaires...) entre
   navigateurs. Ne pas modifier ici : toute personnalisation se fait plus
   loin, dans la section du projet. */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------
Styles de base par défaut (Underscores) : typographie, éléments HTML,
liens, formulaires. Sert de "filet de sécurité" — si un élément n'est
volontairement stylé nulle part ailleurs, c'est ce qui s'applique.
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
/* Couleurs par défaut d'Underscores (bleu/violet) — jamais visibles sur le
   site : tous les liens réels sont recolorés en Prune/Miel plus loin. */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------
Section vide : Underscores la prévoit dans son sommaire mais n'y met rien
par défaut (la grille de mise en page est entièrement gérée dans la
section du projet, plus loin, via .wrap et les classes par section).
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
/* CODE INACTIF : ce bloc .main-navigation cible le menu tel que généré
   par Underscores à l'origine. Le menu réel de ce thème utilise d'autres
   classes (#site-navigation, .mainnav, .menu-toggle — voir header.php et
   la section du projet plus loin dans ce fichier), donc rien ci-dessous
   ne s'applique concrètement au site. Laissé tel quel plutôt que supprimé,
   au cas où un futur composant WordPress standard s'y raccrocherait. */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
/* Classes standard des articles/pages WordPress (.sticky, .page-content...)
   — ce site n'utilise pas le blog natif de WordPress, donc peu visibles en
   pratique, mais restent inoffensives à conserver.
   MISE A JOUR 20/09/2026 (bug de la "bande claire" sous le footer, remonté
   par Jo) : ".post, .page" n'était en réalité PAS inoffensive. A l'origine,
   ce sélecteur (hérité du thème de base Underscores) vise le wrapper
   <article class="post"|"page"> généré par post_class() dans les gabarits
   classiques content.php/content-page.php — ce thème n'utilise jamais ce
   mécanisme (aucun gabarit n'appelle post_class() ni ne pose class="page"
   sur un élément, vérifié dans les 8 fichiers page-*.php/archive/single).
   Mais WordPress ajoute de lui-même la classe "page" sur <body> via
   body_class() sur toute Page statique classique (Table d'hôtes,
   Séminaires, Mentions légales...) — la règle .page{margin:0 0 1.5em}
   s'appliquait donc par accident à <body> lui-même : 1.5em à 17px (taille
   de police de body, ligne ~1107) = 25.5px de marge basse invisible (même
   fond des deux côtés) mais bien réelle pour le navigateur, qui autorisait
   alors un scroll de 25.5px au-delà du vrai bas du contenu — d'où la bande
   claire sous le footer une fois scrollé à fond. Ni l'accueil ni /chambres/
   ne portent la classe "page" sur body (accueil non rattaché à une Page
   classique, /chambres/ = archive-chambre.php, une archive), d'où le fait
   que le bug n'apparaissait que sur les "vraies" Pages.
   Corrigé en imposant un ancêtre body dans le sélecteur : la règle reste
   valide pour un éventuel futur élément .post/.page dans le contenu, tout
   en excluant définitivement <body> lui-même, quelle que soit la classe
   que WordPress lui donne. */
.sticky {
	display: block;
}

body .post,
body .page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
/* CODE INACTIF : ce site n'utilise pas les commentaires WordPress natifs
   (aucun formulaire de commentaire dans les gabarits du thème). */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
/* Une zone de widgets EST déclarée côté PHP (register_sidebar(), voir
   functions.php), mais aucun gabarit du thème n'appelle get_sidebar() —
   donc elle n'apparaît nulle part sur le site actuellement. Ces styles
   sont prêts si une zone de widgets est un jour affichée. */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
/* Légendes d'images natives WordPress (bloc "Image" avec légende). */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
/* CODE INACTIF : grille de la balise native WordPress [gallery] — les
   galeries de ce site (photos du jardin, etc.) utilisent un composant
   maison (.jardin-grid, .jardin-lightbox), pas cette fonctionnalité. */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */
/* CODE INACTIF : l'extension Jetpack n'est pas installée sur ce site —
   ce bloc ne s'applique donc jamais, laissé tel quel par Underscores. */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Texte réservé aux lecteurs d'écran (masqué visuellement, ex. "Menu" à
   côté du bouton hamburger dans header.php) — activement utilisé, ne pas
   retirer : c'est ce qui rend le site accessible aux malvoyants. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
/* Classes standard WordPress pour aligner une image/un bloc dans le
   contenu (utile si Jo insère un jour une image via l'éditeur de blocs). */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* ==========================================================================
   Le Clos de Royaucourt — Palette 4 · Prune & Miel / Police D · Fraunces + Newsreader
   --bordeaux → Prune (#4B2440) / --brass → Miel (#C08A34) / --stone → Sauge (#7C8A6E)
   ========================================================================== */
:root{
  --ivoire:#F7F2E8;
  --ivoire-deep:#EEE2C9;
  --ink:#2A231F;
  --bordeaux:#4B2440;
  --bordeaux-deep:#301730;
  --brass:#C08A34;
  --brass-line:#DBAE68;
  --stone:#7C8A6E;
  --font-display:'Fraunces',serif;
  --font-body:'Newsreader',serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font-body);color:var(--ink);background:var(--ivoire);-webkit-font-smoothing:antialiased;font-size:17px;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1280px;margin:0 auto;padding:0 44px;}
h1,h2,h3{font-family:var(--font-display);font-weight:500;color:var(--ink);}
.eyebrow{
  font-family:var(--font-body);font-size:12px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--bordeaux);font-weight:500;
}
.eyebrow.on-dark{color:var(--brass-line);}

/* fleuron divider */
.fleuron{display:flex;align-items:center;gap:14px;margin:22px 0;}
.fleuron .ln{height:1px;background:var(--brass-line);width:36px;}
.fleuron svg{stroke:var(--stone);}

/* monogram */
.monogram{
  width:56px;height:56px;border-radius:50%;border:1px solid var(--bordeaux);
  display:flex;align-items:center;justify-content:center;flex:none;position:relative;
}
.monogram::before{content:'';position:absolute;inset:4px;border:1px solid var(--bordeaux);border-radius:50%;}
.monogram .txt{font-family:var(--font-display);font-size:16px;color:var(--bordeaux);font-style:italic;}

/* buttons — refined hairline */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;font-family:var(--font-body);font-weight:500;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;border-radius:0;cursor:pointer;
  border:1px solid var(--bordeaux);background:transparent;color:var(--bordeaux);
  transition:background .2s ease,color .2s ease;
}
.btn-fill{background:var(--bordeaux);color:var(--ivoire);}
.btn-fill:hover{background:var(--bordeaux-deep);border-color:var(--bordeaux-deep);}
.btn-line:hover{background:var(--bordeaux);color:var(--ivoire);}
.btn-on-dark{border-color:var(--brass-line);color:var(--ivoire);}
.btn-on-dark:hover{background:rgba(245,241,228,.1);}

/* #page.site — calage "footer collant" en bas du viewport (bug remonté par
   Jo le 20/09/2026 : bande claire sous le footer sur les pages au contenu
   court). #page/.site (le conteneur englobant header + contenu + footer,
   header.php) n'avait jusqu'ici aucune règle CSS : sur une page courte,
   .site-footer s'arrêtait donc où le contenu s'arrêtait, laissant
   apparaître en dessous le fond ivoire de body{} jusqu'au bas réel de
   l'écran. Sur les pages longues (accueil, chambres) ce vide n'était
   jamais visible, d'où l'impression trompeuse que le correctif Tarteaucitron
   (icône repositionnée en fixed, voir tarteaucitron-custom.css) avait réglé
   le problème alors qu'il ne faisait que déplacer l'endroit où l'icône
   flotte dans ce vide.
   Patron "sticky footer" standard : #page.site prend toute la hauteur du
   viewport (min-height:100dvh, avec repli 100vh pour les anciens
   navigateurs — 100dvh s'ajuste en direct à la barre d'adresse mobile,
   contrairement à 100vh qui se cale sur sa position masquée) et devient un
   conteneur flex vertical ; .site-footer reçoit margin-top:auto pour être
   mécaniquement poussé en bas, quel que soit le nombre ou la hauteur des
   sections entre le header et lui. .site-header garde son position:sticky
   sans souci dans ce conteneur flex. Aucune hauteur ajoutée sur les pages
   déjà longues (vérifié via getComputedStyle par Jo dans sa console :
   sur une page longue, la hauteur réelle de #page suit simplement son
   contenu, largement au-dessus du min-height — comportement attendu,
   pas un bug malgré les apparences lors d'une première vérification).
   Fausse alerte du 20/09/2026 à noter : un relevé fait par erreur sur une
   page longue (~11945px de hauteur réelle) avait été pris pour un
   emballement du calcul de hauteur et le correctif avait été annulé sur
   cette base — annulation elle-même annulée une fois le relevé refait sur
   la bonne page. */
#page.site{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
}
.site-footer{
  margin-top:auto;
}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--ivoire);border-bottom:1px solid var(--brass-line);}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:22px 44px;}
.brand{display:flex;align-items:center;gap:14px;}
.brand .wordmark{font-family:var(--font-display);font-size:22px;font-weight:500;color:var(--ink);letter-spacing:.01em;white-space:nowrap;}
.brand .wordmark small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-top:2px;font-family:var(--font-body);white-space:nowrap;}
/* Menu WordPress : le conteneur <nav class="mainnav"> reçoit un <ul> généré automatiquement,
   contrairement à la maquette statique qui n'avait que des <a> directs. */
nav.mainnav{display:flex;align-items:center;}
nav.mainnav ul{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0;}
nav.mainnav a{font-size:13.5px;font-weight:500;letter-spacing:.03em;color:var(--ink);white-space:nowrap;}
nav.mainnav a:hover{color:var(--bordeaux);}

/* Bouton hamburger — masqué par défaut (desktop), affiché uniquement sous
   920px via la media query plus bas. Sélecteur .mainnav .menu-toggle
   volontairement plus spécifique que le .menu-toggle générique
   d'Underscores (règle héritée, non utilisée par notre markup) pour ne
   jamais entrer en conflit avec lui. */
.mainnav .menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:34px;
  height:34px;
  padding:0;
  background:transparent;
  border:none;
  cursor:pointer;
}
.mainnav .menu-toggle-bar{
  display:block;
  width:22px;
  height:2px;
  background:var(--ink);
  transition:transform .2s ease, opacity .2s ease;
}
/* navigation.js pose la classe .toggled sur #site-navigation (= .mainnav)
   à chaque clic sur le bouton — on anime les 3 barres en croix. */
.mainnav.toggled .menu-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mainnav.toggled .menu-toggle-bar:nth-child(2){opacity:0;}
.mainnav.toggled .menu-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.header-right{display:flex;align-items:center;gap:22px;}
/* .tel : les 2 numéros (fixe + portable) empilés en colonne plutôt que côte
   à côte, sur demande d'Aurélio (17/08/2026) — ne mange pas de largeur
   supplémentaire dans le header. */
.tel{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:12.5px;font-weight:500;color:var(--bordeaux);white-space:nowrap;line-height:1.4;}
.tel a{color:inherit;text-decoration:none;}
.tel a:hover,.tel a:focus{text-decoration:underline;}
.tel a:visited{color:inherit;}
/* Sélecteur de langue (clos_royaucourt_language_switcher(), 19/08/2026) —
   remplace l'ancien <span class="lang"><b>FR</b>...</span> statique par
   de vrais liens Polylang, même habillage visuel qu'avant (code + séparateur
   "/", langue courante soulignée). .lang a:visited/:hover/:focus/:active
   neutralisés en color:inherit : même besoin que .tel un peu plus haut,
   sans quoi les styles hérités d'Underscores (a:visited{color:#800080})
   repeindraient le code de langue en violet une fois la page visitée. */
.lang{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;}
.lang .sep{opacity:.35;}
.lang a{color:inherit;}
.lang a:visited,.lang a:hover,.lang a:focus,.lang a:active{color:inherit;}
.lang a.current{text-decoration:underline;text-underline-offset:3px;}
.lang a:not(.current):hover{opacity:.6;}
/* Copie mobile (menu hamburger) — cachée par défaut, ne réapparaît que
   dans le panneau du menu sous 940px, voir @media plus bas. */
.lang-mobile{display:none;}

/* placeholder photo blocks — à remplacer par de vraies photos/vignettes */
.ph{display:block;position:relative;overflow:hidden;background:var(--ivoire-deep);min-height:220px;}
.ph::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,#E5DAB8 0 3px,#DACB9E 3px 42px);opacity:.85;}
.ph-label{position:relative;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);background:rgba(245,241,228,.9);padding:6px 11px;margin:12px;font-weight:500;}
/* position:absolute (plutôt que relative) : une image en height:100% ne peut
   se calculer que si son parent a une hauteur EXPLICITE (height), pas juste
   un min-height — sinon le pourcentage échoue et l'image retombe sur son
   ratio naturel, laissant dépasser la texture à rayures de .ph::before en
   bas du cadre. En absolute+inset:0, l'image se cale sur la hauteur réelle
   de .ph (calculée, qu'elle vienne de height ou min-height) — fiable partout,
   y compris .room-single-hero .ph, .story .ph, etc. qui n'ont qu'un min-height. */
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

section{padding:104px 0;}

/* hero — symmetric, formal */
.hero .wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:center;padding-top:76px;padding-bottom:88px;}
.hero h1{font-size:44px;line-height:1.18;margin-top:14px;font-style:italic;font-weight:500;}
/* t45 (15/09/2026) : sous-titre de marque, reprend l'ancien texte du H1
   ("Le Clos de Royaucourt, une parenthèse silencieuse"), déplacé ici pour
   laisser le H1 porter le mot-clé SEO principal. Volontairement plus discret
   que ne l'était l'ancien H1 (police body, pas Fraunces) pour ne pas
   concurrencer visuellement le nouveau H1. */
.hero .hero-subtitle{font-family:var(--font-body);font-size:17px;font-style:italic;color:var(--bordeaux);opacity:.85;margin-top:12px;}
.hero p.lede{font-size:16.5px;line-height:1.75;color:var(--ink);opacity:.82;max-width:440px;margin-top:22px;}
.hero .cta-row{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;}
.hero-photo .ph{min-height:460px;}

/* story */
.story{background:var(--ivoire-deep);border-top:1px solid var(--brass-line);border-bottom:1px solid var(--brass-line);}
.story .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:76px;align-items:center;}
.story p{font-size:16px;line-height:1.8;margin-top:16px;opacity:.85;}
.story .ph{min-height:420px;}
.story-head{display:flex;align-items:center;gap:16px;}

/* amenities — bloc titre/texte empilé, puis rangée d'icônes en dessous.
   Avant : .wrap était en flex direct, ce qui traitait .section-head comme
   un 6e élément au même niveau que les 5 .am-item et cassait l'alignement.
   Maintenant : .wrap reste en flux normal (bloc), et .am-grid porte le
   flex horizontal uniquement pour la rangée d'icônes. */
.amenities .wrap{display:block;}
.am-grid{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:10px;}
.am-item{flex:1 1 170px;text-align:center;}
.am-item svg{margin:0 auto 16px;stroke:var(--stone);}
.am-item .label{font-family:var(--font-display);font-size:17px;font-weight:500;}
.am-item .sub{font-size:12.5px;color:var(--stone);margin-top:6px;line-height:1.5;}

/* rooms */
.rooms .section-head{max-width:600px;}
.rooms h2{font-size:32px;font-style:italic;}
.rooms .section-head p{font-size:15.5px;opacity:.8;margin-top:14px;line-height:1.65;}
.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:60px;background:var(--brass-line);}
.room-card{background:var(--ivoire);}
.room-card .ph{height:250px;}
.room-card .info{padding:24px 26px 30px;}
.room-card .name{font-family:var(--font-display);font-size:22px;font-weight:500;font-style:italic;}
.room-card .tag{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--stone);margin-top:6px;}
.room-card .price{font-size:13.5px;color:var(--bordeaux);margin-top:12px;font-weight:500;}
.room-card .link{display:inline-block;margin-top:14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--bordeaux);padding-bottom:2px;}
/* display:flex + gap plutôt que text-align:center + margin-left codé en dur
   sur le 2e bouton (ancienne version) : gap gère tout seul l'espacement,
   que les boutons soient côte à côte (desktop) ou empilés (mobile, une fois
   wrap forcé par flex-wrap) — repéré par Jo le 19/08/2026, les boutons se
   touchaient quasiment une fois empilés sur son téléphone. */
.rooms-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:56px;}

/* split table/seminaires */
.split{border-top:1px solid var(--brass-line);}
/* Modificateur "split--no-top-divider" (04/09/2026, retour de Jo, pages
   Table d'hôtes et Séminaires) : neutralise uniquement le filet du haut de
   section — la règle .split{border-top} ci-dessus n'est pas modifiée, donc
   l'accueil et Localisation (qui réutilisent .split sans cette classe)
   gardent leur filet. Le filet entre les 2 lignes (.split .row + .row,
   plus bas) n'est pas concerné par ce modificateur et reste affiché
   partout, y compris sur ces 2 pages. */
.split.split--no-top-divider{border-top:none;}
.split .row{display:grid;grid-template-columns:1fr 1fr;max-width:1280px;margin:0 auto;}
.split .ph{min-height:100%;}
.split .col-text{padding:70px 64px;display:flex;flex-direction:column;justify-content:center;background:var(--ivoire);}
.split .row:nth-child(even) .col-text{background:var(--ivoire-deep);}
.split h2{font-size:26px;font-style:italic;}
.split p{font-size:15.5px;line-height:1.8;margin-top:16px;opacity:.85;}
/* Corps augmenté le 20/08/2026 (13px → 17px, + graisse) sur demande de Jo :
   le prix de la table d'hôtes se perdait, plus petit que le texte courant
   (15,5px). Règle partagée avec la mention "sur devis" de la page Séminaires
   (même classe .price-note, même conteneur .split) — grossie "globalement"
   comme demandé plutôt qu'isolée à une seule page, les deux étant des
   mentions de tarif de même nature. */
.split .price-note{font-size:17px;font-weight:600;color:var(--bordeaux);margin-top:14px;}
.split .btn{margin-top:26px;align-self:flex-start;}
.split .row + .row{border-top:1px solid var(--brass-line);}

/* testimonials */
.testi{background:var(--bordeaux-deep);color:var(--ivoire);}
.testi .section-head{max-width:540px;margin:0 auto;text-align:center;}
.testi .section-head h2{color:var(--ivoire);font-style:italic;}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:58px;background:rgba(245,241,228,.15);}
.testi-card{background:var(--bordeaux-deep);padding:36px 30px;}
.testi-card .quote{font-family:var(--font-display);font-style:italic;font-size:19px;line-height:1.55;}
.testi-card .src{margin-top:20px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-line);}
.testi-note{text-align:center;margin-top:28px;font-size:12px;color:rgba(245,241,228,.5);}

/* location */
.location .row{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center;}
.dist-list{margin-top:26px;display:flex;flex-direction:column;gap:0;}
.dist-item{display:flex;justify-content:space-between;font-size:14.5px;padding:12px 0;border-bottom:1px solid var(--brass-line);}
.dist-item b{font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--bordeaux);}
.location .ph{min-height:320px;}

/* reservation band */
.resa-band{background:var(--ink);color:var(--ivoire);text-align:center;padding:96px 0;border-top:1px solid var(--brass-line);}
.resa-band h2{color:var(--ivoire);font-size:30px;font-style:italic;max-width:560px;margin:16px auto 0;}
.resa-band p{color:rgba(245,241,228,.65);margin-top:16px;font-size:14.5px;}
.resa-band .btn{margin-top:32px;}

/* footer — sitemap pour le maillage interne */
.site-footer{background:var(--bordeaux-deep);color:rgba(245,241,228,.82);padding:64px 0 28px;}
.site-footer .top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;align-items:start;}
.site-footer .brand .wordmark{color:var(--ivoire);}
.site-footer .brand .wordmark small{color:var(--brass-line);}
.site-footer p.tag{margin-top:16px;font-size:13px;color:rgba(245,241,228,.6);line-height:1.6;max-width:230px;}
/* font-family épinglée explicitement (20/09/2026, correctif hiérarchie Hn) :
   ce titre passe de h4 à h3 pour éviter un saut de niveau après le contenu
   de page (qui se termine en h2). Sans ce pin, il entrerait dans la règle
   générique h1,h2,h3{font-family:var(--font-display)} (Fraunces) au lieu
   d'hériter du corps de texte (Newsreader) comme avant — effet de bord
   silencieux repéré avant application, voir doc de reprise section 14. */
.site-footer h3{font-family:var(--font-body);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-line);margin-bottom:15px;font-weight:500;}
.site-footer .flinks{display:flex;flex-direction:column;gap:9px;font-size:13.5px;}
.site-footer .flinks a:hover{color:var(--ivoire);}
.site-footer .bottom{margin-top:52px;padding-top:22px;border-top:1px solid rgba(245,241,228,.18);
  display:flex;justify-content:space-between;font-size:11.5px;color:rgba(245,241,228,.5);flex-wrap:wrap;gap:10px;}

/* Palier intermédiaire — au-delà de 1180px tout tient sur une ligne ; en
   dessous, marque + nav complète (5 liens) + tel + lang + bouton Réserver
   ne rentrent plus, ce qui provoquait la casse observée entre 1092px et
   929px (liens sur 2 lignes, titre qui s'empile, bouton Réserver rogné).
   On libère de la place en masquant le tel avant le seuil critique,
   plutôt qu'au même seuil que le hamburger (920px) comme avant.
   .lang (sélecteur de langue) volontairement PAS masqué ici (04/09/2026,
   retour de Jo) : entre ce seuil et 940px (activation du hamburger), la
   version mobile du sélecteur (.lang-mobile, dans le panneau du hamburger)
   n'est pas encore accessible — le masquer ici créait une zone morte
   (941px à 1180px) où aucun sélecteur de langue n'était disponible du
   tout. .lang étant plus compact que .tel, il reste dans le header
   jusqu'à ce que le hamburger prenne le relais à 940px. */
@media (max-width:1180px){
  .header-right .tel{display:none;}
  nav.mainnav ul{gap:22px;}
}

/* Palier resserré — entre 941px et ~990px, le hamburger n'est pas encore
   actif (seuil 940px plus bas) mais l'écart nav ul:22px + .lang, gardés
   depuis le palier précédent, ne rentrent plus : débordement mesuré
   jusqu'à 45px à 944px de large (bouton Réserver poussé hors champ),
   repéré par Jo le 04/09/2026 avec les outils de réactivité. On resserre
   uniquement les écarts (liens du menu + header-right) sur cette plage
   étroite, sans toucher aux seuils de 940px et 1180px déjà en place. */
@media (max-width:990px){
  nav.mainnav ul{gap:10px;}
  .header-right{gap:10px;}
}

@media (max-width:940px){
  .wrap{padding:0 24px;}
  .site-header .wrap{padding:16px 24px;}

  /* .lang (sélecteur desktop) masqué ici : sous ce seuil, le hamburger et
     son panneau prennent le relais avec leur propre sélecteur
     (.lang-mobile, voir plus bas) — sans ce masquage les 2 versions
     restaient visibles en même temps, doublon repéré par Jo le 04/09/2026
     ("FR / EN" affiché à côté du bouton hamburger ET dans le panneau). */
  .header-right .lang{display:none;}

  /* Menu mobile : le conteneur nav.mainnav reste affiché (il porte le
     bouton hamburger) ; le panneau .mobile-menu-panel (liens de nav +
     sélecteur de langue, voir header.php) se replie par défaut et
     s'ouvre en overlay plein-largeur sous le header au clic (classe
     .toggled posée par navigation.js sur nav.mainnav). .site-header sert
     de repère de positionnement (position:sticky en fait déjà un bloc de
     référence pour ses descendants en position:absolute).
     C'est le PANNEAU (pas le <ul> seul, comme avant le 19/08/2026) qui
     porte le positionnement absolu : ça permet d'empiler le sélecteur de
     langue juste sous les liens de nav, sans avoir à connaître à l'avance
     la hauteur du <ul> (variable selon le nombre de liens du menu). */
  nav.mainnav{display:block;}
  .mainnav .menu-toggle{display:flex;}
  .mobile-menu-panel{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--ivoire);
    border-top:1px solid var(--brass-line);
    border-bottom:1px solid var(--brass-line);
    box-shadow:0 16px 28px rgba(42,35,31,.10);
  }
  /* Spécificité volontairement égale à la règle display:none ci-dessus
     (même chaîne de sélecteurs + .toggled en plus) pour être sûr de la
     remplacer, quel que soit l'ordre des règles dans le fichier. */
  .site-header nav.mainnav.toggled .mobile-menu-panel{display:block;}
  .site-header nav.mainnav ul{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    padding:0;
    list-style:none;
  }
  .site-header nav.mainnav ul li{border-bottom:1px solid var(--brass-line);}
  .site-header nav.mainnav ul li:last-child{border-bottom:none;}
  .site-header nav.mainnav ul a{display:block;padding:16px 24px;}

  /* Sélecteur de langue, copie mobile — même famille visuelle que les
     liens du menu juste au-dessus (padding identique, séparateur en
     bordure) plutôt que la version compacte "FR/EN" du desktop, pour
     rester confortable au doigt. */
  .mobile-menu-panel .lang-mobile{
    display:flex;
    align-items:center;
    gap:18px;
    padding:16px 24px;
    font-size:13.5px;
    border-top:1px solid var(--brass-line);
  }

  .hero .wrap{grid-template-columns:1fr;padding-top:44px;}
  .story .grid, .split .row, .location .row{grid-template-columns:1fr;}
  .split .col-text{padding:46px 26px;}
  .room-grid, .testi-grid{grid-template-columns:1fr;}

  /* Page /chambres/ (archive-chambre.php) en mobile, retour de Jo le
     20/09/2026 (test réel sur téléphone) :

     1) Écart trop important entre le lede du page-hero et la 1ère photo.
     En cause : le padding-bottom générique de .page-hero (104px, règle
     section{padding:104px 0} ligne ~1229) qui s'additionne au
     margin-top de .room-grid (60px, ligne ~1267) — .page-hero + section
     annule déjà le padding-top du bloc suivant (ligne ~1569) mais pas le
     padding-bottom du hero lui-même. Total 164px, à peine visible sur
     une grille large en desktop mais qui fait un vrai trou en vertical
     mobile. :has(+ .rooms) cible précisément "le page-hero SUIVI du
     bloc .rooms" — combinaison propre à cette page (.rooms n'est
     utilisé nulle part ailleurs), donc aucun autre .page-hero du site
     n'est concerné par cette réduction de padding.

     2) Le bloc "Chambres d'hôtes en Picardie" (.room-promo) doit
     apparaître en premier sur mobile. Il est inséré en dur dans la
     boucle PHP juste après la 1ère carte (index 0, cf. archive-chambre.php)
     — pensé pour la case n°2 d'une grille desktop à 3 colonnes. Plutôt
     que de toucher au PHP ou d'ajouter de la hauteur de page (cf. la
     mésaventure de la bande blanche sous le footer avec Tarteaucitron),
     order:-1 le fait remonter visuellement en 1ère position — order
     fonctionne aussi sur les enfants directs d'une grille CSS, pas
     seulement en flexbox. Le padding vertical du bloc (30px haut/bas,
     ligne ~1670) est déjà équilibré, rien à ajuster de ce côté. */
  .page-hero:has(+ .rooms){ padding-bottom:48px; }
  .room-grid{ margin-top:28px; }
  .room-promo{ order:-1; }

  /* Photos "Une table raffinée" / "Séminaires & réceptions" (accueil) et
     Table d'hôtes disparues en mobile — repéré par Jo le 19/08/2026.
     Cause : .split .ph{min-height:100%} (règle desktop, où .row est en
     grid 2 colonnes et .ph s'étire sur la hauteur de la ligne) ne peut
     plus se résoudre une fois .split .row repassé en 1 colonne ci-dessus
     — un pourcentage de hauteur ne se résout pas si le parent n'a pas de
     hauteur propre (ici : auto, dictée par le contenu). .ph retombe donc
     à 0 (l'image, en position:absolute, ne compte pas dans le flux), la
     photo disparaît complètement bien qu'elle soit chargée et visible
     dans le DOM. Correctif : hauteur fixe en mobile, comme pour les
     autres cadres .ph du site (room-card, room-single-hero...). */
  .split .ph{min-height:260px;}

  /* Boutons centrés en mobile (le texte — titres, paragraphes — reste ferré
     à gauche comme sur desktop, cf. échange avec Jo le 19/08/2026 : seuls
     les boutons/CTA changent d'alignement, pas le contenu de lecture). */
  .hero .cta-row{justify-content:center;}
  .split .btn{align-self:center;}
  .location .btn{display:flex;width:fit-content;margin-left:auto;margin-right:auto;}
  /* Section "Le propriétaire" (story) : même logique pour son bouton, et
     pour le filet décoratif (.fleuron) qui restait lui aussi ferré à
     gauche — repéré par Jo le 19/08/2026 sur son téléphone. Le fleuron est
     déjà en display:flex (voir plus haut) donc justify-content suffit ; le
     bouton, en inline-flex, a besoin du même repli display:flex + marges
     auto que .location .btn ci-dessus pour se centrer sans toucher au
     texte-align du reste de la colonne. */
  .story .fleuron{justify-content:center;}
  .story .btn{display:flex;width:fit-content;margin-left:auto;margin-right:auto;}
  /* Fiche chambre (single-chambre.php) : même logique pour le cta-row du
     hero (2 boutons "Vérifier les disponibilités" / "Visite virtuelle"),
     repéré lors de la passe de contrôle du 19/08/2026 sur toutes les pages
     — oublié du premier passage car section propre à ce template
     (.room-single-hero), pas .hero. */
  .room-single-hero .cta-row{justify-content:center;}
  /* Pied de page : une colonne centrée plutôt que 2 colonnes qui
     donnaient un rendu décalé/déséquilibré une fois la nav en hamburger. */
  .site-footer .top{grid-template-columns:1fr;text-align:center;justify-items:center;}
  .site-footer .flinks{align-items:center;}
  .site-footer p.tag{margin-left:auto;margin-right:auto;}
  .site-footer .bottom{justify-content:center;text-align:center;}
}

/* Palier étroit — sous 560px (ex. Honor 200 5G de Jo, ~440px de large
   utile), le header déborde encore malgré le hamburger et le masquage
   tel/lang : marque (monogramme + nom + sous-titre) + hamburger + bouton
   "Réserver" ne rentrent plus sur une ligne, le bouton "Réserver" est
   poussé hors de l'écran (débordement mesuré : 67px en trop à 440px de
   large, repéré par Jo le 19/08/2026). Le nom complet ("Clos de
   Royaucourt" + sous-titre) est la partie la plus large et la moins utile
   ici : le monogramme C·R suffit à identifier la marque et reste cliquable
   vers l'accueil, donc on masque uniquement le wordmark plutôt que de
   réduire sa taille de police (qui resterait de toute façon trop large). */
@media (max-width:560px){
  .brand .wordmark{display:none;}
}


/* ==========================================================================
   Correctif — liens visités/survolés
   Underscores définit a:visited/:hover/:focus/:active avec une spécificité
   (élément + pseudo-classe) plus forte qu'une simple classe comme .btn-fill.
   On neutralise en ciblant les mêmes états, mais via nos classes : une classe
   + une pseudo-classe (.btn-fill:visited) l'emporte sur (a:visited) seul.
   ========================================================================== */
.btn:visited,
.btn:hover,
.btn:focus,
.btn:active{
  color:var(--bordeaux);
}
.btn-fill:visited,
.btn-fill:hover,
.btn-fill:focus,
.btn-fill:active{
  color:var(--ivoire);
  background:var(--bordeaux-deep);
  border-color:var(--bordeaux-deep);
}
.btn-line:visited{
  color:var(--bordeaux);
}
.btn-line:hover,
.btn-line:focus,
.btn-line:active{
  color:var(--ivoire);
  background:var(--bordeaux);
}
.btn-on-dark:visited,
.btn-on-dark:hover,
.btn-on-dark:focus,
.btn-on-dark:active{
  color:var(--ivoire);
}

nav.mainnav a:visited,
nav.mainnav a:focus,
nav.mainnav a:active{
  color:var(--ink);
}
nav.mainnav a:hover{
  color:var(--bordeaux);
}

.site-footer .flinks a:visited,
.site-footer .flinks a:focus,
.site-footer .flinks a:active{
  color:inherit;
}
.site-footer .flinks a:hover{
  color:var(--ivoire);
}

/* t40 (04/09/2026) : même correctif que .flinks juste au-dessus, mais
   oublié à l'époque pour les 2 liens du bandeau du bas (Mentions légales,
   Politique de confidentialité) — au survol ils passaient en bleu marine
   #191970 (couleur par défaut d'Underscores, jamais recolorée ici), quasi
   illisible sur le fond bordeaux très sombre de .site-footer .bottom. Une
   fois visités, même souci avec le violet #800080 par défaut. */
.site-footer .bottom a:visited,
.site-footer .bottom a:focus,
.site-footer .bottom a:active{
  color:inherit;
}
.site-footer .bottom a:hover{
  color:var(--ivoire);
}

/* Corrige le cumul de marges quand une section suit directement le page-hero */
.page-hero + section{
  padding-top:0;
}

/* ==========================================================================
   Page Contact — calendrier Itea + formulaire Contact Form 7
   ========================================================================== */

/* Conteneur du calendrier Itea : largeur alignée sur le reste du site (1280px),
   bordure discrète pour le distinguer du fond ivoire. */
.contact-calendar{padding-top:0;padding-bottom:60px;}
.itea-widget{
  border:1px solid var(--brass-line);
  background:#fff;
}
.itea-widget iframe{display:block;}

/* Rappel des coordonnées directes (tél. portable + fixe, email info@) —
   demande d'Aurélio du 22/09/2026, repositionné le même jour juste sous le
   H1 (2e retour de Jo). Reste ferré à gauche comme le reste du page-hero
   (.lede), flex-wrap suffit pour un rendu propre en mobile sans media
   query dédiée. */
.contact-direct{
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  margin:22px 0;
}
.contact-direct-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:14.5px;
  font-weight:500;
  color:var(--bordeaux);
}
.contact-direct-item:hover,
.contact-direct-item:focus{
  text-decoration:underline;
}
.contact-direct-item:visited{
  color:var(--bordeaux);
}
.contact-direct-icon{
  flex:0 0 auto;
  display:block;
}

/* Formulaire de contact : reprend les couleurs de la charte (bordures sauge,
   focus en prune) plutôt que les styles gris par défaut d'Underscores. */
.contact-form-section{padding-top:0;}
.contact-form-wrap{max-width:640px;}
.contact-form-wrap p{margin-bottom:1.2em;}
.contact-form-wrap label{
  display:block;
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--stone);
  margin-bottom:6px;
}
.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap input[type="tel"],
.contact-form-wrap input[type="date"],
.contact-form-wrap input[type="number"],
.contact-form-wrap select,
.contact-form-wrap textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:15px;
  color:var(--ink);
  border:1px solid var(--brass-line);
  border-radius:0;
  padding:11px 14px;
  background:#fff;
}
.contact-form-wrap input:focus,
.contact-form-wrap select:focus,
.contact-form-wrap textarea:focus{
  outline:none;
  border-color:var(--bordeaux);
}
.contact-form-wrap textarea{min-height:140px;resize:vertical;}
.contact-form-wrap .wpcf7-submit{
  /* Réutilise le style .btn-fill déjà défini pour les boutons du site. */
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;font-family:var(--font-body);font-weight:500;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;border-radius:0;cursor:pointer;
  border:1px solid var(--bordeaux);background:var(--bordeaux);color:var(--ivoire);
  transition:background .2s ease,border-color .2s ease;
}
.contact-form-wrap .wpcf7-submit:hover{background:var(--bordeaux-deep);border-color:var(--bordeaux-deep);}
.contact-form-wrap .wpcf7-not-valid-tip{
  color:var(--bordeaux);
  font-size:12.5px;
  margin-top:4px;
}
.contact-form-wrap .wpcf7-response-output{
  border-color:var(--brass-line) !important;
  font-size:13.5px;
}

/* page-mentions-legales.php (t38, 04/09/2026) : texte juridique long à
   lire, colonne resserrée pour le confort de lecture plutôt que .wrap
   pleine largeur (1280px) — même principe que .contact-form-wrap
   ci-dessus, nichée à l'intérieur de .wrap sans padding propre (celui de
   .wrap suffit). */
.legal-content{max-width:760px;}
.legal-content h2{font-size:22px;font-style:italic;margin-top:48px;margin-bottom:14px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{font-size:16px;line-height:1.8;opacity:.85;margin-bottom:18px;}
.legal-content a{text-decoration:underline;text-underline-offset:3px;}
.legal-content a:hover{color:var(--bordeaux);}
/* page-politique-de-confidentialite.php (t39, 15/09/2026) : liste des
   cookies, même gabarit typographique que .legal-content p pour rester
   cohérent avec le reste de la colonne de lecture. */
.legal-content ul{margin:0 0 18px 22px;padding:0;}
.legal-content li{font-size:16px;line-height:1.8;opacity:.85;margin-bottom:6px;}

/* room-promo — bloc de mise en avant SEO comblant la 6e case de la grille
   .room-grid (5 chambres + 1 bloc = grille pleine, plus de case vide).
   Réutilise --bordeaux-deep, déjà utilisé pour .testi et .resa-band sur
   l'accueil, pour rattacher ce bloc à un langage visuel déjà établi
   plutôt que d'introduire une couleur isolée. */
.room-promo{
	background:var(--bordeaux-deep);
	color:var(--ivoire);
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:30px 26px;
}
.room-promo .eyebrow{color:var(--brass-line);}
.room-promo h2{
	font-family:var(--font-display);
	font-style:italic;
	font-weight:500;
	font-size:20px;
	color:var(--ivoire);
	margin-top:8px;
}
.room-promo p{
	font-size:14px;
	line-height:1.6;
	color:rgba(245,241,228,.85);
	margin-top:12px;
}
.room-promo .btn{
	margin-top:18px;
	align-self:center;
}

/* ==========================================================================
   single-chambre.php — fiche détaillée d'une chambre
   Hero (photo + titre + tag + capacité + CTA), description longue,
   tableau des tarifs par saison, bande de CTA finale.
   ========================================================================== */

/* Hero de la fiche chambre : photo à gauche, infos à droite (comme .story).
   Correctif du 03/09/2026 (retour visuel de Jo) : le padding-top:0 d'origine
   ("le header est juste au-dessus") faisait toucher la photo au header sur
   TOUTES les fiches chambre — seul hero du site sans aucun espace sous le
   header (le hero de l'accueil a 76px, les .page-hero des autres pages
   104px via la règle générique section{padding:104px 0}). 64px choisi comme
   compromis : de l'air sous le header, sans reprendre le plein 104px qui
   recréerait le problème de densité verticale corrigé juste en dessous. */
.room-single-hero{padding-top:64px;padding-bottom:64px;}
.room-single-hero .row{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center;}
.room-single-hero .ph{min-height:420px;}
.room-single-hero h1{font-size:36px;font-style:italic;margin-top:14px;margin-bottom:8px;}
/* t45 (15/09/2026) : le descriptif de la chambre (tag_chambre) est passé de
   <span class="eyebrow"> avant le H1 à <h2 class="eyebrow"> après (voir
   single-chambre.php) — hiérarchie Hn correcte, même classe visuelle donc
   même apparence, juste un espacement dédié puisqu'il suit maintenant le H1
   au lieu de le précéder. */
.room-single-hero h2.eyebrow{margin-top:0;margin-bottom:0;}
.room-single-hero .lede{margin-top:14px;}
.room-single-hero .cta-row{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}

/* Vidéo de visite — section fine (juste un cadre vidéo), resserrée le
   03/09/2026 pour la même raison que les autres sections de cette page :
   cf. commentaire au-dessus de .room-single-tarifs plus bas. */
.room-single-video{padding:56px 0;}

/* Description longue (the_content()) — largeur de lecture contrainte à
   760px directement dans le PHP (style inline sur .wrap), pas ici.
   Padding resserré le 03/09/2026, cf. .room-single-tarifs. */
.room-single-desc{padding:40px 0;}
.room-single-desc p{font-size:16px;line-height:1.8;opacity:.85;}

/* Bloc "Équipements" (ajouté le 03/09/2026, cf. single-chambre.php) — même
   resserrement que les sections voisines. */
.room-single-equip{padding:56px 0;}

/* Tableau des tarifs — fond ivoire-deep pour distinguer la section, comme
   .story ; tableau blanc par-dessus pour la lisibilité des chiffres.
   Padding resserré le 03/09/2026 (retour de Jo : la fiche chambre empilait
   trop de sections fines avec le padding générique de 104px chacune —
   ~208px de vide entre 2 sections qui se suivent — un effet "persillé"
   qui fonctionne sur l'accueil (sections riches en contenu) mais pas ici.
   70px gardé un peu plus généreux que les sections voisines : le tableau
   de tarifs reste le bloc le plus dense/important de la page. */
.room-single-tarifs{padding:70px 0;background:var(--ivoire-deep);border-top:1px solid var(--brass-line);border-bottom:1px solid var(--brass-line);}
.price-table{width:100%;border-collapse:collapse;background:#fff;}
.price-table th,
.price-table td{
	padding:14px 18px;
	text-align:left;
	border-bottom:1px solid var(--brass-line);
	font-size:14px;
}
.price-table th{
	font-family:var(--font-body);
	font-size:11px;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--stone);
	font-weight:500;
}
.price-table td strong{
	font-family:var(--font-display);
	font-style:italic;
	font-weight:500;
	font-size:15px;
	color:var(--ink);
	display:block;
}
/* Dates de la saison affichées en petit sous son nom, dans la même cellule. */
.price-table-dates{
	display:block;
	font-size:12px;
	color:var(--stone);
	margin-top:2px;
}

/* Mentions "petit-déjeuner compris" / "lit supplémentaire" sous le tableau
   des tarifs (tâche t17, 20/08/2026) — .price-note n'était jusqu'ici stylé
   que sous .split (page Table d'hôtes/Séminaires) ; ce tableau vit dans
   .room-single-tarifs, hors de .split, donc sans cette règle il resterait
   sans style (texte noir par défaut). Volontairement plus discret que la
   version .split (17px, tout juste augmentée) : ici ce sont 2 notes
   secondaires sous un tableau de prix déjà lisible, pas LE prix de la page. */
.room-single-tarifs .price-note{
	font-size:14px;
	color:var(--bordeaux);
	margin-top:10px;
}
.room-single-tarifs .price-note + .price-note{margin-top:4px;}

.room-single-cta{padding:80px 0;}
/* display:flex + gap plutôt que text-align:center (codé en dur dans le PHP)
   + margin-left:14px codé en dur sur le 2e bouton — même anti-pattern que
   .rooms-cta sur l'accueil (voir plus haut), repéré ici lors de la passe de
   contrôle du 19/08/2026 : le gap gère l'espacement dans tous les cas,
   boutons côte à côte (desktop) ou empilés (mobile étroit), sans jamais
   les coller. */
.room-single-cta .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}

/* Sous 940px (même seuil que le menu mobile) : photo/infos empilées,
   tableau de tarifs resserré (police + padding réduits) pour occuper moins
   de place. */
@media (max-width:940px){
	.room-single-hero .row{grid-template-columns:1fr;}
	.price-table{font-size:13px;}
	.price-table th,
	.price-table td{padding:10px 12px;}
}

/* Le resserrement ci-dessus ne suffit pas sur un mobile étroit (Honor 200
   5G de Jo, ~440px) : 5 colonnes (Saison + 4 prix) ne tiennent pas, les
   en-têtes s'enroulent sur 2-3 lignes et la dernière colonne se retrouve
   quasiment coupée au bord de l'écran — repéré par Jo le 19/08/2026 sur la
   fiche "L'Abreuvoir", perçu comme un défaut de centrage mais c'est en
   réalité un débordement/écrasement du tableau. Plutôt que de continuer à
   réduire police/padding jusqu'à l'illisible, on adopte le pattern standard
   pour les tableaux de données en mobile : le tableau garde une largeur
   naturelle (colonnes non compressées, en-têtes sur une seule ligne) et
   scrolle horizontalement dans son propre cadre — l'utilisateur balaie
   latéralement pour voir les colonnes suivantes, plus lisible qu'un texte
   écrasé. */
@media (max-width:700px){
	.room-single-tarifs .wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
	.price-table th{white-space:nowrap;}
}

/* ==========================================================================
   Carrousel photos du jardin (section .amenities, accueil)
   Défilement horizontal natif (scroll-snap) + flèches JS pour naviguer
   sans dépendre de la souris/trackpad. Fonctionne avec 2 photos comme
   avec un lot plus important après l'échange avec Aurélio.
   ========================================================================== */
.jardin-carousel-wrap{
	position:relative;
	display:flex;
	align-items:center;
	gap:14px;
	margin-top:56px;
}
.jardin-carousel{
	display:flex;
	gap:16px;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	padding-bottom:4px;
	/* Masque la barre de défilement native tout en gardant le scroll
	   fonctionnel — les flèches suffisent comme contrôle visible. */
	scrollbar-width:none;
}
.jardin-carousel::-webkit-scrollbar{display:none;}
.jardin-carousel-item{
	flex:0 0 auto;
	width:320px;
	height:220px;
	scroll-snap-align:start;
	overflow:hidden;
	background:var(--ivoire-deep);
}
.jardin-carousel-item img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.jardin-carousel-arrow{
	flex:none;
	width:40px;
	height:40px;
	border:1px solid var(--brass-line);
	background:#fff;
	color:var(--bordeaux);
	font-size:16px;
	cursor:pointer;
	transition:background .2s ease,color .2s ease;
}
.jardin-carousel-arrow:hover{
	background:var(--bordeaux);
	color:var(--ivoire);
}

@media (max-width:940px){
	.jardin-carousel-item{width:240px;height:170px;}
	.jardin-carousel-arrow{display:none;}
}


/* ==========================================================================
   Grille fixe + lightbox jardin (t29, 14/08/2026)
   Affichage retenu à la place du carrousel ci-dessus (conservé en réserve,
   inactif) : 4 cadres photo fixes .jardin-grid, un bouton CTA, et une
   lightbox plein écran .jardin-lightbox qui parcourt l'intégralité du champ
   SCF galerie_jardin_carrousel. JS : js/jardin-lightbox.js.
   ========================================================================== */
.jardin-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:2px;
	margin-top:56px;
	background:var(--brass-line);
}
.jardin-grid-item{
	display:block;
	position:relative;
	overflow:hidden;
	height:240px;
	width:100%;
	background:var(--ivoire-deep);
	border:0;
	padding:0;
	cursor:pointer;
}
.jardin-grid-item img{
	position:absolute;inset:0;
	width:100%;height:100%;
	object-fit:cover;
	transition:transform .4s ease;
}
.jardin-grid-item:hover img{transform:scale(1.04);}

.jardin-grid-cta{
	text-align:center;
	margin-top:32px;
}
.jardin-grid-cta .btn{
	font:inherit;
	cursor:pointer;
}

@media (max-width:940px){
	.jardin-grid{grid-template-columns:repeat(2,1fr);}
	.jardin-grid-item{height:200px;}
}

/* Lightbox plein écran */
.jardin-lightbox{
	position:fixed;inset:0;
	z-index:200;
	display:none;
	align-items:center;
	justify-content:center;
}
.jardin-lightbox.is-open{display:flex;}
body.jardin-lightbox-locked{overflow:hidden;}
.jardin-lightbox-backdrop{
	position:absolute;inset:0;
	background:var(--bordeaux-deep);
	opacity:.92;
}
.jardin-lightbox-content{
	position:relative;
	z-index:1;
	width:min(92vw,1100px);
	height:min(86vh,760px);
	display:flex;
	align-items:center;
	justify-content:center;
}
.jardin-lightbox-stage{
	position:relative;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
}
.jardin-lightbox-slide{
	display:none;
	max-width:100%;
	max-height:100%;
	object-fit:contain;
}
.jardin-lightbox-slide.is-active{display:block;}
.jardin-lightbox-close,
.jardin-lightbox-arrow{
	position:absolute;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	width:44px;height:44px;
	border:1px solid var(--brass-line);
	background:var(--ivoire);
	color:var(--bordeaux);
	font-size:18px;
	line-height:1;
	cursor:pointer;
	transition:background .2s ease,color .2s ease;
	z-index:2;
}
.jardin-lightbox-close:hover,
.jardin-lightbox-arrow:hover{
	background:var(--bordeaux);
	color:var(--ivoire);
}
.jardin-lightbox-close{
	top:-20px;right:-20px;
	border-radius:50%;
}
.jardin-lightbox-prev{top:50%;left:-20px;transform:translateY(-50%);}
.jardin-lightbox-next{top:50%;right:-20px;transform:translateY(-50%);}
.jardin-lightbox-counter{
	position:absolute;
	bottom:-36px;left:50%;
	transform:translateX(-50%);
	color:var(--ivoire);
	font-size:13px;
	letter-spacing:.04em;
}

@media (max-width:640px){
	.jardin-lightbox-content{width:94vw;height:78vh;}
	.jardin-lightbox-close{top:8px;right:8px;}
	.jardin-lightbox-prev{left:8px;}
	.jardin-lightbox-next{right:8px;}
}


/* ==========================================================================
   Composant vidéo cliquable (.video-embed)
   Vignette (photo de la chambre ou du jardin en poster) + bouton lecture ;
   le fichier vidéo ne se charge qu'au clic (chargement à la demande,
   décision prise avec Jo pour la performance). Réutilisé sur
   single-chambre.php (5 vidéos chambre) et front-page.php (vidéo globale).
   ========================================================================== */
.video-embed{
	position:relative;
	aspect-ratio:16/9;
	background:var(--ivoire-deep);
	overflow:hidden;
	cursor:pointer;
}
/* État sans photo réelle — texture à rayures (même motif que .ph
   ailleurs sur le site, cohérence visuelle) + libellé + bouton empilés
   au centre, plutôt qu'un bouton flottant seul sur un fond vide. */
.video-embed.video-embed--fallback{
	background:repeating-linear-gradient(115deg,#E5DAB8 0 3px,#DACB9E 3px 42px);
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:18px;
}
.video-embed-fallback-text{
	font-family:var(--font-display);
	font-style:italic;
	font-weight:500;
	font-size:24px;
	color:var(--ink);
	background:rgba(247,242,232,.88);
	padding:10px 28px;
	text-align:center;
}
.video-embed img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.video-embed video{
	width:100%;
	height:100%;
	display:block;
}
.video-embed-play{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:72px;
	height:72px;
	border-radius:50%;
	border:1px solid rgba(245,241,228,.5);
	background:rgba(42,35,31,.55);
	color:var(--ivoire);
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:background .2s ease,transform .2s ease;
}
.video-embed-play svg{margin-left:3px;}
.video-embed:hover .video-embed-play{
	background:var(--bordeaux);
	transform:translate(-50%,-50%) scale(1.06);
}
/* En mode fallback, le bouton est dans le flux normal (empilé sous le
   texte), pas positionné en absolu au centre du conteneur — on annule
   donc position/transform hérités, y compris au survol. */
.video-embed.video-embed--fallback .video-embed-play{
	position:static;
	transform:none;
}
.video-embed.video-embed--fallback:hover .video-embed-play{
	transform:scale(1.06);
}
/* Une fois la vidéo chargée (classe posée par le JS), le bouton disparaît. */
.video-embed.is-playing .video-embed-play{display:none;}
.video-embed.is-playing .video-embed-fallback-text{display:none;}


/* ==========================================================================
   Carte de situation chargée au clic (.map-embed)
   Même famille que .video-embed ci-dessus : texture à rayures de .ph +
   libellé + bouton centrés tant que le visiteur n'a pas cliqué, l'iframe
   Google Maps (et ses cookies tiers) n'est injectée qu'à ce moment-là —
   contrainte RGPD, décision prise avec Jo. .map-embed s'utilise combiné à
   .ph (position:relative, overflow:hidden, texture ::before déjà fournis
   par .ph) — voir front-page.php et page-localisation.php. JS :
   js/map-embed.js.
   ========================================================================== */
.map-embed{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:18px;
}
.map-embed-label{
	position:relative;
	font-family:var(--font-display);
	font-style:italic;
	font-weight:500;
	font-size:22px;
	color:var(--ink);
	background:rgba(247,242,232,.88);
	padding:10px 28px;
	text-align:center;
}
.map-embed-trigger{
	position:relative;
	font:inherit;
	cursor:pointer;
}
.map-embed.is-loaded{
	display:block;
}
.map-embed iframe{
	position:absolute;inset:0;
	width:100%;height:100%;
	border:0;
}

/* Sommaire de navigation rapide en haut de la page Visites virtuelles —
   liens d'ancre vers chaque vidéo, utile dès qu'il y en a 6 sur une
   seule page. Réutilise la typographie des liens .btn-line sans le
   style bouton, plus discret. */
.vv-toc{
	display:flex;
	flex-wrap:wrap;
	gap:10px 24px;
	margin-top:30px;
}
.vv-toc a{
	font-size:13px;
	font-weight:500;
	letter-spacing:.04em;
	color:var(--bordeaux);
	border-bottom:1px solid var(--brass-line);
	padding-bottom:2px;
}
.vv-toc a:hover{
	color:var(--bordeaux-deep);
	border-color:var(--bordeaux);
}

/* site-breadcrumbs (t44, 15/09/2026) — bandeau discret juste sous le
   header, affiché sur toutes les pages sauf l'accueil (voir header.php).
   Rank Math génère le balisage (#rank-math-breadcrumb), on se contente
   de l'habiller à la charte Prune & Miel. */
.site-breadcrumbs{
	border-bottom:1px solid var(--brass-line);
	background:var(--ivoire-deep);
}
.site-breadcrumbs .wrap{padding-top:14px;padding-bottom:14px;}
.site-breadcrumbs #rank-math-breadcrumb{
	font-size:13px;
	color:var(--bordeaux);
	opacity:.75;
}
.site-breadcrumbs #rank-math-breadcrumb a{
	color:var(--bordeaux);
	text-decoration:none;
}
.site-breadcrumbs #rank-math-breadcrumb a:hover{
	text-decoration:underline;
	text-underline-offset:3px;
}

/* reCAPTCHA v3 (Contact Form 7) - masquage du badge mobile disgracieux */
.grecaptcha-badge{visibility:hidden;}

/* Mention legale de contrepartie, ajoutee sous le formulaire de contact CF7 */
.recaptcha-notice{font-size:12px;color:var(--brass-line);margin-top:12px;line-height:1.5;}
.recaptcha-notice a{color:inherit;text-decoration:underline;}