/**
 * Chalets Confort — feuille de style principale.
 *
 * Habillage d'après la maquette Figma « Chalets comfort - clean »
 * (variante bleue). Les couleurs ont été relevées visuellement sur les
 * captures : elles sont cohérentes entre elles mais restent à confronter aux
 * styles Figma avant mise en production.
 *
 * Partis pris repris de la maquette :
 *  - tout est arrondi (boutons en pilule, très grands rayons sur les pavés) ;
 *  - les cartes chalet sont sans cadre : image arrondie puis texte à nu ;
 *  - le titre de carte est bleu, pas bleu nuit ;
 *  - hero, réassurance et footer sont des pavés à très grand rayon.
 */

/* =========================================================================
   1. Tokens
   ====================================================================== */

:root {
	/* Couleurs */
	--cc-navy: #12263f;            /* footer, promotions, bandeau concours */
	--cc-navy-soft: #1b3a5c;
	--cc-blue: #1d6fe0;            /* boutons, titres de carte, flèches */
	--cc-blue-dark: #1657b4;
	--cc-blue-mid: #1b5c9e;        /* bandeau réassurance */
	--cc-blue-light: #5b9be8;      /* texte mis en avant sur fond navy */

	--cc-color-text: var(--cc-navy);
	--cc-color-muted: #6b7a8f;
	--cc-color-bg: #ffffff;
	--cc-color-page: #f4f6f8;      /* fond de page, légèrement gris */
	--cc-color-surface: #e9f0f8;   /* pavés hero région, FAQ, filtres */
	--cc-color-border: #dbe3ec;
	--cc-color-accent: var(--cc-blue);
	--cc-color-accent-dark: var(--cc-blue-dark);
	--cc-color-accent-contrast: #ffffff;
	--cc-color-dark: var(--cc-navy);
	--cc-color-promo: #c2410c;

	/* Typographie — la maquette emploie une grotesque géométrique très
	   arrondie. Poppins en est le substitut libre le plus proche ; la police
	   réelle reste à confirmer auprès du studio. */
	--cc-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cc-font-heading: var(--cc-font-body);
	--cc-text-xs: 0.75rem;
	--cc-text-sm: 0.875rem;
	--cc-text-base: 1rem;
	--cc-text-lg: 1.125rem;
	--cc-text-xl: 1.5rem;
	--cc-text-2xl: 2rem;
	--cc-text-3xl: 3.25rem;

	/* Rythme */
	--cc-space-1: 0.25rem;
	--cc-space-2: 0.5rem;
	--cc-space-3: 0.75rem;
	--cc-space-4: 1rem;
	--cc-space-6: 1.5rem;
	--cc-space-8: 2rem;
	--cc-space-12: 3rem;
	--cc-space-16: 4rem;
	--cc-space-24: 6rem;

	/* Formes */
	--cc-radius: 12px;
	--cc-radius-lg: 20px;
	--cc-radius-xl: 32px;
	--cc-radius-2xl: 44px;
	--cc-radius-pill: 999px;
	--cc-shadow: 0 2px 8px rgba(18, 38, 63, .06);
	--cc-shadow-lg: 0 12px 32px rgba(18, 38, 63, .12);

	/* Gabarit */
	--cc-container: 1200px;
	--cc-header-height: 72px;
	/* Chevauchement de la barre de filtres sur le bas du hero. */
	--cc-filters-overlap: 56px;
}

/* =========================================================================
   2. Base
   ====================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--cc-font-body);
	font-size: var(--cc-text-base);
	line-height: 1.6;
	color: var(--cc-color-text);
	background: var(--cc-color-page);
}

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

a { color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--cc-font-heading);
	line-height: 1.15;
	margin: 0 0 var(--cc-space-4);
	font-weight: 600;
	letter-spacing: -0.01em;
}

ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }

button { font: inherit; cursor: pointer; }

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

.cc-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: var(--cc-space-3) var(--cc-space-4);
	background: var(--cc-navy);
	color: #fff;
}
.cc-skip-link:focus { left: var(--cc-space-4); top: var(--cc-space-4); }

:focus-visible { outline: 2px solid var(--cc-blue); outline-offset: 2px; }

/* =========================================================================
   3. Gabarit
   ====================================================================== */

.cc-container {
	width: 100%;
	max-width: var(--cc-container);
	margin-inline: auto;
	padding-inline: var(--cc-space-4);
}

.cc-main { background: var(--cc-color-bg); }

.cc-section { padding-block: var(--cc-space-16); }

.cc-section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-4);
	margin-bottom: var(--cc-space-12);
}

.cc-section__title { font-size: var(--cc-text-2xl); margin: 0; }

/* Un titre employé seul porte lui-même l'espacement ; dans un en-tête, c'est
   l'en-tête qui s'en charge, on remet donc la marge à zéro. */
.cc-section__title { margin-bottom: var(--cc-space-12); }
.cc-section__header .cc-section__title { margin-bottom: 0; }

/* Puce de section : « Découvrez nos ambiances les plus populaires ». */
.cc-section__eyebrow {
	display: inline-block;
	margin-bottom: var(--cc-space-3);
	padding: var(--cc-space-1) var(--cc-space-4);
	border-radius: var(--cc-radius-pill);
	background: var(--cc-color-surface);
	color: var(--cc-color-muted);
	font-size: var(--cc-text-xs);
}

/* Lien de section : pilule contournée à droite du titre. */
.cc-section__link {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-2);
	padding: var(--cc-space-2) var(--cc-space-4);
	border: 1px solid var(--cc-navy);
	border-radius: var(--cc-radius-pill);
	font-size: var(--cc-text-sm);
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.cc-section__link::after { content: "→"; }
.cc-section__link:hover { background: var(--cc-navy); color: #fff; }

.cc-prose > * + * { margin-top: var(--cc-space-4); }
.cc-prose img { border-radius: var(--cc-radius-lg); }

/* =========================================================================
   4. Boutons, badges, puces
   ====================================================================== */

.cc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-space-2);
	padding: var(--cc-space-3) var(--cc-space-6);
	border: 1px solid transparent;
	border-radius: var(--cc-radius-pill);
	background: transparent;
	color: var(--cc-color-text);
	font-size: var(--cc-text-sm);
	font-weight: 500;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.cc-btn--primary { background: var(--cc-blue); border-color: var(--cc-blue); color: #fff; }
.cc-btn--primary:hover { background: var(--cc-blue-dark); border-color: var(--cc-blue-dark); }

.cc-btn--dark { background: var(--cc-navy); border-color: var(--cc-navy); color: #fff; }
.cc-btn--dark:hover { background: var(--cc-navy-soft); border-color: var(--cc-navy-soft); }

/* Contour : style par défaut des actions secondaires dans la maquette. */
.cc-btn--ghost { border-color: currentColor; background: transparent; }
.cc-btn--ghost:hover { background: rgba(255, 255, 255, .12); }

.cc-btn--block { display: flex; width: 100%; }

/* Bouton rond à flèche (carrousels, cartes expérience). */
.cc-btn--round {
	width: 48px; height: 48px;
	padding: 0;
	border-radius: var(--cc-radius-pill);
	border-color: var(--cc-color-border);
	background: #fff;
	flex: 0 0 auto;
}

.cc-badge {
	display: inline-block;
	padding: var(--cc-space-1) var(--cc-space-3);
	border-radius: var(--cc-radius-pill);
	font-size: var(--cc-text-xs);
	font-weight: 500;
	background: #fff;
	color: var(--cc-navy);
	box-shadow: var(--cc-shadow);
}
.cc-badge--promo { background: var(--cc-color-promo); color: #fff; }

.cc-chips { display: flex; flex-wrap: wrap; gap: var(--cc-space-2); }

.cc-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-2);
	padding: var(--cc-space-2) var(--cc-space-4);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-pill);
	background: #fff;
	font-size: var(--cc-text-sm);
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.cc-chip:hover { border-color: var(--cc-blue); }
.cc-chip.is-active { background: var(--cc-blue); border-color: var(--cc-blue); color: #fff; }
.cc-chip__count { color: var(--cc-color-muted); font-size: var(--cc-text-xs); }
.cc-chip.is-active .cc-chip__count { color: rgba(255, 255, 255, .75); }

.cc-tag {
	display: inline-block;
	padding: var(--cc-space-1) var(--cc-space-3);
	border-radius: var(--cc-radius-pill);
	background: var(--cc-color-surface);
	font-size: var(--cc-text-xs);
	color: var(--cc-color-muted);
}

/* =========================================================================
   5. Bandeau concours
   ====================================================================== */

.cc-announce { background: var(--cc-navy); color: #fff; font-size: var(--cc-text-sm); }
.cc-announce__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-4);
	padding-block: var(--cc-space-4);
}
.cc-announce__title { margin: 0; font-size: var(--cc-text-xl); font-weight: 600; flex: 0 0 auto; }
.cc-announce__text { margin: 0; flex: 1 1 260px; }
.cc-announce__text strong { color: var(--cc-blue-light); font-weight: 500; }
.cc-announce .cc-btn { color: #fff; }
.cc-announce__close {
	border: 0;
	background: transparent;
	color: #fff;
	font-size: var(--cc-text-lg);
	line-height: 1;
	padding: var(--cc-space-2);
}

/* =========================================================================
   6. Header
   ====================================================================== */

.cc-header { background: var(--cc-color-bg); }
.cc-header__bar { background: var(--cc-color-bg); }

.cc-header__inner {
	display: flex;
	align-items: center;
	gap: var(--cc-space-6);
	min-height: var(--cc-header-height);
}

.cc-header__logo { flex: 0 0 auto; text-decoration: none; }
.cc-header__wordmark { font-weight: 600; font-size: var(--cc-text-lg); }

.cc-nav--primary { display: none; flex: 1 1 auto; justify-content: center; }

.cc-nav__list { display: flex; align-items: center; gap: var(--cc-space-6); }
.cc-nav__list a {
	text-decoration: none;
	font-size: var(--cc-text-sm);
	font-weight: 400;
	padding-block: var(--cc-space-2);
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.cc-nav__list a:hover,
.cc-nav__list .current-menu-item > a { color: var(--cc-blue); border-bottom-color: var(--cc-blue); }

.cc-header__actions {
	display: flex;
	align-items: center;
	gap: var(--cc-space-3);
	margin-left: auto;
}

/* « Mon Compte » : pilule contournée. */
.cc-header__actions .cc-btn { border-color: var(--cc-color-border); padding-inline: var(--cc-space-4); }
.cc-header__actions .cc-btn:hover { border-color: var(--cc-navy); }

.cc-header__phone { display: none; font-size: var(--cc-text-sm); text-decoration: none; }
.cc-header__cta { display: none; }

/**
 * Sélecteur de langue : pilule segmentée, dans le même vocabulaire que les
 * boutons du header. La langue active est
 * remplie en bleu, l'autre reste cliquable sur fond blanc.
 */
.cc-lang {
	display: inline-flex;
	align-items: center;
	padding: 3px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-pill);
	background: #fff;
	font-size: var(--cc-text-xs);
	font-weight: 500;
	line-height: 1;
}

.cc-lang__item { display: flex; }

.cc-lang__item > a,
.cc-lang__item > span {
	display: grid;
	place-items: center;
	min-width: 34px;
	padding: var(--cc-space-2) var(--cc-space-3);
	border-radius: var(--cc-radius-pill);
	text-decoration: none;
	color: var(--cc-color-muted);
	transition: background-color .15s ease, color .15s ease;
}

.cc-lang__item > a:hover { color: var(--cc-navy); background: var(--cc-color-surface); }

.cc-lang__item.is-current > span {
	background: var(--cc-blue);
	color: #fff;
	font-weight: 600;
}

.cc-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-pill);
	background: transparent;
}
.cc-burger__box { position: relative; width: 18px; height: 2px; }
.cc-burger__line,
.cc-burger__box::before,
.cc-burger__box::after {
	position: absolute;
	left: 0;
	width: 18px; height: 2px;
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease;
}
.cc-burger__line { top: 0; }
.cc-burger__box::before { content: ""; top: -6px; }
.cc-burger__box::after { content: ""; top: 6px; }
.cc-burger[aria-expanded="true"] .cc-burger__line { opacity: 0; }
.cc-burger[aria-expanded="true"] .cc-burger__box::before { transform: translateY(6px) rotate(45deg); }
.cc-burger[aria-expanded="true"] .cc-burger__box::after { transform: translateY(-6px) rotate(-45deg); }

.cc-mobile-nav {
	border-top: 1px solid var(--cc-color-border);
	padding-block: var(--cc-space-4);
	background: var(--cc-color-bg);
}
.cc-mobile-nav[hidden] { display: none; }
.cc-mobile-nav__list a {
	display: block;
	padding: var(--cc-space-3) 0;
	text-decoration: none;
	border-bottom: 1px solid var(--cc-color-border);
}

@media (min-width: 1000px) {
	.cc-nav--primary { display: flex; }
	.cc-header__phone { display: inline-flex; }
	.cc-burger { display: none; }
	.cc-mobile-nav { display: none !important; }
}

/* =========================================================================
   7. Hero
   ====================================================================== */

.cc-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 520px;
	/* Le panneau de filtres déborde sous le hero : la marge lui laisse la
	   place avant la première section. */
	margin-bottom: var(--cc-space-24);
	padding-block: var(--cc-space-24) var(--cc-space-16);
	/* Le pavé image s'arrondit fortement en bas, comme dans la maquette. */
	border-radius: 0 0 var(--cc-radius-2xl) var(--cc-radius-2xl);
	background-color: var(--cc-navy);
	background-image:
		linear-gradient(180deg, rgba(18, 38, 63, .45), rgba(18, 38, 63, .25)),
		var(--cc-hero-image, none);
	background-position: center, center;
	background-size: cover, cover;
	background-repeat: no-repeat, no-repeat;
	text-align: center;
	color: #fff;
}
/* Le voile assombrissant est empilé comme première couche de fond plutôt que
   posé en ::before absolu. Cela évite d'avoir à positionner .cc-hero__inner,
   qui servirait alors de référence au panneau de filtres et le calerait sur le
   bas du texte au lieu du bas de la bannière. */
.cc-hero__inner { width: 100%; }

/* Le panneau de filtres du hero occupe une largeur plus généreuse que le
   corps de la page : la maquette le fait déborder de la grille éditoriale. */
.cc-hero > .cc-hero__inner { max-width: 1400px; }

.cc-hero__title {
	font-size: clamp(2rem, 5vw, var(--cc-text-3xl));
	margin: 0 auto var(--cc-space-4);
	max-width: 18ch;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .25);
}

.cc-hero__subtitle { font-size: var(--cc-text-base); margin: 0 auto var(--cc-space-12); max-width: 44ch; }

/* =========================================================================
   8. Barre de recherche
   ====================================================================== */

.cc-search {
	position: relative;
	display: grid;
	gap: var(--cc-space-2);
	max-width: 1240px;
	margin-inline: auto;
	padding: var(--cc-space-3);
	background: #fff;
	border-radius: var(--cc-radius-xl);
	box-shadow: var(--cc-shadow-lg);
	color: var(--cc-color-text);
	text-align: left;
}

.cc-search__field {
	display: flex;
	flex-direction: column;
	gap: 2px;
	/* Sans cette remise à zéro, une colonne de grille ne descend jamais sous
	   la largeur de son contenu : les libellés longs débordaient sous le
	   bouton « Rechercher ». */
	min-width: 0;
}
.cc-search__field > label,
.cc-search__label {
	font-size: var(--cc-text-xs);
	color: var(--cc-color-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cc-search select,
.cc-search input {
	width: 100%;
	min-width: 0;
	padding: var(--cc-space-1) 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--cc-text-sm);
	color: var(--cc-color-text);
	text-overflow: ellipsis;
}
.cc-search select:focus,
.cc-search input:focus { outline: none; }

.cc-search__submit { white-space: nowrap; }

/* Onglet « Plus de filtres » suspendu sous la barre. */
.cc-search__more {
	position: absolute;
	left: 50%;
	bottom: -18px;
	transform: translateX(-50%);
	padding: var(--cc-space-2) var(--cc-space-4);
	border: 0;
	border-radius: 0 0 var(--cc-radius) var(--cc-radius);
	background: #fff;
	box-shadow: var(--cc-shadow);
	font-size: var(--cc-text-xs);
	color: var(--cc-blue);
}

@media (min-width: 900px) {
	.cc-search {
		grid-template-columns: repeat(5, 1fr) auto;
		align-items: center;
		border-radius: var(--cc-radius-pill);
		padding-inline: var(--cc-space-8) var(--cc-space-3);
	}
	.cc-search__field + .cc-search__field {
		border-left: 1px solid var(--cc-color-border);
		padding-left: var(--cc-space-4);
	}
}

/* La barre chevauche le bas du hero. */
.cc-hero .cc-search { margin-bottom: calc(var(--cc-space-16) * -1); }

/* =========================================================================
   9. Grilles, tuiles, cartes
   ====================================================================== */

.cc-grid { display: grid; gap: var(--cc-space-8) var(--cc-space-6); grid-template-columns: 1fr; }

@media (min-width: 600px) { .cc-grid--chalets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cc-grid--chalets { grid-template-columns: repeat(3, 1fr); } }

.cc-tiles { display: grid; gap: var(--cc-space-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.cc-tile {
	border-radius: var(--cc-radius-lg);
	padding: var(--cc-space-6);
	background: var(--cc-color-surface);
	transition: transform .15s ease, box-shadow .15s ease;
}
.cc-tile:hover { transform: translateY(-2px); box-shadow: var(--cc-shadow); }
.cc-tile a { text-decoration: none; display: block; }
.cc-tile__label { display: block; font-weight: 600; font-size: var(--cc-text-lg); }
.cc-tile__count { display: block; font-size: var(--cc-text-sm); color: var(--cc-color-muted); }
.cc-tile__cities { margin: var(--cc-space-3) 0 0; font-size: var(--cc-text-sm); color: var(--cc-color-muted); }

/* --- Carte chalet : sans cadre, image arrondie puis texte à nu --- */

.cc-card { display: flex; flex-direction: column; background: transparent; }

.cc-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--cc-radius-lg);
	overflow: hidden;
	background: var(--cc-color-surface);
}
.cc-card__media > a { display: block; height: 100%; }
.cc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.cc-card:hover .cc-card__media img { transform: scale(1.03); }
.cc-card__placeholder { display: block; width: 100%; height: 100%; }

.cc-card__badges {
	position: absolute;
	top: var(--cc-space-3);
	left: var(--cc-space-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-2);
}


.cc-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-1);
	padding-top: var(--cc-space-3);
}

/* Le titre de carte est bleu dans la maquette, et placé avant la ville. */
.cc-card__title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cc-space-3);
	margin: 0;
	font-size: var(--cc-text-base);
	font-weight: 600;
	color: var(--cc-blue);
	order: -1;
}
.cc-card__title a { text-decoration: none; }
.cc-card__title a:hover { text-decoration: underline; }

.cc-card__rating { flex: 0 0 auto; font-size: var(--cc-text-sm); font-weight: 500; color: var(--cc-color-muted); }

.cc-card__location,
.cc-card__specs { margin: 0; font-size: var(--cc-text-sm); color: var(--cc-color-muted); }
.cc-card__specs { display: flex; flex-wrap: wrap; gap: var(--cc-space-4); }

.cc-card__tagline { display: none; } /* absent de la maquette */

.cc-card__price { margin: var(--cc-space-2) 0 0; font-size: var(--cc-text-sm); color: var(--cc-color-muted); }
.cc-card__price strong { color: var(--cc-navy); font-size: var(--cc-text-base); }

/* =========================================================================
   10. Promotions
   ====================================================================== */

.cc-promos { display: grid; gap: var(--cc-space-4); }

.cc-promo {
	display: flex;
	align-items: center;
	gap: var(--cc-space-4);
	padding: var(--cc-space-4);
	border-radius: var(--cc-radius-xl);
	background: var(--cc-navy);
	color: #fff;
}
.cc-promo__figure {
	position: relative;
	flex: 0 0 auto;
	width: 118px; height: 118px;
	border-radius: var(--cc-radius-pill);
	overflow: hidden;
	background: var(--cc-navy-soft);
	display: grid;
	place-items: center;
}
.cc-promo__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.cc-promo__value { position: relative; font-size: var(--cc-text-xl); font-weight: 600; }
.cc-promo__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cc-space-2); }
.cc-promo__title { margin: 0; font-size: var(--cc-text-lg); font-weight: 600; line-height: 1.2; }
.cc-promo__mention { margin: 0; font-size: var(--cc-text-xs); color: rgba(255, 255, 255, .7); }
.cc-promo .cc-btn--primary { padding-block: var(--cc-space-2); }

/* =========================================================================
   11. Bandeau réassurance
   ====================================================================== */

.cc-reassurance {
	border-radius: var(--cc-radius-2xl);
	background: var(--cc-blue-mid);
	color: #fff;
	padding: var(--cc-space-8) var(--cc-space-6);
}
.cc-reassurance__list {
	display: grid;
	gap: var(--cc-space-6);
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.cc-reassurance__item { display: flex; gap: var(--cc-space-3); align-items: flex-start; }
.cc-reassurance__title { margin: 0; font-size: var(--cc-text-sm); font-weight: 600; }
.cc-reassurance__text { margin: 0; font-size: var(--cc-text-xs); color: rgba(255, 255, 255, .75); }

/* =========================================================================
   12. Filtres, pagination, états
   ====================================================================== */

.cc-filters {
	display: grid;
	gap: var(--cc-space-4);
	padding: var(--cc-space-6);
	margin-bottom: var(--cc-space-8);
	background: var(--cc-color-surface);
	border-radius: var(--cc-radius-xl);
}
.cc-filters__field label {
	display: block;
	font-size: var(--cc-text-xs);
	color: var(--cc-color-muted);
	margin-bottom: var(--cc-space-1);
}
.cc-filters__field select,
.cc-filters__field input {
	width: 100%;
	padding: var(--cc-space-2) var(--cc-space-3);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-pill);
	background: #fff;
	font: inherit;
	font-size: var(--cc-text-sm);
}
.cc-filters__actions { display: flex; align-items: center; gap: var(--cc-space-4); }
.cc-filters__reset { font-size: var(--cc-text-sm); color: var(--cc-color-muted); }

@media (min-width: 900px) {
	.cc-filters { grid-template-columns: repeat(5, 1fr) auto; align-items: end; }
}

.cc-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--cc-space-2);
	margin-top: var(--cc-space-16);
}
.cc-pagination a,
.cc-pagination__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px; height: 42px;
	padding-inline: var(--cc-space-3);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-pill);
	background: #fff;
	text-decoration: none;
	font-size: var(--cc-text-sm);
}
.cc-pagination__page.is-current { background: var(--cc-blue); border-color: var(--cc-blue); color: #fff; }
.cc-pagination__gap { color: var(--cc-color-muted); }

.cc-breadcrumb { padding-block: var(--cc-space-4); font-size: var(--cc-text-sm); color: var(--cc-color-muted); }
.cc-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--cc-space-2); list-style: none; }
.cc-breadcrumb li + li::before { content: "/"; margin-right: var(--cc-space-2); }

.cc-empty { padding: var(--cc-space-16) 0; text-align: center; color: var(--cc-color-muted); }

.cc-notice {
	padding: var(--cc-space-4) var(--cc-space-6);
	margin-bottom: var(--cc-space-6);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
	border-left: 3px solid var(--cc-color-border);
}
.cc-notice p { margin: 0; }
.cc-notice--error { border-left-color: var(--cc-color-promo); }

.cc-archive__header { margin-bottom: var(--cc-space-12); }
.cc-archive__title { font-size: var(--cc-text-2xl); margin-bottom: var(--cc-space-3); }
.cc-archive__count,
.cc-archive__intro { margin: 0; color: var(--cc-color-muted); }

/* =========================================================================
   13. Page destination
   ====================================================================== */

.cc-region-hero {
	position: relative;
	/* Place en bas pour le panneau de filtres qui chevauche le pavé. */
	padding-bottom: var(--cc-space-16);
	margin-block: var(--cc-space-8) var(--cc-space-16);
	padding: var(--cc-space-12) var(--cc-space-8) var(--cc-space-16);
	border-radius: var(--cc-radius-xl);
	background: var(--cc-color-surface);
}
.cc-region-hero__badge {
	display: inline-block;
	padding: var(--cc-space-3) var(--cc-space-8);
	border-radius: var(--cc-radius-pill);
	background: var(--cc-navy);
	color: #fff;
	font-size: var(--cc-text-2xl);
	font-weight: 600;
	margin-bottom: var(--cc-space-6);
}
.cc-region-hero__title { font-size: var(--cc-text-xl); max-width: 22ch; }
.cc-region-hero__count { color: var(--cc-color-muted); margin: 0 0 var(--cc-space-6); }
.cc-region-hero__intro { max-width: 52ch; color: var(--cc-color-muted); }

/* La grille porte sur le conteneur : le hero lui-même n'a qu'un seul enfant,
   une grille posée dessus ne créerait jamais deux colonnes. */
@media (min-width: 900px) {
	.cc-region-hero > .cc-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--cc-space-8);
		align-items: center;
	}
}

.cc-region-hero__media {
	border-radius: var(--cc-radius-lg);
	overflow: hidden;
}

/**
 * Panneau de filtres du hero de destination.
 *
 * Même principe que sur la page d'accueil : sorti du flux et ancré au bas du
 * pavé, pour que « Plus de filtres » ne rallonge pas le hero. Le décalage est
 * fixe et non proportionnel, sinon la barre remonterait au dépliage.
 */
.cc-region-hero > .cc-filters-panel {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: calc(100% - var(--cc-filters-overlap));
	width: min(100% - var(--cc-space-16), var(--cc-container) - var(--cc-space-16));
	margin: 0;
	z-index: 19;
	min-height: 79px;
	background: #fff;
	box-shadow: var(--cc-shadow-lg);
	color: var(--cc-color-text);
}

.cc-region-hero > .cc-filters-panel .cc-search--panel { border: 0; top: -23px; }

.cc-region-hero > .cc-filters-panel .cc-filters-panel__more {
	max-height: min(60vh, 560px);
	overflow-y: auto;
}

/* La première section doit laisser passer le panneau qui déborde. */
.cc-region-hero + .cc-section { padding-top: var(--cc-space-24); }
.cc-region-hero__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* =========================================================================
   14. Fiche chalet
   ====================================================================== */

.cc-gallery { display: block; margin-bottom: var(--cc-space-8); }

.cc-gallery__main img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--cc-radius-lg);
}

/* Les vignettes se placent sous la grande image, comme la maquette. */
.cc-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--cc-space-3);
	margin-top: var(--cc-space-3);
}
.cc-gallery__thumbs li { position: relative; }
.cc-gallery__thumbs img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--cc-radius);
}

/* Le bouton recouvre la 4e vignette. */
.cc-gallery__more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-space-2);
	border: 0;
	border-radius: var(--cc-radius);
	background: rgba(18, 38, 63, .55);
	color: #fff;
	font-size: var(--cc-text-sm);
	font-weight: 500;
}
.cc-gallery__plus {
	display: grid;
	place-items: center;
	width: 22px; height: 22px;
	border-radius: var(--cc-radius-pill);
	background: #fff;
	color: var(--cc-navy);
	font-size: var(--cc-text-sm);
	line-height: 1;
}

.cc-chalet__layout { display: grid; gap: var(--cc-space-8); }

@media (min-width: 1000px) {
	.cc-chalet__layout { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
}

.cc-chalet__title { font-size: var(--cc-text-2xl); margin-bottom: var(--cc-space-2); }
.cc-chalet__location { margin: 0 0 var(--cc-space-2); font-size: var(--cc-text-sm); color: var(--cc-color-muted); }
.cc-chalet__tagline { margin: 0 0 var(--cc-space-4); color: var(--cc-color-muted); }

.cc-chalet__specs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-6);
	padding-block: var(--cc-space-4);
	font-size: var(--cc-text-sm);
	color: var(--cc-color-muted);
}

.cc-chalet__badges { display: flex; flex-wrap: wrap; gap: var(--cc-space-2); margin-bottom: var(--cc-space-4); }

.cc-chalet__section { padding-block: var(--cc-space-8); border-top: 1px solid var(--cc-color-border); }
.cc-chalet__section h2 { font-size: var(--cc-text-lg); margin-bottom: var(--cc-space-8); }

.cc-amenities {
	display: grid;
	gap: var(--cc-space-3);
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	font-size: var(--cc-text-sm);
}

.cc-rooms { display: grid; gap: var(--cc-space-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cc-room { padding: var(--cc-space-4); border-radius: var(--cc-radius); background: var(--cc-color-surface); }
.cc-room__name { margin: 0 0 var(--cc-space-2); font-weight: 600; font-size: var(--cc-text-sm); }
.cc-room__beds { font-size: var(--cc-text-sm); color: var(--cc-color-muted); }

.cc-chalet__citq { font-size: var(--cc-text-xs); color: var(--cc-color-muted); padding-block: var(--cc-space-4); }

.cc-map { aspect-ratio: 16 / 9; border-radius: var(--cc-radius-lg); background: var(--cc-color-surface); }

/* --- Bloc de réservation (« bloc fixe » de la maquette) --- */

.cc-booking {
	padding: var(--cc-space-6);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-xl);
	background: #fff;
	box-shadow: var(--cc-shadow);
}
.cc-booking__title { margin: 0 0 var(--cc-space-4); font-weight: 600; font-size: var(--cc-text-lg); }
.cc-booking__price { margin: 0 0 var(--cc-space-4); }
.cc-booking__price strong { font-size: var(--cc-text-xl); }
.cc-booking__price span { color: var(--cc-color-muted); font-size: var(--cc-text-sm); }

.cc-booking__dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cc-space-2); margin-bottom: var(--cc-space-4); }

.cc-field { display: block; }
.cc-field__label {
	display: block;
	font-size: var(--cc-text-xs);
	color: var(--cc-color-muted);
	margin-bottom: var(--cc-space-1);
}
.cc-field input,
.cc-booking__form input[type="date"] {
	width: 100%;
	padding: var(--cc-space-2) var(--cc-space-3);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: #fff;
	font: inherit;
	font-size: var(--cc-text-sm);
}

.cc-booking__guests { margin: 0 0 var(--cc-space-4); padding: 0; border: 0; }

.cc-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-3);
	padding-block: var(--cc-space-3);
	border-bottom: 1px solid var(--cc-color-border);
}
.cc-stepper:last-child { border-bottom: 0; }
.cc-stepper__label { font-size: var(--cc-text-sm); }
.cc-stepper__input {
	width: 68px;
	flex: 0 0 auto;
	text-align: center;
	padding: var(--cc-space-1) var(--cc-space-2);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-pill);
	font: inherit;
}

.cc-booking__availability,
.cc-booking__note {
	margin: var(--cc-space-4) 0 0;
	font-size: var(--cc-text-sm);
	color: var(--cc-color-muted);
	text-align: center;
}
.cc-booking__contact { margin-top: var(--cc-space-6); }
.cc-booking__badge { margin: var(--cc-space-4) 0 0; font-size: var(--cc-text-sm); }

@media (min-width: 1000px) {
	.cc-booking { position: sticky; top: var(--cc-space-4); }
}

/* =========================================================================
   15. FAQ
   ====================================================================== */

.cc-faq { display: grid; gap: var(--cc-space-2); max-width: 720px; }
.cc-faq__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-4);
	padding: var(--cc-space-3) var(--cc-space-3) var(--cc-space-3) var(--cc-space-6);
	border-radius: var(--cc-radius-pill);
	background: var(--cc-color-surface);
	font-size: var(--cc-text-sm);
}
.cc-faq__toggle {
	width: 32px; height: 32px;
	flex: 0 0 auto;
	border: 1px solid var(--cc-navy);
	border-radius: var(--cc-radius-pill);
	background: transparent;
	display: grid;
	place-items: center;
}

/* =========================================================================
   16. Footer
   ====================================================================== */

.cc-footer {
	margin-top: var(--cc-space-16);
	padding-block: var(--cc-space-16) var(--cc-space-8);
	border-radius: var(--cc-radius-2xl) var(--cc-radius-2xl) 0 0;
	background: var(--cc-navy);
	color: #fff;
	font-size: var(--cc-text-sm);
}

.cc-footer__grid { display: grid; gap: var(--cc-space-8); grid-template-columns: 1fr; }

@media (min-width: 760px) { .cc-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cc-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; } }

.cc-footer__wordmark { font-weight: 600; font-size: var(--cc-text-lg); }
.cc-footer__address { font-style: normal; margin-block: var(--cc-space-4); color: rgba(255, 255, 255, .7); }
.cc-footer__contact a { color: #fff; text-decoration: underline; }
.cc-footer__contact li + li { margin-top: var(--cc-space-1); }
.cc-footer__socials { display: flex; gap: var(--cc-space-3); margin-top: var(--cc-space-6); }

.cc-footer__title { font-size: var(--cc-text-sm); font-weight: 600; margin-bottom: var(--cc-space-4); }
.cc-footer__title a { text-decoration: none; }
.cc-footer__list li + li { margin-top: var(--cc-space-2); }
.cc-footer__list a { text-decoration: none; color: rgba(255, 255, 255, .7); }
.cc-footer__list a:hover { color: #fff; }
.cc-footer__count { display: none; } /* absent de la maquette */

.cc-footer__newsletter p { color: rgba(255, 255, 255, .7); margin-block: 0 var(--cc-space-4); }

/* Champ et bouton fondus dans une même pilule blanche. */
.cc-footer__newsletter form,
.cc-newsletter {
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
	padding: var(--cc-space-1) var(--cc-space-1) var(--cc-space-1) var(--cc-space-4);
	background: #fff;
	border-radius: var(--cc-radius-pill);
}
.cc-footer__newsletter input[type="email"],
.cc-footer__newsletter input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--cc-text-sm);
	color: var(--cc-navy);
}
.cc-footer__newsletter input:focus { outline: none; }
.cc-footer__newsletter button,
.cc-footer__newsletter input[type="submit"] {
	flex: 0 0 auto;
	padding: var(--cc-space-2) var(--cc-space-4);
	border: 0;
	border-radius: var(--cc-radius-pill);
	background: var(--cc-blue);
	color: #fff;
	font-size: var(--cc-text-sm);
}

.cc-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-4);
	margin-top: var(--cc-space-16);
	padding-top: var(--cc-space-6);
	border-top: 1px solid rgba(255, 255, 255, .15);
	color: rgba(255, 255, 255, .6);
	font-size: var(--cc-text-xs);
}
.cc-footer__legal { display: flex; flex-wrap: wrap; gap: var(--cc-space-4); }
.cc-footer__legal a { color: inherit; }

/* =========================================================================
   17. Divers
   ====================================================================== */

.cc-404 { text-align: center; }
.cc-404__title { font-size: var(--cc-text-2xl); }
.cc-404 .cc-chips { justify-content: center; margin-top: var(--cc-space-6); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* =========================================================================
   18. Icônes
   ====================================================================== */

/**
 * Jeu d'icônes en traits, conforme à la maquette. Implémentées en masques CSS
 * plutôt qu'en images de fond : la couleur suit `currentColor`, ce qui permet
 * au cœur des favoris de passer au rouge à l'état actif sans second fichier.
 */
.cc-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	flex: 0 0 auto;
}

.cc-icon--heart {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1L12 21.2l7.7-7.7 1.1-1a5.5 5.5 0 0 0 0-7.9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1L12 21.2l7.7-7.7 1.1-1a5.5 5.5 0 0 0 0-7.9z'/%3E%3C/svg%3E");
}


.cc-icon--pin {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.cc-icon--user {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.cc-icon--star {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E");
	color: #f5a623;
}

/* Réseaux sociaux du footer. */
.cc-icon--facebook {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M14 9h3V6h-3c-2.2 0-4 1.8-4 4v2H8v3h2v7h3v-7h3l1-3h-4v-2c0-.6.4-1 1-1z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M14 9h3V6h-3c-2.2 0-4 1.8-4 4v2H8v3h2v7h3v-7h3l1-3h-4v-2c0-.6.4-1 1-1z'/%3E%3C/svg%3E");
	width: 1.25em; height: 1.25em;
}

.cc-icon--instagram {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E");
	width: 1.25em; height: 1.25em;
}

/* Le pictogramme de localisation précède le texte sur les cartes. */
.cc-card__location { display: flex; align-items: center; gap: var(--cc-space-1); }

/* =========================================================================
   19. Tuiles illustrées (destinations, expériences)
   ====================================================================== */

/**
 * Variante appliquée quand une image a été déposée dans les réglages. Sans
 * image, la tuile conserve son fond bleu pâle : la mise en page ne casse pas.
 */
.cc-tile--media {
	position: relative;
	padding: 0;
	overflow: hidden;
	min-height: 220px;
	background: var(--cc-navy);
}
.cc-tile--media > a {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	min-height: 220px;
	padding: var(--cc-space-6);
	color: #fff;
}
.cc-tile__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.cc-tile--media:hover .cc-tile__image { transform: scale(1.04); }

/* Voile pour garantir la lisibilité du libellé sur n'importe quelle photo. */
.cc-tile--media > a::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18, 38, 63, 0) 40%, rgba(18, 38, 63, .75) 100%);
}
.cc-tile--media .cc-tile__label,
.cc-tile--media .cc-tile__count,
.cc-tile--media .cc-tile__cities { position: relative; }
.cc-tile--media .cc-tile__count { color: rgba(255, 255, 255, .8); }
.cc-tile--media .cc-tile__cities { color: rgba(255, 255, 255, .7); padding: 0 var(--cc-space-6) var(--cc-space-6); }

/* =========================================================================
   20. Bloc invitation (« Prêt à vivre des moments inoubliables »)
   ====================================================================== */

.cc-invitation {
	position: relative;
	padding: var(--cc-space-16) var(--cc-space-6);
	border-radius: var(--cc-radius-2xl);
	background: var(--cc-color-surface);
	text-align: center;
	overflow: hidden;
}

.cc-invitation__body { position: relative; z-index: 1; max-width: 34ch; margin-inline: auto; }
.cc-invitation__icon { font-size: 2rem; color: var(--cc-blue); margin: 0 auto var(--cc-space-4); }
.cc-invitation__title { font-size: var(--cc-text-2xl); margin-bottom: var(--cc-space-3); }
.cc-invitation__text { margin: 0 0 var(--cc-space-6); color: var(--cc-color-muted); }

/**
 * Collage : sur mobile les photos passeraient par-dessus le texte, on les
 * masque. À partir de 900 px elles sont positionnées autour du bloc central,
 * légèrement pivotées comme dans la maquette.
 */
.cc-invitation__collage { display: none; }

@media (min-width: 900px) {
	.cc-invitation { padding-block: var(--cc-space-24); }
	.cc-invitation__collage { display: block; position: absolute; inset: 0; }
	.cc-invitation__photo {
		position: absolute;
		width: clamp(140px, 15vw, 220px);
		aspect-ratio: 4 / 3;
		object-fit: cover;
		border-radius: var(--cc-radius-lg);
		box-shadow: var(--cc-shadow);
	}
	.cc-invitation__photo--a { top: 12%;  left: 3%;   transform: rotate(-6deg); }
	.cc-invitation__photo--b { bottom: 8%; left: 10%;  transform: rotate(4deg); }
	.cc-invitation__photo--c { top: 8%;    right: 6%;  transform: rotate(5deg); }
	.cc-invitation__photo--d { bottom: 10%; right: 3%; transform: rotate(-4deg); }
	.cc-invitation__photo--e { top: 45%;   left: 0;    transform: rotate(8deg); width: clamp(120px, 11vw, 170px); }
	.cc-invitation__photo--f { top: 42%;   right: 0;   transform: rotate(-7deg); width: clamp(120px, 11vw, 170px); }
}

/* =========================================================================
   21. Bloc confort (« Destiné à votre confort »)
   ====================================================================== */

.cc-comfort__header { text-align: center; margin-bottom: var(--cc-space-12); }

.cc-comfort { display: grid; gap: var(--cc-space-8); align-items: center; }

@media (min-width: 900px) { .cc-comfort { grid-template-columns: 1fr 1fr; } }

.cc-comfort__list { display: grid; gap: var(--cc-space-6); }
.cc-comfort__item { display: flex; align-items: flex-start; gap: var(--cc-space-4); }
.cc-comfort__icon { width: 40px; height: 40px; flex: 0 0 auto; object-fit: contain; }
.cc-comfort__title { margin: 0; font-size: var(--cc-text-lg); font-weight: 600; }
.cc-comfort__text { margin: 0; font-size: var(--cc-text-sm); color: var(--cc-color-muted); }

/* Éventail de photos : empilées et pivotées, comme la maquette. */
.cc-comfort__media {
	position: relative;
	min-height: 340px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cc-comfort__photo {
	width: clamp(150px, 18vw, 230px);
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--cc-radius-lg);
	box-shadow: var(--cc-shadow-lg);
}
.cc-comfort__photo--a { transform: rotate(-5deg) translateY(10px); }
.cc-comfort__photo--b { transform: rotate(4deg) translate(-24px, -20px); z-index: 1; }
.cc-comfort__photo--c { transform: rotate(-3deg) translate(-48px, 24px); }
.cc-comfort__photo--d { display: none; }

@media (max-width: 599px) {
	.cc-comfort__media { flex-wrap: wrap; gap: var(--cc-space-3); }
	.cc-comfort__photo { transform: none !important; width: 46%; }
}

/* =========================================================================
   22. Bande photo
   ====================================================================== */

/**
 * Chevauche le bas du bandeau de réassurance. Purement décorative : masquée
 * sous 760 px, où l'empilement n'apporterait rien.
 */
.cc-strip { display: none; }

@media (min-width: 760px) {
	.cc-strip {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: calc(var(--cc-space-16) * -1);
		padding-inline: var(--cc-space-4);
	}
	.cc-strip__photo {
		width: clamp(120px, 14vw, 200px);
		aspect-ratio: 4 / 3;
		object-fit: cover;
		border-radius: var(--cc-radius-lg);
		box-shadow: var(--cc-shadow);
	}
	.cc-strip__photo:nth-child(odd)  { transform: rotate(-4deg); }
	.cc-strip__photo:nth-child(even) { transform: rotate(3deg) translateY(-8px); }
	.cc-strip__photo + .cc-strip__photo { margin-left: -18px; }
}

/* Le média du hero n'apparaît que si l'API fournit une image
   (cf. CC_Repository::region_image_url()). */

/* =========================================================================
   23. Cartes expérience
   ====================================================================== */

/**
 * Photo portrait à grands rayons, pastille d'icône en haut à droite, et
 * cartouche blanc en bas portant le libellé et un bouton flèche bleu.
 * Photo et icône viennent de l'API (GET /experiences).
 */

.cc-xp-grid {
	display: grid;
	gap: var(--cc-space-4);
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.cc-xp {
	position: relative;
	border-radius: var(--cc-radius-xl);
	overflow: hidden;
	background: var(--cc-navy);
	aspect-ratio: 3 / 4;
}

.cc-xp__link {
	position: relative;
	display: block;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.cc-xp__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.cc-xp:hover .cc-xp__image { transform: scale(1.04); }

/* Pastille d'icône, en haut à droite. */
.cc-xp__icon {
	position: absolute;
	top: var(--cc-space-4);
	right: var(--cc-space-4);
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: var(--cc-radius-pill);
	background: #fff;
	box-shadow: var(--cc-shadow);
}
.cc-xp__icon img { width: 24px; height: 24px; object-fit: contain; }

/* Cartouche blanc, en bas, en retrait des bords. */
.cc-xp__footer {
	position: absolute;
	left: var(--cc-space-3);
	right: var(--cc-space-3);
	bottom: var(--cc-space-3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-3);
	padding: var(--cc-space-2) var(--cc-space-2) var(--cc-space-2) var(--cc-space-4);
	border-radius: var(--cc-radius-pill);
	background: #fff;
	box-shadow: var(--cc-shadow);
}

.cc-xp__label {
	font-size: var(--cc-text-sm);
	font-weight: 500;
	line-height: 1.25;
	color: var(--cc-navy);
}
.cc-xp__slogan {
	display: block;
	font-size: var(--cc-text-xs);
	font-weight: 400;
	color: var(--cc-color-muted);
}

.cc-xp__arrow {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px; height: 34px;
	border-radius: var(--cc-radius-pill);
	background: var(--cc-blue);
	color: #fff;
	font-size: var(--cc-text-sm);
	transition: background-color .15s ease, transform .15s ease;
}
.cc-xp:hover .cc-xp__arrow { background: var(--cc-blue-dark); transform: translateX(2px); }

/* Sans photo : aplat bleu nuit, le cartouche reste lisible. */
.cc-xp--plain { background: linear-gradient(160deg, var(--cc-navy-soft), var(--cc-navy)); }

/* =========================================================================
   24. Blocs page-builder
   ====================================================================== */

.cc-block__heading { margin-block: var(--cc-space-12) var(--cc-space-8); font-size: var(--cc-text-2xl); }
.cc-block__text { max-width: 68ch; margin-block: var(--cc-space-4); }
.cc-block__button { margin-block: var(--cc-space-6); }

.cc-columns {
	display: grid;
	gap: var(--cc-space-8);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.cc-columns { grid-template-columns: repeat(var(--cc-columns, 2), minmax(0, 1fr)); }
}

/* Un bloc à l'intérieur d'une colonne ne réintroduit pas le conteneur. */
.cc-columns__item .cc-container { padding-inline: 0; max-width: none; }
.cc-columns__item .cc-section { padding-block: 0; }

/* Une diapositive cliquable ne doit pas casser l'alignement de la bande. */
.cc-strip__link { display: contents; }

/* Pastille d'icône dans le hero d'une expérience. */
.cc-region-hero__icon {
	position: static;
	display: inline-grid;
	margin-bottom: var(--cc-space-4);
}

/* =========================================================================
   25. Cartes OpenStreetMap (Leaflet)
   ====================================================================== */

.cc-map {
	aspect-ratio: 16 / 9;
	min-height: 320px;
	border-radius: var(--cc-radius-lg);
	background: var(--cc-color-surface);
	overflow: hidden;
	z-index: 0; /* garde la carte sous le header collant */
}

/* Épingle SVG : le conteneur de Leaflet porte un fond blanc par défaut. */
.cc-map__pin { background: none; border: 0; }

.cc-map__caption {
	margin-top: var(--cc-space-3);
	font-size: var(--cc-text-sm);
	color: var(--cc-color-muted);
}

.cc-map__list { margin-top: var(--cc-space-4); font-size: var(--cc-text-sm); }
.cc-map__list li + li { margin-top: var(--cc-space-2); }

/* Habillage Leaflet aux formes du thème. */
.leaflet-container { font: inherit; }
.leaflet-popup-content-wrapper {
	border-radius: var(--cc-radius);
	box-shadow: var(--cc-shadow-lg);
}
.leaflet-popup-content { margin: var(--cc-space-3) var(--cc-space-4); font-size: var(--cc-text-sm); }
.leaflet-popup-content a { color: var(--cc-blue); font-weight: 500; }
.leaflet-control-zoom a {
	border-radius: var(--cc-radius) !important;
	color: var(--cc-navy);
}
.leaflet-control-attribution { font-size: 10px; }

/* =========================================================================
   26. Fiche chalet — structure de la maquette
   ====================================================================== */

/* Panneau bleu pâle contenant la barre de recherche, en tête de fiche. */
.cc-searchbar-panel {
	padding-block: var(--cc-space-6);
}
.cc-searchbar-panel > .cc-container {
	padding-block: var(--cc-space-6);
	border-radius: var(--cc-radius-xl);
	background: var(--cc-color-surface);
}

.cc-chalet__chips { margin-bottom: var(--cc-space-3); }

.cc-chalet__title { font-size: var(--cc-text-2xl); margin-bottom: var(--cc-space-3); }

.cc-chalet__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-6);
	margin-bottom: var(--cc-space-8);
	font-size: var(--cc-text-sm);
	color: var(--cc-color-muted);
}
.cc-chalet__meta li { display: flex; align-items: center; gap: var(--cc-space-2); }
.cc-chalet__meta a { text-decoration: none; }
.cc-chalet__meta a:hover { text-decoration: underline; }
.cc-chalet__rating { font-weight: 500; color: var(--cc-navy); }

/* Équipements : trois colonnes avec pictogramme, comme la maquette. */
.cc-amenities {
	display: grid;
	gap: var(--cc-space-4) var(--cc-space-6);
	grid-template-columns: 1fr;
	font-size: var(--cc-text-sm);
}
@media (min-width: 600px)  { .cc-amenities { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cc-amenities { grid-template-columns: repeat(3, 1fr); } }

.cc-amenity { display: flex; align-items: flex-start; gap: var(--cc-space-3); }
.cc-amenity__icon { width: 20px; height: 20px; flex: 0 0 auto; object-fit: contain; }
.cc-amenity__bullet {
	width: 6px; height: 6px;
	margin-top: 8px;
	flex: 0 0 auto;
	border-radius: var(--cc-radius-pill);
	background: var(--cc-blue);
}
.cc-amenity small { display: block; color: var(--cc-color-muted); }

/* --- Compteurs de voyageurs --- */

.cc-stepper__controls {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-2);
	flex: 0 0 auto;
}
.cc-stepper__btn {
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	padding: 0;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-pill);
	background: #fff;
	color: var(--cc-navy);
	font-size: var(--cc-text-sm);
	line-height: 1;
}
.cc-stepper__btn:hover { border-color: var(--cc-blue); color: var(--cc-blue); }
.cc-stepper__input {
	width: 40px;
	border: 0;
	background: transparent;
	text-align: center;
	font: inherit;
	font-size: var(--cc-text-sm);
}
/* Les flèches natives feraient doublon avec nos boutons. */
.cc-stepper__input::-webkit-outer-spin-button,
.cc-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cc-stepper__input { -moz-appearance: textfield; }

.cc-booking__hint {
	margin: var(--cc-space-3) 0 0;
	font-size: var(--cc-text-xs);
	color: var(--cc-color-muted);
}

/* --- Calendriers de disponibilité --- */

.cc-calendars {
	display: grid;
	gap: var(--cc-space-4);
	grid-template-columns: 1fr;
}
@media (min-width: 700px) { .cc-calendars { grid-template-columns: repeat(2, 1fr); } }

.cc-calendar {
	padding: var(--cc-space-6);
	border-radius: var(--cc-radius-lg);
	background: var(--cc-color-surface);
}
.cc-calendar__legend { margin: 0; font-weight: 600; }
.cc-calendar__month {
	margin: var(--cc-space-2) 0 var(--cc-space-4);
	color: var(--cc-color-muted);
	font-size: var(--cc-text-sm);
}

.cc-calendar__grid { width: 100%; border-collapse: collapse; font-size: var(--cc-text-sm); }
.cc-calendar__grid th {
	padding-bottom: var(--cc-space-2);
	font-weight: 400;
	color: var(--cc-color-muted);
	font-size: var(--cc-text-xs);
}
.cc-calendar__grid abbr { text-decoration: none; }
.cc-calendar__grid td { padding: 2px; text-align: center; }
.cc-calendar__grid time {
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	margin-inline: auto;
	border-radius: var(--cc-radius-pill);
}

.cc-calendar__grid .is-available time { background: #fff; color: var(--cc-navy); }
.cc-calendar__grid .is-booked time {
	color: var(--cc-color-muted);
	text-decoration: line-through;
	opacity: .55;
}
.cc-calendar__grid .is-today time { outline: 2px solid var(--cc-blue); outline-offset: -2px; }
.cc-calendar__grid .is-unknown time { color: var(--cc-color-muted); }

.cc-calendar__key {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-6);
	margin-top: var(--cc-space-4);
	font-size: var(--cc-text-xs);
	color: var(--cc-color-muted);
}
.cc-calendar__key li { display: flex; align-items: center; gap: var(--cc-space-2); }
.cc-calendar__swatch {
	width: 14px; height: 14px;
	border-radius: var(--cc-radius-pill);
	border: 1px solid var(--cc-color-border);
}
.cc-calendar__swatch.is-available { background: #fff; }
.cc-calendar__swatch.is-booked { background: var(--cc-color-border); }

/* --- Points d'intérêt de la région --- */

.cc-activities {
	display: grid;
	gap: var(--cc-space-4);
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.cc-activity {
	position: relative;
	border-radius: var(--cc-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--cc-color-surface);
}
.cc-activity__image { width: 100%; height: 100%; object-fit: cover; }
.cc-activity__label {
	position: absolute;
	left: var(--cc-space-3);
	bottom: var(--cc-space-3);
	right: var(--cc-space-3);
	padding: var(--cc-space-2) var(--cc-space-4);
	border-radius: var(--cc-radius-pill);
	background: #fff;
	font-size: var(--cc-text-sm);
	font-weight: 500;
}

/* Activité sans photo : la tuile ne réserve pas un cadre vide. */
.cc-activity--plain {
	aspect-ratio: auto;
	display: flex;
	align-items: center;
	padding: var(--cc-space-6);
	background: var(--cc-color-surface);
}
.cc-activity--plain .cc-activity__label {
	position: static;
	background: none;
	padding: 0;
	font-weight: 600;
}
.cc-activity > a { display: contents; }

/* =========================================================================
   27. Visionneuse de galerie
   ====================================================================== */

.cc-viewer {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--cc-space-4);
	padding: var(--cc-space-6);
	background: rgba(18, 38, 63, .94);
}
.cc-viewer[hidden] { display: none; }

.cc-viewer__stage {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cc-space-3);
	min-width: 0;
}
.cc-viewer__image {
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	border-radius: var(--cc-radius-lg);
	object-fit: contain;
}
.cc-viewer__caption { color: rgba(255, 255, 255, .8); font-size: var(--cc-text-sm); text-align: center; }
.cc-viewer__caption[hidden] { display: none; }

.cc-viewer__close,
.cc-viewer__nav {
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	border: 0;
	border-radius: var(--cc-radius-pill);
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: var(--cc-text-xl);
	line-height: 1;
	transition: background-color .15s ease;
}
.cc-viewer__close:hover,
.cc-viewer__nav:hover { background: rgba(255, 255, 255, .25); }

.cc-viewer__close {
	position: absolute;
	top: var(--cc-space-6);
	right: var(--cc-space-6);
}

.cc-viewer__count {
	position: absolute;
	left: 50%;
	bottom: var(--cc-space-6);
	transform: translateX(-50%);
	margin: 0;
	color: rgba(255, 255, 255, .8);
	font-size: var(--cc-text-sm);
}

/* Sur mobile les flèches passent sous l'image, faute de place latérale. */
@media (max-width: 700px) {
	.cc-viewer {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "stage stage" "prev next";
		align-content: center;
	}
	.cc-viewer__stage { grid-area: stage; }
	.cc-viewer__nav--prev { grid-area: prev; justify-self: end; }
	.cc-viewer__nav--next { grid-area: next; justify-self: start; }
	.cc-viewer__image { max-height: 62vh; }
}

/* =========================================================================
   28. Panneau de filtres avancés
   ====================================================================== */

.cc-filters-panel {
	position: relative;
	margin-bottom: var(--cc-space-16);
	padding: var(--cc-space-6);
	border-radius: var(--cc-radius-xl);
	background: var(--cc-color-surface);
}

/* Volontairement non positionnée : l'onglet ci-dessous se cale ainsi sur le
   panneau entier, et se retrouve sous la liste dépliée plutôt que par-dessus. */
.cc-filters-panel__bar { position: static; }

/* Barre de recherche du panneau : fond blanc, sans ombre portée. */
.cc-search--panel { box-shadow: none; border: 1px solid var(--cc-color-border); }

/* Onglet « Plus de filtres », suspendu sous la barre. */
.cc-filters-panel__toggle {
	position: absolute;
	left: 50%;
	bottom: -30px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-2);
	padding: var(--cc-space-2) var(--cc-space-4);
	border: 0;
	border-radius: 0 0 var(--cc-radius) var(--cc-radius);
	background: #fff;
	box-shadow: var(--cc-shadow);
	font-size: var(--cc-text-xs);
	color: var(--cc-blue);
	z-index: 1;
}
.cc-filters-panel__chevron { transition: transform .2s ease; }
.cc-filters-panel__toggle[aria-expanded="true"] .cc-filters-panel__chevron { transform: rotate(180deg); }

.cc-filters-panel__more {
	margin-top: var(--cc-space-8);
	padding-top: var(--cc-space-8);
	border-top: 1px solid var(--cc-color-border);
}
.cc-filters-panel__more[hidden] { display: none; }

.cc-filters-panel__legend,
.cc-filters-group__legend {
	padding: 0;
	margin: 0 0 var(--cc-space-3);
	font-size: var(--cc-text-sm);
	font-weight: 600;
	color: var(--cc-color-muted);
}

.cc-filters-panel__active {
	padding-bottom: var(--cc-space-6);
	margin-bottom: var(--cc-space-8);
	border-bottom: 1px solid var(--cc-color-border);
}

/* Pastille retirable de la rangée « Filtres actifs ». */
.cc-chip--removable { background: #fff; text-decoration: none; }
.cc-chip__remove {
	display: grid;
	place-items: center;
	width: 16px; height: 16px;
	border-radius: var(--cc-radius-pill);
	background: var(--cc-color-border);
	color: var(--cc-navy);
	font-size: 11px;
	line-height: 1;
}
.cc-chip--removable:hover .cc-chip__remove { background: var(--cc-color-promo); color: #fff; }

.cc-filters-panel__groups {
	display: grid;
	gap: var(--cc-space-12) var(--cc-space-8);
	grid-template-columns: 1fr;
}
@media (min-width: 800px)  { .cc-filters-panel__groups { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1300px) { .cc-filters-panel__groups { grid-template-columns: repeat(3, 1fr); } }

.cc-filters-group { border: 0; padding: 0; margin: 0; }
.cc-filters-group__items { display: flex; flex-wrap: wrap; gap: var(--cc-space-2); }

/* Les pastilles s'ajustent à leur libellé et ne s'étirent pas. */
.cc-filters-group__items .cc-chip { flex: 0 0 auto; max-width: 100%; }

/* Pastille à cocher : la case reste accessible au clavier mais invisible. */
.cc-chip--check { cursor: pointer; background: #fff; }
.cc-chip--check input {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
}
.cc-chip--check:has(input:checked),
.cc-chip--check.is-active {
	background: var(--cc-blue);
	border-color: var(--cc-blue);
	color: #fff;
}
.cc-chip--check:has(input:checked) .cc-chip__count,
.cc-chip--check.is-active .cc-chip__count { color: rgba(255, 255, 255, .75); }
.cc-chip--check:has(input:focus-visible) { outline: 2px solid var(--cc-blue); outline-offset: 2px; }

.cc-filters-price__inputs { display: flex; align-items: center; gap: var(--cc-space-3); }
.cc-filters-price__inputs label {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-1);
	padding: var(--cc-space-2) var(--cc-space-4);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-pill);
	background: #fff;
	font-size: var(--cc-text-sm);
}
.cc-filters-price__inputs input { width: 72px; border: 0; background: transparent; font: inherit; }
.cc-filters-price__sep { color: var(--cc-color-muted); }

.cc-filters-panel__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-4);
	margin-top: var(--cc-space-8);
	padding-top: var(--cc-space-6);
	border-top: 1px solid var(--cc-color-border);
}

/* Panneau de filtres posé dans le hero : fond blanc plutôt que bleu pâle,
   pour ressortir sur la photo, et chevauchement du bas comme la maquette.
   Le hero impose `color: #fff` à sa descendance : sans cette remise à zéro,
   les libellés seraient blancs sur blanc, donc invisibles. */
.cc-hero .cc-filters-panel {
	max-width: none;
	margin-inline: auto;
	margin-bottom: calc(var(--cc-space-16) * -1);
	background: #fff;
	box-shadow: var(--cc-shadow-lg);
	text-align: left;
	color: var(--cc-color-text);
}
.cc-hero .cc-search--panel { border: 0; }

/**
 * Le panneau est ancré au bas du hero et sort du flux : déplier « Plus de
 * filtres » le fait grandir vers le bas, par-dessus les sections suivantes,
 * sans rallonger la bannière ni décaler la page.
 *
 * La référence est `.cc-hero` et non `.cc-hero__inner` : ce dernier ne
 * mesure que le texte, `top: 100%` tombait donc au-dessus du bas réel de la
 * bannière et laissait dépasser une bande sombre de chaque côté du panneau.
 */
.cc-hero .cc-filters-panel {
	position: absolute;
	/* Décalage fixe et non proportionnel : un `translateY(-50%)` dépendrait
	   de la hauteur du panneau, et la barre remonterait au dépliage. */
	top: calc(100% - var(--cc-filters-overlap));
	left: 50%;
	transform: translateX(-50%);
	width: min(100% - var(--cc-space-8), var(--cc-container));
	margin: 0;
	z-index: 19;
	/* Hauteur de la barre repliée : le panneau garde la même assise que le
	   dépliage soit ouvert ou fermé. */
	min-height: 79px;
}

/* Remonte la barre dans le panneau pour l'aligner sur le bord du hero. */
.cc-hero .cc-search--panel { top: -23px; }

/* La liste dépliée ne doit jamais dépasser l'écran. */
.cc-hero .cc-filters-panel__more {
	max-height: min(60vh, 560px);
	overflow-y: auto;
}

/* Place pour l'onglet qui pend sous le panneau déplié. */
.cc-filters-panel.is-open { padding-bottom: var(--cc-space-8); }

/* =========================================================================
   29. Blocs de la révision d'API de juillet 2026
   ====================================================================== */

/* Pastille de promotion : image de fond, icône ou pourcentage par-dessus. */
.cc-promo__figure img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cc-promo__icon {
	position: relative;
	width: 28px !important;
	height: 28px !important;
	object-fit: contain !important;
	inset: auto !important;
}
.cc-promo--featured { outline: 2px solid var(--cc-blue); outline-offset: 2px; }

.cc-reassurance__icon { width: 28px; height: 28px; flex: 0 0 auto; object-fit: contain; }

/* Zone de contenu libre : texte seul, ou texte et image côte à côte. */
.cc-content-zone__body { max-width: 68ch; }
.cc-content-zone__media img {
	width: 100%;
	border-radius: var(--cc-radius-lg);
	object-fit: cover;
}

@media (min-width: 900px) {
	.cc-content-zone--media {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--cc-space-12);
		align-items: center;
	}
	.cc-content-zone--media .cc-content-zone__body { max-width: none; }
}

/* Pastille de surtitre du bloc « info_company » : la couleur vient du CMS,
   posée en style inline ; on neutralise donc le fond par défaut. */
.cc-comfort__badge {
	background: var(--cc-navy);
	color: #fff;
	font-size: var(--cc-text-sm);
	padding: var(--cc-space-2) var(--cc-space-6);
}

/* Une seule colonne d'arguments sans photo : on ne réserve pas la moitié
   droite pour rien. */
.cc-comfort:not(:has(.cc-comfort__media)) { grid-template-columns: 1fr; }

/* Bandeau « réassurance ». Fond et couleur de texte viennent du CMS en style
   inline ; on ne fixe ici que la géométrie, plus un repli si le CMS n'a rien. */
.cc-reassurance {
	background: var(--cc-navy);
	color: #fff;
	border-radius: var(--cc-radius-2xl);
	padding: var(--cc-space-12) var(--cc-space-8);
}

.cc-reassurance__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--cc-space-8);
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.cc-reassurance__item {
	display: flex;
	align-items: flex-start;
	gap: var(--cc-space-3);
}

/* Séparateurs verticaux entre colonnes : invisibles dès qu'une colonne passe
   à la ligne, d'où le retrait en dessous de la largeur de deux colonnes. */
@media (min-width: 900px) {
	.cc-reassurance__item + .cc-reassurance__item {
		border-left: 1px solid rgba(255, 255, 255, .22);
		padding-left: var(--cc-space-8);
	}
}

.cc-reassurance__icon { width: 28px; height: 28px; flex: 0 0 auto; object-fit: contain; }
.cc-reassurance__title { margin: 0; font-weight: 600; font-size: var(--cc-text-base); }
.cc-reassurance__text { margin: var(--cc-space-1) 0 0; font-size: var(--cc-text-sm); opacity: .8; }

/* Bande de photos inclinées sous le bandeau de réassurance.
   Elle remonte juste assez pour mordre le bord bas du bandeau : au-delà, les
   vignettes recouvriraient le texte des arguments. */
.cc-reassurance__slides {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: calc(var(--cc-reassurance-slide-h) * -0.16);
	padding-inline: var(--cc-space-4);
}

.cc-section--reassurance { --cc-reassurance-slide-h: 200px; }

.cc-reassurance__slide {
	width: 190px;
	height: var(--cc-reassurance-slide-h);
	object-fit: cover;
	border-radius: var(--cc-radius-lg);
	box-shadow: 0 14px 34px rgba(18, 45, 77, .22);
	/* Chevauchement : chaque vignette mord sur la précédente. */
	margin-inline: -18px;
}

/* Inclinaisons alternées, comme les polaroids de la maquette. Un cycle de 4
   évite que deux voisines partagent le même angle. */
.cc-reassurance__slide:nth-child(4n + 1) { transform: rotate(-6deg); z-index: 1; }
.cc-reassurance__slide:nth-child(4n + 2) { transform: rotate(3deg)  translateY(14px); z-index: 2; }
.cc-reassurance__slide:nth-child(4n + 3) { transform: rotate(-3deg) translateY(-8px); z-index: 3; }
.cc-reassurance__slide:nth-child(4n)     { transform: rotate(5deg)  translateY(10px); z-index: 2; }

@media (max-width: 899px) {
	/* Sur mobile la bande devient un carrousel horizontal : les photos
	   redressées et posées côte à côte restent lisibles. */
	.cc-reassurance__slides {
		justify-content: flex-start;
		overflow-x: auto;
		gap: var(--cc-space-3);
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
	.cc-reassurance__slide {
		transform: none;
		margin-inline: 0;
		flex: 0 0 auto;
		scroll-snap-align: center;
	}
}