/* ═══════════════════════════════════════════════════════════════════════════
   Kelly De Lyra — compléments à theme.json
   Tout ce qui relève de l'interaction, du décor et du responsive vit ici ;
   les couleurs, la typo et les espacements restent pilotés par theme.json.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	--kdl-radius-sm: 12px;
	--kdl-radius-md: 20px;
	--kdl-radius-lg: 28px;
	--kdl-ring: rgba(240, 169, 188, 0.45);
	/* Les liens dans le texte. En nuit claire, `accent-deep` était si sombre
	   (9:1) que le lien pouvait monter d'une marche ; le violet pastel est déjà
	   à 5,8:1, l'éclaircir le ferait tomber à 4,3:1 sur les sections teintées.
	   Le lien EST donc l'accent, et c'est le survol qui descend d'un cran. */
	--kdl-lien: #7a4bc0;
	--kdl-lien-actif: #5f35a0;
	/* Hauteur du fondu entre deux sections. */
	--kdl-fondu: clamp(3rem, 7vw, 7rem);
}

html {
	scroll-behavior: smooth;
}

::selection {
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--ink);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

/* Un titre qui sert de lien reste un titre : pas de soulignement. */
:where(h1, h2, h3, h4, h5, h6) a {
	text-decoration: none;
}

:where(h1, h2, h3, h4, h5, h6) a:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

/* Accessibilité : la cible du focus doit rester visible sur fond clair. */
:where(a, button, input, textarea, select, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-deep);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ─── En-tête ─────────────────────────────────────────────────────────────── */

.kdl-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.kdl-header .wp-block-site-logo img {
	transition: opacity 0.25s ease;
}

.kdl-header .wp-block-site-logo a:hover img {
	opacity: 0.75;
}

/* Barre d'en-tête.

   Grand écran : trois colonnes, le logo au centre. Les deux colonnes latérales
   font `1fr` chacune — c'est ce qui centre le logo sur la page et non entre les
   deux menus, dont les largeurs diffèrent.

   Petit écran : une ligne, bouton de menu à gauche, logo au centre, bouton de
   rendez-vous à droite ; les deux menus déployés disparaissent. */
.kdl-barre {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
}

.kdl-barre > .kdl-logo {
	justify-self: center;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1rem;
}

.kdl-logo__symbole {
	margin: 0;
}

/* Le patronyme reprend exactement la calligraphie et la terracotta du pied de
   page : la couleur et la police viennent de `is-style-kdl-script`, seule la
   taille est propre à l'en-tête. */
.kdl-logo__nom {
	margin: 0;
	font-size: 2.4rem;
	line-height: 1;
	white-space: nowrap;
}

.kdl-logo__nom a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.25s ease;
}

.kdl-logo__nom a:hover {
	opacity: 0.75;
}

.kdl-barre > .kdl-droite {
	justify-self: end;
}

/* `.kdl-barre` en tête du sélecteur : la classe de mise en page que WordPress
   génère pour le bloc de navigation pose `display: flex` avec la même
   spécificité, et elle est écrite après la feuille du thème. */
.kdl-barre .kdl-nav--mobile {
	display: none;
}

/* Les deux menus latéraux se partagent la largeur restante autour du logo :
   ils sont resserrés d'un cran par rapport au reste du site, sinon celui de
   gauche passe sur deux lignes.

   Le sélecteur porte `.kdl-barre` pour passer devant `.kdl-nav …` plus bas :
   à spécificité égale, c'est la dernière règle du fichier qui l'emporterait. */
.kdl-barre .kdl-nav--gauche .wp-block-navigation-item__content,
.kdl-barre .kdl-nav--droite .wp-block-navigation-item__content {
	font-size: clamp(0.7rem, 0.92vw, 0.84rem);
	letter-spacing: 0.05em;
	white-space: nowrap;
}

/* Les colonnes latérales valent toutes deux la plus large des deux menus :
   c'est le prix du logo centré sur la page. Le menu de gauche mesure donc
   pour les deux, et chaque pixel qu'il gagne en vaut deux sur la barre.

   `nowrap` partout : plutôt que de passer à la ligne — ce qui déformait la
   barre bien avant le seuil du bouton de menu — les entrées se resserrent avec
   la fenêtre grâce au `clamp` ci-dessus. */
.kdl-barre .kdl-nav--gauche,
.kdl-barre .kdl-nav--droite,
.kdl-barre .kdl-nav--gauche .wp-block-navigation__container,
.kdl-barre .kdl-nav--droite .wp-block-navigation__container,
.kdl-barre .kdl-droite {
	--wp--style--block-gap: clamp(0.5rem, 0.9vw, 0.85rem);
	gap: clamp(0.5rem, 0.9vw, 0.85rem);
	flex-wrap: nowrap;
}

/* Le libellé du bouton se coupait mot à mot dès que la colonne se resserrait,
   jusqu'à une pile de lettres. Il ne se casse plus, et la colonne ne descend
   pas sous la largeur de son contenu. */
.kdl-barre .kdl-header-cta .wp-block-button__link {
	white-space: nowrap;
}

.kdl-barre > .kdl-droite {
	min-width: max-content;
}

/* Seuil du menu déplié. À 1150 px la barre tenait au pixel près et le bouton
   de rendez-vous se coupait sur son bord droit — défaut présent bien avant
   le renommage du 2026-08-14, mesuré sur la production. 1200 px laisse la
   marge qui manquait ; en dessous, on passe au bouton de menu. */
@media (max-width: 1199px) {
	.kdl-barre {
		grid-template-columns: 1fr auto 1fr;
	}

	.kdl-barre .kdl-nav--gauche,
	.kdl-barre .kdl-nav--droite {
		display: none;
	}

	.kdl-barre .kdl-nav--mobile {
		display: block;
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}

	.kdl-barre > .kdl-logo {
		grid-column: 2;
		grid-row: 1;
	}

	.kdl-barre > .kdl-droite {
		grid-column: 1;
		grid-row: 1;
	}
}

/* Sur téléphone, le bouton de rendez-vous passe sous le logo, sur toute la
   largeur : à côté du logo il l'aurait décentré, et c'est l'action principale
   de la page — elle mérite sa propre ligne. */
@media (max-width: 781px) {
	.kdl-barre > .kdl-droite {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: center;
		min-width: 0;
	}

	.kdl-barre .kdl-nav--mobile {
		grid-column: 3;
	}
}

/* Navigation : capitales espacées, soulignement qui se déploie. */
.kdl-nav .wp-block-navigation-item__content {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	position: relative;
	padding-block: 0.5rem;
}

.kdl-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.1rem;
	height: 1px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.kdl-nav .wp-block-navigation-item__content:hover::after,
.kdl-nav .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Sous-menus : carte douce plutôt que bloc rectangulaire. */
.kdl-nav .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kdl-radius-md);
	box-shadow: var(--wp--preset--shadow--soft);
	padding: 0.5rem;
	min-width: 16rem;
	overflow: hidden;
}

.kdl-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 0.9375rem;
	padding: 0.55rem 0.85rem;
	border-radius: var(--kdl-radius-sm);
	width: 100%;
}

.kdl-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

.kdl-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent-deep);
}

/* Menu mobile : panneau encre, texte ivoire, ocre pour ce qui se touche.
   Le site est clair d'un bout à l'autre ; le menu est le seul endroit où un
   aplat sombre a sa place — il tranche franchement et se lit de loin. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--base) !important;
	padding: clamp(1.5rem, 6vw, 3rem);
}

.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
}

/* Un filet entre les entrées : sans lui, les onze lignes forment un bloc. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block;
	padding: 0.7rem 0;
}

/* Les sous-menus se lisent en retrait, d'un ivoire adouci. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
	color: rgba(255, 255, 255, 0.76);
}

/* Ce qui se touche est ocre : bouton de fermeture et chevrons. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--accent);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.05rem;
	letter-spacing: 0.06em;
}

/* Sur mobile, tout le texte grandit d'un cran par la racine plutôt que taille
   par taille : le site n'emploie que des `rem`, y compris dans les styles posés
   en ligne par l'éditeur de blocs — que même une règle de feuille ne pourrait
   pas rattraper sans `!important`. 16 px → 18 px, espacements compris, ce qui
   garde les proportions. */
@media (max-width: 781px) {
	html {
		font-size: 125%;
	}

	/* Mais les titres, eux, ne suivent pas ce cran : à 20 px de base, le titre
	   du hero montait à 55 px et mangeait le premier écran d'un téléphone. Ils
	   sont ramenés à des valeurs absolues, indépendantes de la racine — le texte
	   courant gagne en lisibilité sans que la page devienne une affiche. */
	h1,
	.wp-block-post-title {
		font-size: 38px;
		line-height: 1.14;
	}

	h2 {
		font-size: 32px;
		line-height: 1.18;
	}

	h3 {
		font-size: 23px;
	}
}

/* Le panneau tient 90 % de la hauteur visible et défile en son sein.
   Sans hauteur bornée, WordPress le laisse en `height: auto` : posé en
   position fixed, il s'étire alors sous le bas de l'écran et le menu ne peut
   plus se dérouler — les dernières entrées deviennent inatteignables.
   `dvh` suit la barre d'adresse mobile ; `vh` reste le repli. */
@media (max-width: 781px) {
	.wp-block-navigation__responsive-container.is-menu-open {
		top: 0;
		bottom: auto;
		height: 90vh;
		height: 90dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
		border-bottom-left-radius: var(--kdl-radius-lg);
		border-bottom-right-radius: var(--kdl-radius-lg);
		box-shadow: 0 18px 40px rgba(51, 42, 69, 0.12);
	}

	/* Une entrée par ligne, alignées à gauche, du haut vers le bas. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 0.35rem;
	}

	/* Les sous-menus (Astrologie, Constellations) se lisent en retrait plutôt
	   qu'en survol : sur un écran tactile, le survol n'existe pas. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		padding-left: 1rem;
		gap: 0.25rem;
	}

	/* Pied de page : les deux colonnes de liens répètent le menu et allongent la
	   page de dix écrans sur un téléphone. Restent l'adresse, le téléphone et
	   les mentions — ce qu'on vient réellement y chercher. */
	.kdl-footer-nav {
		display: none;
	}
}

/* ─── Décors ──────────────────────────────────────────────────────────────── */

/* Le halo solaire ocre (`is-style-kdl-halo`) a été retiré définitivement :
   posé derrière une section, il y déposait une tache chaude qui alourdissait
   le haut de page — exactement ce que l'éclaircissement de la charte visait à
   supprimer. Ne pas le réintroduire. */

/* Carte douce : bordure fine, coin généreux, léger relèvement au survol.

   La carte est en lin SUR fond ivoire, et non l'inverse. C'est ce qui permet
   à toutes les sections de rester ivoire : avant, les cartes étaient ivoire et
   il fallait teinter la section entière en lin pour qu'elles se détachent —
   d'où un site majoritairement beige. */
.is-style-kdl-card {
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kdl-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: 0 1px 2px rgba(51, 42, 69, 0.04);
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Le titre d'une carte porte le propos : en graisse 500, le Cormorant se
   confondait avec le paragraphe qui le suit. Graisse pleine, encre franche et
   un filet ocre court au-dessus, qui pose le titre sans l'encadrer. */
/* Sans `:first-child` : dans les cartes d'étapes, le titre est précédé du
   surtitre « Étape 1 » et se serait retrouvé seul à ne pas être renforcé. */
.is-style-kdl-card > :where(h2, h3, h4),
.is-style-kdl-card > .wp-block-heading {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.005em;
	/* `!important` à contrecœur, mais l'éditeur pose la taille en style en ligne
	   sur chaque titre — aucune règle de feuille ne passe devant. Une valeur
	   unique remplace au passage les 1,25 et 1,375 rem posés au fil des pages. */
	font-size: 1.45rem !important;
	line-height: 1.25;
}

@media (max-width: 781px) {
	.is-style-kdl-card > :where(h2, h3, h4),
	.is-style-kdl-card > .wp-block-heading {
		font-size: 25px !important;
	}
}

/* Le surtitre d'étape prend lui aussi de la voix : c'est le repère de lecture
   de la série, il doit s'attraper d'un coup d'œil. */
.is-style-kdl-card > .kdl-overline {
	color: var(--wp--preset--color--accent-deep);
	font-weight: 700;
}

.is-style-kdl-card > :where(h2, h3):first-child::before {
	content: "";
	display: block;
	width: 2rem;
	height: 2px;
	margin-bottom: 0.75rem;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
}

/* Visuel en tête de carte : il déborde du rembourrage pour venir se caler sur
   les bords arrondis, comme une vignette d'entrée. */
/* Le visuel ferme la carte en bande pleine largeur, et le bouton se pose
   dessus. Bande de hauteur fixe plutôt que de proportion : c'est elle qui sert
   aussi de repère au bouton, qui se cale exactement en face. */
.kdl-cards .is-style-kdl-card {
	position: relative;
	--kdl-bande: clamp(9rem, 15vw, 12rem);
	--kdl-carte-marge: clamp(1.5rem, 3vw, 2.25rem);
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* La mise en page « constrained » de WordPress pose `margin-left/right: auto`
   en `!important` sur les enfants du groupe. En colonne flex, ces marges
   automatiques l'emportent sur l'étirement : chaque bloc se rétrécit à son
   contenu et se centre. Le `!important` répond ici à un `!important`, il n'y a
   pas d'autre issue sans toucher aux attributs du bloc dans toutes les pages. */
.kdl-cards .is-style-kdl-card > * {
	margin-inline: 0 !important;
	max-width: none;
}

/* Les textes des deux cartes n'ont pas la même longueur : le `margin-top: auto`
   pousse le visuel au pied de chaque carte, et comme sa hauteur est fixe, les
   deux images se retrouvent alignées et de même taille. */
.kdl-carte-visuel {
	display: block;
	margin-top: auto;
	margin-bottom: 0;
	padding-top: var(--kdl-carte-marge);
}

.kdl-carte-visuel img {
	display: block;
	width: 100%;
	height: var(--kdl-bande);
	object-fit: cover;
	border-radius: var(--kdl-radius-md);
}

/* Le bouton ne se pose sur la bande que si la carte a un visuel. Sans lui, il
   s'affichait en absolu au beau milieu du paragraphe, en ivoire translucide :
   illisible, et il masquait le texte qu'il recouvrait. */
.kdl-cards .is-style-kdl-card:has(.kdl-carte-visuel) .wp-block-buttons {
	position: absolute;
	left: var(--kdl-carte-marge);
	right: var(--kdl-carte-marge);
	bottom: var(--kdl-carte-marge);
	height: var(--kdl-bande);
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

/* Sur la bande sombre, le contour ocre du bouton tombe sous les 4,5:1. Il
   passe en ivoire, qui tient largement le contraste. */
.kdl-cards .is-style-kdl-card:has(.kdl-carte-visuel) .wp-block-buttons .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	background: rgba(51, 42, 69, 0.28);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.kdl-cards .is-style-kdl-card:has(.kdl-carte-visuel) .wp-block-buttons .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

/* Hauteur égale uniquement dans une grille de cartes : ailleurs, une carte
   isolée dans une colonne s'étirerait sur toute la hauteur pour rien. */
.kdl-cards .is-style-kdl-card {
	height: 100%;
}

.is-style-kdl-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--lift);
	border-color: var(--kdl-ring);
}

/* Une carte qui contient un lien devient entièrement cliquable au survol. */
.is-style-kdl-card .wp-block-buttons {
	margin-top: auto;
}

/* Liste étoilée : la petite étoile à 4 branches du logo en puce. */
.is-style-kdl-checklist {
	list-style: none;
	padding-left: 0;
}

.is-style-kdl-checklist li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.85rem;
}

.is-style-kdl-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 14px;
	height: 14px;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.8 5.6 5.6 10.4 12 12-6.4 1.6-11.2 6.4-12 12-.8-5.6-5.6-10.4-12-12C6.4 10.4 11.2 5.6 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.8 5.6 5.6 10.4 12 12-6.4 1.6-11.2 6.4-12 12-.8-5.6-5.6-10.4-12-12C6.4 10.4 11.2 5.6 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Les valeurs : deux colonnes de mots courts, centrées sous le titre. Les listes
   gardent leur alignement à gauche — sinon les étoiles se décrochent des mots —
   mais chacune ne prend que la largeur de son texte et se centre dans sa colonne. */
.kdl-valeurs {
	justify-content: center;
	gap: clamp(3rem, 14vw, 11rem);
}

/* Les colonnes ne prennent que la largeur de leurs mots : autrement elles
   partagent toute la ligne et les deux listes se retrouvent aux deux bords. */
/* Trois classes : le bloc colonnes de WordPress pose flex-basis:0 / flex-grow:1
   depuis une feuille chargée après celle-ci, et une spécificité égale perdrait. */
.wp-block-columns.kdl-valeurs > .wp-block-column {
	flex-basis: auto;
	flex-grow: 0;
}

.kdl-valeurs .wp-block-list {
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
}

/* Titre manuscrit — reprend la calligraphie du logo, à doser. */
.is-style-kdl-script {
	font-family: var(--wp--preset--font-family--script);
	font-weight: 400;
	color: var(--wp--preset--color--accent-deep);
	line-height: 1.3;
}

/* Séparateur « rayons de soleil » entre deux sections. */
.kdl-rays {
	display: block;
	width: 120px;
	height: 24px;
	margin-inline: auto;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cg stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M60 2v9M44 6l4 8M76 6l-4 8M29 13l7 5M91 13l-7 5M12 20h14M108 20H94'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cg stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M60 2v9M44 6l4 8M76 6l-4 8M29 13l7 5M91 13l-7 5M12 20h14M108 20H94'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* Deux autres séparateurs, pour que les pages ne se ponctuent pas toutes de la
   même façon : le croissant du logo, et son étoile à quatre branches. */
.kdl-moon,
.kdl-star {
	display: block;
	margin-inline: auto;
	background-color: var(--wp--preset--color--accent);
}

.kdl-moon {
	width: 96px;
	height: 26px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 26' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M4 13h22M70 13h22'/%3E%3Cpath d='M56 13a10 10 0 1 1-9.6-10 8 8 0 0 0 9.6 10z'/%3E%3Cpath d='M36 4.5v3M34.5 6h3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 26' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M4 13h22M70 13h22'/%3E%3Cpath d='M56 13a10 10 0 1 1-9.6-10 8 8 0 0 0 9.6 10z'/%3E%3Cpath d='M36 4.5v3M34.5 6h3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kdl-star {
	width: 110px;
	height: 22px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 22'%3E%3Cg fill='%23000'%3E%3Cpath d='M55 3c.4 3.2 3.2 6 8 8-4.8 1-8 3.8-8 8-.4-3.2-3.2-6-8-8 4.8-1 7.6-3.8 8-8z'/%3E%3Cpath d='M31 7c.2 1.9 1.9 3.6 4.8 4.8-2.9.6-4.8 2.3-4.8 4.8-.2-1.9-1.9-3.6-4.8-4.8 2.9-.6 4.6-2.3 4.8-4.8z' opacity='.75'/%3E%3Cpath d='M79 7c.2 1.9 1.9 3.6 4.8 4.8-2.9.6-4.8 2.3-4.8 4.8-.2-1.9-1.9-3.6-4.8-4.8 2.9-.6 4.6-2.3 4.8-4.8z' opacity='.75'/%3E%3Ccircle cx='10' cy='11' r='1.4' opacity='.55'/%3E%3Ccircle cx='100' cy='11' r='1.4' opacity='.55'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 22'%3E%3Cg fill='%23000'%3E%3Cpath d='M55 3c.4 3.2 3.2 6 8 8-4.8 1-8 3.8-8 8-.4-3.2-3.2-6-8-8 4.8-1 7.6-3.8 8-8z'/%3E%3Cpath d='M31 7c.2 1.9 1.9 3.6 4.8 4.8-2.9.6-4.8 2.3-4.8 4.8-.2-1.9-1.9-3.6-4.8-4.8 2.9-.6 4.6-2.3 4.8-4.8z' opacity='.75'/%3E%3Cpath d='M79 7c.2 1.9 1.9 3.6 4.8 4.8-2.9.6-4.8 2.3-4.8 4.8-.2-1.9-1.9-3.6-4.8-4.8 2.9-.6 4.6-2.3 4.8-4.8z' opacity='.75'/%3E%3Ccircle cx='10' cy='11' r='1.4' opacity='.55'/%3E%3Ccircle cx='100' cy='11' r='1.4' opacity='.55'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* Le titre de héros s'équilibre sur deux ou trois lignes plutôt que de laisser
   un mot orphelin en bas. */
/* Hero en deux colonnes : le texte à gauche, la photo à droite. Le texte
   n'est jamais posé sur l'image — c'est ce qui rendait le fond photographique
   impraticable — et la photo ponctue l'entrée de page au lieu de la couper. */
.kdl-hero--split .kdl-hero-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--kdl-radius-lg);
}

.kdl-hero--split .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--40);
}

/* Le titre du hero fendu n'est plus centré : il respire sur sa colonne. */
.kdl-hero--split h1 {
	max-width: none;
	margin-inline: 0;
}

@media (max-width: 781px) {
	/* Empilé, l'image passe sous le texte et se rapproche du paysage : en
	   portrait elle repousserait tout le contenu de la page sous la ligne
	   de flottaison. */
	.kdl-hero--split .kdl-hero-image img {
		aspect-ratio: 4 / 3;
		border-radius: var(--kdl-radius-md);
	}

	/* Une fois les colonnes empilées, l'alignement à gauche n'a plus de colonne
	   à border : tout se centre sous l'image. */
	.kdl-hero--split .wp-block-column > *,
	.kdl-hero--split h1 {
		text-align: center;
	}

	.kdl-hero--split h1 {
		margin-inline: auto;
	}

	/* Les deux boutons « Découvrir » sautent sur téléphone : le menu et le
	   bouton de rendez-vous de l'en-tête suffisent, et l'écran gagne à ce que
	   la photo suive le texte sans intercalaire. */
	.kdl-hero--split .wp-block-buttons {
		display: none;
	}
}

.kdl-hero h1 {
	max-width: 20ch;
	margin-inline: auto;
	text-wrap: balance;
}

.kdl-hero > p {
	text-wrap: pretty;
}

/* Surtitre : petite capitale espacée au-dessus des grands titres. */
.kdl-overline {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-deep);
}

/* ─── Contenu ─────────────────────────────────────────────────────────────── */

/* Les images gardent leur coin arrondi même en pleine largeur maîtrisée. */
.wp-block-image.alignfull img,
.wp-block-cover.alignfull {
	border-radius: 0;
}

.wp-block-cover {
	border-radius: var(--kdl-radius-lg);
	overflow: hidden;
}

/* Visuel de page : une image large mais contenue, arrondie comme les cartes.
   Elle ponctue la page au lieu de la trancher — d'où la marge verticale
   généreuse et le format qui s'allonge un peu sur mobile. */
.kdl-visuel {
	margin-block: var(--wp--preset--spacing--50);
}

.kdl-visuel img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	border-radius: var(--kdl-radius-lg);
}

.kdl-visuel figcaption {
	margin-top: 0.85rem;
	text-align: center;
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--wp--preset--color--ink-soft);
}

@media (max-width: 781px) {
	.kdl-visuel img {
		aspect-ratio: 3 / 2;
		border-radius: var(--kdl-radius-md);
	}

	/* Le bandeau change de format entre les deux écrans, mais rogne toujours au
	   centre : sur `mon-approche`, le téléphone ne garde que 66 % de la largeur,
	   ce qui écarte l'agenda posé à gauche de l'ordinateur et coupe l'écran.
	   Le cadre mobile se cale donc à gauche — pour cette image seulement, la
	   classe étant portée par les visuels de dix pages. */
	.kdl-visuel--gauche img {
		object-position: left center;
	}
}

/* Boutons secondaires : contour ocre sur fond clair. */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--accent-deep);
	background: transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--base);
}

.wp-block-button__link {
	transition: background-color 0.28s ease, color 0.28s ease, transform 0.28s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
}

/* Grilles de cartes : hauteur homogène, colonnes qui respirent. */
.wp-block-columns.kdl-cards .wp-block-column {
	display: flex;
}

/* Tarif mis en avant dans une carte d'offre. */
.kdl-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-deep);
	line-height: 1.1;
}

.kdl-duration {
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}

/* ─── Formulaire de contact ───────────────────────────────────────────────── */

.kdl-form {
	margin-top: var(--wp--preset--spacing--30);
}

.kdl-form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.25rem;
}

.kdl-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1.25rem;
}

.kdl-field label {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.kdl-optional {
	font-weight: 400;
	color: var(--wp--preset--color--ink-soft);
}

.kdl-field input[type="text"],
.kdl-field input[type="email"],
.kdl-field input[type="tel"],
.kdl-field select,
.kdl-field textarea {
	/* Sans border-box, le rembourrage déborde du conteneur sur mobile. */
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kdl-radius-sm);
	padding: 0.75rem 0.9rem;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.kdl-field textarea {
	resize: vertical;
	min-height: 9rem;
	line-height: 1.7;
}

.kdl-field input:focus,
.kdl-field select:focus,
.kdl-field textarea:focus {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px var(--kdl-ring);
	outline: none;
}

/* La case de consentement se lit sur une ligne, pas en colonne. */
.kdl-field--consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.6;
}

.kdl-field--consent input {
	margin-top: 0.25rem;
	accent-color: var(--wp--preset--color--accent-deep);
	flex: none;
}

/* Pot de miel : invisible pour l'humain, atteignable pour le robot. */
.kdl-form-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kdl-form-notice {
	border-radius: var(--kdl-radius-sm);
	padding: 0.9rem 1.1rem;
	font-size: 0.9375rem;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
}

.kdl-form-notice--ok {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
}

.kdl-form-notice--ko {
	border-color: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--accent-deep);
}

@media (max-width: 640px) {
	.kdl-form-row {
		grid-template-columns: 1fr;
	}
}

/* ─── Pied de page ────────────────────────────────────────────────────────── */

.kdl-footer a {
	text-decoration: none;
}

.kdl-footer a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.kdl-footer .wp-block-navigation-item__content {
	font-size: 0.9375rem;
}

/* ─── Fondu entre les sections ────────────────────────────────────────────── */

/* Les sections alternent trois fonds (ivoire, lin, sable) et se touchaient sur
   une ligne nette. Chaque section pose au-dessus d'elle une bande de sa propre
   couleur, dégradée vers le transparent : elle mord sur la fin de la section
   précédente et les deux fonds se rejoignent en fondu.

   `background: inherit` reprend la couleur de la section sans avoir à la
   nommer — un seul bloc de règles couvre les trois fonds, et les suivants. */
.entry-content > section.has-background {
	position: relative;
}

.entry-content > section.has-background:not(:first-child)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-1 * var(--kdl-fondu));
	height: var(--kdl-fondu);
	background: inherit;
	-webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
	mask-image: linear-gradient(to top, #000 0%, transparent 100%);
	pointer-events: none;
	z-index: 0;
}

/* La bande déborde sur la section précédente : sans cela elle délave la fin de
   son texte. Les sections ne créent pas de contexte d'empilement (`relative`
   sans `z-index`), donc un `z-index: 1` sur leur contenu suffit à le faire
   passer par-dessus la bande, quel que soit l'ordre dans le document. */
.entry-content > section.has-background > * {
	position: relative;
	z-index: 1;
}

/* ─── Diaporama ───────────────────────────────────────────────────────────── */

.kdl-diapo {
	margin: var(--wp--preset--spacing--40) 0;
}

/* Les vues sont empilées dans une seule case de grille : elles se recouvrent
   exactement, le fondu n'entraîne aucun déplacement et la hauteur du bloc ne
   saute pas d'une image à l'autre. */
.kdl-diapo__vues {
	display: grid;
	grid-template-areas: "vue";
	border-radius: var(--kdl-radius-lg);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

/* Le fondu dure 0,8 s pour un cycle de 2,5 s : à 1,1 s, près de la moitié du
   temps se passait en transition et aucune vue n'était jamais tout à fait
   nette. */
.kdl-diapo__vue {
	grid-area: vue;
	opacity: 0;
	transition: opacity 0.8s ease;
}

.kdl-diapo__vue.est-active {
	opacity: 1;
}

/* Cadrage panoramique : les clichés sont en 3/2, mais leur haut (plafond,
   néons) et leur bas (parquet nu) n'apportent rien. Le recadrage se resserre
   donc sur la bande utile — et se relâche sur téléphone, où un 2/1 sur 390 px
   de large ne montrerait plus qu'une fente. */
.kdl-diapo__vue img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	/* Recadrage centré : décalé vers le bas, il coupait les suspensions de la
	   grande salle et les étagères du coin poêle en plein milieu. */
	object-position: center center;
}

@media (max-width: 781px) {
	.kdl-diapo__vue img {
		aspect-ratio: 4 / 3;
	}
}

.kdl-diapo__puces {
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 1rem;
}

.kdl-diapo__puce {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease;
}

.kdl-diapo__puce.est-active {
	background: var(--wp--preset--color--accent);
	transform: scale(1.25);
}

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

/* ─── Coordonnées ─────────────────────────────────────────────────────────── */

.kdl-coordonnees__ligne {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 0.5rem 1rem;
	margin: 0 0 1.1rem;
	font-size: 0.9375rem;
	line-height: 1.8;
}

.kdl-coordonnees__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	padding-top: 0.35em;
}

.kdl-coordonnees__liens {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 1.5rem 0 0;
	font-size: 0.9375rem;
}

/* Un lien qui quitte le site le dit — petite flèche sortante. */
.kdl-lien-externe::after {
	content: "↗";
	display: inline-block;
	margin-left: 0.35em;
	font-size: 0.85em;
	text-decoration: none;
}

/* ─── Avis Google ─────────────────────────────────────────────────────────── */

.kdl-avis__titre {
	text-align: center;
	margin-bottom: 1rem;
}

.kdl-avis__resume {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.kdl-avis__note {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.25rem;
	line-height: 1;
	color: var(--wp--preset--color--ink);
}

.kdl-avis__total {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink-soft);
}

/* L'étoile à quatre branches du logo sert aussi de note : même vocabulaire
   graphique que les puces des listes. */
.kdl-etoiles {
	display: inline-flex;
	gap: 0.2rem;
	vertical-align: middle;
}

.kdl-etoile {
	width: 15px;
	height: 15px;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.8 5.6 5.6 10.4 12 12-6.4 1.6-11.2 6.4-12 12-.8-5.6-5.6-10.4-12-12C6.4 10.4 11.2 5.6 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.8 5.6 5.6 10.4 12 12-6.4 1.6-11.2 6.4-12 12-.8-5.6-5.6-10.4-12-12C6.4 10.4 11.2 5.6 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kdl-etoile--vide {
	background-color: var(--wp--preset--color--line);
}

.kdl-avis__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.kdl-avis__item {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kdl-radius-lg);
	padding: clamp(1.35rem, 2.5vw, 1.85rem);
}

.kdl-avis__texte {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0.9375rem;
	line-height: 1.8;
	color: var(--wp--preset--color--ink-soft);
}

.kdl-avis__texte p {
	margin: 0;
}

.kdl-avis__auteur {
	margin: auto 0 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink);
}

.kdl-avis__date::before {
	content: " · ";
	color: var(--wp--preset--color--ink-soft);
}

.kdl-avis__date {
	color: var(--wp--preset--color--ink-soft);
}

.kdl-avis__lien {
	margin: var(--wp--preset--spacing--40) 0 0;
	text-align: center;
	font-size: 0.9375rem;
}

/* ─── Catégorie d'un article ──────────────────────────────────────────────── */

/* La catégorie se porte en pastille plutôt qu'en surtitre : posée sur un aplat
   blanc cerné d'ocre pâle, elle se distingue du titre qu'elle annonce au lieu
   de lui disputer la place.

   La pastille est portée par le lien, pas par le bloc : elle se centre alors
   d'elle-même sur la page d'article, où le bloc est centré, tout en restant
   calée à gauche dans la grille du blog. */
.wp-block-post-terms a {
	display: inline-block;
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-decoration: none;
	padding: 0.32rem 0.72rem;
	border: 1px solid var(--kdl-ring);
	border-radius: 999px;
	background: #FFFFFF;
	transition: border-color 0.3s ease, background 0.3s ease;
}

.wp-block-post-terms a:hover,
.wp-block-post-terms a:focus-visible {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
}

/* ─── Grille du blog ──────────────────────────────────────────────────────── */

/* Les cartes d'articles font toutes la même hauteur. La grille de WordPress
   étire bien ses cases, mais la carte, elle, s'arrêtait à son contenu : un
   titre sur deux lignes suffisait à décaler toute la rangée. */
.wp-block-post-template.is-layout-grid > li.wp-block-post {
	display: flex;
}

.wp-block-post-template > li.wp-block-post > .is-style-kdl-card {
	width: 100%;
	display: flex;
	flex-direction: column;
}

/* Les extraits n'ont pas tous la même longueur : on les borne à trois lignes
   pour que le bas des cartes reste comparable d'une carte à l'autre. */
.wp-block-post-template .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ─── Carrousel de cartes ─────────────────────────────────────────────────── */

/* Les puces ne sont posées par le script que sur téléphone ; au-dessus, il les
   retire. Elles n'ont donc pas besoin d'être enfermées dans une requête média. */
.kdl-defile__puces {
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 1rem;
}

.kdl-defile__puce {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease;
}

.kdl-defile__puce.est-active {
	background: var(--wp--preset--color--accent);
	transform: scale(1.25);
}

/* Les cinq avis des Séances ne forment qu'un seul bloc, sinon le carrousel du
   téléphone se couperait en deux au milieu. Sur grand écran on retrouve la
   disposition d'origine — trois cartes puis deux — en fixant la largeur de base
   des colonnes, au lieu de les laisser se partager la ligne à cinq. */
@media (min-width: 782px) {
	.wp-block-columns.kdl-avis-cinq {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.kdl-avis-cinq > .wp-block-column {
		flex-basis: calc((100% - 2 * var(--wp--preset--spacing--30)) / 3) !important;
		flex-grow: 0 !important;
	}

	.wp-block-columns.kdl-avis-cinq > .wp-block-column:nth-child(n + 4) {
		flex-basis: calc((100% - var(--wp--preset--spacing--30)) / 2) !important;
	}
}

/* ─── Pastille de rendez-vous ─────────────────────────────────────────────── */

/* Au-dessus de 782 px elle n'a pas lieu d'être : le bouton de l'en-tête est
   toujours là. Voir inc/bouton-flottant.php. */
.kdl-rdv {
	display: none;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 781px) {
	.wp-block-columns.kdl-cards {
		gap: var(--wp--preset--spacing--30);
	}

	.is-style-kdl-card {
		padding: 1.5rem;
	}

	/* Les huit valeurs restent sur deux colonnes : ce sont des mots seuls, ils
	   tiennent sans peine sur un demi-écran, alors que dépilés ils faisaient une
	   colonne de huit lignes qui n'en finissait pas. Le `!important` répond à
	   celui de la feuille du bloc colonnes, qui force `flex-basis: 100%` sous
	   782 px — même remarque qu'au bloc `.kdl-valeurs` plus haut. */
	.wp-block-columns.kdl-valeurs {
		flex-wrap: nowrap !important;
		gap: clamp(1.5rem, 12vw, 5rem);
	}

	.wp-block-columns.kdl-valeurs > .wp-block-column {
		flex-basis: auto !important;
	}

	/* Une grille marquée `kdl-defile` ne s'empile plus : elle devient une piste
	   qui se balaie au doigt, avec un point d'accroche par carte. Le défilement
	   est donc natif — le script n'ajoute que les puces et l'avance
	   automatique, et sans lui les cartes se balaient quand même.

	   Les `!important` répondent à ceux de la feuille du bloc colonnes, qui
	   force `flex-wrap: wrap` et `flex-basis: 100%` sous 782 px. Sans eux la
	   piste retomberait en pile. */
	.kdl-defile {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.kdl-defile::-webkit-scrollbar {
		display: none;
	}

	/* La carte laisse voir le bord de la suivante : c'est ce liseré qui annonce
	   qu'il y a autre chose à côté, sans quoi le carrousel passe pour une
	   simple carte isolée. */
	.kdl-defile > * {
		flex: 0 0 86% !important;
		scroll-snap-align: center;
	}

	.kdl-sans-mobile {
		display: none;
	}

	/* Le bouton de rendez-vous quitte l'en-tête : il y prenait une ligne
	   entière sous le logo et s'en allait au premier défilement. La pastille
	   ci-dessous le remplace et, elle, ne bouge plus. */
	.kdl-barre > .kdl-droite {
		display: none;
	}

	.kdl-rdv {
		position: fixed;
		right: 1rem;
		bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
		/* Sous l'en-tête collant (100) et sous le panneau de menu déployé, qui
		   monte bien plus haut : la pastille ne doit jamais flotter par-dessus
		   la navigation ouverte. */
		z-index: 90;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.9rem;
		height: 2.9rem;
		border-radius: 999px;
		/* Le terracotta de la charte, à peine translucide. La valeur est écrite
		   en clair parce que le jeton de couleur est un hexadécimal : on ne
		   peut pas lui ajouter d'alpha. Le flou d'arrière-plan garde l'icône
		   lisible quand la pastille passe sur une photo. */
		background: rgba(122, 75, 192, 0.90);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		color: var(--wp--preset--color--base);
		box-shadow: 0 4px 14px rgba(51, 42, 69, 0.24);
		transition: background 0.3s ease, transform 0.3s ease;
	}

	/* Au contact, elle redevient franche : c'est le retour qui dit qu'on l'a
	   bien attrapée. */
	.kdl-rdv:hover,
	.kdl-rdv:focus-visible {
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--base);
		transform: translateY(-2px);
	}

	.kdl-rdv__icone {
		width: 1.3rem;
		height: 1.3rem;
	}

	/* Le pied de page se dégage, sinon la pastille recouvre ses dernières
	   lignes une fois arrivé en bas. */
	.kdl-footer {
		padding-bottom: 5rem;
	}
}

@media (max-width: 480px) {
	.kdl-coordonnees__ligne {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	.kdl-coordonnees__label {
		padding-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.is-style-kdl-card,
	.wp-block-button__link,
	.kdl-rdv,
	.kdl-defile__puce,
	.kdl-nav .wp-block-navigation-item__content::after {
		transition: none;
	}

	.is-style-kdl-card:hover,
	.wp-block-button__link:hover,
	.kdl-rdv:hover {
		transform: none;
	}
}

/* ─── Agenda des journées ─────────────────────────────────────────────────── */

/* Le calendrier sort de `[kdl_journees]` : les dates vivent dans
   `inc/journees.php`, pas dans le contenu de la page. */
.kdl-journees {
	max-width: 620px;
	margin-inline: auto;
}

/* L'année n'est pas un titre de section : c'est une étiquette au-dessus d'un
   groupe de lignes. En h2 elle aurait pesé autant que « Le calendrier ». */
.kdl-journees__annee {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-deep);
	margin: 2.25rem 0 0.75rem;
}

.kdl-journees__annee:first-child {
	margin-top: 0;
}

/* Deux colonnes : la date à gauche, l'action à droite. Le format et le lieu
   sont identiques pour les douze dates — ils sont donc annoncés une fois
   au-dessus de la liste, et pas répétés à chaque ligne. */
.kdl-journees__ligne {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 0.35rem 1.25rem;
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.kdl-journees__ligne:last-child {
	border-bottom: 0;
}

.kdl-journees__date {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.45rem;
}

/* Le jour de la semaine est la même valeur douze fois : il informe une fois,
   puis il encombre. Il reste, mais en retrait — c'est le quantième qu'on
   cherche du regard en parcourant la liste. */
.kdl-journees__jour {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}

.kdl-journees__quantieme {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3125rem;
	color: var(--wp--preset--color--ink);
}


.kdl-journees__lien {
	font-size: 0.875rem;
	white-space: nowrap;
}

@media (max-width: 600px) {
	/* La date et l'action restent sur la première ligne, face à face ; le
	   détail passe dessous, sur toute la largeur. */
	.kdl-journees__ligne {
		grid-template-columns: 1fr auto;
	}


	.kdl-journees__lien {
		grid-column: 2;
		grid-row: 1;
	}
}
/* ═══════════════════════════════════════════════════════════════════════════
   Charte « pastel aquarelle » — les règles qui ne sont pas de simples couleurs
   ═══════════════════════════════════════════════════════════════════════════

   Adoptée le 2026-08-14, à la demande de Kelly : « des couleurs claires et
   pastels, avec un petit peu de couleurs et de vies, tout en restant lisible et
   pas trop chargé », en montrant sa signature de courriel — un lavis
   d'aquarelle (jaune et pêche en haut, menthe et bleu en bas), titres violets.
   Les couleurs, elles, sont remontées dans theme.json : c'est la raison même de
   faire la bascule proprement, sans quoi l'éditeur montrerait encore à Kelly la
   charte précédente quand elle modifie une page.

   Les chartes d'avant restent visibles en miroir — `/nuit-claire/` (celle du
   même jour, indigo sur blanc) et `/ivoire/` (celle du 21 juillet au 14 août) —
   avec leurs feuilles `palette-*.css`, qui restaurent l'état d'avant.

   Le parti : le blanc porte tout, et la vie vient d'un LAVIS, pas d'aplats.
   Deux axes : un violet qui agit (encre prune, boutons, liens, surtitres), un
   rose qui décore (astres, puces, filets, soulignements — et rien d'autre :
   1,9:1, il ne porte jamais de texte).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Le lavis ────────────────────────────────────────────────────────────────
   C'est lui qui donne « la vie » demandée. Quatre taches très diluées
   reprennent la disposition de la signature : jaune et pêche en haut, menthe et
   bleu qui montent du bas. Aucune ne dépasse 66 % d'opacité et toutes
   s'éteignent avant le centre — le texte reste posé sur du blanc.

   Porté par un pseudo-élément et pas par `background` : la section a déjà un
   fond posé par l'éditeur, et le fondu inter-sections s'appuie sur
   `background: inherit`. */
.kdl-hero {
	position: relative;
	isolation: isolate;
}

.kdl-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(58% 52% at 4% -8%, rgba(242, 209, 177, 0.62) 0%, rgba(242, 209, 177, 0) 68%),
		radial-gradient(52% 46% at 97% -4%, rgba(243, 202, 173, 0.66) 0%, rgba(243, 202, 173, 0) 66%),
		radial-gradient(46% 44% at 88% 104%, rgba(145, 197, 203, 0.5) 0%, rgba(145, 197, 203, 0) 64%),
		radial-gradient(42% 40% at 2% 96%, rgba(188, 202, 203, 0.48) 0%, rgba(188, 202, 203, 0) 64%);
}

/* Le même lavis, inversé, ferme la page au-dessus du pied — la signature va du
   chaud au froid, la page aussi. */
.entry-content > section:last-of-type {
	position: relative;
	isolation: isolate;
}

.entry-content > section:last-of-type::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(50% 48% at 6% 104%, rgba(145, 197, 203, 0.42) 0%, rgba(145, 197, 203, 0) 66%),
		radial-gradient(46% 44% at 96% 100%, rgba(243, 202, 173, 0.4) 0%, rgba(243, 202, 173, 0) 64%);
}

/* ─── Le rythme des sections ──────────────────────────────────────────────────
   PROVISOIRE, et à traduire dans le contenu. La page d'accueil pose huit
   sections sur neuf en fond `base` : sur une charte blanche, ça donnerait une
   page entièrement blanche — plus claire que l'ivoire, mais pas plus vivante.
   Une section sur deux passe donc en rose poudré. Le jour où le contenu porte
   lui-même ce rythme, ces deux règles disparaissent. */
.entry-content > section.has-base-background-color:nth-of-type(even) {
	background-color: var(--wp--preset--color--surface) !important;
}

/* Une carte rose sur une section rose s'effacerait : sur les sections teintées,
   les cartes repassent au blanc. C'est l'inverse de la charte ivoire, où la
   carte était en lin sur fond ivoire — le principe (la carte se détache du
   fond) est le même. */
.entry-content > section:nth-of-type(even) .is-style-kdl-card {
	background: var(--wp--preset--color--base);
}

/* ─── Les liens dans le texte ─────────────────────────────────────────────────
   Le violet ne tient que 2,31:1 contre l'encre prune. C'est mieux que l'indigo
   de nuit claire (1,57:1), mais toujours sous les 3:1 exigés quand la couleur
   est le SEUL indice : deux mots colorés au milieu d'un paragraphe ne se
   verraient pas assez.

   Trois indices, donc, comme en nuit claire, mais avec le rose à la place de
   l'ocre : le soulignement identifie et il est ROSE (il ne porte jamais le
   texte, ses 1,9:1 sont sans conséquence) ; la couleur est celle de l'accent
   (5,8:1 sur blanc, 5,3:1 sur les sections teintées) ; la graisse passe à 500.

   Au survol, la couleur DESCEND d'une marche (8,4:1) et le trait s'épaissit en
   prenant la couleur du texte : l'état actif renforce le contraste au lieu de
   l'effacer. C'est l'inverse du mouvement de nuit claire, dont l'accent était
   assez sombre pour que le lien puisse, lui, être plus clair. */
.entry-content :where(p, li, figcaption, td) a:not(.wp-element-button) {
	color: var(--kdl-lien);
	font-weight: 500;
	text-decoration-line: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.entry-content :where(p, li, figcaption, td) a:not(.wp-element-button):hover {
	color: var(--kdl-lien-actif);
	text-decoration-color: currentColor;
	text-decoration-thickness: 3px;
}

/* ─── Les liens du pied ───────────────────────────────────────────────────────
   Même cause, autre remède : dans le pied, les liens n'ont pas de soulignement
   et les intertitres `.kdl-overline` portent eux aussi `accent-deep` — libellés
   de colonne et liens s'y retrouveraient de la même couleur.

   On échange contraste de teinte contre contraste de valeur :

       LIBELLÉ (violet, petites capitales) → lien (encre, dense) → texte (doux)

   Le violet et le trait rose n'arrivent qu'au survol. */
.kdl-footer a {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

.kdl-footer a:hover {
	color: var(--kdl-lien);
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
}

/* Le patronyme du pied n'est pas un lien de navigation, c'est le logo. */
.kdl-footer .is-style-kdl-script a {
	font-weight: inherit;
}

/* ─── Le logo ─────────────────────────────────────────────────────────────────
   Les deux PNG (en-tête et pied) sont des aplats d'ocre #E4A76C à canal alpha :
   posés tels quels sur une charte violette, ils y font une tache orange. On ne
   peut pas changer le `src` d'une image depuis une feuille de style — on masque
   donc les pixels d'origine et on repeint le dessin en prenant le fichier pour
   masque. La couleur suit alors le jeton, comme le patronyme juste en dessous,
   qui est du texte et suit l'accent lui aussi.

   `visibility: hidden` plutôt que `display: none` : l'image continue d'occuper
   sa place, et le pseudo-élément se cale dessus.

   C'est ce que la charte pastel coûte et que nuit claire ne coûtait pas : elle,
   gardait l'ocre du logo comme accent décoratif. Les deux miroirs défont donc
   ce repeint dans leurs feuilles. Reste l'icône du site, qui est un fichier à
   part et non un `<img>` : elle est encore terracotta. */
.kdl-logo__symbole a,
.kdl-footer .wp-block-image:has(img[src*="logo-symbole.png"]) {
	position: relative;
	display: block;
}

.kdl-logo__symbole img,
.kdl-footer img[src*="logo-symbole.png"] {
	visibility: hidden;
}

.kdl-logo__symbole a::after,
.kdl-footer .wp-block-image:has(img[src*="logo-symbole.png"])::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--accent-deep);
	-webkit-mask: url("../img/logo-symbole-entete.png") center / contain no-repeat;
	mask: url("../img/logo-symbole-entete.png") center / contain no-repeat;
}

.kdl-footer .wp-block-image:has(img[src*="logo-symbole.png"])::after {
	-webkit-mask-image: url("../img/logo-symbole.png");
	mask-image: url("../img/logo-symbole.png");
}

/* Le patronyme suit le symbole repeint : les deux moitiés du logo sont
   violettes. La règle ne vise que les deux logos (en-tête et pied), pas les
   titres calligraphiés du contenu, qui prennent déjà l'accent par leur style de
   bloc. */
.kdl-logo__nom,
.kdl-footer .is-style-kdl-script {
	color: var(--wp--preset--color--accent-deep);
}