/* =========================================================================
   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__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);
}

.ucp-card__media {
	position: relative;
	height: 220px;
	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%);
}

/* Titre incrusté en bas de la photo (cartes du catalogue chasse). */
.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; }

/* --- 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);
}


/* =========================================================================
   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
   ========================================================================= */

.ucp-form-card {
	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); }

/* 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 1fr 1fr 1.6fr;
	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__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;
}

.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-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; }
}