/* Bloc cnd/cta-band — signature §8. Racine scopée .cnd.cnd-cta-band (correctif post-QA). */
.cnd.cnd-cta-band {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 260px;
	border-radius: var(--r-lg);
	overflow: hidden;
	/* Décision Emmanuel (2026-10-14, reconfirmée contre-QA v0.2.6) : plus de couleur en dur
	   (#1B3B2E, hors palette) — sans photo, fond var(--brand-tint) de l'univers ambiant. La classe
	   .cnd-cta-band--photo (posée par render.php quand une image est présente) couvre ce fond avec
	   la photo. */
	background: var(--brand-tint);
	text-align: center;
	padding: var(--s-6);
}
.cnd.cnd-cta-band .cnd-cta-band__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.cnd.cnd-cta-band .cnd-cta-band__overlay {
	position: absolute;
	inset: 0;
	/* Contre-QA v0.2.6 (point 3) : override explicite de l'ancienne valeur maquette .62 par le
	   token --overlay commun (.55), pour uniformiser avec héro/cartes image. */
	background: var(--overlay);
	z-index: 1;
}
.cnd.cnd-cta-band .cnd-cta-band__content {
	position: relative;
	z-index: 2;
}
.cnd.cnd-cta-band .cnd-cta-band__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.15;
	/* Sans photo (fond clair var(--brand-tint)) : texte encre normale. */
	color: var(--ink);
	text-decoration: none;
	margin: 0 0 var(--s-4);
}
/* Avec photo : overlay sombre dessous, titre blanc pour rester lisible sur la photo assombrie.
   Le bouton primaire n'a pas besoin de variante ici : il garde son style normal (fond --brand /
   texte --brand-on) qu'il y ait une photo ou non. */
.cnd.cnd-cta-band.cnd-cta-band--photo .cnd-cta-band__title {
	color: var(--on-image);
}

/* ---------- v0.5.0 (maquette ACACED) : texte, bouton secondaire, disposition « ligne ». ---------- */
.cnd.cnd-cta-band .cnd-cta-band__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-4);
	max-width: 640px;
}
.cnd.cnd-cta-band .cnd-cta-band__copy {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.cnd.cnd-cta-band :is(h2, h3).cnd-cta-band__title {
	font-family: var(--font-display);
	letter-spacing: 0;
	text-transform: none;
	margin: 0;
}
.cnd.cnd-cta-band .cnd-cta-band__text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--t-small);
	line-height: 1.55;
	color: var(--ink-2);
	margin: 0;
}
.cnd.cnd-cta-band.cnd-cta-band--photo .cnd-cta-band__text {
	color: var(--on-image);
}
/* Liens du texte (v0.28.4, accueil : téléphone, centre d'aide) : couleur du texte, soulignés. */
.cnd.cnd-cta-band .cnd-cta-band__text a,
.cnd.cnd-cta-band .cnd-cta-band__text a:hover {
	color: inherit;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.cnd.cnd-cta-band .cnd-cta-band__text a:hover { text-decoration-thickness: 2px; }
.cnd.cnd-cta-band .cnd-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-2);
}
/* Bouton contour sur photo assombrie : trait et texte blancs (--on-image). */
.cnd.cnd-cta-band.cnd-cta-band--photo .cnd-btn--outline,
.cnd.cnd-cta-band.cnd-cta-band--photo .cnd-btn--outline:focus {
	background: transparent;
	border-color: var(--on-image);
	color: var(--on-image);
}
.cnd.cnd-cta-band.cnd-cta-band--photo .cnd-btn--outline:hover {
	background: var(--overlay);
	border-color: var(--on-image);
	color: var(--on-image);
}
/* Disposition « ligne » (sans photo) : texte à gauche, boutons à droite ; empilé sur mobile. */
.cnd.cnd-cta-band.cnd-cta-band--row {
	min-height: 0;
	justify-content: stretch;
	text-align: left;
	padding: var(--s-5) var(--s-6);
	border: 1px solid var(--brand-tint-2);
}
.cnd.cnd-cta-band.cnd-cta-band--row .cnd-cta-band__content {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: none;
}
.cnd.cnd-cta-band.cnd-cta-band--row :is(h2, h3).cnd-cta-band__title {
	font-size: var(--t-h3);
}
.cnd.cnd-cta-band.cnd-cta-band--row .cnd-cta-band__actions {
	justify-content: flex-start;
}
@media (max-width: 599px) {
	.cnd.cnd-cta-band.cnd-cta-band--row {
		padding: var(--s-5);
	}
}

/* ---------- Bande avec photo à la hauteur des maquettes (v0.23.0) : marges internes 72 / 32 px
   (48 / 20 px en mobile) au lieu d'une hauteur minimale, texte 15 px sur 60 caractères, 28 px avant
   les boutons ; boutons pleine largeur en mobile. ---------- */
.cnd.cnd-cta-band.cnd-cta-band--photo {
	min-height: 0;
	padding: 72px 32px;
}
.cnd.cnd-cta-band.cnd-cta-band--photo .cnd-cta-band__content {
	gap: 28px;
	max-width: 720px;
}
.cnd.cnd-cta-band.cnd-cta-band--photo .cnd-cta-band__copy {
	gap: var(--s-3);
}
.cnd.cnd-cta-band.cnd-cta-band--photo .cnd-cta-band__text {
	max-width: 60ch;
	margin: 0 auto;
	font-size: 15px;
	color: rgba(255, 255, 255, .88);
}
.cnd.cnd-cta-band.cnd-cta-band--photo .cnd-cta-band__actions .cnd-btn {
	font-size: var(--t-small);
}
@media (max-width: 899px) {
	.cnd.cnd-cta-band.cnd-cta-band--photo {
		padding: 48px 20px;
	}
	.cnd.cnd-cta-band.cnd-cta-band--photo .cnd-cta-band__content,
	.cnd.cnd-cta-band.cnd-cta-band--photo .cnd-cta-band__actions {
		width: 100%;
	}
	.cnd.cnd-cta-band.cnd-cta-band--photo .cnd-cta-band__actions {
		flex-direction: column;
	}
	.cnd.cnd-cta-band.cnd-cta-band--photo .cnd-cta-band__actions .cnd-btn {
		width: 100%;
	}
}