/* Bloc cnd/hero — signature §8 : photo pleine largeur assombrie, titre blanc centré. Racine
   scopée .cnd.cnd-hero (cf. canidelite-design-system.css, correctif post-QA scope défensif). */
.cnd.cnd-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 380px;
	max-height: 460px;
	border-radius: 20px;
	overflow: hidden;
	background: var(--surface-3);
	text-align: center;
	padding: var(--s-6);
}
.cnd.cnd-hero .cnd-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.cnd.cnd-hero .cnd-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--overlay);
	z-index: 1;
}
.cnd.cnd-hero .cnd-hero__content {
	position: relative;
	z-index: 2;
	max-width: 720px;
	color: var(--on-image);
}
.cnd.cnd-hero .cnd-hero__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(27px, 4vw, 44px);
	line-height: 1.1;
	color: var(--on-image);
	margin: 0 0 var(--s-3);
}
/* Groupes de tailles par univers (maquettes Claude Design).
   Correctif contre-QA : les sélecteurs étaient [data-branch="x"] .cnd-hero__title (0,2,0), battus
   systématiquement par la base .cnd.cnd-hero .cnd-hero__title (0,3,0) — le clamp par univers ne
   s'appliquait donc jamais. Remonté à .cnd.cnd-hero[data-branch="x"] .cnd-hero__title (0,4,0). */
.cnd.cnd-hero[data-branch="education"] .cnd-hero__title,
.cnd.cnd-hero[data-branch="reseau"] .cnd-hero__title {
	font-size: clamp(28px, 4.2vw, 46px);
	line-height: 1.1;
}
.cnd.cnd-hero[data-branch="sport"] .cnd-hero__title,
.cnd.cnd-hero[data-branch="aere"] .cnd-hero__title,
.cnd.cnd-hero[data-branch="dogwash"] .cnd-hero__title {
	font-size: clamp(30px, 4.6vw, 52px);
	line-height: 1.08;
}
.cnd.cnd-hero .cnd-hero__title .cnd-highlight {
	color: var(--on-image);
}
.cnd.cnd-hero .cnd-hero__subtitle {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--t-body);
	line-height: 1.5;
	margin: 0;
	color: var(--on-image);
	text-decoration: none;
}

/* ---------- Mise en page « scindé » (v0.5.0, maquette ACACED) : colonne texte + photo. Remet à plat
   ce que la mise en page « photo » pose sur la racine (centrage, hauteur, fond, rayon). ---------- */
.cnd.cnd-hero.cnd-hero--split {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--s-7);
	min-height: 0;
	max-height: none;
	border-radius: 0;
	overflow: visible;
	background: none;
	text-align: left;
	padding: 0;
	color: var(--ink);
}
@media (max-width: 899px) {
	.cnd.cnd-hero.cnd-hero--split {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-5);
	}
}
.cnd.cnd-hero.cnd-hero--split .cnd-hero__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-4);
	min-width: 0;
}
.cnd.cnd-hero.cnd-hero--split .cnd-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.cnd.cnd-hero.cnd-hero--split .cnd-hero__pills .cnd-chip {
	margin: 0;
}
/* Titre : le kit Elementor pose sa police et sa couleur sur h1 (0,1,1) — redéclarées à (0,3,1). */
.cnd.cnd-hero.cnd-hero--split h1.cnd-hero__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(28px, 3.6vw, var(--t-display));
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	margin: 0;
}
.cnd.cnd-hero.cnd-hero--split .cnd-hero__title .cnd-highlight {
	color: inherit;
}
.cnd.cnd-hero.cnd-hero--split .cnd-hero__updated,
.cnd.cnd-hero.cnd-hero--split .cnd-hero__reassurance {
	font-family: var(--font-body);
	font-size: var(--t-caption);
	line-height: 1.5;
	color: var(--ink-3);
	margin: 0;
}
.cnd.cnd-hero.cnd-hero--split .cnd-hero__updated {
	margin-top: calc(-1 * var(--s-2));
}
.cnd.cnd-hero.cnd-hero--split .cnd-hero__text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--t-body);
	line-height: 1.55;
	color: var(--ink-2);
	max-width: 65ch;
	margin: 0;
}
.cnd.cnd-hero.cnd-hero--split .cnd-hero__text a,
.cnd.cnd-hero.cnd-hero--split .cnd-hero__reassurance a {
	font-family: inherit;
	font-weight: 500;
	color: var(--brand-strong);
	text-decoration: underline;
}
.cnd.cnd-hero.cnd-hero--split .cnd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}
.cnd.cnd-hero.cnd-hero--split .cnd-hero__media {
	min-width: 0;
}
/* Photo : rayon --r-lg, cadrage 4:3 imposé (la place est réservée avant le chargement). */
.cnd.cnd-hero.cnd-hero--split .cnd-hero__image {
	position: static;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r-lg);
	z-index: auto;
}

/* Hero sans photo (v0.12.0, hub des centres) : une colonne, mesure de lecture. */
.cnd.cnd-hero.cnd-hero--split.cnd-hero--text {
	grid-template-columns: minmax(0, 1fr);
	max-width: 820px;
}

/* ---------- Mise en page « scindé », ajustée en v0.23.0 sur les maquettes Formation (ACACED,
   éducateur) : colonnes 420 / 340, photo à hauteur fixe de 380 px, H1 26 à 38 px, texte coupé à
   3 lignes en mobile (« Lire la suite », view.js), boutons pleine largeur en mobile. ---------- */
.cnd.cnd-hero.cnd-hero--split {
	grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr);
	gap: var(--s-6);
}
@media (max-width: 899px) {
	.cnd.cnd-hero.cnd-hero--split {
		grid-template-columns: minmax(0, 1fr);
	}
}
.cnd.cnd-hero.cnd-hero--split h1.cnd-hero__title {
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.15;
}
.cnd.cnd-hero.cnd-hero--split .cnd-hero__title + .cnd-hero__text {
	margin-top: calc(-1 * var(--s-2));
}
.cnd.cnd-hero.cnd-hero--split .cnd-hero__text {
	max-width: 60ch;
}
.cnd.cnd-hero.cnd-hero--split .cnd-hero__image {
	height: 380px;
	aspect-ratio: auto;
}
.cnd.cnd-hero.cnd-hero--split button.cnd-hero__more {
	display: inline-block;
	min-width: 0;
	min-height: 0;
	margin: calc(-1 * var(--s-2)) 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: var(--font-body);
	font-size: var(--t-small);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--brand-strong);
	cursor: pointer;
}
/* Visible dès le premier rendu (v0.26.0) : rendu caché puis révélé par view.js (différé par
   LiteSpeed), il poussait la photo en mobile — CLS 0,02 mesuré par Lighthouse (ACACED, éducateur).
   Le texte coupé fait plus de 180 caractères, il dépasse presque toujours 3 lignes ; view.js ne le
   masque que dans le cas contraire. Sans JavaScript, pas de coupe, donc pas de bouton. */
html:not(.cnd-js) .cnd.cnd-hero.cnd-hero--split button.cnd-hero__more,
.cnd.cnd-hero.cnd-hero--split button.cnd-hero__more[hidden] {
	display: none;
}
.cnd.cnd-hero.cnd-hero--split button.cnd-hero__more:hover {
	text-decoration: underline;
}
.cnd.cnd-hero.cnd-hero--split button.cnd-hero__more:focus-visible {
	outline: 2px solid var(--brand-strong);
	outline-offset: 2px;
}
@media (max-width: 899px) {
	html.cnd-js .cnd.cnd-hero.cnd-hero--split .cnd-hero__text[data-cnd-collapse]:not(.is-expanded) {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
	.cnd.cnd-hero.cnd-hero--split .cnd-hero__actions {
		width: 100%;
	}
	.cnd.cnd-hero.cnd-hero--split .cnd-hero__actions .cnd-btn {
		width: 100%;
	}
}
@media (min-width: 900px) {
	.cnd.cnd-hero.cnd-hero--split button.cnd-hero__more {
		display: none;
	}
}

/* ---------- Mise en page « immersive » (v0.23.0, maquettes Éducation, Sport, Centre aéré, Dog wash
   et leurs sous-pages). Carte photo sur toute la largeur de l'écran moins 20 px de chaque côté
   (marges négatives calculées sur 100vw, débordement coupé par overflow-x: clip sur le body), rayon
   20 px, voile --overlay ; contenu calé en bas, dans la largeur du gabarit (1200 px). La hauteur
   minimale vient de la page (--cnd-hero-min / --cnd-hero-min-m, render.php) : la place est réservée
   avant le chargement de la photo, posée en absolu (aucun décalage). ---------- */
.cnd.cnd-hero.cnd-hero--immersive {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-end;
	min-height: var(--cnd-hero-min, 520px);
	/* v0.33.6 : la hauteur suit le contenu au-delà du minimum de la maquette (jamais de texte coupé). */
	height: auto;
	max-height: none;
	margin-inline: calc(50% - 50vw + 20px);
	padding: 80px 24px 48px;
	border-radius: 20px;
	overflow: hidden;
	background: var(--ink);
	text-align: left;
	color: var(--on-image);
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__overlay {
	background: var(--overlay);
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	max-width: var(--cnd-site-width);
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}
/* Fil d'Ariane de Rank Math, en haut de la carte (28 px du bord, maquettes). v0.33.6 (recette du 05/11 : du
   texte sortait du hero) : il était posé en absolu, 52 px au-dessus du contenu ; sur deux ou trois lignes (sous-page
   au titre long, petit écran) il chevauchait le texte ou sortait de la carte. Il est désormais dans le flux, en tête
   de la colonne (margin-bottom: auto) : le contenu reste calé en bas, et quand la place manque la carte grandit
   au lieu de couper. Même rendu qu'avant quand tout tient. */
.cnd.cnd-hero.cnd-hero--immersive:has(> .cnd-hero__inner > .cnd-hero__breadcrumb) {
	padding-top: 28px;
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__breadcrumb {
	position: static;
	margin-bottom: auto;
	padding-bottom: var(--s-6);
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__breadcrumb p {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--t-caption);
	line-height: 1.5;
	color: rgba(255, 255, 255, .75);
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__breadcrumb a {
	font-family: inherit;
	font-size: inherit;
	/* v0.38.0 : jeton du design system (blanc 75 % hors jeton, relevé par le contrôle des liens). */
	color: var(--on-image);
	text-decoration: none;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__breadcrumb a:hover {
	color: var(--on-image);
	text-decoration: underline;
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__breadcrumb a:focus-visible {
	outline: 2px solid var(--on-image);
	outline-offset: 2px;
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__breadcrumb .separator {
	margin: 0 var(--s-1);
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__breadcrumb .last {
	color: var(--on-image);
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__eyebrow {
	margin: 0 0 var(--s-3);
	font-family: var(--font-body);
	font-size: var(--t-caption);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--brand);
}
.cnd.cnd-hero.cnd-hero--immersive h1.cnd-hero__title {
	max-width: 20ch;
	margin: 0 0 18px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(30px, 4.6vw, 52px);
	line-height: 1.08;
	letter-spacing: 0;
	text-transform: none;
	color: var(--on-image);
}
.cnd.cnd-hero.cnd-hero--immersive.cnd-hero--title-md h1.cnd-hero__title {
	max-width: 22ch;
	margin-bottom: var(--s-4);
	font-size: clamp(28px, 4.2vw, 46px);
	line-height: 1.1;
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__row {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 48px;
}
/* v0.33.6 : un mot long (titre de discipline, adresse) passe à la ligne au lieu de sortir de la carte. */
.cnd.cnd-hero.cnd-hero--immersive :is(h1.cnd-hero__title, .cnd-hero__text, .cnd-hero__eyebrow, .cnd-hero__breadcrumb p) {
	overflow-wrap: break-word;
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__copy {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	max-width: 62ch;
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__text {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--t-body);
	line-height: 1.55;
	color: rgba(255, 255, 255, .9);
}
.cnd.cnd-hero.cnd-hero--immersive.cnd-hero--title-md .cnd-hero__text {
	font-size: 15px;
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__text strong {
	font-weight: 600;
	color: var(--on-image);
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__text a {
	font-family: inherit;
	font-weight: 500;
	color: var(--on-image);
	text-decoration: underline;
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__actions {
	display: flex;
	flex: none;
	gap: 10px;
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__actions .cnd-btn {
	font-size: var(--t-small);
	padding: 14px 24px;
}
/* Bouton secondaire sur photo : contour blanc, survol plein blanc (maquette Sport). */
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__actions .cnd-btn--outline,
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__actions .cnd-btn--outline:focus {
	background: transparent;
	border-color: rgba(255, 255, 255, .7);
	color: var(--on-image);
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__actions .cnd-btn--outline:hover {
	background: var(--on-image);
	border-color: var(--on-image);
	color: var(--brand-strong);
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__actions .cnd-btn:focus-visible {
	outline: 2px solid var(--on-image);
	outline-offset: 2px;
}
@media (max-width: 899px) {
	.cnd.cnd-hero.cnd-hero--immersive {
		min-height: var(--cnd-hero-min-m, var(--cnd-hero-min, 540px));
		padding: 64px 20px 32px;
	}
	.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__inner {
		padding: 0;
	}
	.cnd.cnd-hero.cnd-hero--immersive:has(> .cnd-hero__inner > .cnd-hero__breadcrumb) {
		padding-top: 24px;
	}
	.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__breadcrumb {
		padding-bottom: 20px;
	}
	.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__row {
		flex-direction: column;
		align-items: stretch;
	}
	.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__copy {
		flex: none;
	}
	.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__text,
	.cnd.cnd-hero.cnd-hero--immersive.cnd-hero--title-md .cnd-hero__text {
		font-size: var(--t-small);
	}
	.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__actions {
		flex-direction: column;
	}
	.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__actions .cnd-btn {
		width: 100%;
	}
}

/* Pastilles sur la photo (v0.24.0, maquette Centre canin) : blanc translucide, bord blanc 35 %. */
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__pills--image {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}
.cnd.cnd-hero.cnd-hero--immersive .cnd-hero__pills--image li {
	margin: 0;
	padding: 5px 12px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .14);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--t-caption);
	line-height: 1.4;
	color: var(--on-image);
}