/*
 * Caraibe Parapente - feuille de style de l'apercu local.
 * Conception mobile-first : les regles de base visent le telephone,
 * les media queries elargissent ensuite la mise en page (aucun max-width).
 * Les couleurs de :root sont la copie exacte de marque.couleurs dans content/site.json.
 */

:root {
	/* Palette de marque (source : content/site.json) */
	--cp-encre: #0B2A4A;
	--cp-lagon: #0C8FA8;
	--cp-ciel: #1F72C4;
	--cp-soleil: #F5A524;
	--cp-hibiscus: #D42E2E;
	--cp-sable: #F2F8FB;
	--cp-blanc: #FFFFFF;

	/* Nuances derivees, calculees pour garder un contraste AA avec le blanc */
	--cp-encre-profonde: #072038;
	--cp-lagon-profond: #0B6E88;
	--cp-gris-lagon: #3F5B75;
	--cp-trait: #D7E5EE;
	/* Rouge d'alerte assombri : l'hibiscus de marque n'atteint pas AA sur le
	   fond rose pale des messages d'erreur. */
	--cp-alerte: #A41D1D;
	--cp-alerte-fond: #FDECEC;

	/*
	 * Cadrage du logo : le bandeau ne redessine rien, il decoupe l'affiche
	 * reelle du site. Les valeurs sont exprimees dans le repere de l'affiche
	 * 768 x 1117 et reprennent marque.logo.cadre de content/site.json.
	 * Toute variante proportionnelle de la meme affiche donne le meme cadrage.
	 */
	--cp-logo-x: 16;
	--cp-logo-y: 14;
	--cp-logo-l: 736;
	--cp-logo-h: 232;
	--cp-logo-image-h: 1117;

	/* Largeur du cadre du logo : 46vw depasse 240px des 522px de fenetre, donc
	   partout ou le bandeau colle (>= 48rem) le cadre mesure exactement 240px. */
	--cp-largeur-logo: clamp(168px, 46vw, 240px);

	/*
	 * Hauteur du bandeau colle, recalculee depuis ses propres ingredients :
	 * cadre du logo (240px au rapport du cadrage ci-dessus), respiration
	 * verticale de la bande d'identite (2 x 0.8rem), hauteur de la barre de
	 * navigation (2 x 0.15rem de liste + 2.75rem de cible tactile) et son
	 * filet bas de 1px. Sert a compenser l'arrivee par lien d'ancre.
	 */
	--cp-hauteur-entete: calc(
		240px * var(--cp-logo-h) / var(--cp-logo-l)
		+ 1.6rem
		+ 0.3rem
		+ 2.75rem
		+ 1px
	);

	--cp-rayon: 18px;
	--cp-ombre: 0 10px 30px rgba(11, 42, 74, 0.10);
	--cp-ombre-forte: 0 18px 44px rgba(11, 42, 74, 0.18);
	--cp-largeur: 1120px;
	--cp-marge: clamp(1rem, 5vw, 2.5rem);

	--cp-police: "Manrope", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

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

/*
 * Pas de `scroll-behavior: smooth`, et c'est delibere.
 *
 * Elle y a figure jusqu'au 12/10/2026. Son effet etait joli sur un clic
 * dans la page, mais elle empechait le navigateur d'honorer l'ancre a
 * l'ARRIVEE sur une page. Mesure : `index.html#tarifs` ouvert directement
 * laissait le defilement a 0 au lieu de 3058 px.
 *
 * Les consequences touchaient toute la navigation. Les entrees de menu
 * « Le vol » et « Tarifs » pointent vers des ancres de l'accueil : depuis
 * une autre page, elles menaient en haut de l'accueil et non a leur
 * section. Les boutons « Reserver cette formule » ont le meme besoin.
 *
 * Une animation decorative ne vaut pas des liens qui n'arrivent pas. Le
 * saut est desormais instantane, comme sur la plupart des sites.
 */
html {
	-webkit-text-size-adjust: 100%;
}

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

body {
	margin: 0;
	font-family: var(--cp-police);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--cp-encre);
	background: var(--cp-blanc);
	/* Laisse la place a la barre d'appel fixe du telephone. */
	padding-bottom: 5.5rem;
}

@media (min-width: 48rem) {
	body {
		padding-bottom: 0;
	}
}

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

a {
	color: var(--cp-lagon-profond);
	text-underline-offset: 0.18em;
}

h1,
h2,
h3 {
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 0.6em;
	font-weight: 800;
}

h2 {
	font-size: clamp(1.65rem, 5.2vw, 2.5rem);
}

h3 {
	font-size: clamp(1.1rem, 3.6vw, 1.3rem);
}

p {
	margin: 0 0 1rem;
}

.cp-shell {
	width: 100%;
	max-width: var(--cp-largeur);
	margin-inline: auto;
	padding-inline: var(--cp-marge);
}

.cp-section {
	padding-block: clamp(2.75rem, 9vw, 5.5rem);
}

.cp-section--sable {
	background: var(--cp-sable);
}

.cp-section__chapeau {
	max-width: 50ch;
	font-size: 1.0625rem;
	color: var(--cp-gris-lagon);
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/*
 * Section centree : le titre, le chapeau et le widget sont ramenes dans l'axe
 * de la page. Le chapeau garde sa largeur de lecture, il est juste recentre.
 */
.cp-section--centre {
	text-align: center;
}

.cp-section--centre .cp-section__chapeau {
	margin-inline: auto;
}

.cp-section--centre .cp-widgets-avis {
	justify-content: center;
}

.cp-section--centre .cp-widget-avis__source {
	margin-inline: auto;
}

/*
 * Titres et chapeaux de section sont centres sur tout le site : ils sont
 * courts, la symetrie leur va. Le corps de texte, lui, reste aligne a gauche :
 * centre, l'oeil doit rechercher le debut de chaque ligne. Le selecteur ne
 * vise que les enfants directs du conteneur, ce qui laisse de cote la section
 * de contact, batie en deux colonnes.
 */
.cp-section > .cp-shell > h2,
.cp-section > .cp-shell > .cp-section__chapeau {
	text-align: center;
}

.cp-section > .cp-shell > .cp-section__chapeau {
	margin-inline: auto;
}

/* L'etiquette precede le titre : elle se centre avec lui, pas toute seule. */
.cp-section > .cp-shell > .cp-etiquette {
	display: flex;
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
}

.cp-saut {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--cp-soleil);
	color: var(--cp-encre);
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--cp-rayon) 0;
	font-weight: 700;
	z-index: 100;
}

.cp-saut:focus {
	left: 0;
}

/* ------------------------------------------------- Bandeau d'identite */

/*
 * Fond uni et non degrade : c'est la couleur sur laquelle les tests de
 * contraste mesurent le slogan et le bouton d'appel (voir test_contraste).
 */
.cp-entete__identite {
	background: var(--cp-encre-profonde);
	color: var(--cp-blanc);
}

.cp-entete__identite-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-block: 0.8rem;
}

/*
 * Le logo n'est pas un fichier a part : c'est un cadrage de l'affiche
 * existante, decoupe par le navigateur. L'image reste intacte sur le disque.
 */
.cp-logo {
	display: block;
	flex: none;
	text-decoration: none;
	border-radius: 14px;
}

.cp-logo__cadre {
	display: block;
	position: relative;
	overflow: hidden;
	width: var(--cp-largeur-logo);
	aspect-ratio: calc(var(--cp-logo-l) / var(--cp-logo-h));
	border-radius: 14px;
	background: var(--cp-blanc);
	box-shadow: 0 8px 22px rgba(7, 32, 56, 0.45);
}

.cp-logo__cadre img {
	position: absolute;
	width: auto;
	max-width: none;
	height: calc(100% * var(--cp-logo-image-h) / var(--cp-logo-h));
	left: calc(-100% * var(--cp-logo-x) / var(--cp-logo-l));
	top: calc(-100% * var(--cp-logo-y) / var(--cp-logo-h));
}

.cp-entete__texte {
	flex: 1 1 10rem;
}

.cp-entete__slogan {
	margin: 0;
	font-style: italic;
	font-weight: 700;
	font-size: clamp(1rem, 4.2vw, 1.45rem);
	color: var(--cp-soleil);
}

/*
 * Le numero remplace l'ancien bouton : il reste une vraie cible tactile de
 * 44 px, sans occuper la largeur d'un bouton dans un bandeau deja charge.
 */
.cp-entete__contact {
	margin: 0.15rem 0 0;
}

.cp-entete__contact a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	/* Un numero coupe en deux lignes ne se lit pas : il reste d'un bloc. */
	white-space: nowrap;
	color: var(--cp-blanc);
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
}

.cp-entete__contact a:hover,
.cp-entete__contact a:focus-visible {
	color: var(--cp-soleil);
	text-decoration: underline;
}

/*
 * Telephone, Facebook et note voyagent ensemble, calles a droite du bandeau.
 * Les regrouper evite que la note parte seule a la ligne sur les ecrans
 * intermediaires, ou les cinq elements ne tiennent pas cote a cote.
 */
/*
 * Sur telephone, le trio passe sous le texte : cale a droite il laisserait un
 * vide a gauche, on le garde donc dans l'axe du logo et du numero. Des que la
 * place le permet, il rejoint l'extremite droite du bandeau.
 */
.cp-entete__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem 0.75rem;
	flex: 0 1 auto;
}

@media (min-width: 48rem) {
	.cp-entete__actions {
		justify-content: flex-end;
		margin-left: auto;
	}
}

/*
 * Texte reserve aux lecteurs d'ecran : retire de l'affichage sans etre retire
 * de la page. `display: none` le supprimerait aussi pour eux.
 */
.cp-hors-ecran {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Choix de la langue : un seul drapeau, celui de la langue ou l'on n'est pas.
 * Il voisine le logo Facebook et le bouton TripAdvisor dans un bandeau deja
 * charge, d'ou cette taille retenue.
 */
.cp-langues {
	flex: none;
}

.cp-langues__lien {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44 px au minimum : cible tactile confortable au doigt. */
	min-width: 2.75rem;
	min-height: 2.75rem;
}

/*
 * Un cadre commun aux deux drapeaux. Leurs proportions reelles different
 * (3:2 pour la France, 2:1 pour le Royaume-Uni) : a largeur egale, l'un
 * serait plus haut que l'autre, et le passage d'une langue a l'autre ferait
 * sauter le bandeau. Chacun remplit donc le cadre en gardant ses
 * proportions, quitte a perdre un peu de ses bords -- deformer un drapeau
 * serait pire que le rogner.
 *
 * Le blanc des deux se perdrait par ailleurs sur le bleu nuit du bandeau,
 * d'ou le filet clair.
 */
.cp-drapeau {
	width: 1.75rem;
	height: calc(1.75rem * 2 / 3);
	overflow: hidden;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.cp-langues__lien:hover .cp-drapeau,
.cp-langues__lien:focus-visible .cp-drapeau {
	box-shadow: 0 0 0 2px var(--cp-blanc);
}

/* Lien vers le reseau social. L'icone garde les couleurs officielles. */
.cp-entete__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	/* 44 px au minimum : cible tactile confortable au doigt. */
	min-width: 2.75rem;
	min-height: 2.75rem;
	border-radius: 50%;
}

.cp-entete__social svg {
	width: 2rem;
	height: 2rem;
	transition: transform 0.15s ease;
}

.cp-entete__social:hover svg,
.cp-entete__social:focus-visible svg {
	transform: scale(1.12);
}

/*
 * La note est visible partout, telephone compris : elle se range a cote du
 * bouton d'appel sans prendre de ligne pour elle seule (55 px de plus sur un
 * ecran de 375 px). margin-left la maintient a droite si la ligne cassait.
 */
.cp-entete__note {
	display: flex;
	align-items: center;
	/*
	 * Le widget est calibre par TripAdvisor pour 20 px de haut. L'interligne
	 * du site (1,6) s'appliquait a son contenu et l'etirait a 27 px.
	 */
	line-height: 1;
}

/*
 * Le site met tout en border-box ; les widgets TripAdvisor, eux, sont dessines
 * en content-box. Leur imposer notre modele rognait 4 px dans chaque boite :
 * le cadre vert tombait a 14 px au lieu de 20, le logo n'y tenait plus et son
 * bas depassait sur le fond sombre, ce qui le faisait paraitre tronque.
 * Mesure apres correction : 92 x 22, soit la taille annoncee par TripAdvisor.
 */
.cp-entete__note,
.cp-entete__note *,
.cp-widget-avis,
.cp-widget-avis * {
	box-sizing: content-box;
}

/*
 * TripAdvisor dimensionne ses logos dans une boite dont le rapport (1,63)
 * ne correspond pas tout a fait a celui du dessin (1,556) : etire de 5 %.
 * Verifie : cela vient de leur feuille de style, pas de la notre. object-fit
 * laisse le dessin a ses proportions a l'interieur de cette boite.
 */
.cp-entete__note img,
.cp-widget-avis img {
	max-width: 100%;
	object-fit: contain;
}

/*
 * Le logo du bandeau est peint avant que TripAdvisor n'ait charge sa propre
 * feuille de style. Sans hauteur imposee, le navigateur lui donne sa taille
 * naturelle -- mesure a 57 x 36 px -- puis TripAdvisor le ramene a 20 px :
 * on voyait le logo apparaitre en grand une fraction de seconde a chaque
 * changement de page, et l'en-tete sauter avec lui.
 *
 * La contrainte porte sur la hauteur seule, et sous forme de maximum : si
 * TripAdvisor change un jour de calibrage vers le bas, le logo suivra.
 * Seul celui du bandeau est vise ; le bloc de la page Avis contient
 * d'autres images, aux dimensions propres.
 */
.cp-entete__note img {
	max-height: 20px;
}

/* ------------------------------------------------------ Navigation */

/*
 * Le bandeau entier colle en haut a partir de la tablette. Sur telephone il
 * defile : c'est la barre d'appel fixe du bas qui prend le relais. Coller
 * seulement la barre de navigation serait sans effet, un element sticky ne
 * pouvant pas se deplacer dans un parent de sa propre hauteur.
 */
@media (min-width: 48rem) {
	.cp-entete {
		position: sticky;
		top: 0;
		z-index: 50;
	}

	/*
	 * Sans cette compensation, un lien d'ancre (« Le vol », « Tarifs », le lien
	 * d'evitement vers #contenu) amene le haut de la section juste sous le bord
	 * superieur de la fenetre, donc sous le bandeau colle : son titre serait
	 * masque. scroll-padding-top decale toute arrivee par ancre de la hauteur du
	 * bandeau, plus 0.75rem de respiration. Pose sur html, elle couvre aussi
	 * bien la navigation dans la page que l'arrivee depuis une autre page.
	 */
	html {
		scroll-padding-top: calc(var(--cp-hauteur-entete) + 0.75rem);
	}
}

.cp-entete__barre {
	background: var(--cp-blanc);
	border-bottom: 1px solid var(--cp-trait);
	box-shadow: 0 2px 12px rgba(11, 42, 74, 0.07);
}

.cp-nav__liste {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0.15rem 0;
}

.cp-nav a {
	display: inline-flex;
	align-items: center;
	/* 44 px au minimum : cible tactile confortable au doigt. */
	min-height: 2.75rem;
	padding: 0.4rem 0.6rem;
	color: var(--cp-encre);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.95rem;
	border-bottom: 3px solid transparent;
}

.cp-nav a:hover,
.cp-nav a:focus-visible {
	border-bottom-color: var(--cp-soleil);
}

.cp-nav__courant {
	border-bottom-color: var(--cp-lagon) !important;
}

@media (min-width: 48rem) {
	.cp-nav__liste {
		justify-content: flex-start;
		gap: 0 1.4rem;
	}

	.cp-nav a {
		font-size: 1rem;
		padding-inline: 0;
	}
}

/* -------------------------------------------------------------- Boutons */

.cp-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	/* 48px de haut : cible tactile confortable au doigt. */
	min-height: 3rem;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	border: 2px solid transparent;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cp-bouton:hover,
.cp-bouton:focus-visible {
	transform: translateY(-2px);
}

.cp-bouton--principal {
	background: var(--cp-soleil);
	color: var(--cp-encre);
	box-shadow: var(--cp-ombre);
}

.cp-bouton--secondaire {
	background: transparent;
	color: var(--cp-blanc);
	border-color: rgba(255, 255, 255, 0.75);
}

.cp-bouton--sombre {
	background: var(--cp-encre);
	color: var(--cp-blanc);
}

.cp-bouton--bloc {
	width: 100%;
}

@media (min-width: 30rem) {
	.cp-bouton--bloc {
		width: auto;
	}
}

/* Le bouton d'envoi du formulaire est un <button>, pas un lien : il n'herite
   ni de la police ni du curseur du document. */
button.cp-bouton {
	font-family: inherit;
	cursor: pointer;
}

/*
 * Dans l'apercu, l'envoi est desactive : il n'y a ni PHP ni base ici, et rien
 * ne doit laisser croire qu'une demande peut partir. L'aspect reste celui du
 * bouton reel pour que la mise en page soit jugee telle qu'elle sera.
 */
button.cp-bouton[disabled] {
	cursor: not-allowed;
	opacity: 0.8;
	box-shadow: none;
}

button.cp-bouton[disabled]:hover,
button.cp-bouton[disabled]:focus-visible {
	transform: none;
}

:focus-visible {
	outline: 3px solid var(--cp-soleil);
	outline-offset: 3px;
}

/* ----------------------------------------------------------------- Hero */

.cp-hero,
.cp-banniere {
	position: relative;
	color: var(--cp-blanc);
	background: linear-gradient(165deg, var(--cp-encre-profonde) 0%, #0D4C74 52%, var(--cp-lagon-profond) 100%);
	overflow: hidden;
}

.cp-hero::after,
.cp-banniere::after {
	/* Vague decorative, purement visuelle. */
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: clamp(24px, 5vw, 56px);
	background: var(--cp-blanc);
	clip-path: ellipse(75% 100% at 50% 100%);
}

.cp-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(2rem, 6vw, 3.5rem);
	padding-block: clamp(2.5rem, 9vw, 5rem) clamp(4rem, 11vw, 7rem);
}

.cp-hero__surtitre,
.cp-banniere__surtitre {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.35);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cp-hero__titre {
	font-size: clamp(2.4rem, 11vw, 4.4rem);
	margin: 0 0 0.35em;
	text-transform: uppercase;
	letter-spacing: -0.02em;
}

.cp-hero__slogan {
	font-size: clamp(1.25rem, 5.5vw, 1.9rem);
	font-weight: 700;
	font-style: italic;
	color: var(--cp-soleil);
	margin: 0 0 0.6em;
}

.cp-hero__accroche {
	font-size: clamp(1.02rem, 3.6vw, 1.2rem);
	max-width: 42ch;
	color: rgba(255, 255, 255, 0.94);
}

.cp-hero__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

@media (min-width: 30rem) {
	.cp-hero__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
}

.cp-hero__reperes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
}

.cp-hero__reperes li::before {
	content: "\2713";
	color: var(--cp-soleil);
	font-weight: 800;
	margin-right: 0.4rem;
}

.cp-hero__media {
	justify-self: center;
	max-width: 320px;
	width: 100%;
}

.cp-hero__media img {
	border-radius: var(--cp-rayon);
	box-shadow: var(--cp-ombre-forte);
	border: 4px solid rgba(255, 255, 255, 0.9);
}

@media (min-width: 62rem) {
	.cp-hero__inner {
		grid-template-columns: 1.15fr 0.85fr;
		align-items: center;
	}

	.cp-hero__media {
		max-width: 380px;
		rotate: 2deg;
	}
}

/* ------------------------------------------------- Banniere de page */

.cp-banniere {
	padding-block: clamp(2.25rem, 8vw, 4rem) clamp(3.5rem, 10vw, 5.5rem);
}

.cp-banniere .cp-shell {
	position: relative;
	z-index: 1;
}

.cp-banniere__titre {
	font-size: clamp(2rem, 8.5vw, 3.2rem);
	margin: 0 0 0.3em;
}

.cp-banniere__accroche {
	font-size: clamp(1.05rem, 4vw, 1.25rem);
	max-width: 52ch;
	color: rgba(255, 255, 255, 0.94);
	margin-bottom: 0;
}

.cp-banniere__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

@media (min-width: 30rem) {
	.cp-banniere__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
}

/* ------------------------------------------------------- Texte courant */

.cp-texte {
	max-width: 68ch;
}

.cp-texte p {
	font-size: clamp(1.02rem, 3.4vw, 1.12rem);
}

.cp-texte__renvoi {
	margin-top: 1.5rem;
}

.cp-lien-fleche {
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid var(--cp-soleil);
	padding-bottom: 2px;
}

.cp-lien-fleche::after {
	content: " \2192";
}

/* --------------------------------------------------------------- Cartes */

.cp-grille {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.cp-grille--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.cp-grille--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.cp-grille--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 62rem) {
	.cp-grille--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.cp-carte {
	background: var(--cp-blanc);
	border: 1px solid var(--cp-trait);
	border-radius: var(--cp-rayon);
	padding: clamp(1.25rem, 4vw, 1.75rem);
	box-shadow: var(--cp-ombre);
}

.cp-carte h3 {
	margin-bottom: 0.4rem;
}

.cp-carte p:last-child {
	margin-bottom: 0;
}

.cp-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--cp-sable);
	color: var(--cp-lagon-profond);
	margin-bottom: 1rem;
}

.cp-icone svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* --------------------------------------------------------------- Tarifs */

.cp-tarif {
	display: flex;
	flex-direction: column;
	position: relative;
}

.cp-tarif--phare {
	border-color: var(--cp-soleil);
	border-width: 2px;
	box-shadow: var(--cp-ombre-forte);
}

.cp-tarif__badge {
	position: absolute;
	top: -0.85rem;
	left: clamp(1.25rem, 4vw, 1.75rem);
	background: var(--cp-soleil);
	color: var(--cp-encre);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
}

.cp-tarif__prix {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.25rem 0 1rem;
}

.cp-tarif__montant {
	font-size: clamp(2.4rem, 9vw, 3rem);
	font-weight: 800;
	line-height: 1;
	color: var(--cp-encre);
}

.cp-tarif__detail {
	font-size: 1rem;
	font-weight: 600;
	color: var(--cp-gris-lagon);
}

.cp-tarif__points {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.cp-tarif__points li {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-size: 1rem;
}

.cp-tarif__points li::before {
	content: "\2713";
	color: var(--cp-lagon-profond);
	font-weight: 800;
	flex: none;
}

.cp-tarif .cp-bouton {
	margin-top: auto;
}

.cp-note {
	margin-top: 1.5rem;
	margin-bottom: 0;
	font-size: 0.95rem;
	color: var(--cp-gris-lagon);
}

/* --------------------------------------------------------------- Etapes */

.cp-etapes {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.cp-etape__numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--cp-encre);
	color: var(--cp-blanc);
	font-weight: 800;
	margin-bottom: 0.9rem;
}

/* -------------------------------------------------------------- Galerie */

.cp-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 200px;
	padding: 1.5rem;
	text-align: center;
	border-radius: var(--cp-rayon);
	border: 2px dashed var(--cp-lagon);
	background: linear-gradient(160deg, #E6F4F8 0%, #F6FBFD 100%);
	color: #34566F;
	font-size: 0.95rem;
	font-weight: 600;
}

.cp-slot p {
	margin: 0;
}

.cp-slot svg {
	width: 2rem;
	height: 2rem;
	color: var(--cp-lagon-profond);
}

.cp-slot--avis {
	border-color: var(--cp-soleil);
	background: linear-gradient(160deg, #FFF6E6 0%, #FFFCF6 100%);
	color: #6B4A09;
}

.cp-slot--avis svg {
	color: #8A5E0B;
}

/* ----------------------------------------------------- Informations manquantes */

.cp-a-fournir {
	background: var(--cp-sable);
	border-top: 4px solid var(--cp-soleil);
}

.cp-etiquette {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 1rem;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	background: var(--cp-soleil);
	color: var(--cp-encre);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.cp-etiquette svg {
	width: 1.05rem;
	height: 1.05rem;
}

.cp-manques {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cp-manque {
	background: var(--cp-blanc);
	border: 1px solid var(--cp-trait);
	border-left: 4px solid var(--cp-soleil);
	border-radius: var(--cp-rayon);
	padding: clamp(1.1rem, 3.5vw, 1.5rem);
}

.cp-manque h3 {
	margin-bottom: 0.35rem;
	font-size: 1.08rem;
}

.cp-manque p {
	margin: 0;
	font-size: 0.98rem;
	color: var(--cp-gris-lagon);
}

/* --------------------------------------- Formulaire de demande de vol */

.cp-formulaire__corps {
	max-width: 42rem;
	/* Centre dans la page, comme le titre et le chapeau qui le coiffent. */
	margin-inline: auto;
	padding: clamp(1.25rem, 4vw, 1.75rem);
	background: var(--cp-blanc);
	border: 1px solid var(--cp-trait);
	border-radius: var(--cp-rayon);
	box-shadow: var(--cp-ombre);
}

/* L'encadre d'apercu precede le formulaire : il se centre avec lui. */
.cp-formulaire > .cp-shell > .cp-alerte {
	margin-inline: auto;
}

.cp-formulaire__obligatoire {
	margin: 0 0 1.25rem;
	font-size: 0.92rem;
	color: var(--cp-gris-lagon);
}

.cp-champs {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.cp-champs {
		grid-template-columns: repeat(2, 1fr);
	}

	/* La date de vol est le champ le plus structurant : elle prend la ligne. */
	.cp-champs .cp-champ:last-child {
		grid-column: 1 / -1;
	}
}

.cp-champ {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

.cp-champ__label {
	font-weight: 700;
	font-size: 0.98rem;
}

.cp-champ__requis {
	color: var(--cp-alerte);
}

.cp-champ__saisie {
	width: 100%;
	/* 48px de haut : cible tactile confortable au doigt. */
	min-height: 3rem;
	padding: 0.6rem 0.85rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--cp-encre);
	background: var(--cp-blanc);
	border: 1px solid var(--cp-gris-lagon);
	border-radius: 12px;
}

/*
 * Zone de texte libre, pour le mot facultatif du client.
 *
 * Elle herite de la ligne de saisie : meme bordure, meme fond, meme rayon.
 * Trois choses la distinguent.
 *
 * `min-height` est redefinie : les 3rem d'une ligne de saisie ecraseraient
 * les quatre rangees demandees par l'attribut `rows`.
 *
 * `resize: vertical` autorise l'agrandissement en hauteur mais pas en
 * largeur : tire de cote, la zone sortirait de la colonne et casserait la
 * mise en page sur telephone.
 *
 * `line-height` est relevee : un texte de plusieurs lignes se lit mal
 * serre, alors qu'une ligne unique s'en accommode.
 */
.cp-champ__message {
	min-height: 0;
	line-height: 1.55;
	resize: vertical;
}

/*
 * Liste de choix. Un navigateur dessine un <select> a sa facon, avec sa
 * propre hauteur et sa propre fleche : sans ces trois lignes, le champ
 * detonnerait au milieu des autres. La fleche reste celle du systeme --
 * la redessiner demanderait une image de fond, et le gain ne vaut pas la
 * dette.
 */
.cp-champ__choix {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--cp-encre) 50%),
		linear-gradient(135deg, var(--cp-encre) 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) 1.35rem, calc(100% - 0.75rem) 1.35rem;
	background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
	background-repeat: no-repeat;
	padding-right: 2.25rem;
}

/* Tant qu'aucune formule n'est choisie, le champ doit se lire comme vide. */
.cp-champ__choix:invalid {
	color: var(--cp-gris-lagon);
}

.cp-champ__aide {
	font-size: 0.9rem;
	color: var(--cp-gris-lagon);
}

.cp-champ__erreur {
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--cp-alerte);
}

.cp-champ--erreur .cp-champ__saisie {
	border-color: var(--cp-alerte);
	border-width: 2px;
}

.cp-champ--case {
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.cp-champ__case {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0.15rem 0 0;
	accent-color: var(--cp-lagon-profond);
}

.cp-champ__label-case {
	flex: 1 1 14rem;
	font-size: 0.98rem;
}

.cp-rgpd {
	margin-top: 1.5rem;
	padding: clamp(1rem, 3vw, 1.35rem);
	background: var(--cp-sable);
	border: 1px solid var(--cp-trait);
	border-radius: 14px;
}

.cp-rgpd__titre {
	margin: 0 0 0.5rem;
	font-weight: 800;
}

.cp-rgpd__texte {
	font-size: 0.95rem;
}

.cp-rgpd__complement {
	margin: 0.9rem 0 0;
	font-size: 0.9rem;
	color: var(--cp-gris-lagon);
}

.cp-formulaire__envoi {
	margin: 1.5rem 0 0;
}

.cp-formulaire__corps .cp-note {
	margin-top: 1rem;
	margin-bottom: 0;
}

/*
 * Champ piege anti-robot. Il est sorti de l'ecran et non masque par un
 * attribut : sans feuille de style, la consigne reste lisible et personne ne
 * le remplit par erreur.
 */
.cp-piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cp-alerte {
	max-width: 42rem;
	margin: 0 0 1.5rem;
	padding: clamp(0.9rem, 3vw, 1.25rem);
	background: var(--cp-alerte-fond);
	border-left: 4px solid var(--cp-hibiscus);
	border-radius: 0 14px 14px 0;
	font-size: 0.95rem;
}

.cp-alerte > :last-child {
	margin-bottom: 0;
}

.cp-alerte__titre {
	margin: 0 0 0.4rem;
	font-weight: 800;
	color: var(--cp-alerte);
}

.cp-alerte__liste {
	margin: 0;
	padding-left: 1.2rem;
}

.cp-formulaire__legende {
	margin: 2rem 0 0.75rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--cp-gris-lagon);
}

.cp-confirmation {
	max-width: 42rem;
	padding: clamp(1.1rem, 3.5vw, 1.6rem);
	background: var(--cp-sable);
	border: 1px solid var(--cp-trait);
	border-left: 4px solid var(--cp-lagon-profond);
	border-radius: 0 var(--cp-rayon) var(--cp-rayon) 0;
}

.cp-confirmation__titre {
	margin-bottom: 0.4rem;
}

.cp-confirmation > :last-child {
	margin-bottom: 0;
}

.cp-confirmation__relance {
	font-weight: 700;
}

/* -------------------------------------------------------------- Contact */

.cp-contact {
	color: var(--cp-blanc);
	background: linear-gradient(150deg, var(--cp-encre-profonde) 0%, var(--cp-lagon-profond) 100%);
}

.cp-contact h2 {
	color: var(--cp-blanc);
}

.cp-contact__inner {
	display: grid;
	gap: clamp(1.75rem, 5vw, 3rem);
}

@media (min-width: 48rem) {
	.cp-contact__inner {
		grid-template-columns: 1.1fr 0.9fr;
		align-items: center;
	}
}

.cp-contact__chapeau {
	color: rgba(255, 255, 255, 0.94);
	font-size: 1.1rem;
	max-width: 42ch;
}

.cp-contact__tel {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: clamp(1.6rem, 7vw, 2.2rem);
	font-weight: 800;
	color: var(--cp-blanc);
	text-decoration: none;
	margin-bottom: 1.25rem;
}

.cp-contact__tel:hover,
.cp-contact__tel:focus-visible {
	text-decoration: underline;
}

.cp-contact__prenom {
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cp-soleil);
	margin-bottom: 0.3rem;
}

.cp-contact__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

@media (min-width: 30rem) {
	.cp-contact__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
}

.cp-contact__notes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.cp-contact__notes li {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 12px;
	padding: 0.75rem 1rem;
	font-size: 0.98rem;
}

.cp-contact__notes li::before {
	content: "\2022";
	color: var(--cp-soleil);
	font-weight: 800;
	flex: none;
}

/* ---------------------------------------------------------- Pied de page */

.cp-pied {
	background: var(--cp-encre-profonde);
	color: rgba(255, 255, 255, 0.84);
	padding-block: clamp(2.25rem, 7vw, 3.5rem) 1.5rem;
	font-size: 0.95rem;
}

.cp-pied a {
	color: var(--cp-blanc);
	text-underline-offset: 0.2em;
}

.cp-pied a:hover,
.cp-pied a:focus,
.cp-pied a:focus-visible {
	color: var(--cp-soleil);
}

.cp-pied__inner {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.cp-pied__inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 62rem) {
	.cp-pied__inner {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
	}
}

.cp-pied__titre {
	color: var(--cp-blanc);
	font-weight: 800;
	margin: 0 0 0.6rem;
}

.cp-pied__marque p:last-child {
	margin-bottom: 0;
	max-width: 32ch;
}

.cp-pied__colonne ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}

.cp-pied__tel {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 1.25rem;
	font-weight: 800;
}

.cp-pied__note {
	margin: 1.75rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.78);
}

/* ------------------------------------------------- Barre d'appel mobile */

.cp-barre-appel {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60;
	padding: 0.65rem var(--cp-marge) calc(0.65rem + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, 0.96);
	border-top: 1px solid var(--cp-trait);
	box-shadow: 0 -8px 24px rgba(11, 42, 74, 0.12);
}

.cp-barre-appel .cp-bouton {
	width: 100%;
}

@media (min-width: 48rem) {
	.cp-barre-appel {
		display: none;
	}
}

/* --------------------------------------------------------------- Bandeau */

.cp-bandeau-apercu {
	margin: 0;
	background: var(--cp-hibiscus);
	color: var(--cp-blanc);
	font-size: 0.88rem;
	padding: 0.6rem var(--cp-marge);
	text-align: center;
	font-weight: 600;
}

/* ------------------------------------------------------ Widget TripAdvisor */

.cp-widgets-avis {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1rem;
	margin: 0 0 1rem;
}

.cp-widgets-avis > .cp-widget-avis {
	margin: 0;
}

/*
 * Jamais de zoom ici, ni de transform: scale. Le widget de depot contient un
 * controle de notation qui deduit la bulle survolee de la position de la
 * souris ; une mise a l'echelle fausse ce calcul et lui fait produire des
 * classes absentes de la feuille de TripAdvisor (bubble_130 la ou elle ne va
 * que jusqu'a bubble_50), si bien que plus aucune bulle n'est dessinee.
 * L'agrandissement se fait donc en reprenant leurs tailles une a une, juste
 * en dessous : la taille des bulles, elle, est sans effet sur leur calcul.
 */
.cp-widget-avis {
	width: max-content;
	max-width: 100%;
	margin: 0 0 1rem;
	border-radius: 6px;
}

/*
 * TripAdvisor verrouille ses tailles sur l'identifiant #CDSWIDWRL, plus
 * prioritaire que nos classes : il faut le reprendre pour avoir la main.
 * Chaque regle ci-dessous libere une contrainte precise de leur feuille.
 */
.cp-widget-avis #CDSWIDWRL {
	width: 340px;
	max-width: 100%;
}

/* Leur max-height de 250 px couperait le formulaire une fois agrandi. */
.cp-widget-avis #CDSWIDWRL .widWRLData {
	max-height: none;
	padding: 12px 14px 18px;
}

/* Leur hauteur de 20 px rognerait des bulles plus hautes. */
.cp-widget-avis #CDSWIDWRL .widWRLRating {
	height: auto;
}

.cp-widget-avis #CDSWIDWRL .widWRLRate {
	width: auto;
	height: auto;
	font-size: 26px;
}

.cp-widget-avis #CDSWIDWRL .widWRLRatingText {
	font-size: 16px;
}

.cp-widget-avis #CDSWIDWRL .widWRLBranding a {
	font-size: 14px;
}

/* Chez eux width, min-width et max-width valent toutes 210 px. */
.cp-widget-avis #CDSWIDWRL .widWRLReview textarea {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: 92px;
	font-size: 14px;
}

.cp-widget-avis #CDSWIDWRL .widWRLButton input {
	margin-top: 12px;
	padding: 6px 16px;
	font-size: 15px;
}

.cp-widget-avis:hover {
	box-shadow: 0 2px 10px rgba(12, 42, 64, 0.16);
}

.cp-widget-avis iframe {
	max-width: 100%;
}

.cp-widget-avis .TA_links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-widget-avis__source {
	max-width: 42rem;
	margin: 0;
	font-size: 0.9rem;
	color: var(--cp-encre-douce, #4A5560);
}

/* ------------------------------------------- Consentement aux services tiers */

/*
 * Bandeau pose en bas d'ecran tant que le visiteur n'a pas repondu. Les deux
 * boutons sont strictement identiques : la reglementation veut que refuser
 * soit aussi simple qu'accepter, et un bouton terne a cote d'un bouton vif
 * ne remplit pas cette condition.
 */
.cp-cookies {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 60;
	background: var(--cp-encre);
	color: var(--cp-blanc);
	box-shadow: 0 -6px 24px rgba(7, 32, 56, 0.35);
}

.cp-cookies__inner {
	padding-block: clamp(0.9rem, 3vw, 1.25rem);
}

.cp-cookies__titre {
	margin: 0 0 0.35rem;
	font-weight: 800;
	font-size: 1.05rem;
}

.cp-cookies__texte {
	margin: 0 0 0.9rem;
	max-width: 60ch;
	font-size: 0.95rem;
}

.cp-cookies__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
}

.cp-cookies__bouton {
	flex: 0 0 auto;
	min-width: 11rem;
	min-height: 2.75rem;
	padding: 0.5rem 1.2rem;
	border: 2px solid var(--cp-soleil);
	border-radius: 999px;
	background: var(--cp-soleil);
	color: var(--cp-encre);
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}

.cp-cookies__bouton:hover,
.cp-cookies__bouton:focus-visible {
	background: var(--cp-blanc);
	border-color: var(--cp-blanc);
}

.cp-cookies__lien {
	color: var(--cp-blanc);
	font-size: 0.9rem;
}

/* Ce qui s'affiche a la place d'un widget tant qu'il n'est pas autorise. */
.cp-tiers-bloque {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem;
	border: 1px dashed var(--cp-trait);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	text-align: center;
}

.cp-tiers-bloque p {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.3;
}

.cp-tiers-bloque__bouton {
	min-height: 2.25rem;
	padding: 0.3rem 0.9rem;
	border: 2px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.8rem;
	font-weight: 800;
	cursor: pointer;
}

.cp-tiers-bloque__bouton:hover,
.cp-tiers-bloque__bouton:focus-visible {
	background: var(--cp-soleil);
	border-color: var(--cp-soleil);
	color: var(--cp-encre);
}

/*
 * Dans le bandeau d'identite, le widget remplace n'est qu'un petit bouton :
 * son remplacant doit l'etre aussi. La phrase d'explication reste lue par les
 * lecteurs d'ecran, mais c'est le bouton seul qui occupe la place.
 */
.cp-entete__note .cp-tiers-bloque {
	padding: 0;
	border: 0;
	background: none;
	color: var(--cp-blanc);
}

.cp-entete__note .cp-tiers-bloque p {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cp-entete__note .cp-tiers-bloque__bouton {
	min-height: 2rem;
	padding: 0.25rem 0.7rem;
	font-size: 0.75rem;
}

/* Dans la page, il occupe la place du formulaire sans la surjouer. */
.cp-widget-avis .cp-tiers-bloque {
	min-width: 15rem;
	padding: 1.5rem 1rem;
	color: var(--cp-encre);
}

.cp-pied__cookies {
	margin-top: 0.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.85rem;
	text-decoration: underline;
	cursor: pointer;
}

/* ------------------------------------ Media heberge par un service exterieur */

/*
 * Le code d'integration fourni par Facebook porte width="560" height="314"
 * en attributs. Sur un telephone, 560 px debordent et la page gagnerait une
 * barre de defilement horizontale. On impose donc la largeur disponible en
 * gardant le rapport de l'original -- les attributs restent le repli d'un
 * navigateur qui ignorerait aspect-ratio.
 *
 * Le lecteur est centre dans la page : les titres et chapeaux le sont
 * partout sur le site, et un cadre pose contre le bord gauche sous un
 * titre centre se lit comme un oubli.
 */
.cp-media-tiers {
	max-width: 35rem;
	margin: 0 auto 1rem;
}

.cp-media-tiers iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 560 / 314;
	border: 0;
	border-radius: 12px;
	background: var(--cp-encre);
}

/* Tant que rien n'est autorise, l'encadre occupe la place du cadre absent :
 * sans cela la page sauterait d'un demi-ecran au moment de l'acceptation. */
.cp-media-tiers .cp-tiers-bloque {
	aspect-ratio: 560 / 314;
	color: var(--cp-encre);
}

/*
 * La note de source partage la largeur du lecteur : les deux blocs
 * forment une colonne, alignes sur le meme bord. Son texte reste
 * aligne a gauche -- trois phrases centrees obligeraient l'oeil a
 * rechercher le debut de chaque ligne.
 */
.cp-media-tiers__source {
	max-width: 35rem;
	margin-inline: auto;
	font-size: 0.9rem;
	color: var(--cp-encre-douce, #4A5560);
}