/* ==========================================================================
   KIDS CARE — BLOCS DE CONTENU
   Bannière, frise, listes, informations pratiques, carte, avis, formulaires,
   galerie, pagination, bandeau de consentement.
   ========================================================================== */

/* ==========================================================================
   BANNIÈRE D'ACCUEIL
   Une bannière fixe : une phrase, une photo, trois portes d'entrée.
   Pas de diaporama — voir front-page.php pour la raison.
   ========================================================================== */
.kc-banniere {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(480px, 62vh, 720px);
	background-color: var(--kc-ink);
}

/* Sans photo, la bannière passe en version claire : un aplat bleu ciel avec
   du texte ardoise, plutôt qu'un grand rectangle sombre qui donnerait un site
   froid en attendant l'image. */
.kc-banniere--clair {
	background-color: var(--kc-tint-cyan);
}

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

.kc-banniere__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Voile sombre : garantit le contraste du texte quelle que soit la photo.
   Blanc sur cette superposition dépasse largement 4,5:1. */
.kc-banniere__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgb(24 50 71 / 88%) 0%,
		rgb(24 50 71 / 66%) 45%,
		rgb(24 50 71 / 38%) 100%
	);
}

.kc-banniere__inner {
	position: relative;
	width: 100%;
	min-width: 0;
}

.kc-banniere__body {
	width: 100%;
	min-width: 0;
	padding-block: var(--kc-space-8) calc(var(--kc-space-8) + 40px);
	color: var(--kc-white);
}

.kc-banniere__titre {
	max-width: 18ch;
	margin: 0 0 var(--kc-space-6);
	color: var(--kc-white);
}

.kc-banniere--clair .kc-banniere__titre {
	color: var(--kc-ink);
}

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

.kc-banniere--clair :focus-visible {
	outline-color: var(--kc-ink);
}

/* ---------- Les trois boutons ---------- */
.kc-banniere__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kc-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: none;
}

/* base.css espace deux <li> successifs d'une liste de texte. Ici la rangée
   est gérée par la grille : cette marge décalerait les boutons 2 et 3 d'un
   cran vers le bas. */
.kc-banniere__actions li {
	margin: 0;
}

/* Chaque bouton porte un sur-titre et un libellé : le parent pressé reconnaît
   le geste (« Besoin immédiat ? ») avant même de lire la destination. */
.kc-action {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-height: var(--kc-tap);
	padding: 0.7rem 1.35rem 0.7rem 0.7rem;
	border-radius: var(--kc-radius);
	text-decoration: none;
	box-shadow: var(--kc-shadow);
	transition: transform var(--kc-transition), box-shadow var(--kc-transition),
		background-color var(--kc-transition);
}

.kc-action:hover {
	transform: translateY(-2px);
	box-shadow: var(--kc-shadow-lg);
	text-decoration: none;
}

.kc-action__icone {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background-color: rgb(255 255 255 / 22%);
}

.kc-action__texte {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.kc-action__sur {
	font-size: var(--kc-text-xs);
	font-weight: 500;
	opacity: 0.85;
}

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

/*
 * Trois couleurs, trois gestes distincts — mais le cyan (2,22:1) et la menthe
 * (1,67:1) ne portent pas de texte blanc : le sur-titre y tomberait sous le
 * seuil AA. Sur ces deux aplats, le texte passe donc en ardoise (5,98:1 sur
 * cyan) ; seul le magenta, contrasté avec du blanc (4,83:1), garde le texte
 * clair. Les trois boutons restent nettement différenciés.
 */
.kc-action--urgence {
	background-color: var(--kc-cta);
	color: var(--kc-white);
}

.kc-action--urgence:hover {
	background-color: var(--kc-cta-hover);
	color: var(--kc-white);
}

.kc-action--rdv {
	background-color: var(--kc-cyan);
	color: var(--kc-ink);
}

.kc-action--rdv:hover {
	background-color: #02a8c9;
	color: var(--kc-ink);
}

.kc-action--conseil {
	background-color: var(--kc-mint);
	color: var(--kc-ink);
}

.kc-action--conseil:hover {
	background-color: #2ccfad;
	color: var(--kc-ink);
}

/* Sur les deux aplats clairs, la pastille blanche translucide disparaîtrait :
   on l'assombrit pour que l'icône garde son support. */
.kc-action--rdv .kc-action__icone,
.kc-action--conseil .kc-action__icone {
	background-color: rgb(24 50 71 / 12%);
}

@media (max-width: 700px) {
	.kc-banniere {
		min-height: clamp(520px, 78vh, 640px);
	}

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

	/* Trois boutons côte à côte deviennent illisibles sous 700 px : ils
	   passent en pleine largeur, l'un sous l'autre. */
	.kc-banniere__actions {
		flex-direction: column;
		align-items: stretch;
		gap: var(--kc-space-2);
	}
}

/* ==========================================================================
   FRISE CHRONOLOGIQUE
   ========================================================================== */
.kc-timeline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--kc-space-5);
	list-style: none;
	margin: var(--kc-space-6) 0 var(--kc-space-6);
	padding: 0;
	max-width: none;
	counter-reset: kc-step;
}

.kc-timeline__item {
	position: relative;
	margin: 0;
	padding-top: var(--kc-space-5);
	border-top: 3px solid var(--kc-cyan);
}

.kc-timeline__date {
	font-family: var(--kc-font-title);
	font-size: var(--kc-text-xl);
	font-weight: 700;
	color: var(--kc-ink);
	margin: 0 0 var(--kc-space-2);
}

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

/* ==========================================================================
   LISTE À COCHES
   ========================================================================== */
.kc-checklist {
	list-style: none;
	padding: 0;
	margin-bottom: var(--kc-space-5);
}

.kc-checklist li {
	position: relative;
	padding-left: 1.9em;
}

.kc-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.05em;
	display: grid;
	place-items: center;
	width: 1.35em;
	height: 1.35em;
	font-size: 0.75em;
	font-weight: 700;
	color: var(--kc-mint-ink);
	background-color: var(--kc-tint-mint);
	border-radius: 50%;
}

/* ==========================================================================
   CONTENU ÉDITORIAL (sortie de l'éditeur)
   ========================================================================== */
.kc-prose h3 {
	margin-top: var(--kc-space-6);
}

.kc-prose > :first-child {
	margin-top: 0;
}

.kc-prose > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   LISTES DE CONTENU

   Ni les petites puces grises d'origine, ni des cartes encadrées : une carte
   par entrée créait des boîtes de hauteurs inégales et beaucoup de vide.
   La liste reste une liste — simplement marquée d'une coche aux couleurs de
   la marque, sans cadre, sans ombre et sans fond.

   Les listes ordonnées (<ol>) gardent leur numérotation : l'ordre y porte du
   sens (étapes, chronologie).
   ========================================================================== */
.kc-prose ul {
	list-style: none;
	margin: var(--kc-space-4) 0;
	padding: 0;
}

.kc-prose ul li {
	position: relative;
	margin: 0 0 var(--kc-space-2);
	padding-inline-start: 1.75rem;
	overflow-wrap: break-word;
}

/* Coche discrète, tracée en SVG plutôt qu'en pastille pleine : elle marque
   l'entrée sans l'encadrer. Purement décorative — l'information reste
   entièrement portée par le texte. */
.kc-prose ul li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.3em;
	width: 1.05rem;
	height: 1.05rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303bee3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Une liste imbriquée retrouve une puce simple. */
.kc-prose ul ul {
	margin: var(--kc-space-2) 0 0;
	padding-inline-start: 1.35em;
	list-style: disc;
}

.kc-prose ul ul li {
	padding-inline-start: 0;
}

.kc-prose ul ul li::before {
	content: none;
}

.kc-prose ul ul li::marker {
	color: var(--kc-link);
}

.kc-prose ol li::marker {
	color: var(--kc-link);
}

/* ==========================================================================
   SOUS-SECTIONS EN CARTES

   Les suites « sous-titre + paragraphe » (explorations, types d'allergies,
   bilans) s'empilaient en une colonne étroite. Réparties en grille, elles
   occupent la largeur de la section et reprennent le vocabulaire des cartes
   de l'accueil.
   ========================================================================== */
.kc-subgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--kc-space-4);
	margin-top: var(--kc-space-5);
}

.kc-subcard {
	min-width: 0;
	padding: var(--kc-space-5);
	background-color: var(--kc-white);
	border: 1px solid rgb(15 40 61 / 8%);
	border-radius: var(--kc-radius);
	box-shadow: 0 1px 2px rgb(15 40 61 / 4%);
}

.kc-subcard > :first-child,
.kc-subcard h3 {
	margin-top: 0;
}

.kc-subcard > :last-child {
	margin-bottom: 0;
}

.kc-subcard p {
	max-width: none;
}

.kc-section--surface .kc-subcard {
	box-shadow: none;
}

.kc-prose .kc-subcard ul {
	margin: var(--kc-space-3) 0 0;
}

/* ==========================================================================
   IMAGES ET EMPLACEMENTS
   ========================================================================== */
.kc-image {
	width: 100%;
	border-radius: var(--kc-radius);
}

.kc-media-placeholder {
	display: grid;
	place-items: center;
	min-height: 260px;
	padding: var(--kc-space-5);
	text-align: center;
	background-color: var(--kc-surface);
	border: 2px dashed var(--kc-border-strong);
	border-radius: var(--kc-radius);
}

.kc-article__cover {
	width: 100%;
	border-radius: var(--kc-radius-lg);
	margin-bottom: var(--kc-space-5);
}

.kc-byline {
	display: inline-block;
	padding: 0.35em 0.9em;
	font-size: var(--kc-text-sm);
	font-weight: 600;
	color: var(--kc-mint-ink);
	background-color: var(--kc-tint-mint);
	border-radius: var(--kc-radius-pill);
}

/* ==========================================================================
   HERO DES PAGES D'EXPERTISE
   ========================================================================== */
.kc-hero--accent-cyan {
	background: linear-gradient(180deg, var(--kc-tint-cyan) 0%, transparent 100%);
}

.kc-hero--accent-mint {
	background: linear-gradient(180deg, var(--kc-tint-mint) 0%, transparent 100%);
}

.kc-hero--accent-yellow {
	background: linear-gradient(180deg, var(--kc-tint-yellow) 0%, transparent 100%);
}

.kc-hero--accent-magenta {
	background: linear-gradient(180deg, var(--kc-tint-magenta) 0%, transparent 100%);
}

/* Bannière des pages internes : la teinte s'éteint en douceur vers le bas.

   Une version antérieure gardait la couleur pleine jusqu'en bas pour qu'une
   découpe en vague ait un bord à trancher. Le résultat était trop lourd, en
   magenta notamment : c'est le fondu qui assure la transition, et la vague
   devient inutile. */
.kc-hero--banniere {
	padding-block-end: var(--kc-section-y);
}

/* ==========================================================================
   INFORMATIONS PRATIQUES
   ========================================================================== */
.kc-infos {
	display: grid;
	grid-template-columns: 1fr 1fr 1.3fr;
	gap: var(--kc-space-6);
	align-items: start;
}

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

	.kc-infos__map {
		grid-column: 1 / -1;
	}
}

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

.kc-infos__address {
	font-style: normal;
	margin-bottom: var(--kc-space-5);
}

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

.kc-hours {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--kc-space-4);
	font-size: var(--kc-text-base);
}

.kc-hours th,
.kc-hours td {
	padding: 0.45rem 0;
	text-align: left;
	border-bottom: 1px solid var(--kc-border);
}

.kc-hours th {
	font-weight: 600;
}

.kc-hours td {
	text-align: right;
	color: var(--kc-ink-soft);
}

/* ---------- Carte différée ---------- */
.kc-map {
	position: relative;
	min-height: 320px;
	border-radius: var(--kc-radius);
	overflow: hidden;
	background-color: var(--kc-surface);
	border: 1px solid var(--kc-border);
}

.kc-map__button {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--kc-space-2);
	width: 100%;
	padding: var(--kc-space-5);
	text-align: center;
	font-family: inherit;
	font-size: var(--kc-text-base);
	font-weight: 600;
	color: var(--kc-ink);
	background: none;
	border: 0;
	cursor: pointer;
}

.kc-map__button:hover {
	background-color: var(--kc-tint-cyan);
}

.kc-map__icon {
	font-size: 1.8rem;
}

.kc-map__hint {
	font-weight: 400;
	font-size: var(--kc-text-sm);
	color: var(--kc-ink-soft);
	max-width: 34ch;
}

.kc-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	border: 0;
}

.kc-map--placeholder {
	display: grid;
	place-items: center;
	padding: var(--kc-space-5);
	text-align: center;
}

/* ==========================================================================
   AVIS GOOGLE
   ========================================================================== */
.kc-reviews__fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kc-space-3);
	padding: var(--kc-space-6);
	text-align: center;
	background-color: var(--kc-white);
	border: 1px solid var(--kc-border);
	border-radius: var(--kc-radius);
}

.kc-reviews__fallback p {
	margin: 0;
	max-width: 52ch;
}

/* ==========================================================================
   FORMULAIRES
   ========================================================================== */
/* Le titre de section est centré dans son conteneur ; sans marges
   automatiques, le formulaire — plus étroit que le conteneur — restait collé
   à gauche et les deux axes ne coïncidaient pas. */
.kc-form {
	max-width: 720px;
	margin-inline: auto;
}

.kc-fieldset {
	margin: 0 0 var(--kc-space-6);
	padding: var(--kc-space-5);
	border: 1px solid var(--kc-border);
	border-radius: var(--kc-radius);
	background-color: var(--kc-white);
}

.kc-fieldset > legend {
	padding: 0 var(--kc-space-2);
	font-family: var(--kc-font-title);
	font-size: var(--kc-h4);
	font-weight: 700;
	color: var(--kc-ink);
}

.kc-field {
	margin-bottom: var(--kc-space-4);
}

.kc-field:last-child {
	margin-bottom: 0;
}

.kc-checkboxes {
	border: 0;
	padding: 0;
	margin-top: var(--kc-space-4);
}

.kc-checkboxes > legend {
	font-size: var(--kc-text-sm);
	font-weight: 600;
	padding: 0;
}

.kc-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--kc-space-3);
	margin-bottom: var(--kc-space-3);
}

.kc-checkbox input[type="checkbox"] {
	width: 22px;
	height: 22px;
	min-height: 0;
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: var(--kc-cta);
}

.kc-checkbox label {
	margin: 0;
	font-weight: 400;
	font-size: var(--kc-text-base);
	line-height: 1.5;
}

.kc-field-error {
	margin: var(--kc-space-2) 0 0;
	font-size: var(--kc-text-sm);
	font-weight: 600;
	color: var(--kc-cta-hover); /* 6,69:1 ✅ */
}

.kc-field-error::before {
	content: "⚠ ";
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
	border-color: var(--kc-cta-hover);
	border-width: 2px;
}

.kc-form__errors {
	margin-bottom: var(--kc-space-5);
	padding: var(--kc-space-4) var(--kc-space-5);
	background-color: var(--kc-tint-magenta);
	border-left: 4px solid var(--kc-cta-hover);
	border-radius: var(--kc-radius-sm);
}

.kc-form__errors ul {
	margin-bottom: 0;
}

.kc-form__errors a {
	color: var(--kc-cta-hover);
}

/* Piège à robots : retiré du flux sans display:none, que certains
   automates savent détecter. */
.kc-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kc-form-success {
	padding: var(--kc-space-6);
	background-color: var(--kc-tint-mint);
	border-radius: var(--kc-radius-lg);
	border: 1px solid var(--kc-mint);
}

.kc-form-success h2 {
	margin-top: 0;
}

.kc-search__row {
	display: flex;
	gap: var(--kc-space-2);
	margin-top: var(--kc-space-2);
}

.kc-search__row input {
	flex: 1 1 auto;
}

/* ==========================================================================
   GALERIE
   ========================================================================== */
.kc-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kc-space-2);
	margin-bottom: var(--kc-space-6);
}

.kc-filter {
	min-height: var(--kc-tap);
	padding: 0.5rem 1.1rem;
	font-family: inherit;
	font-size: var(--kc-text-sm);
	font-weight: 600;
	color: var(--kc-ink);
	background-color: var(--kc-white);
	border: 1px solid var(--kc-border-strong);
	border-radius: var(--kc-radius-pill);
	cursor: pointer;
}

.kc-filter:hover {
	background-color: var(--kc-surface);
}

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

.kc-gallery__item {
	margin: 0;
}

.kc-gallery__item figcaption {
	margin-top: var(--kc-space-2);
	font-size: var(--kc-text-sm);
	color: var(--kc-ink-soft);
}

.kc-gallery__item[hidden] {
	display: none;
}

/* ==========================================================================
   PAGINATION ET RÉSULTATS
   ========================================================================== */
.kc-pagination ul,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kc-space-2);
	list-style: none;
	margin: var(--kc-space-6) 0 0;
	padding: 0;
	justify-content: center;
}

.kc-pagination li {
	margin: 0;
}

.kc-pagination a,
.kc-pagination span,
.nav-links a,
.nav-links span {
	display: grid;
	place-items: center;
	min-width: var(--kc-tap);
	min-height: var(--kc-tap);
	padding-inline: var(--kc-space-3);
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--kc-border-strong);
	border-radius: var(--kc-radius-sm);
	color: var(--kc-ink);
}

.kc-pagination .current,
.nav-links .current {
	color: var(--kc-white);
	background-color: var(--kc-ink);
	border-color: var(--kc-ink);
}

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

.kc-results__item {
	padding: var(--kc-space-4) 0;
	border-bottom: 1px solid var(--kc-border);
}

/* ==========================================================================
   BANDEAU DE CONSENTEMENT
   ========================================================================== */
.kc-consent {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 200;
	padding: var(--kc-space-4) var(--kc-gutter)
		calc(var(--kc-space-4) + env(safe-area-inset-bottom));
	background-color: var(--kc-white);
	border-top: 2px solid var(--kc-ink);
	box-shadow: 0 -8px 28px rgb(24 50 71 / 16%);
}

.kc-consent__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kc-space-4);
	max-width: var(--kc-container);
	margin-inline: auto;
}

.kc-consent__title {
	font-size: var(--kc-text-md);
	margin: 0 0 var(--kc-space-1);
}

.kc-consent__text {
	margin: 0;
	font-size: var(--kc-text-sm);
	color: var(--kc-ink-soft);
	max-width: 70ch;
}

/* Accepter et refuser ont le même poids visuel : le refus doit être aussi
   simple que l'acceptation. */
.kc-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kc-space-2);
}

.kc-consent__actions .kc-btn {
	min-width: 150px;
}

@media (max-width: 860px) {
	.kc-consent {
		bottom: 68px; /* au-dessus de la barre d'action collante */
	}

	.kc-consent__actions {
		width: 100%;
	}

	.kc-consent__actions .kc-btn {
		flex: 1 1 auto;
	}
}

/* ==========================================================================
   PANNEAU À ICÔNES

   Reprend le bloc « atouts » de la maquette de référence : un cadre arrondi
   qui rassemble des libellés courts, chacun coiffé d'une pastille colorée.
   Il remplace la colonne de puces qui laissait la moitié droite de la section
   vide, et rend la couleur de la marque au corps de page.
   ========================================================================== */
.kc-panneau {
	margin: var(--kc-space-5) 0;
	padding: var(--kc-space-6) var(--kc-space-5);
	background-color: var(--kc-white);
	border: 2px solid var(--kc-tint-cyan);
	border-radius: var(--kc-radius-lg);
}

/* Les sélecteurs sont préfixés .kc-prose : sans cela, la coche appliquée à
   toutes les listes de contenu viendrait doubler la pastille. */
.kc-prose .kc-panneau__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
	gap: var(--kc-space-5) var(--kc-space-4);
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kc-prose .kc-panneau__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kc-space-2);
	min-width: 0;
	margin: 0;
	padding: 0;
	text-align: center;
	overflow-wrap: break-word;
}

.kc-prose .kc-panneau__item::before {
	content: none;
}

.kc-panneau__icone {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	flex: none;
}

.kc-panneau__icone::before {
	content: "";
	width: 1.6rem;
	height: 1.6rem;
	background-color: currentColor;
	-webkit-mask: var(--kc-forme) center / contain no-repeat;
	mask: var(--kc-forme) center / contain no-repeat;
}

/* Teintes claires en fond, tracé assombri au-dessus : le cyan et la menthe de
   marque ne passent pas le contraste sur blanc en petit format. */
.kc-panneau__icone--cyan {
	background-color: var(--kc-tint-cyan);
	color: #0b7f96;
}

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

.kc-panneau__icone--jaune {
	background-color: var(--kc-tint-yellow);
	color: #8a5e06;
}

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

.kc-panneau__label {
	font-size: var(--kc-text-sm);
	font-weight: 600;
	line-height: 1.35;
}

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

	.kc-prose .kc-panneau__liste {
		gap: var(--kc-space-4) var(--kc-space-3);
	}
}

/* Formes des pastilles. Le tracé sert de masque : la couleur vient de la
   classe de teinte (currentColor), pas du SVG — impossible autrement, car
   les gabarits filtrent le contenu par wp_kses_post(), qui retire les <svg>
   inline. Un masque en CSS traverse ce filtre sans risque. */
.kc-panneau__icone--i1 { --kc-forme: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020.5c-.3%200-.6-.1-.8-.3C7%2016.6%203.5%2013.6%203.5%209.8A4.8%204.8%200%200%201%2012%206.9a4.8%204.8%200%200%201%208.5%202.9c0%203.8-3.5%206.8-7.7%2010.4-.2.2-.5.3-.8.3Z'/%3E%3C/svg%3E"); }
.kc-panneau__icone--i2 { --kc-forme: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203.2%205%206v5.2c0%204.4%202.9%207.9%207%209.6%204.1-1.7%207-5.2%207-9.6V6l-7-2.8Z'/%3E%3Cpath%20d='m9.2%2011.8%202%202%203.6-3.6'/%3E%3C/svg%3E"); }
.kc-panneau__icone--i3 { --kc-forme: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='6.5'/%3E%3Cpath%20d='m16%2016%204.5%204.5'/%3E%3C/svg%3E"); }
.kc-panneau__icone--i4 { --kc-forme: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m12%203.8%202.5%205.1%205.6.8-4%204%20.9%205.6-5-2.6-5%202.6.9-5.6-4-4%205.6-.8L12%203.8Z'/%3E%3C/svg%3E"); }
.kc-panneau__icone--i5 { --kc-forme: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='8.5'%20cy='8'%20r='3'/%3E%3Ccircle%20cx='16.5'%20cy='9.5'%20r='2.2'/%3E%3Cpath%20d='M3.5%2019.5c0-2.8%202.2-5%205-5s5%202.2%205%205'/%3E%3Cpath%20d='M15%2014.8c2.7-.6%205.5%201.2%205.5%204.7'/%3E%3C/svg%3E"); }
.kc-panneau__icone--i6 { --kc-forme: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4.5%205.2h5a3%203%200%200%201%203%203v11a2.5%202.5%200%200%200-2.5-2.5h-5.5V5.2Z'/%3E%3Cpath%20d='M19.5%205.2h-5a3%203%200%200%200-3%203v11a2.5%202.5%200%200%201%202.5-2.5h5.5V5.2Z'/%3E%3C/svg%3E"); }
.kc-panneau__icone--i7 { --kc-forme: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4.5%2019.5V9.8'/%3E%3Cpath%20d='M9.8%2019.5V5.5'/%3E%3Cpath%20d='M15%2019.5v-7'/%3E%3Cpath%20d='M20.3%2019.5V8'/%3E%3C/svg%3E"); }
.kc-panneau__icone--i8 { --kc-forme: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8.5%2012V6.2a1.6%201.6%200%200%201%203.2%200V11'/%3E%3Cpath%20d='M11.7%2011V5.4a1.6%201.6%200%200%201%203.2%200V11'/%3E%3Cpath%20d='M14.9%2011.4V7.8a1.6%201.6%200%200%201%203.2%200v6.4c0%203.3-2.4%206-5.8%206-3%200-4.6-1.6-5.6-3.6l-1.5-3a1.5%201.5%200%200%201%202.4-1.7l.9%201.1'/%3E%3C/svg%3E"); }

/* Liste longue faite de libellés courts : elle se répartit en colonnes plutôt
   que de dérouler une file unique de vingt lignes. Le nombre de colonnes suit
   la place disponible — deux à côté d'une photo, trois en pleine largeur. */
.kc-prose ul.kc-liste--colonnes {
	column-width: 240px;
	column-gap: var(--kc-space-6);
}

.kc-prose ul.kc-liste--colonnes li {
	break-inside: avoid;
}