/* =========================================================================
   UCP — 03 · COMPOSANTS
   -------------------------------------------------------------------------
   La bibliothèque de blocs de la maquette. Chaque composant fonctionne seul :
   collé dans un module Code de Divi, ou posé en « Classe CSS » sur un module
   Divi natif quand la structure s'y prête.

   Sommaire
     A. Éléments d'écriture (sur-titre, filet, en-tête de section)
     B. En-tête et fil d'Ariane
     C. Heros
     D. Réassurance et garanties
     E. Cartes séjour et article
     F. Carrousel
     G. Portes d'entrée
     H. Moteur de recherche et filtres
     I. Fiche séjour (gabarit deux colonnes)
     J. Blocs de contenu de fiche
     K. FAQ
     L. Bandeaux d'appel à l'action
     M. Méthode et équipe
     N. Formulaire projet
     O. Pied de page
   ========================================================================= */


/* =========================================================================
   A. ÉLÉMENTS D'ÉCRITURE
   ========================================================================= */

/* Le petit label en capitales très espacées qui ouvre chaque section. */
.ucp-eyebrow {
	margin: 0 0 var(--ucp-space-3);
	color: var(--ucp-accent-warm);
	font-size: var(--ucp-fs-micro);
	font-weight: var(--ucp-fw-bold);
	letter-spacing: var(--ucp-ls-eyebrow);
	text-transform: uppercase;
	line-height: 1.4;
}

.ucp-on-dark .ucp-eyebrow,
.ucp-eyebrow--gold {
	color: var(--ucp-accent);
}

/* Le filet doré. Seul, il sert de respiration au-dessus d'un titre. */
.ucp-rule {
	width: var(--ucp-rule-w);
	height: var(--ucp-rule-h);
	margin-bottom: var(--ucp-space-8);
	background: var(--ucp-accent);
}

.ucp-rule--center { margin-left: auto; margin-right: auto; }
.ucp-rule--short  { width: 28px; height: 2px; margin-bottom: var(--ucp-space-5); }

/* En-tête de section : sur-titre, titre, sous-titre. */
.ucp-section-header      { margin-bottom: var(--ucp-space-10); }
.ucp-section-header--center {
	max-width: var(--ucp-max-text);
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.ucp-section-title {
	margin: 0 0 var(--ucp-space-3);
	font-size: var(--ucp-fs-h2);
	font-weight: var(--ucp-fw-black);
	line-height: var(--ucp-lh-heading);
	letter-spacing: var(--ucp-ls-heading);
	color: var(--ucp-night);
}

.ucp-section-sub {
	margin: 0;
	font-size: var(--ucp-fs-body);
	color: var(--ucp-text-muted);
	line-height: var(--ucp-lh-body);
}

.ucp-on-dark .ucp-section-title { color: var(--ucp-text-invert); }
.ucp-on-dark .ucp-section-sub   { color: var(--ucp-text-invert-dim); }

/* Le halo doré radial des sections sombres. À poser sur le conteneur. */
.ucp-glow {
	position: relative;
	overflow: hidden;
}

.ucp-glow > * { position: relative; z-index: 2; }

.ucp-glow::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 800px;
	height: 800px;
	transform: translate(-50%, -50%);
	background: var(--ucp-glow);
	pointer-events: none;
	z-index: 1;
}

.ucp-glow--corner::after {
	top: -100px;
	left: auto;
	right: -100px;
	width: 600px;
	height: 600px;
	transform: none;
}


/* =========================================================================
   B. EN-TÊTE ET FIL D'ARIANE
   ========================================================================= */

.ucp-header {
	display: flex;
	align-items: center;
	gap: var(--ucp-space-8);
	padding: 18px var(--ucp-gutter);
	background: var(--ucp-cream);
	border-bottom: 1px solid var(--ucp-border);
}

.ucp-header__logo {
	display: flex;
	align-items: center;
	gap: var(--ucp-space-4);
	color: inherit;
	text-decoration: none;
}

.ucp-header__logo img { height: 64px; width: auto; }

.ucp-header__name {
	display: block;
	font-family: var(--ucp-font-serif);
	font-size: 0.875rem;
	font-weight: var(--ucp-fw-bold);
	letter-spacing: 0.28em;
	line-height: 1;
	color: var(--ucp-brand);
	margin-bottom: 4px;
}

.ucp-header__tagline {
	display: block;
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: var(--ucp-fs-micro);
	font-weight: var(--ucp-fw-semi);
	letter-spacing: var(--ucp-ls-label);
	text-transform: uppercase;
	color: var(--ucp-accent-warm);
}

/* La navigation pousse le bouton de droite grâce au `margin-right: auto`. */
.ucp-nav {
	display: flex;
	align-items: center;
	gap: var(--ucp-space-8);
	margin-right: auto;
}

.ucp-nav a {
	color: var(--ucp-text);
	font-size: var(--ucp-fs-sm);
	font-weight: var(--ucp-fw-medium);
	text-decoration: none;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
	transition: color var(--ucp-transition), border-color var(--ucp-transition);
}

.ucp-nav a:hover        { color: var(--ucp-brand); border-bottom-color: var(--ucp-accent); }
.ucp-nav a.ucp-is-active,
.ucp-nav .current-menu-item > a {
	color: var(--ucp-brand);
	font-weight: var(--ucp-fw-bold);
	border-bottom-color: var(--ucp-accent);
}

.ucp-breadcrumb {
	padding: 16px var(--ucp-gutter);
	background: var(--ucp-cream);
	font-size: var(--ucp-fs-xs);
	color: var(--ucp-text-muted);
}

.ucp-breadcrumb a       { color: var(--ucp-text-muted); text-decoration: none; }
.ucp-breadcrumb a:hover { color: var(--ucp-brand); }
.ucp-breadcrumb__sep    { color: var(--ucp-accent); margin: 0 var(--ucp-space-2); }
.ucp-breadcrumb__current{ color: var(--ucp-brand); font-weight: var(--ucp-fw-bold); }

/* Fil d'Ariane posé en surimpression sur un hero photo. */
.ucp-breadcrumb--overlay {
	position: absolute;
	top: 24px;
	left: var(--ucp-gutter);
	z-index: 3;
	padding: 0;
	background: none;
	color: var(--ucp-text-invert-dim);
}

.ucp-breadcrumb--overlay a        { color: var(--ucp-text-invert-dim); }
.ucp-breadcrumb--overlay a:hover  { color: var(--ucp-accent); }
.ucp-breadcrumb--overlay .ucp-breadcrumb__current { color: var(--ucp-cream); }


/* =========================================================================
   C. HEROS
   ========================================================================= */

/* --- Hero d'accueil : dégradé, texte aligné à gauche --------------------- */

.ucp-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 560px;
	padding: clamp(3.5rem, 8vw, 6.25rem) var(--ucp-gutter);
	overflow: hidden;
	background: var(--ucp-night);
}

.ucp-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #1F4332 0%, #1E1E20 50%, #2A1F18 100%);
	opacity: 0.95;
}

.ucp-hero::after {
	content: '';
	position: absolute;
	top: -100px;
	right: -100px;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(212, 175, 55, 0.18) 0%, transparent 65%);
	pointer-events: none;
}

.ucp-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 720px;
}

.ucp-hero__title {
	margin: 0 0 var(--ucp-space-6);
	font-size: var(--ucp-fs-hero);
	font-weight: var(--ucp-fw-bold);
	line-height: var(--ucp-lh-tight);
	letter-spacing: var(--ucp-ls-hero);
	color: var(--ucp-cream);
}

.ucp-hero__title em {
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-weight: var(--ucp-fw-normal);
	color: var(--ucp-accent);
}

.ucp-hero__sub {
	max-width: 540px;
	margin: 0 0 var(--ucp-space-10);
	font-size: var(--ucp-fs-lead);
	line-height: var(--ucp-lh-body);
	color: rgba(244, 239, 231, 0.82);
}

.ucp-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ucp-space-5);
}

/* --- Hero court : bandeau centré des pages catalogue et blog ------------- */

.ucp-hero--court {
	display: block;
	min-height: 0;
	padding: clamp(2.75rem, 6vw, 5rem) var(--ucp-gutter);
	text-align: center;
	background: linear-gradient(135deg, #1A2A1F 0%, #1F4332 50%, #2A1F18 100%);
}

.ucp-hero--court::before { content: none; }

.ucp-hero--court::after {
	top: 50%;
	left: 50%;
	right: auto;
	width: 800px;
	height: 800px;
	transform: translate(-50%, -50%);
	background: var(--ucp-glow);
}

.ucp-hero--court .ucp-hero__inner {
	max-width: var(--ucp-max-text);
	margin: 0 auto;
}

.ucp-hero--court .ucp-rule { margin-left: auto; margin-right: auto; margin-bottom: var(--ucp-space-6); }

.ucp-hero--court .ucp-hero__sub {
	max-width: none;
	margin-bottom: 0;
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.1875rem);
	color: rgba(244, 239, 231, 0.92);
}

/* La variante ardoise du Carnet remplace le dégradé vert par un gris. */
.ucp-theme-slate .ucp-hero--court {
	background: linear-gradient(135deg, #26262A 0%, #3C3C42 50%, #161618 100%);
}

/* --- Hero de fiche séjour : photo plein écran, texte en bas -------------- */

.ucp-hero--sejour {
	align-items: flex-end;
	min-height: 100vh;
	min-height: 100svh;   /* évite le saut dû aux barres de navigateur mobile */
	padding: 0;
}

.ucp-hero--sejour::before,
.ucp-hero--sejour::after { content: none; }

.ucp-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ucp-hero__bg img,
.ucp-hero__bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* La vidéo de couverture se pose sur la photo, et n'apparaît qu'une fois
   qu'elle joue vraiment.

   Elle est en `opacity: 0` par défaut, pas en `display: none` : un élément
   masqué ne se charge pas et ne peut pas déclencher l'événement qui révèle
   qu'il a démarré. Il est donc là, chargé, invisible, et le JavaScript pose
   `ucp-is-playing` à la première image affichée.

   Le fondu d'une seconde n'est pas de la coquetterie. Sans lui, la photo est
   remplacée d'un coup par une image de film légèrement différente, et l'oeil
   lit ce saut comme un défaut de chargement. Avec, il ne le lit pas du tout :
   la couverture se met simplement à bouger. */
.ucp-hero__video {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	transition: opacity 1s ease;
	pointer-events: none;
}

.ucp-hero__video.ucp-is-playing { opacity: 1; }

/* Le voile de lisibilité repasse au-dessus de la vidéo, sans quoi le titre se
   retrouverait écrit à même l'image dès que la lecture démarre. */
.ucp-hero__bg::after { z-index: 2; }

.ucp-hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(30, 30, 32, 0.35) 0%, rgba(30, 30, 32, 0.45) 45%, rgba(30, 30, 32, 0.88) 100%);
}

.ucp-hero--sejour .ucp-hero__inner {
	max-width: var(--ucp-max);
	width: 100%;
	padding: clamp(2.5rem, 6vw, 3.75rem) var(--ucp-gutter);
}

.ucp-hero--sejour .ucp-hero__title { max-width: 900px; margin-bottom: var(--ucp-space-5); }
.ucp-hero--sejour .ucp-hero__title em { font-weight: var(--ucp-fw-bold); }

.ucp-hero--sejour .ucp-hero__sub {
	max-width: 740px;
	margin-bottom: 0;
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.3125rem);
}

/* Bandeau de caractéristiques intégré au bas du hero. */
.ucp-hero__info {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ucp-space-6) var(--ucp-space-12);
	margin-top: var(--ucp-space-10);
	padding-top: var(--ucp-space-6);
	border-top: 1px solid rgba(212, 175, 55, 0.35);
}

.ucp-hero__info-label {
	margin: 0 0 6px;
	font-size: var(--ucp-fs-micro);
	font-weight: var(--ucp-fw-semi);
	letter-spacing: var(--ucp-ls-label);
	text-transform: uppercase;
	color: rgba(244, 239, 231, 0.6);
}

.ucp-hero__info-value {
	margin: 0;
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: 1.25rem;
	font-weight: var(--ucp-fw-medium);
	color: var(--ucp-accent);
}


/* =========================================================================
   D. RÉASSURANCE ET GARANTIES
   ========================================================================= */

/* Les quatre chiffres clés sous le hero d'accueil. */
.ucp-pillars {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ucp-space-10);
	padding: clamp(2.5rem, 5vw, 3.5rem) var(--ucp-gutter);
	background: var(--ucp-cream);
	border-bottom: 1px solid var(--ucp-border);
}

.ucp-pillar__value {
	margin: 0 0 var(--ucp-space-2);
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
	font-weight: var(--ucp-fw-medium);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ucp-brand);
}

.ucp-pillar__label {
	margin: 0;
	font-size: var(--ucp-fs-xs);
	line-height: 1.5;
	color: var(--ucp-text-muted);
}

/* Les garanties d'agence : pastilles rondes séparées par un filet. */
.ucp-guarantees {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	max-width: 1100px;
	margin: 0 auto var(--ucp-space-10);
}

.ucp-guarantee {
	padding: var(--ucp-space-6) var(--ucp-space-5);
	text-align: center;
	border-right: 1px solid var(--ucp-border-invert);
}

.ucp-guarantee:last-child { border-right: none; }

.ucp-guarantee__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 auto var(--ucp-space-4);
	border: 1.5px solid var(--ucp-accent);
	border-radius: 50%;
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: 1rem;
	font-weight: var(--ucp-fw-bold);
	color: var(--ucp-accent);
}

.ucp-guarantee__name {
	margin: 0 0 var(--ucp-space-2);
	font-size: var(--ucp-fs-sm);
	font-weight: var(--ucp-fw-bold);
	color: var(--ucp-text-invert);
}

.ucp-guarantee__desc {
	margin: 0;
	font-size: var(--ucp-fs-xs);
	line-height: 1.5;
	color: rgba(244, 239, 231, 0.65);
}

/* La phrase de conclusion, isolée sous un filet. */
.ucp-statement {
	max-width: 800px;
	margin: 0 auto;
	padding-top: var(--ucp-space-8);
	border-top: 1px solid var(--ucp-border-invert);
	text-align: center;
}

.ucp-statement p {
	margin: 0;
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: var(--ucp-fs-lead);
	line-height: var(--ucp-lh-body);
	color: rgba(244, 239, 231, 0.92);
}

.ucp-statement strong {
	font-family: var(--ucp-font-sans);
	font-style: normal;
	font-weight: var(--ucp-fw-medium);
	color: var(--ucp-accent);
}


/* =========================================================================
   E. CARTES SÉJOUR ET ARTICLE
   ========================================================================= */

/* --- Carte séjour large (carrousel d'accueil) --------------------------- */

.ucp-sejour-wide {
	display: flex;
	align-items: stretch;
	min-height: 540px;
	overflow: hidden;
	background: var(--ucp-cream);
	color: inherit;
	text-decoration: none;
}

.ucp-sejour-wide__media {
	position: relative;
	flex: 0 0 60%;
	overflow: hidden;
	background: var(--ucp-night);
}

.ucp-sejour-wide__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ucp-sejour-wide__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.4) 100%);
	z-index: 1;
}

.ucp-sejour-wide__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(1.75rem, 3vw, 3.25rem) clamp(1.5rem, 4vw, 4rem);
}

/* --- Badge (PHARE / SAISON / DISPO) ------------------------------------- */

.ucp-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	padding: 7px 13px;
	background: var(--ucp-cream);
	color: var(--ucp-night);
	font-size: var(--ucp-fs-micro);
	font-weight: var(--ucp-fw-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ucp-badge--gold { background: var(--ucp-accent); }

/* --- Métadonnées communes aux cartes séjour ----------------------------- */

.ucp-sejour__pays {
	margin: 0 0 var(--ucp-space-3);
	font-size: var(--ucp-fs-micro);
	font-weight: var(--ucp-fw-bold);
	letter-spacing: var(--ucp-ls-label);
	text-transform: uppercase;
	color: var(--ucp-accent-warm);
}

.ucp-sejour__name {
	margin: 0 0 var(--ucp-space-4);
	font-size: clamp(1.375rem, 1rem + 1.4vw, 2rem);
	font-weight: var(--ucp-fw-bold);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--ucp-night);
}

.ucp-sejour__saison {
	margin: 0 0 var(--ucp-space-3);
	font-size: var(--ucp-fs-eyebrow);
	font-weight: var(--ucp-fw-bold);
	letter-spacing: var(--ucp-ls-label);
	text-transform: uppercase;
	color: var(--ucp-accent);
}

.ucp-sejour__desc,
.ucp-sejour__meta {
	margin: 0 0 var(--ucp-space-5);
	font-size: var(--ucp-fs-sm);
	line-height: var(--ucp-lh-body);
	color: var(--ucp-text-muted);
}

.ucp-sejour__meta {
	display: grid;
	gap: 0.45rem;
	padding: 0 !important;
	list-style: none !important;
	text-align: left;
}

.ucp-sejour__meta li {
	position: relative;
	padding-left: 1rem;
	list-style: none !important;
	color: var(--ucp-text-muted);
}

.ucp-sejour__meta li::marker {
	content: '';
}

.ucp-sejour__meta li::before {
	content: '•';
	position: absolute;
	left: 0;
	color: var(--ucp-accent);
}

.ucp-sejour__meta-label {
	font-weight: var(--ucp-fw-bold);
	color: var(--ucp-night);
}

.ucp-sejour__price-row {
	display: flex;
	align-items: center;
	gap: var(--ucp-space-4);
	padding-top: var(--ucp-space-6);
	border-top: 1px solid var(--ucp-border);
}

.ucp-sejour__price {
	flex: 1 1 auto;
	margin: 0;
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: 1.25rem;
	font-weight: var(--ucp-fw-medium);
	color: var(--ucp-night);
}

.ucp-sejour__price small {
	font-family: var(--ucp-font-sans);
	font-style: normal;
	font-size: var(--ucp-fs-xs);
	font-weight: var(--ucp-fw-medium);
	letter-spacing: 0.03em;
	color: var(--ucp-text-muted);
}

.ucp-arrow {
	color: var(--ucp-accent);
	font-size: 1.375rem;
	font-weight: var(--ucp-fw-bold);
	line-height: 1;
}

/* --- Grille de cartes (catalogue séjours et carnet) --------------------- */

.ucp-grid {
	display: grid;
	gap: var(--ucp-space-5);
	max-width: var(--ucp-max);
	margin: 0 auto;
}

.ucp-grid--4 { grid-template-columns: repeat(4, 1fr); gap: var(--ucp-space-4); }
.ucp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ucp-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* --- Carte séjour de catalogue ------------------------------------------ */

.ucp-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--ucp-white);
	color: inherit;
	text-decoration: none;
	transition: transform var(--ucp-transition), box-shadow var(--ucp-transition);
}

.ucp-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ucp-shadow-card);
}

/* Proportion et non hauteur fixe. À 220 px de haut dans une colonne qui varie
   de 314 px sur téléphone à 400 px sur grand écran, la photo changeait de
   cadrage d'un écran à l'autre : presque carrée sur mobile, très allongée sur
   moniteur. Une proportion garde le même cadrage partout, donc la même photo. */
.ucp-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--ucp-night);
}

.ucp-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ucp-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.62) 100%);
}

/* --- Le corps d'une vignette de séjour ----------------------------------

   Quatre informations, dans l'ordre où elles servent à décider :

     pays     où c'est, en petit et en doré
     titre    quoi, il porte déjà l'espèce
     faits    comment et combien de temps
     prix     à partir de, discret

   L'espèce n'apparaît pas séparément : elle est dans le titre du séjour, et
   une vignette n'a la place que de ce qui ne se lit nulle part ailleurs sur
   elle. « Safari Buffle Caffer » suivi de « Buffle Caffer » ne dit rien de
   plus, ça remplit une ligne.
   ------------------------------------------------------------------------- */

.ucp-card__nom {
	/* Deux lignes au maximum, coupées proprement au besoin. Sans cette
	   limite, un titre long décale son prix vers le bas et la rangée de
	   vignettes perd son alignement : trois cartes côte à côte dont les prix
	   ne sont pas à la même hauteur se comparent beaucoup moins bien. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0 0 var(--ucp-space-2);
	font-size: 1.0625rem;
	font-weight: var(--ucp-fw-bold);
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--ucp-night);
}

.ucp-card__faits {
	margin: 0;
	font-size: var(--ucp-fs-xs);
	line-height: 1.45;
	color: var(--ucp-text-muted);
}

/* Un fait par ligne. Le mode de chasse porte ses propres points médians
   (« Approche · appel · pistage ») : en poser un de plus avant la durée
   mélangeait deux niveaux de séparation dans la même ponctuation. */
.ucp-card__fait { display: block; }

/* Le prix est repoussé en bas de carte par `margin-top: auto`, ce qui aligne
   les prix de toute une rangée quel que soit le nombre de lignes du titre. */
.ucp-card__prix {
	display: flex;
	align-items: baseline;
	gap: var(--ucp-space-2);
	margin: var(--ucp-space-4) 0 0;
	padding-top: var(--ucp-space-3);
	border-top: 1px solid var(--ucp-border);
	font-size: var(--ucp-fs-xs);
	color: var(--ucp-text-muted);
}

.ucp-card__prix .ucp-arrow {
	margin-left: auto;
	color: var(--ucp-accent);
	font-size: 1rem;
}

/* Titre incrusté en bas de la photo. Conservé pour les pages qui l'utilisent
   encore, mais ce n'est plus la vignette de catalogue : il obligeait à
   assombrir le bas de chaque photo, et se lisait mal dès que l'image était
   claire à cet endroit. */
.ucp-card__overlay-title {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 14px;
	z-index: 2;
	margin: 0;
	font-size: 1.125rem;
	font-weight: var(--ucp-fw-bold);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--ucp-cream);
}

.ucp-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--ucp-space-4) 18px var(--ucp-space-5);
}

.ucp-card__body .ucp-sejour__meta { flex: 1 1 auto; margin-bottom: var(--ucp-space-4); font-size: var(--ucp-fs-xs); }
.ucp-card__body .ucp-sejour__price-row { padding-top: var(--ucp-space-3); }
.ucp-card__body .ucp-sejour__price { font-size: 1rem; }

/* La ligne de faits pousse le prix vers le bas de la carte, et c'est elle qui
   absorbe la hauteur restante quand un titre tient sur une ligne et le voisin
   sur deux. */
.ucp-card__body .ucp-card__faits { flex: 1 1 auto; }

/* Une vignette de séjour n'a plus de dégradé sur la photo : il n'y a plus de
   texte à rendre lisible par-dessus. */
.ucp-card:has(.ucp-card__nom) .ucp-card__media::after { content: none; }

/* --- Carte article (carnet) --------------------------------------------- */

.ucp-card--article .ucp-card__media { height: 210px; }
.ucp-card--article .ucp-card__media::after { content: none; }

.ucp-card__tag {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 6px 11px;
	background: var(--ucp-brand);
	color: var(--ucp-accent);
	font-size: 0.5625rem;
	font-weight: var(--ucp-fw-bold);
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.ucp-card__title {
	margin: 0 0 var(--ucp-space-3);
	font-size: 1.1875rem;
	font-weight: var(--ucp-fw-black);
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--ucp-night);
}

.ucp-card__excerpt {
	flex: 1 1 auto;
	margin: 0 0 var(--ucp-space-4);
	font-size: var(--ucp-fs-sm);
	line-height: var(--ucp-lh-body);
	color: var(--ucp-text-muted);
}

.ucp-card__meta {
	display: flex;
	align-items: center;
	padding-top: var(--ucp-space-3);
	border-top: 1px solid var(--ucp-border);
	font-size: var(--ucp-fs-eyebrow);
	letter-spacing: 0.04em;
	color: var(--ucp-slate-400);
}

.ucp-card__meta .ucp-dot   { margin: 0 var(--ucp-space-2); color: var(--ucp-accent); }
.ucp-card__meta .ucp-arrow { margin-left: auto; font-size: 1rem; }

.ucp-card--article .ucp-card__body { padding: 22px 22px 24px; }


/* =========================================================================
   F. CARROUSEL
   -------------------------------------------------------------------------
   Un seul mécanisme pour tous les carrousels du site (séjours en vedette,
   galerie photo, trophées, témoignages). Le JS ne fait que déplacer la piste
   et synchroniser les puces ; toute la mise en page reste ici.
   ========================================================================= */

.ucp-carousel { position: relative; }

.ucp-carousel__viewport { overflow: hidden; }

.ucp-carousel__track {
	display: flex;
	flex-wrap: nowrap;
	transition: transform var(--ucp-transition-slow);
}

/* Chaque enfant direct de la piste occupe exactement une vue. */
.ucp-carousel__track > * {
	flex: 0 0 100%;
	min-width: 0;
}

.ucp-carousel__btn {
	position: absolute;
	top: 50%;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	transform: translateY(-50%);
	background: var(--ucp-cream);
	border: 1.5px solid var(--ucp-night);
	color: var(--ucp-night);
	font-size: 1.125rem;
	font-weight: var(--ucp-fw-bold);
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--ucp-transition), color var(--ucp-transition);
}

.ucp-carousel__btn:hover      { background: var(--ucp-night); color: var(--ucp-accent); }
.ucp-carousel__btn[disabled]  { opacity: 0.22; pointer-events: none; }
.ucp-carousel__btn--prev      { left: var(--ucp-space-5); }
.ucp-carousel__btn--next      { right: var(--ucp-space-5); }

/* Variante compacte pour les carrousels internes à une fiche. */
.ucp-carousel--inset .ucp-carousel__btn      { width: 44px; height: 44px; background: var(--ucp-night); color: var(--ucp-accent); border: 0; }
.ucp-carousel--inset .ucp-carousel__btn--prev{ left: -10px; }
.ucp-carousel--inset .ucp-carousel__btn--next{ right: -10px; }

.ucp-carousel__dots {
	display: flex;
	justify-content: center;
	gap: var(--ucp-space-2);
	margin-top: var(--ucp-space-6);
}

.ucp-carousel__dot {
	width: 28px;
	height: 3px;
	padding: 0;
	border: 0;
	background: var(--ucp-border);
	cursor: pointer;
	transition: width var(--ucp-transition), background-color var(--ucp-transition);
}

.ucp-carousel__dot.ucp-is-active { width: 48px; background: var(--ucp-brand); }

.ucp-carousel--dots-round .ucp-carousel__dot { width: 9px; height: 9px; border-radius: 50%; }
.ucp-carousel--dots-round .ucp-carousel__dot.ucp-is-active { width: 9px; }

/* Le carrousel d'accueil déborde volontairement des marges de la section. */
.ucp-carousel--bleed .ucp-carousel__viewport { margin: 0 calc(-1 * var(--ucp-gutter)); }

/* Grilles utilisées comme « pages » d'un carrousel. */
.ucp-carousel-page {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ucp-space-2);
}

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

.ucp-media-tile {
	height: 200px;
	overflow: hidden;
	background: var(--ucp-border);
}

.ucp-media-tile img { width: 100%; height: 100%; object-fit: cover; }

.ucp-media-tile--tall { height: 240px; }

/* Emplacement en attente de photo. Volontairement visible : c'est un rappel
   qu'il reste des images à fournir, pas un élément de design. */
.ucp-media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200px;
	background: var(--ucp-cream);
	border: 1px dashed var(--ucp-border-strong);
	font-size: var(--ucp-fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ucp-sand-400);
}

.ucp-media-placeholder--tall { height: 240px; }


/* =========================================================================
   G. PORTES D'ENTRÉE
   ========================================================================= */

.ucp-portes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
}

.ucp-porte {
	display: block;
	padding: var(--ucp-space-10) var(--ucp-space-8);
	background: var(--ucp-white);
	border: 1px solid var(--ucp-border);
	margin-right: -1px;   /* fusionne les bordures adjacentes */
	color: var(--ucp-text);
	text-decoration: none;
	transition: transform var(--ucp-transition), box-shadow var(--ucp-transition);
}

.ucp-porte:hover {
	position: relative;
	z-index: 2;
	transform: translateY(-3px);
	box-shadow: var(--ucp-shadow-lift);
}

/* La première porte est mise en avant en vert plein. */
.ucp-porte--feature {
	background: var(--ucp-brand);
	border-color: var(--ucp-brand);
	color: var(--ucp-cream);
}

.ucp-porte__num {
	margin: 0 0 var(--ucp-space-8);
	font-size: var(--ucp-fs-eyebrow);
	font-weight: var(--ucp-fw-bold);
	letter-spacing: var(--ucp-ls-label);
	text-transform: uppercase;
	color: var(--ucp-accent-warm);
}

.ucp-porte--feature .ucp-porte__num { color: var(--ucp-accent); }

.ucp-porte__name {
	margin: 0 0 var(--ucp-space-4);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
	font-weight: var(--ucp-fw-black);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.ucp-porte__name em {
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-weight: var(--ucp-fw-black);
	color: var(--ucp-accent-warm);
}

.ucp-porte--feature .ucp-porte__name em { color: var(--ucp-accent); }

.ucp-porte__desc {
	margin: 0 0 var(--ucp-space-6);
	font-size: var(--ucp-fs-sm);
	line-height: var(--ucp-lh-body);
	opacity: 0.75;
}

.ucp-porte--feature .ucp-porte__desc { color: var(--ucp-cream); }


/* =========================================================================
   H. MOTEUR DE RECHERCHE ET FILTRES
   ========================================================================= */

.ucp-finder {
	padding: clamp(2rem, 5vw, 3rem) var(--ucp-gutter) var(--ucp-space-4);
	background: var(--ucp-cream);
}

.ucp-finder__inner { max-width: var(--ucp-max); margin: 0 auto; }

.ucp-search {
	position: relative;
	max-width: 980px;
	margin: 0 auto var(--ucp-space-10);
}

.ucp-search input[type="search"],
.ucp-search input[type="text"] {
	width: 100%;
	padding: 18px 26px 18px 54px;
	border: 1px solid var(--ucp-border-strong);
	border-radius: var(--ucp-radius-pill);
	background: var(--ucp-white);
	font-size: 0.9375rem;
}

.ucp-search input::placeholder { color: var(--ucp-sand-400); font-style: italic; }

/* Loupe dessinée en CSS : pas d'image, pas d'icône à charger. */
.ucp-search::before {
	content: '';
	position: absolute;
	left: 22px;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	border: 2px solid var(--ucp-accent-warm);
	border-radius: 50%;
	pointer-events: none;
}

.ucp-search::after {
	content: '';
	position: absolute;
	left: 35px;
	top: 60%;
	width: 9px;
	height: 2px;
	background: var(--ucp-accent-warm);
	transform: rotate(45deg);
	pointer-events: none;
}

.ucp-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 18px 22px;
}

.ucp-filter {
	flex: 1 1 0;
	min-width: 150px;
}

.ucp-filter label {
	display: block;
	margin-bottom: var(--ucp-space-2);
	font-size: var(--ucp-fs-eyebrow);
	font-weight: var(--ucp-fw-bold);
	letter-spacing: var(--ucp-ls-label);
	text-transform: uppercase;
	color: var(--ucp-accent-warm);
}

/* Le chevron natif des `select` varie d'un navigateur à l'autre : on le
   remplace par le nôtre pour que les cinq filtres soient identiques. */
.ucp-select {
	position: relative;
}

.ucp-select select {
	appearance: none;
	-webkit-appearance: none;
	padding: 13px 38px 13px 15px;
	border: 1px solid var(--ucp-border-strong);
	background: var(--ucp-white);
	cursor: pointer;
}

.ucp-select::after {
	content: '⌄';
	position: absolute;
	right: 14px;
	top: 42%;
	transform: translateY(-50%);
	font-size: 1rem;
	color: var(--ucp-accent-warm);
	pointer-events: none;
}

.ucp-filters__reset { flex: 0 0 auto; }

.ucp-btn-reset {
	padding: 13px 28px;
	border: 0;
	background: var(--ucp-brand);
	color: var(--ucp-cream);
	font-size: var(--ucp-fs-eyebrow);
	font-weight: var(--ucp-fw-bold);
	letter-spacing: var(--ucp-ls-label);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--ucp-transition);
}

.ucp-btn-reset:hover { background: var(--ucp-brand-hover); }

.ucp-results-count {
	max-width: var(--ucp-max);
	margin: var(--ucp-space-6) auto 0;
	font-size: var(--ucp-fs-xs);
	letter-spacing: 0.04em;
	color: var(--ucp-text-muted);
}

.ucp-results-count strong { color: var(--ucp-brand); font-weight: var(--ucp-fw-bold); }

.ucp-no-results {
	display: none;
	max-width: var(--ucp-max);
	margin: 0 auto;
	padding: var(--ucp-space-12) var(--ucp-space-5);
	text-align: center;
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: var(--ucp-fs-lead);
	color: var(--ucp-accent-warm);
}

.ucp-no-results.ucp-is-visible { display: block; }

.ucp-catalogue {
	padding: var(--ucp-space-6) var(--ucp-gutter) var(--ucp-section-y);
	background: var(--ucp-cream);
}

/* --- Page centrale de tous les séjours --------------------------------- */

/* Le contenu de /les-chasses/ peut rester placé dans une ligne Divi. Cette sortie
   de cadre lui rend la pleine largeur sans demander de reconstruire la page. */
.ucp-catalogue-page {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	background: var(--ucp-cream);
}

.ucp-catalogue-breadcrumb {
	max-width: var(--ucp-max);
	margin: 0 auto;
	padding: var(--ucp-space-4) var(--ucp-gutter);
}

.ucp-catalogue-hero {
	padding: clamp(4rem, 8vw, 7rem) var(--ucp-gutter);
	background:
		radial-gradient(circle at 76% 28%, rgba(212, 175, 55, 0.13), transparent 34%),
		linear-gradient(115deg, var(--ucp-night), var(--ucp-forest));
	color: var(--ucp-cream);
}

.ucp-catalogue-hero__inner {
	max-width: var(--ucp-max);
	margin: 0 auto;
}

.ucp-catalogue-hero .ucp-eyebrow { color: var(--ucp-accent); }

.ucp-catalogue-hero h1 {
	max-width: 900px;
	margin: 0 0 var(--ucp-space-5);
	color: var(--ucp-cream);
	font-size: clamp(3rem, 7vw, 6.5rem);
	font-weight: var(--ucp-fw-black);
	line-height: 0.95;
	letter-spacing: -0.055em;
}

.ucp-catalogue-hero h1 em {
	color: var(--ucp-accent);
	font-family: var(--ucp-font-serif);
	font-weight: normal;
}

.ucp-catalogue-hero__inner > p:last-child {
	max-width: 720px;
	margin: 0;
	color: var(--ucp-text-invert-dim);
	font-size: var(--ucp-fs-lead);
	line-height: var(--ucp-lh-body);
}

.ucp-catalogue-page .ucp-finder {
	border-bottom: 1px solid var(--ucp-border);
}

.ucp-catalogue-page .ucp-catalogue {
	padding-top: var(--ucp-space-8);
}

.ucp-catalogue-page .ucp-card[hidden] { display: none; }

.ucp-card__media--big-five {
	display: grid;
	place-items: center;
	background:
		radial-gradient(circle at 50% 42%, rgba(212, 175, 55, 0.2), transparent 38%),
		linear-gradient(135deg, var(--ucp-night), var(--ucp-forest));
}

.ucp-card__media--big-five span {
	position: relative;
	z-index: 2;
	padding: 0.7rem 1rem;
	border-top: 1px solid var(--ucp-accent);
	border-bottom: 1px solid var(--ucp-accent);
	color: var(--ucp-accent);
	font-family: var(--ucp-font-serif);
	font-size: clamp(1.4rem, 2.4vw, 2.25rem);
	font-style: italic;
	letter-spacing: 0.16em;
}

.ucp-card--big-five .ucp-card__prix {
	color: var(--ucp-brand);
	font-weight: var(--ucp-fw-bold);
}

.ucp-catalogue-cta {
	padding: clamp(4rem, 7vw, 6.5rem) var(--ucp-gutter);
	background: var(--ucp-night);
	text-align: center;
}

.ucp-catalogue-cta > div {
	max-width: 900px;
	margin: 0 auto;
}

.ucp-catalogue-cta h2 {
	margin: 0 0 var(--ucp-space-8);
	color: var(--ucp-cream);
	font-size: var(--ucp-fs-h2);
	font-weight: var(--ucp-fw-black);
	line-height: var(--ucp-lh-heading);
}

.ucp-catalogue-cta h2 em {
	color: var(--ucp-accent);
	font-family: var(--ucp-font-serif);
	font-weight: normal;
}


/* =========================================================================
   I. FICHE SÉJOUR — GABARIT DEUX COLONNES
   ========================================================================= */

.ucp-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	gap: var(--ucp-space-12);
	max-width: var(--ucp-max);
	margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 3.5rem) var(--ucp-gutter);
	background: var(--ucp-white);
}

.ucp-content-section { margin-bottom: var(--ucp-space-12); }
.ucp-content-section:last-child { margin-bottom: 0; }

.ucp-content-section h2,
.ucp-content-h2 {
	margin: 0 0 18px;
	font-size: var(--ucp-fs-h3);
	font-weight: var(--ucp-fw-black);
	line-height: 1.2;
	letter-spacing: -0.025em;
	color: var(--ucp-night);
}

.ucp-lead {
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: var(--ucp-fs-lead);
	line-height: var(--ucp-lh-body);
	color: var(--ucp-brand);
}

/* --- Colonne latérale ---------------------------------------------------- */

.ucp-sidebar { align-self: start; position: sticky; top: var(--ucp-space-5); }

.ucp-sidebar-card {
	position: relative;
	overflow: hidden;
	padding: var(--ucp-space-8) var(--ucp-space-6);
	background: var(--ucp-night);
	color: var(--ucp-cream);
}

.ucp-sidebar-card::after {
	content: '';
	position: absolute;
	top: -50px;
	right: -50px;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(212, 175, 55, 0.18) 0%, transparent 70%);
	pointer-events: none;
}

.ucp-sidebar-card > * { position: relative; z-index: 2; }

.ucp-sidebar-card__title {
	margin: 0 0 var(--ucp-space-2);
	font-size: var(--ucp-fs-h4);
	font-weight: var(--ucp-fw-black);
	line-height: 1.2;
	color: var(--ucp-cream);
}

.ucp-sidebar-card__sub {
	margin: 0 0 var(--ucp-space-6);
	font-size: var(--ucp-fs-sm);
	line-height: 1.5;
	color: rgba(244, 239, 231, 0.7);
}

.ucp-sidebar-price {
	margin-top: var(--ucp-space-6);
	padding-top: var(--ucp-space-6);
	border-top: 1px solid var(--ucp-border-invert);
}

.ucp-sidebar-price__label {
	margin: 0 0 var(--ucp-space-2);
	font-size: var(--ucp-fs-eyebrow);
	font-weight: var(--ucp-fw-semi);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(244, 239, 231, 0.6);
}

.ucp-sidebar-price__value {
	margin: 0 0 var(--ucp-space-2);
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: 1.75rem;
	font-weight: var(--ucp-fw-medium);
	line-height: 1.1;
	color: var(--ucp-accent);
}

.ucp-sidebar-price__note {
	margin: 0;
	font-size: var(--ucp-fs-eyebrow);
	font-style: italic;
	line-height: 1.5;
	color: rgba(244, 239, 231, 0.55);
}

.ucp-sidebar-contact {
	padding: var(--ucp-space-5) var(--ucp-space-6);
	background: var(--ucp-cream);
	color: var(--ucp-text);
}

.ucp-sidebar-contact__tel {
	margin: 0 0 4px;
	font-family: var(--ucp-font-serif);
	font-size: 1.125rem;
	font-weight: var(--ucp-fw-medium);
	color: var(--ucp-brand);
}

.ucp-sidebar-contact__note { margin: 0; font-size: var(--ucp-fs-eyebrow); color: var(--ucp-text-muted); }


/* =========================================================================
   J. BLOCS DE CONTENU DE FICHE
   ========================================================================= */

/* --- Liste d'atouts (flèches dorées) ------------------------------------ */

.ucp-atouts {
	list-style: none;
	margin: 0;
	padding: var(--ucp-card-pad);
	background: var(--ucp-cream);
}

.ucp-atouts li {
	position: relative;
	padding: 10px 0 10px 28px;
	border-bottom: 1px solid var(--ucp-border);
	font-size: var(--ucp-fs-body);
	line-height: var(--ucp-lh-body);
	color: var(--ucp-text-muted);
}

.ucp-atouts li:last-child { border-bottom: none; }

.ucp-atouts li::before {
	content: '→';
	position: absolute;
	left: 0;
	color: var(--ucp-accent);
	font-weight: var(--ucp-fw-bold);
}

/* --- Blocs d'information côte à côte ------------------------------------ */

.ucp-info-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ucp-space-2);
}

.ucp-info-block {
	padding: var(--ucp-space-5);
	background: var(--ucp-cream);
}

.ucp-info-block__title {
	margin: 0 0 10px;
	padding-bottom: var(--ucp-space-2);
	border-bottom: 1.5px solid var(--ucp-accent);
	font-size: var(--ucp-fs-eyebrow);
	font-weight: var(--ucp-fw-bold);
	letter-spacing: var(--ucp-ls-label);
	text-transform: uppercase;
	color: var(--ucp-brand);
}

.ucp-info-block p { margin: 0 0 var(--ucp-space-2); font-size: var(--ucp-fs-sm); line-height: 1.65; }

/* --- Programme jour par jour -------------------------------------------- */

.ucp-programme { padding: var(--ucp-space-2) var(--ucp-card-pad); background: var(--ucp-cream); }

.ucp-day {
	display: flex;
	gap: var(--ucp-space-4);
	padding: 18px 0;
	border-bottom: 1px solid var(--ucp-border);
}

.ucp-day:last-child { border-bottom: none; }

.ucp-day__label {
	flex: 0 0 130px;
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: var(--ucp-fs-body);
	font-weight: var(--ucp-fw-bold);
	color: var(--ucp-accent-warm);
}

.ucp-day__text {
	flex: 1 1 auto;
	font-size: var(--ucp-fs-body);
	line-height: 1.65;
	color: var(--ucp-text-muted);
}

/* --- Inclus / non inclus ------------------------------------------------- */

.ucp-inclus {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ucp-space-2);
}

.ucp-inclus__col     { padding: var(--ucp-card-pad); background: var(--ucp-cream); }
.ucp-inclus__col--no { background: var(--ucp-white); border: 1px solid var(--ucp-border); }

.ucp-inclus__title {
	display: flex;
	align-items: center;
	gap: var(--ucp-space-2);
	margin: 0 0 var(--ucp-space-4);
	font-size: var(--ucp-fs-body);
	font-weight: var(--ucp-fw-bold);
	color: var(--ucp-night);
}

.ucp-inclus__sign {
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: 1.375rem;
	font-weight: var(--ucp-fw-bold);
	color: var(--ucp-brand);
}

.ucp-inclus__col--no .ucp-inclus__sign { color: var(--ucp-accent-warm); }

.ucp-inclus ul { list-style: none; margin: 0; padding: 0; }

.ucp-inclus li {
	padding: 4px 0;
	font-size: var(--ucp-fs-sm);
	line-height: var(--ucp-lh-loose);
	color: var(--ucp-text-muted);
}

/* --- Table des taxes de tir --------------------------------------------- */

.ucp-table {
	width: 100%;
	border-collapse: collapse;
}

.ucp-table th {
	padding: 11px 16px;
	background: var(--ucp-brand);
	color: var(--ucp-cream);
	font-size: var(--ucp-fs-eyebrow);
	font-weight: var(--ucp-fw-bold);
	letter-spacing: var(--ucp-ls-label);
	text-transform: uppercase;
	text-align: left;
}

.ucp-table th:last-child { text-align: right; }

.ucp-table td {
	padding: 11px 16px;
	border-bottom: 1px solid var(--ucp-border);
	font-size: var(--ucp-fs-body);
	color: var(--ucp-text-muted);
}

.ucp-table tbody tr:nth-child(even) td { background: var(--ucp-cream); }

.ucp-table td:last-child {
	text-align: right;
	font-family: var(--ucp-font-serif);
	font-weight: var(--ucp-fw-bold);
	color: var(--ucp-brand);
}

.ucp-table-note {
	margin: var(--ucp-space-3) 0 0;
	font-size: var(--ucp-fs-xs);
	font-style: italic;
	color: var(--ucp-accent-warm);
}

/* Une table ne se comprime pas : sur mobile, elle défile horizontalement
   dans son propre conteneur plutôt que de faire déborder toute la page. */
.ucp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Calendrier de saison ------------------------------------------------ */

.ucp-saison {
	padding: var(--ucp-space-8);
	background: var(--ucp-brand);
	color: var(--ucp-cream);
}

.ucp-saison__head {
	margin: 0 0 var(--ucp-space-2);
	font-size: 1.3125rem;
	font-weight: var(--ucp-fw-black);
	letter-spacing: -0.01em;
	color: var(--ucp-accent-soft);
}

.ucp-saison__sub {
	margin: 0 0 var(--ucp-space-6);
	font-size: var(--ucp-fs-body);
	line-height: var(--ucp-lh-body);
	color: var(--ucp-white);
}

.ucp-saison__sub strong { color: var(--ucp-white); font-weight: var(--ucp-fw-bold); }

.ucp-months {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 4px;
}

.ucp-month {
	padding: 12px 2px;
	background: rgba(244, 239, 231, 0.08);
	border-radius: 2px;
	color: rgba(244, 239, 231, 0.45);
	font-size: var(--ucp-fs-xs);
	font-weight: var(--ucp-fw-bold);
	letter-spacing: 0.04em;
	text-align: center;
}

.ucp-month--open { background: rgba(212, 175, 55, 0.22); color: var(--ucp-cream); }
.ucp-month--best { background: var(--ucp-accent); color: var(--ucp-night); }

.ucp-saison__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ucp-space-6);
	margin-top: var(--ucp-space-4);
	font-size: var(--ucp-fs-xs);
	color: rgba(255, 255, 255, 0.88);
}

.ucp-saison__legend span { display: flex; align-items: center; gap: var(--ucp-space-2); }

.ucp-legend-dot { width: 12px; height: 12px; border-radius: 2px; }

/* --- Témoignage ---------------------------------------------------------- */

.ucp-temoignage {
	padding: var(--ucp-space-8) var(--ucp-space-8);
	background: var(--ucp-cream);
	border-left: 3px solid var(--ucp-accent);
}

.ucp-temoignage__quote {
	margin: 0 0 var(--ucp-space-4);
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: var(--ucp-fs-lead);
	line-height: var(--ucp-lh-body);
	color: var(--ucp-brand);
}

.ucp-temoignage__author {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ucp-space-4);
}

.ucp-temoignage__name   { font-size: var(--ucp-fs-sm); font-weight: var(--ucp-fw-bold); color: var(--ucp-night); }
.ucp-temoignage__detail { font-size: var(--ucp-fs-xs); letter-spacing: 0.04em; color: var(--ucp-accent-warm); }

.ucp-temoignage--empty { background: var(--ucp-white); border: 1px dashed var(--ucp-border-strong); border-left-width: 1px; }
.ucp-temoignage--empty .ucp-temoignage__quote { color: var(--ucp-sand-400); }


/* --- Document à télécharger ---------------------------------------------
   Le barème des taxes de tir quand il est trop long pour la page. Dessiné
   comme une carte, pas comme un lien : à cet endroit de la fiche le visiteur
   cherche des chiffres, il doit comprendre au premier coup d'œil qu'il en
   trouvera dans ce bloc. Le poids du fichier est annoncé — savoir qu'on
   télécharge 480 Ko et pas 40 Mo, ça compte quand on lit depuis un téléphone.
   ------------------------------------------------------------------------- */

.ucp-doc {
	display: flex;
	align-items: center;
	gap: var(--ucp-space-5);
	margin-top: var(--ucp-space-5);
	padding: var(--ucp-space-5) var(--ucp-space-6);
	background: var(--ucp-cream);
	border: 1px solid var(--ucp-border);
	border-left: 3px solid var(--ucp-accent);
	color: var(--ucp-text);
	text-decoration: none;
	transition: background-color var(--ucp-transition), border-color var(--ucp-transition), transform var(--ucp-transition);
}

.ucp-doc:hover {
	background: var(--ucp-white);
	border-color: var(--ucp-border-strong);
	border-left-color: var(--ucp-accent);
	color: var(--ucp-text);
	transform: translateX(2px);
}

.ucp-doc__badge {
	flex: 0 0 auto;
	padding: 7px 10px;
	background: var(--ucp-night);
	color: var(--ucp-accent);
	font-size: var(--ucp-fs-micro);
	font-weight: var(--ucp-fw-bold);
	letter-spacing: var(--ucp-ls-label);
	line-height: 1;
}

.ucp-doc__body { flex: 1 1 auto; min-width: 0; }

.ucp-doc__title {
	display: block;
	font-size: var(--ucp-fs-body);
	font-weight: var(--ucp-fw-bold);
	line-height: 1.35;
	color: var(--ucp-night);
}

.ucp-doc__meta {
	display: block;
	margin-top: 3px;
	font-size: var(--ucp-fs-xs);
	letter-spacing: 0.04em;
	color: var(--ucp-text-muted);
}

.ucp-doc__action {
	flex: 0 0 auto;
	font-size: var(--ucp-fs-eyebrow);
	font-weight: var(--ucp-fw-bold);
	letter-spacing: var(--ucp-ls-label);
	text-transform: uppercase;
	color: var(--ucp-brand);
}

.ucp-doc:hover .ucp-doc__action { color: var(--ucp-accent-warm); }

/* Rappel dans la colonne de devis : un lien, jamais un second bouton. Deux
   boutons côte à côte et le visiteur prend le moins engageant des deux — le
   téléchargement, qui ne demande pas son nom. La colonne ne réclame qu'une
   seule chose. */
.ucp-sidebar-doc {
	display: flex;
	align-items: center;
	gap: var(--ucp-space-3);
	margin-top: 1px;
	padding: var(--ucp-space-4) var(--ucp-space-6);
	background: var(--ucp-night-800);
	color: var(--ucp-text-invert-dim);
	font-size: var(--ucp-fs-sm);
	text-decoration: none;
	transition: color var(--ucp-transition);
}

.ucp-sidebar-doc:hover { color: var(--ucp-accent); }

.ucp-sidebar-doc .ucp-doc__badge {
	padding: 5px 8px;
	background: rgba(212, 175, 55, 0.16);
}


/* =========================================================================
   K. FAQ
   ========================================================================= */

.ucp-faq { margin-top: var(--ucp-space-2); }

.ucp-faq__item {
	margin-bottom: 6px;
	background: var(--ucp-white);
	border: 1px solid var(--ucp-border);
	transition: border-color var(--ucp-transition);
}

.ucp-faq__item.ucp-is-open { border-color: var(--ucp-brand); }

/* Le déclencheur est un vrai <button> : navigable au clavier et annoncé
   correctement par les lecteurs d'écran (voir aria-expanded dans le JS). */
.ucp-faq__question {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	padding: 18px var(--ucp-space-6);
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}

.ucp-faq__num {
	flex: 0 0 auto;
	min-width: 24px;
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: var(--ucp-fs-body);
	font-weight: var(--ucp-fw-semi);
	color: var(--ucp-accent);
}

.ucp-faq__text {
	flex: 1 1 auto;
	font-size: var(--ucp-fs-body);
	font-weight: var(--ucp-fw-bold);
	letter-spacing: -0.01em;
	color: var(--ucp-night);
}

.ucp-faq__toggle {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--ucp-border);
	font-size: 1.125rem;
	font-weight: var(--ucp-fw-bold);
	color: var(--ucp-accent-warm);
	transition: background-color var(--ucp-transition), color var(--ucp-transition);
}

.ucp-faq__item.ucp-is-open .ucp-faq__toggle {
	background: var(--ucp-brand);
	border-color: var(--ucp-brand);
	color: var(--ucp-accent);
}

/* `grid-template-rows: 0fr → 1fr` anime l'ouverture sans avoir à deviner
   une hauteur maximale, contrairement à l'astuce classique du max-height. */
.ucp-faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}

.ucp-faq__item.ucp-is-open .ucp-faq__answer { grid-template-rows: 1fr; }

.ucp-faq__answer > div { overflow: hidden; }

.ucp-faq__answer p {
	margin: 0 var(--ucp-space-6) var(--ucp-space-3) 66px;
	font-size: var(--ucp-fs-body);
	line-height: var(--ucp-lh-body);
}

.ucp-faq__item.ucp-is-open .ucp-faq__answer p:last-child { margin-bottom: 22px; }


/* =========================================================================
   L. BANDEAUX D'APPEL À L'ACTION
   ========================================================================= */

/* Bandeau intercalé au milieu d'une fiche. */
.ucp-devis-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ucp-space-8);
	padding: var(--ucp-space-8);
	background: var(--ucp-brand);
	color: var(--ucp-cream);
}

.ucp-devis-band__text { flex: 1 1 320px; }

.ucp-devis-band__text h3 {
	margin: 0 0 var(--ucp-space-2);
	font-size: 1.375rem;
	font-weight: var(--ucp-fw-black);
	letter-spacing: -0.018em;
	color: var(--ucp-cream);
}

.ucp-devis-band__text h3 em { font-family: var(--ucp-font-serif); font-style: italic; color: var(--ucp-accent); }
.ucp-devis-band__text p     { margin: 0; font-size: var(--ucp-fs-body); line-height: 1.5; color: rgba(244, 239, 231, 0.78); }

/* Bandeau de fin de page. */
.ucp-cta-final {
	position: relative;
	overflow: hidden;
	padding: clamp(3rem, 6vw, 4.5rem) var(--ucp-gutter);
	background: var(--ucp-night);
	color: var(--ucp-cream);
	text-align: center;
}

.ucp-cta-final::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 600px;
	height: 600px;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 60%);
	pointer-events: none;
}

.ucp-cta-final__inner {
	position: relative;
	z-index: 2;
	max-width: 720px;
	margin: 0 auto;
}

.ucp-cta-final h2 {
	margin: 0 0 var(--ucp-space-4);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.375rem);
	font-weight: var(--ucp-fw-black);
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--ucp-cream);
}

.ucp-cta-final h2 em { font-family: var(--ucp-font-serif); font-style: italic; color: var(--ucp-accent); }

.ucp-cta-final p {
	margin: 0 0 var(--ucp-space-8);
	font-size: var(--ucp-fs-body);
	line-height: var(--ucp-lh-body);
	color: rgba(244, 239, 231, 0.7);
}


/* =========================================================================
   M. MÉTHODE ET ÉQUIPE
   ========================================================================= */

.ucp-steps { max-width: var(--ucp-max-narrow); margin: 0 auto; }

.ucp-step {
	display: flex;
	gap: var(--ucp-space-6);
	padding: var(--ucp-space-6) 0;
	border-bottom: 1px solid var(--ucp-border);
}

.ucp-step:last-child { border-bottom: none; }

.ucp-step__num {
	flex: 0 0 100px;
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
	font-weight: var(--ucp-fw-medium);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--ucp-accent);
}

.ucp-step__title {
	margin: 0 0 10px;
	font-size: var(--ucp-fs-h4);
	font-weight: var(--ucp-fw-black);
	letter-spacing: -0.012em;
	color: var(--ucp-brand);
}

.ucp-step__desc {
	max-width: 640px;
	margin: 0;
	font-size: var(--ucp-fs-body);
	line-height: var(--ucp-lh-loose);
	color: var(--ucp-text-muted);
}

.ucp-team {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ucp-space-3);
	max-width: var(--ucp-max);
	margin: 0 auto;
}

.ucp-team__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--ucp-cream);
}

.ucp-team__photo {
	position: relative;
	height: 240px;
	overflow: hidden;
	background: var(--ucp-night);
}

.ucp-team__photo img { width: 100%; height: 100%; object-fit: cover; }

.ucp-team__photo::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.45) 100%);
	pointer-events: none;
}

.ucp-team__body { flex: 1 1 auto; padding: var(--ucp-space-6) var(--ucp-space-5) 28px; }

.ucp-team__name { margin: 0 0 4px; font-size: 1.25rem; font-weight: var(--ucp-fw-black); letter-spacing: -0.015em; color: var(--ucp-night); }

.ucp-team__role {
	margin: 0 0 var(--ucp-space-3);
	font-size: var(--ucp-fs-micro);
	font-weight: var(--ucp-fw-bold);
	letter-spacing: var(--ucp-ls-label);
	text-transform: uppercase;
	color: var(--ucp-accent-warm);
}

.ucp-team__bio { margin: 0; font-size: var(--ucp-fs-sm); line-height: var(--ucp-lh-body); color: var(--ucp-text-muted); }

/* Défilement automatique des photos de guides (carte « Nos guides »). */
.ucp-team__slider { display: flex; width: max-content; height: 100%; animation: ucp-slide 24s linear infinite; }
.ucp-team__slider:hover { animation-play-state: paused; }
.ucp-team__slider > * { flex: 0 0 100%; width: 100%; height: 100%; }

@keyframes ucp-slide {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}


/* =========================================================================
   N. FORMULAIRE PROJET
   ========================================================================= */

/* La maquette emploie un vert forêt profond. Le dégradé radial enregistré
   dans l'ancien module Divi tirait vers l'olive (#8b8845) au centre, ce qui
   sortait de la palette de la marque. */
body.ucp-page-devis #page-container article .et_builder_inner_content > .et_pb_section:first-child {
	background-color: #1F4332;
	background-image: linear-gradient(135deg, #1A2A1F 0%, #1F4332 56%, #2A1F18 100%);
}

.ucp-form-card {
	width: 100%;
	padding: clamp(1.5rem, 4vw, 3rem);
	background: var(--ucp-white);
	border: 1px solid var(--ucp-border);
}

.ucp-form-block { margin-bottom: var(--ucp-space-8); }
.ucp-form-block:last-of-type { margin-bottom: 0; }

.ucp-form-block__header {
	display: flex;
	align-items: baseline;
	gap: var(--ucp-space-3);
	margin-bottom: var(--ucp-space-5);
	padding-bottom: var(--ucp-space-3);
	border-bottom: 2px solid var(--ucp-brand);
}

.ucp-form-block__letter {
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: 1.375rem;
	font-weight: var(--ucp-fw-medium);
	color: var(--ucp-accent);
}

.ucp-form-block__title { margin: 0; font-size: 1.0625rem; font-weight: var(--ucp-fw-bold); letter-spacing: 0.02em; color: var(--ucp-night); }

.ucp-form-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ucp-space-3);
	margin-bottom: var(--ucp-space-3);
}

.ucp-form-row--full { grid-template-columns: 1fr; }

.ucp-form-label { display: block; margin: 0 0 4px; font-size: var(--ucp-fs-eyebrow); letter-spacing: 0.04em; color: var(--ucp-text-muted); }

/* Le formulaire réel reprend la carte de la maquette, mais conserve des
   champs HTML natifs : remplissage automatique, clavier adapté au téléphone
   et libellés accessibles restent ainsi disponibles. */
.ucp-devis-form { position: relative; }

.ucp-form-field,
.ucp-form-fieldset { min-width: 0; }

.ucp-form-fieldset {
	margin: 0 0 var(--ucp-space-5);
	padding: 0;
	border: 0;
}

.ucp-form-fieldset--compact { margin-bottom: var(--ucp-space-3); }
.ucp-form-fieldset.ucp-is-invalid:focus-within > .ucp-form-label { color: var(--ucp-accent-warm); }

.ucp-devis-form input[type="text"],
.ucp-devis-form input[type="email"],
.ucp-devis-form input[type="tel"],
.ucp-devis-form input[type="number"],
.ucp-devis-form select,
.ucp-devis-form textarea {
	display: block;
	width: 100%;
	min-height: 46px;
	padding: 11px 14px;
	border: 1px solid var(--ucp-border);
	border-radius: 0;
	background: var(--ucp-cream);
	color: var(--ucp-ink);
	font-family: var(--ucp-font-sans);
	font-size: var(--ucp-fs-sm);
	line-height: 1.45;
}

.ucp-devis-form textarea { min-height: 130px; }

.ucp-form-hint {
	display: inline-block;
	margin-left: var(--ucp-space-2);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: normal;
	color: var(--ucp-text-soft);
}

.ucp-choice-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ucp-space-2);
}

.ucp-choice {
	position: relative;
	display: inline-flex;
	margin: 0;
	cursor: pointer;
}

.ucp-choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.ucp-choice span {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 9px 16px;
	border: 1px solid var(--ucp-border);
	background: var(--ucp-cream);
	color: var(--ucp-text-muted);
	font-size: var(--ucp-fs-xs);
	font-weight: var(--ucp-fw-semi);
	line-height: 1.35;
	letter-spacing: 0.02em;
	transition: background-color var(--ucp-transition), border-color var(--ucp-transition), color var(--ucp-transition);
}

.ucp-choice:hover span { border-color: var(--ucp-accent-warm); color: var(--ucp-night); }

.ucp-choice input:focus-visible + span {
	outline: 3px solid rgba(31, 67, 50, 0.18);
	outline-offset: 2px;
}

.ucp-choice input:checked + span {
	border-color: var(--ucp-brand);
	background: var(--ucp-brand);
	color: var(--ucp-accent);
}

.ucp-choice-grid--budget .ucp-choice { flex: 1 1 180px; }
.ucp-choice-grid--budget .ucp-choice span { justify-content: center; width: 100%; }

.ucp-form-other {
	max-width: 420px;
	margin-top: var(--ucp-space-3);
}

.ucp-form-newsletter {
	margin-top: var(--ucp-space-6);
	padding: 0;
	border: 0;
	background: transparent;
}

.ucp-form-newsletter > .ucp-form-label {
	width: 100%;
	margin: 0 0 3px;
	padding: 0;
	color: var(--ucp-brand);
	font-size: 0.9375rem;
	font-weight: var(--ucp-fw-bold);
	letter-spacing: 0.015em;
}

.ucp-form-newsletter__intro {
	margin: 0 0 var(--ucp-space-3);
	color: var(--ucp-text-soft);
	font-size: var(--ucp-fs-xs);
	line-height: 1.5;
}

.ucp-choice-grid--newsletter {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 580px;
	gap: 4px;
	padding: 4px;
	background: var(--ucp-cream);
}

.ucp-choice-grid--newsletter .ucp-choice,
.ucp-choice-grid--newsletter .ucp-choice span {
	width: 100%;
}

.ucp-choice-grid--newsletter .ucp-choice span {
	justify-content: center;
	min-height: 44px;
	padding: 10px 14px;
	border: 0;
	background: transparent;
	color: var(--ucp-night);
	font-weight: var(--ucp-fw-semi);
}

.ucp-choice-grid--newsletter .ucp-choice span::before {
	display: none;
}

.ucp-choice-grid--newsletter .ucp-choice:hover span {
	background: rgba(212, 175, 55, 0.12);
}

.ucp-choice-grid--newsletter .ucp-choice input:checked + span {
	background: var(--ucp-brand);
	color: var(--ucp-accent);
}

.ucp-form-required,
.ucp-form-privacy {
	margin: 0;
	font-size: 0.6875rem;
	line-height: 1.55;
	color: var(--ucp-text-soft);
}

.ucp-form-required { margin-bottom: var(--ucp-space-2); }
.ucp-form-privacy { margin-top: var(--ucp-space-3); text-align: center; }
.ucp-form-privacy a { color: var(--ucp-brand); text-decoration: underline; }

.ucp-form-submit { width: 100%; }

.ucp-form-notice {
	margin: 0 0 var(--ucp-space-6);
	padding: 16px 18px;
	border-left: 4px solid var(--ucp-brand);
	background: rgba(31, 67, 50, 0.08);
	color: var(--ucp-brand);
	font-size: var(--ucp-fs-sm);
	line-height: 1.55;
}

.ucp-form-notice strong { display: block; }

.ucp-form-notice--error {
	border-left-color: var(--ucp-accent-warm);
	background: rgba(122, 78, 46, 0.08);
	color: var(--ucp-accent-warm);
}

.ucp-honeypot {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* L'en-tête fixe ne doit pas recouvrir le titre quand un lien arrive sur
   /demande-de-devis/#form-projet. */
#form-projet { scroll-margin-top: 120px; }

/* Pastilles de choix. Ce sont des <button type="button"> : cliquables au
   clavier, et le JS reporte la valeur dans un champ caché à l'envoi. */
.ucp-chips { display: flex; flex-wrap: wrap; gap: var(--ucp-space-2); }

.ucp-chip {
	padding: 9px 16px;
	border: 1px solid var(--ucp-border);
	background: var(--ucp-cream);
	color: var(--ucp-text-muted);
	font-family: inherit;
	font-size: var(--ucp-fs-xs);
	font-weight: var(--ucp-fw-semi);
	letter-spacing: 0.03em;
	cursor: pointer;
	user-select: none;
	transition: background-color var(--ucp-transition), border-color var(--ucp-transition), color var(--ucp-transition);
}

.ucp-chip:hover { border-color: var(--ucp-accent-warm); color: var(--ucp-night); }

.ucp-chip[aria-pressed="true"] {
	background: var(--ucp-brand);
	border-color: var(--ucp-brand);
	color: var(--ucp-accent);
}

.ucp-engagement {
	margin: var(--ucp-space-8) 0 var(--ucp-space-6);
	padding: 18px var(--ucp-space-5);
	background: var(--ucp-cream);
	border-left: 3px solid var(--ucp-accent);
}

.ucp-engagement p {
	margin: 0;
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: var(--ucp-fs-body);
	line-height: var(--ucp-lh-body);
	color: var(--ucp-brand);
}

.ucp-engagement strong {
	font-family: var(--ucp-font-sans);
	font-style: normal;
	font-weight: var(--ucp-fw-bold);
	letter-spacing: 0.02em;
	color: var(--ucp-accent-warm);
}

/* Contact direct en bas de la page projet. */
.ucp-contact-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ucp-space-4);
	max-width: 1080px;
	margin: 0 auto;
}

.ucp-contact-item { padding: var(--ucp-space-8) var(--ucp-space-6); background: var(--ucp-cream); }

.ucp-contact-item__label {
	margin: 0 0 var(--ucp-space-3);
	font-size: var(--ucp-fs-eyebrow);
	font-weight: var(--ucp-fw-bold);
	letter-spacing: var(--ucp-ls-label);
	text-transform: uppercase;
	color: var(--ucp-accent-warm);
}

.ucp-contact-item__value {
	margin: 0 0 var(--ucp-space-2);
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: 1.0625rem;
	font-weight: var(--ucp-fw-medium);
	line-height: 1.5;
	color: var(--ucp-brand);
	word-break: break-word;
}

.ucp-contact-item__value a       { display: block; color: var(--ucp-brand); text-decoration: none; }
.ucp-contact-item__value a + a   { margin-top: var(--ucp-space-3); }
.ucp-contact-item__value a:hover { color: var(--ucp-accent-warm); }
.ucp-contact-item__note          { margin: 0; font-size: var(--ucp-fs-eyebrow); line-height: 1.6; color: var(--ucp-text-muted); }


/* =========================================================================
   O. PIED DE PAGE
   ========================================================================= */

.ucp-footer {
	display: grid;
	grid-template-columns: 260px 1.2fr 1.2fr 2fr;
	gap: 0 var(--ucp-space-12);
	align-items: start;
	padding: var(--ucp-space-12) var(--ucp-gutter);
	background: var(--ucp-bg-footer);
	color: var(--ucp-cream);
}

.ucp-footer__logo { width: 100%; max-width: 280px; height: auto; }

.ucp-footer__col-title {
	margin: 0 0 var(--ucp-space-5);
	padding-bottom: var(--ucp-space-3);
	border-bottom: 1px solid var(--ucp-border-invert);
	font-size: var(--ucp-fs-eyebrow);
	font-weight: var(--ucp-fw-bold);
	letter-spacing: 0.23em;
	text-transform: uppercase;
	color: var(--ucp-accent);
}

.ucp-footer__address,
.ucp-footer__contact {
	margin: 0 0 18px;
	font-size: var(--ucp-fs-sm);
	line-height: var(--ucp-lh-loose);
	color: rgba(244, 239, 231, 0.75);
}

.ucp-footer__contact a { color: var(--ucp-accent); text-decoration: none; }
.ucp-footer__contact a:hover { text-decoration: underline; }

.ucp-footer__links { list-style: none; margin: 0; padding: 0; }

.ucp-footer__links li { font-size: var(--ucp-fs-sm); line-height: 2; }
.ucp-footer__links a  { color: rgba(244, 239, 231, 0.78); text-decoration: none; }
.ucp-footer__links a:hover { color: var(--ucp-accent); }

.ucp-newsletter { margin-bottom: var(--ucp-space-6); }

.ucp-newsletter__text {
	margin: 0 0 var(--ucp-space-3);
	font-size: var(--ucp-fs-sm);
	line-height: var(--ucp-lh-body);
	color: rgba(244, 239, 231, 0.78);
}

.ucp-newsletter__text strong,
.ucp-newsletter-catch {
	color: var(--ucp-accent) !important;
}

.ucp-newsletter__form { display: flex; }

.ucp-newsletter__form input[type="email"] {
	flex: 1 1 auto;
	width: auto;
	padding: 10px 12px;
	background: rgba(244, 239, 231, 0.08);
	border: 1px solid rgba(212, 175, 55, 0.3);
	color: rgba(244, 239, 231, 0.85);
	font-size: var(--ucp-fs-xs);
	font-style: italic;
}

.ucp-newsletter__form input[type="email"]::placeholder { color: rgba(244, 239, 231, 0.5); }

.ucp-newsletter__form button {
	flex: 0 0 auto;
	padding: 10px 16px;
	border: 0;
	background: var(--ucp-accent);
	color: var(--ucp-night);
	font-family: inherit;
	font-size: var(--ucp-fs-eyebrow);
	font-weight: var(--ucp-fw-bold);
	letter-spacing: var(--ucp-ls-label);
	text-transform: uppercase;
	cursor: pointer;
}

/* Formulaire d'inscription MailerLite — version compacte du pied de page. */
.ucp-mailerlite {
	width: 100%;
	max-width: 400px;
	margin-top: var(--ucp-space-4);
	color: var(--ucp-cream);
}

.ucp-mailerlite,
.ucp-mailerlite * {
	box-sizing: border-box;
}

.ucp-mailerlite .ml-form-embedWrapper,
.ucp-mailerlite .ml-form-embedBody,
.ucp-mailerlite form {
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
}

.ucp-mailerlite input[type="email"] {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--ucp-accent);
	border-radius: 0;
	background: #242B22;
	color: var(--ucp-cream);
	font: 400 0.875rem/1.5 var(--ucp-font-sans);
}

.ucp-mailerlite input[type="email"]::placeholder {
	color: rgba(244, 239, 231, 0.72);
}

.ucp-mailerlite input[type="email"]:focus-visible {
	outline: 2px solid var(--ucp-accent-soft);
	outline-offset: 2px;
}

.ucp-mailerlite .ml-form-interestGroupsRow {
	min-width: 0;
	margin: var(--ucp-space-4) 0;
	padding: 0;
	border: 0;
}

.ucp-mailerlite .ml-form-interestGroupsRow legend {
	margin: 0 0 10px;
	padding: 0;
	color: var(--ucp-cream);
	font-size: var(--ucp-fs-xs);
	font-weight: var(--ucp-fw-bold);
	line-height: 1.45;
}

.ucp-mailerlite .ml-form-interestGroupsRowCheckbox,
.ucp-mailerlite .ml-form-checkboxRow label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 9px;
	color: rgba(244, 239, 231, 0.82);
	font-size: var(--ucp-fs-xs);
	line-height: 1.45;
	cursor: pointer;
}

.ucp-mailerlite input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 1px 0 0;
	accent-color: var(--ucp-accent);
}

.ucp-mailerlite .ml-form-checkboxRow {
	margin: 0 0 var(--ucp-space-4);
}

.ucp-mailerlite .ml-form-checkboxRow label {
	margin: 0;
	color: rgba(244, 239, 231, 0.65);
	font-size: var(--ucp-fs-eyebrow);
}

.ucp-mailerlite .ml-form-embedSubmit button {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 0;
	border-radius: 0;
	background: var(--ucp-accent);
	color: var(--ucp-forest-900);
	font-family: var(--ucp-font-sans);
	font-size: var(--ucp-fs-xs);
	font-weight: var(--ucp-fw-bold);
	letter-spacing: 0.08em;
	cursor: pointer;
}

.ucp-mailerlite .ml-form-embedSubmit button:hover,
.ucp-mailerlite .ml-form-embedSubmit button:focus-visible {
	background: var(--ucp-accent-soft);
}

.ucp-mailerlite .ml-form-embedSubmit button.loading {
	display: none;
}

.ucp-mailerlite .ml-form-embedSubmitLoad {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 3px solid var(--ucp-forest-900);
	border-right-color: transparent;
	border-radius: 50%;
	animation: ucp-mailerlite-spin 0.9s linear infinite;
}

.ucp-mailerlite .ml-error {
	padding: 8px;
	outline: 1px solid #E46F61;
}

.ucp-mailerlite .row-success {
	padding: var(--ucp-space-4) 0;
	color: var(--ucp-cream);
	font-size: var(--ucp-fs-sm);
	line-height: var(--ucp-lh-body);
}

.ucp-mailerlite .row-success strong {
	color: var(--ucp-accent);
}

/* Le footer Divi historique utilisait cinq colonnes de largeur identique.
   La newsletter reçoit davantage de place et son formulaire s'étale sur la
   largeur disponible, ce qui réduit fortement la hauteur du pied de page. */
@media (min-width: 1200px) {
	.et-l--footer .ucp-footer-main-row {
		display: grid !important;
		grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.05fr) minmax(0, 1fr) minmax(540px, 2.2fr);
		gap: 0 32px;
		width: min(92%, 1600px) !important;
		max-width: 1600px !important;
		align-items: start;
	}

	.et-l--footer .ucp-footer-main-row > .et_pb_column {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}
}

.et-l--footer .ucp-footer-resources-column {
	display: none !important;
}

.ucp-footer-links-merged {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 10px 0 18px;
}

.ucp-footer-links-merged a {
	color: rgba(244, 239, 231, 0.72);
	font-size: var(--ucp-fs-xs);
	line-height: 1.5;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ucp-footer-links-merged a:hover {
	color: var(--ucp-accent);
}

@media (min-width: 768px) and (max-width: 1199px) {
	.et-l--footer .ucp-footer-main-row {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ucp-space-8) var(--ucp-space-10);
		width: 90% !important;
		max-width: none !important;
	}

	.et-l--footer .ucp-footer-main-row > .et_pb_column {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}

	.et-l--footer .ucp-footer-newsletter-column {
		grid-column: 1 / -1;
	}
}

@media (min-width: 768px) {
	.ucp-footer-newsletter-column .ucp-mailerlite {
		max-width: none;
	}

	.ucp-footer-newsletter-column .ucp-mailerlite form {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(130px, 0.38fr);
		gap: 12px 14px;
		align-items: start;
	}

	.ucp-footer-newsletter-column .ucp-mailerlite .ml-form-fieldRow {
		grid-column: 1;
	}

	.ucp-footer-newsletter-column .ucp-mailerlite .ml-form-embedSubmit {
		grid-column: 2;
		grid-row: 1;
	}

	.ucp-footer-newsletter-column .ucp-mailerlite .ml-form-interestGroupsRow {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px 14px;
		margin: 0;
	}

	.ucp-footer-newsletter-column .ucp-mailerlite .ml-form-interestGroupsRow legend {
		grid-column: 1 / -1;
		margin-bottom: 2px;
	}

	.ucp-footer-newsletter-column .ucp-mailerlite .ml-form-interestGroupsRowCheckbox {
		margin: 0;
	}

	.ucp-footer-newsletter-column .ucp-mailerlite .ml-form-checkboxRow {
		grid-column: 1 / -1;
		margin: 0;
	}
}

@keyframes ucp-mailerlite-spin {
	to { transform: rotate(360deg); }
}

.ucp-social { display: flex; flex-wrap: wrap; gap: 18px; margin-top: var(--ucp-space-5); }

.ucp-social__item { display: flex; align-items: center; gap: 10px; color: rgba(244, 239, 231, 0.7); text-decoration: none; }
.ucp-social__item:hover { color: var(--ucp-accent); }

.ucp-social__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid rgba(212, 175, 55, 0.5);
	border-radius: 50%;
	transition: border-color var(--ucp-transition);
}

.ucp-social__item:hover .ucp-social__icon { border-color: var(--ucp-accent); }
.ucp-social__name { font-size: var(--ucp-fs-xs); }

.ucp-social__icon--image {
	overflow: hidden;
	border: 0;
}

.ucp-social__icon--image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ucp-social--legacy {
	align-items: flex-start;
	margin-top: var(--ucp-space-4);
}

.ucp-social--legacy .ucp-social__name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ucp-footer__legal {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ucp-space-4);
	margin-top: var(--ucp-space-10);
	padding-top: var(--ucp-space-5);
	border-top: 1px solid rgba(212, 175, 55, 0.18);
	font-size: var(--ucp-fs-eyebrow);
}

.ucp-footer__legal-left { color: rgba(244, 239, 231, 0.55); line-height: var(--ucp-lh-loose); }
.ucp-footer__legal-left strong { color: var(--ucp-accent); font-weight: var(--ucp-fw-semi); letter-spacing: 0.09em; }

.ucp-footer__legal-right { display: flex; flex-wrap: wrap; gap: var(--ucp-space-5); }
.ucp-footer__legal-right a { color: rgba(244, 239, 231, 0.55); font-weight: var(--ucp-fw-medium); text-decoration: none; }
.ucp-footer__legal-right a:hover { color: var(--ucp-accent); }


/* =========================================================================
   BARRE D'ACTION MOBILE
   -------------------------------------------------------------------------
   Sur ordinateur, la colonne de devis accompagne la lecture en restant collée
   à droite. Sur téléphone, cette colonne passe sous le contenu : au bout de
   quinze sections, elle est à trois écrans de défilement du lecteur, et le
   prix avec elle.

   Cette barre rejoue le même service en bas de l'écran. Deux informations,
   pas une de plus : le prix, et le bouton. C'est ce que le visiteur cherche
   quand il se décide, et une barre de 60 pixels de haut ne peut pas en porter
   davantage sans devenir illisible.

   Elle n'existe que sous 980 px. Sur ordinateur, elle ferait doublon avec la
   colonne, et deux demandes de devis simultanées à l'écran s'annulent.

   `env(safe-area-inset-bottom)` : sur les iPhone à encoche, la barre de
   navigation du système recouvre les derniers pixels de l'écran. Sans cette
   marge, le bouton est à moitié sous la barre du téléphone, et le visiteur
   croit que le site est cassé.
   ========================================================================= */

.ucp-mobile-cta {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	align-items: center;
	gap: var(--ucp-space-4);
	padding: var(--ucp-space-3) var(--ucp-space-5);
	padding-bottom: calc(var(--ucp-space-3) + env(safe-area-inset-bottom, 0px));
	background: var(--ucp-night);
	border-top: 1px solid var(--ucp-border-invert);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.28);
}

/* Le prix passe devant le bouton dans le partage de la largeur.

   Il était en `flex: 0 1 auto` face à un bouton en `flex: 1 1 auto` : le bouton
   prenait toute la place disponible, le prix se faisait comprimer jusqu'à
   « À partir de 12 00… », et le bouton, devenu trop large pour son texte, le
   cassait quand même en deux lignes. Les deux y perdaient en même temps.

   L'ordre de priorité est celui de la décision : on regarde le prix, puis on
   clique. Un prix tronqué est une information perdue ; un bouton dimensionné
   sur son texte reste parfaitement visable au pouce. */
.ucp-mobile-cta__price {
	flex: 1 1 auto;
	min-width: 0;
}

.ucp-mobile-cta__label {
	display: block;
	font-size: var(--ucp-fs-micro);
	font-weight: var(--ucp-fw-semi);
	letter-spacing: var(--ucp-ls-label);
	text-transform: uppercase;
	color: rgba(244, 239, 231, 0.62);
}

.ucp-mobile-cta__value {
	display: block;
	margin-top: 2px;
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.15;
	color: var(--ucp-accent);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Le bouton se dimensionne sur son texte et ne se casse jamais en deux lignes.
   L'interlettrage se resserre : à 0,12 em, « Demander un devis » gagnait une
   vingtaine de pixels qui ne servaient qu'à repousser le prix. */
.ucp-mobile-cta .ucp-btn {
	flex: 0 0 auto;
	padding: 14px var(--ucp-space-5);
	font-size: var(--ucp-fs-xs);
	letter-spacing: 0.08em;
	white-space: nowrap;
	text-align: center;
}

/* Sous 360 px — les iPhone SE et les vieux Android sont encore là — on prend
   la place sur les marges plutôt que sur le texte. Resserrer les rembourrages
   ne coûte rien à la lisibilité ; raccourcir le libellé du bouton, si. */
@media (max-width: 359px) {
	.ucp-mobile-cta { gap: var(--ucp-space-3); padding-left: var(--ucp-space-4); padding-right: var(--ucp-space-4); }
	.ucp-mobile-cta .ucp-btn { padding: 14px var(--ucp-space-4); letter-spacing: 0.04em; }
}


/* --- La sélection de la page d'accueil ----------------------------------

   Le titre « C'est le moment de réserver » et le carrousel des quatre séjours
   ne font qu'un seul bloc, et c'est le point de la section : le sur-titre
   annonce la saison, le titre appelle à réserver, et les quatre séjours en sont
   la preuve immédiate. Séparés par une respiration de section entière, comme
   ils l'étaient, le titre devenait une déclaration en l'air et les séjours une
   liste sans raison.

   L'en-tête garde donc son rythme propre, mais l'espace qui le suit se resserre
   de moitié. Rien d'autre ne change : c'est le même en-tête et le même
   carrousel que partout ailleurs.
   ------------------------------------------------------------------------- */

.ucp-selection .ucp-section-header {
	margin-bottom: var(--ucp-space-6);
}

/* Le code court vit dans un module Code, donc dans une ligne Divi limitée en
   largeur. Sans sortie explicite de cette ligne, le blanc de la sélection
   s'arrête à 80 % de l'écran et laisse voir le fond crème sur les côtés : on
   obtient un cadre blanc involontaire autour du carrousel.

   Toute la sélection — fond, titre et carte — prend désormais la largeur du
   viewport. Le padding de section conserve une marge de lecture régulière et
   évite que le contenu touche les bords sur ordinateur. */
.ucp-selection {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-right: 0;
	margin-left: 0;
	overflow: hidden;
	overflow: clip;
}

/* Sur la page d'accueil, le code court est placé dans une ligne Divi bornée à
   90 %. On élargit cette ligne elle-même au lieu de simuler le plein écran avec
   `100vw`. Cette ancienne méthode comptait la largeur de la barre de défilement
   et décalait toute la sélection de 7 à 8 px sur la gauche, surtout visible sur
   téléphone. `:has()` cible uniquement la ligne qui contient la sélection. */
body.home .et_pb_section:has(.ucp-selection) .et_pb_row:has(.ucp-selection),
body.home .et_pb_section:has(.ucp-selection) .et_pb_column:has(.ucp-selection),
body.home .et_pb_section:has(.ucp-selection) .et_pb_code:has(.ucp-selection),
body.home .et_pb_section:has(.ucp-selection) .et_pb_code_inner {
	width: 100%;
	max-width: none;
	margin-right: 0;
	margin-left: 0;
	padding-right: 0;
	padding-left: 0;
}

.ucp-selection__carousel,
.ucp-selection__carousel .ucp-carousel__viewport {
	width: 100%;
}

/* Sur un grand écran, une hauteur fixe de 540 px rendait la carte très plate
   une fois étirée. Elle grandit légèrement avec le viewport, avec une limite
   haute pour que la section ne monopolise jamais tout le premier écran. */
.ucp-selection .ucp-sejour-wide {
	min-height: clamp(540px, 38vw, 700px);
}

/* Les flèches rentrent dans le cadre au lieu de déborder à l'extérieur, où
   elles créaient un défilement horizontal sur une carte pleine largeur.

   Celle de gauche tombe donc sur la photo, celle de droite sur le crème du
   corps de carte. C'est le fond crème et le filet sombre du bouton qui les
   rendent lisibles dans les deux cas : sans eux, une flèche sombre sur une
   photo sombre disparaîtrait une image sur deux. */
.ucp-selection__carousel .ucp-carousel__btn--prev { left: var(--ucp-space-5); }
.ucp-selection__carousel .ucp-carousel__btn--next { right: var(--ucp-space-5); }

/* La raison de la mise en avant, en pastille dorée sur la photo. C'est la seule
   information de la carte qui ne vient pas du produit : elle dit pourquoi ce
   séjour est là aujourd'hui, et elle a vocation à changer souvent. */
.ucp-selection .ucp-badge {
	max-width: calc(100% - 32px);
	text-align: center;
}