/**
 * 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;
	/* Orange d'appel : bandeau d'annonce, et toute pastille qui doit se voir
	   sur le bleu nuit. */
	--cc-orange: #ff8a00;
	--cc-orange-fonce: #e07a00;

	/* Typographie — Comfortaa, la grotesque géométrique arrondie de la
	   maquette. Elle ne dispose que de graisses 300 à 700 ; pas d'italique
	   propre (le navigateur en synthétise une au besoin). */
	--cc-font-body: "Comfortaa", -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;
	/* Deux échelons manquaient à l'appel alors que sept déclarations s'en
	   servaient. Une variable absente rend sa déclaration invalide : le
	   remplissage des avis, la marge de l'en-tête de l'encart de réservation,
	   celui des actions du panneau de filtres et l'écart entre ses colonnes
	   tombaient tous à zéro, sans rien signaler. */
	--cc-space-5: 1.25rem;
	--cc-space-6: 1.5rem;
	--cc-space-8: 2rem;
	--cc-space-10: 2.5rem;
	--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: 88px;
	/* 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);
	/* Fond légèrement gris plutôt que blanc franc : tout se confondait, et les
	   encarts blancs — carte de réservation, tuiles, panneau de filtres — ne se
	   détachaient de rien. Le gris est bleuté, tiré du bleu du thème, pour ne
	   pas virer au terne. */
	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);
}

/* Le contenu hérite du fond de page : les blocs qui doivent se détacher
   posent leur propre fond blanc. */
.cc-main { background: transparent; }

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

/* Surtitre et titre forment un groupe dans l'en-tête : sans cela le surtitre
   deviendrait une colonne flex à part, posée à côté du titre au lieu d'être
   au-dessus. */
.cc-section__heading { display: grid; justify-items: start; }
.cc-section__heading .cc-section__eyebrow { margin-bottom: var(--cc-space-2); }

/* Chapeau de section, sous l'en-tête : l'en-tête resserre alors sa marge, le
   chapeau reprenant l'espacement jusqu'au contenu. */
.cc-section__header--tight { margin-bottom: var(--cc-space-4); }
.cc-section__intro {
	max-width: 62ch;
	color: var(--cc-color-muted);
	margin-bottom: var(--cc-space-12);
}

.cc-section--featured .cc-section__header {
	justify-content: space-between;
}

/* Le surtitre et le titre du bloc restent facultatifs côté CMS. Sans eux
   l'en-tête n'a que son lien, que `space-between` collerait à gauche : on le
   renvoie à droite, là où on l'attend. */
.cc-section__header > .cc-section__link:only-child { margin-inline-start: auto; }

/* Dans une colonne, il n'y a plus la largeur pour écarter le titre et le lien :
   ils se superposent au lieu de se répondre. On les empile. */
.cc-columns__item .cc-section__header {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.cc-columns__item .cc-section__header > .cc-section__link:only-child {
	margin-inline-start: 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; }

/* -------------------------------------------------------------------------
   Maillage croisé (expérience × région)

   Dix liens en pastilles blanches de largeurs inégales se lisaient comme une
   nuée : on cherchait sa région au lieu de la voir. Une grille de boutons
   bleus de même largeur, assez grands pour être visés au pouce, et le nombre
   de chalets en pastille claire à droite.
   ---------------------------------------------------------------------- */
.cc-crosslinks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--cc-space-3);
	margin: var(--cc-space-6) 0 0;
	padding: 0;
	list-style: none;
}

.cc-crosslink {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-3);
	height: 100%;
	padding: var(--cc-space-4) var(--cc-space-5);
	border-radius: var(--cc-radius-lg);
	background: var(--cc-blue);
	box-shadow: var(--cc-shadow);
	color: #fff;
	font-size: var(--cc-text-base);
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	transition: transform .15s var(--cc-ease-out), background-color .15s ease;
}
.cc-crosslink:hover,
.cc-crosslink:focus-visible {
	background: var(--cc-navy);
	color: #fff;
	transform: translateY(-2px);
}

/* Le compte se lit comme une pastille et non comme la suite du nom : une
   région suivie d'un nombre nu se lisait « Mauricie 9 ». */
.cc-crosslink__count {
	flex: 0 0 auto;
	min-width: 28px;
	padding: 2px var(--cc-space-2);
	border-radius: var(--cc-radius-pill);
	background: rgba(255, 255, 255, .22);
	font-size: var(--cc-text-sm);
	font-weight: 600;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.cc-crosslink { transition: background-color .15s ease; }
	.cc-crosslink:hover { transform: none; }
}

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

/*
 * Le bandeau reste à l'écran : une annonce qui disparaît au premier geste de
 * défilement n'a servi à rien. Il se colle au-dessus de l'en-tête, qui se
 * colle à son tour sous lui — d'où la hauteur mesurée en JavaScript et posée
 * en variable : elle dépend du texte, qui passe à la ligne sur un téléphone.
 */
.cc-announce {
	position: sticky;
	top: 0;
	z-index: 55;   /* au-dessus de l'en-tête (50), sous les modales */
	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; }

/* Sur écran large, le titre tient au moins trois dixièmes de la barre : plus
   étroit, un titre coupé par un <br> se serrait en colonne contre le message
   au lieu de lui faire face. */
@media (min-width: 600px) {
	.cc-announce__title { flex: 0 1 auto; min-width: 30%; }
}
.cc-announce__message {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	flex: 1 1 260px;
	min-width: 0;
}
.cc-announce__text { margin: 0; }
.cc-announce__text strong { color: var(--cc-blue-light); font-weight: 500; }
/* Le bouton en orange : sur ce bleu nuit, un bouton fantôme blanc se lisait
   comme du texte et se cliquait peu. */
.cc-announce .cc-btn {
	background: var(--cc-orange);
	border-color: var(--cc-orange);
	color: var(--cc-navy);
	font-weight: 600;
}
.cc-announce .cc-btn:hover {
	background: var(--cc-orange-fonce);
	border-color: var(--cc-orange-fonce);
	color: var(--cc-navy);
}
/*
 * Sur téléphone, un bandeau collé qui prend le tiers de l'écran ne laisse
 * plus rien voir du site. Mesuré : 196 points de bandeau plus 89 d'en-tête
 * sur un écran de 874. Le titre s'efface — le message le redit —, le texte
 * tient sur deux lignes, et le bouton garde sa place.
 */
@media (max-width: 599px) {
	.cc-announce__inner {
		gap: var(--cc-space-2);
		padding-block: var(--cc-space-3);
	}
	.cc-announce__reglement { font-size: 11px; }
	/* Le titre reste : c'est lui qui nomme l'offre. Sur une ligne et au corps
	   du texte courant, il coûte une vingtaine de points. */
	.cc-announce__title {
		display: block;
		flex: 1 1 100%;
		font-size: var(--cc-text-base);
		line-height: 1.25;
	}
	.cc-announce__message { flex: 1 1 100%; }
	.cc-announce__text {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: var(--cc-text-xs);
	}
	.cc-announce .cc-btn {
		padding-block: var(--cc-space-2);
		font-size: var(--cc-text-xs);
	}
}

/* Le règlement : un lien, pas un second bouton — il ne doit pas rivaliser
   avec l'appel à participer. */
.cc-announce__reglement {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, .8);
	font-size: var(--cc-text-xs);
	text-decoration: underline;
}
.cc-announce__reglement:hover { 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
   ====================================================================== */

/* Une ancre visée par un lien s'arrête sous la barre collante, sinon son titre
   se range derrière. */
html { scroll-padding-top: calc(var(--cc-header-height) + var(--cc-space-4)); }

/*
 * L'en-tête suit le défilement.
 *
 * C'est bien `.cc-header` qui colle, et non la seule barre : un élément collant
 * ne se déplace que dans son parent, et `.cc-header__bar` a pour parent un
 * en-tête exactement aussi haut qu'elle. Mesuré, la barre s'en allait avec la
 * page — aucune course à parcourir.
 *
 * Le panneau du menu mobile vit dans le même bloc et dépasse la fenêtre, mais
 * le script bloque le défilement du corps tant qu'il est ouvert : il ne peut
 * donc pas s'échapper.
 *
 * z-index 50 : au-dessus du contenu et du bandeau de réservation (40), sous
 * les calendriers déroulants (60) et le lien d'évitement (999).
 */
.cc-header {
	position: sticky;
	/* Sous le bandeau d'annonce quand il y en a un : sinon l'en-tête collé
	   lui passerait par-dessus et le mangerait. */
	top: var(--cc-annonce-hauteur, 0px);
	z-index: 50;
	background: var(--cc-color-bg);
}

.cc-header__bar {
	background: var(--cc-color-bg);
	border-bottom: 1px solid transparent;
	transition: border-color .2s var(--cc-ease-out), box-shadow .2s var(--cc-ease-out);
}

/* Décollée du haut de page, la barre se détache du contenu qui passe dessous. */
.cc-header__bar.is-collee {
	border-bottom-color: var(--cc-color-border);
	box-shadow: 0 6px 20px -12px rgba(18, 38, 63, .35);
}

.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);
	transition: color .15s ease;
}
/* Plus de bordure : le soulignement animé, plus bas, tient ce rôle — au
   survol comme sur la page courante. */
.cc-nav__list a:hover,
.cc-nav__list .current-menu-item > a { 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. */
/* Raccourci « Filtres », visible seulement une fois le panneau dépassé. */
.cc-header__filtres { gap: var(--cc-space-2); }
.cc-header__filtres[hidden] { display: none; }

/*
 * Le compte se réduit à son pictogramme pour lui faire place.
 *
 * Les deux boutons ne tiennent pas côte à côte en entier : mesurée, la barre
 * débordait sous 1240 px. Plutôt que d'escamoter le compte, on lui retire son
 * libellé — il reste atteignable, et le nom du client demeure lisible pour un
 * lecteur d'écran.
 */
.cc-header.a-filtres .cc-header__bar .cc-btn--compte .cc-btn__nom {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.cc-header.a-filtres .cc-header__bar .cc-btn--compte {
	/* Carré autour du seul pictogramme, sans le remplissage prévu pour du
	   texte. */
	padding-inline: var(--cc-space-3);
}

.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__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;
	/* 28 px de haut mesurés : sous le seuil d'une cible cliquable. */
	min-height: 32px;
	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;
	/* Sans cette base, le bouton absorbait la compression de la barre et
	   tombait à 36 px, sous la cible tactile recommandée. */
	flex: 0 0 auto;
	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); }

/**
 * Panneau du menu.
 *
 * Il porte aussi ce que la barre ne peut plus contenir sur téléphone : le
 * compte, le téléphone et la langue. C'est le même balisage des deux côtés,
 * rendu par template-parts/layout/header-actions.php.
 */
.cc-mobile-nav {
	border-top: 1px solid var(--cc-color-border);
	padding-block: var(--cc-space-4) var(--cc-space-8);
	background: var(--cc-color-bg);
	box-shadow: 0 18px 32px -18px rgba(18, 38, 63, .35);
}
.cc-mobile-nav[hidden] { display: none; }

/* L'ouverture s'anime, la fermeture non : une animation démarre bien quand
   l'élément quitte `display: none`, mais rien ne peut retarder son retour. */
.cc-mobile-nav:not([hidden]) { animation: cc-menu-ouvre .26s var(--cc-ease-out) both; }

@keyframes cc-menu-ouvre {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}

.cc-mobile-nav__list { display: flex; flex-direction: column; }

.cc-mobile-nav__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-4);
	/* 52 px de haut : une cible confortable au pouce, loin des 24 px des
	   liens de contenu. */
	min-height: 52px;
	padding: var(--cc-space-3) var(--cc-space-2);
	border-radius: var(--cc-radius);
	font-size: var(--cc-text-lg);
	font-weight: 500;
	text-decoration: none;
	color: var(--cc-navy);
}

/* Un chevron plutôt qu'un filet sous chaque ligne : il dit où mène le lien
   au lieu de découper la liste. */
.cc-mobile-nav__list > li > a::after {
	content: "";
	flex: 0 0 auto;
	width: 7px; height: 7px;
	border-top: 2px solid var(--cc-color-border);
	border-right: 2px solid var(--cc-color-border);
	transform: rotate(45deg);
	transition: border-color .15s ease, transform .15s ease;
}

.cc-mobile-nav__list a:active { background: var(--cc-color-surface); }
.cc-mobile-nav__list a:focus-visible {
	outline: 2px solid var(--cc-blue);
	outline-offset: -2px;
}

.cc-mobile-nav__list .current-menu-item > a { color: var(--cc-blue); }
.cc-mobile-nav__list .current-menu-item > a::after {
	border-color: var(--cc-blue);
	transform: rotate(45deg) translate(2px, -2px);
}

/* Sous-niveaux : décalés et discrets, pour rester lisibles sans concurrencer
   les entrées principales. */
.cc-mobile-nav__list .sub-menu {
	display: flex;
	flex-direction: column;
	margin: 0 0 var(--cc-space-2) var(--cc-space-4);
	padding: 0;
	list-style: none;
	border-left: 2px solid var(--cc-color-border);
}
.cc-mobile-nav__list .sub-menu a {
	min-height: 44px;
	padding-left: var(--cc-space-4);
	font-size: var(--cc-text-base);
	font-weight: 400;
	color: var(--cc-color-muted);
}

.cc-mobile-nav__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-4);
	margin-top: var(--cc-space-6);
	padding-top: var(--cc-space-6);
	border-top: 1px solid var(--cc-color-border);
}
.cc-mobile-nav__actions .cc-btn { flex: 1 1 100%; justify-content: center; }

.cc-mobile-nav__list--secondary {
	margin-top: var(--cc-space-4);
	padding-top: var(--cc-space-4);
	border-top: 1px solid var(--cc-color-border);
}
.cc-mobile-nav__list--secondary a {
	min-height: 40px;
	font-size: var(--cc-text-sm);
	font-weight: 400;
	color: var(--cc-color-muted);
}
.cc-mobile-nav__list--secondary > li > a::after { content: none; }

/*
 * Le compte et la langue quittent la barre sous 1000 px : mesurés à 121 px et
 * 89 px, ils la faisaient déborder de 130 px sur un écran de 360 px, et toute
 * page du site défilait latéralement. Ils réapparaissent dans le panneau.
 */
@media (max-width: 1039px) {
	/*
	 * Les actions passent dans le menu, faute de place. Le raccourci vers les
	 * filtres reste : il est encore plus utile sur petit écran, où le panneau
	 * est loin, et il n'a plus la place d'afficher son libellé.
	 */
	.cc-header__actions > .cc-btn:not(.cc-header__filtres),
	.cc-header__actions > .cc-lang { display: none; }

	.cc-header__filtres { padding-inline: var(--cc-space-3); }
	.cc-header__filtres .cc-header__filtres-texte {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/*
 * La barre complète attend 1040 px. Le seuil n'est pas au pixel près : la
 * media query compte la barre de défilement dans la largeur alors que la mise
 * en page ne l'a pas, si bien qu'un basculement à 1000 px laissait 985 px pour
 * un contenu qui en réclame 1001 — la barre débordait de 16 px sur toute une
 * tranche de largeurs.
 */
@media (min-width: 1040px) {
	.cc-nav--primary { display: 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 la bannière de cinquante-six
	   points : la marge ne lui réserve que cela, le rembourrage de la
	   section suivante faisant le reste. Elle valait quatre-vingt-seize, et
	   la page entière paraissait flotter. */
	margin-bottom: var(--cc-filters-overlap);
	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;
	/* Réglable depuis le CMS : le blanc reste la valeur par défaut, mais une
	   photo claire y noie le titre. */
	color: var(--cc-hero-text, #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: 24ch;
	/* L'ombre porte le titre sur une photo chargée. Elle s'efface dès qu'on
	   choisit une autre couleur : un halo noir sous un texte foncé le salirait
	   au lieu de le détacher. */
	text-shadow: var(--cc-hero-ombre, 0 2px 16px rgba(0, 0, 0, .25));
}
.cc-hero[style*="--cc-hero-text"] { --cc-hero-ombre: none; }

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

/* La pastille se glisse entre le chapô et le panneau de recherche : le chapô
   rend alors la moitié de sa marge, sans quoi le bloc du haut descendrait
   d'autant. */
.cc-hero__subtitle:has(+ .cc-note-google) { margin-bottom: var(--cc-space-6); }

/* -------------------------------------------------------------------------
   Note Google

   Blanc plein sur la photo plutôt que translucide : la note est un gage, et
   un gage se lit du premier coup, quelle que soit l'image derrière.
   ---------------------------------------------------------------------- */
.cc-note-google {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-2);
	margin: 0 auto var(--cc-space-10);
	padding: var(--cc-space-2) var(--cc-space-4);
	border-radius: var(--cc-radius-pill);
	background: #fff;
	box-shadow: var(--cc-shadow-lg);
	color: var(--cc-navy);
	font-size: var(--cc-text-sm);
	line-height: 1;
	text-decoration: none;
}
a.cc-note-google:hover { transform: translateY(-1px); }
a.cc-note-google { transition: transform .2s var(--cc-ease-out); }

.cc-note-google__valeur { font-size: var(--cc-text-lg); font-weight: 700; }

/* Les étoiles sont deux rangées superposées : la grise dit le total, la dorée
   est coupée au pourcentage de la note. Une demi-étoile se dessine ainsi sans
   second jeu d'icônes. */
.cc-note-google__etoiles {
	position: relative;
	display: inline-block;
	color: rgba(18, 38, 63, .22);
	letter-spacing: .08em;
	white-space: nowrap;
}
.cc-note-google__etoiles::before { content: "★★★★★"; }
.cc-note-google__pleines {
	position: absolute;
	inset: 0;
	overflow: hidden;
	color: #f5a623;
	white-space: nowrap;
}
.cc-note-google__pleines::before { content: "★★★★★"; }

.cc-note-google__texte { color: var(--cc-color-muted); }

@media (max-width: 599px) {
	/* Le compte d'avis saute en premier : la note et les étoiles disent
	   l'essentiel, et la pastille doit tenir sur une ligne. */
	.cc-note-google__texte { display: none; }
}

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

/* Icône posée à gauche de la valeur (et non du label) : ligne icône + champ. */
.cc-search__control {
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
	min-width: 0;
}
.cc-search__icon {
	flex: 0 0 auto;
	color: var(--cc-color-muted);
}
.cc-search__control select,
.cc-search__control input { flex: 1 1 auto; }

.cc-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-space-2);
	white-space: nowrap;
}
.cc-search__submit-icon { flex: 0 0 auto; }

/* --- Listes déroulantes et déclencheurs de dates ---------------------------

   Le `select` natif et les `input date` restent dans le formulaire : ce sont
   eux qui portent la valeur soumise, et le seul moyen de saisir si le script
   ne s'exécute pas. Une fois repris en main, on les sort du flux sans les
   retirer de l'arbre d'accessibilité de la page. */

.cc-select__native,
.cc-search input.cc-select__native,
.cc-search select.cc-select__native {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.cc-select { position: relative; flex: 1 1 auto; min-width: 0; }

.cc-select__button,
.cc-search__trigger {
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
	flex: 1 1 auto;
	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-muted);
	text-align: left;
	cursor: pointer;
}
.cc-select.is-set .cc-select__button,
.cc-search__trigger.is-set { color: var(--cc-color-text); }

/* --- Panneau « Voyageurs » ------------------------------------------------
 *
 * Il se pose sous son champ, pas sous la barre entière : le visiteur voit
 * d'où il sort. La colonne, elle, doit devenir un repère de positionnement.
 */
.cc-search__field[data-cc-guests] { position: relative; }

.cc-guestpop {
	position: absolute;
	z-index: 30;
	top: calc(100% + var(--cc-space-4));
	left: 0;
	/* Assez large pour que « Chalets acceptant les animaux seulement » tienne
	   sur une ligne, sans dépasser la fenêtre sur un téléphone. */
	width: max(280px, 100%);
	max-width: calc(100vw - var(--cc-space-8));
	padding: var(--cc-space-5);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-lg);
	background: #fff;
	box-shadow: var(--cc-shadow-lg);
}
.cc-guestpop[hidden] { display: none; }

/* Sans script, le panneau n'a pas de déclencheur : il resterait affiché sous
   la barre, par-dessus le contenu. La liste déroulante suffit alors. */
.cc-guestpop:not([hidden]) { display: block; }

.cc-guestpop__ligne {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-4);
	padding: var(--cc-space-3) 0;
}
.cc-guestpop__ligne + .cc-guestpop__ligne { border-top: 1px solid var(--cc-color-border); }

.cc-guestpop__nom {
	display: flex;
	flex-direction: column;
	font-size: var(--cc-text-sm);
	color: var(--cc-color-text);
}
.cc-guestpop__nom small {
	font-size: var(--cc-text-xs);
	color: var(--cc-color-muted);
}

.cc-guestpop__nombre {
	min-width: 2ch;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.cc-guestpop__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-4);
	margin-top: var(--cc-space-4);
	padding-top: var(--cc-space-4);
	border-top: 1px solid var(--cc-color-border);
}

.cc-select__value,
.cc-search__value {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cc-select__chevron {
	flex: 0 0 auto;
	color: var(--cc-color-muted);
	transition: transform .15s ease;
}
.cc-select.is-open .cc-select__chevron { transform: rotate(180deg); }

.cc-select__button:focus-visible,
.cc-search__trigger:focus-visible {
	outline: 2px solid var(--cc-blue);
	outline-offset: 4px;
	border-radius: var(--cc-radius);
}

.cc-select__pop.is-flipped { left: auto; right: 0; }

.cc-select__pop {
	position: absolute;
	z-index: 30;
	top: calc(100% + var(--cc-space-3));
	left: 0;
	min-width: 240px;
	max-width: 320px;
	/* Basculé à droite par le script quand la liste dépasserait l'écran. */
	padding: var(--cc-space-2);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-lg);
	background: #fff;
	box-shadow: var(--cc-shadow-lg);
}

.cc-select__search {
	width: 100%;
	padding: var(--cc-space-2) var(--cc-space-3);
	margin-bottom: var(--cc-space-2);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	font: inherit;
	font-size: var(--cc-text-sm);
}
.cc-select__search:focus-visible { outline: 2px solid var(--cc-blue); outline-offset: -1px; }

.cc-select__list {
	max-height: 280px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.cc-select__option {
	display: flex;
	align-items: center;
	gap: var(--cc-space-3);
	padding: var(--cc-space-2) var(--cc-space-3);
	border-radius: var(--cc-radius);
	font-size: var(--cc-text-sm);
	cursor: pointer;
}
.cc-select__option:hover { background: var(--cc-color-surface); }
.cc-select__option:focus-visible { outline: 2px solid var(--cc-blue); outline-offset: -2px; }
.cc-select__option.is-selected { background: #e8f1fd; color: var(--cc-navy); font-weight: 600; }

/* Une entrée qui ne donnerait aucun résultat, grisée comme les pastilles
   d'équipement. Elle reste choisissable : l'interdire enfermerait celui qui
   s'y est rendu par l'URL. */
.cc-select__option.is-empty { opacity: .45; }

/* Liste à cocher — le champ « Région » en accepte plusieurs. La case est
   dessinée en CSS plutôt qu'en `input` : l'entrée entière est déjà le bouton,
   une vraie case ajouterait une seconde cible pour la même action. */
.cc-select__option--check::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 1px solid var(--cc-color-border);
	border-radius: 5px;
	background: #fff no-repeat center / 11px 11px;
}
.cc-select__option--check.is-checked::before {
	border-color: var(--cc-blue);
	background-color: var(--cc-blue);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 5 5L20 7'/%3E%3C/svg%3E");
}
.cc-select__option--check.is-checked { color: var(--cc-navy); font-weight: 600; }

.cc-select__empty {
	margin: 0;
	padding: var(--cc-space-3);
	color: var(--cc-color-muted);
	font-size: var(--cc-text-sm);
}

/* Remise à zéro d'un champ à choix multiple. Posée sous la liste, elle ne
   s'affiche que lorsqu'il y a quelque chose à défaire. */
.cc-select__clear {
	display: block;
	width: 100%;
	margin-top: var(--cc-space-2);
	padding: var(--cc-space-2) var(--cc-space-3);
	border: 0;
	border-top: 1px solid var(--cc-color-border);
	background: transparent;
	font: inherit;
	font-size: var(--cc-text-sm);
	color: var(--cc-color-muted);
	text-align: left;
	cursor: pointer;
}
.cc-select__clear:hover { color: var(--cc-color-text); }
.cc-select__clear[hidden] { display: none; }

/* --- Calendrier de la barre de filtres --- */

.cc-datepop {
	position: absolute;
	z-index: 30;
	top: calc(100% + var(--cc-space-3));
	left: 50%;
	transform: translateX(-50%);
	/* Largeur calée sur la barre, non sur la fenêtre : 100vw ignore les marges
	   du panneau et faisait déborder le calendrier à droite sur mobile. */
	width: min(640px, 100%);
	max-width: calc(100vw - var(--cc-space-8));
	padding: var(--cc-space-6);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-lg);
	background: #fff;
	box-shadow: var(--cc-shadow-lg);
}
.cc-datepop .cc-calendar { padding: 0; background: transparent; }

/* Les flèches se calent sur la ligne du premier mois : posées au-dessus, elles
   ouvraient une bande vide en haut du panneau. */
.cc-datepop .cc-calendar__nav {
	position: absolute;
	top: var(--cc-space-6);
	right: var(--cc-space-6);
	margin: 0;
}

/* La légende s'intercale entre les mois et les actions. L'écart de la fiche
   est trop large pour un panneau d'un seul mois : cinq entrées y passaient à
   trois lignes. */
.cc-datepop .cc-calendar__key {
	gap: var(--cc-space-2) var(--cc-space-4);
	margin-top: var(--cc-space-4);
}

.cc-datepop__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-4);
	margin-top: var(--cc-space-4);
	padding-top: var(--cc-space-4);
	border-top: 1px solid var(--cc-color-border);
}
.cc-datepop__clear {
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--cc-text-sm);
	color: var(--cc-color-muted);
	text-decoration: underline;
	cursor: pointer;
}
.cc-datepop__clear:hover { color: var(--cc-color-text); }

/* 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);
	}
	/* Plus de filet entre les champs : le fond du champ actif suffit à les
	   séparer, et les traits doublaient ce repère. Le décalage reste, lui :
	   c'est lui qui tient les colonnes à distance. */
	.cc-search__field + .cc-search__field {
		padding-left: var(--cc-space-4);
	}
}

/*
 * La barre chevauche le bas du hero.
 *
 * La marge est portée par le conteneur de la barre et non par la barre :
 * posée sur elle, elle remontait aussi ce qui la suit à l'intérieur du
 * conteneur — la ligne de recherche par nom s'en trouvait dessinée par-dessus
 * la barre, vingt-cinq pixels trop haut.
 *
 * Elle remonte le bas du panneau sous la barre, pour que l'onglet « Plus de
 * filtres » lui reste collé. Mais le panneau doit contenir ce qu'il montre :
 * la ligne de recherche ouverte en dépassait de quarante pixels, et l'onglet
 * se dessinait par-dessus elle. La marge ne vaut donc que ligne fermée ;
 * ouverte, le panneau reprend sa vraie hauteur et l'onglet descend sous elle.
 *
 * Le volet est exclu : détaché de la bannière, il n'a rien à chevaucher.
 */
.cc-hero .cc-filters-panel:not(.cc-filters-panel--volet) .cc-filters-panel__bar {
	margin-bottom: calc(var(--cc-space-16) * -1);
}
.cc-hero .cc-filters-panel:not(.cc-filters-panel--volet)
	.cc-filters-panel__bar:has(.cc-search__ligne:not([hidden])) {
	margin-bottom: 0;
}

/* =========================================================================
   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); list-style: none; padding: 0; }
.cc-card__specs li { display: inline-flex; align-items: center; gap: var(--cc-space-2); }
.cc-card__spec-icon { flex: 0 0 auto; color: var(--cc-navy); }

.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;
	/* La description a sa propre colonne : sur un écran étroit, elle passe
	   sous la pastille et le titre plutôt que de les écraser. */
	flex-wrap: wrap;
	gap: var(--cc-space-5, 1.25rem);
	padding: var(--cc-space-4);
	border-radius: var(--cc-radius-xl);
	/* Le navy plein écrasait la section — trois cartes empilées faisaient un
	   bloc noir au milieu d'une page claire. Le navy adouci garde la marque et
	   le texte blanc reste franchement lisible. */
	background: var(--cc-navy-soft);
	color: #fff;
}

/* Version détaillée (page Promotions) : le contenu est haut, la pastille se
   cale donc en haut plutôt qu'au centre pour rester alignée sur le titre. */
.cc-promo--detailed { align-items: flex-start; padding: var(--cc-space-6); }

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

/* Voile sombre sur la photo : il portait le pourcentage blanc, il ne sert
   plus qu'au pictogramme du CMS. Sans pictogramme, la photo reste nette —
   assombrir une image pour n'y rien poser n'avait plus de sens. */
.cc-promo__figure:has(.cc-promo__figure-stack)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(18, 38, 63, .35);
}

.cc-promo__body { flex: 1 1 15rem; 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.3; }
.cc-promo__mention { margin: 0; font-size: var(--cc-text-sm); color: rgba(255, 255, 255, .72); }

/* Le blanc translucide ci-dessus vise la carte promo, posée sur fond sombre.
   Dans le hero de la page promotion, le fond est clair : la mention y serait
   illisible. */
.cc-region-hero .cc-promo__mention {
	margin: 0;
	font-size: var(--cc-text-sm);
	color: rgb(0 0 0);
}
/* Description de l'offre, à droite du titre. Bornée à quatre lignes :
   certaines promotions portent tout leur règlement, et la carte la plus
   bavarde imposerait sa hauteur aux deux autres. La suite se lit sur la page
   de l'offre. */
.cc-promo__text {
	flex: 1 1 17rem;
	font-size: var(--cc-text-sm);
	color: rgba(255, 255, 255, .8);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}
.cc-promo__text p { margin: 0; }

/* Le filet ne sépare que deux colonnes côte à côte : une fois le texte passé
   à la ligne, il pendrait au-dessus de rien. */
@media (min-width: 760px) {
	.cc-promo__text {
		padding-left: var(--cc-space-5);
		border-left: 1px solid rgba(255, 255, 255, .18);
	}
}
.cc-promo__text strong { color: #fff; }
.cc-promo__count { margin: 0; font-size: var(--cc-text-xs); color: rgba(255, 255, 255, .6); }
.cc-promo .cc-btn--primary { margin-top: var(--cc-space-1); 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;
	margin-block: 1px;
	/* Place en bas pour le panneau de filtres qui chevauche le pavé. */
	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;
	/* Pastille resserree : 4px / 20px. Seul le premier tombe sur un pas de
	   l'echelle, le second est ecrit en rem comme le reste de la feuille. */
	padding: var(--cc-space-1) 1.25rem;
	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);
}

/* Sur un téléphone, la pastille occupe presque toute la largeur : un rayon de
   pilule lui donne des bouts démesurément ronds. */
@media (max-width: 599px) {
	.cc-region-hero__badge { border-radius: var(--cc-radius); }
}
.cc-region-hero__title {
	font-size: var(--cc-text-2xl);
	font-weight: 700;
	line-height: 1.15;
	color: var(--cc-navy);
	max-width: 20ch;
	margin: 0 0 var(--cc-space-4);
}
.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;
		/* Image un peu plus large que la colonne de texte, comme la maquette. */
		grid-template-columns: 1fr 1.15fr;
		gap: var(--cc-space-12);
		/* L'image occupe toute la hauteur du pavé, pas seulement celle du texte. */
		align-items: stretch;
	}
	/* La colonne texte se recentre verticalement dans la hauteur ainsi imposée. */
	.cc-region-hero__body { align-self: center; }
}

.cc-region-hero__media {
	border-radius: var(--cc-radius-xl);
	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: 0; }

.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%;
	height: 100%;
	/* Hauteur plancher sur mobile, où la colonne image ne s'étire plus. */
	min-height: 320px;
	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; }
	/* Sans cette exception, `align-items: start` ramenait la colonne à la
	   hauteur de sa carte. Le `position: sticky` de l'encart n'avait alors
	   aucune course : il restait en haut, immobile, et sortait de l'écran avec
	   le reste. La colonne reprend la hauteur de la ligne, la carte y glisse. */
	.cc-chalet__aside { align-self: stretch; }
}

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

/* Même taille que le reste des textes de la fiche : la liste était d'un cran
   plus petite, et deux corps se côtoyaient d'une section à l'autre. */
.cc-amenities {
	display: grid;
	gap: var(--cc-space-3);
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

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

/* --- Avis des voyageurs ------------------------------------------------- */

/* Moyenne des avis voyageurs, à côté du titre de la section. */
.cc-avis h2 { display: flex; align-items: baseline; gap: var(--cc-space-3); }
.cc-avis__moyenne {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--cc-text-base);
	font-weight: 600;
	color: var(--cc-color-muted);
}

.cc-avis__list {
	display: grid;
	gap: var(--cc-space-4);
	/* Deux colonnes dès qu'il y a la place : un avis est court, une colonne
	   unique laissait une bande vide sur la moitié droite. */
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Toutes les bulles de la même hauteur : la carte devient une colonne, et la
   signature se pose au fond plutôt que de suivre un texte plus court. */
.cc-avis__item {
	display: flex;
	flex-direction: column;
	padding: var(--cc-space-5);
	border-radius: var(--cc-radius-lg);
	background: var(--cc-color-surface);
}

.cc-avis__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-3);
	margin-bottom: var(--cc-space-2);
}
.cc-avis__author { font-weight: 600; }
.cc-avis__rating {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--cc-text-sm);
	font-weight: 500;
	color: var(--cc-color-muted);
}
/* --- Le texte de l'avis -------------------------------------------------
   Quatre lignes, pas plus, pas moins. Le maximum borne les bavards, dont la
   bulle étirait toute sa rangée ; le minimum relève les laconiques, dont la
   bulle rapetissait au point de casser l'alignement. Entre les deux, toutes
   les bulles se valent. */
.cc-avis__comment {
	margin: 0;
	line-height: 1.6;
	min-height: calc(4 * 1.6em);
}
.cc-avis__comment.cc-repli {
	-webkit-line-clamp: 4;
	line-clamp: 4;
}
/* Déplié, le plancher ne sert plus et la bulle suit son texte. */
.cc-avis__comment.cc-repli.est-ouvert { min-height: 0; }

/* Le bouton suit le texte ; la signature reste au fond de la bulle. */
.cc-avis__item .cc-repli__bouton {
	align-self: flex-start;
	margin-top: var(--cc-space-2);
	line-height: 1.6;
}

/*
 * Sa place est tenue même quand il n'est pas là.
 *
 * Le script n'ajoute « Voir plus » qu'aux avis qui débordent : les bulles
 * sans bouton étaient plus courtes d'une ligne, et la rangée retombait
 * inégale — tout le défaut qu'on vient de corriger, à trente pixels près.
 * Ce vide a exactement la taille du bouton, et s'efface dès qu'il paraît.
 */
.cc-avis__item::after {
	content: "";
	display: block;
	margin-top: var(--cc-space-2);
	height: 1.6em;
	/* Entre le texte et la signature, là où le bouton se tiendrait — et non
	   après la signature, qui se décollerait du bas. */
	order: 1;
}
.cc-avis__meta { order: 2; }
.cc-avis__item:has(.cc-repli__bouton)::after { display: none; }

.cc-avis__meta {
	/* `auto` en haut : la signature tombe au fond de la bulle, quelle que
	   soit la longueur de l'avis au-dessus. */
	margin: auto 0 0;
	padding-top: var(--cc-space-2);
	font-size: var(--cc-text-xs);
	color: var(--cc-color-muted);
}

/* Le permis d'établissement est une mention légale, mais c'est aussi ce que
   le voyageur méfiant vient chercher : en 12 px gris, il passait pour une
   note de bas de page. */
.cc-chalet__citq { font-size: var(--cc-text-base); color: var(--cc-color-text); padding-block: var(--cc-space-4); }
.cc-chalet__citq strong { font-weight: 700; }

.cc-map { isolation: isolate; aspect-ratio: var(--cc-map-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);
}
/* Une marge haute : sans elle, « Dates » et « Voyageurs » collaient au bloc
   précédent et les trois parties de l'encart se lisaient d'un seul tenant. */
.cc-booking__title { margin: var(--cc-space-6) 0 var(--cc-space-3); font-weight: 600; font-size: var(--cc-text-lg); }
.cc-booking__form > .cc-booking__title:first-child { margin-top: 13px; }

/* Bannière de promotion en tête de l'encart. La couleur vient du CMS et se
   pose en attribut ; celle d'ici ne sert que si le champ est vide. */
/* -------------------------------------------------------------------------
   Devis

   Le détail que Guesty renvoie : hébergement, frais, taxes, total. Une liste
   de définitions plutôt qu'un tableau — ce sont des paires, pas une grille à
   deux entrées, et un lecteur d'écran les annonce comme telles.
   ---------------------------------------------------------------------- */
.cc-booking__calcul { margin-top: var(--cc-space-4); }

/* Le bouton de réservation prend ses distances avec « Calculer » : deux
   boutons pleine largeur collés l'un à l'autre se lisent comme une seule
   barre, et on clique sur l'un en croyant viser l'autre. */
.cc-booking__form > .cc-btn--dark { margin-top: var(--cc-space-6); }

.cc-booking__erreur {
	margin: var(--cc-space-3) 0 0;
	padding: var(--cc-space-3) var(--cc-space-4);
	border-radius: var(--cc-radius);
	background: #fdf0ef;
	color: #8a2b22;
	font-size: var(--cc-text-sm);
}
.cc-booking__erreur[hidden] { display: none; }

.cc-booking__devis { margin-top: var(--cc-space-4); }
.cc-booking__devis[hidden] { display: none; }

/* Rappel du séjour, au-dessus du détail : « 10 → 14 juin · 4 nuits · 3
   voyageurs ». Le total seul ne dit pas sur quoi il porte. */
.cc-devis__sejour {
	margin: 0 0 var(--cc-space-3);
	padding-bottom: var(--cc-space-3);
	border-bottom: 1px solid var(--cc-color-border);
	font-size: var(--cc-text-sm);
	font-weight: 600;
	color: var(--cc-navy);
}
.cc-devis__sejour[hidden] { display: none; }

.cc-devis { margin: 0; font-size: var(--cc-text-sm); }

/* Le détail d'une ligne — « 4 × 278,50 $ » — sous son libellé. */
.cc-devis__ligne dt small {
	display: block;
	font-size: var(--cc-text-xs);
	opacity: .75;
}

.cc-devis__ligne {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cc-space-3);
	padding: var(--cc-space-2) 0;
}
.cc-devis__ligne[hidden] { display: none; }
.cc-devis__ligne dt { margin: 0; color: var(--cc-color-muted); }
.cc-devis__ligne dd { margin: 0; font-variant-numeric: tabular-nums; }

/* La somme d'une section se détache de ses lignes. */
.cc-devis__ligne--somme { border-top: 1px solid var(--cc-color-border); }
.cc-devis__ligne--somme dt { color: var(--cc-color-text); }

/* Le total porte le poids : c'est le chiffre qu'on retient. */
.cc-devis__ligne--total {
	margin-top: var(--cc-space-2);
	padding-top: var(--cc-space-3);
	border-top: 2px solid var(--cc-navy);
	font-size: var(--cc-text-base);
	font-weight: 700;
}
.cc-devis__ligne--total dt { color: var(--cc-color-text); }

.cc-devis__titre {
	margin: var(--cc-space-4) 0 0;
	font-size: var(--cc-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cc-color-muted);
}

/* --- Détail des frais et des taxes, replié ------------------------------
   La somme reste lue ; le détail se demande d'un chevron. `<summary>` porte
   le titre : on lui retire la flèche du navigateur, qui doublerait le
   chevron et ne suit pas la typographie du reste. */

.cc-devis__repli > summary {
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
	cursor: pointer;
	list-style: none;
}
.cc-devis__repli > summary::-webkit-details-marker { display: none; }
.cc-devis__repli > summary:hover { color: var(--cc-navy); }
.cc-devis__repli > summary:focus-visible {
	outline: 2px solid var(--cc-blue);
	outline-offset: 3px;
	border-radius: var(--cc-radius);
}

/* La cible du doigt dépasse le texte, qui est petit et en majuscules. */
.cc-devis__chevron {
	flex: 0 0 auto;
	padding: var(--cc-space-2);
	box-sizing: content-box;
	margin: calc(var(--cc-space-2) * -1) 0;
	transition: transform .2s var(--cc-ease-out);
}
.cc-devis__repli[open] > summary .cc-devis__chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
	.cc-devis__chevron { transition: none; }
}

.cc-devis__echeances[hidden] { display: none; }
.cc-devis__echeances ul {
	margin: var(--cc-space-2) 0 0;
	padding-left: var(--cc-space-5);
	font-size: var(--cc-text-sm);
	color: var(--cc-color-muted);
}
.cc-devis__echeances li { margin-bottom: var(--cc-space-1); }

/* -------------------------------------------------------------------------
   Étiquettes de promotion, en tête de l'encart

   Elles étaient des bandeaux pleine largeur : deux offres repoussaient le
   calendrier hors de l'écran. Réduites à leur nom, elles tiennent sur une
   ligne, et la mention se lit au survol.
   ---------------------------------------------------------------------- */
.cc-booking__promos {
	/* Repère de la bulle : elle se pose sous le groupe d'étiquettes, pas sous
	   celle qu'on survole. */
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-2);
	margin: 0 0 var(--cc-space-4);
}

.cc-promo-tag {
	display: inline-block;
	padding: 4px var(--cc-space-3);
	border-radius: var(--cc-radius-pill);
	background: var(--cc-color-promo);
	color: #fff;
	font-size: var(--cc-text-xs);
	font-weight: 600;
	line-height: 1.4;
	cursor: default;
}

/* La mention, au survol et au clavier.
   
   Sous le groupe entier, et non sous l'étiquette survolée : deux offres se
   rangent l'une sous l'autre dès que leurs noms sont longs, et une bulle
   posée au-dessus de la seconde effaçait la première — c'était la bulle
   qu'on voyait, plus l'offre. Elle recouvre maintenant le titre « Dates »
   le temps du survol, ce qui ne cache aucune information. */
.cc-promo-tag[data-mention]::after {
	content: attr(data-mention);
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 3;
	/* Une description tient en quelques lignes : la bulle s'élargit et le
	   corps monte d'un cran — à douze points, les conditions d'une offre se
	   déchiffraient plus qu'elles ne se lisaient. */
	width: max-content;
	max-width: min(340px, 90vw);
	padding: var(--cc-space-3) var(--cc-space-4);
	border-radius: 8px;
	background: var(--cc-navy);
	color: #fff;
	font-size: var(--cc-text-sm);
	font-weight: 400;
	line-height: 1.5;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s var(--cc-ease-out), visibility .15s;
	pointer-events: none;
}
/* Un bec vers le haut : sans lui, la bulle se lit comme une troisième
   étiquette, du même bleu nuit et de la même taille que les offres. */
.cc-promo-tag[data-mention]::before {
	content: '';
	position: absolute;
	/* Le triangle est dessiné dans la bordure basse de la boîte : sa pointe
	   tombe au milieu, sa base en bas. Pour qu'il coiffe la bulle, la boîte
	   remonte donc de sa hauteur entière. */
	top: calc(100% - 4px);
	left: var(--cc-space-4, 16px);
	z-index: 3;
	border: 5px solid transparent;
	border-bottom-color: var(--cc-navy);
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s var(--cc-ease-out), visibility .15s;
	pointer-events: none;
}

.cc-promo-tag[data-mention]:hover::after,
.cc-promo-tag[data-mention]:focus-visible::after,
.cc-promo-tag[data-mention]:hover::before,
.cc-promo-tag[data-mention]:focus-visible::before { opacity: 1; visibility: visible; }
.cc-promo-tag:focus-visible { outline: 2px solid var(--cc-blue); outline-offset: 2px; }


/* Le prix et la mention « animaux » sur une même ligne : deux caractéristiques
   du chalet, lues d'un coup d'œil. */
.cc-booking__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-3);
	margin-bottom: var(--cc-space-5);
	padding-bottom: var(--cc-space-5);
	border-bottom: 1px solid var(--cc-color-border);
}
.cc-booking__price { margin: 0; }
.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); }

/*
 * Mention d'information de l'encart de réservation.
 *
 * Elle a porté deux noms déjà pris. `.cc-chip` redéfinissait la pastille des
 * filtres — fond, taille, et surtout `white-space: nowrap`, qui empêchait les
 * longs libellés de passer à la ligne et faisait déborder la pastille sur le
 * groupe voisin. `.cc-badge` faisait la même chose aux badges des cartes,
 * déclarés plus haut : pastille blanche à ombre portée, elle devenait grise et
 * plate. Invisible tant que Guesty ne renseigne aucun badge — d'où ce troisième
 * nom, qui n'appartient qu'à elle.
 */
.cc-mention {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 5px var(--cc-space-3);
	border-radius: var(--cc-radius-pill);
	background: var(--cc-color-surface);
	font-size: var(--cc-text-xs);
	font-weight: 500;
	color: var(--cc-navy);
	white-space: nowrap;
}
.cc-mention__icon { font-size: 13px; line-height: 1; }

/*
 * Coût estimé. Encadré comme un total, mais posé sur le fond de surface et non
 * en pleine couleur : c'est une estimation, elle ne doit pas se lire comme un
 * montant à payer.
 */
.cc-booking__estimate {
	margin-bottom: var(--cc-space-4);
	padding: var(--cc-space-4);
	border-radius: var(--cc-radius-lg);
	background: var(--cc-color-surface);
}
.cc-booking__estimate[hidden] { display: none; }

.cc-booking__estimate-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cc-space-3);
	margin: 0;
	font-size: var(--cc-text-sm);
	color: var(--cc-color-muted);
}
.cc-booking__estimate-line strong {
	font-size: var(--cc-text-lg);
	color: var(--cc-navy);
	font-variant-numeric: tabular-nums;
}
.cc-booking__estimate-note {
	margin: var(--cc-space-2) 0 0;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--cc-color-muted);
}

/**
 * Dates de l'encart de réservation.
 *
 * Les deux champs forment un seul objet — l'arrivée et le départ se lisent
 * ensemble, pas comme deux réglages indépendants. Le contour est porté par le
 * bloc, pas par chaque champ, et le focus éclaire l'ensemble.
 *
 * Le champ reste un `input[type="date"]` : le calendrier natif du navigateur
 * fonctionne au clavier et sur mobile, et le grand calendrier de la fiche
 * reste la voie principale. On habille, on ne remplace pas.
 */
.cc-booking__dates {
	position: relative;   /* ancre du calendrier déroulant */
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-bottom: var(--cc-space-4);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-lg);
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.cc-booking__dates:focus-within {
	border-color: var(--cc-blue);
	box-shadow: 0 0 0 3px rgba(29, 111, 224, .14);
}

.cc-booking__dates .cc-field {
	position: relative;   /* repère de la zone cliquable, ci-dessous */
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	padding: var(--cc-space-3);
	cursor: pointer;
	transition: background-color .15s ease;
}
.cc-booking__dates .cc-field:hover { background: var(--cc-color-surface); }
.cc-booking__dates .cc-field + .cc-field { border-left: 1px solid var(--cc-color-border); }

/* Les coins sont arrondis cellule par cellule, non par un `overflow: hidden`
   sur le bloc : celui-ci découpait le calendrier déroulant, qui y est ancré. */
.cc-booking__dates .cc-field:first-child {
	border-radius: var(--cc-radius-lg) 0 0 var(--cc-radius-lg);
}
.cc-booking__dates .cc-field:last-child {
	border-radius: 0 var(--cc-radius-lg) var(--cc-radius-lg) 0;
}

.cc-booking__dates .cc-field__label {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--cc-color-muted);
}

/* Deux classes pour l'emporter sur la règle générique des champs, plus bas,
   qui redonnerait à chaque saisie son propre cadre — le contour est ici porté
   par le bloc, pas par les champs. */
.cc-booking__dates .cc-field input[type="date"] {
	width: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font: inherit;
	font-size: var(--cc-text-sm);
	font-weight: 600;
	color: var(--cc-navy);
	cursor: pointer;
}
.cc-booking__dates .cc-field input[type="date"]:focus { outline: none; }

/* Une fois le déclencheur en place, le champ natif est masqué. Il faut le
   redire ici : la règle ci-dessus, plus spécifique, lui rendait sa pleine
   largeur et le champ absolu débordait alors de la page. */
.cc-booking__dates .cc-field input[type="date"].cc-select__native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
}

/* Champ vide : le « jj/mm/aaaa » du navigateur ne doit pas peser autant
   qu'une date choisie. La classe est posée par le script — aucun sélecteur
   CSS ne distingue un champ date vide d'un champ rempli. */
.cc-booking__dates .cc-field.is-empty input[type="date"] {
	font-weight: 400;
	color: var(--cc-color-muted);
}

/* Icône du sélecteur natif : discrète au repos, franche au survol. */
.cc-booking__dates .cc-field input[type="date"]::-webkit-calendar-picker-indicator {
	margin-left: auto;
	padding: 0;
	opacity: .5;
	cursor: pointer;
	transition: opacity .15s ease;
}
.cc-booking__dates .cc-field:hover input[type="date"]::-webkit-calendar-picker-indicator,
.cc-booking__dates .cc-field input[type="date"]:focus::-webkit-calendar-picker-indicator { opacity: 1; }

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


/* Déclencheur qui remplace le champ natif quand le script est là. Il ouvre le
   calendrier du thème, qui connaît les disponibilités — ce que le sélecteur du
   navigateur ignore, et qui lui fait proposer des nuits déjà occupées. */
.cc-booking__trigger {
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
	width: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--cc-text-sm);
	color: var(--cc-color-muted);
	text-align: left;
	cursor: pointer;
}
.cc-booking__trigger[hidden] { display: none; }
.cc-booking__trigger.is-set { color: var(--cc-navy); font-weight: 600; }

.cc-booking__value {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cc-booking__trigger:focus-visible {
	outline: 2px solid var(--cc-blue);
	outline-offset: 3px;
	border-radius: var(--cc-radius);
}

/* La cellule ouverte se signale, comme un champ actif de la barre de recherche. */
.cc-booking__dates.is-picking .cc-field:has(.cc-booking__trigger[aria-expanded="true"]) {
	background: var(--cc-color-surface);
}

/*
 * Le calendrier déroulant sort de l'encart : deux mois ne tiennent pas dans une
 * colonne latérale de 330 px. Il s'aligne donc à droite et déborde vers la
 * gauche, sur le contenu de la fiche — jamais hors de la fenêtre.
 */
.cc-datepop--booking {
	/* Posé sur le corps de page et placé par le script : l'encart défile dès
	   que la fenêtre est courte, et un enfant absolu s'y trouverait rogné. */
	position: fixed;
	left: 0;
	right: auto;
	transform: none;
	width: max-content;
	max-width: calc(100vw - var(--cc-space-8));
	z-index: 60;
}

@media (max-width: 899px) {
	.cc-datepop--booking { width: min(360px, calc(100vw - var(--cc-space-8))); }
}
.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;
}

/* La tranche d'âge sous le nom, comme dans le panneau de la barre de
   recherche : les deux sélecteurs se lisent de la même façon. */
.cc-stepper__label small {
	display: block;
	font-size: var(--cc-text-xs);
	color: var(--cc-color-muted);
}

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

@media (min-width: 1000px) {
	.cc-booking {
		position: sticky;
		/* Sous la barre collante, sans quoi le haut de la carte se rangerait
		   derrière elle. */
		top: calc(var(--cc-header-height) + var(--cc-space-4));
		/* Plus haute que la fenêtre, la carte gardait son bas hors d'atteinte :
		   le bouton « Réserver » restait invisible tant qu'on n'avait pas
		   dépassé toute la colonne de contenu. */
		max-height: calc(100vh - var(--cc-annonce-hauteur, 0px) - var(--cc-header-height) - var(--cc-space-8));
		overflow-y: auto;
		/*
		 * Plus de `scrollbar-gutter: stable` ici. Elle réservait une bande à
		 * droite pour que le calendrier déroulant ne soit pas rogné — il est
		 * depuis posé sur le corps de page, en position fixe, et ne dépend plus
		 * de cette carte. La réserve n'avait donc plus d'objet, et elle
		 * empêchait la bannière de promotion d'atteindre le bord droit :
		 * mesuré, 16 px lui manquaient.
		 */
	}
}

/*
 * Bandeau de rappel, sous 1000 px.
 *
 * L'encart quitte la colonne latérale et se retrouve loin dans la page. Le
 * bandeau garde le prix, les dates et l'action au bord de l'écran, au-dessus
 * de la zone de geste des navigateurs mobiles.
 */
.cc-booking__bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-4);
	padding: var(--cc-space-3) var(--cc-space-4);
	padding-bottom: calc(var(--cc-space-3) + env(safe-area-inset-bottom));
	border-top: 1px solid var(--cc-color-border);
	background: #fff;
	box-shadow: 0 -8px 24px rgba(18, 38, 63, .1);
}
.cc-booking__bar[hidden] { display: none; }

.cc-booking__bar-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}
.cc-booking__bar-price { font-weight: 700; color: var(--cc-navy); }
.cc-booking__bar-dates {
	font-size: var(--cc-text-xs);
	color: var(--cc-color-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cc-booking__bar .cc-btn {
	flex: 0 1 auto;
	min-width: 0;
	padding-inline: var(--cc-space-4);
	white-space: nowrap;
}

/* Deux actions dans une barre de 393 points : l'information cède la place
   avant les boutons, qui sont ce qu'on vient y chercher. */
.cc-booking__bar-info { flex: 1 1 auto; }

@media (max-width: 420px) {
	.cc-booking__bar { gap: var(--cc-space-2); }
	.cc-booking__bar .cc-btn { padding-inline: var(--cc-space-3); font-size: var(--cc-text-sm); }
}

/* Le bandeau est fixe : sans cette réserve, il masquerait la fin de la page. */
@media (max-width: 999px) {
	.cc-chalet__layout { padding-bottom: 84px; }
}

@media (prefers-reduced-motion: no-preference) {
	.cc-booking__bar { animation: cc-bar-monte .3s var(--cc-ease-out) both; }
}
@keyframes cc-bar-monte {
	from { transform: translateY(100%); }
	to   { transform: none; }
}

/* Masquage après la définition, sans quoi la règle serait perdue à égalité de
   spécificité : au-dessus de ce seuil l'encart est collant et reste sous les
   yeux, le rappel ferait double emploi. */
@media (min-width: 1000px) {
	.cc-booking__bar { display: none; }
}

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

/* Le composant FAQ vit désormais avec le bloc page-builder, plus bas dans ce
   fichier. L'ancienne version (pastilles en `display:flex`) n'était utilisée
   par aucun gabarit ni aucun script, et son `.cc-faq__item` s'appliquait aux
   `<details>` du nouveau bloc : la réponse se plaçait à côté de la question
   au lieu d'en dessous. Elle a donc été retirée. */

/* =========================================================================
   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-1); margin-top: var(--cc-space-5); }

/* Une icône de 18 px dans une ancre en ligne : mesurée, la cible tactile
   faisait 18 × 15 px, soit la moitié du minimum utilisable au doigt. Le carré
   de 40 px l'entoure sans déplacer l'icône — le décalage à gauche compense la
   moitié du remplissage ajouté. */
.cc-footer__socials {
	margin-left: -11px;
}
.cc-footer__socials a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--cc-radius-pill);
	transition: background-color .2s var(--cc-ease-out);
}
.cc-footer__socials a:hover { background: rgba(255, 255, 255, .12); }

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

/* Coordonnées de la page contact. */
.cc-icon--phone {
	-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='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.4 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.8 2z'/%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='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.4 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.8 2z'/%3E%3C/svg%3E");
}

.cc-icon--mail {
	-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%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%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%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
}

/* 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: #ebf2f9;
	text-align: center;
	overflow: hidden;
}

.cc-invitation__body { position: relative; z-index: 1; max-width: 34ch; margin-inline: auto; }

/* Icônes décoratives en filigrane, éparpillées entre le texte et les photos.
   Masquées sur petit écran où elles chevaucheraient le contenu. */
.cc-invitation__decor { display: none; }
.cc-invitation__deco { position: absolute; }
.cc-invitation__deco svg { display: block; width: 100%; height: auto; }

@media (min-width: 720px) {
	.cc-invitation__decor {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
	}
	.cc-invitation__deco--family { top: 15%;    left: 25%;  width: 34px; }
	.cc-invitation__deco--waves  { top: 13%;    right: 31%; width: 34px; }
	.cc-invitation__deco--pin    { top: 40%;    right: 27%; width: 30px; }
	.cc-invitation__deco--spa    { top: 46%;    left: 26%;  width: 30px; }
	.cc-invitation__deco--snow   { bottom: 30%; left: 13%;  width: 28px; }
	.cc-invitation__deco--paw    { bottom: 13%; left: 33%;  width: 32px; }
	.cc-invitation__deco--tree   { bottom: 18%; right: 32%; width: 30px; }
}
.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 »)
   ====================================================================== */

/* Carte décorative en filigrane, à gauche derrière le contenu (cf. maquette). */
.cc-section--comfort { position: relative; overflow: hidden; }
.cc-section--comfort::before {
	content: "";
	position: absolute;
	left: -40px;
	top: 50%;
	transform: translateY(-50%);
	width: min(34%, 487px);
	aspect-ratio: 487 / 609;
	background: url("../img/comfort-map.svg") left center / contain no-repeat;
	z-index: 0;
	pointer-events: none;
}
.cc-section--comfort > .cc-container { position: relative; z-index: 1; }

.cc-comfort__header { text-align: left; margin-bottom: var(--cc-space-12); }
/* Pastille au-dessus, puis titre de section : léger espace entre les deux. */
.cc-comfort__heading { margin: var(--cc-space-3) 0 0; font-size: var(--cc-text-2xl); font-weight: 700; color: var(--cc-navy); }

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

/* Au survol du collage, l'éventail s'ouvre : les vignettes latérales s'écartent
   du centre, celle de devant monte d'un cran, et la photo directement survolée
   passe au premier plan.

   Le mouvement passe par `translate` et `scale`, jamais par `transform` : ce
   dernier porte déjà la rotation de chaque vignette et l'animation
   d'apparition au défilement, qui l'emporteraient sur une transition de
   survol. Les propriétés individuelles se composent avec lui au lieu de le
   remplacer — la rotation survit donc au déplacement. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.cc-comfort__photo {
		transition: translate .45s var(--cc-ease-out),
		            scale .45s var(--cc-ease-out),
		            box-shadow .45s var(--cc-ease-out);
	}

	.cc-comfort__media:hover .cc-comfort__photo--a { translate: -18px -8px; }
	.cc-comfort__media:hover .cc-comfort__photo--b { translate: 0 -16px; scale: 1.04; }
	.cc-comfort__media:hover .cc-comfort__photo--c { translate: 18px -8px; }

	.cc-comfort__media .cc-comfort__photo:hover {
		scale: 1.06;
		z-index: 2;
		box-shadow: 0 24px 48px rgba(16, 34, 61, .28);
	}
}

@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;
	/* Colonnes centrees l'une par rapport a l'autre, comme la maquette : un
	   texte court en regard d'une grande photo se calait sinon en haut de
	   colonne, l'image paraissant descendre seule. Sans effet sur mobile, ou
	   chaque colonne occupe sa propre rangee. */
	align-items: center;
}

/* Sur l'accueil, les colonnes se suivent de haut en bas : le centrage y
   decalait les blocs les uns par rapport aux autres au lieu de les aligner. */
.home .cc-columns { align-items: flex-start; }

@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 {
	/*
	 * Pas de `min-height` : combiné à `aspect-ratio`, il fixait la largeur —
	 * 320 px de haut en 16/9 réclament 569 px, que la carte prenait quelle que
	 * soit la place disponible. Elle sortait de son conteneur sur téléphone et
	 * dans la colonne de droite vers 1024 px. La hauteur vient donc du rapport,
	 * plus généreux sur petit écran où 16/9 laisserait une bande trop basse.
	 *
	 * Le rapport suit l'étendue réelle des chalets, que le script mesure et
	 * pose en `--cc-map-ratio` : une région ramassée en rond n'a que faire
	 * d'une boîte deux fois plus large que haute. 16/9 reste le repli, et le
	 * seul rapport sans script.
	 */
	aspect-ratio: var(--cc-map-ratio, 16 / 9);
	border-radius: var(--cc-radius-lg);
	background: var(--cc-color-surface);
	overflow: hidden;
	z-index: 0; /* garde la carte sous le header collant */
}

/* Sur téléphone la largeur manque : on reprend la main sur le rapport calculé,
   qu'une région étirée d'est en ouest réduirait à une bande de cent pixels. */
@media (max-width: 700px) {
	.cc-map { aspect-ratio: 4 / 3; }
}

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

/* Pas de cadre de mise au point à la souris.
   Cliquer une région lui donne le focus, et le navigateur dessine alors un
   rectangle autour du tracé — il restait affiché après le déplacement de la
   carte. `:focus-visible` le garde pour qui navigue au clavier, à qui il est
   indispensable. */
.leaflet-container path:focus:not(:focus-visible),
.leaflet-container a:focus:not(:focus-visible),
.leaflet-marker-icon:focus:not(:focus-visible) { outline: none; }
.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. Taille du
   corps de la fiche, comme les autres sections — c'est la seule liste qui
   descendait d'un cran. */
.cc-amenities {
	display: grid;
	gap: var(--cc-space-4) var(--cc-space-6);
	grid-template-columns: 1fr;
}
@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); }
/* Les pictogrammes du CMS sont des traits fins : à 20 px ils se lisaient
   comme des taches grises à côté de leur libellé. */
.cc-amenity__icon { width: 27px; height: 27px; 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;
}
/* Deux mois par ligne. Le rendu PHP en pose trois : le troisième passe à la
   ligne, ce qui reste lisible pour le repli sans script. Le sélecteur, lui,
   n'en affiche que deux. */
@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; }

/* `time` sans script, `button` avec : même gabarit pour éviter tout saut de
   mise en page à l'initialisation du sélecteur. */
.cc-calendar__grid time,
.cc-calendar__day {
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	margin-inline: auto;
	border-radius: var(--cc-radius-pill);
	border: 0;
	padding: 0;
	font: inherit;
	background: transparent;
	color: inherit;
}

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

/* Nuit occupée dont le matin reste libre : dernier jour possible d'un séjour.
   La case se coupe en deux au lieu de se barrer — barrée, elle aurait l'air
   morte alors qu'elle se clique. */
.cc-calendar__grid .is-checkout-only time,
.cc-calendar__grid .is-checkout-only .cc-calendar__day {
	background: linear-gradient(135deg, #fff 0 50%, var(--cc-color-border) 50%);
	color: var(--cc-navy);
	/* Ni barré ni pâli : la demi-lune dit déjà que la nuit est prise, et un
	   chiffre rayé fait renoncer avant d'avoir lu. */
	text-decoration: none;
	opacity: 1;
}

/* Nuit libre, mais fermée à l'arrivée : on peut la traverser ou en repartir,
   pas y commencer un séjour. Le cerne pointillé la sépare d'une nuit pleinement
   disponible sans la faire passer pour occupée — elle ne l'est pas. */
.cc-calendar__grid .is-no-checkin time,
.cc-calendar__grid .is-no-checkin .cc-calendar__day {
	border: 1.5px dashed var(--cc-color-muted);
	color: var(--cc-color-muted);
}

/* --- Sélection d'un séjour --- */

.cc-calendar__day:not([disabled]) { cursor: pointer; }
.cc-calendar__day:not([disabled]):hover { background: var(--cc-color-border); }
.cc-calendar__day[disabled] { cursor: default; }
.cc-calendar__day:focus-visible {
	outline: 2px solid var(--cc-blue);
	outline-offset: 2px;
}

/* Les bornes prennent le bleu plein, l'intérieur une teinte douce : la plage
   se lit d'un coup d'œil même quand elle court sur deux mois. */
.cc-calendar__grid .is-start time,
.cc-calendar__grid .is-start .cc-calendar__day,
.cc-calendar__grid .is-end time,
.cc-calendar__grid .is-end .cc-calendar__day {
	background: var(--cc-blue);
	color: #fff;
	opacity: 1;
	text-decoration: none;
}
/* Une borne ne vaut qu'une demi-journée : on arrive l'après-midi, on repart
   le matin. La diagonale le dit, avec la même géométrie que la case du départ
   possible plus haut — le haut-gauche est toujours le matin. */
.cc-calendar__grid .is-start time,
.cc-calendar__grid .is-start .cc-calendar__day {
	background: linear-gradient(135deg, var(--cc-blue-light) 0 50%, var(--cc-blue) 50%);
}
.cc-calendar__grid .is-end time,
.cc-calendar__grid .is-end .cc-calendar__day {
	background: linear-gradient(135deg, var(--cc-blue) 0 50%, var(--cc-blue-light) 50%);
}

.cc-calendar__grid .is-preview .cc-calendar__day { background: var(--cc-blue-light); }
.cc-calendar__grid .is-between time,
.cc-calendar__grid .is-between .cc-calendar__day {
	background: #e8f1fd;
	color: var(--cc-navy);
}

/* Bulle d'explication au survol d'une date.
   Portée par la cellule et non par le disque : elle peut ainsi déborder sans
   toucher au gabarit. Réservée aux pointeurs — au doigt, le survol n'existe
   pas et la légende sous la grille dit la même chose. */
@media (hover: hover) {
	.cc-calendar__grid td[data-tip] { position: relative; }
	.cc-calendar__grid td[data-tip]:hover::after {
		content: attr(data-tip);
		position: absolute;
		bottom: calc(100% + 6px);
		left: 50%;
		z-index: 3;
		transform: translateX(-50%);
		width: max-content;
		max-width: 190px;
		padding: 6px 9px;
		border-radius: 8px;
		background: var(--cc-navy);
		box-shadow: var(--cc-shadow-lg);
		color: #fff;
		font-size: var(--cc-text-xs);
		line-height: 1.35;
		text-align: left;
		text-decoration: none;
		opacity: 1;
		pointer-events: none;
	}
	/* Une pointe reste sur la case, elle : la bulle se recale au bord du mois
	   et paraîtrait sinon flotter au-dessus d'une autre date. */
	.cc-calendar__grid td[data-tip]:hover::before {
		content: "";
		position: absolute;
		bottom: calc(100% + 1px);
		left: 50%;
		z-index: 4;
		transform: translateX(-50%);
		border: 5px solid transparent;
		border-top-color: var(--cc-navy);
		pointer-events: none;
	}

	/* Les deux premières colonnes et les deux dernières poussent la bulle
	   vers l'intérieur : centrée, elle sortirait du cadre du mois. */
	.cc-calendar__grid td[data-tip]:nth-child(-n+2):hover::after {
		left: 0;
		transform: none;
	}
	.cc-calendar__grid td[data-tip]:nth-last-child(-n+2):hover::after {
		left: auto;
		right: 0;
		transform: none;
	}
}

/* Le résumé du séjour et le lien qui l'efface partagent une ligne : posé en
   dessous, « Effacer » se serait perdu entre l'intro et la grille. */
.cc-calendar__entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cc-space-4);
	flex-wrap: wrap;
}
.cc-calendar__clear {
	flex: none;
	font-size: var(--cc-text-sm);
	color: var(--cc-color-muted);
	text-decoration: underline;
}
.cc-calendar__clear:hover { color: var(--cc-color-text); }
.cc-calendar__clear[hidden] { display: none; }

.cc-calendar__intro {
	margin: 0 0 var(--cc-space-4);
	color: var(--cc-color-muted);
	font-size: var(--cc-text-sm);
}

.cc-calendar__nav {
	display: flex;
	justify-content: flex-end;
	gap: var(--cc-space-2);
	margin-bottom: var(--cc-space-2);
}
.cc-calendar__arrow {
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-pill);
	background: #fff;
	color: var(--cc-navy);
	font: inherit;
	cursor: pointer;
}
.cc-calendar__arrow:hover:not([disabled]) { border-color: var(--cc-blue); color: var(--cc-blue); }
.cc-calendar__arrow[disabled] { opacity: .35; cursor: default; }
.cc-calendar__arrow:focus-visible { outline: 2px solid var(--cc-blue); outline-offset: 2px; }

/* La pastille du séjour montre la teinte des nuits traversées, pas celle des
   bornes : celles-ci ont désormais leurs deux demi-lunes ci-dessous. */
.cc-calendar__swatch.is-selected { background: #e8f1fd; border-color: var(--cc-blue); }

/* Séjour minimum : mention discrète sous les deux calendriers. */
.cc-calendar__minimum {
	margin-top: var(--cc-space-4);
	font-size: var(--cc-text-sm);
	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); }
.cc-calendar__swatch.is-checkout-only {
	background: linear-gradient(135deg, #fff 0 50%, var(--cc-color-border) 50%);
	border-color: var(--cc-color-border);
}
.cc-calendar__swatch.is-no-checkin {
	background: #fff;
	border-style: dashed;
	border-color: var(--cc-color-muted);
}
.cc-calendar__swatch.is-start {
	background: linear-gradient(135deg, var(--cc-blue-light) 0 50%, var(--cc-blue) 50%);
	border-color: var(--cc-blue);
}
.cc-calendar__swatch.is-end {
	background: linear-gradient(135deg, var(--cc-blue) 0 50%, var(--cc-blue-light) 50%);
	border-color: var(--cc-blue);
}

/* Règlement : les règles posées d'abord, une par ligne avec son pictogramme,
   puis le texte libre du propriétaire. Pas de puce — l'icône en tient lieu. */
.cc-rules {
	margin: 0 0 var(--cc-space-5);
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--cc-space-3);
}
@media (min-width: 700px) {
	.cc-rules { grid-template-columns: repeat(2, 1fr); }
}
.cc-rules li {
	display: flex;
	align-items: baseline;
	gap: var(--cc-space-3);
	margin: 0;
}
.cc-rules__icon {
	flex: none;
	width: 1.4em;
	font-size: 15px;
	line-height: 1;
	text-align: center;
}

/* Le règlement municipal monte à huit mille caractères : replié, il ne noie
   plus les quatre règles qui comptent. */
.cc-rules__plus > summary {
	cursor: pointer;
	color: var(--cc-blue);
}
.cc-rules__plus > summary:hover { text-decoration: underline; }
/* Ni plus petit ni plus pâle que les règles au-dessus : c'est le même
   règlement, seulement plus long. */
.cc-rules__texte { margin-top: var(--cc-space-3); }
.cc-rules__texte p { margin: 0 0 var(--cc-space-3); }

/* --- 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));
}
/*
 * Les activités s'affichent sans illustration. Les visuels venaient de sources
 * tierces, avec des cadrages et une qualité qui variaient d'une fiche à
 * l'autre : six vignettes disparates en bas de page détournaient l'attention
 * du chalet. Le nom situe la région, le lien mène à la source pour le reste.
 *
 * La variante `--plain` est donc devenue la seule forme. Elle garde son nom :
 * le CMS peut recommencer à servir des images, et il suffirait alors de
 * réintroduire la forme illustrée sans toucher à celle-ci.
 */
.cc-activity,
.cc-activity--plain {
	display: flex;
	align-items: center;
	padding: var(--cc-space-4);
	border-radius: var(--cc-radius);
	border-left: 4px solid var(--cc-blue);
	background: #fff;
	box-shadow: var(--cc-shadow);
}
.cc-activity__label {
	font-size: var(--cc-text-sm);
	font-weight: 600;
}
.cc-activity > a { display: contents; }

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

.cc-viewer {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	/* Rail, flèche, scène, flèche. */
	grid-template-columns: auto 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);
}

/* --- Rail de vignettes ---------------------------------------------------

   Les flèches ne disent ni combien de photos il reste, ni ce qu'elles
   montrent. Le rail rend la série entière visible et permet d'atteindre
   n'importe quelle image d'un clic. */

.cc-viewer__rail {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-2);
	align-self: stretch;
	/* Le rail défile seul : la page derrière est déjà bloquée, et une série
	   de trente photos dépasse la hauteur de l'écran. */
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: var(--cc-space-1);
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
.cc-viewer__rail[hidden] { display: none; }
.cc-viewer__rail::-webkit-scrollbar { width: 6px; }
.cc-viewer__rail::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .3);
	border-radius: var(--cc-radius-pill);
}

.cc-viewer__thumb {
	flex: 0 0 auto;
	width: 68px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: var(--cc-radius);
	overflow: hidden;
	background: rgba(255, 255, 255, .08);
	cursor: pointer;
	/* La bordure de l'état actif est posée en `outline` : elle n'entre pas
	   dans le calcul de la boîte, les vignettes ne bougent donc pas d'un
	   pixel au changement de photo. */
	outline: 2px solid transparent;
	outline-offset: -2px;
	opacity: .55;
	transition: opacity .18s var(--cc-ease-out), outline-color .18s var(--cc-ease-out);
}
.cc-viewer__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cc-viewer__thumb:hover { opacity: .85; }
.cc-viewer__thumb.is-active {
	opacity: 1;
	outline-color: #fff;
}
.cc-viewer__thumb:focus-visible {
	outline-color: var(--cc-blue-light);
	outline-offset: 2px;
}

.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" "rail rail" "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: 52vh; }

	/* Faute de place latérale, le rail se couche sous l'image. */
	.cc-viewer__rail {
		grid-area: rail;
		flex-direction: row;
		align-self: center;
		overflow-x: auto;
		overflow-y: hidden;
		padding-right: 0;
		padding-bottom: var(--cc-space-1);
	}
	.cc-viewer__thumb { width: 56px; height: 42px; }
}

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

/* L'onglet « Plus de filtres » est suspendu 30 px sous le panneau : sans marge
   pour le recevoir, il recouvrait le haut des résultats. */
.cc-filters-panel {
	position: relative;
	margin-bottom: 60px;
	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.
 *
 * Et au-dessus de la partie dépliée. L'animation d'entrée laisse un
 * `transform` identité sur chaque champ : identité ou non, il crée un contexte
 * d'empilement qui enferme les panneaux ouverts depuis la barre — voyageurs,
 * régions, expériences. Ils se peignaient donc sous les pastilles
 * d'équipements, qui viennent plus loin dans le document. Lever la barre
 * entière règle les trois d'un coup. */
.cc-search--panel {
	box-shadow: none;
	border: 1px solid var(--cc-color-border);
	z-index: 2;
}

/* 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;
}
/* Le repli du haut : un lien discret, aligné à droite au-dessus des
   équipements. L'onglet du bas, lui, pend sous le panneau. */
.cc-filters-panel__replier {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-2);
	margin: 0 0 var(--cc-space-3) auto;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--cc-text-sm);
	color: var(--cc-blue);
	cursor: pointer;
}
.cc-filters-panel__replier:hover { text-decoration: underline; }
.cc-filters-panel__replier .cc-filters-panel__chevron { transform: rotate(180deg); }

/* Le panneau range ses enfants en colonne pour que `margin-left: auto`
   pousse le bouton à droite sans sortir du flux. */
.cc-filters-panel__more { display: flex; flex-direction: column; }

.cc-filters-panel__chevron { transition: transform .2s ease; }
.cc-filters-panel__toggle[aria-expanded="true"] .cc-filters-panel__chevron { transform: rotate(180deg); }

/* Pas de filet au-dessus de la partie dépliée : l'écart suffit à la séparer
   de la barre, et le trait doublait ce que l'espace disait déjà. */
.cc-filters-panel__more {
	margin-top: var(--cc-space-8);
	padding-top: var(--cc-space-8);
	border-top: 0;
}
.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);
}

/* Le titre du groupe portait le même gris que les compteurs : dans une liste
   de vingt-sept pastilles, rien ne disait où un groupe commençait. */
.cc-filters-group__legend {
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
	width: 100%;
	/* Respiration au-dessus du titre : en colonnes, un groupe suit
	   immédiatement le précédent et les deux se touchaient. */
	padding-top: 26px;
	padding-bottom: var(--cc-space-2);
	margin-bottom: var(--cc-space-4);
	border-bottom: 1px solid var(--cc-color-border);
	color: var(--cc-navy);
}

/* Vider une section sans toucher aux autres. Poussé à droite du titre, discret
   tant qu'on ne le cherche pas. */
.cc-filters-group__reset {
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--cc-text-xs);
	font-weight: 400;
	color: var(--cc-color-muted);
	text-decoration: underline;
}
.cc-filters-group__reset:hover { color: var(--cc-color-text); }
.cc-filters-group__reset[hidden] { display: none; }

/* Combien de choix dans ce groupe : utile quand le panneau est long et que la
   sélection a défilé hors de vue. */
.cc-filters-group__badge {
	display: grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding-inline: 5px;
	border-radius: var(--cc-radius-pill);
	background: var(--cc-blue);
	color: #fff;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}
.cc-filters-group__badge:empty { display: none; }

.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 ».
   Elle avait exactement l'aspect d'une pastille à cocher : deux gestes
   opposés — retirer, activer — pour une même apparence. Elle prend donc la
   teinte de l'état actif, et sa croix passe à droite : on lit l'étiquette,
   puis l'action qui s'y applique. */
.cc-chip--removable {
	background: #e8f1fd;
	border-color: #bcd6f5;
	color: var(--cc-navy);
	text-decoration: none;
}
.cc-chip--removable:hover { border-color: var(--cc-color-promo); }
.cc-chip__remove {
	order: 2;
	display: grid;
	place-items: center;
	width: 16px; height: 16px;
	margin-right: -6px;
	border-radius: var(--cc-radius-pill);
	color: var(--cc-blue);
	font-size: 13px;
	line-height: 1;
}
.cc-chip--removable:hover .cc-chip__remove { background: var(--cc-color-promo); color: #fff; }

/* Colonnes de texte plutôt que grille : les groupes n'ont pas le même nombre
   d'équipements, et une grille cale toutes les cellules d'une rangée sur la
   plus haute. « Vue & ambiance » et ses trois pastilles ouvrait ainsi un vide
   de la hauteur d'« Extérieur » et ses huit. En colonnes, chaque groupe suit
   le précédent. */
/* Une section par rangée, sur toute la largeur du panneau.
   En trois colonnes, chaque section était un entrefilet de deux pastilles
   étroites, et les sections voisines se lisaient comme une seule liste. */
.cc-filters-panel__groups { display: block; }

.cc-filters-group {
	display: block;
	border: 0;
	padding: 0;
	margin: 0 0 var(--cc-space-8);
}

/* Cinq à six bulles par rangée sur un panneau large, deux sur un téléphone.
   `auto-fill` plutôt que `auto-fit` : une section de deux équipements garde
   des bulles de la même largeur que ses voisines au lieu de les étirer sur
   toute la page. */
.cc-filters-group__items {
	display: grid;
	/* Trois par rangée sur un téléphone : à deux, une catégorie de seize
	   équipements faisait huit rangées, et le volet n'en finissait plus. */
	grid-template-columns: repeat(3, 1fr);
	gap: var(--cc-space-2);
}
@media (min-width: 420px) {
	.cc-filters-group__items {
		grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
		gap: var(--cc-space-3);
	}
}
@media (min-width: 700px) {
	.cc-filters-group__items { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* -------------------------------------------------------------------------
   Bulles d'équipement

   Toutes de la même taille, pictogramme au-dessus du libellé. La case à
   cocher reste la mécanique ; seule l'apparence change.
   ---------------------------------------------------------------------- */
.cc-filters-group__items .cc-bulle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--cc-space-2);
	/* Plancher bas : la grille étire déjà toutes les bulles d'une rangée
	   sur la plus haute, la hauteur reste donc uniforme. */
	min-height: 40px;
	padding: var(--cc-space-3);
	border-radius: var(--cc-radius-lg);
	text-align: center;
	line-height: 1.25;
}

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

/* Deux lignes au plus : au-delà, la bulle grandirait et toute la rangée avec
   elle. Les libellés les plus longs sont à raccourcir dans le CMS. */
.cc-bulle__label {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: var(--cc-text-sm);
}

/* La coche quitte le fil du texte pour le coin : au centre d'une bulle, elle
   décalait le libellé d'un cran en s'affichant. */
.cc-filters-group__items .cc-bulle::before {
	position: absolute;
	top: 8px; right: 8px;
	margin: 0;
	transform: rotate(-45deg);
}
.cc-filters-group__items .cc-bulle { position: relative; }

/* 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;
}
/* Coché : fond teinté et coche, plutôt qu'un aplat bleu. Sur vingt-sept
   pastilles, deux aplats pleins écrasaient le reste de la page et entraient en
   concurrence avec le bouton « Appliquer », qui est la seule action primaire.
   Le compteur redevient lisible au passage. */
.cc-chip--check:has(input:checked),
.cc-chip--check.is-active {
	background: #e8f1fd;
	border-color: var(--cc-blue);
	color: var(--cc-navy);
	font-weight: 600;
}
.cc-chip--check:has(input:focus-visible) { outline: 2px solid var(--cc-blue); outline-offset: 2px; }

/* La coche est dessinée en CSS : pas de fichier, et elle suit la couleur du
   texte. Elle réserve sa place à l'état non coché pour que la pastille ne
   change pas de largeur au clic. */
.cc-chip--check::before {
	content: "";
	flex: 0 0 auto;
	width: 10px; height: 6px;
	margin-right: -2px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg) translate(1px, -2px);
	opacity: 0;
	transition: opacity .15s ease;
}
.cc-chip--check:has(input:checked)::before,
.cc-chip--check.is-active::before { opacity: 1; color: var(--cc-blue); }


/* Barre d'actions collante : le panneau ouvert dépasse la hauteur de l'écran,
   et « Appliquer » se retrouvait tout en bas — il fallait redéfiler pour
   valider un choix fait en haut. Elle reste au bord inférieur tant que le
   panneau est à l'écran. */
.cc-filters-panel__actions {
	position: sticky;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-4);
	margin-top: var(--cc-space-6);
	padding-block: var(--cc-space-5);
	border-top: 1px solid var(--cc-color-border);
	background: var(--cc-color-surface);
}

/* Réinitialiser à gauche, appliquer à droite : même répartition que le
   calendrier de la barre (« Effacer » / « Terminé »). */
.cc-filters-panel__actions .cc-btn--primary {
	margin-left: auto;
	margin-top: 20px;
}

.cc-filters-panel__actions .cc-btn__count {
	margin-left: var(--cc-space-2);
	padding-inline: var(--cc-space-2);
	border-radius: var(--cc-radius-pill);
	background: rgba(255, 255, 255, .22);
	font-size: var(--cc-text-xs);
	font-variant-numeric: tabular-nums;
}
.cc-filters-panel__actions .cc-btn__count:empty { display: none; }

/* Dans le hero, la barre repose sur du blanc. */
.cc-hero .cc-filters-panel__actions,
.cc-region-hero > .cc-filters-panel .cc-filters-panel__actions { background: #fff; }

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

/*
 * Ce que le panneau chevauche doit lui laisser de l'air.
 *
 * Mesuré sur l'accueil : soixante-treize points entre le bas du panneau et
 * le titre « Chalets vedettes » — le panneau avait l'air posé dessus.
 */
/* Rembourrage et non marge : celle de la bannière et celle de la section se
   fondent l'une dans l'autre — la plus grande l'emporte, et rien ne bouge.
   Au rembourrage ordinaire des sections : le premier vide de la page donnait
   le ton de tous les autres, et on le trouvait trop grand. */
.cc-hero + .cc-section { padding-top: var(--cc-space-16); }

/*
 * Sur téléphone, le panneau rentre dans le flux.
 *
 * Cinq champs empilés font trois cents points de haut : ancré en absolu au
 * bas de la bannière, il débordait de deux cent deux points sur la section
 * suivante et s'écrivait par-dessus son texte. Dans le flux, la bannière
 * grandit d'autant et plus rien ne se chevauche.
 */
@media (max-width: 599px) {
	/* La bannière empile son texte puis le panneau : en rangée, le panneau
	   devenu élément de flux se rangeait à côté du titre et le recouvrait à
	   moitié. */
	.cc-hero {
		flex-direction: column;
		margin-bottom: var(--cc-space-10);
	}
	.cc-hero > .cc-hero__inner { max-width: 100%; }

	.cc-hero .cc-filters-panel:not(.cc-filters-panel--volet) {
		position: static;
		transform: none;
		/* Une gouttière de chaque côté : à ras bord, la carte blanche touchait
		   les angles arrondis de la bannière. */
		width: auto;
		/* La bannière centre ses éléments : sans cela, le panneau se réduit à
		   la largeur de son contenu. */
		align-self: stretch;
		min-height: 0;
		margin: var(--cc-space-8) var(--cc-space-4) 0;
	}
	/* L'animation d'entrée se termine sur `translateX(-50%)`, qui recentrait
	   le panneau absolu : en mode `both`, elle l'emporte sur `transform:
	   none` et poussait le panneau hors de l'écran. Celle qui ne fait que
	   monter convient ici. */
	.cc-hero > .cc-filters-panel:not(.cc-filters-panel--volet) {
		animation: cc-rise .7s var(--cc-ease-out) .3s both;
	}
	.cc-hero .cc-filters-panel:not(.cc-filters-panel--volet) .cc-filters-panel__bar { margin-bottom: 0; }
	.cc-hero .cc-search--panel { top: 0; }
	/* Dans le flux, la bannière pousse déjà la section : le rembourrage
	   ordinaire suffit. */
	.cc-hero + .cc-section { padding-top: var(--cc-space-16); }
}

/* --- Volet des filtres, ouvert depuis l'en-tête ----------------------------
 *
 * Le raccourci ramenait en haut de la page. Celui qui a descendu trente
 * chalets et veut cocher « spa » ne demande pas à remonter : le panneau vient
 * donc à lui, en volet sous l'en-tête, et la page ne bouge pas d'un pixel.
 *
 * Le sélecteur double la classe pour l'emporter sur `.cc-hero
 * .cc-filters-panel`, qui pose le panneau en absolu dans la bannière.
 */
.cc-filters-panel.cc-filters-panel--volet {
	position: fixed;
	top: calc(var(--cc-annonce-hauteur, 0px) + var(--cc-header-height) + var(--cc-space-3));
	left: 50%;
	transform: translateX(-50%);
	width: min(100% - var(--cc-space-8), var(--cc-container));
	max-height: calc(100vh - var(--cc-annonce-hauteur, 0px) - var(--cc-header-height) - var(--cc-space-8));
	overflow-y: auto;
	margin: 0;
	z-index: 45; /* sous l'en-tête collant (50), au-dessus du contenu */
	background: var(--cc-color-surface);
	box-shadow: var(--cc-shadow-lg);
}

/* Le décalage qui aligne la barre sur le bord de la bannière n'a plus lieu
   d'être une fois le panneau détaché d'elle. */
.cc-filters-panel--volet .cc-search--panel { top: 0; }

/*
 * Le volet se tient en trois bandes : la barre en haut, les équipements qui
 * défilent, les actions en bas.
 *
 * Le panneau défilait d'un bloc, et les pastilles passaient dans le
 * rembourrage laissé sous la barre d'actions — elle semblait flotter au milieu
 * du contenu. Le corps défile donc seul, et les actions touchent le bord.
 */
/* La classe est doublée pour l'emporter sur `.cc-filters-panel.is-open`, qui
   réserve en bas la place de l'onglet — lequel n'existe pas dans le volet. */
.cc-filters-panel.cc-filters-panel--volet {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-bottom: 0;
}

/* Dans le volet, la hauteur est comptée : la marge et le rembourrage du
   panneau ordinaire se cumulaient en soixante-quatre pixels de vide entre la
   barre et les équipements. Le filet ayant disparu, le rembourrage n'a plus
   de rôle. */
.cc-filters-panel--volet .cc-filters-panel__more {
	margin-top: 0;
	padding-top: var(--cc-space-5);
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	overflow-y: auto;
	/* Le défilement va d'un bord à l'autre : la barre d'actions peut alors
	   couvrir toute la largeur quand elle se colle en bas. */
	margin-inline: calc(var(--cc-space-6) * -1);
	padding-inline: var(--cc-space-6);
}

.cc-filters-panel--volet .cc-filters-panel__actions {
	margin-inline: calc(var(--cc-space-6) * -1);
	padding-inline: var(--cc-space-6);
	padding-bottom: var(--cc-space-5);
	/* Une ombre vers le haut dit que du contenu passe dessous. */
	box-shadow: 0 -14px 24px -18px rgba(18, 38, 63, .45);
}

/* L'onglet « Plus de filtres » n'a plus d'objet : le volet s'ouvre déplié. */
.cc-filters-panel--volet .cc-filters-panel__toggle { display: none; }

/* --- Bannière au-dessus des chalets vedettes ---------------------------
   Message réglé dans WordPress ; la couleur vient de l'onglet « Accueil » et
   se pose en attribut, celle d'ici ne sert que si le champ est vide. */

.cc-banniere-vedettes {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-space-3);
	margin: 0 0 var(--cc-space-6);
	padding: var(--cc-space-4) var(--cc-space-6);
	border-radius: var(--cc-radius-lg);
	background: var(--cc-blue);
	color: #fff;
	font-weight: 600;
	font-size: var(--cc-text-base, 16px);
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

/* Cliquable : la flèche avance au survol, comme les autres appels du site. */
.cc-banniere-vedettes--lien { transition: filter .15s ease; }
.cc-banniere-vedettes--lien:hover { filter: brightness(.94); }
.cc-banniere-vedettes__fleche { transition: transform .18s var(--cc-ease-out); }
.cc-banniere-vedettes--lien:hover .cc-banniere-vedettes__fleche { transform: translateX(3px); }
.cc-banniere-vedettes--lien:focus-visible { outline: 2px solid var(--cc-blue); outline-offset: 3px; }

@media (max-width: 599px) {
	.cc-banniere-vedettes {
		padding: var(--cc-space-3) var(--cc-space-4);
		font-size: var(--cc-text-sm);
	}
}

/*
 * Sur téléphone, le panneau de filtres quitte les pages.
 *
 * Il y occupait trois cents points avant le premier chalet, pour redire ce
 * que l'entonnoir de l'en-tête ouvre en un toucher. L'accueil garde le sien :
 * c'est sa porte d'entrée, posée dans la bannière.
 *
 * Le volet, qui est ce même panneau promu, s'exclut de la règle — sans quoi
 * l'entonnoir n'ouvrirait plus rien.
 */
@media (max-width: 599px) {
	.cc-filters-panel:not(.cc-filters-panel--volet) { display: none; }
	.cc-hero .cc-filters-panel:not(.cc-filters-panel--volet) { display: block; }

	/* L'enveloppe bleu pâle de la fiche chalet n'a plus rien à envelopper. */
	.cc-searchbar-panel { display: none; }

	/* La place réservée en bas du pavé pour le panneau qui le chevauchait. */
	.cc-region-hero { padding-bottom: var(--cc-space-12); }
}

/*
 * Formulaire posé dans le contenu d'une page.
 *
 * Il arrivait nu : des champs de mille cent points de large, bordés par le
 * navigateur, et un bouton d'envoi gris. Il prend la même carte que celui de
 * la page Contact, et la même largeur de lecture.
 */
.cc-page .nf-form-cont {
	max-width: 640px;
	/* Aligné sur le titre et le texte de la page, comme le formulaire de la
	   page Contact : centré, il formait un décrochement avec eux. */
	margin-inline: 0;
	padding: var(--cc-space-8);
	border-radius: var(--cc-radius-xl);
	background: #fff;
	box-shadow: var(--cc-shadow);
}

/* Le titre que le formulaire réimprime fait doublon avec celui de la page. */
.cc-page .nf-form-title { display: none; }

@media (max-width: 599px) {
	.cc-page .nf-form-cont { padding: var(--cc-space-5); }
}

/*
 * Page d'une promotion : un cran de corps en plus.
 *
 * La colonne de texte — mention à 14 points, période et description à 16 —
 * tenait tête à une photo de six cents points de large : on lisait la photo
 * et on devinait l'offre. Le titre, la mention, la période et la description
 * montent d'un cran. Ailleurs — régions, expériences — la même bannière
 * garde ses tailles.
 */
/* Entre le corps des titres de section (32) et celui de la bannière
   d'accueil : 40 points au large, 32 sur un téléphone. */
.cc-region-hero--promo .cc-region-hero__title { font-size: clamp(2rem, 3.4vw, 2.5rem); }

.cc-region-hero--promo .cc-promo__mention--hero {
	font-size: var(--cc-text-lg);
	font-weight: 600;
}

.cc-region-hero--promo .cc-region-hero__count { font-size: var(--cc-text-lg); }

.cc-region-hero--promo .cc-region-hero__intro,
.cc-region-hero--promo .cc-region-hero__intro p {
	font-size: var(--cc-text-lg);
	line-height: 1.6;
}

/* --- Code promotionnel dans l'encart ---------------------------------- */

.cc-booking__coupon {
	display: block;
	margin-bottom: var(--cc-space-3);
}

.cc-booking__coupon-label {
	display: block;
	margin-bottom: var(--cc-space-1);
	font-size: var(--cc-text-sm);
	font-weight: 500;
	color: var(--cc-navy);
}

.cc-booking__coupon input {
	width: 100%;
	padding: var(--cc-space-3) var(--cc-space-4);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-bg);
	font: inherit;
	font-size: var(--cc-text-sm);
	text-transform: uppercase;
}
.cc-booking__coupon input::placeholder { text-transform: none; color: var(--cc-color-muted); }
.cc-booking__coupon input:focus {
	outline: none;
	border-color: var(--cc-blue);
	box-shadow: 0 0 0 3px rgba(29, 111, 224, .15);
}

/* La réponse de Guesty, sous le champ : verte si le code a pris, rouge
   sinon. Le devis reste valable dans les deux cas. */
.cc-booking__coupon-retour {
	margin: calc(var(--cc-space-2) * -1) 0 var(--cc-space-3);
	font-size: var(--cc-text-sm);
	line-height: 1.4;
}
.cc-booking__coupon-retour[hidden] { display: none; }
.cc-booking__coupon-retour.est-accepte { color: #0f7a3d; }
.cc-booking__coupon-retour.est-refuse { color: var(--cc-color-promo); }

/* Le rabais sous le total : il s'annonce, il ne s'additionne pas. */
.cc-devis__rabais {
	margin: var(--cc-space-2) 0 0;
	color: #0f7a3d;
	font-size: var(--cc-text-sm);
	font-weight: 600;
}
.cc-devis__rabais[hidden] { display: none; }

/* --- Bande de logos (bloc « image_slider ») ----------------------------
   Des images entières, posées sur des tuiles blanches de même hauteur. Le
   collage de la bande photo coupait les logos ; ici rien n'est rogné, et la
   bande se replie au lieu de disparaître sur téléphone. */

.cc-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: var(--cc-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 1 160px;
	min-height: 96px;
	padding: var(--cc-space-4) var(--cc-space-5);
	border-radius: var(--cc-radius-lg);
	background: #fff;
	box-shadow: var(--cc-shadow);
}

.cc-logos__lien { display: flex; align-items: center; justify-content: center; }

.cc-logos__image {
	width: 100%;
	max-height: 56px;
	/* Entier, quel que soit le format du fichier fourni. */
	object-fit: contain;
}

/* Le glissement des logos est continu : sans courbe linéaire, chaque pas
   démarrerait et finirait en douceur, c'est-à-dire par saccades. */
.cc-slider[data-cc-slider="logos"] .swiper-wrapper { transition-timing-function: linear; }

/* En piste, Swiper pose lui-même la largeur de chaque tuile : le repli de
   la bande (`flex: 0 1 160px`) ne doit pas lutter avec lui. */
.cc-logos.swiper-wrapper { flex-wrap: nowrap; justify-content: flex-start; }

/* La feuille de Swiper se charge après celle du thème et y pose
   `.swiper-slide { display: block }`, à spécificité égale : la tuile cessait
   d'être une boîte flexible et son centrage ne centrait plus rien — chaque
   logo retombait contre le haut, tout le jeu laissé en dessous. Deux classes
   suffisent à reprendre la main. */
.cc-logos.swiper-wrapper .cc-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: auto;
}

@media (max-width: 599px) {
	.cc-logos { gap: var(--cc-space-3); }
	.cc-logos__item {
		flex: 0 1 128px;
		min-height: 76px;
		padding: var(--cc-space-3) var(--cc-space-4);
	}
	.cc-logos__image { max-height: 40px; }
}

.cc-voile-filtres {
	position: fixed;
	inset: 0;
	z-index: 44;
	background: rgba(18, 38, 63, .35);
}

/*
 * En-tête du volet : un titre et une croix.
 *
 * Hors du volet, le panneau fait partie de la page : il n'a rien à fermer,
 * l'en-tête n'existe pas.
 */
.cc-filters-panel__entete { display: none; }

.cc-filters-panel--volet .cc-filters-panel__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-4);
	margin-bottom: var(--cc-space-3);
}

.cc-filters-panel__titre {
	margin: 0;
	font-weight: 600;
	font-size: var(--cc-text-lg, 18px);
	color: var(--cc-navy);
}

.cc-filters-panel__fermer {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-pill);
	background: #fff;
	font-size: 20px;
	line-height: 1;
	color: var(--cc-navy);
	cursor: pointer;
}
.cc-filters-panel__fermer:hover { background: var(--cc-color-surface); }

/*
 * Une seule action dans le volet.
 *
 * « Rechercher » et « Appliquer les filtres » envoient le même formulaire,
 * au même endroit : côte à côte dans un volet, ils donnaient à croire à deux
 * recherches différentes. Reste « Appliquer les filtres », en bas, à sa
 * place.
 */
.cc-filters-panel--volet .cc-search__submit { display: none; }

/* La recherche par nom reste, mais avec son nom : le rond portant un « A »
   ne disait rien à personne. */
.cc-search__loupe-texte { display: none; }

.cc-filters-panel--volet .cc-search__actions { justify-content: flex-start; }

.cc-filters-panel--volet .cc-search__loupe {
	width: auto;
	gap: var(--cc-space-2);
	padding-inline: var(--cc-space-4);
	border-radius: var(--cc-radius-pill);
	font-size: var(--cc-text-sm);
	color: var(--cc-color-text);
}
.cc-filters-panel--volet .cc-search__loupe-texte { display: inline; }

/*
 * Résumé de la recherche : une ligne à la place de la carte.
 *
 * Il n'existe que dans le volet, et seulement sur téléphone : ailleurs, la
 * carte de recherche tient sur une rangée et n'a rien à cacher.
 */
.cc-filters-panel__resume { display: none; }

.cc-filters-panel__resume-texte {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
	font-weight: 600;
	color: var(--cc-navy);
}

.cc-filters-panel__resume-action {
	flex: 0 0 auto;
	color: var(--cc-blue);
	font-weight: 600;
	text-decoration: underline;
}

/*
 * Le volet sur téléphone : rendre la hauteur aux filtres.
 *
 * Mesuré sur un écran de 844 points : la barre de recherche en prenait 370,
 * la barre d'actions 148, et il restait 330 points pour faire défiler 2 173
 * points d'équipements — une fenêtre de quatre centimètres. Les deux dates se
 * rangent donc côte à côte, la barre d'actions tient sur deux lignes serrées,
 * et les blancs entre les groupes se resserrent : 389 points de fenêtre, et
 * une rangée de pastilles de plus à l'écran.
 */
@media (max-width: 599px) {
	/* Le volet occupe l'écran du haut en bas : il lui restait cent points de
	   vide sous la barre d'actions, pendant que les équipements défilaient
	   par une fenêtre de quatre centimètres. */
	.cc-filters-panel.cc-filters-panel--volet {
		bottom: var(--cc-space-3);
		max-height: none;
	}

	/* La carte de recherche se replie derrière son résumé. Les champs
	   restent dans le formulaire : masqués, ils partent quand même avec la
	   recherche. */
	.cc-filters-panel--volet .cc-filters-panel__resume {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--cc-space-3);
		width: 100%;
		margin-bottom: var(--cc-space-3);
		padding: var(--cc-space-3) var(--cc-space-4);
		border: 1px solid var(--cc-color-border);
		border-radius: var(--cc-radius-lg);
		background: #fff;
		font: inherit;
		font-size: var(--cc-text-sm);
		cursor: pointer;
	}
	.cc-filters-panel--volet:not(.a-recherche) .cc-filters-panel__bar { display: none; }

	.cc-filters-panel--volet .cc-search--panel {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--cc-space-2) var(--cc-space-3);
	}

	/* Région, voyageurs, expériences et actions gardent la pleine largeur :
	   leurs valeurs sont longues. Les fenêtres surgissantes aussi, sans quoi
	   le calendrier se retrouverait dans une demi-colonne. */
	.cc-filters-panel--volet .cc-search--panel > .cc-search__field:nth-child(1),
	.cc-filters-panel--volet .cc-search--panel > .cc-search__field:nth-child(4),
	.cc-filters-panel--volet .cc-search--panel > .cc-search__field:nth-child(5),
	.cc-filters-panel--volet .cc-search--panel > .cc-search__actions,
	.cc-filters-panel--volet .cc-search--panel > .cc-datepop,
	.cc-filters-panel--volet .cc-search--panel > .cc-guestpop {
		grid-column: 1 / -1;
	}

	/* Sans son pictogramme, « Ajouter une date » tient dans la demi-colonne ;
	   avec, il se coupait en « Ajouter une d… ». L'étiquette au-dessus dit
	   déjà qu'il s'agit d'une date. */
	.cc-filters-panel--volet .cc-search--panel > .cc-search__field:nth-child(2) .cc-search__icon,
	.cc-filters-panel--volet .cc-search--panel > .cc-search__field:nth-child(3) .cc-search__icon {
		display: none;
	}

	.cc-filters-panel--volet .cc-filters-panel__active {
		padding-bottom: var(--cc-space-3);
		margin-bottom: var(--cc-space-4);
	}
	.cc-filters-panel--volet .cc-filters-group { margin-bottom: var(--cc-space-5); }

	/* Trois pastilles par rangée sur un écran de quatre cents points : le
	   libellé n'a plus que cent points, et « Borne de recharge » se coupait
	   en « Borne de recharg… ». Un cran de moins, et il tient. */
	.cc-filters-panel--volet .cc-bulle__label {
		font-size: var(--cc-text-xs);
		-webkit-line-clamp: 3;
	}
	.cc-filters-panel--volet .cc-filters-group__legend { padding-top: var(--cc-space-3); }

	.cc-filters-panel--volet .cc-filters-panel__actions {
		gap: var(--cc-space-2);
		margin-top: var(--cc-space-4);
		padding-block: var(--cc-space-3);
	}
	/* Le bouton prenait une ligne pour lui seul, précédée de vingt pixels de
	   marge : pleine largeur, il occupe la même place en disant mieux. */
	.cc-filters-panel--volet .cc-filters-panel__actions .cc-btn--primary {
		margin-top: 0;
		width: 100%;
		justify-content: center;
	}
}

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

/* Icône au-dessus du pourcentage, empilées au centre du cercle (cf. maquette). */
.cc-promo__figure-stack {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cc-space-1);
}
.cc-promo__icon {
	/* La règle `.cc-promo__figure img` (image de fond) met les img en absolu :
	   on remet l'icône dans le flux de la pile, sinon elle flotte sur le %. */
	position: static !important;
	width: 22px !important;
	height: 22px !important;
	object-fit: contain !important;
	inset: auto !important;
}
.cc-reassurance__icon { width: 28px; height: 28px; flex: 0 0 auto; object-fit: contain; filter: brightness(0) invert(1); }

/* Zone de contenu libre : panneau bleu clair, texte à gauche et éventail de
   photos à droite. Sans photo, le texte occupe toute la largeur. */
.cc-content-zone {
	background: var(--cc-color-surface);
	border-radius: var(--cc-radius-2xl);
	padding: var(--cc-space-12) var(--cc-space-8);
}

.cc-content-zone__body { max-width: 68ch; }
.cc-content-zone__body .cc-section__title { margin-top: var(--cc-space-4); }

.cc-content-zone__media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.cc-content-zone__photo {
	width: 60%;
	max-width: 300px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--cc-radius-xl);
	box-shadow: 0 16px 38px rgba(18, 45, 77, .2);
}

/* Éventail : la seconde photo mord sur la première, comme sur la maquette. */
.cc-content-zone__photo--a { transform: rotate(-4deg); z-index: 1; }
.cc-content-zone__photo--b { transform: rotate(5deg) translate(-14%, 12%); z-index: 2; }
.cc-content-zone__photo--c { transform: rotate(-6deg) translate(-28%, -8%); }
.cc-content-zone__photo--d { display: none; }

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

/* Sous 900 px les photos passent sous le texte : redressées et côte à côte,
   elles restent lisibles là où l'éventail se chevaucherait trop. */
@media (max-width: 899px) {
	.cc-content-zone__media { gap: var(--cc-space-3); margin-top: var(--cc-space-8); }
	.cc-content-zone__photo { transform: none !important; width: 46%; }
}

/* 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; filter: brightness(0) invert(1); }
.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;
	}
}

/* Sur un téléphone, deux cent dix pixels de haut par photo : la bande pesait
   autant que les trois promesses qu'elle illustre, et mordait sur les coins
   arrondis du pavé. Des vignettes suffisent. */
@media (max-width: 599px) {
	/* La variable plutôt que la hauteur : le chevauchement du pavé bleu se
	   calcule sur elle, et suit donc toute seule. */
	.cc-section--reassurance { --cc-reassurance-slide-h: 150px; }
	.cc-reassurance__slide {
		width: 128px;
		border-radius: var(--cc-radius);
	}
}

/* ---------------------------------------------------------------------------
 * Sliders (Swiper)
 * ------------------------------------------------------------------------ */

/* Le conteneur déborde du gabarit pour que la carte suivante soit amorcée en
   bord d'écran, comme sur la maquette, sans provoquer de scroll horizontal
   sur le body. */
.cc-slider { position: relative; }

.cc-slider__track {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Les cartes doivent toutes faire la même hauteur quelle que soit la longueur
   du libellé : sans cela Swiper les aligne sur leur contenu. */
.cc-slider .swiper-slide { height: auto; }

.cc-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-pill);
	background: #fff;
	color: var(--cc-navy);
	font-size: var(--cc-text-lg);
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(18, 45, 77, .12);
	transition: background .15s ease, color .15s ease;
}

.cc-slider__nav:hover { background: var(--cc-navy); color: #fff; }
.cc-slider__nav--prev { left: calc(var(--cc-space-6) * -1); }
.cc-slider__nav--next { right: calc(var(--cc-space-6) * -1); }

/* Swiper pose ces classes quand il n'y a rien à faire défiler (watchOverflow)
   ou qu'on est en butée. */
.cc-slider__nav.swiper-button-disabled,
.cc-slider__nav.swiper-button-lock {
	opacity: 0;
	pointer-events: none;
}

/* Les flèches ne tiennent hors piste que si le conteneur a de la marge de
   chaque côté. Posées à -24 px alors que le conteneur n'a que 16 px de
   remplissage, elles sortaient de 8 px de la fenêtre tant que celle-ci ne
   dépassait pas la largeur maximale du conteneur — mesuré entre 1100 et
   1216 px. En dessous du seuil, on les ramène à l'intérieur, où elles se
   superposent aux cartes. */
@media (max-width: 1239px) {
	.cc-slider__nav--prev { left: var(--cc-space-2); }
	.cc-slider__nav--next { right: var(--cc-space-2); }
}

/* Sans JS, Swiper n'initialise rien : la piste doit rester utilisable. */
.cc-slider:not(.cc-slider--ready) .cc-slider__track {
	display: flex;
	gap: var(--cc-space-4);
	overflow-x: auto;
}
.cc-slider:not(.cc-slider--ready) .swiper-slide { flex: 0 0 260px; }
.cc-slider:not(.cc-slider--ready) .cc-slider__nav { display: none; }

/* Le `.swiper` interne porte le découpage ; le conteneur, lui, doit laisser
   les flèches déborder. */
.cc-slider > .swiper { overflow: hidden; }
.cc-slider:not(.cc-slider--ready) > .swiper { overflow-x: auto; }

/* =========================================================================
   Blog — liste et article
   ====================================================================== */

/* Colonne de lecture : plus étroite que le conteneur pour tenir une longueur
   de ligne confortable. */
.cc-container--narrow { max-width: 760px; }

/* ---- Cartes d'article : héritent de .cc-card, quelques ajustements ---- */

.cc-post-card__media { aspect-ratio: 3 / 2; }

/* Pastille de catégorie posée sur la photo. */
.cc-post-card__cat {
	position: absolute;
	top: var(--cc-space-3);
	left: var(--cc-space-3);
	padding: var(--cc-space-1) var(--cc-space-3);
	border-radius: var(--cc-radius-pill);
	background: rgba(255, 255, 255, .92);
	color: var(--cc-navy);
	font-size: var(--cc-text-xs);
	font-weight: 600;
}

.cc-post-card__body { padding: var(--cc-space-4) 0 0; gap: var(--cc-space-2); }

.cc-post-card__meta {
	margin: 0;
	display: flex;
	gap: var(--cc-space-2);
	font-size: var(--cc-text-xs);
	color: var(--cc-color-muted);
}

.cc-post-card__title {
	margin: 0;
	font-size: var(--cc-text-lg);
	font-weight: 600;
	line-height: 1.3;
}
.cc-post-card__title a { color: inherit; text-decoration: none; }
.cc-post-card__title a:hover { color: var(--cc-blue); }

/* Chapô limité à trois lignes : les cartes gardent la même hauteur de texte. */
.cc-post-card__excerpt {
	margin: 0;
	color: var(--cc-color-muted);
	font-size: var(--cc-text-sm);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cc-post-card__more {
	margin-top: var(--cc-space-1);
	color: var(--cc-blue);
	font-size: var(--cc-text-sm);
	font-weight: 600;
}
.cc-post-card__more::after { content: " →"; }

.cc-grid--posts { margin-top: var(--cc-space-8); }

/* ---- Article vedette : média et texte côte à côte au-dessus de 900 px ---- */

.cc-post-feature { margin-bottom: var(--cc-space-12); }

@media (min-width: 900px) {
	.cc-post-feature .cc-post-card {
		display: grid;
		grid-template-columns: 1.3fr 1fr;
		gap: var(--cc-space-8);
		align-items: center;
	}
	.cc-post-feature .cc-post-card__media { aspect-ratio: 16 / 10; height: 100%; }
	.cc-post-feature .cc-post-card__title { font-size: var(--cc-text-2xl); }
	.cc-post-feature .cc-post-card__excerpt { -webkit-line-clamp: 4; font-size: var(--cc-text-base); }
}

/* ---- Article seul ---- */

.cc-article__header {
	text-align: center;
	padding-block: var(--cc-space-12) var(--cc-space-8);
}

.cc-article__cat { text-decoration: none; }
.cc-article__cat:hover { color: var(--cc-navy); }

.cc-article__title {
	margin: 0 0 var(--cc-space-4);
	font-size: var(--cc-text-3xl);
	line-height: 1.1;
}

.cc-article__meta {
	margin: 0;
	display: flex;
	justify-content: center;
	gap: var(--cc-space-2);
	color: var(--cc-color-muted);
	font-size: var(--cc-text-sm);
}

.cc-article__cover {
	margin: 0 0 var(--cc-space-12);
	border-radius: var(--cc-radius-2xl);
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.cc-article__cover img { width: 100%; height: 100%; object-fit: cover; }

/* Confort de lecture : corps un cran plus grand que le texte courant. */
.cc-article__body { font-size: var(--cc-text-lg); line-height: 1.7; }
.cc-article__body > * + * { margin-top: var(--cc-space-6); }
.cc-article__body h2 { font-size: var(--cc-text-2xl); margin-top: var(--cc-space-12); }
.cc-article__body h3 { font-size: var(--cc-text-xl); margin-top: var(--cc-space-8); }
.cc-article__body blockquote {
	margin: var(--cc-space-8) 0;
	padding-left: var(--cc-space-6);
	border-left: 3px solid var(--cc-blue);
	color: var(--cc-color-muted);
	font-style: italic;
}

.cc-article__tags {
	list-style: none;
	margin: var(--cc-space-12) 0 0;
	padding: var(--cc-space-8) 0 0;
	border-top: 1px solid var(--cc-color-border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-2);
}

.cc-section--related { background: var(--cc-color-page); }

/* =========================================================================
   Page Promotions — tuiles claires mettant en valeur la bannière du CMS
   ====================================================================== */

.cc-promo-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--cc-space-8);
	grid-template-columns: 1fr;
}

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

.cc-promo-tile {
	display: flex;
	flex-direction: column;
	background: var(--cc-color-bg);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-xl);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}
.cc-promo-tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(18, 45, 77, .13);
}

/* La bannière du CMS porte déjà titre et pourcentage : on la montre en entier
   plutôt que de la rogner dans un cercle. */
.cc-promo-tile__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--cc-color-surface);
	text-decoration: none;
}
.cc-promo-tile__media img { width: 100%; height: 100%; object-fit: cover; }

/* Repli sans image : aplat bleu nuit avec le pourcentage en grand. */
.cc-promo-tile__media--plain {
	display: grid;
	place-items: center;
	background: var(--cc-navy);
	color: #fff;
}

.cc-promo-tile__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cc-space-2);
	padding: var(--cc-space-6);
}

.cc-promo-tile__dates {
	margin: 0;
	font-size: var(--cc-text-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cc-color-muted);
}

.cc-promo-tile__title { margin: 0; font-size: var(--cc-text-xl); line-height: 1.2; }
.cc-promo-tile__title a { color: inherit; text-decoration: none; }
.cc-promo-tile__title a:hover { color: var(--cc-blue); }

.cc-promo-tile__mention { margin: 0; color: var(--cc-color-muted); font-size: var(--cc-text-sm); }
.cc-promo-tile__count { margin: 0; font-size: var(--cc-text-sm); color: var(--cc-color-muted); }

/* Description de l'offre. Bornée en hauteur : certaines portent un règlement
   entier, et une tuile de dix lignes casserait l'alignement de la grille. */
.cc-promo-tile__text {
	margin: 0;
	font-size: var(--cc-text-sm);
	color: var(--cc-color-text);
}
.cc-promo-tile__text p { margin: 0 0 var(--cc-space-2); }
.cc-promo-tile__text p:last-child { margin-bottom: 0; }

/* Le bouton se cale en bas quelle que soit la hauteur du texte au-dessus. */
.cc-promo-tile__cta { margin-top: auto; }
.cc-promo-tile__body { flex: 1 1 auto; }

.cc-promo-tile--featured { border-color: var(--cc-blue); }

/* =========================================================================
   Blocs page-builder ajoutés en août 2026 : faq, itinerary, quoi_faire, image
   ========================================================================= */

/* ----- FAQ ------------------------------------------------------------- */

/* Colonne resserrée : une FAQ se lit mal sur toute la largeur du conteneur. */
/* La FAQ occupe la largeur du site, comme la page Destinations. Elle était
   bornée à 840 px du temps où elle empilait cent questions à la suite : en
   liste de catégories, cette colonne étroite paraissait perdue au milieu. */

.cc-faq__list { margin-top: var(--cc-space-6); }

/* Sur la page FAQ, l'en-tête d'archive porte déjà sa marge basse : la liste
   n'en ajoute pas une seconde. */
.cc-archive__header + .cc-faq__list { margin-top: 0; }

.cc-faq__item {
	background: #fff;
	border: 1px solid var(--cc-color-border);
	border-radius: 14px;
	box-shadow: var(--cc-shadow);
	margin-bottom: var(--cc-space-3);
	overflow: hidden;
}

/* --- FAQ par catégories --- */

/* Recherche. Masquée tant que le script n'a pas pris la main : sans lui elle
   ne filtrerait rien. */
.cc-faq__recherche { margin: 0 0 var(--cc-space-6); }
.cc-faq__recherche[hidden] { display: none; }

.cc-faq__champ {
	width: 100%;
	padding: var(--cc-space-3) var(--cc-space-5);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-pill);
	background: #fff;
	font: inherit;
	font-size: var(--cc-text-sm);
	color: var(--cc-color-text);
	appearance: none;
}
.cc-faq__champ:focus-visible {
	outline: 2px solid var(--cc-blue);
	outline-offset: 2px;
}

.cc-faq__compte {
	margin: var(--cc-space-2) 0 0;
	padding-left: var(--cc-space-5);
	font-size: var(--cc-text-sm);
	color: var(--cc-color-muted);
}
.cc-faq__compte:empty { display: none; }

.cc-faq__categorie[hidden],
.cc-faq__item[hidden] { display: none; }

/* -------------------------------------------------------------------------
   Catégories

   La page montre d'abord la liste des catégories, comme le CMS ; les
   questions viennent au clic. Les pastilles de sommaire ont disparu avec
   l'empilement qu'elles servaient à survoler.
   ---------------------------------------------------------------------- */
.cc-faq__categories {
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-lg);
	background: #fff;
	overflow: hidden;
}

.cc-faq__categorie + .cc-faq__categorie { border-top: 1px solid var(--cc-color-border); }

/* Décalage sous l'en-tête collant : sans lui, l'ancre posait le titre de
   catégorie derrière la barre de navigation. */
.cc-faq__categorie[id] { scroll-margin-top: calc(var(--cc-header-height) + var(--cc-space-5)); }

.cc-faq__titre {
	display: flex;
	align-items: center;
	gap: var(--cc-space-3);
	margin: 0;
	padding: var(--cc-space-5) var(--cc-space-6);
	cursor: pointer;
	font-size: var(--cc-text-lg, 20px);
	font-weight: 600;
	list-style: none;
}
.cc-faq__titre::-webkit-details-marker { display: none; }
.cc-faq__titre:hover { color: var(--cc-blue); }
.cc-faq__titre:focus-visible { outline: 2px solid var(--cc-blue); outline-offset: -2px; }

/* Le chevron tourne plutôt que de changer de glyphe : le mouvement dit ce
   qui vient de s'ouvrir. */
.cc-faq__titre::after {
	content: "";
	flex: 0 0 auto;
	width: 10px; height: 10px;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s var(--cc-ease-out);
}
.cc-faq__categorie[open] > .cc-faq__titre::after { transform: rotate(-135deg); }

/* Le compte dit l'ampleur avant d'ouvrir : trois questions ou vingt-deux, ce
   n'est pas le même détour. */
.cc-faq__compteur {
	padding: 2px var(--cc-space-2);
	border-radius: var(--cc-radius-pill);
	background: var(--cc-color-surface);
	font-size: var(--cc-text-xs);
	font-weight: 500;
	color: var(--cc-color-muted);
}

.cc-faq__categorie > .cc-faq__list {
	margin-top: 0;
	padding: 0 var(--cc-space-6) var(--cc-space-4);
}

.cc-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-4);
	padding: 18px 22px;
	font-family: var(--cc-font-heading);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--cc-navy);
	cursor: pointer;
	/* Le marqueur natif est remplacé par le signe ci-dessous. */
	list-style: none;
}
.cc-faq__question::-webkit-details-marker { display: none; }

.cc-faq__question::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--cc-blue);
}
.cc-faq__item[open] .cc-faq__question::after { content: "−"; }

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

.cc-faq__answer {
	padding: 0 22px 20px;
	color: var(--cc-color-muted);
}
.cc-faq__answer p:last-child { margin-bottom: 0; }

/* ----- Itinéraire ------------------------------------------------------ */

.cc-section--itinerary {
	background: var(--cc-navy);
	color: #fff;
}
.cc-section--itinerary .cc-section__title { color: #fff; }

.cc-itinerary__intro {
	max-width: 60ch;
	margin-bottom: var(--cc-space-8);
	color: #c3d4ec;
}

.cc-itinerary {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--cc-space-4);
}

.cc-itinerary__step {
	display: flex;
	gap: var(--cc-space-6);
	align-items: flex-start;
	padding: var(--cc-space-6);
	border-radius: var(--cc-radius-lg);
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
}

.cc-itinerary__num {
	flex: 0 0 44px;
	height: 44px;
	border-radius: var(--cc-radius-pill);
	background: var(--cc-blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

.cc-itinerary__title { color: #fff; margin-bottom: var(--cc-space-1); }
.cc-itinerary__text { color: #b8cae4; margin-bottom: var(--cc-space-2); }
.cc-itinerary__link { color: var(--cc-blue-light); font-weight: 600; }

@media (max-width: 600px) {
	.cc-itinerary__step { gap: var(--cc-space-4); padding: var(--cc-space-4); }
}

/* ----- Onglets « quoi faire » ------------------------------------------ */

.cc-quoi-faire__intro {
	max-width: 60ch;
	margin-bottom: var(--cc-space-6);
	color: var(--cc-color-muted);
}

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

.cc-tabs__tab {
	padding: var(--cc-space-3) var(--cc-space-6);
	border-radius: var(--cc-radius-pill);
	border: 1px solid var(--cc-color-border);
	background: #fff;
	color: var(--cc-color-muted);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.cc-tabs__tab:hover { border-color: var(--cc-navy); color: var(--cc-navy); }
.cc-tabs__tab.is-active {
	background: var(--cc-navy);
	border-color: var(--cc-navy);
	color: #fff;
}

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

/* Sans script, les sections s'empilent et gardent leur titre : on les sépare. */
.cc-tabs__panel + .cc-tabs__panel { margin-top: var(--cc-space-8); }
.cc-tabs--ready .cc-tabs__panel + .cc-tabs__panel { margin-top: 0; }

.cc-tabs__heading { margin-bottom: var(--cc-space-4); }

/* Une activité de la liste porte un second niveau (ville, saison). */
.cc-activity__label small {
	display: block;
	font-weight: 400;
	font-size: var(--cc-text-xs);
	color: var(--cc-color-muted);
}
.cc-activity a { color: inherit; text-decoration: none; display: block; height: 100%; }

/* Liste d'activites du bloc « quoi faire » : deux par ligne, comme la maquette,
   puis une seule sous 700px. La grille auto-fill de base en alignait quatre,
   trop etroites pour une description. */
.cc-activities--list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Les entrees n'ont pas toutes la meme longueur de texte : sans cela, la
	   plus bavarde imposerait sa hauteur a toute la rangee. */
	align-items: start;
}

@media (max-width: 700px) {
	.cc-activities--list { grid-template-columns: 1fr; }
}

/* Liste en texte seul : le libelle porte le nom puis la description, la ou la
   grille illustree de `.cc-activities` n'attendait qu'un nom. */
.cc-activities--list .cc-activity__label {
	align-self: center;
	line-height: 1.4;
}

.cc-activities--list .cc-activity__label small {
	display: block;
	margin-top: var(--cc-space-1);
	font-weight: 400;
	color: var(--cc-color-muted);
}

/* ----- Image ----------------------------------------------------------- */

.cc-figure { margin: 0; }

/* Le cadre rogne la parallaxe de l'image, et porte le rayon à sa place :
   agrandie par l'animation, l'image aurait vu ses coins arrondis grossir puis
   se faire couper au carré. */
.cc-figure__media {
	overflow: hidden;
	border-radius: var(--cc-radius-lg);
}
.cc-figure__media a { display: block; }

.cc-figure__image {
	width: 100%;
	height: auto;
	display: block;
}
.cc-figure__caption {
	margin-top: var(--cc-space-3);
	font-size: var(--cc-text-sm);
	color: var(--cc-color-muted);
	text-align: center;
}

/* ----- Vacances (à qui s'adresse la région, quand y venir) -------------- */

/* Le CMS découpe la section de la maquette en deux blocs successifs (« à qui
   s'adresse la région », puis « quand y partir »). Ils forment un seul
   ensemble à l'œil : le second ne reprend pas l'espace de section. */
.cc-section--vacances + .cc-section--vacances { padding-top: 0; }

.cc-vacances__intro { max-width: 60ch; color: var(--cc-color-muted); }
.cc-vacances__intro,
.cc-vacances__heading { margin-bottom: var(--cc-space-8); }

.cc-vacances__heading { font-size: 1.25rem; }

.cc-vacances {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--cc-space-6);
	/* Quatre encarts courts, comme sur la maquette : ils se replient d'eux-
	   mêmes en deux colonnes puis en une seule sur les écrans étroits. */
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.cc-vacances__item {
	padding: var(--cc-space-6);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: #fff;
	box-shadow: var(--cc-shadow);
}

.cc-vacances__icon { display: block; margin-bottom: var(--cc-space-2); }

.cc-vacances__title { font-size: 1.05rem; margin-bottom: var(--cc-space-1); }

.cc-vacances__text {
	font-size: var(--cc-text-sm);
	color: var(--cc-color-muted);
	margin-bottom: 0;
}

/* ----- Attraits (lieux à voir) ----------------------------------------- */

.cc-attraits__intro {
	max-width: 60ch;
	margin-bottom: var(--cc-space-8);
	color: var(--cc-color-muted);
}

.cc-attraits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--cc-space-6);
	grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 720px) {
	.cc-attraits { grid-template-columns: 1fr; }
}

.cc-attrait {
	display: flex;
	gap: var(--cc-space-4);
	padding: var(--cc-space-6);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-lg);
	background: #fff;
	box-shadow: var(--cc-shadow);
}

/* Vignette carrée de la maquette. Elle n'apparaît que si le CMS a bien fourni
   une icône, faute de quoi la carte porterait un carré bleu vide. */
.cc-attrait__icon {
	flex: 0 0 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--cc-color-surface);
	display: grid;
	place-items: center;
}

.cc-attrait__place {
	margin-bottom: var(--cc-space-2);
	font-size: var(--cc-text-xs);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--cc-blue);
}

.cc-attrait__title { font-size: 1.1rem; margin-bottom: var(--cc-space-1); }

.cc-attrait__text { font-size: var(--cc-text-sm); color: var(--cc-color-muted); }
.cc-attrait__text p:last-child { margin-bottom: var(--cc-space-2); }

.cc-attrait__source { font-size: var(--cc-text-sm); font-weight: 600; }
.cc-attrait__source::after { content: " \2192"; }

/* =========================================================================
   19. Mouvement

   Deux mécanismes, et un seul principe : le contenu est visible par défaut.

   — La séquence d'entrée est une animation CSS classique. Elle part d'un état
     transparent, ce qui n'est sûr que parce qu'une animation CSS s'exécute
     toujours dès lors que la feuille est appliquée. Aucun script n'en décide.

   — Les révélations au défilement passent par `animation-timeline: view()`,
     enfermées dans un `@supports`. Un navigateur qui ne connaît pas la
     propriété n'entre pas dans le bloc : il affiche le contenu, sans
     animation. Le pire cas est « pas de mouvement », jamais « pas de
     contenu ».

   Tout se joue sur `transform` et `opacity`, les deux propriétés que le
   compositeur traite sans repeindre.
   ====================================================================== */

:root {
	/* Sortie franche puis fin de course longue : le mouvement se pose au lieu
	   de s'arrêter net. */
	--cc-ease-out: cubic-bezier(.22, .61, .36, 1);
	/*
	 * Course des révélations, et sa contrepartie : la portée.
	 *
	 * Sans fondu, tout se joue sur l'écart entre la vitesse de l'élément et
	 * celle du défilement. À 22 px répartis sur 340 px de course, l'élément
	 * suivait le scroll à 94 % — six pour cent d'écart, que l'œil ne relève
	 * pas. Quarante pixels sur 175 en donnent près de vingt-trois, et le
	 * mouvement se voit.
	 */
	--cc-rise: 40px;
}

@keyframes cc-rise {
	from { opacity: 0; transform: translateY(var(--cc-rise)); }
	to   { opacity: 1; transform: none; }
}

/*
 * Les révélations au défilement ont besoin des deux moitiés séparées.
 *
 * Le déplacement doit s'ajouter au `transform` de l'élément, sans quoi le
 * `transform: none` final écraserait les élévations au survol. Mais « ajouter »
 * pour une opacité est une addition arithmétique : la valeur de base vaut 1,
 * l'image-clé 0, et 1 + 0 = 1 — le fondu ne se produisait tout simplement
 * jamais, ne laissant qu'un décalage de douze pixels imperceptible.
 *
 * Chaque moitié porte donc sa propre composition.
 */
@keyframes cc-shift {
	from { transform: translateY(var(--cc-rise)); }
	to   { transform: none; }
}

@keyframes cc-scale {
	from { transform: scale(var(--cc-scale-from, .85)); }
	to   { transform: none; }
}

@keyframes cc-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Zoom du hero : très lent, et sans retour — l'aller-retour d'un `alternate`
   se remarque et donne un effet de respiration mécanique. */
@keyframes cc-hero-zoom {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}

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

/* --- Bannière d'accueil ------------------------------------------------ */

/* La photo vit dans son propre calque : `.cc-hero` ne peut pas être en
   `overflow: hidden` sans couper le panneau de filtres qui déborde dessous. */
.cc-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}
.cc-hero__media::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--cc-hero-image, none);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	animation: cc-hero-zoom 28s var(--cc-ease-out) both;
}

/* L'image est passée dans le calque : la bannière ne garde que le voile. */
.cc-hero {
	background-image: linear-gradient(180deg, rgba(18, 38, 63, .45), rgba(18, 38, 63, .25));
}
.cc-hero__inner { position: relative; z-index: 1; }

.cc-hero__title    { animation: cc-rise .7s var(--cc-ease-out) .05s both; }
.cc-hero__subtitle { animation: cc-rise .7s var(--cc-ease-out) .16s both; }

/* Le panneau arrive en dernier : c'est l'appel à l'action de l'écran. */
/*
 * Le panneau est recentré par `left: 50%` + `translateX(-50%)`. Une animation
 * l'emporte sur une déclaration normale : `cc-rise` écrasait ce `transform`,
 * et son `transform: none` final — conservé par `both` — laissait le panneau
 * décalé d'une demi-largeur vers la droite. Ses images-clés reprennent donc le
 * recentrage.
 */
@keyframes cc-rise-centered {
	from { opacity: 0; transform: translate(-50%, var(--cc-rise)); }
	to   { opacity: 1; transform: translateX(-50%); }
}

.cc-hero > .cc-filters-panel { animation: cc-rise-centered .7s var(--cc-ease-out) .3s both; }
.cc-hero > .cc-search { animation: cc-rise .7s var(--cc-ease-out) .3s both; }

/* --- En-tête ----------------------------------------------------------- */

.cc-header { animation: cc-fade .5s var(--cc-ease-out) both; }

/* Soulignement qui se déploie depuis la gauche. Posé en `::after` plutôt
   qu'en `text-decoration` : seule une boîte peut s'animer en largeur sans
   repeindre le texte. */
.cc-nav__list a {
	position: relative;
	/* Une ancre en ligne n'offre pas de boîte fiable à un enfant positionné :
	   le trait se résolvait sur une largeur nulle. */
	display: inline-block;
}
.cc-nav__list a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .22s var(--cc-ease-out);
}
.cc-nav__list a:hover::after,
.cc-nav__list a:focus-visible::after { transform: scaleX(1); }

/* La page courante porte le trait en permanence : c'est son seul repère
   depuis que la bordure a été retirée. */
.cc-nav__list .current-menu-item > a::after { transform: scaleX(1); }

/* --- Barre de recherche ------------------------------------------------ */

/* Les champs entrent l'un après l'autre, dans l'ordre de lecture. Le retard
   reste court : au-delà, on attend le formulaire au lieu de le remplir.
 *
 * `backwards` et non `both` : retenue après coup, l'image de fin garde sur le
 * champ un `transform` d'identité — qui vaut `none` à l'œil, mais fait du
 * champ un contexte d'empilement. Les listes « Région » et « Voyageurs » s'y
 * trouvaient enfermées et passaient sous les champs suivants et sous le
 * bouton « Rechercher ». `backwards` ne sert que le retard, puis rend la main.
 */
.cc-hero .cc-search__field { animation: cc-rise .5s var(--cc-ease-out) backwards; }
.cc-hero .cc-search__field:nth-child(1) { animation-delay: .34s; }
.cc-hero .cc-search__field:nth-child(2) { animation-delay: .40s; }
.cc-hero .cc-search__field:nth-child(3) { animation-delay: .46s; }
.cc-hero .cc-search__field:nth-child(4) { animation-delay: .52s; }
.cc-hero .cc-search__field:nth-child(5) { animation-delay: .58s; }
.cc-hero .cc-search__submit { animation: cc-rise .5s var(--cc-ease-out) .64s both; }

/* Le champ actif se détache de ses voisins sans changer de gabarit. */
.cc-search__field {
	border-radius: var(--cc-radius);
	transition: background-color .2s var(--cc-ease-out);
}
.cc-search__field:focus-within { background: var(--cc-color-surface); }
.cc-search__field:focus-within .cc-search__icon { color: var(--cc-blue); }

/* Recherche en cours : la flèche cède la place à un témoin qui tourne. */
.cc-filters-panel.is-searching .cc-search__submit { pointer-events: none; }
.cc-filters-panel.is-searching .cc-search__submit-icon { display: none; }
.cc-filters-panel.is-searching .cc-search__submit::after {
	content: "";
	width: 14px; height: 14px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: var(--cc-radius-pill);
	animation: cc-spin .7s linear infinite;
}

/* --- Survols ------------------------------------------------------------ */

/* La carte elle-même ne bouge pas : seule son image réagit — zoom, déjà en
   place, et ombre portée. */
.cc-card__media { transition: box-shadow .25s var(--cc-ease-out); }
.cc-card:hover .cc-card__media { box-shadow: 0 16px 34px rgba(18, 45, 77, .16); }

/* Le contenu de la tuile expérience suit l'image de quelques pixels. */
.cc-xp__footer { transition: transform .25s var(--cc-ease-out); }
.cc-xp:hover .cc-xp__footer { transform: translateY(-2px); }

/* Boutons et liens fléchés : légère montée, et la flèche avance. */
.cc-btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .18s var(--cc-ease-out); }
.cc-btn:hover { transform: translateY(-1px); }
.cc-btn:active { transform: none; }

.cc-section__link svg,
.cc-btn svg { transition: transform .2s var(--cc-ease-out); }
.cc-section__link:hover svg { transform: translateX(3px); }

/* Soulignement animé des liens de contenu. Le dégradé sert de trait : il se
   redimensionne sans provoquer de recalcul de mise en page. */
.cc-prose a:not(.cc-btn),
.cc-faq a:not(.cc-btn) {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size .25s var(--cc-ease-out);
}
.cc-prose a:not(.cc-btn):hover,
.cc-prose a:not(.cc-btn):focus-visible,
.cc-faq a:not(.cc-btn):hover,
.cc-faq a:not(.cc-btn):focus-visible { background-size: 100% 1px; }

/* Icônes : un souffle, pas un tour complet. */
.cc-icon,
.cc-card__spec-icon,
.cc-promo__icon { transition: transform .2s var(--cc-ease-out); }
a:hover > .cc-icon,
.cc-promo:hover .cc-promo__icon { transform: scale(1.08); }

/* --- Révélation au défilement ------------------------------------------ */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		/*
		 * Chaque élément porte sa propre chronologie : les cartes d'une grille
		 * se révèlent donc à mesure qu'elles entrent, sans qu'on ait à
		 * échelonner des retards à la main.
		 *
		 * `animation-range` remplace `animation-duration`, ignoré dès qu'une
		 * chronologie de défilement est en jeu : l'avancement vient de la
		 * position, pas du temps. Il se compte en phase `cover` — voir la note
		 * sur les en-têtes de section pour la raison.
		 */
		.cc-card,
		.cc-xp,
		.cc-tile,
		.cc-promo,
		.cc-promo-tile,
		.cc-post-card,
		.cc-attrait,
		.cc-activity,
		.cc-itinerary__step {
			/*
			 * Deux animations : le fondu remplace la valeur de base, le
			 * déplacement s'y ajoute. Sans cette séparation le `transform:
			 * none` final écraserait les élévations au survol — une carte
			 * déjà révélée n'aurait plus jamais bougé sous la souris — et une
			 * composition additive sur l'opacité annulerait le fondu.
			 *
			 * `animation-composition` est de la même génération que
			 * `animation-timeline` : un navigateur qui entre dans ce bloc la
			 * connaît.
			 */
			animation: cc-shift linear both;
			animation-composition: add;
			animation-timeline: view();
			animation-range: cover 5% cover 22%;
		}

		/*
		 * En-têtes de section. Deux formes coexistent : la plupart des blocs
		 * posent surtitre, titre et chapô à la suite dans le conteneur, tandis
		 * que la grille de chalets les regroupe dans un `header` avec son lien.
		 * On anime donc les éléments eux-mêmes et jamais leur conteneur —
		 * sinon le parent et l'enfant monteraient tous les deux. C'est aussi
		 * pourquoi viser `.cc-section__header` ne suffisait pas : sur une page
		 * destination, huit sections sur dix n'en ont pas.
		 */
		.cc-section__eyebrow,
		.cc-section__title,
		.cc-section__link,
		.cc-section__intro,
		.cc-vacances__intro,
		.cc-attraits__intro,
		.cc-quoi-faire__intro,
		.cc-itinerary__intro {
			animation: cc-shift linear both;
			animation-composition: add;
			animation-timeline: view();
		}

		/*
		 * L'ordre de lecture se retrouve dans les portées : le surtitre est en
		 * place quand le titre démarre, et le chapô suit.
		 *
		 * Les portées se comptent en phase `cover` et non `entry`. La phase
		 * d'entrée est proportionnelle à la hauteur de l'élément : pour une
		 * carte de 120 px elle ne dure que 120 px de défilement, et une portée
		 * de 60 % s'y jouait donc en 72 px — moins d'un cran de molette. Rien
		 * n'était visible alors que tout fonctionnait. La phase `cover`
		 * comprend la hauteur de la fenêtre, ce qui donne une course de
		 * quelques centaines de pixels quelle que soit la taille de l'élément.
		 */
		.cc-section__eyebrow { animation-range: cover 0% cover 16%; }
		.cc-section__title,
		.cc-section__link   { animation-range: cover 3% cover 19%; }
		.cc-section__intro,
		.cc-vacances__intro,
		.cc-attraits__intro,
		.cc-quoi-faire__intro,
		.cc-itinerary__intro { animation-range: cover 5% cover 22%; }

		/*
		 * Parallaxe des grandes images. L'amplitude est volontairement faible :
		 * au-delà, le décalage se voit et l'image semble glisser sur son cadre.
		 * L'agrandissement de 6 % réserve la marge nécessaire pour que les
		 * bords ne se découvrent jamais.
		 */
		/* La bannière de région est déjà en place au chargement : elle n'a
		   que la parallaxe, sans fondu — le fondu se jouerait hors du champ. */
		.cc-region-hero__media img {
			animation: cc-parallax linear both;
			animation-timeline: view();
			animation-range: cover;
			will-change: transform;
		}

		/* --- Les blocs page-builder, un par un ---------------------------
		 *
		 * On révèle ce qui se répète, jamais le conteneur : une section
		 * entière qui monte d'un bloc masque le décalage naturel de ses
		 * éléments, et fait attendre le lecteur pour rien.
		 */

		/* attraits, vacances, quoi faire, réassurance, confort : des séries
		   d'éléments de même poids. Chacun porte sa chronologie, le décalage
		   naît donc de leur position réelle à l'écran. */
		.cc-vacances__item,
		.cc-reassurance__item,
		.cc-comfort__item,
		.cc-columns__item,
		.cc-faq__item,
		.cc-amenity {
			animation: cc-shift linear both;
			animation-composition: add;
			animation-timeline: view();
			animation-range: cover 5% cover 22%;
		}

		/* --- Vacances ----------------------------------------------------
		 *
		 * Les quatre encarts sont sur une même rangée : leurs chronologies
		 * démarrent donc au même instant et le bloc se déplaçait d'un seul
		 * tenant. Décaler leur portée rétablit la cascade de gauche à droite —
		 * et comme elle se compte en défilement et non en temps, elle reste
		 * juste quand la grille se replie en deux colonnes puis en une.
		 */
		.cc-vacances__item:nth-child(1) { animation-range: cover 4% cover 20%; }
		.cc-vacances__item:nth-child(2) { animation-range: cover 7% cover 23%; }
		.cc-vacances__item:nth-child(3) { animation-range: cover 10% cover 26%; }
		.cc-vacances__item:nth-child(4) { animation-range: cover 13% cover 29%; }

		/* L'icône est le repère de l'encart : elle se pose juste après lui,
		   en grandissant depuis 80 %. C'est le seul endroit du bloc où un
		   mouvement propre se justifie. */
		.cc-vacances__icon {
			--cc-scale-from: .8;
			animation: cc-scale linear both;
			animation-composition: add;
			animation-timeline: view();
			animation-range: cover 10% cover 28%;
		}

		/* itinéraire : les étapes se lisent dans l'ordre, la pastille numérotée
		   arrive avec son étape plutôt qu'avant elle. */
		.cc-itinerary__num {
			animation: cc-scale linear both;
			animation-composition: add;
			animation-timeline: view();
			animation-range: cover 8% cover 26%;
		}

		/* zone de contenu et invitation : le texte et l'image se répondent,
		   l'un montant pendant que l'autre se découvre. */
		.cc-content-zone__body,
		.cc-invitation__body {
			animation: cc-shift linear both;
			animation-composition: add;
			animation-timeline: view();
			animation-range: cover 5% cover 24%;
		}

		/* --- Textes ------------------------------------------------------
		 *
		 * Les blocs de texte du page-builder, et la prose des zones de
		 * contenu. La prose s'anime paragraphe par paragraphe : un pavé entier
		 * qui monte d'un bloc se remarque moins qu'une lecture qui se déroule.
		 *
		 * Elle n'a droit qu'au fondu, sans déplacement. Sur un texte long, des
		 * paragraphes qui se replacent les uns après les autres donnent
		 * l'impression que la page bouge sous l'œil.
		 */
		.cc-block__button,
		.cc-block__text > *,
		.cc-content-zone .cc-prose > *,
		.cc-chalet__section .cc-prose > * {
			/* Course réduite : sur un texte long, des paragraphes qui se
			   replacent trop franchement donnent l'impression que la page
			   bouge sous l'œil. Assez pour se voir, pas assez pour distraire. */
			--cc-rise: 20px;
			animation: cc-shift linear both;
			animation-composition: add;
			animation-timeline: view();
			animation-range: cover 4% cover 20%;
		}

		/* Un titre de bloc mérite sa montée, il ouvre une section. */
		.cc-block__heading {
			animation: cc-shift linear both;
			animation-composition: add;
			animation-timeline: view();
			animation-range: cover 3% cover 19%;
		}

		/* --- Images ------------------------------------------------------
		 *
		 * Les grandes photos avaient leur parallaxe mais apparaissaient
		 * abruptement. Le fondu s'ajoute à la seconde chronologie, sur une
		 * portée plus courte : l'image est en place bien avant d'avoir fini
		 * son glissement.
		 */
		/*
		 * La parallaxe ne va qu'aux images qui n'ont pas de `transform` propre.
		 * Elle s'applique en `replace` — c'est nécessaire, un glissement
		 * additif dériverait sans fin — et écrasait donc les éventails de
		 * photos, dont chaque vignette porte sa rotation et son décalage :
		 * `rotate(-5deg) translateY(10px)` et compagnie. Les collages se
		 * retrouvaient à plat.
		 */
		.cc-figure__image {
			animation: cc-parallax linear both;
			animation-timeline: view();
			animation-range: cover;
			will-change: transform;
		}

		/* Éventails de photos : un déplacement additif, qui se compose avec la
		   rotation de chaque vignette au lieu de la remplacer. Faible, sans
		   quoi les images se décaleraient les unes des autres.

		   Le collage des zones de contenu en est écarté : ses vignettes sont
		   très superposées, et le moindre décalage les fait se recouvrir. */
		.cc-strip__photo,
		.cc-comfort__photo {
			--cc-rise: 18px;
			animation: cc-shift linear both;
			animation-composition: add;
			animation-timeline: view();
			animation-range: cover 2% cover 20%;
		}

		/* collage de l'invitation : un simple fondu. Les photos y sont petites
		   et superposées — les déplacer les ferait se chevaucher. Les photos
		   de bandeau, elles, sont grandes : elles restent en parallaxe. */
		.cc-invitation__photo {
			--cc-rise: 18px;
			animation: cc-shift linear both;
			animation-composition: add;
			animation-timeline: view();
			animation-range: cover 0% cover 20%;
		}
	}
}

/* La pastille d'étape apparaît en grossissant très légèrement : elle marque un
   repère, pas une entrée en scène. */
@keyframes cc-pop {
	from { opacity: 0; transform: scale(.85); }
	to   { opacity: 1; transform: none; }
}

@keyframes cc-parallax {
	from { transform: scale(1.06) translateY(-2%); }
	to   { transform: scale(1.06) translateY(2%); }
}

/* --- Mouvement réduit ---------------------------------------------------
   La règle générale de la section 17 ramène les durées à presque zéro, ce qui
   suffit aux transitions et aux animations minutées. Elle ne couvre pas les
   chronologies de défilement, dont l'avancement ne dépend pas de la durée :
   il faut les débrancher explicitement. */

/* --- Les autres pages ---------------------------------------------------

   La bannière de destination et l'en-tête de catalogue jouent le même rôle que
   la bannière d'accueil : ils annoncent la page. Ils reçoivent donc la même
   séquence minutée, plutôt qu'une révélation au défilement — ces éléments sont
   au-dessus de la ligne de flottaison, où faire attendre le contenu n'aurait
   aucun sens. */

.cc-region-hero__badge { animation: cc-rise .6s var(--cc-ease-out) .04s both; }
.cc-region-hero__title { animation: cc-rise .7s var(--cc-ease-out) .1s both; }
.cc-region-hero__intro,
.cc-region-hero__count { animation: cc-rise .7s var(--cc-ease-out) .2s both; }

.cc-archive__title { animation: cc-rise .6s var(--cc-ease-out) .04s both; }
.cc-archive__intro,
.cc-archive__count { animation: cc-rise .6s var(--cc-ease-out) .14s both; }
/* La page s'y pose après une recherche sur téléphone : l'en-tête collant ne
   doit pas recouvrir la première carte. */
.cc-grid--chalets,
.cc-empty { scroll-margin-top: calc(var(--cc-header-height) + var(--cc-space-4)); }

/* Fiche chalet : le titre puis la galerie, qui est le vrai sujet de la page. */
.cc-chalet__header { animation: cc-rise .6s var(--cc-ease-out) .04s both; }
.cc-gallery { animation: cc-fade .7s var(--cc-ease-out) .16s both; }

/* La vignette agrandie de la galerie répond au survol comme les cartes. */
.cc-gallery__thumbs img { transition: transform .25s var(--cc-ease-out); }
.cc-gallery__thumbs a:hover img { transform: scale(1.05); }

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* Le reste de la fiche se découvre au défilement, section par
		   section — sauf le calendrier et la carte, exclus plus bas. */
		.cc-chalet__section > h2,
		.cc-amenities,
		.cc-breadcrumb {
			animation: cc-shift linear both;
			animation-composition: add;
			animation-timeline: view();
			animation-range: cover 5% cover 22%;
		}
	}
}

/* --- Repli des révélations ----------------------------------------------

   Ces deux règles ne mordent que si le script a posé `cc-reveal-js` sur la
   racine et `cc-reveal` sur l'élément, ce qu'il ne fait que là où
   `animation-timeline` manque. L'état masqué n'existe donc jamais dans la
   feuille seule : sans script, le contenu s'affiche, simplement sans
   mouvement. */

/* Déplacement seul, comme les révélations natives : plus d'opacité. */
.cc-reveal-js .cc-reveal {
	transform: translateY(var(--cc-rise));
	transition: transform .5s var(--cc-ease-out);
}
.cc-reveal-js .cc-reveal.is-revealed {
	transform: none;
}

/* À l'impression, rien n'entre jamais dans le champ. */
@media print {
	.cc-reveal-js .cc-reveal { transform: none !important; }
}

/* Rien d'interactif ne s'anime à l'entrée : une carte ou un calendrier qui
   finit d'apparaître pendant qu'on essaie de cliquer dedans est hostile. */
.cc-map,
.cc-map__list,
.cc-calendars,
.cc-tabs,
.cc-booking { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
	.cc-hero__media::before,
	.cc-region-hero__media img,
	.cc-figure__image {
		animation: none !important;
		transform: none !important;
	}
	/* Les collages gardent leur rotation : on ne coupe que l'animation. */
	.cc-strip__photo,
	.cc-comfort__photo,
	.cc-nav__list a::after { transform: scaleX(1); }
}

/* =========================================================================
   20. Carte des destinations

   Dessinée en SVG plutôt qu'en Leaflet : elle sert à cliquer, pas à mesurer.
   Pas de bibliothèque de 150 Ko, pas de tuiles à attendre, aucune requête vers
   un tiers — ce que la loi 25 rend préférable au Québec — et des couleurs qui
   suivent celles du thème au lieu d'une photographie satellite.
   ====================================================================== */

/*
 * La carte prend toute la largeur qu'on lui offre.
 *
 * Sa hauteur était bornée à 86 % de la fenêtre pour qu'on la voie d'un seul
 * regard. Mais la province est en portrait : cette borne ramenait le panneau
 * à 674 px de large dans un conteneur qui en offre 1168, et les dix régions
 * qui ont des chalets — déjà serrées dans le cinquième inférieur de la carte —
 * y devenaient minuscules.
 *
 * On préfère donc la lisibilité du sud au confort du coup d'œil : la carte
 * fait environ une fois et demie la hauteur de l'écran, et se parcourt en
 * défilant. Sous 640 px de large elle disparaît de toute façon — voir plus
 * bas —, la liste de vignettes faisant alors le travail.
 */
.cc-qc-map {
	position: relative; /* repère du message des territoires sans chalet */
	margin-inline: auto;
	margin-top: var(--cc-space-8);
	border-radius: var(--cc-radius-xl);
	background: var(--cc-color-surface);
	padding: var(--cc-space-6);
}

.cc-qc-map__svg {
	display: block;
	width: 100%;
	height: auto;
	margin-inline: auto;
	overflow: hidden;
}

.cc-qc-map__shape {
	/* Le bleu du thème, assombri : franc sur le gris des territoires éteints,
	   et assez foncé pour que le survol — le bleu vif — se distingue encore.
	   Douze régions sur vingt sont vides : les deux teintes doivent se lire
	   d'un coup d'œil, ce que les premières (#c9dbf0 et #e3e9f0) ne faisaient
	   plus. */
	fill: #3d86c6;
	stroke: var(--cc-color-surface);
	stroke-width: 3;
	stroke-linejoin: round;
	transition: fill .18s var(--cc-ease-out);
}

/* Région absente de l'inventaire : présente sur la carte pour que le Québec
   reste lisible, mais éteinte et sans lien. */
.cc-qc-map__shape.is-empty {
	/* Un gris qui se voit. Le précédent, #e7ecf2, se confondait avec le fond
	   du panneau : la moitié nord du Québec paraissait absente alors qu'elle
	   est dessinée, et cliquable. */
	fill: #b7c4d2;
	stroke: var(--cc-color-surface);
	stroke-width: 3;
	stroke-linejoin: round;
}

/* Région sans chalet : elle réagit, mais ne se présente pas comme un lien. */
.cc-qc-map__vide { cursor: help; }
.cc-qc-map__vide:hover .cc-qc-map__shape,
.cc-qc-map__vide:focus-visible .cc-qc-map__shape,
.cc-qc-map__vide.is-active .cc-qc-map__shape { fill: #9aabbd; }

/*
 * Posé sur le territoire désigné.
 *
 * Il s'écrivait d'abord sous la carte, puis au bas de son cadre. Mais la carte
 * porte vingt territoires sur une province entière : un message qui paraît
 * ailleurs oblige à chercher lequel l'a fait naître. Il se pose donc au centre
 * de la forme survolée, et le script le retient à l'intérieur du panneau pour
 * les régions de bordure.
 *
 * Il ne prend pas les événements de la souris : posé sur la forme, il
 * intercepterait le survol de celle-là même qui l'affiche, et clignoterait.
 */
.cc-qc-map__message {
	position: absolute;
	z-index: 2;
	/* `top` et `left` sont posés par le script ; les deux autres bords doivent
	   rester libres. Fixés, ils étireraient la bulle du point désigné jusqu'au
	   bord du panneau. */
	right: auto;
	bottom: auto;
	transform: translate(-50%, -50%);
	width: max-content;
	max-width: min(280px, 70%);
	margin: 0;
	padding: var(--cc-space-3) var(--cc-space-4);
	border-radius: var(--cc-radius);
	background: #fff;
	box-shadow: var(--cc-shadow-lg);
	color: var(--cc-color-text);
	font-size: var(--cc-text-sm);
	line-height: 1.45;
	text-align: center;
	pointer-events: none;
}
.cc-qc-map__message[hidden] { display: none; }

.cc-qc-map__link { cursor: pointer; }
.cc-qc-map__link:hover .cc-qc-map__shape,
.cc-qc-map__link:focus-visible .cc-qc-map__shape { fill: var(--cc-blue); }

/* Le focus clavier doit se voir sur une forme irrégulière : le contour suit le
   tracé, un rectangle de focus ne dirait pas quelle région est visée. */
.cc-qc-map__link:focus { outline: none; }
.cc-qc-map__link:focus-visible .cc-qc-map__shape,
.cc-qc-map__link:focus-visible .cc-qc-map__point {
	stroke: var(--cc-navy);
	stroke-width: 4;
}

.cc-qc-map__label {
	fill: var(--cc-navy);
	font-family: inherit;
	/* Plus discret depuis que la carte montre la province entière : les dix
	   régions qui ont des chalets tiennent dans son cinquième inférieur, et
	   leurs noms s'y marchaient dessus. */
	font-size: 13px;
	font-weight: 600;
	/* Les étiquettes se posent par-dessus les formes : sans quoi le survol de
	   la région voisine passerait par le texte et non par le territoire. */
	pointer-events: none;
	paint-order: stroke;
	stroke: var(--cc-color-surface);
	/* Le halo suit la taille du texte : à cinq pixels sous un corps de treize,
	   il mangeait les lettres au lieu de les détacher. */
	stroke-width: 3;
	stroke-linejoin: round;
	transition: fill .18s var(--cc-ease-out);
}

/* Repères des secteurs qui n'ont pas de contour propre — Portneuf dans la
   région de Québec, Saguenay dans le Saguenay–Lac-Saint-Jean. */
.cc-qc-map__point {
	fill: #fff;
	stroke: var(--cc-blue);
	stroke-width: 4;
	transition: fill .18s var(--cc-ease-out);
}
.cc-qc-map__link--point:hover .cc-qc-map__point,
.cc-qc-map__link--point:focus-visible .cc-qc-map__point { fill: var(--cc-blue); }

.cc-qc-map__label--point { font-size: 12px; }

/* Survol depuis la liste de vignettes, et réciproquement : les deux
   représentations désignent les mêmes régions, elles doivent se répondre. */
.cc-qc-map__shape.is-linked { fill: var(--cc-blue); }
.cc-qc-map__label.is-linked { fill: var(--cc-blue); }
.cc-tile.is-linked { outline: 2px solid var(--cc-blue); outline-offset: 2px; }

.cc-qc-map__credit {
	margin-top: var(--cc-space-4);
	font-size: var(--cc-text-xs);
	color: var(--cc-color-muted);
	text-align: right;
}
.cc-qc-map__credit a { color: inherit; }

/* Sous cette largeur, les étiquettes se chevauchent et la carte devient
   illisible : la liste de vignettes au-dessus fait déjà le travail. */
@media (max-width: 640px) {
	.cc-qc-map-section { display: none; }
}

/* =========================================================================
   23. Espace client

   Une page de service, pas une vitrine : peu d'éléments, hiérarchie nette,
   et le montant dû lisible d'un coup d'œil. Le détail et le paiement se
   passent chez Laravel.
   ====================================================================== */

.cc-espace__inner { max-width: 720px; }

.cc-espace__header { margin-bottom: var(--cc-space-8); }
.cc-espace__title { margin: 0; font-size: var(--cc-text-2xl); color: var(--cc-navy); }

.cc-espace__bonjour {
	margin: 0 0 var(--cc-space-6);
	font-size: var(--cc-text-lg);
	color: var(--cc-color-muted);
}

.cc-espace__accueil,
.cc-espace__sejour {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cc-space-3);
	padding: var(--cc-space-6);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-lg);
	background: #fff;
}

.cc-espace__accueil p,
.cc-espace__sejour p { margin: 0; }

.cc-espace__eyebrow {
	font-size: var(--cc-text-xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cc-color-muted);
}

.cc-espace__dates { font-size: var(--cc-text-lg); font-weight: 600; color: var(--cc-navy); }

.cc-espace__solde {
	font-size: var(--cc-text-lg);
	font-weight: 700;
	color: var(--cc-color-promo);
	font-variant-numeric: tabular-nums;
}
.cc-espace__solde--regle { color: var(--cc-color-muted); font-weight: 500; }

/* Un échec de connexion doit se voir sans crier : bandeau sobre, pas de rouge
   plein écran pour ce qui se règle en réessayant. */
.cc-espace__alerte {
	margin: 0 0 var(--cc-space-6);
	padding: var(--cc-space-3) var(--cc-space-4);
	border-left: 3px solid var(--cc-color-promo);
	border-radius: 0 var(--cc-radius) var(--cc-radius) 0;
	background: var(--cc-color-surface);
	font-size: var(--cc-text-sm);
}

.cc-espace__vide { color: var(--cc-color-muted); }

.cc-espace__liens {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-6);
	margin-top: var(--cc-space-8);
	font-size: var(--cc-text-sm);
}
.cc-espace__sortie { color: var(--cc-color-muted); }

/* --- Options de filtre sans résultat --------------------------------------
 *
 * Le nombre de chalets par option est recalculé à chaque changement, selon les
 * filtres déjà posés. Il ne s'écrit plus nulle part — un chiffre en face de
 * chaque ligne encombrait plus qu'il n'aidait —, mais il sert toujours à
 * signaler l'option qui ne mènerait nulle part.
 */

/* Pendant le calcul, le panneau s'éclaircit à peine : le grisé affiché est
   celui du calcul précédent, et le donner pour le nouveau tromperait. */
.cc-filters-panel.is-counting .cc-filters-panel__more {
	opacity: .7;
	transition: opacity .15s ease;
}

/* Une option qui ne donnerait aucun résultat reste cliquable — la griser
   suffit à le dire, et l'interdire empêcherait de la décocher. */
.cc-chip--check.is-empty {
	opacity: .45;
}

/* Nombre de résultats sur le bouton d'application. Distinct de la pastille qui
   compte les cases cochées : celle-ci dit ce que le filtrage donnerait. */
.cc-btn__result {
	font-weight: 400;
	opacity: .85;
}
.cc-btn__result:empty { display: none; }

/* Sections de description du chalet. Les intertitres restent discrets : ce
   sont des repères de lecture, pas des titres de section à part entière. */
/* Texte replié à dix lignes. La classe est posée par le script : sans lui le
   texte reste entier, plutôt que tronqué sans moyen de l'ouvrir. */
.cc-repli {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 10;
	overflow: hidden;
}
.cc-repli.est-ouvert {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}

/* « Voir plus », à la suite du texte et non au centre : il se lit comme la
   dernière ligne du paragraphe, là où le regard est déjà. */
.cc-repli__bouton {
	margin-top: var(--cc-space-2);
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--cc-blue);
	text-decoration: underline;
	cursor: pointer;
}
.cc-repli__bouton:hover { color: var(--cc-navy); }

.cc-description h3 {
	margin: var(--cc-space-6) 0 var(--cc-space-2);
	font-size: var(--cc-text-base);
	font-weight: 600;
	color: var(--cc-navy);
}
.cc-description h3:first-of-type { margin-top: var(--cc-space-4); }

/* Bouton de compte : il porte le nom du client, dont la longueur est
   imprévisible. La barre de l'en-tête est calée au pixel près — un nom composé
   la ferait déborder —, donc on le tronque plutôt que de la laisser céder. */
.cc-btn--compte .cc-btn__nom {
	display: inline-block;
	max-width: 14ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

/* Dans le panneau du menu, la place ne manque pas. */
.cc-mobile-nav__actions .cc-btn--compte .cc-btn__nom { max-width: none; }

/* Toute la cellule de date ouvre le calendrier, pas seulement son texte. Le
   déclencheur est un bouton au sein d'une étiquette : sans cette surface, un
   clic dans le rembourrage tombait sur l'étiquette et donnait le focus au
   champ natif masqué, sans rien ouvrir. */
.cc-booking__trigger::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* =========================================================================
   24. Page contact

   Deux colonnes : le formulaire, qui est ce qu'on vient faire ici, et les
   coordonnées, pour qui préfère téléphoner. Le formulaire vient de Ninja
   Forms, dessiné côté navigateur : le thème ne peut que l'habiller, d'où les
   sélecteurs du greffon plus bas.
   ====================================================================== */

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

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

.cc-contact__form {
	padding: var(--cc-space-8);
	border-radius: var(--cc-radius-xl);
	background: var(--cc-color-bg);
	box-shadow: var(--cc-shadow);
}

.cc-contact__heading {
	margin: 0 0 var(--cc-space-2);
	font-size: var(--cc-text-xl);
	color: var(--cc-navy);
}

.cc-contact__lead {
	margin: 0 0 var(--cc-space-6);
	max-width: 46ch;
	color: var(--cc-color-muted);
	font-size: var(--cc-text-sm);
}

/* --- Colonne des coordonnées ------------------------------------------- */

.cc-contact__aside {
	display: grid;
	gap: var(--cc-space-6);
}

.cc-contact__card {
	padding: var(--cc-space-6);
	border-radius: var(--cc-radius-xl);
	background: var(--cc-color-surface);
}

.cc-contact__card-title {
	margin: 0 0 var(--cc-space-5);
	font-size: var(--cc-text-lg);
	color: var(--cc-navy);
}

.cc-contact__list {
	display: grid;
	gap: var(--cc-space-5);
}

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

/* Le pictogramme se pose sur la première ligne, quelle que soit la hauteur
   du bloc qui le suit — une adresse tient sur trois lignes. */
.cc-contact__item .cc-icon {
	margin-top: 0.15em;
	font-size: 1.15em;
	color: var(--cc-blue);
}

.cc-contact__label {
	display: block;
	margin-bottom: var(--cc-space-1);
	color: var(--cc-color-muted);
	font-size: var(--cc-text-xs);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.cc-contact__value {
	font-style: normal;
	font-size: var(--cc-text-sm);
	line-height: 1.5;
	color: var(--cc-color-text);
	text-decoration: none;
}

a.cc-contact__value:hover,
a.cc-contact__value:focus-visible { color: var(--cc-blue); }

.cc-contact__socials {
	display: flex;
	gap: var(--cc-space-2);
	margin-top: var(--cc-space-6);
	padding-top: var(--cc-space-5);
	border-top: 1px solid var(--cc-color-border);
}

.cc-contact__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--cc-radius-pill);
	background: var(--cc-color-bg);
	color: var(--cc-navy);
	transition: background-color .15s ease, color .15s ease;
}

.cc-contact__socials a:hover,
.cc-contact__socials a:focus-visible {
	background: var(--cc-blue);
	color: #fff;
}

/* Renvoi vers la FAQ : en bleu nuit pour se distinguer des coordonnées, qui
   sont l'information, là où celui-ci est une proposition. */
.cc-contact__card--faq {
	background: var(--cc-navy);
	color: #fff;
}

.cc-contact__card--faq .cc-contact__card-title { color: #fff; }

/* `.cc-btn` fixe sa couleur de texte : sans cette ligne, le bouton à contour
   écrivait en bleu nuit sur le bleu nuit de la carte. */
.cc-contact__card--faq .cc-btn--ghost { color: #fff; }

.cc-contact__card-text {
	margin: 0 0 var(--cc-space-5);
	font-size: var(--cc-text-sm);
	color: rgba(255, 255, 255, .78);
}

/* --- Formulaires Ninja Forms -------------------------------------------

   Deux formulaires les portent : celui de la page Contact et celui de la
   modale « Parlons de votre chalet ». Les deux conteneurs portent `cc-nf`,
   pour que le même champ ait partout la même allure.

   Le greffon ne pose que sa feuille de structure : les champs arrivent nus.
   On s'accroche à `data-nf-field-type`, que le gabarit du greffon écrit sur
   chaque conteneur : c'est le seul repère qui suive le type du champ et non
   son rang, donc le seul qui survive à une modification du formulaire.
   ---------------------------------------------------------------------- */

/* Le formulaire réimprime son propre titre — « Contact », juste sous le titre
   de la page. */
.cc-nf .nf-form-title { display: none; }

/* L'écart entre deux lignes de champs se règle par l'espacement de la grille,
   non par une marge sur les champs : une marge s'ajouterait à cet espacement,
   et le dernier champ en traînerait une sous le bouton d'envoi. */
.cc-nf .nf-form-content {
	display: grid;
	gap: var(--cc-space-6) var(--cc-space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Le greffon glisse deux éléments de son cru entre la grille et les champs —
   `<nf-fields-wrap>` puis un `<nf-field>` par champ. Sans cette ligne la
   grille n'a qu'un seul enfant, et les champs s'empilent au lieu de se
   ranger : `display: contents` efface ces deux boîtes sans toucher au reste,
   de sorte que chaque champ devienne à son tour une case de la grille. */
.cc-nf nf-fields-wrap,
.cc-nf nf-field { display: contents; }

/* Tout occupe la largeur entière ; seuls les quatre champs courts se rangent
   deux par ligne. Un champ ajouté plus tard hérite donc du cas sûr — et la
   mention des champs obligatoires, qui est aussi une case, garde sa ligne au
   lieu d'en manger une. */
.cc-nf .nf-form-content > *,
.cc-nf .nf-before-fields,
.cc-nf .nf-form-fields-required,
.cc-nf .nf-field-container {
	grid-column: 1 / -1;
}

.cc-nf .nf-field-container { margin-bottom: 0; }

/* L'étiquette du bouton d'envoi est un bloc vide, qui laissait sa marge. */
.cc-nf .nf-field-label:empty { display: none; }

@media (min-width: 560px) {
	.cc-nf .nf-field-container[data-nf-field-type="firstname"],
	.cc-nf .nf-field-container[data-nf-field-type="lastname"],
	.cc-nf .nf-field-container[data-nf-field-type="phone"],
	.cc-nf .nf-field-container[data-nf-field-type="email"] {
		grid-column: span 1;
	}
}

.cc-nf .nf-field-label label {
	font-size: var(--cc-text-sm);
	font-weight: 500;
	color: var(--cc-navy);
}

.cc-nf .label-above .nf-field-label { margin-bottom: var(--cc-space-2); }

/* Les cases à cocher gardent leur dessin natif, à la couleur du thème : une
   case grise de treize pixels passait inaperçue sous un consentement
   obligatoire. */
.cc-nf .nf-field-element input[type="checkbox"],
.cc-nf .nf-field-element input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--cc-blue);
}

.cc-nf .nf-field-element input:not([type="checkbox"]):not([type="radio"]),
.cc-nf .nf-field-element select,
.cc-nf .nf-field-element textarea {
	width: 100%;
	padding: var(--cc-space-3) var(--cc-space-4);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-bg);
	color: var(--cc-color-text);
	font: inherit;
	font-size: var(--cc-text-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.cc-nf .nf-field-element textarea {
	height: auto;
	min-height: 160px;
	resize: vertical;
}

/* Le menu déroulant : même boîte que les autres champs, et un chevron dessiné
   ici plutôt que celui du système, qui change d'un navigateur à l'autre. La
   flèche est dans l'image de fond, donc la place lui est réservée à droite. */
.cc-nf .nf-field-element select {
	height: auto;
	padding-right: var(--cc-space-10, 48px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%231d2d44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--cc-space-4) center;
	appearance: none;
	cursor: pointer;
}

.cc-nf .nf-field-element input:focus,
.cc-nf .nf-field-element select:focus,
.cc-nf .nf-field-element textarea:focus {
	outline: none;
	border-color: var(--cc-blue);
	box-shadow: 0 0 0 3px rgba(29, 111, 224, .15);
}

.cc-nf .nf-error .ninja-forms-field { border-color: #e80000; }
.cc-nf .nf-error-msg {
	margin-top: var(--cc-space-1);
	font-size: var(--cc-text-xs);
}

/* Bouton d'envoi : celui du thème, à l'aide des sélecteurs du greffon —
   `.cc-btn` n'est pas à notre portée, le greffon écrit ses propres classes. */
.cc-nf .nf-field-container[data-nf-field-type="submit"] .nf-field-element input {
	width: auto;
	padding: var(--cc-space-3) var(--cc-space-8);
	border-color: var(--cc-blue);
	border-radius: var(--cc-radius-pill);
	background: var(--cc-blue);
	color: #fff;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, transform .18s var(--cc-ease-out);
}

.cc-nf .nf-field-container[data-nf-field-type="submit"] .nf-field-element input:hover {
	background: var(--cc-blue-dark);
	border-color: var(--cc-blue-dark);
	transform: translateY(-1px);
}

.cc-nf .nf-field-container[data-nf-field-type="submit"] .nf-field-element input:active {
	transform: none;
}

/* La mention des champs obligatoires et la réponse d'envoi. */
.cc-nf .nf-form-fields-required {
	margin-bottom: var(--cc-space-4);
	color: var(--cc-color-muted);
	font-size: var(--cc-text-xs);
}

.cc-nf .nf-response-msg {
	padding: var(--cc-space-4) var(--cc-space-5);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
	color: var(--cc-navy);
	font-size: var(--cc-text-sm);
}

/* Le greffon centre sa roue d'attente sur 100 px de marge : la carte doublait
   de hauteur le temps du chargement. */
.cc-nf .nf-loading-spinner { margin: var(--cc-space-12) auto; }

/* Sans JavaScript le greffon n'affiche rien d'autre que cet avertissement :
   il vaut mieux qu'il ressemble au reste de la page. */
.cc-nf .ninja-forms-noscript-message {
	margin: 0;
	padding: var(--cc-space-6);
	border: 1px dashed var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
	color: var(--cc-color-text);
	font-size: var(--cc-text-sm);
	text-align: left;
}

@media (max-width: 599px) {
	.cc-contact__form { padding: var(--cc-space-5); }
}

/* --- Avis Google -----------------------------------------------------------
 *
 * Le contenu vient du greffon Trustindex, qui apporte ses propres styles : le
 * thème ne fait que lui ménager sa place et l'empêcher de déborder, sans quoi
 * un carrousel large forcerait un défilement horizontal sur la page entière.
 */
.cc-avis-google {
	margin-top: var(--cc-space-6);
	max-width: 100%;
	overflow-x: hidden;
}

/* --- Recherche libre du panneau de filtres ---------------------------------
 *
 * Un bouton dans la rangée, et le champ sur sa propre ligne en dessous : à six
 * champs, la rangée devenait illisible.
 */

/* Loupe et bouton d'envoi partagent la dernière colonne de la grille. */
.cc-search__actions {
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
	min-width: 0;
}

/* Le bouton reprend la forme des champs voisins, en rond. */
.cc-search__loupe {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-pill);
	background: #fff;
	color: var(--cc-color-muted);
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.cc-search__loupe:hover { border-color: var(--cc-navy); color: var(--cc-navy); }
/* Ouverte, la loupe reste blanche et prend le bleu du thème sur son contour et
   son trait : le pictogramme en blanc sur fond blanc aurait disparu. */
.cc-search__loupe[aria-expanded="true"] {
	border-color: var(--cc-blue);
	background: #fff;
	color: var(--cc-blue);
}

.cc-search__ligne {
	display: flex;
	align-items: center;
	gap: var(--cc-space-3);
	/* Un cheveu sous la barre, pas un écart : le rembourrage du panneau les
	   sépare déjà, et sur la bannière la barre est peinte vingt-trois pixels
	   plus haut que sa boîte, ce qui creuserait le vide sans qu'on l'ait
	   demandé. Quatre pixels décollent les deux bords arrondis, rien de plus. */
	margin-top: 4px;
	padding: var(--cc-space-3) var(--cc-space-5);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-pill);
	background: #fff;
	color: var(--cc-color-muted);
}
.cc-search__ligne[hidden] { display: none; }
.cc-search__ligne:focus-within { border-color: var(--cc-blue); }

/*
 * Sans script, `hidden` reste posé et le champ serait hors d'atteinte — le
 * bouton qui l'ouvre ne fait rien. La ligne se montre donc tant que le script
 * n'a pas pris la main, et c'est lui qui ôte cette classe.
 */
.cc-search__ligne[hidden]:not(.cc-search__ligne--js) { display: flex; }

/* L'habillage natif du `input[type=search]` est retiré — la croix
   d'effacement de WebKit se posait par-dessus le texte. */
.cc-search__saisie {
	flex: 1 1 auto;
	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);
	appearance: none;
}
.cc-search__saisie::placeholder { color: var(--cc-color-muted); }
.cc-search__saisie::-webkit-search-cancel-button { appearance: none; }
.cc-search__saisie:focus { outline: none; }

/* --- Carte des régions -----------------------------------------------------
 *
 * Elle remplace le tracé du Québec dessiné : celui-ci situait les régions,
 * celle-ci les ouvre. Grande par défaut — une carte qu'on doit scruter ne sert
 * à rien — et plus basse sur une page région, où le territoire est resserré.
 */
.cc-carte {
	/*
	 * Les calques de Leaflet montent jusqu'à 700 et, sans contexte
	 * d'empilement autour d'eux, se comparent à l'en-tête collant (50) : la
	 * carte lui passait devant au défilement. `isolation` les enferme, et le
	 * conteneur reprend sa place ordinaire dans le flux.
	 */
	isolation: isolate;
	height: clamp(420px, 68vh, 720px);
	border-radius: var(--cc-radius-lg);
	background: var(--cc-color-surface);
	overflow: hidden;
}
.cc-carte--region { height: clamp(320px, 46vh, 480px); }

/* Marqueur de région : un disque qui porte son nombre, le nom dessous. Il ne
   doit pas intercepter le pointeur en dehors du disque, sinon les marqueurs
   voisins deviennent inatteignables. */
.cc-carte__repere {
	background: none;
	border: 0;
	pointer-events: none;
}
.cc-carte__disque,
.cc-carte__nom { pointer-events: auto; }

.cc-carte__disque {
	display: grid;
	place-items: center;
	margin-inline: auto;
	border-radius: var(--cc-radius-pill);
	background: var(--cc-blue);
	box-shadow: 0 0 0 4px rgba(29, 111, 224, .22), var(--cc-shadow);
	color: #fff;
	font-weight: 600;
	font-size: var(--cc-text-sm);
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}
.cc-carte__repere:hover .cc-carte__disque {
	transform: scale(1.06);
	box-shadow: 0 0 0 7px rgba(29, 111, 224, .28), var(--cc-shadow-lg);
}

.cc-carte__nom {
	display: block;
	margin-top: 4px;
	color: var(--cc-navy);
	font-size: var(--cc-text-xs);
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	/* Un halo plutôt qu'un fond : le nom reste lisible sur la forêt comme sur
	   le fleuve, sans poser un rectangle sur la carte. */
	text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}

/* Infobulle d'une épingle. Deux lignes : le nom, puis ce qui permet
   d'écarter le chalet sans l'ouvrir. */
/* Rappel de zoom, au centre de la carte. Il ne paraît qu'à qui tourne la
   molette sans avoir activé le zoom, et s'efface de lui-même. */
.cc-carte__molette {
	position: absolute;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	margin: 0;
	padding: var(--cc-space-6);
	background: rgba(18, 38, 63, .45);
	color: #fff;
	font-size: var(--cc-text-base);
	font-weight: 600;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s var(--cc-ease-out), visibility .2s;
	pointer-events: none;
}
.a-le-rappel > .cc-carte__molette { opacity: 1; visibility: visible; }

.cc-carte__info.leaflet-tooltip {
	padding: var(--cc-space-2) var(--cc-space-3);
	border: 0;
	border-radius: 8px;
	background: var(--cc-navy);
	box-shadow: var(--cc-shadow-lg);
	color: #fff;
	font: inherit;
	font-size: var(--cc-text-xs);
	line-height: 1.4;
	white-space: nowrap;
}
.cc-carte__info strong { display: block; font-weight: 600; }
.cc-carte__info span { display: block; opacity: .8; }
.cc-carte__info.leaflet-tooltip-top::before { border-top-color: var(--cc-navy); }

/* Retour à la vue d'ensemble, posé dans la carte. Masqué tant qu'on regarde
   les régions : il n'y aurait rien à défaire. */
.cc-carte__retour {
	padding: var(--cc-space-2) var(--cc-space-4);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-pill);
	background: #fff;
	box-shadow: var(--cc-shadow);
	font: inherit;
	font-size: var(--cc-text-sm);
	color: var(--cc-navy);
	cursor: pointer;
}
.cc-carte__retour:hover { color: var(--cc-blue); }
.cc-carte__retour[hidden] { display: none; }

.cc-carte__liste { margin: var(--cc-space-4) 0 0; padding-left: var(--cc-space-5); }

/* --- Modale d'un chalet, ouverte depuis une carte --- */

.cc-modale {
	position: fixed;
	inset: 0;
	/* Au-dessus des calques de Leaflet, qui montent jusqu'à 700 et ne créent
	   pas de contexte d'empilement : à 100, la modale se peignait sous la
	   carte qui venait de l'ouvrir. */
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: var(--cc-space-5);
	background: rgba(18, 38, 63, .55);
}
.cc-modale[hidden] { display: none; }
body.cc-modale-ouverte { overflow: hidden; }

.cc-modale__boite {
	position: relative;
	width: min(420px, 100%);
	max-height: calc(100vh - var(--cc-space-10, 48px));
	overflow: auto;
	border-radius: var(--cc-radius-lg);
	background: #fff;
	box-shadow: var(--cc-shadow-lg);
}

.cc-modale__fermer {
	position: absolute;
	top: var(--cc-space-3);
	right: var(--cc-space-3);
	z-index: 1;
	width: 32px; height: 32px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--cc-radius-pill);
	background: rgba(255, 255, 255, .92);
	box-shadow: var(--cc-shadow);
	font-size: 20px;
	line-height: 1;
	color: var(--cc-navy);
	cursor: pointer;
}

.cc-modale__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.cc-modale__image[hidden] { display: none; }

.cc-modale__corps { padding: var(--cc-space-5); }
.cc-modale__titre { margin: 0 0 var(--cc-space-2); font-size: var(--cc-text-lg, 18px); }
.cc-modale__meta {
	margin: 0 0 var(--cc-space-4);
	color: var(--cc-color-muted);
	font-size: var(--cc-text-sm);
}
.cc-modale__meta[hidden] { display: none; }
.cc-modale__lien { width: 100%; justify-content: center; }
.cc-modale__lien[hidden] { display: none; }

/* --- Modale d'un formulaire (« Parlons de votre chalet ») ---
   Plus large que la fiche d'un chalet : un formulaire à deux colonnes y tient,
   et la boîte reste au-dessus du bandeau collant. */

.cc-modale--formulaire { z-index: 1100; }
.cc-modale__boite--large { width: min(640px, 100%); }
/* La boîte prend le focus à l'ouverture, pour que le titre soit annoncé :
   c'est un point de départ, pas un élément à désigner, et le liseré bleu
   autour de la modale entière n'apprend rien. */
.cc-modale__boite--large:focus,
.cc-modale__boite--large:focus-visible { outline: none; }

.cc-modale__intro {
	margin: 0 0 var(--cc-space-4);
	color: var(--cc-color-muted);
	font-size: var(--cc-text-sm);
	line-height: 1.5;
}

/* Ninja Forms dessine ses propres champs : on ne reprend que la largeur, que
   son gabarit à colonnes fixe en pixels sur les petits écrans. */
/* Les champs eux-mêmes suivent les règles `.cc-nf`, partagées avec la page
   Contact : seule la largeur du formulaire se règle ici. */
.cc-modale__form .nf-form-cont { max-width: 100%; }

@media (max-width: 599px) {
	.cc-modale--formulaire { padding: var(--cc-space-3); }
	.cc-modale--formulaire .cc-modale__corps { padding: var(--cc-space-4); }
}