/*
 * Compléments à theme.json : uniquement ce que theme.json ne sait pas exprimer
 * (positionnement, états de focus, sous-menus, contextes sombres).
 * Couleurs et tailles passent toujours par les variables --wp--preset--*.
 */

/* ---------- Enchaînement des zones et des sections ---------- */
/* Les sections pleine largeur se touchent, comme dans la maquette. */
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-post-content > .alignfull,
.site-main > .alignfull { margin-block: 0; }
.site-main > * + .wp-block-post-content { margin-block-start: 0; }

/* ---------- Titres ---------- */
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
p.is-style-surtitre { text-wrap: balance; }

/* ---------- Focus visible (accessibilité clavier) ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--terracotta-texte);
	outline-offset: 3px;
	border-radius: 2px;
}
:where(.is-style-nuit, .is-style-mise-en-avant, .site-topbar, .site-footer) :focus-visible {
	outline-color: var(--wp--preset--color--rose);
}

/* ---------- Bandeau supérieur ---------- */
.site-topbar { letter-spacing: .02em; line-height: 1.45; }
.site-topbar a { color: inherit; text-decoration: none; }
.site-topbar p { margin: 0; }
.site-topbar a:hover { color: var(--wp--preset--color--rose); }

/* ---------- En-tête collant ---------- */
.site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 20;
}
.site-logo-pastille { margin: 0; line-height: 0; }
.site-logo-pastille a { display: block; line-height: 0; }
.site-logo-pastille img {
	display: block;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
}
.site-header .wp-block-site-title,
.site-header .wp-block-site-tagline { margin: 0; }
.site-header .wp-block-site-tagline { white-space: nowrap; }

/* Sous-menu « Techniques » */
.site-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--fond);
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--rayon);
	box-shadow: var(--wp--preset--shadow--menu);
	min-width: 280px;
	padding: 10px 0;
}
.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 20px;
}
.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
	background: var(--wp--preset--color--sable);
}
.site-header .wp-block-navigation .current-menu-item > a,
.site-header .wp-block-navigation .current-menu-ancestor > a {
	color: var(--wp--preset--color--terracotta-texte);
}

/* Menu mobile (overlay natif) */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px var(--wp--preset--spacing--marge);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	font-size: var(--wp--preset--font-size--x-large);
	gap: 18px;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0;
	box-shadow: none;
	padding: 6px 0 0 16px;
	font-size: var(--wp--preset--font-size--medium);
}

/* ---------- Boutons ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--fond);
	border-color: var(--wp--preset--color--encre);
}
:where(.is-style-nuit, .is-style-mise-en-avant) .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--creme);
	border-color: var(--wp--preset--color--pierre);
}
:where(.is-style-nuit, .is-style-mise-en-avant) .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--encre);
}

/* ---------- Contextes sombres ---------- */
:where(.is-style-nuit, .is-style-mise-en-avant) .is-style-surtitre {
	color: var(--wp--preset--color--rose);
}

/* ---------- Pied de page ---------- */
.site-footer a {
	color: var(--wp--preset--color--pierre);
	text-decoration: none;
}
.site-footer a:hover { color: var(--wp--preset--color--creme); }
.site-footer p { margin: 0; }

/* =========================================================================
 * Utilitaires pour les compositions (classes à poser via « className »)
 * ====================================================================== */

/* Carte entièrement cliquable : le premier lien de la carte couvre toute la carte. */
.ellie-lien-etendu { position: relative; transition: box-shadow .2s ease; }
.ellie-lien-etendu a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ellie-lien-etendu:hover { box-shadow: var(--wp--preset--shadow--survol); }
.ellie-lien-etendu a { text-decoration: none; color: inherit; }
.ellie-lien-etendu:focus-within { outline: 2px solid var(--wp--preset--color--terracotta-texte); outline-offset: 3px; }
.ellie-lien-etendu a:focus-visible { outline: none; }

/* Lien « flèche » souligné d'un filet (ex. « Séance & tarifs → »). */
.ellie-lien-fleche a {
	color: var(--wp--preset--color--encre);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.ellie-lien-fleche a:hover { color: var(--wp--preset--color--terracotta-texte); }

/* Liste à puces rondes terracotta (profils, première séance). */
ul.ellie-puces { list-style: none; padding-left: 0; margin: 0; display: grid; gap: 8px; }
ul.ellie-puces li { position: relative; padding-left: 18px; }
ul.ellie-puces li::before {
	content: ""; position: absolute; left: 0; top: .62em;
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--wp--preset--color--terracotta);
}
ul.ellie-puces.ellie-puces-2col { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 20px; }

/* Liste sans puces (questions en italique, etc.). */
ul.ellie-sans-puces { list-style: none; padding-left: 0; margin: 0; display: grid; gap: 8px; }

/* Pastilles (« votre alimentation », « votre sommeil »…) : liste en ligne. */
ul.ellie-pastilles { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
ul.ellie-pastilles li {
	border: 1px solid var(--wp--preset--color--ligne-forte);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

/* Lignes séparées par un filet (À savoir, Bon à savoir, rythme, tarifs). */
.ellie-lignes > * + * { border-top: 1px solid var(--wp--preset--color--ligne-forte); }

/* Photos provisoires ou réelles : hauteur fixe façon maquette, recadrage. */
.ellie-photo img { width: 100%; object-fit: cover; border-radius: var(--wp--custom--rayon); display: block; }
.ellie-photo-hero img { height: clamp(380px, 42vw, 580px); }
.ellie-photo-page img { height: clamp(320px, 36vw, 480px); }
.ellie-photo-carte img { height: 200px; }

/* Héros d'accueil : photo décalée + citation posée en bas à gauche. */
.ellie-hero-media { position: relative; }
.ellie-hero-media > .wp-block-image { margin: 0 0 0 40px; }
.ellie-hero-media > .ellie-hero-citation {
	position: absolute; left: 0; bottom: 48px; max-width: 290px; margin: 0;
	box-shadow: var(--wp--preset--shadow--douce);
}

/* Portrait en pastille : largeur bornée, centré. */
.wp-block-image.is-style-pastille { max-width: min(100%, 420px); margin-inline: auto; }
.wp-block-image.is-style-pastille img { aspect-ratio: 1; object-fit: cover; width: 100%; }

/* Grilles de cartes : les cartes s'étirent déjà à la hauteur de la rangée
 * (comportement par défaut des grilles CSS). Pas de height:100% ici : dans
 * un parent flex, il s'emballe. */
.ellie-grille > * { align-self: stretch; }

/* Grille placée dans un groupe flex vertical : sans largeur explicite,
 * Chrome calcule la hauteur des rangées comme si la grille n'avait qu'une
 * colonne (cartes démesurément hautes). */
.is-layout-flex.is-vertical > :where(.is-layout-grid, [class*="wp-block-ellie-"]) { width: 100%; }

/* ---------- Mouvements réduits ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* « Les autres techniques » : masqué s'il n'y a aucune autre technique publiée. */
.ellie-autres-techniques:not(:has(.wp-block-ellie-techniques-grid)) { display: none; }