/*
Theme Name: Bos Charaud
Theme URI: https://www.boscharaud.com/
Author: Domaine Bos Charaud
Description: Thème sur mesure pour le Domaine Bos Charaud — étang privé de pêche à la carpe et gîtes en Haute-Vienne. Reprise du design du site Wix d'origine : palette crème / vert profond, titres Bodoni Moda, one-page avec ancres + page galerie.
Version: 3.9.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bos-charaud
Tags: one-page, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* =========================================================
   1. Design tokens
   ========================================================= */

:root {
	/* Palette relevée sur le site d'origine */
	--bos-cream:        #f8f4e3;
	--bos-cream-soft:   #fdfbf7;
	--bos-green:        #2a3a2a;
	--bos-green-mid:    #4a5444;
	--bos-sage:         #7a8470;
	--bos-gold:         #a28c73;
	--bos-gold-light:   #c4b096;
	--bos-ink:          #1b241b;

	--bos-font-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
	--bos-font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Échelle typographique fluide */
	--bos-fs-hero:      clamp(2.75rem, 1.2rem + 6.4vw, 5.5rem);
	--bos-fs-h2:        clamp(2rem, 1.1rem + 3.4vw, 3.95rem);
	--bos-fs-h3:        clamp(1.35rem, 1rem + 1.2vw, 1.85rem);
	--bos-fs-lead:      clamp(1.05rem, 0.95rem + 0.5vw, 1.36rem);
	--bos-fs-body:      clamp(1rem, 0.96rem + 0.2vw, 1.11rem);
	--bos-fs-eyebrow:   0.99rem;

	--bos-space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
	--bos-container:     1280px;
	--bos-container-narrow: 940px;
	--bos-radius:        4px;
	--bos-header-h:      104px;

	--bos-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================
   2. Reset / base
   ========================================================= */

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

html {
	scroll-behavior: smooth;
	/* Compense le header fixe lors du saut vers une ancre */
	scroll-padding-top: var(--bos-header-h);
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background-color: var(--bos-cream);
	color: var(--bos-green);
	font-family: var(--bos-font-body);
	font-size: var(--bos-fs-body);
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

/*
 * Les photos du thème sortent dans un <picture> qui propose une version WebP.
 * « display: contents » efface ce conteneur de la mise en page : les règles
 * écrites pour les images continuent de s'appliquer telles quelles, y compris
 * les hauteurs en pourcentage des bandeaux.
 */
picture {
	display: contents;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s var(--bos-ease), opacity 0.3s var(--bos-ease);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--bos-gold);
	outline-offset: 3px;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	font-family: var(--bos-font-body);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--bos-green);
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.2em; }

/* =========================================================
   3. Utilitaires de mise en page
   ========================================================= */

.bos-container {
	width: min(100% - 3rem, var(--bos-container));
	margin-inline: auto;
}

.bos-container--narrow { max-width: var(--bos-container-narrow); }

.bos-section {
	padding-block: var(--bos-space-section);
	position: relative;
}

.bos-section--cream  { background-color: var(--bos-cream); }
.bos-section--soft   { background-color: var(--bos-cream-soft); }
.bos-section--green  { background-color: var(--bos-green); color: var(--bos-cream); }
.bos-section--green h2,
.bos-section--green h3,
.bos-section--green h4 { color: var(--bos-cream); }

.bos-eyebrow {
	display: block;
	margin-bottom: 1.5rem;
	font-size: var(--bos-fs-eyebrow);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bos-gold);
}

.bos-section--green .bos-eyebrow { color: var(--bos-gold-light); }

.bos-title {
	font-size: var(--bos-fs-h2);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.06;
}

.bos-lead {
	font-size: var(--bos-fs-lead);
	line-height: 1.45;
	color: var(--bos-green-mid);
	max-width: 46ch;
}

.bos-section--green .bos-lead { color: var(--bos-cream); opacity: 0.92; }

.bos-text { max-width: 60ch; color: var(--bos-green-mid); }
.bos-section--green .bos-text { color: var(--bos-cream); opacity: 0.85; }

.bos-rule {
	width: 64px;
	height: 1px;
	margin: 2rem 0;
	border: 0;
	background-color: var(--bos-gold);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: -100px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--bos-green);
	color: var(--bos-cream);
	border-radius: var(--bos-radius);
	transition: top 0.2s var(--bos-ease);
}
.skip-link:focus { top: 1rem; }

/* =========================================================
   4. Boutons
   ========================================================= */

.bos-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 1rem 2.15rem;
	border: 1px solid var(--bos-green);
	border-radius: var(--bos-radius);
	background: transparent;
	color: var(--bos-green);
	font-family: var(--bos-font-body);
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.35s var(--bos-ease), color 0.35s var(--bos-ease),
	            border-color 0.35s var(--bos-ease), transform 0.35s var(--bos-ease);
}

.bos-btn:hover,
.bos-btn:focus-visible {
	background-color: var(--bos-green);
	color: var(--bos-cream);
	transform: translateY(-2px);
}

.bos-btn--light {
	border-color: var(--bos-cream);
	color: var(--bos-cream);
}
.bos-btn--light:hover,
.bos-btn--light:focus-visible {
	background-color: var(--bos-cream);
	color: var(--bos-green);
}

.bos-btn--solid {
	background-color: var(--bos-green);
	color: var(--bos-cream);
}
.bos-btn--solid:hover,
.bos-btn--solid:focus-visible {
	background-color: var(--bos-green-mid);
	color: var(--bos-cream);
}

.bos-btn--sm { padding: 0.7rem 1.5rem; font-size: 0.72rem; }

/* =========================================================
   5. En-tête
   ========================================================= */

.bos-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	/* Marges resserrées : c'est le logo qui fixe la hauteur du bandeau, et
	   l'espace ainsi libéré lui revient sans que la bannière grandisse. */
	padding-block: 0.5rem;
	background-color: transparent;
	transition: background-color 0.4s var(--bos-ease), box-shadow 0.4s var(--bos-ease),
	            padding 0.4s var(--bos-ease);
}

.bos-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.bos-header__brand { display: flex; align-items: center; flex-shrink: 0; }

.bos-header__logo img {
	display: block;
	width: auto;
	height: 82px;
	max-height: calc(100vh - 2rem);
	transition: height 0.4s var(--bos-ease);
}

.bos-header__brand-text {
	font-family: var(--bos-font-display);
	font-size: 1.35rem;
	line-height: 1.1;
	letter-spacing: 0.04em;
	color: var(--bos-cream);
	transition: color 0.4s var(--bos-ease);
}

.bos-header__nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

/* Au-delà du point de rupture, l'en-tête devient une grille de trois colonnes :
   les deux colonnes latérales font la même largeur (1fr), donc la colonne du
   milieu — la navigation — est réellement centrée dans la page, quelles que
   soient les largeurs du logo et du bloc de droite. En dessous, la grille est
   inutile : la navigation passe en panneau plein écran. */
@media (min-width: 1025px) {
	.bos-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		justify-content: initial;
	}

	.bos-header__brand { justify-self: start; }
	.bos-header__nav   { justify-self: center; position: relative; }
	.bos-header__cta   { justify-self: end; }

	/* Le panneau n'existe qu'en tant que boîte sur mobile : ici, il se fond
	   dans la navigation. */
	.bos-header__panel { display: contents; }

	/* Le drapeau sort du flux : sinon il consommerait de la largeur à gauche
	   et décalerait visuellement les liens vers la droite. Il reste collé à
	   gauche du premier lien, mais ce sont bien les liens qui sont centrés. */
	.bos-header__nav > .bos-lang {
		position: absolute;
		right: 100%;
		top: 50%;
		transform: translateY(-50%);
		margin-right: 1.5rem;
		/* Largeur explicite indispensable : sans elle, un parent absolu se
		   dimensionne sur ses enfants, alors que la règle globale
		   « svg { max-width: 100% } » dimensionne les enfants sur le parent.
		   Le navigateur tranche cette boucle en écrasant le bloc à quelques
		   pixels, et les drapeaux disparaissent. */
		width: max-content;
	}
}

/* Accès au compte et à la réservation repris dans le panneau mobile : masqué
   tant que l'en-tête affiche ses propres boutons. */
.bos-menu-extra { display: none; }

/* ---------------------------------------------------------------
 * Sélecteur de langue
 * ------------------------------------------------------------ */

/* Les deux drapeaux, côte à côte : un clic suffit pour changer de langue. */
.bos-lang {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex-shrink: 0;
}

/* Chaque drapeau se réduit à lui-même : ni code de langue, ni cadre. */
.bos-lang__item {
	display: block;
	padding: 0;
	line-height: 0;
	text-decoration: none;
	opacity: 0.55;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.bos-lang__item:hover,
.bos-lang__item:focus-visible {
	opacity: 1;
	transform: scale(1.12);
}

.bos-lang__item:focus-visible {
	outline: 2px solid var(--bos-gold);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Langue affichée : drapeau bien lisible, souligné d'or pour qu'on la repère
   sans avoir à comparer deux niveaux d'opacité. */
.bos-lang__item.is-active {
	opacity: 1;
	box-shadow: 0 3px 0 -1px var(--bos-gold);
}

.bos-lang__item.is-active:hover { transform: none; }

/* Le drapeau est un SVG : il s'affiche partout, y compris sous Chrome et Edge
   sur Windows, où les drapeaux emoji n'existent pas. */
.bos-lang__flag {
	display: block;
	line-height: 0;
}

.bos-flag {
	display: block;
	width: 26px;
	max-width: none;
	height: auto;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(42, 58, 42, 0.18);
}

.bos-header__nav ul {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2.35rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bos-header__nav a {
	position: relative;
	display: inline-block;
	padding-block: 0.35rem;
	font-size: 0.79rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bos-cream);
	white-space: nowrap;
}

.bos-header__nav a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s var(--bos-ease);
}

.bos-header__nav a:hover::after,
.bos-header__nav .current-menu-item > a::after,
.bos-header__nav .is-active > a::after {
	transform: scaleX(1);
	transform-origin: left;
}

.bos-header__cta {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* ---------------------------------------------------------------
 * Menu du compte client
 * ------------------------------------------------------------ */

.bos-account { position: relative; }

.bos-account__toggle {
	display: block;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	background: none;
	cursor: pointer;
	line-height: 0;
	transition: border-color 0.25s var(--bos-ease, ease);
}

.bos-header--solid .bos-account__toggle { border-color: rgba(42, 58, 42, 0.35); }

.bos-account__toggle:hover,
.bos-account__toggle[aria-expanded="true"] { border-color: var(--bos-gold); }

.bos-account__toggle:focus-visible {
	outline: 2px solid var(--bos-gold);
	outline-offset: 3px;
}

/* Variante visiteur : la pastille est un lien, pas un bouton déroulant. */
.bos-account__toggle--guest {
	display: block;
	text-decoration: none;
	color: inherit;
}

.bos-account__avatar {
	display: block;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
}

.bos-account__avatar--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bos-gold);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
}

/* Les variantes viennent APRES la règle de base : à spécificité égale, c'est
   la dernière qui gagne, et « display: block » annulerait le centrage. */
.bos-account__avatar--guest {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	line-height: 0;
}

.bos-account__avatar--guest svg { display: block; }

.bos-header--solid .bos-account__avatar--guest {
	background: rgba(42, 58, 42, 0.08);
	color: var(--bos-green, #2a3a2a);
}

.bos-account__toggle--guest:hover .bos-account__avatar--guest {
	background: var(--bos-gold);
	color: #fff;
}

.bos-account__menu {
	position: absolute;
	top: calc(100% + 0.6rem);
	right: 0;
	z-index: 60;
	min-width: 210px;
	padding: 0.4rem 0;
	background: #fff;
	border: 1px solid rgba(42, 58, 42, 0.12);
	border-radius: var(--bos-radius, 4px);
	box-shadow: 0 12px 32px rgba(42, 58, 42, 0.16);
}

.bos-account__menu[hidden] { display: none; }

.bos-account__hello {
	margin: 0;
	padding: 0.5rem 1rem 0.6rem;
	border-bottom: 1px solid rgba(42, 58, 42, 0.1);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bos-gold);
}

.bos-account__item {
	display: block;
	padding: 0.65rem 1rem;
	color: var(--bos-green, #2a3a2a);
	font-size: 0.9rem;
	text-decoration: none;
	transition: background-color 0.18s ease;
}

.bos-account__item:hover,
.bos-account__item:focus-visible {
	background: var(--bos-cream, #f8f4e3);
	outline: none;
}

.bos-account__item--out {
	margin-top: 0.35rem;
	border-top: 1px solid rgba(42, 58, 42, 0.1);
	color: #a4462f;
}

/* État après défilement : fond crème, texte vert */
.bos-header.is-scrolled {
	padding-block: 0.45rem;
	background-color: var(--bos-cream);
	box-shadow: 0 1px 0 rgba(42, 58, 42, 0.12);
}
.bos-header.is-scrolled .bos-header__nav a,
.bos-header.is-scrolled .bos-header__brand-text { color: var(--bos-green); }
.bos-header.is-scrolled .bos-header__logo img { height: 58px; }
.bos-header.is-scrolled .bos-btn--light {
	border-color: var(--bos-green);
	color: var(--bos-green);
}
.bos-header.is-scrolled .bos-btn--light:hover {
	background-color: var(--bos-green);
	color: var(--bos-cream);
}
.bos-header.is-scrolled .bos-burger span { background-color: var(--bos-green); }

/* La pastille du compte doit suivre le bandeau : sur fond crème, un contour et
   une silhouette blancs deviennent invisibles. La règle « --solid » couvrait
   les pages intérieures, mais pas l'accueil une fois défilé. */
.bos-header.is-scrolled .bos-account__toggle { border-color: rgba(42, 58, 42, 0.35); }

.bos-header.is-scrolled .bos-account__avatar--guest {
	background: rgba(42, 58, 42, 0.08);
	color: var(--bos-green);
}

.bos-header.is-scrolled .bos-account__toggle:hover,
.bos-header.is-scrolled .bos-account__toggle[aria-expanded="true"] { border-color: var(--bos-gold); }

.bos-header.is-scrolled .bos-account__toggle--guest:hover .bos-account__avatar--guest {
	background: var(--bos-gold);
	color: #fff;
}

.bos-header.is-scrolled .bos-account__avatar--initials { background: var(--bos-gold); color: #fff; }

/* Pages intérieures : header opaque dès le chargement */
.bos-header--solid {
	background-color: var(--bos-cream);
	box-shadow: 0 1px 0 rgba(42, 58, 42, 0.12);
}
.bos-header--solid .bos-header__nav a,
.bos-header--solid .bos-header__brand-text { color: var(--bos-green); }
.bos-header--solid .bos-btn--light { border-color: var(--bos-green); color: var(--bos-green); }
.bos-header--solid .bos-btn--light:hover { background-color: var(--bos-green); color: var(--bos-cream); }
.bos-header--solid .bos-burger span { background-color: var(--bos-green); }

/* Burger mobile */
.bos-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.bos-burger span {
	display: block;
	width: 26px;
	height: 1.5px;
	background-color: var(--bos-cream);
	transition: transform 0.35s var(--bos-ease), opacity 0.25s var(--bos-ease),
	            background-color 0.4s var(--bos-ease);
}
.bos-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.bos-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bos-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1024px) {
	:root { --bos-header-h: 84px; }

	.bos-burger { display: flex; }

	/* Trois éléments sur une seule ligne : aucun ne doit être comprimé par les
	   deux autres. */
	.bos-header__brand { min-width: 0; }
	.bos-burger { flex-shrink: 0; }

	/* La navigation reste dans la bannière : elle n'y porte plus que les
	   drapeaux, placés entre le logo et le bouton du menu. */
	.bos-header__nav {
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}

	/* Panneau plein écran, empilé de haut en bas : les entrées d'abord,
	   l'accès au compte ensuite. Il défile si l'écran est court. */
	.bos-header__panel {
		position: fixed;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2rem;
		padding: calc(var(--bos-header-h) + 1.5rem) 1.5rem 2.5rem;
		overflow-y: auto;
		background-color: var(--bos-green);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s var(--bos-ease), visibility 0.4s var(--bos-ease);
	}
	.bos-header__panel.is-open { opacity: 1; visibility: visible; }
	.bos-header__panel ul { flex-direction: column; gap: 1.75rem; text-align: center; }
	.bos-header__panel a { font-size: 1.05rem; color: var(--bos-cream) !important; }

	/* Les drapeaux se lisent sur le fond sombre de la bannière, panneau ouvert
	   ou fermé : ils ne sont plus dedans. */
	.bos-header__nav > .bos-lang { position: static; transform: none; margin: 0; }

	/* Le compte et la réservation quittent la barre : ils sont dans le panneau,
	   écrits en toutes lettres. */
	.bos-header__cta { display: none; }

	.bos-menu-extra {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
		width: 100%;
		padding-top: 2rem;
		border-top: 1px solid rgba(248, 244, 227, 0.22);
	}

	.bos-menu-account {
		font-size: 1.05rem;
		letter-spacing: 0.04em;
		color: var(--bos-cream) !important;
	}

	.bos-menu-cta { color: var(--bos-green) !important; }

	.bos-header__logo img { height: 58px; }
	.bos-header.is-scrolled .bos-header__logo img { height: 50px; }

	/* Le burger reste au-dessus du panneau plein écran */
	.bos-burger { position: relative; z-index: 2; }
	.bos-burger[aria-expanded="true"] span { background-color: var(--bos-cream) !important; }

	body.bos-nav-open { overflow: hidden; }
}


/* =========================================================
   6. Hero
   ========================================================= */

.bos-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	padding-block: calc(var(--bos-header-h) + 3rem) 5rem;
	overflow: hidden;
	background-color: var(--bos-green);
	color: var(--bos-cream);
	text-align: center;
}

.bos-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.bos-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
}

.bos-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(27, 36, 27, 0.72) 0%,
		rgba(27, 36, 27, 0.52) 40%,
		rgba(27, 36, 27, 0.78) 100%
	);
}

.bos-hero__inner { position: relative; z-index: 1; width: 100%; }

.bos-hero__title {
	margin: 0;
	font-family: var(--bos-font-display);
	font-size: var(--bos-fs-hero);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.02em;
	color: var(--bos-cream);
	text-transform: uppercase;
}

.bos-hero__title span { display: block; }
.bos-hero__title-top { font-size: 0.58em; letter-spacing: 0.24em; }

.bos-hero__subtitle {
	max-width: 34ch;
	margin: 2rem auto 0;
	font-size: var(--bos-fs-lead);
	font-weight: 300;
	line-height: 1.5;
	color: var(--bos-cream);
	opacity: 0.92;
}

.bos-hero__actions { margin-top: 2.75rem; }

.bos-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 2rem;
	z-index: 1;
	transform: translateX(-50%);
	color: var(--bos-cream);
	opacity: 0.7;
	animation: bos-float 2.4s ease-in-out infinite;
}

@keyframes bos-float {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 8px); }
}

/* =========================================================
   7. Sections éditoriales
   ========================================================= */

/* Deux colonnes texte / image */
.bos-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: clamp(2.5rem, 5vw, 5.5rem);
}

.bos-split--reverse .bos-split__media { order: -1; }

.bos-split__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--bos-radius);
}

.bos-split__media--tall img { aspect-ratio: 3 / 4; }

@media (max-width: 860px) {
	.bos-split { grid-template-columns: 1fr; }
	.bos-split--reverse .bos-split__media { order: 0; }
}

/* Section « engagement » centrée */
.bos-intro { max-width: 780px; margin-inline: auto; text-align: center; }
.bos-intro .bos-lead,
.bos-intro .bos-text { max-width: none; margin-inline: auto; }
.bos-intro .bos-rule { margin-inline: auto; }

/* Grille de cartes */
.bos-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1.5rem, 2.6vw, 2.5rem);
	margin-top: 3.5rem;
}

.bos-card {
	display: flex;
	flex-direction: column;
	padding: clamp(1.75rem, 2.6vw, 2.5rem);
	background-color: var(--bos-cream-soft);
	border: 1px solid rgba(42, 58, 42, 0.1);
	border-radius: var(--bos-radius);
	transition: transform 0.4s var(--bos-ease), box-shadow 0.4s var(--bos-ease);
}

.bos-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -24px rgba(27, 36, 27, 0.45);
}

.bos-card__title {
	margin-bottom: 0.75rem;
	font-size: var(--bos-fs-h3);
	font-weight: 700;
}

.bos-card__text { flex: 1; color: var(--bos-green-mid); font-size: 1rem; }

.bos-card__badge {
	display: inline-block;
	margin-top: 1.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--bos-gold);
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bos-gold);
	align-self: flex-start;
}

.bos-section--green .bos-card {
	background-color: rgba(248, 244, 227, 0.06);
	border-color: rgba(248, 244, 227, 0.16);
}
.bos-section--green .bos-card__text { color: var(--bos-cream); opacity: 0.85; }

/* Bandeau image pleine largeur */
.bos-feature {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 620px;
	padding-block: var(--bos-space-section);
	overflow: hidden;
	color: var(--bos-cream);
}

.bos-feature__media { position: absolute; inset: 0; z-index: 0; }
.bos-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.bos-feature__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(27, 36, 27, 0.85) 0%, rgba(27, 36, 27, 0.45) 65%, rgba(27, 36, 27, 0.25) 100%);
}

.bos-feature__inner { position: relative; z-index: 1; max-width: 620px; }
.bos-feature__inner h2 { color: var(--bos-cream); }
.bos-feature__inner .bos-text { color: var(--bos-cream); opacity: 0.9; }

@media (max-width: 700px) {
	.bos-feature__media::after {
		background: linear-gradient(180deg, rgba(27, 36, 27, 0.7) 0%, rgba(27, 36, 27, 0.82) 100%);
	}
}

/* =========================================================
   8. Contact
   ========================================================= */

.bos-contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); }

.bos-contact__list { margin: 2rem 0 0; padding: 0; list-style: none; }

.bos-contact__list li {
	display: flex;
	gap: 1rem;
	padding-block: 0.9rem;
	border-bottom: 1px solid rgba(42, 58, 42, 0.12);
	font-size: 1.02rem;
}

.bos-contact__label {
	flex-shrink: 0;
	min-width: 96px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bos-gold);
	padding-top: 0.28rem;
}

.bos-contact__value a:hover { color: var(--bos-gold); }

.bos-contact__map {
	min-height: 340px;
	border: 0;
	border-radius: var(--bos-radius);
	filter: grayscale(0.35) sepia(0.12);
}

@media (max-width: 860px) {
	.bos-contact { grid-template-columns: 1fr; }
}

/* =========================================================
   9. Galerie
   ========================================================= */

.bos-page-hero {
	padding-block: calc(var(--bos-header-h) + 4rem) 3rem;
	background-color: var(--bos-cream);
	text-align: center;
}

.bos-page-hero__title {
	font-family: var(--bos-font-display);
	font-size: var(--bos-fs-h2);
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bos-contact__maplink {
	margin: 0.65rem 0 0;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bos-gold);
}

.bos-gallery { display: grid; gap: clamp(3.5rem, 6vw, 6rem); }

.bos-gallery__item {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: clamp(2rem, 4.5vw, 4.5rem);
}

.bos-gallery__item:nth-child(even) .bos-gallery__media { order: -1; }

/* Bloc sans photo : le texte occupe toute la largeur. */
.bos-gallery__item--full { grid-template-columns: 1fr; }

/* La photo garde ses proportions d'origine : rien n'est recadré. */
.bos-gallery__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bos-radius);
}

.bos-gallery__number {
	display: block;
	margin-bottom: 1rem;
	font-family: var(--bos-font-display);
	font-size: 2.4rem;
	line-height: 1;
	color: var(--bos-gold);
}

.bos-gallery__title { font-size: var(--bos-fs-h3); margin-bottom: 1rem; }

@media (max-width: 860px) {
	.bos-gallery__item { grid-template-columns: 1fr; }
	.bos-gallery__item:nth-child(even) .bos-gallery__media { order: 0; }
}

/* =========================================================
   10. Contenu WordPress générique (pages, articles, 404)
   ========================================================= */

.bos-entry { padding-block: calc(var(--bos-header-h) + 3.5rem) var(--bos-space-section); }
.bos-entry__title { font-size: var(--bos-fs-h2); margin-bottom: 2rem; }

.bos-entry__content { max-width: 68ch; }
.bos-entry__content h2 { font-size: var(--bos-fs-h3); margin-top: 2.5rem; }
.bos-entry__content a { color: var(--bos-gold); text-decoration: underline; text-underline-offset: 3px; }
.bos-entry__content img { border-radius: var(--bos-radius); margin-block: 1.75rem; }

.bos-entry__content blockquote {
	margin: 2rem 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--bos-gold);
	font-family: var(--bos-font-display);
	font-size: 1.25rem;
	font-style: italic;
}

.bos-archive-list { display: grid; gap: 2.5rem; }
.bos-archive-item { padding-bottom: 2.5rem; border-bottom: 1px solid rgba(42, 58, 42, 0.12); }
.bos-archive-item__title { font-size: var(--bos-fs-h3); }
.bos-archive-item__meta {
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bos-gold);
	margin-bottom: 0.5rem;
}

/* =========================================================
   11. Pied de page
   ========================================================= */

.bos-footer {
	padding-block: clamp(3.5rem, 5vw, 5rem) 2rem;
	background-color: var(--bos-green);
	color: var(--bos-cream);
}

.bos-footer__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: clamp(2rem, 4vw, 4rem);
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(248, 244, 227, 0.16);
}

.bos-footer__logo img { height: 90px; width: auto; }

.bos-footer__tagline {
	margin-top: 1.25rem;
	max-width: 34ch;
	font-size: 0.98rem;
	opacity: 0.8;
}

.bos-footer__heading {
	margin-bottom: 1.25rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bos-gold-light);
}

.bos-footer__list { margin: 0; padding: 0; list-style: none; }
.bos-footer__list li { margin-bottom: 0.7rem; font-size: 0.97rem; opacity: 0.85; }
.bos-footer__list a:hover { color: var(--bos-gold-light); opacity: 1; }

.bos-footer__social { display: flex; gap: 1rem; margin-top: 1.75rem; }

.bos-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(248, 244, 227, 0.3);
	border-radius: 50%;
	transition: background-color 0.3s var(--bos-ease), border-color 0.3s var(--bos-ease);
}
.bos-footer__social a:hover {
	background-color: var(--bos-cream);
	border-color: var(--bos-cream);
	color: var(--bos-green);
}
.bos-footer__social svg { width: 17px; height: 17px; fill: currentColor; }

.bos-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 2rem;
	font-size: 0.83rem;
	opacity: 0.7;
}

.bos-footer__legal a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bos-footer__legal a:hover { color: var(--bos-gold-light); }
.bos-footer__legal span { padding-inline: 0.35rem; opacity: 0.5; }

@media (max-width: 860px) {
	.bos-footer__top { grid-template-columns: 1fr; }
}

/* =========================================================
   12. Révélation au défilement
   ========================================================= */

.bos-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.85s var(--bos-ease), transform 0.85s var(--bos-ease);
}

.bos-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.bos-reveal { opacity: 1; transform: none; }
}

/* Barre d'admin WordPress */
.admin-bar .bos-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .bos-header { top: 46px; }
}

/* ---------------------------------------------------------------
 * Diaporama de la galerie
 * ------------------------------------------------------------ */

.bos-slider { position: relative; }

/* Le cadre garde une taille fixe : sans cela, la page sauterait à chaque
   changement de photo, les proportions variant d'un cliché à l'autre.
   Les photos sont affichées entières (« contain ») plutôt que recadrées. */
.bos-slider__viewport {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	border-radius: var(--bos-radius);
	background: rgba(42, 58, 42, 0.07);
}

.bos-slider__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	display: none;
}

.bos-slider__slide.is-active { display: block; }

.bos-slider__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	user-select: none;
}

.bos-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.86);
	color: var(--bos-green);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.25s ease, background-color 0.25s ease;
}

.bos-slider:hover .bos-slider__arrow,
.bos-slider__arrow:focus-visible { opacity: 1; }

.bos-slider__arrow:hover { background: #fff; }
.bos-slider__arrow--prev { left: 0.75rem; }
.bos-slider__arrow--next { right: 0.75rem; }

.bos-slider__arrow:focus-visible {
	outline: 2px solid var(--bos-gold);
	outline-offset: 2px;
}

.bos-slider__count {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 2;
	margin: 0;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: rgba(42, 58, 42, 0.72);
	color: var(--bos-cream);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
}

.bos-slider__hint {
	margin: 0.5rem 0 0;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bos-gold);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.bos-slider:hover .bos-slider__hint { opacity: 1; }

/* Sur écran tactile, il n'y a pas de survol : flèches et indice toujours visibles. */
@media (hover: none) {
	.bos-slider__arrow,
	.bos-slider__hint { opacity: 1; }
}

/* --- Fenêtre d'agrandissement --- */

.bos-no-scroll { overflow: hidden; }

.bos-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(20, 28, 20, 0.93);
}

.bos-lightbox[hidden] { display: none; }

.bos-lightbox__img {
	max-width: 100%;
	max-height: 88vh;
	width: auto;
	height: auto;
	border-radius: var(--bos-radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.bos-lightbox__arrow,
.bos-lightbox__close {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.bos-lightbox__arrow:hover,
.bos-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
}

.bos-lightbox__close {
	position: absolute;
	top: clamp(1rem, 3vw, 2rem);
	right: clamp(1rem, 3vw, 2rem);
}

@media (max-width: 700px) {
	.bos-lightbox { gap: 0.4rem; padding: 0.75rem; }
	.bos-lightbox__arrow { width: 38px; height: 38px; font-size: 1.3rem; }
}

/* Réseaux sociaux dans la section « Nous joindre ». */
.bos-contact__social {
	display: flex;
	gap: 0.9rem;
	margin-top: 1.75rem;
}

.bos-contact__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(42, 58, 42, 0.22);
	border-radius: 50%;
	color: var(--bos-green);
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.bos-contact__social a:hover {
	background: var(--bos-green);
	border-color: var(--bos-green);
	color: var(--bos-cream);
}

.bos-contact__social a:focus-visible {
	outline: 2px solid var(--bos-gold);
	outline-offset: 2px;
}

.bos-contact__social svg { width: 17px; height: 17px; fill: currentColor; display: block; }

/* =========================================================
   13. Éléments libres
   ---------------------------------------------------------
   Les blocs que l'exploitant ajoute lui-même dans le
   Personnalisateur. Ils réutilisent les classes de titre, de
   texte et de bouton du thème : un élément ajouté ressemble
   au reste du site sans réglage supplémentaire.
   ========================================================= */

.bos-el-zone {
	padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 5rem);
}

.bos-el-grille {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* Cinq crans, une seule échelle : la largeur et la taille du
   texte bougent ensemble, ce que font les deux boutons
   « agrandir » et « réduire » de la barre d'outils. */
.bos-el {
	--bos-el-echelle: 1;
	flex: 1 1 100%;
	min-width: 0;
	font-size: calc(var(--bos-fs-body) * var(--bos-el-echelle));
}

.bos-el--t1 { --bos-el-echelle: 0.88; flex-basis: 220px; max-width: 300px; }
.bos-el--t2 { --bos-el-echelle: 0.94; flex-basis: 300px; max-width: 440px; }
.bos-el--t3 { --bos-el-echelle: 1;    max-width: var(--bos-container-narrow); }
.bos-el--t4 { --bos-el-echelle: 1.08; max-width: 1120px; }
.bos-el--t5 { --bos-el-echelle: 1.16; max-width: 100%; }

.bos-el .bos-title {
	font-size: calc(var(--bos-fs-h2) * var(--bos-el-echelle));
}

.bos-el__titre {
	margin-bottom: 0.75rem;
	font-size: calc(var(--bos-fs-h3) * var(--bos-el-echelle));
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.bos-el .bos-text {
	font-size: inherit;
	max-width: 68ch;
}

.bos-el__actions {
	margin-top: 1.6rem;
}

/* --- photo et vidéo --- */

.bos-el__figure {
	margin: 0;
}

.bos-el__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bos-radius);
}

.bos-el__video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bos-radius);
	background: var(--bos-green);
}

/* Cadre 16/9 : les intégrations YouTube et Vimeo arrivent avec
   une largeur fixe, qui déborderait sur un téléphone. */
.bos-el__embed {
	position: relative;
	padding-top: 56.25%;
	border-radius: var(--bos-radius);
	overflow: hidden;
	background: var(--bos-green);
}

.bos-el__embed iframe,
.bos-el__embed embed,
.bos-el__embed object,
.bos-el__embed video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.bos-el__legende {
	margin-top: 0.7rem;
	font-size: 0.9em;
	font-style: italic;
	color: var(--bos-sage);
}

/* --- menu déroulant --- */

.bos-el__details {
	border-top: 1px solid rgba(42, 58, 42, 0.18);
	border-bottom: 1px solid rgba(42, 58, 42, 0.18);
}

.bos-el__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	font-family: var(--bos-font-body);
	font-size: 1.02em;
	font-weight: 600;
	color: var(--bos-green);
	cursor: pointer;
	list-style: none;
}

.bos-el__summary::-webkit-details-marker { display: none; }

.bos-el__summary::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--bos-gold);
	border-bottom: 1.5px solid var(--bos-gold);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.25s var(--bos-ease);
}

.bos-el__details[open] .bos-el__summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.bos-el__contenu {
	padding-bottom: 1.3rem;
}

.bos-el__liste {
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
}

.bos-el__liste li + li { margin-top: 0.45rem; }

.bos-el__liste a {
	color: var(--bos-green-mid);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bos-el__liste a:hover { color: var(--bos-gold); }

/* --- bloc --- */

.bos-el__carte {
	height: 100%;
	background: var(--bos-cream-soft);
	border: 1px solid rgba(42, 58, 42, 0.1);
	border-radius: var(--bos-radius);
	overflow: hidden;
}

.bos-el__carte-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.bos-el__carte-corps {
	padding: clamp(1.4rem, 1rem + 1.2vw, 2.2rem);
}

/* --- séparateur --- */

.bos-el__separateur {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background-color: rgba(42, 58, 42, 0.18);
}

/* --- section pleine largeur --- */

.bos-el--section {
	background-color: var(--bos-cream-soft);
}

.bos-el--section.bos-el--fond {
	background-position: center;
	background-size: cover;
	color: var(--bos-cream);
}

/* Voile sombre : sans lui, un titre clair posé sur une photo
   claire devient illisible. */
.bos-el--section.bos-el--fond::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(27, 36, 27, 0.55), rgba(27, 36, 27, 0.72));
}

.bos-el--section .bos-container { position: relative; }

.bos-el--section.bos-el--fond .bos-title,
.bos-el--section.bos-el--fond .bos-text { color: var(--bos-cream); }

.bos-el--section.bos-el--fond .bos-eyebrow { color: var(--bos-gold-light); }

.bos-el--section .bos-el__inner {
	max-width: var(--bos-container-narrow);
}

.bos-el--section.bos-el--t5 .bos-el__inner { max-width: 100%; }

/* --- aperçu du Personnalisateur --- */

.bos-el--selectionne {
	outline: 2px dashed var(--bos-gold);
	outline-offset: 4px;
}