/* =========================================================================
   CPE — Collectif Petite Enfance
   Système de design issu de la maquette Figma « CPE_Landing Page-v05 »
   (frame 1440 × 8844).

   UNITÉ DE DESIGN `--u`
   ---------------------
   Toutes les valeurs de la maquette sont exprimées en « pixels Figma »
   multipliés par `--u`. À 1440px de large, `--u` vaut exactement 1px : le
   rendu est donc au pixel près identique à la maquette. En dessous, `--u`
   suit la largeur du viewport (un 1440e de la largeur), ce qui
   fait respirer la mise en page de façon strictement proportionnelle.
   Au delà de 1440px, `--u` est plafonné à 1px : la page garde sa taille
   de maquette et se centre.
   ========================================================================= */

/* --- Polices ------------------------------------------------------------
   Les règles @font-face de Sofia Pro sont générées en PHP (includes/assets.php)
   et n'apparaissent que pour les fichiers réellement présents dans
   /assets/fonts/ : tant qu'ils manquent, le navigateur ne tente aucun
   téléchargement et la pile de repli géométrique prend le relais.
   ----------------------------------------------------------------------- */
:root {
	/* Couleurs — variable Figma « CPE - beige » ; le rouge de la v04 (#fa3c25)
	   remplace l'ancien #fe6350. */
	--cpe-beige: #f9e4c6;
	--cpe-rouge: #fa3c25;
	--cpe-bleu: #167ce0;
	--cpe-jaune: #ffd428;
	--cpe-beige-30: rgba(249, 228, 198, 0.3);

	--cpe-font: 'Sofia Pro', 'Avenir Next', 'Avenir', 'Century Gothic', 'Futura',
		system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Unité de design : exactement 1px à 1440, proportionnelle en dessous.
	   La division est écrite telle quelle (et non pré-calculée en 0.0694444vw)
	   pour éviter une erreur d'arrondi qui décalerait les empilements d'un pixel. */
	--u: min(1px, 100vw / 1440);

	/* Échelle typographique (valeurs exactes de la maquette). */
	--cpe-fs-display: calc(100 * var(--u));
	--cpe-fs-lead: calc(64 * var(--u));
	--cpe-fs-row: calc(56.061 * var(--u));
	--cpe-fs-sub: calc(40 * var(--u));
	--cpe-fs-tab: calc(33.369 * var(--u));
	--cpe-fs-body: calc(25 * var(--u));
	--cpe-fs-btn: calc(18.28 * var(--u));
	--cpe-fs-small: calc(16 * var(--u));

	/* Gouttières de la maquette : 100px à gauche, 125px à droite. */
	--cpe-gutter: calc(100 * var(--u));
	--cpe-gutter-right: calc(125 * var(--u));

	--cpe-menu-gutter: calc(46 * var(--u));
	/* Hauteur courante de l'en-tête (réduite une fois collé). */
	--cpe-header-h: calc(129 * var(--u));
	--cpe-header-h-stuck: calc(88 * var(--u));
	/* Place réservée dans le flux : constante, elle ne suit pas le resserrement. */
	--cpe-header-h-base: calc(129 * var(--u));
	--cpe-logo-h: calc(83.412 * var(--u));
	--cpe-logo-h-stuck: calc(52 * var(--u));

	/* Écart entre la colonne du titre et l'illustration du héros. La maquette
	   le rend négatif : la colonne (557px) empiète de 55.735px sur la place de
	   l'illustration, qui retrouve ainsi sa pleine largeur (738.735px). Le
	   chevauchement ne se voit pas — la plus longue ligne du titre
	   (« commence ») ne fait que 473px. Remonter vers 0 rétrécit l'illustration
	   d'autant. */
	--cpe-hero-gap: calc(-55.735 * var(--u));
	--cpe-hairline: 1px solid var(--cpe-beige);
}

/* --- Base --------------------------------------------------------------- */
/* Les ancres doivent s'arrêter sous l'en-tête collant, sinon le titre visé
   passe dessous. On prend la hauteur réduite : c'est l'état de l'en-tête une
   fois le défilement lancé. */
html:has(body.cpe-site) {
	scroll-padding-top: calc(var(--cpe-header-h-stuck) + 24 * var(--u));
}

@media (prefers-reduced-motion: no-preference) {
	html:has(body.cpe-site) {
		scroll-behavior: smooth;
	}
}

body.cpe-site {
	background-color: var(--cpe-bleu);
	font-family: var(--cpe-font);
	color: var(--cpe-beige);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.cpe {
	position: relative;
	box-sizing: border-box;
	font-family: var(--cpe-font);
}

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

/* Remise à zéro : la marge par défaut de <figure> (1em 40px) décalerait les
   visuels positionnés d'après les coordonnées de la maquette.
   `:where()` garde une spécificité nulle, pour que les classes de composants
   l'emportent toujours sur cette remise à zéro. */
:where(.cpe) :where(figure, p, h1, h2, h3, ul, ol) {
	margin: 0;
	padding: 0;
}

:where(.cpe) :where(ul, ol) {
	list-style: none;
}

/* Le contenu reste calé sur la largeur de maquette au delà de 1440px. */
.cpe-canvas {
	position: relative;
	width: 100%;
	max-width: calc(1440 * var(--u));
	margin-inline: auto;
}

/* Texte réservé aux lecteurs d'écran. */
.cpe-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cpe-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Bouton pilule ------------------------------------------------------ */
.cpe-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Figma trace le contour à l'intérieur de la boîte (56px de haut) : le
	   filet de 1px est retiré du rembourrage. */
	padding: calc(17 * var(--u) - 1px) calc(21 * var(--u) - 1px);
	border: 1px solid var(--cpe-jaune);
	border-radius: 999px;
	font-size: var(--cpe-fs-btn);
	font-weight: 700;
	line-height: calc(21.6 * var(--u));
	color: var(--cpe-beige);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.cpe-btn:hover,
.cpe-btn:focus-visible {
	background-color: var(--cpe-jaune);
	color: var(--cpe-bleu);
}

/* Variante rouge, utilisée sur les fonds beiges. */
.cpe-btn--rouge {
	border-color: var(--cpe-rouge);
	color: var(--cpe-rouge);
}

.cpe-btn--rouge:hover,
.cpe-btn--rouge:focus-visible {
	background-color: var(--cpe-rouge);
	color: var(--cpe-beige);
}

/* Bouton qui ouvre un second panneau : la flèche des carrousels, réduite à
   0.4 (15.97 × 15.57, trait de 1.2px) et tournée de -45°, suit le libellé.
   Sa boîte tournée fait 21.74px de large ; la maquette la pose à 7px du
   texte (« Fabriquer votre carré », 253px de large). La hauteur reste celle
   de la ligne du libellé : le bouton garde ses 56px. */
.cpe-btn__arrow {
	position: relative;
	flex: none;
	width: calc(21.741 * var(--u));
	height: calc(21.6 * var(--u));
	margin-left: calc(7.26 * var(--u));
	transition: transform 0.25s ease;
}

.cpe-btn__arrow svg {
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(15.9725 * var(--u));
	height: calc(15.5731 * var(--u));
	transform: translate(-50%, -50%) rotate(-45deg);
}

.cpe-btn--arrow:hover .cpe-btn__arrow,
.cpe-btn--arrow:focus-visible .cpe-btn__arrow {
	transform: translateX(calc(4 * var(--u)));
}

/* --- Flèche des carrousels ---------------------------------------------- */
/* Le SVG exporté contient la géométrie non pivotée : le composant Figma
   l'affiche tourné de -45°, ce qui donne la flèche horizontale. La boîte
   englobante tournée d'un 40 × 39 fait bien 54.447px de côté. Chaque section
   place ses flèches ; `.cpe-arrow` ne porte que le dessin et les états. */
.cpe-arrow {
	position: relative;
	flex: none;
	width: calc(54.447 * var(--u));
	height: calc(54.447 * var(--u));
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.cpe-arrow img {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(40 * var(--u));
	height: calc(39 * var(--u));
	transform: translate(-50%, -50%) rotate(-45deg);
}

.cpe-arrow--prev img {
	transform: translate(-50%, -50%) rotate(135deg);
}

.cpe-arrow--prev:hover:not(:disabled) {
	transform: translateX(calc(-6 * var(--u)));
}

.cpe-arrow--next:hover:not(:disabled) {
	transform: translateX(calc(6 * var(--u)));
}

.cpe-arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.cpe-arrow:focus-visible {
	outline: 2px solid var(--cpe-jaune);
	outline-offset: 2px;
}

/* --- Titres ------------------------------------------------------------- */
.cpe-display {
	margin: 0;
	font-size: var(--cpe-fs-display);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: calc(-3 * var(--u));
	color: var(--cpe-beige);
}

/* Sofia Pro Bold n'a pas les mêmes métriques verticales que la Regular : un
   mot en gras dans un titre à interligne 0.9 agrandit sa ligne de 2px, et
   décale d'autant tout ce qui suit. Sans boîte de ligne propre, il s'en tient
   à l'interligne du titre. */
.cpe-display :where(strong, b) {
	line-height: 0;
}

/* Masques des lignes révélées : SplitText les pose en `overflow: clip`, à la
   hauteur de la ligne, ce qui rognait tout ce qui dépasse de l'interligne
   serré — point du « i » et jambage du « p » de « petit » (interligne 0.8,
   0.08em de chaque côté), accents et jambages ailleurs (0.02 à 0.04em). Le
   rognage passe par un `clip-path` qui déborde de 0.12em en haut et en bas
   (et largement sur les côtés) : la boîte, donc la mise en page, ne change
   pas. Le départ de la révélation (`yPercent` dans revealVars) est abaissé
   d'autant. */
.cpe-reveal-line-mask {
	overflow: visible !important;
	clip-path: inset(-0.12em -0.5em);
}

.cpe-lead {
	margin: 0;
	font-size: var(--cpe-fs-lead);
	font-weight: 400;
	line-height: 1;
	color: var(--cpe-rouge);
}

.cpe-sub {
	margin: 0;
	font-size: var(--cpe-fs-sub);
	font-weight: 400;
	line-height: 1;
	color: var(--cpe-jaune);
}

/* =========================================================================
   EN-TÊTE (collant) — 129px, filet beige en pied
   ========================================================================= */
/* Bricks enveloppe le gabarit d'en-tête dans <header id="brx-header">. C'est
   donc ce conteneur qu'il faut fixer, et non l'élément intérieur.
   `fixed` plutôt que `sticky` : l'en-tête se resserre au défilement, et en
   flux cette variation de hauteur remonterait toute la page de 41px en plein
   défilement — ce qui faisait rater les ancres. Hors flux, la réservation
   d'espace reste constante et les ancres tombent juste. */
body.cpe-site {
	padding-top: var(--cpe-header-h-base);
}

body.cpe-site #brx-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

.cpe-header {
	position: relative;
	z-index: 100;
	width: 100%;
	height: var(--cpe-header-h);
	background-color: var(--cpe-bleu);
	border-bottom: var(--cpe-hairline);
	transition: height 0.35s ease;
}

/* Une fois collé, l'en-tête se resserre. Redéfinir les deux variables suffit :
   la hauteur, le logo et le rembourrage du menu plein écran suivent. */
.cpe-header.is-stuck {
	--cpe-header-h: var(--cpe-header-h-stuck);
	--cpe-logo-h: var(--cpe-logo-h-stuck);
}

.cpe-header__inner {
	display: flex;
	align-items: center;
	height: 100%;
	padding-left: var(--cpe-gutter);
	padding-right: var(--cpe-gutter-right);
}

.cpe-header__logo {
	display: block;
	flex: none;
	/* Le logo garde son rapport d'origine (105.54 × 83.412). */
	height: var(--cpe-logo-h);
	width: calc(var(--cpe-logo-h) * 105.54 / 83.412);
	transition: height 0.35s ease, width 0.35s ease;
}

.cpe-header__logo img,
.cpe-header__logo svg {
	display: block;
	width: 100%;
	height: 100%;
}

.cpe-header__nav {
	display: flex;
	align-items: center;
	/* v05 : liens à x = 875 / 989 / 1128, burger à 1289. Les écarts de la
	   maquette (49, 44, 47) sont posés à la main : 46.7px partout donnent les
	   mêmes positions à 2px près. */
	gap: calc(46.7 * var(--u));
	margin-left: auto;
}

.cpe-nav-link {
	font-size: var(--cpe-fs-body);
	font-weight: 400;
	line-height: calc(22.8 * var(--u));
	color: var(--cpe-beige);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.25s ease;
}

.cpe-nav-link:hover,
.cpe-nav-link:focus-visible {
	color: var(--cpe-jaune);
}

.cpe-header__cta {
	flex: none;
	margin-left: calc(48 * var(--u));
}

/* Sélecteur de langue (FR / EN) : même style que les liens, au même écart
   (voir includes/i18n.php). Hors maquette : les liens se décalent d'autant
   vers la gauche. */
.cpe-header__lang {
	flex: none;
	margin-left: calc(46.7 * var(--u));
	font-weight: 500;
}

/* Le lien de langue ouvre la rangée du bas du menu plein écran, séparé des
   réseaux. */
.cpe-menu__lang {
	margin-right: auto;
}

/* Reprend la géométrie du SVG exporté (boîte 26 × 14, trois traits de 1px
   à y = 0.5, 7 et 13.5). Rendu en CSS et non en <img> pour pouvoir animer
   l'ouverture en croix. */
.cpe-burger {
	flex: none;
	display: block;
	/* Reste cliquable au dessus du panneau pour pouvoir le refermer. */
	position: relative;
	z-index: 130;
	width: calc(26 * var(--u));
	height: calc(15 * var(--u));
	/* v05 : sans bouton, le burger suit le dernier lien au même écart que les
	   liens entre eux ; derrière le bouton, il n'en garde que 36. */
	margin-left: calc(46.7 * var(--u));
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.cpe-header__cta + .cpe-burger {
	margin-left: calc(36 * var(--u));
}

.cpe-burger span {
	display: block;
	height: 1px;
	background-color: var(--cpe-beige);
	transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

/* Sur le rouge du menu ouvert, la croix passe en noir comme les liens. */
.cpe-burger[aria-expanded='true'] span {
	background-color: #000;
}

.cpe-burger span + span {
	margin-top: calc(6 * var(--u));
}

.cpe-burger[aria-expanded='true'] span:nth-child(1) {
	transform: translateY(calc(7 * var(--u))) rotate(45deg);
}
.cpe-burger[aria-expanded='true'] span:nth-child(2) {
	opacity: 0;
}
.cpe-burger[aria-expanded='true'] span:nth-child(3) {
	transform: translateY(calc(-7 * var(--u))) rotate(-45deg);
}

/* =========================================================================
   MENU PLEIN ÉCRAN — panneau rouge sous l'en-tête (maquette 1440 × 780)
   ========================================================================= */
.cpe-menu {
	position: fixed;
	/* Le panneau couvre tout l'écran, en-tête compris. Le rembourrage haut
	   remet les liens exactement où la maquette les place (soit sous la
	   hauteur d'en-tête), tout en masquant logo, navigation et bouton. */
	inset: 0;
	z-index: 120;
	display: flex;
	flex-direction: column;
	padding: var(--cpe-header-h) var(--cpe-menu-gutter) 0;
	background-color: var(--cpe-rouge);
	color: #000;
	overflow-y: auto;
	overscroll-behavior: contain;

	/* État fermé : retiré du flux d'accessibilité et non cliquable. */
	visibility: hidden;
	opacity: 0;
	transform: translateY(calc(-12 * var(--u)));
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

.cpe-menu.is-open {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}

.cpe-menu__list {
	margin: 0;
	padding: calc(9 * var(--u)) 0 0;
	list-style: none;
}

.cpe-menu__item {
	border-bottom: 1px solid #000;
}

.cpe-menu__link {
	display: block;
	padding: calc(24 * var(--u)) 0 calc(29 * var(--u));
	font-size: var(--cpe-fs-display);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: calc(-3 * var(--u));
	color: #000;
	text-decoration: none;
	transition: padding-left 0.3s ease, color 0.3s ease;
}

.cpe-menu__link:hover,
.cpe-menu__link:focus-visible {
	padding-left: calc(24 * var(--u));
	color: var(--cpe-beige);
}

.cpe-menu__social {
	display: flex;
	justify-content: flex-end;
	gap: calc(40 * var(--u));
	margin-top: auto;
	padding: calc(40 * var(--u)) 0 calc(37 * var(--u));
}

.cpe-menu__social a {
	font-size: var(--cpe-fs-body);
	font-weight: 400;
	color: #000;
	text-decoration: none;
	text-transform: capitalize;
	transition: color 0.25s ease;
}

.cpe-menu__social a:hover,
.cpe-menu__social a:focus-visible {
	color: var(--cpe-beige);
}

/* Le défilement de la page est bloqué tant que le menu est ouvert. */
body.cpe-menu-open {
	overflow: hidden;
}

/* =========================================================================
   HÉROS — 697px, deux colonnes, puis 53px de bleu avant la bande beige
   ========================================================================= */
.cpe-hero {
	/* Le héros doit passer devant le manifeste, comme le bandeau défilant qui
	   le suit : sans `z-index`, il n'est pas positionné et les photos du
	   manifeste — remontées par le balayage bien au dessus de leur bande — lui
	   passeraient par dessus en sortant du cadre. La valeur reste sous celle de
	   l'en-tête (100), qui doit rester au premier plan. */
	position: relative;
	z-index: 3;
	overflow: hidden;
	background-color: var(--cpe-bleu);
	/* La maquette laisse 53px de bleu sous le héros, avant la bande beige. */
	padding-bottom: calc(53 * var(--u));
}

.cpe-hero__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	min-height: calc(697 * var(--u));
	padding: calc(70 * var(--u)) var(--cpe-gutter) 0;
}

.cpe-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(35 * var(--u));
	/* La colonne est calée sur la largeur du titre ; sa marge négative
	   (`--cpe-hero-gap`) rend à l'illustration sa largeur de maquette. */
	flex: none;
	width: calc(557 * var(--u));
	margin-right: var(--cpe-hero-gap);
	padding-top: calc(30 * var(--u));
	position: relative;
	z-index: 2;
}

.cpe-hero__title {
	width: calc(557 * var(--u));
	max-width: 100%;
	/* Boîte de texte de la maquette (347px) : ses quatre lignes n'en occupent
	   que 340, et le sous-titre se place d'après la boîte. */
	min-height: calc(347 * var(--u));
}

/* La maquette resserre l'interligne sur la seconde moitié du titre.
   Les deux moitiés doivent être des blocs : sur une span en ligne, la hauteur
   de ligne du bloc parent ferait plancher et le resserrement serait ignoré. */
.cpe-hero__title .cpe-hero__title-a,
.cpe-hero__title .cpe-hero__title-b {
	display: block;
}

.cpe-hero__title .cpe-hero__title-a {
	line-height: 0.9;
}

.cpe-hero__title .cpe-hero__title-b {
	line-height: 0.8;
}

.cpe-hero__text {
	width: calc(530 * var(--u));
	max-width: 100%;
}

/* L'illustration occupe la place restante, plafonnée à sa taille de maquette. */
.cpe-hero__illustration {
	flex: 1 1 auto;
	width: auto;
	max-width: calc(738.735 * var(--u));
	aspect-ratio: 738.735 / 584;
	height: auto;
	position: relative;
	z-index: 1;
}

.cpe-hero__illustration img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* =========================================================================
   BANDEAU DÉFILANT — 107px de bleu, filet beige en pied
   ========================================================================= */
.cpe-marquee {
	position: relative;
	z-index: 3;
	overflow: hidden;
	/* La bande beige du manifeste touche directement le bleu ; le filet
	   sépare le bandeau de la bande jaune qui suit. */
	height: calc(107 * var(--u));
	background-color: var(--cpe-bleu);
	border-bottom: var(--cpe-hairline);
	display: flex;
	align-items: center;
}

.cpe-marquee__track {
	display: flex;
	flex: none;
	align-items: center;
	white-space: nowrap;
	animation: cpe-marquee-scroll var(--cpe-marquee-duration, 45s) linear infinite;
	will-change: transform;
}

.cpe-marquee:hover .cpe-marquee__track {
	animation-play-state: paused;
}

.cpe-marquee__item {
	flex: none;
	padding-right: calc(24 * var(--u));
	font-size: var(--cpe-fs-row);
	font-weight: 200;
	line-height: 0.9;
	letter-spacing: calc(-1.6818 * var(--u));
	color: var(--cpe-beige);
}

.cpe-marquee__item :where(b, strong) {
	font-weight: 700;
}

@keyframes cpe-marquee-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cpe-marquee__track {
		animation: none;
	}
}

/* =========================================================================
   MANIFESTE — bande beige, 915px, une photo et la bulle du chiffre clé
   ========================================================================= */
.cpe-manifeste {
	position: relative;
	/* La bulle rouge déborde de 43px sur la bande jaune qui suit. */
	z-index: 2;
	min-height: calc(915 * var(--u));
	background-color: var(--cpe-beige);
}

/* Le décalage vertical porte sur le texte et non sur la section : le canevas
   doit rester calé sur le haut de la section, car les photos y sont
   positionnées en absolu avec les coordonnées de la maquette. */
.cpe-manifeste__copy {
	position: relative;
	z-index: 2;
	width: calc(1034 * var(--u));
	max-width: 100%;
	margin-left: var(--cpe-gutter);
	padding-top: calc(75 * var(--u));
}

/* Paragraphe secondaire, aligné sur le paragraphe (x = 100, y = 1457). */
.cpe-manifeste__aside {
	width: calc(522 * var(--u));
	max-width: 100%;
	margin: calc(55 * var(--u)) 0 0;
	font-size: var(--cpe-fs-sub);
	font-weight: 400;
	line-height: 1;
	color: var(--cpe-rouge);
}

.cpe-manifeste__cta {
	margin-top: calc(39 * var(--u));
}

/* Photo et bulle positionnées comme dans la maquette (coordonnées / 1440).
   La photo passe devant la bulle, comme dans l'ordre des calques. */
.cpe-manifeste__photo {
	position: absolute;
	z-index: 4;
	left: calc(1049 * var(--u));
	top: calc(210 * var(--u));
	width: calc(284 * var(--u));
	height: calc(360.726 * var(--u));
	pointer-events: none;
}

/* Bulle : 556 × 440, même tracé que les bulles 2 et 3 des chiffres. Le texte
   se mesure en cqw pour suivre la bulle, y compris sur mobile. */
.cpe-manifeste__stat {
	position: absolute;
	z-index: 3;
	left: calc(737 * var(--u));
	top: calc(518 * var(--u));
	width: calc(556 * var(--u));
	height: calc(439.787 * var(--u));
	container-type: inline-size;
}

.cpe-manifeste__blob {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* Texte à (97, 90), 408px de large. */
.cpe-manifeste__stat-text {
	position: absolute;
	left: 17.446%;
	top: 20.464%;
	width: 73.381%;
	margin: 0;
	font-size: calc(4000cqw / 556);
	font-weight: 400;
	line-height: 1;
	color: var(--cpe-beige);
}

.cpe-manifeste__stat-text :where(strong, b) {
	font-weight: 700;
	color: var(--cpe-jaune);
}

/* =========================================================================
   ACTIONS (« Comment? ») — bande rouge, 167.25px par ligne (669px pour les
   quatre lignes de la v05), filets beiges intérieurs.
   Chaque ligne ouvre un panneau pleine largeur (voir plus bas).
   ========================================================================= */
/* La liste et les panneaux partagent la même cellule de grille : un panneau
   ouvert recouvre la bande, et la section prend la hauteur du plus haut des
   deux — rien ne bouge autour à l'ouverture. `--cpe-actions-rows` (nombre de
   lignes) est posé par l'élément. */
.cpe-actions {
	--cpe-actions-h: calc(var(--cpe-actions-rows, 4) * 167.25 * var(--u));
	position: relative;
	z-index: 1;
	display: grid;
	min-height: var(--cpe-actions-h);
	background-color: var(--cpe-rouge);
}

.cpe-actions > * {
	grid-area: 1 / 1;
}

.cpe-actions__inner {
	display: flex;
	align-items: stretch;
	min-height: var(--cpe-actions-h);
}

.cpe-actions__copy {
	display: flex;
	flex-direction: column;
	/* 35px dans la maquette, mais mesurés depuis une boîte de titre de 70px
	   alors que la ligne en fait 90 : 15px rendent la même position. */
	gap: calc(15 * var(--u));
	width: calc(629 * var(--u));
	flex: none;
	padding: calc(79 * var(--u)) calc(41 * var(--u)) calc(30 * var(--u)) var(--cpe-gutter);
}

.cpe-actions__title {
	width: calc(557 * var(--u));
	max-width: 100%;
}

.cpe-actions__list {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Les filets sont des pseudo-éléments et non des bordures : à l'ouverture
   d'un panneau ils se retirent (`--cpe-actions-lines` de 1 à 0), le vertical
   vers le haut, les horizontaux vers la droite. */
.cpe-actions__list::before,
.cpe-actions__item + .cpe-actions__item::before {
	content: '';
	position: absolute;
	z-index: 1;
	background-color: var(--cpe-beige);
	pointer-events: none;
}

.cpe-actions__list::before {
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	transform: scaleY(var(--cpe-actions-lines, 1));
	transform-origin: 50% 0;
}

.cpe-actions__item {
	position: relative;
	flex: 1 1 0;
	display: flex;
	align-items: center;
	min-height: calc(120 * var(--u));
}

.cpe-actions__item + .cpe-actions__item::before {
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	transform: scaleX(var(--cpe-actions-lines, 1));
	transform-origin: 100% 50%;
}

.cpe-actions__link {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	cursor: pointer;
	/* Le libellé le plus long (« Créez votre carré-doudou », 629px en graisse
	   de survol) doit tenir sur une ligne avec la flèche : 24px à droite. */
	padding-left: calc(44 * var(--u));
	padding-right: calc(24 * var(--u));
	font-size: var(--cpe-fs-row);
	font-weight: 200;
	line-height: 0.9;
	letter-spacing: calc(-1.6818 * var(--u));
	color: var(--cpe-beige);
	text-decoration: none;
	transition: background-color 0.25s ease, padding-left 0.25s ease;
}

/* `is-active` : la ligne cliquée garde son état survolé le temps de sortir,
   même quand le panneau qui s'ouvre passe sous le pointeur. */
.cpe-actions__link:hover,
.cpe-actions__link:focus-visible,
.cpe-actions__link.is-active {
	background-color: var(--cpe-jaune);
	color: var(--cpe-rouge);
	font-weight: 500;
}

/* Flèche révélée au survol. Elle reprend le tracé de `fleche.svg`, inséré en
   SVG plutôt qu'en <img> pour hériter de la couleur du lien (currentColor). */
.cpe-actions__arrow {
	flex: none;
	width: calc(54.447 * var(--u));
	height: calc(54.447 * var(--u));
	margin-left: calc(28 * var(--u));
	position: relative;
	opacity: 0;
	transform: translateX(calc(-16 * var(--u)));
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.cpe-actions__arrow svg {
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(40 * var(--u));
	height: calc(39 * var(--u));
	/* Le tracé exporté est la géométrie non pivotée : -45° la rend horizontale. */
	transform: translate(-50%, -50%) rotate(-45deg);
}

.cpe-actions__link:hover .cpe-actions__arrow,
.cpe-actions__link:focus-visible .cpe-actions__arrow,
.cpe-actions__link.is-active .cpe-actions__arrow {
	opacity: 1;
	transform: translateX(0);
}

/* Le passage en gras ne doit pas décaler le texte : on réserve la largeur.
   `pre-line` reprend dans la réserve le retour à la ligne saisi dans le
   libellé (« Participez à la / levée du drapeau »). */
.cpe-actions__label {
	display: inline-block;
}

.cpe-actions__label::after {
	content: attr(data-label);
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-weight: 500;
	white-space: pre-line;
	pointer-events: none;
}

/* --- Panneaux de détails ------------------------------------------------- */
/* Les positions viennent des quatre panneaux de la maquette (frame 731:1302 :
   titre à x = 47, texte à x = 618) ; leurs écarts et largeurs, propres à
   chacun, sont portés par des variables par rang. Le fond rouge masque la
   liste une fois le panneau ouvert (et sans script) ; le script le rend
   transparent le temps des transitions, pour que la liste s'efface et
   revienne à vue. */
.cpe-actions__panel {
	--cpe-panel-title-top: 79;
	--cpe-panel-title-w: 557;
	--cpe-panel-body-x: 618;
	--cpe-panel-body-top: 79;
	--cpe-panel-text-w: 686;
	--cpe-panel-highlight-w: 742;
	--cpe-panel-highlight-gap: 40;
	--cpe-panel-cta-gap: 28;
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	min-height: var(--cpe-actions-h);
	overflow: hidden;
	background-color: var(--cpe-rouge);
}

.cpe-actions__panel--1 {
	--cpe-panel-title-top: 49;
	--cpe-panel-body-top: 61;
	--cpe-panel-text-w: 525;
	--cpe-panel-cta-gap: 51;
}

.cpe-actions__panel--3 {
	--cpe-panel-body-top: 50;
	--cpe-panel-highlight-w: 536;
	--cpe-panel-highlight-gap: 47;
}

.cpe-actions__panel--4 {
	--cpe-panel-title-top: 57;
	--cpe-panel-title-w: 525;
	--cpe-panel-body-top: 57;
	--cpe-panel-text-w: 679;
	--cpe-panel-highlight-w: 570;
	--cpe-panel-highlight-gap: 28;
	--cpe-panel-cta-gap: 32;
}

.cpe-actions__panel[hidden] {
	display: none;
}

/* Sans script, l'ancre de la ligne ouvre le panneau et la croix le referme ;
   le script prend ensuite la main (et anime). */
.cpe-actions:not(.is-enhanced) .cpe-actions__panel:target {
	display: flex;
}

.cpe-actions__panel-main {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	flex: 1 0 auto;
	/* Les panneaux de la maquette font 502px, la bande rouge 669 depuis la
	   quatrième ligne : leur contenu est centré dans la hauteur, en gardant les
	   écarts de la maquette. La croix reste en haut. */
	padding-top: max(0px, (var(--cpe-actions-h) - 502 * var(--u)) / 2);
	padding-bottom: calc(20 * var(--u));
}

.cpe-actions__panel-title {
	flex: none;
	width: calc(var(--cpe-panel-title-w) * var(--u));
	margin: calc(var(--cpe-panel-title-top) * var(--u)) 0 0 calc(47 * var(--u));
	color: var(--cpe-beige);
}

.cpe-actions__panel-title:focus {
	outline: none;
}

.cpe-actions__panel-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: none;
	/* Le texte reste à x = 618 (597 dans les seconds panneaux) quelle que
	   soit la largeur du titre, posé à x = 47. */
	margin: calc(var(--cpe-panel-body-top) * var(--u)) 0 0 calc((var(--cpe-panel-body-x) - 47 - var(--cpe-panel-title-w)) * var(--u));
}

.cpe-actions__panel-text {
	width: calc(var(--cpe-panel-text-w) * var(--u));
	max-width: 100%;
	font-size: calc(32 * var(--u));
	font-weight: 400;
	line-height: 1;
	color: var(--cpe-beige);
}

.cpe-actions__panel-highlight {
	width: calc(var(--cpe-panel-highlight-w) * var(--u));
	max-width: 100%;
	font-size: var(--cpe-fs-sub);
	font-weight: 400;
	line-height: 1;
	color: var(--cpe-jaune);
}

.cpe-actions__panel-text + .cpe-actions__panel-highlight {
	margin-top: calc(var(--cpe-panel-highlight-gap) * var(--u));
}

.cpe-actions__panel-cta {
	margin-top: calc(var(--cpe-panel-cta-gap) * var(--u));
}

.cpe-actions__panel :where(.cpe-actions__panel-text, .cpe-actions__panel-highlight, .cpe-actions__band-text) :where(strong, b) {
	font-weight: 700;
}

.cpe-actions__panel :where(.cpe-actions__panel-text, .cpe-actions__panel-highlight) :where(a, u) {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
}

/* Croix dans une zone cliquable de 44px. La QA #9 l'avait descendue au niveau
   de la première ligne du texte ; demande du 2026-09-30 : elle remonte en haut
   de la bande, à 17px du bord comme dans la maquette (y = 17), en gardant sa
   colonne (bout du texte) et ses 24px. Même place dans les seconds panneaux. */
.cpe-actions__close {
	position: absolute;
	left: calc(1350 * var(--u));
	top: calc(7 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(44 * var(--u));
	height: calc(44 * var(--u));
	color: var(--cpe-beige);
	transition: transform 0.35s ease, color 0.25s ease;
}

.cpe-actions__close svg {
	width: calc(24 * var(--u));
	height: calc(24 * var(--u));
	overflow: visible;
	stroke-width: 1.2;
}

.cpe-actions__close:hover,
.cpe-actions__close:focus-visible {
	color: var(--cpe-jaune);
	transform: rotate(90deg);
}

.cpe-actions__close:focus-visible {
	outline: 1px solid var(--cpe-jaune);
	outline-offset: 2px;
}

/* Bande jaune (premier panneau) : 161px, qui monte du bas à l'ouverture. */
.cpe-actions__band {
	position: relative;
	z-index: 1;
	flex: none;
	height: calc(161 * var(--u));
	background-color: var(--cpe-jaune);
}

.cpe-actions__band-inner {
	display: flex;
	align-items: center;
	height: 100%;
	padding-left: calc(50 * var(--u));
}

.cpe-actions__band-text {
	flex: none;
	width: calc(875 * var(--u));
	font-size: var(--cpe-fs-sub);
	font-weight: 400;
	line-height: 1;
	letter-spacing: calc(-1 * var(--u));
	color: var(--cpe-rouge);
}

.cpe-actions__band-text :where(strong, b) {
	letter-spacing: 0;
}

.cpe-actions__band-ctas {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(12 * var(--u));
	margin-left: calc(19 * var(--u));
}

/* --- Seconds panneaux (bleus) --------------------------------------------- */
/* Ouverts par le bouton fléché d'un panneau, ils le recouvrent (même cellule
   de grille, un cran au dessus). Maquette : 789:7505 (textes et boutons) et
   809:7557 (carré-doudou) — titre de 85px à x = 47, contenu à x = 597. */
.cpe-actions__sub {
	--cpe-panel-title-top: 42;
	--cpe-panel-title-w: 516;
	--cpe-panel-body-x: 597;
	--cpe-panel-body-top: 53;
	--cpe-panel-text-w: 715;
	--cpe-panel-highlight-w: 764;
	z-index: 3;
	background-color: var(--cpe-bleu);
}

.cpe-actions__sub .cpe-actions__panel-title {
	font-size: calc(var(--cpe-fs-display) * 0.85);
	letter-spacing: calc(-2.55 * var(--u));
}

.cpe-actions__sub .cpe-actions__panel-highlight {
	letter-spacing: calc(-2 * var(--u));
}

.cpe-actions__sub--text .cpe-actions__panel-body > * + * {
	margin-top: calc(24 * var(--u));
}

/* Bouton sans lien (« Coming soon ») : visible mais inerte. */
.cpe-btn--soon {
	opacity: 0.55;
	cursor: default;
	pointer-events: none;
}

.cpe-actions__sub--text .cpe-actions__panel-body > .cpe-actions__sub-ctas {
	margin-top: calc(16 * var(--u));
}

.cpe-actions__sub-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: calc(12 * var(--u)) calc(15 * var(--u));
	/* Pas plus large que la colonne de texte (764px) : le corps du panneau se
	   règle sur son contenu, les libellés anglais l'élargissaient jusqu'à
	   sortir de l'écran au lieu de passer à la ligne. */
	max-width: calc(764 * var(--u));
}

/* Carré-doudou : la photo du carré (336px) et sa légende, puis la colonne
   des étapes à x = 979, coiffée du texte en jaune (x = 988, y = 92). */
.cpe-actions__sub--doudou {
	--cpe-panel-body-x: 596.5;
	--cpe-panel-body-top: 49;
	--cpe-panel-highlight-w: 294;
}

/* « Pour fabriquer votre carré : » : 43px sous le haut de la photo, à
   droite des ciseaux ; les étapes suivent à y = 193. */
.cpe-actions__sub--doudou .cpe-actions__panel-highlight {
	margin: calc(43 * var(--u)) 0 calc(21 * var(--u)) calc(9 * var(--u));
}

.cpe-actions__sub--doudou .cpe-actions__panel-body {
	flex-direction: row;
}

.cpe-actions__doudou {
	position: relative;
	flex: none;
	width: calc(336 * var(--u));
	margin: 0;
}

.cpe-actions__doudou-photo {
	position: relative;
	aspect-ratio: 1;
}

/* Le pointillé de la maquette (1.156px) souligne le bord à découper. */
.cpe-actions__doudou-photo::after {
	content: '';
	position: absolute;
	inset: 0;
	border: calc(1.156 * var(--u)) dashed var(--cpe-beige);
	pointer-events: none;
}

/* Les ciseaux (76.32 × 66.18, tournés d'un quart de tour) sont à cheval sur
   le bord droit, 47px sous le haut de la photo. Calés sur le bord droit pour
   le suivre quand la photo rétrécit. */
.cpe-actions__doudou-scissors {
	position: absolute;
	right: calc(-38.25 * var(--u));
	top: calc(52.04 * var(--u));
	width: calc(76.3226 * var(--u));
	height: calc(66.1792 * var(--u));
	transform: rotate(90deg);
}

.cpe-actions__doudou-caption {
	margin-top: calc(17 * var(--u));
	font-size: calc(20 * var(--u));
	line-height: 0.9;
	letter-spacing: calc(-0.6 * var(--u));
	text-align: center;
	color: var(--cpe-beige);
}

.cpe-actions__doudou-side {
	flex: none;
	width: calc(419 * var(--u));
	margin-left: calc(46.5 * var(--u));
}

/* Numéros dans la marge de 48px, comme la liste de la maquette. */
.cpe-actions__steps {
	margin: 0;
	padding: 0 0 0 calc(48 * var(--u));
	list-style: decimal;
	font-size: calc(32 * var(--u));
	font-weight: 400;
	line-height: 1;
	color: var(--cpe-beige);
}

.cpe-actions__steps li + li {
	margin-top: calc(19 * var(--u));
}

.cpe-actions__steps :where(strong, b) {
	font-weight: 700;
}

/* =========================================================================
   BANDE JAUNE — « Nous avons encore plus de ressources pour vous. »
   (maquette 789:7542, 1203px) : grand titre, puis deux blocs logo / texte /
   bouton. Logos centrés sur l'axe x = 260, textes à x = 501.
   ========================================================================= */
.cpe-bande {
	position: relative;
	background-color: var(--cpe-jaune);
}

.cpe-bande__inner {
	/* Pas de marge à droite : le second texte (841px, à x = 501) finit à
	   x = 1342, au delà de la gouttière de 100px. */
	padding: calc(31 * var(--u)) 0 calc(140 * var(--u)) var(--cpe-gutter);
}

/* Un seul bloc de texte dans la maquette : la question (40px) occupe la
   première ligne d'un titre de 100px, dont elle garde l'interligne (90px) et
   la ligne de base. Sa boîte reste donc à la taille du titre, seul son texte
   est réduit. L'approche de la maquette est de -3 % (-3px sur le titre,
   -1.2px sur la question). */
.cpe-bande__heading {
	width: calc(1095 * var(--u));
	max-width: 100%;
	margin: 0;
	font-size: var(--cpe-fs-display);
	font-weight: 400;
	line-height: 0.9;
	color: var(--cpe-rouge);
}

.cpe-bande__kicker {
	display: block;
	/* Plus large que le titre : la question anglaise (2.6.0) tient ainsi sur
	   une ligne, comme la française. Elle finit au plus à x = 1360. */
	width: calc(1260 * var(--u));
}

.cpe-bande__kicker > span {
	font-size: var(--cpe-fs-sub);
	letter-spacing: -0.03em;
}

.cpe-bande__title {
	display: block;
	color: var(--cpe-rouge);
}

/* Écarts de la maquette : 81px sous le titre, 71 entre les blocs. */
.cpe-bande__blocks {
	display: flex;
	flex-direction: column;
	gap: calc(71 * var(--u));
	margin-top: calc(81 * var(--u));
}

/* Largeur du texte, du logo et décalage vertical du logo sont propres à
   chaque bloc (`--1`, `--2`) : le logo Premières Nations, plus haut, remonte
   de 33px au dessus du texte. */
.cpe-bande__block {
	--cpe-bande-logo-w: 320;
	--cpe-bande-logo-y: 4;
	--cpe-bande-text-w: 762;
	display: grid;
	grid-template-columns: calc(320 * var(--u)) minmax(0, 1fr);
	column-gap: calc(81 * var(--u));
	align-items: start;
}

.cpe-bande__block--2 {
	--cpe-bande-logo-w: 257;
	--cpe-bande-logo-y: -33;
	--cpe-bande-text-w: 841;
}

.cpe-bande__logo {
	display: block;
	justify-self: center;
	width: calc(var(--cpe-bande-logo-w) * var(--u));
	height: auto;
	margin-top: calc(var(--cpe-bande-logo-y) * var(--u));
}

.cpe-bande__body {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.cpe-bande__text {
	width: calc(var(--cpe-bande-text-w) * var(--u));
	max-width: 100%;
	margin: 0;
	font-size: var(--cpe-fs-sub);
	font-weight: 400;
	line-height: 1;
	color: var(--cpe-rouge);
}

.cpe-bande__text :where(strong, b) {
	font-weight: 700;
}

.cpe-bande__text :where(a, u) {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
}

.cpe-bande__body .cpe-btn {
	margin-top: calc(29 * var(--u));
}

/* =========================================================================
   ÉNONCÉ — grand titre sur une bande de couleur (quatre bandes de la v04)
   Couleur : --jaune / --bleu / --beige. Disposition : --texte (constat,
   « J'ai pas d'enfant »), --photo (grande semaine), --blob (pourquoi).
   ========================================================================= */
.cpe-enonce {
	position: relative;
	min-height: calc(662 * var(--u));
	padding-bottom: calc(53 * var(--u));
	background-color: var(--cpe-enonce-bg);
}

.cpe-enonce--jaune {
	--cpe-enonce-bg: var(--cpe-jaune);
	--cpe-enonce-ink: var(--cpe-bleu);
	--cpe-enonce-accent: var(--cpe-bleu);
}

.cpe-enonce--bleu {
	--cpe-enonce-bg: var(--cpe-bleu);
	--cpe-enonce-ink: var(--cpe-beige);
	--cpe-enonce-accent: var(--cpe-jaune);
}

.cpe-enonce--beige {
	--cpe-enonce-bg: var(--cpe-beige);
	--cpe-enonce-ink: var(--cpe-rouge);
	--cpe-enonce-accent: var(--cpe-rouge);
}

/* Comme ailleurs, le rembourrage vertical porte sur le bloc de texte : le
   canevas reste calé sur le haut de la section, où le visuel est placé. */
.cpe-enonce__copy {
	position: relative;
	z-index: 1;
	padding: calc(69 * var(--u)) var(--cpe-gutter) 0;
}

.cpe-enonce__eyebrow {
	margin-bottom: calc(16 * var(--u));
	font-size: var(--cpe-fs-sub);
	font-weight: 400;
	line-height: 1;
	color: var(--cpe-enonce-accent);
}

/* Le titre est en graisse normale ; les mots en gras de la maquette sont
   saisis entre <strong>. */
.cpe-enonce__title {
	width: calc(1215 * var(--u));
	max-width: 100%;
	font-weight: 400;
	color: var(--cpe-enonce-ink);
}

.cpe-enonce__title :where(strong, b),
.cpe-enonce__text :where(strong, b) {
	font-weight: 700;
}

.cpe-enonce__body {
	position: relative;
	z-index: 1;
	width: calc(1059 * var(--u));
	max-width: calc(100% - 257 * var(--u));
	margin: calc(52 * var(--u)) 0 0 calc(257 * var(--u));
}

.cpe-enonce__text {
	font-size: var(--cpe-fs-sub);
	font-weight: 400;
	line-height: 1;
	color: var(--cpe-enonce-ink);
}

.cpe-enonce__text :where(a, u) {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
}

.cpe-enonce__cta {
	margin-top: calc(33 * var(--u));
}

/* Le bouton prend l'encre de la bande. */
.cpe-enonce--beige .cpe-enonce__cta,
.cpe-enonce--jaune .cpe-enonce__cta {
	border-color: var(--cpe-enonce-ink);
	color: var(--cpe-enonce-ink);
}

.cpe-enonce--beige .cpe-enonce__cta:hover,
.cpe-enonce--beige .cpe-enonce__cta:focus-visible,
.cpe-enonce--jaune .cpe-enonce__cta:hover,
.cpe-enonce--jaune .cpe-enonce__cta:focus-visible {
	background-color: var(--cpe-enonce-ink);
	color: var(--cpe-enonce-bg);
}

/* Le visuel passe par dessus le titre, comme dans la maquette. */
.cpe-enonce__visual {
	position: absolute;
	z-index: 2;
	pointer-events: none;
}

/* v05 : 750px (760 en v04), surtitre, titre et photo remontés de 4px. */
.cpe-enonce--photo {
	min-height: calc(750 * var(--u));
}

.cpe-enonce--photo .cpe-enonce__copy {
	padding-top: calc(59 * var(--u));
}

.cpe-enonce--photo .cpe-enonce__title {
	width: calc(1083 * var(--u));
}

.cpe-enonce--photo .cpe-enonce__visual {
	left: calc(892 * var(--u));
	top: calc(203 * var(--u));
	width: calc(380 * var(--u));
	height: calc(475 * var(--u));
}

.cpe-enonce--blob {
	min-height: calc(939 * var(--u));
}

/* Sans bouton (QA #31) : la hauteur de la maquette perd celle du bouton
   (marge 33 + bouton 55,6) pour garder le même blanc sous le texte. Le
   :where() laisse la règle mobile (min-height: 0) l'emporter. */
.cpe-enonce--blob:where(.cpe-enonce--sans-cta) {
	min-height: calc((939 - 33 - 55.6) * var(--u));
}

.cpe-enonce--blob .cpe-enonce__copy {
	padding-top: calc(115 * var(--u));
}

.cpe-enonce--blob .cpe-enonce__title {
	width: calc(699 * var(--u));
}

.cpe-enonce--blob .cpe-enonce__body {
	margin-top: calc(53 * var(--u));
}

/* Page anglaise : le titre tient en trois lignes au lieu de quatre, le texte
   remontait sous le visuel (qui finit à y = 551), et la question débordait
   dessous. La question passe sur deux lignes avant le visuel (x = 754) et le
   texte redescend à la hauteur française (y = 584). */
@media (min-width: 768px) {
	.cpe-lang-en .cpe-enonce--blob .cpe-enonce__eyebrow {
		max-width: calc(620 * var(--u));
	}

	.cpe-lang-en .cpe-enonce--blob .cpe-enonce__body {
		margin-top: calc(103 * var(--u));
	}
}

.cpe-enonce--blob .cpe-enonce__visual {
	left: calc(754 * var(--u));
	top: calc(107 * var(--u));
	width: calc(562 * var(--u));
	height: calc(444 * var(--u));
}

.cpe-enonce--blob .cpe-enonce__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* =========================================================================
   CALENDRIER — titre, onglet du mois, bande de jours ou mois complet
   ========================================================================= */
.cpe-calendrier {
	position: relative;
	background-color: var(--cpe-bleu);
	padding-top: calc(63 * var(--u));
}

.cpe-calendrier__head {
	padding: 0 var(--cpe-gutter);
}

.cpe-calendrier__title {
	width: calc(1215 * var(--u));
	max-width: 100%;
	font-weight: 400;
}

.cpe-calendrier__title :where(strong, b) {
	font-weight: 700;
}

/* v05 : le sous-titre se loge à droite de la dernière ligne du titre
   (« Québec. »), à x = 554 et 40px sous le haut de cette ligne. Les six lignes
   font 540px : il remonte donc de 50px. La place vient du texte saisi — un
   titre dont la dernière ligne dépasse 454px le chevaucherait. */
.cpe-calendrier__sub {
	width: calc(656 * var(--u));
	max-width: 100%;
	margin: calc(-50 * var(--u)) 0 0 calc(454 * var(--u));
}

/* Rangée de l'onglet : le mois se cale sur la deuxième cellule, celle du
   jour mis en avant. Les cellules font toutes 319px (le carrousel glisse
   d'une cellule à la fois), et non 285 pour la première comme la maquette. */
.cpe-calendrier__bar {
	display: flex;
	align-items: stretch;
	height: calc(50 * var(--u));
	margin-top: calc(19 * var(--u));
	padding-left: calc(319 * var(--u));
}

.cpe-calendrier__tab {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-width: calc(204 * var(--u));
	height: 100%;
	margin: 0;
	padding: 0 calc(16 * var(--u));
	background-color: var(--cpe-jaune);
	font-size: var(--cpe-fs-tab);
	font-weight: 200;
	line-height: 0.9;
	letter-spacing: calc(-1.0011 * var(--u));
	color: var(--cpe-bleu);
	text-align: center;
	white-space: nowrap;
}

/* Flèches de mois : de part et d'autre de l'onglet, en vue mois seulement. */
.cpe-calendrier__month-nav {
	width: calc(50 * var(--u));
	height: calc(50 * var(--u));
}

.cpe-calendrier__month-nav img {
	width: calc(28 * var(--u));
	height: calc(27.3 * var(--u));
}

.cpe-calendrier__month-nav--prev {
	position: absolute;
	top: 0;
	left: calc(261 * var(--u));
}

.cpe-calendrier__month-nav--next {
	margin-left: calc(8 * var(--u));
}

.cpe-calendrier:not([data-view='month']) .cpe-calendrier__month-nav {
	visibility: hidden;
}

/* Bascule semaine / mois : pastille jaune comme l'onglet, calée à droite sur
   la flèche « suivant ». Son libellé se déplie au survol, et reste affiché
   en vue mois pour indiquer le chemin du retour. */
.cpe-calendrier__toggle {
	display: inline-flex;
	align-items: center;
	flex: none;
	height: 100%;
	margin-left: auto;
	margin-right: calc(31 * var(--u));
	padding: 0 calc(12 * var(--u));
	border: 0;
	background-color: var(--cpe-jaune);
	font-family: inherit;
	font-size: var(--cpe-fs-btn);
	font-weight: 700;
	line-height: 1;
	color: var(--cpe-bleu);
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.cpe-calendrier__toggle[hidden] {
	display: none;
}

.cpe-calendrier__toggle:hover,
.cpe-calendrier__toggle:focus-visible {
	background-color: var(--cpe-beige);
}

.cpe-calendrier__toggle:focus-visible {
	outline: 2px solid var(--cpe-jaune);
	outline-offset: 2px;
}

.cpe-calendrier__icon {
	flex: none;
	width: calc(26 * var(--u));
	height: calc(26 * var(--u));
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cpe-calendrier__icon .is-dot {
	stroke-width: 2.6;
}

.cpe-calendrier__icon--strip,
.cpe-calendrier[data-view='month'] .cpe-calendrier__icon--month {
	display: none;
}

.cpe-calendrier[data-view='month'] .cpe-calendrier__icon--strip {
	display: block;
}

.cpe-calendrier__toggle-label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transition: max-width 0.35s ease, opacity 0.25s ease, margin 0.35s ease;
}

.cpe-calendrier__toggle:hover .cpe-calendrier__toggle-label,
.cpe-calendrier__toggle:focus-visible .cpe-calendrier__toggle-label,
.cpe-calendrier__toggle[aria-expanded='true'] .cpe-calendrier__toggle-label {
	max-width: calc(220 * var(--u));
	margin-left: calc(10 * var(--u));
	opacity: 1;
}

/* Bande pleine largeur : les filets vont de bord à bord, comme les autres
   séparateurs de sections, y compris au delà de 1440px. */
.cpe-calendrier__band {
	background-color: var(--cpe-bleu);
	border-top: var(--cpe-hairline);
	border-bottom: var(--cpe-hairline);
}

/* Carrousel : la fenêtre rogne, la piste glisse. `clip` plutôt que `hidden`
   empêche le navigateur de faire défiler la fenêtre quand un lien hors champ
   reçoit le focus, ce qui décalerait la piste. La position est portée par
   `--cpe-cal-index` (posée par PHP, puis par le script) : le rendu serveur
   ouvre donc déjà sur le bon jour, et le redimensionnement n'a rien à
   recalculer. */
.cpe-calendrier__viewport {
	overflow: hidden;
	overflow: clip;
	container-type: inline-size;
	touch-action: pan-y;
}

.cpe-calendrier__viewport[hidden] {
	display: none;
}

.cpe-calendrier__track {
	--cpe-cal-cell: calc(319 * var(--u));
	display: flex;
	min-height: calc(235 * var(--u));
	transform: translate3d(calc(var(--cpe-cal-index, 0) * var(--cpe-cal-cell) * -1), 0, 0);
	transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform;
}

.cpe-calendrier__track.is-instant {
	transition: none;
}

.cpe-calendrier__day {
	position: relative;
	flex: 0 0 var(--cpe-cal-cell);
	/* 12 + le filet de 1px de la bande : le numéro tombe à 13px du trait. */
	padding: calc(12 * var(--u)) calc(15 * var(--u)) calc(20 * var(--u));
	min-width: 0;
	/* Filet à droite : aucune ligne ne vient border le bord gauche de l'écran. */
	border-right: var(--cpe-hairline);
}

.cpe-calendrier__day.is-active {
	background-color: var(--cpe-jaune);
}

.cpe-calendrier__number {
	margin: 0;
	font-size: var(--cpe-fs-display);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: calc(-3 * var(--u));
	color: var(--cpe-beige);
}

.cpe-calendrier__day.is-active .cpe-calendrier__number {
	color: var(--cpe-bleu);
}

.cpe-calendrier__event {
	margin: calc(-3 * var(--u)) 0 0;
	max-width: calc(289 * var(--u));
	font-size: var(--cpe-fs-body);
	font-weight: 400;
	line-height: 1;
	color: var(--cpe-bleu);
}

.cpe-calendrier__event + .cpe-calendrier__event {
	margin-top: calc(12 * var(--u));
}

.cpe-calendrier__event a,
.cpe-calendrier__cell-event a,
.cpe-calendrier__agenda a {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
}

/* Période mise en avant (la grande semaine) : filet jaune en tête de cellule,
   rouge sur une cellule déjà jaune, et son nom sur le premier jour. */
.cpe-calendrier__day.is-period::before,
.cpe-calendrier__cell.is-period::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: calc(6 * var(--u));
	background-color: var(--cpe-jaune);
}

.cpe-calendrier__day.is-active.is-period::before,
.cpe-calendrier__cell.is-active.is-period::before {
	background-color: var(--cpe-rouge);
}

.cpe-calendrier__period {
	margin: calc(8 * var(--u)) 0 0;
	max-width: calc(200 * var(--u));
	font-size: var(--cpe-fs-btn);
	font-weight: 400;
	line-height: 1.1;
	color: var(--cpe-jaune);
}

.cpe-calendrier__day.is-active .cpe-calendrier__period {
	color: var(--cpe-bleu);
}

/* Aujourd'hui : pastille en haut à droite de la cellule. */
.cpe-calendrier__day.is-today::after,
.cpe-calendrier__cell.is-today::after {
	content: 'Aujourd’hui';
	position: absolute;
	top: calc(18 * var(--u));
	right: calc(15 * var(--u));
	padding: calc(5 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u));
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: var(--cpe-fs-small);
	line-height: 1;
	color: var(--cpe-beige);
	pointer-events: none;
}

.cpe-calendrier__day.is-active.is-today::after,
.cpe-calendrier__cell.is-active.is-today::after {
	color: var(--cpe-bleu);
}

/* Jour choisi dans la vue mois : bref halo à l'arrivée dans la bande. */
.cpe-calendrier__day.is-flash {
	animation: cpe-cal-flash 1.4s ease-out;
}

@keyframes cpe-cal-flash {
	0%,
	35% {
		box-shadow: inset 0 0 0 calc(4 * var(--u)) var(--cpe-beige);
	}
	100% {
		box-shadow: inset 0 0 0 0 transparent;
	}
}

/* Les flèches se placent dans la rangée de jours, mesurées sous le filet. */
.cpe-calendrier__nav {
	position: absolute;
	top: calc(168 * var(--u));
}

.cpe-calendrier__nav--prev {
	left: calc(31 * var(--u));
}

.cpe-calendrier__nav--next {
	left: calc(1355 * var(--u));
}

.cpe-calendrier[data-view='month'] .cpe-calendrier__navs {
	display: none;
}

/* Période seule (QA #14) : les jours de la période se partagent la largeur,
   tous visibles, sans glissement. L'onglet du mois passe sur la première
   colonne ; le filet jaune de la période, qui couvrirait tout, disparaît, et
   chaque jour affiche son nom sous le numéro. */
.cpe-calendrier--period .cpe-calendrier__bar {
	padding-left: 0;
}

.cpe-calendrier--period .cpe-calendrier__track {
	display: grid;
	grid-template-columns: repeat(var(--cpe-cal-days, 7), minmax(0, 1fr));
	transform: none;
	transition: none;
	will-change: auto;
}

.cpe-calendrier--period .cpe-calendrier__day:first-child {
	border-left: var(--cpe-hairline);
}

.cpe-calendrier--period .cpe-calendrier__day.is-period::before {
	display: none;
}

.cpe-calendrier__weekday {
	margin: calc(6 * var(--u)) 0 calc(14 * var(--u));
	font-size: var(--cpe-fs-btn);
	font-weight: 400;
	line-height: 1;
	color: var(--cpe-jaune);
}

.cpe-calendrier__day.is-active .cpe-calendrier__weekday {
	color: var(--cpe-bleu);
}

.cpe-calendrier--period .cpe-calendrier__event {
	margin-top: 0;
	font-size: calc(20 * var(--u));
	line-height: 1.1;
}

/* Plusieurs activités le même jour : l'écart de la bande défilante. */
.cpe-calendrier--period .cpe-calendrier__event + .cpe-calendrier__event {
	margin-top: calc(12 * var(--u));
}

/* La pastille « Aujourd'hui » descend en bas de la cellule, plus étroite. */
.cpe-calendrier--period .cpe-calendrier__day.is-today::after {
	top: auto;
	bottom: calc(15 * var(--u));
}

/* --- Vue mois ----------------------------------------------------------- */
.cpe-calendrier__month[hidden] {
	display: none;
}

.cpe-calendrier__weekdays,
.cpe-calendrier__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cpe-calendrier__weekdays {
	border-bottom: var(--cpe-hairline);
}

.cpe-calendrier__weekdays span {
	padding: calc(14 * var(--u)) calc(15 * var(--u)) calc(12 * var(--u));
	font-size: var(--cpe-fs-body);
	font-weight: 200;
	line-height: 1;
	color: var(--cpe-beige);
}

.cpe-calendrier__cell {
	position: relative;
	min-width: 0;
	min-height: calc(118 * var(--u));
	padding: calc(14 * var(--u)) calc(15 * var(--u)) calc(14 * var(--u));
	border-right: var(--cpe-hairline);
	border-bottom: var(--cpe-hairline);
	transition: background-color 0.2s ease;
}

.cpe-calendrier__cell:nth-child(7n) {
	border-right: 0;
}

.cpe-calendrier__grid > .cpe-calendrier__cell:nth-last-child(-n + 7) {
	border-bottom: 0;
}

.cpe-calendrier__cell:hover {
	background-color: rgba(249, 228, 198, 0.08);
}

.cpe-calendrier__cell.is-active {
	background-color: var(--cpe-jaune);
}

/* Le numéro est un bouton étiré sur toute la cellule : cliquer n'importe où
   ouvre ce jour dans la bande. Les liens des activités passent au dessus. */
.cpe-calendrier__cell-num {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: calc(48 * var(--u));
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: calc(-1.44 * var(--u));
	color: var(--cpe-beige);
	text-align: left;
	cursor: pointer;
}

.cpe-calendrier__cell-num::after {
	content: '';
	position: absolute;
	inset: 0;
}

.cpe-calendrier__cell-num:focus-visible {
	outline: none;
}

.cpe-calendrier__cell-num:focus-visible::after {
	outline: 2px solid var(--cpe-jaune);
	outline-offset: calc(-4 * var(--u));
}

.cpe-calendrier__cell.is-active .cpe-calendrier__cell-num,
.cpe-calendrier__cell.is-active .cpe-calendrier__cell-num:focus-visible::after {
	color: var(--cpe-bleu);
	outline-color: var(--cpe-bleu);
}

.cpe-calendrier__cell.is-outside .cpe-calendrier__cell-num {
	opacity: 0.35;
}

.cpe-calendrier__cell.is-today::after {
	top: calc(14 * var(--u));
	padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(3 * var(--u));
	font-size: calc(13 * var(--u));
}

.cpe-calendrier__cell-event {
	position: relative;
	z-index: 1;
	margin: calc(10 * var(--u)) 0 0;
	font-size: var(--cpe-fs-small);
	line-height: 1.1;
	color: var(--cpe-bleu);
}

.cpe-calendrier__legend {
	display: flex;
	align-items: center;
	gap: calc(12 * var(--u));
	margin: 0;
	padding: calc(14 * var(--u)) var(--cpe-gutter);
	border-top: var(--cpe-hairline);
	font-size: var(--cpe-fs-small);
	color: var(--cpe-beige);
}

.cpe-calendrier__legend::before {
	content: '';
	flex: none;
	width: calc(32 * var(--u));
	height: calc(6 * var(--u));
	background-color: var(--cpe-jaune);
}

/* Liste des activités du mois : utile sur mobile, où les cellules sont trop
   étroites pour afficher leur texte. */
.cpe-calendrier__agenda {
	display: none;
}

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

	.cpe-calendrier__day.is-flash {
		animation: none;
	}
}

/* =========================================================================
   CHIFFRES — « Aujourd'hui au Québec », bande bleue de 1496px
   Photos, puis titre, puis bulles : l'ordre des calques de la maquette.
   La v05 descend tout le contenu de 22px (et la bande de 4px).
   ========================================================================= */
.cpe-chiffres {
	position: relative;
	min-height: calc(1496 * var(--u));
	background-color: var(--cpe-bleu);
}

/* Page anglaise : la phrase de clôture fait cinq lignes au lieu de trois.
   La section s'allonge d'autant pour ne pas déborder sur la galerie (sous
   768px, la phrase est déjà dans le flux). */
@media (min-width: 768px) {
	.cpe-lang-en .cpe-chiffres {
		min-height: calc(1696 * var(--u));
	}
}

.cpe-chiffres__photo {
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.cpe-chiffres__photo--a {
	left: calc(805 * var(--u));
	top: calc(81 * var(--u));
	width: calc(284 * var(--u));
	height: calc(356 * var(--u));
}

.cpe-chiffres__photo--b {
	left: calc(147 * var(--u));
	top: calc(449 * var(--u));
	width: calc(248 * var(--u));
	height: calc(315 * var(--u));
}

.cpe-chiffres__photo--c {
	left: calc(837 * var(--u));
	top: calc(752 * var(--u));
	width: calc(292 * var(--u));
	height: calc(371 * var(--u));
}

.cpe-chiffres__title {
	position: absolute;
	z-index: 2;
	left: calc(458 * var(--u));
	top: calc(411 * var(--u));
	width: calc(525 * var(--u));
	text-align: center;
}

.cpe-chiffres__stat {
	position: absolute;
	z-index: 3;
	/* Le texte se mesure en cqw : il suit la taille de la bulle, au pixel
	   près de la maquette sur ordinateur et proportionnellement sur mobile. */
	container-type: inline-size;
}

.cpe-chiffres__blob {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.cpe-chiffres__stat-text {
	position: absolute;
	margin: 0;
	font-weight: 400;
	line-height: 1;
	color: var(--cpe-beige);
}

.cpe-chiffres__stat-text :where(strong, b) {
	font-weight: 700;
}

/* Bulle 1 : 413 × 326, texte à (92, 48), 295px de large. */
.cpe-chiffres__stat--1 {
	left: calc(202 * var(--u));
	top: calc(111 * var(--u));
	width: calc(413 * var(--u));
	height: calc(326 * var(--u));
}

.cpe-chiffres__stat--1 .cpe-chiffres__stat-text {
	left: 22.276%;
	top: 14.724%;
	width: 71.429%;
	font-size: calc(4000cqw / 413);
}

/* Bulles 2 et 3 : 488 × 386, textes de 368px. */
.cpe-chiffres__stat--2,
.cpe-chiffres__stat--3 {
	width: calc(488 * var(--u));
	height: calc(386 * var(--u));
}

.cpe-chiffres__stat--2 {
	left: calc(900 * var(--u));
	top: calc(426 * var(--u));
}

.cpe-chiffres__stat--3 {
	left: calc(281 * var(--u));
	top: calc(692 * var(--u));
}

.cpe-chiffres__stat--2 .cpe-chiffres__stat-text,
.cpe-chiffres__stat--3 .cpe-chiffres__stat-text {
	width: 75.41%;
	font-size: calc(4000cqw / 488);
}

.cpe-chiffres__stat--2 .cpe-chiffres__stat-text {
	left: 14.344%;
	top: 26.425%;
}

.cpe-chiffres__stat--3 .cpe-chiffres__stat-text {
	left: 21.311%;
	top: 24.093%;
}

.cpe-chiffres__closing {
	position: absolute;
	z-index: 2;
	left: var(--cpe-gutter);
	top: calc(1173 * var(--u));
	width: calc(1037 * var(--u));
	margin: 0;
	font-size: var(--cpe-fs-display);
	font-weight: 400;
	line-height: 1;
	color: var(--cpe-jaune);
}

/* =========================================================================
   GALERIE — mini-manif : bande de photos (389px) entre deux filets
   ========================================================================= */
.cpe-galerie {
	position: relative;
	background-color: var(--cpe-bleu);
}

.cpe-galerie__band {
	position: relative;
	height: calc(389 * var(--u));
}

/* Les filets passent par dessus les photos, comme dans la maquette. */
.cpe-galerie__band::before,
.cpe-galerie__band::after {
	content: '';
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	height: 1px;
	background-color: var(--cpe-beige);
	pointer-events: none;
}

.cpe-galerie__band::before {
	top: 0;
}

.cpe-galerie__band::after {
	bottom: 0;
}

.cpe-galerie__viewport {
	height: 100%;
	overflow: hidden;
	overflow: clip;
	container-type: inline-size;
	touch-action: pan-y;
}

/* La photo d'indice `--cpe-galerie-index` est centrée (x = 561 à 1440). */
.cpe-galerie__track {
	--cpe-galerie-cell: calc(319 * var(--u));
	--cpe-galerie-gap: calc(20 * var(--u));
	display: flex;
	gap: var(--cpe-galerie-gap);
	height: 100%;
	transform: translate3d(
		calc(
			50cqw - var(--cpe-galerie-cell) / 2 - var(--cpe-galerie-index, 0) *
				(var(--cpe-galerie-cell) + var(--cpe-galerie-gap))
		),
		0,
		0
	);
	transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform;
}

.cpe-galerie__track.is-instant {
	transition: none;
}

.cpe-galerie__item {
	flex: 0 0 var(--cpe-galerie-cell);
	height: 100%;
}

.cpe-galerie__navs {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.cpe-galerie__nav {
	position: absolute;
	z-index: 3;
	top: calc(311 * var(--u));
	pointer-events: auto;
}

.cpe-galerie__nav--prev {
	left: calc(31 * var(--u));
}

.cpe-galerie__nav--next {
	left: calc(1355 * var(--u));
}

/* Pas assez de photos pour défiler (voir initGalerie) : les photos d'origine
   se posent au centre, sans copies ni flèches. */
.cpe-galerie.is-static .cpe-galerie__track {
	justify-content: center;
	transform: none;
}

.cpe-galerie.is-static .cpe-galerie__item[aria-hidden='true'],
.cpe-galerie.is-static .cpe-galerie__navs {
	display: none;
}

.cpe-galerie__caption {
	max-width: calc(393 * var(--u));
	margin: 0 auto;
	padding: calc(31 * var(--u)) 0;
	font-size: var(--cpe-fs-body);
	font-weight: 400;
	line-height: 1;
	color: var(--cpe-jaune);
	text-align: center;
}

.cpe-galerie__caption a {
	color: inherit;
}

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

/* =========================================================================
   PIED DE PAGE — 271px, deux rangées
   ========================================================================= */
.cpe-footer {
	background-color: var(--cpe-bleu);
	border-top: var(--cpe-hairline);
}

.cpe-footer__top {
	border-bottom: var(--cpe-hairline);
}

.cpe-footer__top-inner {
	display: flex;
	align-items: center;
	min-height: calc(96.5 * var(--u));
}

.cpe-footer__nav {
	display: flex;
	align-items: center;
	flex: none;
	width: calc(712 * var(--u));
	/* v05 : liens à x = 100 / 206 / 343. */
	gap: calc(41.5 * var(--u));
	padding-left: var(--cpe-gutter);
	border-right: var(--cpe-hairline);
	align-self: stretch;
}

.cpe-footer__cta {
	margin-left: calc(-5 * var(--u));
}

.cpe-footer__social {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	/* v04 : les réseaux s'étalent du x = 749 à la gouttière droite (1315). */
	justify-content: space-between;
	padding-left: calc(37 * var(--u));
	padding-right: var(--cpe-gutter-right);
}

.cpe-footer__social a {
	font-size: var(--cpe-fs-body);
	font-weight: 400;
	color: var(--cpe-beige);
	text-decoration: none;
	text-transform: capitalize;
	transition: color 0.25s ease;
}

.cpe-footer__social a:hover,
.cpe-footer__social a:focus-visible {
	color: var(--cpe-jaune);
}

.cpe-footer__bottom {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: calc(29 * var(--u)) var(--cpe-gutter) calc(61 * var(--u));
}

.cpe-footer__logo {
	display: block;
	width: calc(105.54 * var(--u));
	height: calc(83.412 * var(--u));
	opacity: 0.3;
}

.cpe-footer__logo img {
	display: block;
	width: 100%;
	height: 100%;
}

.cpe-footer__legal,
.cpe-footer__copyright {
	margin: 0;
	font-size: var(--cpe-fs-small);
	font-weight: 400;
	color: var(--cpe-beige-30);
}

.cpe-footer__legal {
	justify-self: center;
	text-align: center;
	color: var(--cpe-beige-30);
	text-decoration: underline;
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
}

.cpe-footer__legal:hover,
.cpe-footer__legal:focus-visible {
	color: var(--cpe-beige);
}

.cpe-footer__copyright {
	justify-self: end;
	text-align: right;
}

/* =========================================================================
   TABLETTE — la mise en page reste proportionnelle, on libère seulement
   les hauteurs fixes pour éviter les chevauchements de texte.
   ========================================================================= */
@media (max-width: 991px) {
	.cpe-header__nav,
	.cpe-header__cta {
		display: none;
	}

	.cpe-burger {
		margin-left: auto;
	}

	/* Sans la navigation, le lien de langue reste visible à côté du burger. */
	.cpe-header__lang {
		margin-left: auto;
	}

	.cpe-header__lang ~ .cpe-burger {
		margin-left: calc(40 * var(--u));
	}
}

/* =========================================================================
   MOBILE — sous 768px la maquette n'existe pas : on repasse en flux vertical
   avec une échelle typographique propre.
   ========================================================================= */
@media (max-width: 767px) {
	:root {
		--u: 1px;

		--cpe-fs-display: 48px;
		--cpe-fs-lead: 30px;
		--cpe-fs-row: 30px;
		--cpe-fs-sub: 22px;
		--cpe-fs-tab: 20px;
		--cpe-fs-body: 18px;
		--cpe-fs-btn: 15px;
		--cpe-fs-small: 14px;

		--cpe-gutter: 20px;
		--cpe-gutter-right: 20px;
		--cpe-menu-gutter: 20px;
		--cpe-header-h: 72px;
		--cpe-header-h-stuck: 58px;
		--cpe-logo-h: 52px;
		--cpe-logo-h-stuck: 38px;
	}

	/* Menu plein écran : les trois liens se resserrent et les réseaux sociaux
	   passent à la ligne plutôt que de déborder. */
	.cpe-menu__link {
		padding: 18px 0 20px;
	}

	.cpe-menu__link:hover,
	.cpe-menu__link:focus-visible {
		padding-left: 0;
	}

	.cpe-menu__social {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 18px;
		padding: 32px 0 28px;
	}

	.cpe-display {
		letter-spacing: -1px;
	}

	/* Les retours à la ligne des titres sont calés sur la largeur de la
	   maquette ; sur mobile ils isoleraient des mots. Le saut de ligne saisi
	   reste un espace, le titre se recompose librement. */
	.cpe-display br {
		display: none;
	}

	.cpe-canvas {
		max-width: none;
	}

	/* En-tête */


	.cpe-burger {
		width: 26px;
		height: 13px;
	}

	.cpe-burger span + span {
		margin-top: 5px;
	}

	/* Héros */
	.cpe-hero {
		padding-bottom: 0;
	}

	.cpe-hero__inner {
		flex-direction: column;
		min-height: 0;
		padding: 40px var(--cpe-gutter) 48px;
	}

	.cpe-hero__copy {
		margin-right: 0;
		width: 100%;
		gap: 24px;
		padding-top: 0;
	}

	.cpe-hero__title,
	.cpe-hero__text {
		width: 100%;
	}

	.cpe-hero__title {
		min-height: 0;
	}

	.cpe-hero__illustration {
		width: 100%;
		height: auto;
		aspect-ratio: 738.735 / 584;
		margin-top: 32px;
	}

	/* Bandeau défilant */
	.cpe-marquee {
		height: 64px;
	}

	/* Manifeste */
	.cpe-manifeste {
		min-height: 0;
		padding: 48px var(--cpe-gutter);
	}

	.cpe-manifeste__copy {
		width: 100%;
		margin-left: 0;
		padding-top: 0;
	}

	.cpe-manifeste__cta {
		margin-top: 28px;
	}

	/* La photo à droite, la bulle en dessous qui la chevauche un peu. */
	.cpe-manifeste__visuals {
		display: flex;
		flex-direction: column;
		margin-top: 32px;
	}

	.cpe-manifeste__photo,
	.cpe-manifeste__stat {
		position: relative;
		left: auto;
		top: auto;
		height: auto;
	}

	.cpe-manifeste__photo {
		order: 1;
		align-self: flex-end;
		width: 52%;
		aspect-ratio: 284 / 360.726;
	}

	.cpe-manifeste__stat {
		order: 2;
		width: 96%;
		aspect-ratio: 556 / 439.787;
		margin-top: -12%;
	}

	.cpe-manifeste__aside {
		width: 100%;
		margin: 24px 0 0;
	}

	/* Comme pour les titres : le retour saisi (« repart / à la hausse ») est
	   calé sur la maquette et laisserait un mot seul sur sa ligne. */
	.cpe-manifeste__aside br {
		display: none;
	}

	/* Actions */
	.cpe-actions,
	.cpe-actions__inner {
		min-height: 0;
	}

	.cpe-actions__inner {
		flex-direction: column;
	}

	.cpe-actions__copy {
		width: 100%;
		padding: 48px var(--cpe-gutter) 32px;
		gap: 20px;
	}

	.cpe-actions__title {
		width: 100%;
	}

	.cpe-actions__list {
		border-top: var(--cpe-hairline);
	}

	.cpe-actions__list::before {
		display: none;
	}

	/* En colonne, la liste n'a plus de hauteur définie : les lignes doivent
	   se dimensionner sur leur contenu au lieu de partir d'une base nulle. */
	.cpe-actions__item {
		flex: 0 0 auto;
		min-height: 0;
	}

	.cpe-actions__link {
		padding: 22px var(--cpe-gutter);
	}

	.cpe-actions__link:hover,
	.cpe-actions__link:focus-visible {
		padding-left: var(--cpe-gutter);
	}

	.cpe-actions__panel {
		min-height: 0;
	}

	.cpe-actions__panel-main {
		flex-direction: column;
		padding: 48px var(--cpe-gutter) 40px;
	}

	.cpe-actions__panel-title {
		width: auto;
		margin: 0;
		padding-right: 40px;
	}

	.cpe-actions__panel-body {
		width: 100%;
		margin: 20px 0 0;
	}

	.cpe-actions__panel-text,
	.cpe-actions__panel-highlight {
		width: 100%;
	}

	.cpe-actions__panel-text {
		font-size: 20px;
	}

	.cpe-actions__panel-text + .cpe-actions__panel-highlight {
		margin-top: 20px;
	}

	.cpe-actions__panel-cta {
		margin-top: 24px;
	}

	.cpe-actions__close {
		left: auto;
		right: 6px;
		top: 6px;
		width: 44px;
		height: 44px;
	}

	.cpe-actions__close svg {
		width: 18px;
		height: 18px;
	}

	.cpe-actions__band {
		height: auto;
	}

	.cpe-actions__band-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		padding: 28px var(--cpe-gutter);
	}

	.cpe-actions__band-text {
		width: 100%;
		letter-spacing: 0;
	}

	.cpe-actions__band-ctas {
		margin-left: 0;
	}

	/* Seconds panneaux : titre, puis le contenu en colonne. */
	.cpe-actions__sub .cpe-actions__panel-title {
		letter-spacing: -1px;
	}

	.cpe-actions__sub .cpe-actions__panel-highlight {
		letter-spacing: 0;
	}

	.cpe-actions__sub--text .cpe-actions__panel-body > * + * {
		margin-top: 20px;
	}

	.cpe-actions__sub-ctas .cpe-btn {
		white-space: normal;
	}

	.cpe-actions__sub--doudou .cpe-actions__panel-body {
		flex-direction: column;
	}

	/* La photo rétrécit sur les petits écrans ; les ciseaux, calés sur son
	   bord droit, dépassent de 38px : on les garde dans l'écran. */
	.cpe-actions__doudou {
		width: min(336px, 100% - 40px);
		margin-top: 8px;
	}

	.cpe-actions__doudou-side {
		width: 100%;
		margin: 32px 0 0;
	}

	.cpe-actions__steps {
		padding-left: 32px;
		font-size: 20px;
	}

	.cpe-actions__steps li + li {
		margin-top: 12px;
	}

	.cpe-actions__steps br {
		display: none;
	}

	.cpe-actions__sub--doudou .cpe-actions__panel-highlight {
		margin: 0 0 16px;
	}

	/* Bande jaune : titre, puis chaque bloc en colonne (logo, texte, bouton). */
	.cpe-bande__inner {
		padding: 48px var(--cpe-gutter) 56px;
	}

	.cpe-bande__heading {
		width: auto;
	}

	.cpe-bande__kicker {
		width: auto;
		margin-bottom: 12px;
		font-size: var(--cpe-fs-sub);
		line-height: 1.1;
	}

	.cpe-bande__blocks {
		gap: 48px;
		margin-top: 40px;
	}

	.cpe-bande__block {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 20px;
	}

	.cpe-bande__logo {
		justify-self: start;
		width: calc(var(--cpe-bande-logo-w) * 0.55px);
		margin-top: 0;
	}

	.cpe-bande__body {
		grid-column: 1;
	}

	.cpe-bande__text {
		width: auto;
	}

	.cpe-bande__body .cpe-btn {
		margin-top: 20px;
		white-space: normal;
	}

	/* Énoncés */
	.cpe-enonce,
	.cpe-enonce--photo,
	.cpe-enonce--blob {
		min-height: 0;
		padding-bottom: 48px;
	}

	.cpe-enonce__copy,
	.cpe-enonce--photo .cpe-enonce__copy,
	.cpe-enonce--blob .cpe-enonce__copy {
		padding-top: 48px;
	}

	.cpe-enonce__eyebrow {
		margin-bottom: 12px;
	}

	.cpe-enonce__title,
	.cpe-enonce--photo .cpe-enonce__title,
	.cpe-enonce--blob .cpe-enonce__title {
		width: 100%;
	}

	.cpe-enonce__visual,
	.cpe-enonce--photo .cpe-enonce__visual,
	.cpe-enonce--blob .cpe-enonce__visual {
		position: relative;
		left: auto;
		top: auto;
		height: auto;
		margin: 28px var(--cpe-gutter) 0 auto;
	}

	.cpe-enonce--photo .cpe-enonce__visual {
		width: 62%;
		aspect-ratio: 380 / 475;
	}

	.cpe-enonce--blob .cpe-enonce__visual {
		width: calc(100% - 2 * var(--cpe-gutter));
		aspect-ratio: 562 / 444;
	}

	.cpe-enonce__body {
		width: auto;
		max-width: none;
		margin: 28px var(--cpe-gutter) 0;
	}

	.cpe-enonce__cta {
		margin-top: 24px;
	}

	/* Calendrier */
	.cpe-calendrier {
		padding-top: 48px;
	}

	.cpe-calendrier__sub {
		width: auto;
		margin: 12px 0 0;
	}

	/* L'onglet se cale sur la colonne du milieu (trois jours visibles). */
	.cpe-calendrier__bar {
		height: 40px;
		margin-top: 28px;
		padding-left: calc(100% / 3);
	}

	.cpe-calendrier__tab {
		min-width: 0;
		padding: 0 12px;
	}

	.cpe-calendrier__month-nav {
		width: 36px;
		height: 40px;
	}

	.cpe-calendrier__month-nav img {
		width: 20px;
		height: 19.5px;
	}

	.cpe-calendrier__month-nav--prev {
		left: calc(100% / 3 - 40px);
	}

	.cpe-calendrier__month-nav--next {
		margin-left: 4px;
	}

	.cpe-calendrier__toggle {
		margin-right: var(--cpe-gutter);
		padding: 0 9px;
	}

	.cpe-calendrier__icon {
		width: 22px;
		height: 22px;
	}

	/* Trop étroit pour le libellé : l'icône seule. */
	.cpe-calendrier__toggle .cpe-calendrier__toggle-label {
		display: none;
	}

	.cpe-calendrier__band .cpe-canvas {
		max-width: none;
	}

	.cpe-calendrier__track {
		--cpe-cal-cell: calc(100cqw / 3);
		min-height: 0;
	}

	.cpe-calendrier__day {
		padding: 12px 10px 16px;
	}

	.cpe-calendrier__event {
		max-width: none;
		margin-top: 6px;
		font-size: 15px;
	}

	.cpe-calendrier__period {
		font-size: 13px;
	}

	.cpe-calendrier__day.is-today::after {
		top: auto;
		bottom: 10px;
		right: 10px;
		font-size: 11px;
	}

	.cpe-calendrier__navs {
		display: flex;
		gap: 16px;
		justify-content: space-between;
		padding: 12px var(--cpe-gutter);
	}

	/* `relative` et non `static` : la flèche est positionnée en absolu à
	   l'intérieur du bouton et s'échapperait vers le canevas autrement. */
	.cpe-calendrier__nav {
		position: relative;
		top: auto;
		left: auto;
		width: 36px;
		height: 36px;
	}

	.cpe-calendrier__nav img {
		width: 26px;
		height: 25px;
	}

	.cpe-calendrier__weekdays span {
		padding: 8px 6px;
		font-size: 13px;
	}

	.cpe-calendrier__cell {
		min-height: 52px;
		padding: 7px 6px;
	}

	.cpe-calendrier__cell-num {
		font-size: 18px;
		letter-spacing: 0;
	}

	.cpe-calendrier__cell-event,
	.cpe-calendrier__cell.is-today::after {
		display: none;
	}

	/* Période seule : une ligne par jour, numéro à gauche. */
	.cpe-calendrier--period .cpe-calendrier__bar {
		padding-left: var(--cpe-gutter);
	}

	.cpe-calendrier--period .cpe-calendrier__track {
		grid-template-columns: minmax(0, 1fr);
	}

	.cpe-calendrier--period .cpe-calendrier__day {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr);
		column-gap: 12px;
		align-content: start;
		min-height: 64px;
		padding: 12px var(--cpe-gutter);
		border-right: 0;
		border-left: 0;
	}

	.cpe-calendrier--period .cpe-calendrier__day + .cpe-calendrier__day {
		border-top: var(--cpe-hairline);
	}

	.cpe-calendrier--period .cpe-calendrier__day:first-child {
		border-left: 0;
	}

	.cpe-calendrier--period .cpe-calendrier__number {
		grid-row: 1 / span 20;
		font-size: 40px;
		letter-spacing: -1px;
	}

	.cpe-calendrier--period .cpe-calendrier__weekday,
	.cpe-calendrier--period .cpe-calendrier__event {
		grid-column: 2;
	}

	.cpe-calendrier--period .cpe-calendrier__weekday {
		margin: 4px 0 8px;
		font-size: 15px;
	}

	.cpe-calendrier--period .cpe-calendrier__event {
		font-size: 15px;
	}

	.cpe-calendrier--period .cpe-calendrier__day.is-today::after {
		top: 14px;
		bottom: auto;
		right: var(--cpe-gutter);
	}

	/* Aujourd'hui : un anneau autour du numéro, faute de place. */
	.cpe-calendrier__cell.is-today .cpe-calendrier__cell-num {
		display: inline-block;
		padding: 3px 5px;
		border: 1px solid currentColor;
		border-radius: 999px;
	}

	.cpe-calendrier__legend {
		padding: 12px var(--cpe-gutter);
		font-size: 13px;
	}

	.cpe-calendrier__agenda {
		display: block;
		margin: 0;
		padding: 4px var(--cpe-gutter) 16px;
		border-top: var(--cpe-hairline);
		list-style: none;
	}

	.cpe-calendrier__agenda li {
		display: grid;
		grid-template-columns: 64px 1fr;
		gap: 12px;
		padding: 12px 0;
		font-size: 15px;
		line-height: 1.2;
		color: var(--cpe-beige);
	}

	.cpe-calendrier__agenda li + li {
		border-top: 1px solid rgba(249, 228, 198, 0.25);
	}

	.cpe-calendrier__agenda time {
		font-weight: 700;
		color: var(--cpe-jaune);
	}

	/* Chiffres : bulles et photos en flux, les bulles alternent à gauche et à
	   droite. Leur texte suit la bulle (cqw), il n'y a rien à redéfinir. */
	.cpe-chiffres {
		min-height: 0;
		padding: 48px var(--cpe-gutter);
	}

	.cpe-chiffres .cpe-canvas {
		display: flex;
		flex-direction: column;
	}

	.cpe-chiffres__title {
		position: static;
		order: -1;
		width: 100%;
	}

	.cpe-chiffres__stats {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-top: 28px;
	}

	.cpe-chiffres__stat,
	.cpe-chiffres__stat--2,
	.cpe-chiffres__stat--3 {
		position: relative;
		left: auto;
		top: auto;
		width: 88%;
		height: auto;
	}

	.cpe-chiffres__stat--1 {
		aspect-ratio: 413 / 326;
	}

	.cpe-chiffres__stat--2,
	.cpe-chiffres__stat--3 {
		aspect-ratio: 488 / 386;
	}

	.cpe-chiffres__stat--2 {
		align-self: flex-end;
	}

	.cpe-chiffres__photo {
		position: relative;
		left: auto;
		top: auto;
		width: 48%;
		height: auto;
		margin-top: 16px;
	}

	.cpe-chiffres__photo--a {
		aspect-ratio: 284 / 356;
		align-self: flex-end;
		order: 1;
	}

	.cpe-chiffres__photo--b {
		aspect-ratio: 248 / 315;
		order: 2;
		margin-top: -40%;
	}

	.cpe-chiffres__photo--c {
		display: none;
	}

	.cpe-chiffres__closing {
		position: static;
		order: 3;
		width: 100%;
		margin-top: 32px;
		font-size: 40px;
	}

	/* Galerie */
	.cpe-galerie__band {
		height: auto;
		aspect-ratio: auto;
	}

	.cpe-galerie__viewport {
		height: auto;
	}

	.cpe-galerie__track {
		--cpe-galerie-cell: 62cqw;
		--cpe-galerie-gap: 12px;
		height: auto;
	}

	.cpe-galerie__item {
		aspect-ratio: 319 / 389;
		height: auto;
	}

	.cpe-galerie__nav {
		top: auto;
		bottom: 12px;
		width: 40px;
		height: 40px;
	}

	.cpe-galerie__nav img {
		width: 28px;
		height: 27px;
	}

	.cpe-galerie__nav--prev {
		left: 12px;
	}

	.cpe-galerie__nav--next {
		left: auto;
		right: 12px;
	}

	.cpe-galerie__caption {
		max-width: none;
		padding: 24px var(--cpe-gutter);
	}

	/* Pied de page */
	.cpe-footer__top-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		min-height: 0;
		padding: 28px var(--cpe-gutter);
	}

	.cpe-footer__nav {
		width: 100%;
		flex-wrap: wrap;
		gap: 20px;
		padding-left: 0;
		border-right: 0;
	}

	.cpe-footer__cta {
		margin-left: 0;
	}

	.cpe-footer__social {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 18px;
		padding-left: 0;
		padding-right: 0;
	}

	.cpe-footer__bottom {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 18px;
		padding: 28px var(--cpe-gutter);
		text-align: center;
	}

	.cpe-footer__legal,
	.cpe-footer__copyright {
		justify-self: center;
		text-align: center;
	}
}