/* ==========================================================================
   KIDS CARE — COUCHE LUDIQUE
   --------------------------------------------------------------------------
   Vocabulaire visuel : fonds bleu ciel, découpes en nuages entre les
   sections, formes rondes, pastilles d'icônes colorées, cartes en bulles.

   Garde-fous conservés tels quels :
   - le texte reste sur blanc ou sur un aplat très clair (ratios inchangés,
     voir CONTRASTES.md) ;
   - les couleurs vives servent d'aplats et d'icônes, jamais de texte ;
   - le mouvement est décoratif et disparaît si le visiteur a demandé de
     réduire les animations.
   ========================================================================== */

:root {
	/* Bleu ciel des sections. Texte --kc-ink dessus : 11,9:1 ✅ */
	--kc-sky: #e2f6fd;
	--kc-sky-deep: #cdeffb;
}

/* ==========================================================================
   1. SÉPARATIONS EN NUAGES
   ========================================================================== */
.kc-wave {
	position: absolute;
	inset-inline: 0;
	width: 100%;
	line-height: 0;
	pointer-events: none;
	z-index: 1;
}

.kc-wave svg {
	display: block;
	width: 100%;
	height: clamp(38px, 4.5vw, 74px);
}

/* Posée en bas d'une section, la forme « déborde » sur la suivante. */
.kc-wave--bas {
	inset-block-end: -1px;
}

/* Posée en haut, elle est retournée. */
.kc-wave--haut {
	inset-block-start: -1px;
	transform: rotate(180deg);
}

.kc-wave--blanc svg path {
	fill: var(--kc-white);
}

.kc-wave--ciel svg path {
	fill: var(--kc-sky);
}

.kc-wave--surface svg path {
	fill: var(--kc-surface);
}

.kc-wave--menthe svg path {
	fill: var(--kc-tint-mint);
}

.kc-wave--ardoise svg path {
	fill: var(--kc-ink);
}

/* Les sections qui portent une découpe ont besoin d'air pour ne pas la
   laisser mordre sur le texte. */
.kc-section--decoupe {
	padding-block: calc(var(--kc-section-y) + 2.5rem);
}

/* ==========================================================================
   2. FONDS DE SECTION
   ========================================================================== */
.kc-section {
	position: relative;
	isolation: isolate;
}

.kc-section--ciel {
	background-color: var(--kc-sky);
}

/* ==========================================================================
   3. BULLES FLOTTANTES
   ========================================================================== */
/* Surtout PAS de z-index négatif ici : les sections créent un contexte
   d'empilement (isolation: isolate), et un enfant en z-index -1 se retrouve
   peint DERRIÈRE le fond de sa propre section. Les bulles étaient donc
   totalement invisibles sur toutes les sections colorées. Elles restent au
   niveau 0, et c'est le contenu qui passe au-dessus. */
.kc-bubble {
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0.4;
}

/* Le contenu passe systématiquement devant les bulles. */
.kc-section > .kc-container,
.kc-section > .kc-cta-final {
	position: relative;
	z-index: 1;
}

.kc-bubble--cyan {
	background: var(--kc-cyan);
}

.kc-bubble--menthe {
	background: var(--kc-mint);
}

.kc-bubble--jaune {
	background: var(--kc-yellow);
}

.kc-bubble--magenta {
	background: var(--kc-magenta);
}

.kc-bubble--a {
	inset-block-start: 8%;
	inset-inline-start: 4%;
	width: clamp(62px, 7.5vw, 118px);
	aspect-ratio: 1;
	opacity: 0.3;
}

.kc-bubble--b {
	inset-block-start: 24%;
	inset-inline-end: 6%;
	width: clamp(34px, 4vw, 62px);
	aspect-ratio: 1;
	opacity: 0.4;
}

.kc-bubble--c {
	inset-block-end: 12%;
	inset-inline-start: 12%;
	width: clamp(24px, 2.6vw, 42px);
	aspect-ratio: 1;
	opacity: 0.45;
}

/* Quatre trajectoires distinctes, de durées volontairement non multiples
   les unes des autres : les bulles ne se resynchronisent jamais, le
   mouvement d'ensemble ne se répète donc pas de façon perceptible. */
@media (prefers-reduced-motion: no-preference) {
	.kc-bubble--a {
		animation: kc-float 7s ease-in-out infinite alternate;
	}

	.kc-bubble--b {
		animation: kc-drift 9s ease-in-out infinite alternate;
		animation-delay: -3s;
	}

	.kc-bubble--c {
		animation: kc-sway 6s ease-in-out infinite alternate;
		animation-delay: -1.5s;
	}
}

@keyframes kc-float {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}

	to {
		transform: translate3d(10px, -52px, 0) scale(1.12);
	}
}

@keyframes kc-drift {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}

	to {
		transform: translate3d(-38px, -46px, 0) scale(0.86);
	}
}

@keyframes kc-sway {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(34px, -34px, 0);
	}
}

/* Sur petit écran on garde le mouvement, mais discret : bulles plus petites
   et moins opaques, pour ne pas encombrer une colonne étroite. */
@media (max-width: 700px) {
	.kc-bubble--a {
		width: 58px;
		opacity: 0.22;
	}

	.kc-bubble--b {
		width: 32px;
		opacity: 0.28;
	}

	.kc-bubble--c,
	.kc-bubble--e {
		display: none; /* on garde deux bulles par section, pas cinq */
	}
}

/* Deux bulles supplémentaires, pour varier les rythmes d'une section à
   l'autre sans avoir à multiplier les classes dans les gabarits. */
.kc-bubble--d {
	inset-block-start: 62%;
	inset-inline-end: 12%;
	width: clamp(40px, 4.4vw, 74px);
	aspect-ratio: 1;
	opacity: 0.28;
}

.kc-bubble--e {
	inset-block-end: 18%;
	inset-inline-end: 30%;
	width: clamp(20px, 2.2vw, 34px);
	aspect-ratio: 1;
	opacity: 0.38;
}

@media (prefers-reduced-motion: no-preference) {
	.kc-bubble--d {
		animation: kc-sway 8s ease-in-out infinite alternate;
		animation-delay: -5s;
	}

	.kc-bubble--e {
		animation: kc-float 10s ease-in-out infinite alternate;
		animation-delay: -2s;
	}
}

/* kc-drift est défini plus haut, avec une amplitude bien plus marquée.
   Une seconde définition traînait ici et l'écrasait : les bulles --b se
   contentaient alors de 20 px de déplacement au lieu de 46. */

/* ==========================================================================
   4. RÉVÉLATION AU DÉFILEMENT
   Pilotée par le défilement, sans JavaScript. Les navigateurs qui ne la
   gèrent pas affichent simplement le contenu.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.kc-reveal {
			animation: kc-rise linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 22%;
		}

		.kc-reveal-stagger > *,
		.kc-reveal-stagger > .kc-grid > * {
			animation: kc-rise linear both;
			animation-timeline: view();
			animation-range: entry 2% cover 20%;
		}
	}
}

@keyframes kc-rise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- Révélation générale, sur TOUT le site ----------
   Appliquée par le CSS et non par des classes posées une à une : les pages
   internes en bénéficient sans qu'il faille éditer chaque gabarit, et une
   nouvelle section créée demain sera animée d'office.
   Le slider en est exclu : son contenu doit être visible immédiatement,
   c'est le premier écran et l'élément mesuré par le LCP. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.kc-main .kc-section > .kc-container,
		.kc-main .kc-section > .kc-cta-final,
		.kc-main .kc-article > * {
			animation: kc-rise linear both;
			animation-timeline: view();
			animation-range: entry 4% cover 20%;
		}

		/* Les cartes d'une grille apparaissent l'une après l'autre. */
		.kc-main .kc-grid > *,
		.kc-main .kc-faq > * {
			animation: kc-rise-soft linear both;
			animation-timeline: view();
			animation-range: entry 2% cover 18%;
		}

		/* Le premier bloc d'une page ne doit pas s'animer : il est déjà à
		   l'écran au chargement, l'animation le ferait clignoter. */
		.kc-main > .kc-section:first-of-type > .kc-container,
		.kc-breadcrumb + .kc-section > .kc-container {
			animation: none;
		}
	}
}

/* Variante plus discrète pour les éléments déjà nombreux à l'écran. */
@keyframes kc-rise-soft {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.985);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ==========================================================================
   5. EN-TÊTES DE SECTION
   ========================================================================== */
.kc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: var(--kc-space-4);
	padding: 0.42em 1.05em;
	font-size: var(--kc-text-xs);
	letter-spacing: 0.1em;
	color: var(--kc-link);
	background-color: var(--kc-white);
	border: 1px solid var(--kc-sky-deep);
	border-radius: var(--kc-radius-pill);
}

.kc-eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--kc-cyan);
}

.kc-section h2,
.kc-section .kc-h2 {
	letter-spacing: -0.025em;
	max-width: 22ch;
}

/* Tous les en-têtes de section sont centrés, y compris ceux qui ne portaient
   pas la variante --center : trois titres restaient alignés à gauche alors
   que le reste de la page était centré, ce qui cassait le rythme.
   Les titres situés DANS une colonne de texte (blocs média + texte) ne sont
   pas concernés : ils ne passent pas par .kc-section-head. */
.kc-section-head {
	margin-inline: auto;
	text-align: center;
}

.kc-section-head h2,
.kc-section-head .kc-h2 {
	max-width: 26ch;
	margin-inline: auto;
}

.kc-section-head p {
	margin-inline: auto;
}

/* Petit trait ondulé sous les titres de section. */
.kc-section-head h2::after {
	content: "";
	display: block;
	width: 84px;
	height: 8px;
	margin: var(--kc-space-4) auto 0;
	background-repeat: repeat-x;
	background-size: 28px 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 6C4 6 4 2 7 2s3 4 7 4 3-4 7-4 3 4 7 4' fill='none' stroke='%2303BEE3' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ==========================================================================
   6. PANNEAU DE RÉASSURANCE — encadré arrondi, icônes colorées
   ========================================================================== */
/* Le panneau ne chevauche plus le hero : la découpe en nuage assure déjà la
   transition, et un chevauchement la recouvrait entièrement. */
.kc-section--overlap {
	margin-top: 0;
	padding-top: var(--kc-space-6);
	z-index: 3;
}

.kc-reassurance {
	display: grid;
	gap: var(--kc-space-4);
	padding: var(--kc-space-6) var(--kc-space-5);
	background-color: var(--kc-white);
	border: 2px solid var(--kc-sky-deep);
	border-radius: 34px;
	box-shadow: 0 16px 44px rgb(3 190 227 / 14%);
}

.kc-reassurance__item {
	flex-direction: column;
	align-items: center;
	gap: var(--kc-space-3);
	padding: var(--kc-space-3);
	text-align: center;
	border: 0;
}

/* Grande pastille ronde, une couleur de marque par colonne. */
.kc-reassurance__icon {
	display: grid;
	place-items: center;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	color: var(--kc-ink);
	transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kc-reassurance__icon svg {
	width: 34px;
	height: 34px;
}

.kc-reassurance__item:hover .kc-reassurance__icon {
	transform: translateY(-5px) scale(1.06);
}

.kc-reassurance__item:nth-child(1) .kc-reassurance__icon {
	background-color: var(--kc-tint-cyan);
}

.kc-reassurance__item:nth-child(2) .kc-reassurance__icon {
	background-color: var(--kc-tint-mint);
}

.kc-reassurance__item:nth-child(3) .kc-reassurance__icon {
	background-color: var(--kc-tint-yellow);
}

.kc-reassurance__item:nth-child(4) .kc-reassurance__icon {
	background-color: var(--kc-tint-magenta);
}

.kc-reassurance__title {
	font-family: var(--kc-font-title);
	font-size: var(--kc-text-md);
}

@media (max-width: 560px) {
	.kc-section--overlap {
		margin-top: -34px;
	}

	.kc-reassurance {
		border-radius: 26px;
		padding: var(--kc-space-5) var(--kc-space-4);
	}
}

/* ==========================================================================
   7. CARTES — rondeurs et pastille d'icône
   ========================================================================== */
.kc-card {
	position: relative;
	align-items: flex-start;
	padding: var(--kc-space-6) var(--kc-space-5);
	background-color: var(--kc-white);
	border: 2px solid var(--kc-border);
	border-radius: 28px;
	box-shadow: 0 4px 14px rgb(24 50 71 / 5%);
	transition: transform 300ms cubic-bezier(0.34, 1.4, 0.64, 1),
		box-shadow var(--kc-transition), border-color var(--kc-transition);
}

/* Le filet supérieur des variantes d'accent est remplacé par la pastille. */
.kc-card[class*="kc-card--accent"] {
	border-top-width: 2px;
	border-top-color: var(--kc-border);
}

.kc-card__icon {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	margin-bottom: var(--kc-space-2);
	transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kc-card__icon svg {
	width: 30px;
	height: 30px;
	stroke-width: 2;
}

/* ---------- Pastilles d'icône colorées ----------
   Les tons du thème de base sont trop délavés pour porter une icône : elle
   disparaît. On utilise ici des aplats plus soutenus et le tracé prend la
   variante fonctionnelle de la couleur, celle qui est contrastée. */
.kc-card--accent-cyan .kc-card__icon,
.kc-reassurance__item:nth-child(1) .kc-reassurance__icon {
	background-color: #c9eff9;
	color: var(--kc-link);
}

.kc-card--accent-mint .kc-card__icon,
.kc-reassurance__item:nth-child(2) .kc-reassurance__icon {
	background-color: #c6f4e7;
	color: var(--kc-mint-ink);
}

.kc-card--accent-yellow .kc-card__icon,
.kc-reassurance__item:nth-child(3) .kc-reassurance__icon {
	background-color: #fbe6bd;
	color: var(--kc-yellow-ink);
}

.kc-card--accent-magenta .kc-card__icon,
.kc-reassurance__item:nth-child(4) .kc-reassurance__icon {
	background-color: #fbd2e0;
	color: var(--kc-cta-hover);
}

.kc-reassurance__icon svg {
	stroke-width: 2;
}

.kc-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 38px rgb(24 50 71 / 12%);
}

.kc-card:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 18px 38px rgb(24 50 71 / 12%);
}

.kc-card:hover .kc-card__icon {
	transform: rotate(-6deg) scale(1.08);
}

.kc-card--accent-cyan:hover {
	border-color: var(--kc-cyan);
}

.kc-card--accent-mint:hover {
	border-color: var(--kc-mint);
}

.kc-card--accent-yellow:hover {
	border-color: var(--kc-yellow);
}

.kc-card--accent-magenta:hover {
	border-color: var(--kc-magenta);
}

.kc-card__title {
	letter-spacing: -0.012em;
	text-wrap: balance;
}

.kc-card__title a {
	color: var(--kc-ink);
	text-decoration: none;
}

.kc-card:hover .kc-card__title a {
	color: var(--kc-link-hover);
}

.kc-card:hover .kc-link-arrow::after {
	transform: translateX(4px);
}

/* ==========================================================================
   8. CARTES EN BULLE DE PAROLE — « Pourquoi Kids Care »
   ========================================================================== */
.kc-speech {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--kc-space-3);
	padding: var(--kc-space-6) var(--kc-space-5);
	border-radius: 26px;
	color: var(--kc-ink);
	transition: transform 300ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* La pointe de la bulle. */
.kc-speech::after {
	content: "";
	position: absolute;
	inset-block-end: -18px;
	inset-inline-start: 42px;
	width: 0;
	height: 0;
	border-inline: 14px solid transparent;
	border-block-start: 20px solid currentcolor;
	color: inherit;
}

.kc-speech:hover {
	transform: translateY(-6px);
}

.kc-speech__quote {
	font-family: var(--kc-font-title);
	font-size: 2.4rem;
	line-height: 0.7;
	color: rgb(24 50 71 / 26%);
}

.kc-speech__title {
	font-family: var(--kc-font-title);
	font-size: var(--kc-h4);
	font-weight: 700;
	margin: 0;
}

.kc-speech__text {
	margin: 0;
	max-width: none;
	color: var(--kc-ink);
}

/* Quatre teintes pastel. Le texte reste --kc-ink : plus de 11:1 partout. */
.kc-speech--cyan {
	background-color: var(--kc-tint-cyan);
}

.kc-speech--cyan::after {
	color: var(--kc-tint-cyan);
}

.kc-speech--mint {
	background-color: var(--kc-tint-mint);
}

.kc-speech--mint::after {
	color: var(--kc-tint-mint);
}

.kc-speech--yellow {
	background-color: var(--kc-tint-yellow);
}

.kc-speech--yellow::after {
	color: var(--kc-tint-yellow);
}

.kc-speech--magenta {
	background-color: var(--kc-tint-magenta);
}

.kc-speech--magenta::after {
	color: var(--kc-tint-magenta);
}

/* Décalage vertical alterné : la rangée respire au lieu d'être un tableau. */
@media (min-width: 1025px) {
	.kc-speech-row > :nth-child(even) {
		margin-block-start: var(--kc-space-6);
	}
}

/* ==========================================================================
   8 bis. BLOC MÉDIA ÉTIRÉ
   Quand la colonne de texte est longue (paragraphes + liste + bouton), une
   image au ratio fixe laisse un grand vide en dessous. Ici, l'image occupe
   toute la hauteur de la rangée et se recadre au centre.
   ========================================================================== */
.kc-split--stretch {
	align-items: stretch;
}

.kc-split--stretch .kc-split__media {
	display: flex;
	min-height: 100%;
}

.kc-split--stretch .kc-split__media img {
	width: 100%;
	height: 100%;
	min-height: 340px;
	object-fit: cover;
	aspect-ratio: auto;
}

@media (max-width: 860px) {
	.kc-split--stretch .kc-split__media img {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
}

/* ==========================================================================
   9. MÉDIAS RONDS
   ========================================================================== */
.kc-split__media {
	position: relative;
}

.kc-split__media .kc-image,
.kc-split__media img {
	border-radius: 36px;
}

/* Cercle coloré derrière l'image. */
.kc-split__media::before {
	content: "";
	position: absolute;
	inset-block: -26px auto;
	inset-inline-start: -30px;
	width: clamp(140px, 22vw, 240px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--kc-tint-cyan);
	z-index: -1;
}

.kc-split--media-right .kc-split__media::before {
	inset-inline: auto -30px;
	background: var(--kc-tint-mint);
}

/* Le portrait du praticien est présenté en médaillon rond. */
.kc-portrait-round .kc-split__media img,
.kc-portrait-round .kc-media-placeholder {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
	max-width: 420px;
	margin-inline: auto;
	border: 8px solid var(--kc-white);
	box-shadow: 0 14px 40px rgb(24 50 71 / 12%);
}

.kc-media-placeholder {
	border-radius: 36px;
	border-color: var(--kc-sky-deep);
	background-color: var(--kc-white);
}

/* ==========================================================================
   10. FRISE CHRONOLOGIQUE — rail horizontal
   --------------------------------------------------------------------------
   Une frise est une séquence : la parcourir de gauche à droite dit la durée
   mieux qu'une grille. Le rail défile horizontalement avec accroche, chaque
   étape apparaît à mesure qu'elle entre dans le champ, et une barre de
   progression suit le défilement — le tout en CSS, sans JavaScript.
   ========================================================================== */
.kc-frise {
	margin-block: var(--kc-space-6) var(--kc-space-5);
	timeline-scope: --kc-frise;
}

.kc-frise__rail {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	/* Pas de scroll-snap : il entrerait en conflit avec le défilement
	   automatique, en ramenant le rail à chaque micro-avance. */
	scroll-timeline: --kc-frise inline;
	scrollbar-width: none; /* la barre de progression en tient lieu */
	padding-block: var(--kc-space-3) var(--kc-space-5);
	/* Marge de sécurité : la pastille du premier point ne doit pas être
	   rognée par l'anneau de focus. */
	padding-inline: 4px;
}

.kc-frise__rail::-webkit-scrollbar {
	display: none;
}

.kc-frise__rail:focus-visible {
	outline: 3px solid var(--kc-focus);
	outline-offset: 4px;
	border-radius: var(--kc-radius-sm);
}

.kc-timeline {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(224px, 1fr);
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: none;
	position: relative;
}

/* Le trait continu qui relie toutes les étapes. */
.kc-timeline::before {
	content: "";
	position: absolute;
	inset-block-start: 10px;
	inset-inline: 0;
	height: 3px;
	border-radius: 3px;
	background: var(--kc-white);
}

.kc-timeline__item {
	position: relative;
	margin: 0;
	padding: var(--kc-space-6) var(--kc-space-5) 0 0;
	border: 0;
}

.kc-timeline__dot {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	background: var(--kc-cyan);
	border: 4px solid var(--kc-white);
	transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kc-timeline__item:nth-child(4n + 2) .kc-timeline__dot {
	background: var(--kc-magenta);
}

.kc-timeline__item:nth-child(4n + 3) .kc-timeline__dot {
	background: var(--kc-mint);
}

.kc-timeline__item:nth-child(4n) .kc-timeline__dot {
	background: var(--kc-yellow);
}

.kc-timeline__item:hover .kc-timeline__dot {
	transform: scale(1.28);
}

.kc-timeline__date {
	font-size: clamp(1.6rem, 1.8vw + 1.1rem, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	margin-bottom: var(--kc-space-2);
	color: var(--kc-ink);
}

.kc-timeline__text {
	font-size: var(--kc-text-base);
	color: var(--kc-ink-soft);
	max-width: 28ch;
}

/* ---------- Barre de progression du défilement ---------- */
.kc-frise__progress {
	display: none;
	height: 6px;
	border-radius: 6px;
	background: var(--kc-white);
	overflow: hidden;
}

.kc-frise__progress span {
	display: block;
	height: 100%;
	border-radius: 6px;
	background: var(--kc-cyan);
	transform: scaleX(0);
	transform-origin: left center;
}

@supports (animation-timeline: scroll()) {
	.kc-frise__progress {
		display: block;
	}

	.kc-frise__progress span {
		animation: kc-progress linear both;
		animation-timeline: --kc-frise;
	}
}

@keyframes kc-progress {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* ---------- Apparition de chaque étape ---------- */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.kc-timeline__item {
			animation: kc-step linear both;
			animation-timeline: view(inline);
			animation-range: entry 0% entry 85%;
		}
	}
}

@keyframes kc-step {
	from {
		opacity: 0.25;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 700px) {
	.kc-timeline {
		grid-auto-columns: minmax(210px, 1fr);
	}

	.kc-timeline__text {
		max-width: none;
	}
}

/* ==========================================================================
   11. POINTS CLÉS EN PASTILLES
   ========================================================================== */
.kc-checklist {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kc-space-2);
	max-width: none;
}

.kc-checklist li {
	margin: 0;
	padding: 0.6em 1.1em 0.6em 2.4em;
	font-size: var(--kc-text-base);
	background-color: var(--kc-white);
	border: 2px solid var(--kc-sky-deep);
	border-radius: var(--kc-radius-pill);
	transition: border-color var(--kc-transition), transform var(--kc-transition);
}

.kc-checklist li + li {
	margin-top: 0;
}

.kc-checklist li::before {
	inset-block-start: 50%;
	inset-inline-start: 0.65em;
	transform: translateY(-50%);
}

.kc-checklist li:hover {
	border-color: var(--kc-mint);
	transform: translateY(-2px);
}

/* ==========================================================================
   12. ÉQUIPEMENTS — grille régulière
   --------------------------------------------------------------------------
   La composition en bento précédente découpait la ligne en 6 colonnes, avec
   des cartes larges de 3 puis de 2. Avec six équipements, cela donnait
   3+3 / 2+2+2 / 2 : la sixième carte restait seule sur un tiers de largeur.
   Une grille régulière à trois colonnes se remplit exactement, quel que soit
   le nombre d'équipements ajoutés ensuite par l'équipe.
   ========================================================================== */
.kc-grid--equipements {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
}

/* Toutes les cartes d'une même ligne prennent la hauteur de la plus haute,
   et leurs éléments s'alignent : pastille en haut, titre, puis texte. */
.kc-grid--equipements > .kc-card {
	height: 100%;
	gap: var(--kc-space-3);
}

.kc-grid--equipements .kc-card__title {
	font-size: var(--kc-h4);
	min-height: 2.4em; /* deux lignes de titre : les textes démarrent au même niveau */
	display: flex;
	align-items: center;
}

.kc-grid--equipements .kc-card__text {
	flex-grow: 1;
	margin: 0;
}

@media (max-width: 980px) {
	.kc-grid--equipements {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.kc-grid--equipements {
		grid-template-columns: minmax(0, 1fr);
	}

	.kc-grid--equipements .kc-card__title {
		min-height: 0;
	}
}

/* ==========================================================================
   13. INFORMATIONS PRATIQUES
   ========================================================================== */
.kc-infos {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(var(--kc-space-5), 3vw, var(--kc-space-7));
	align-items: start;
	padding: clamp(var(--kc-space-5), 3vw, var(--kc-space-7));
	background-color: var(--kc-white);
	border: 2px solid var(--kc-sky-deep);
	border-radius: 34px;
	box-shadow: 0 16px 44px rgb(3 190 227 / 12%);
}

@media (max-width: 900px) {
	.kc-infos {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.kc-infos {
		padding: var(--kc-space-5) var(--kc-space-4);
		border-radius: 26px;
	}
}

.kc-infos__side {
	display: flex;
	flex-direction: column;
	gap: var(--kc-space-5);
}

/* ---------- Tuiles d'information ---------- */
.kc-infos__tile {
	display: flex;
	gap: var(--kc-space-4);
	align-items: flex-start;
}

.kc-infos__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 50%;
}

.kc-infos__icon svg {
	width: 24px;
	height: 24px;
	stroke-width: 2;
}

.kc-infos__icon--cyan {
	background-color: #c9eff9;
	color: var(--kc-link);
}

.kc-infos__icon--magenta {
	background-color: #fbd2e0;
	color: var(--kc-cta-hover);
}

.kc-infos__icon--mint {
	background-color: #c6f4e7;
	color: var(--kc-mint-ink);
}

.kc-infos__label {
	margin: 0 0 var(--kc-space-2);
	font-family: var(--kc-font-title);
	font-size: var(--kc-text-base);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--kc-ink-soft);
}

.kc-infos__value {
	margin: 0;
	font-style: normal;
	font-size: var(--kc-text-md);
	color: var(--kc-ink);
	max-width: none;
}

.kc-infos__list {
	list-style: none;
	padding: 0;
	max-width: none;
}

.kc-infos__list li + li {
	margin-top: 0;
}

.kc-infos__note {
	margin: var(--kc-space-3) 0 0;
	font-size: var(--kc-text-sm);
	color: var(--kc-ink-soft);
}

/* ---------- Pastille ouvert / fermé ---------- */
.kc-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 var(--kc-space-3);
	padding: 0.4em 0.95em;
	font-size: var(--kc-text-sm);
	font-weight: 700;
	border-radius: var(--kc-radius-pill);
}

.kc-badge__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Le statut n'est jamais porté par la seule couleur : le texte le dit aussi. */
.kc-badge--open {
	color: var(--kc-mint-ink); /* 6,4:1 */
	background-color: #d9f7ee;
}

.kc-badge--open .kc-badge__dot {
	background-color: var(--kc-mint-ink);
}

.kc-badge--closed {
	color: var(--kc-yellow-ink); /* 5,7:1 */
	background-color: #fdf0d8;
}

.kc-badge--closed .kc-badge__dot {
	background-color: var(--kc-yellow-ink);
}

/* ---------- Tableau des horaires ---------- */
.kc-hours {
	width: 100%;
	max-width: 340px;
	border-collapse: separate;
	border-spacing: 0 4px;
	margin: 0;
	font-size: var(--kc-text-base);
}

.kc-hours th,
.kc-hours td {
	padding: 0.45rem 0.85rem;
	border: 0;
	background-color: var(--kc-surface);
}

.kc-hours th {
	font-weight: 600;
	text-align: left;
	color: var(--kc-ink);
	border-radius: var(--kc-radius-pill) 0 0 var(--kc-radius-pill);
}

.kc-hours td {
	text-align: right;
	color: var(--kc-ink-soft);
	font-variant-numeric: tabular-nums;
	border-radius: 0 var(--kc-radius-pill) var(--kc-radius-pill) 0;
}

/* Jour de fermeture : atténué, mais toujours au-dessus de 4,5:1. */
.kc-hours .is-closed th,
.kc-hours .is-closed td {
	color: var(--kc-ink-soft);
	background-color: transparent;
}

/* Aujourd'hui : mis en avant, c'est l'information la plus consultée. */
.kc-hours .is-today th,
.kc-hours .is-today td {
	background-color: #c9eff9;
	color: var(--kc-ink);
	font-weight: 700;
}

/* ---------- Carte ---------- */
.kc-infos__map {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.kc-map {
	flex: 1 1 auto;
	min-height: 380px;
	border-radius: 26px;
	border: 2px solid var(--kc-sky-deep);
	background-color: var(--kc-sky);
}

.kc-map iframe {
	min-height: 380px;
	border-radius: 24px;
}

.kc-map__label {
	font-family: var(--kc-font-title);
	font-size: var(--kc-text-lg);
	font-weight: 700;
}

.kc-map__icon svg {
	width: 34px;
	height: 34px;
	stroke-width: 1.8;
}

.kc-map__button {
	gap: var(--kc-space-3);
	border-radius: 24px;
}

@media (max-width: 900px) {
	.kc-map,
	.kc-map iframe {
		min-height: 300px;
	}
}

/* ==========================================================================
   13 bis. COULEUR DE TEXTE DES BOUTONS SUR MESURE
   --------------------------------------------------------------------------
   Plusieurs de nos composants sont de vrais <button> : accordéon FAQ, filtres
   de galerie, commandes du slider, bouton de carte, burger. Le thème parent
   applique des styles génériques aux boutons, dont une couleur au survol.
   Comme nos règles ne redéfinissaient PAS la couleur sur :hover, celle du
   parent l'emportait et le texte devenait illisible.
   On fixe donc explicitement la couleur dans tous les états.
   ========================================================================== */
.kc-faq__question,
.kc-faq__question:hover,
.kc-faq__question:focus,
.kc-faq__question:active,
.kc-faq__question[aria-expanded="true"] {
	color: var(--kc-ink);
	background-color: transparent;
}

.kc-faq__question:hover {
	background-color: var(--kc-sky);
}

.kc-filter,
.kc-filter:hover,
.kc-filter:focus {
	color: var(--kc-ink);
}

.kc-filter.is-active,
.kc-filter.is-active:hover,
.kc-filter.is-active:focus {
	color: var(--kc-white);
	background-color: var(--kc-ink);
}

.kc-map__button,
.kc-map__button:hover,
.kc-map__button:focus {
	color: var(--kc-ink);
}

.kc-burger,
.kc-burger:hover,
.kc-burger:focus {
	color: var(--kc-ink);
	background-color: transparent;
}

/* ==========================================================================
   13 ter. LOGO ET BOUTON DE MENU
   ========================================================================== */

/* ---------- En-tête pleine largeur ----------
   L'en-tête était contraint au conteneur de 1220 px : sur un grand écran, le
   logo, sept entrées de menu et le bouton de rendez-vous se disputaient une
   largeur artificiellement réduite, alors que des dizaines de centimètres
   restaient vides de chaque côté. Il occupe désormais toute la largeur, avec
   une marge intérieure qui grandit avec l'écran. */
.kc-topbar__inner,
.kc-header__inner {
	max-width: none;
	padding-inline: clamp(1rem, 3.5vw, 3.5rem);
}

.kc-header__inner {
	min-height: 100px;
	gap: clamp(var(--kc-space-4), 2.5vw, var(--kc-space-7));
}

/* Le logo porte une baseline « CENTRE PÉDIATRIQUE » en petites capitales :
   il lui faut une hauteur réelle pour rester lisible. Le sélecteur reprend
   .kc-header pour dépasser en spécificité les règles du thème parent, qui
   contraignent la hauteur des images d'en-tête. */
.kc-header .kc-logo img {
	width: auto;
	max-width: 100%;
	height: clamp(58px, 5vw, 88px);
}

/* Une fois la place disponible, le logo ne doit plus se laisser comprimer. */
@media (min-width: 1300px) {
	.kc-logo {
		flex-shrink: 0;
	}

	.kc-nav__list {
		gap: var(--kc-space-2);
	}
}

/* ---------- Bouton « Prendre rendez-vous » de l'en-tête ----------
   Il passait sur deux lignes et se retrouvait comprimé entre la navigation
   et le bord : on lui interdit de rétrécir et de se couper. */
.kc-header__cta {
	flex-shrink: 0;
}

.kc-header__cta .kc-btn {
	white-space: nowrap;
	padding-inline: 1.4rem;
}

/* Entre 1100 et 1320 px, la place reste comptée même en pleine largeur :
   on resserre les intitulés du menu plutôt que de rapetisser le logo ou de
   déformer le bouton. */
@media (min-width: 1300px) and (max-width: 1520px) {
	.kc-nav__list a,
	.kc-nav__toggle {
		padding-inline: var(--kc-space-2);
		font-size: var(--kc-text-sm);
	}
}

/* ---------- Burger : trois barres, puis une croix ----------
   Positionnement explicite depuis le centre du bouton. Sans cela, les barres
   en ::before / ::after se placent à leur position statique, en haut à gauche,
   et la croix se retrouve décentrée. */
.kc-burger {
	position: relative;
	width: 46px;
	height: 46px;
}

.kc-burger__bars {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 22px;
	height: 2px;
	margin-inline-start: -11px;
	border-radius: 2px;
	background-color: currentcolor;
	transition: background-color 160ms ease;
}

.kc-burger__bars::before,
.kc-burger__bars::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background-color: currentcolor;
	transition: transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1),
		top 220ms ease;
}

.kc-burger__bars::before {
	top: -7px;
	transform: none;
}

.kc-burger__bars::after {
	top: 7px;
	transform: none;
}

.kc-burger[aria-expanded="true"] .kc-burger__bars {
	background-color: transparent;
}

.kc-burger[aria-expanded="true"] .kc-burger__bars::before {
	top: 0;
	transform: rotate(45deg);
}

.kc-burger[aria-expanded="true"] .kc-burger__bars::after {
	top: 0;
	transform: rotate(-45deg);
}

/* ==========================================================================
   14. FAQ
   ========================================================================== */
.kc-faq {
	max-width: 900px;
	margin-inline: auto;
	gap: var(--kc-space-3);
}

.kc-faq__item {
	border-width: 2px;
	border-radius: 22px;
	background-color: var(--kc-white);
	transition: border-color var(--kc-transition), box-shadow var(--kc-transition);
}

.kc-faq__item:has(.kc-faq__question[aria-expanded="true"]) {
	border-color: var(--kc-cyan);
	box-shadow: 0 10px 26px rgb(3 190 227 / 16%);
}

.kc-faq__question {
	font-size: var(--kc-text-lg);
	padding-block: var(--kc-space-5);
}

/* ==========================================================================
   15. AVIS
   ========================================================================== */
.kc-reviews__fallback {
	border: 2px solid var(--kc-sky-deep);
	border-radius: 34px;
	padding: var(--kc-space-8) var(--kc-space-6);
	box-shadow: 0 14px 36px rgb(3 190 227 / 12%);
}

/* ---------- Widget d'avis Trustindex ----------
   Le widget apporte son propre habillage : on se contente de le poser dans
   une carte cohérente avec le reste du site, sans redéfinir ses couleurs
   internes — celles de Google sont attendues par les visiteurs et rassurent
   sur l'authenticité des avis. */
.kc-reviews__widget {
	padding: clamp(var(--kc-space-4), 2.5vw, var(--kc-space-6));
	background-color: var(--kc-white);
	border: 2px solid var(--kc-sky-deep);
	border-radius: 34px;
	box-shadow: 0 14px 36px rgb(3 190 227 / 12%);
}

/* Le widget peut être plus large que la colonne sur petit écran : il défile
   dans sa propre boîte plutôt que d'élargir la page. */
.kc-reviews__widget > * {
	max-width: 100%;
}

@media (max-width: 600px) {
	.kc-reviews__widget {
		padding: var(--kc-space-4) var(--kc-space-3);
		border-radius: 26px;
	}
}

/* ==========================================================================
   15 bis. BLOC D'APPEL À L'ACTION FINAL
   --------------------------------------------------------------------------
   Ces règles avaient été perdues lors du changement de direction graphique :
   le bloc se retrouvait sans fond ni centrage, et son titre héritait d'une
   largeur maximale sans marges automatiques — il apparaissait donc décalé
   à gauche malgré le text-align: center du conteneur.
   ========================================================================== */
.kc-cta-final {
	position: relative;
	overflow: hidden;
	color: var(--kc-white);
	background-color: var(--kc-ink);
	border-radius: 36px;
	padding: clamp(2.75rem, 5.5vw, 5rem) clamp(1.5rem, 5vw, 4rem);
}

/* Tout le contenu du bloc est centré, y compris les boîtes elles-mêmes. */
.kc-cta-final > * {
	margin-inline: auto;
}

.kc-cta-final h2 {
	color: var(--kc-white);
	max-width: 22ch;
	margin-inline: auto;
}

.kc-cta-final h2::after {
	content: "";
	display: block;
	width: 84px;
	height: 8px;
	margin: var(--kc-space-4) auto 0;
	background-repeat: repeat-x;
	background-size: 28px 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 6C4 6 4 2 7 2s3 4 7 4 3-4 7-4 3 4 7 4' fill='none' stroke='%233DE0BE' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.kc-cta-final .kc-lead {
	color: rgb(255 255 255 / 90%); /* 11,9:1 sur #183247 ✅ */
	max-width: 60ch;
}

.kc-cta-final .kc-field-hint {
	color: rgb(255 255 255 / 78%); /* 10,1:1 ✅ */
}

.kc-cta-final .kc-cluster {
	justify-content: center;
	margin-block: var(--kc-space-6) var(--kc-space-4);
}

.kc-cta-final .kc-btn--secondary {
	color: var(--kc-white);
	border-color: var(--kc-white);
}

.kc-cta-final .kc-btn--secondary:hover {
	background-color: var(--kc-white);
	color: var(--kc-ink);
}

.kc-cta-final :focus-visible {
	outline-color: var(--kc-white);
}

/* Silhouettes de marque, très diluées et hors de la zone de texte. */
.kc-cta-final::before,
.kc-cta-final::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0.18;
}

.kc-cta-final::before {
	inset-block-start: -80px;
	inset-inline-start: -70px;
	width: 280px;
	aspect-ratio: 1;
	background: var(--kc-cyan);
}

.kc-cta-final::after {
	inset-block-end: -100px;
	inset-inline-end: -80px;
	width: 320px;
	aspect-ratio: 1;
	background: var(--kc-magenta);
}

@media (max-width: 600px) {
	.kc-cta-final {
		border-radius: 26px;
	}
}

/* ==========================================================================
   16. CARTES D'ARTICLE
   ========================================================================== */
.kc-card__image {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 20px !important;
	transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.kc-card:hover .kc-card__image {
	transform: scale(1.04);
}

/* ==========================================================================
   17. BOUTONS
   ========================================================================== */
.kc-btn {
	transition: transform 240ms cubic-bezier(0.34, 1.4, 0.64, 1),
		background-color var(--kc-transition), border-color var(--kc-transition),
		color var(--kc-transition), box-shadow var(--kc-transition);
}

.kc-btn--primary {
	box-shadow: 0 6px 18px rgb(225 2 88 / 26%);
}

.kc-btn:hover {
	transform: translateY(-2px);
}

.kc-btn--primary:hover {
	box-shadow: 0 10px 24px rgb(225 2 88 / 32%);
}

/* ==========================================================================
   18. PIED DE PAGE — coiffé d'une colline
   ========================================================================== */
.kc-footer {
	position: relative;
	padding-block: calc(var(--kc-space-8) + 3rem) var(--kc-space-5);
}

.kc-footer .kc-wave {
	inset-block-start: -1px;
	transform: rotate(180deg);
}

/* ==========================================================================
   19. SLIDER — photo en fond plein cadre
   --------------------------------------------------------------------------
   La photographie occupe toute la largeur. Le voile n'est pas uniforme mais
   LATÉRAL : très soutenu à gauche, où se trouve le texte, il s'efface vers
   la droite pour laisser voir la photo. On garde ainsi une image lisible et
   un texte blanc contrasté, sans assombrir tout le cliché.

   Contraste vérifié dans le cas le plus défavorable (photo entièrement
   blanche sous le voile) : blanc sur le voile à 88 % = 8,2:1 ✅
   ========================================================================== */
.kc-slider {
	background-color: var(--kc-ink);
}

.kc-slide {
	display: flex;
	align-items: center;
	min-height: clamp(500px, 66vh, 740px);
}

.kc-slide__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.kc-slide__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* Voile latéral : dense côté texte, transparent côté photo. */
.kc-slide__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgb(24 50 71 / 90%) 0%,
		rgb(24 50 71 / 84%) 34%,
		rgb(24 50 71 / 52%) 62%,
		rgb(24 50 71 / 22%) 100%
	);
}

.kc-slide__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 40rem) 1fr;
	align-items: center;
	padding-block: clamp(2.5rem, 5vw, 4.5rem) calc(clamp(38px, 4.5vw, 74px) + 5rem);
}

.kc-slide__body {
	position: static;
	width: auto;
	min-width: 0;
	padding: 0;
	color: var(--kc-white);
}

.kc-slide__title {
	max-width: 17ch;
	color: var(--kc-white);
}

.kc-slide__text {
	max-width: 52ch;
	color: rgb(255 255 255 / 92%);
}

.kc-slide__repere {
	color: var(--kc-ink);
	background-color: var(--kc-mint);
	border-radius: var(--kc-radius-pill);
	font-weight: 700;
}

/* ---------- Boutons sur fond sombre ---------- */
.kc-slide .kc-btn--secondary {
	color: var(--kc-white);
	border-color: var(--kc-white);
}

.kc-slide .kc-btn--secondary:hover {
	background-color: var(--kc-white);
	color: var(--kc-ink);
}

.kc-slide :focus-visible {
	outline-color: var(--kc-white);
}

/* ---------- Commandes du slider ---------- */
.kc-slider__btn {
	color: var(--kc-white);
	background-color: rgb(255 255 255 / 16%);
	border-color: rgb(255 255 255 / 55%);
}

.kc-slider__btn:hover {
	background-color: rgb(255 255 255 / 30%);
}

.kc-slider__dot::before {
	background-color: rgb(255 255 255 / 45%);
}

.kc-slider__dot.is-active::before {
	background-color: var(--kc-white);
}

.kc-slider__btn:focus-visible,
.kc-slider__dot:focus-visible {
	outline-color: var(--kc-white);
}

@media (max-width: 900px) {
	.kc-slide {
		min-height: clamp(540px, 80vh, 660px);
	}

	.kc-slide__inner {
		grid-template-columns: minmax(0, 1fr);
		padding-block: var(--kc-space-7) calc(clamp(38px, 4.5vw, 74px) + 4.5rem);
	}

	.kc-slide__title {
		max-width: none;
	}

	/* Sur mobile, la colonne de texte occupe toute la largeur : le voile
	   devient vertical pour rester lisible de haut en bas. */
	.kc-slide__media::after {
		background: linear-gradient(
			180deg,
			rgb(24 50 71 / 72%) 0%,
			rgb(24 50 71 / 86%) 55%,
			rgb(24 50 71 / 92%) 100%
		);
	}
}

.kc-slider .kc-wave {
	z-index: 4;
}

/* Les commandes remontent au-dessus de la découpe en nuage, sinon la
   hauteur de la vague les avale entièrement. */
.kc-slider__controls {
	inset-block-end: calc(clamp(38px, 4.5vw, 74px) + 1.25rem);
	z-index: 5;
}

@media (max-width: 700px) {
	.kc-slider__controls {
		inset-block-end: calc(clamp(38px, 4.5vw, 74px) + 0.75rem);
	}
}

/* Le traitement « slide claire » conditionnel a été généralisé : toutes les
   slides sont désormais sur fond ciel avec la photo en carte à droite, donc
   les anciennes règles en :has() n'ont plus d'objet. */