/*
Theme Name: Elisabeth Regnard
Theme URI: https://elisabethregnard-therapeute.fr
Description: Thème sur-mesure pour Elisabeth Regnard, thérapeute familiale & de couple, hypnothérapeute. Basé sur Hello Elementor.
Author: Happy Geek
Template: hello-elementor
Version: 1.0.0
Text Domain: elisabeth
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
	/* Palette — « Prune profonde & rose poudré ».
	   Les noms sont des rôles, pas des couleurs : changer la palette ne doit
	   pas obliger à renommer 90 déclarations. Jamais de beige. */
	--ink:            #22242B;  /* ardoise neutre : laisse parler les couleurs */
	--ink-2:          #2E3139;
	--muted:          #A8ADB5;
	--muted-100:      #DFE1E4;  /* filets et bordures au repos */
	--muted-50:       #F0F1F2;  /* pastilles, encarts de définition */
	--blush:          #EFE6EC;  /* halos décoratifs */
	--paper:          #F6F5F3;  /* fond de page */
	--paper-2:        #EBEAE7;  /* sections alternées */
	--white:          #FFFFFF;

	--text:           #2A2E35;
	--text-soft:      #5B616B;
	--text-invert:    #EDEEF0;

	/* Une couleur par approche. Chacune tient 4,5:1 sur le fond papier ET en
	   inverse sur blanc, donc utilisable aussi bien en texte qu'en aplat de
	   bouton. L'ocre a été foncé de #B5703A à #96572A pour cette raison. */
	--c-famille:      #35695F;  /* thérapie familiale & de couple.
	                               Foncé depuis #3E7C73 : celui-ci tombait à
	                               4,0:1 sur les fonds de section alternés. */
	--c-hypnose:      #8A4A6B;  /* hypnose Ericksonienne */
	--c-oculaire:     #96572A;  /* mouvements oculaires */

	/* `--accent` est la couleur courante : verte par défaut, remplacée page
	   par page par celle de l'approche concernée. */
	--accent:         var(--c-famille);
	--accent-strong:  #2F6259;

	--rose:           var(--c-hypnose);
	--rose-deep:      #7A3F5E;
	--rose-300:       #C193AF;

	/* Typo — Karla plutôt qu'Inter : Inter est la police par défaut de presque
	   toute interface générée, au point d'être un marqueur à elle seule. Karla
	   a du caractère et tient la lecture longue en français. */
	--font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
	--font-body:    'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--fs-xs:   0.8125rem;
	--fs-sm:   0.9375rem;
	--fs-base: 1.0625rem;
	--fs-md:   clamp(1.125rem, 0.4vw + 1rem, 1.25rem);
	--fs-lg:   clamp(1.3rem, 0.8vw + 1.1rem, 1.6rem);
	--fs-h3:   clamp(1.45rem, 1vw + 1.15rem, 1.9rem);
	--fs-h2:   clamp(1.85rem, 2vw + 1.2rem, 2.9rem);
	--fs-h1:   clamp(2.3rem, 3.4vw + 1rem, 3.95rem);

	/* Espacements */
	--sp-section: clamp(4.5rem, 8vw, 8.5rem);
	--radius-sm: 10px;
	--radius:    18px;
	--radius-lg: 28px;
	/* Boutons : rayon court plutôt que capsule. La pilule intégrale est le
	   réflexe par défaut de toute interface générée ; un angle franc se lit
	   comme une décision, et s'accorde aux filets du reste du système. */
	--radius-btn: 4px;

	--shadow-sm: 0 2px 8px rgba(17, 38, 31, .06);
	--shadow:    0 14px 40px -18px rgba(17, 38, 31, .28);
	--shadow-lg: 0 40px 80px -40px rgba(17, 38, 31, .45);

	--maxw: 1180px;

	/* Textures réutilisables */
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
	--dots: radial-gradient(currentColor 1px, transparent 1px);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	/* `clip` et non `hidden` : le panneau de menu hors écran élargit le
	   document, et `hidden` sur <body> seul laisse iOS Safari le faire
	   défiler latéralement malgré tout. `clip` ne crée pas de conteneur
	   de défilement et tient sur tous les moteurs. */
	overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
	margin: 0;
	background-color: var(--paper);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Grain global, très discret : enlève l'effet « plat » des aplats de couleur */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image: var(--grain);
	opacity: .035;
	pointer-events: none;
	z-index: 9999;
	mix-blend-mode: multiply;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	/* Newsreader a un axe optique : les grands titres prennent le dessin display */
	font-optical-sizing: auto;
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--ink);
	margin: 0 0 .5em;
}

/* Titres équilibrés (plus de dernier mot orphelin) et corps sans ligne veuve */
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--rose-deep); }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--blush); color: var(--ink); }

:focus-visible {
	outline: 2px solid var(--rose);
	outline-offset: 3px;
	border-radius: 4px;
}

.el-wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed; top: 1rem; left: 1rem;
	width: auto; height: auto; clip: auto;
	z-index: 10000; padding: .75rem 1.25rem;
	background: var(--ink); color: #fff; border-radius: 8px;
}

/* ==========================================================================
   2 bis. UNE COULEUR PAR APPROCHE
   La couleur sert de repère, pas de décoration : chaque approche garde la
   sienne du bloc d'accueil jusqu'à sa page, sur les filets, les titres et
   les boutons. Le visiteur apprend à les reconnaître.
   ========================================================================== */

.eli-page-therapie-familiale-et-de-couple { --accent: var(--c-famille);  --accent-strong: #2F6259; }
.eli-page-hypnose                         { --accent: var(--c-hypnose);  --accent-strong: #713B58; }
.eli-page-mouvements-oculaires            { --accent: var(--c-oculaire); --accent-strong: #7C4722; }

/* Les trois blocs « approches » de l'accueil portent déjà leur couleur */
.sec-approches .item:nth-child(1) { --accent: var(--c-famille);  --accent-strong: #2F6259; }
.sec-approches .item:nth-child(2) { --accent: var(--c-hypnose);  --accent-strong: #713B58; }
.sec-approches .item:nth-child(3) { --accent: var(--c-oculaire); --accent-strong: #7C4722; }

/* `.item.e-con` : la règle de base des blocs est déclarée plus bas dans la
   feuille et gagnerait à spécificité égale. */
.sec-approches .item.e-con { border-top-color: var(--accent); border-top-width: 2px; }
.sec-approches .item .elementor-widget-heading .elementor-heading-title { color: var(--accent); }

/* ==========================================================================
   3. BOUTONS
   ========================================================================== */

/* La feuille d'Elementor se charge APRÈS celle du thème : à spécificité égale
   elle gagnerait. D'où `.elementor-widget-button .elementor-button` (0,2,0)
   pour la base et `.btn-x.elementor-widget-button .elementor-button` (0,3,0)
   pour les variantes. Ne pas abaisser ces sélecteurs. */

.btn,
.elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .005em;
	line-height: 1.15;
	padding: 1.15rem 2.2rem;
	border-radius: var(--radius-btn);
	border: 2px solid transparent;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	text-align: center;
	transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s, background-color .3s, color .3s, border-color .3s;
}

/* Icônes inline dans les boutons.

   ⚠️ `fill: currentColor` et son `!important` : Elementor écrit une couleur
   d'icône par widget, dans sa feuille générée, avec une spécificité plus
   forte que la nôtre. Sur les boutons clairs posés sur fond coloré, elle
   sortait blanche sur blanc — l'icône n'apparaissait qu'au survol, quand la
   couleur du bouton changeait. L'icône suit désormais la couleur du libellé,
   quelle que soit la variante de bouton, maintenant et plus tard. */
.btn svg,
.elementor-widget-button .elementor-button svg,
.elementor-button-icon svg {
	width: 1.05em;
	height: 1.05em;
	flex: none;
	fill: currentColor !important;
	color: inherit;
}
.elementor-widget-button .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
}
.elementor-widget-button .elementor-button-icon {
	display: inline-flex;
	align-items: center;
	margin: 0 !important;
}
.elementor-widget-button .elementor-button-text { line-height: 1.15; }

/* -- Variantes ------------------------------------------------------------ */

/* Bouton principal : il porte la couleur de l'approche, pas le quasi-noir.
   Un aplat saturé se repère d'un coup d'œil là où l'encre se fondait dans
   le texte. L'ombre reprend la teinte du bouton : elle le décolle du fond
   sans l'assombrir comme le ferait un gris. */
.btn.btn-primary,
.btn-primary.elementor-widget-button .elementor-button {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
	box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--accent) 55%, transparent);
}
.btn.btn-primary:hover,
.btn-primary.elementor-widget-button .elementor-button:hover {
	background: var(--accent-strong);
	border-color: var(--accent-strong);
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 16px 30px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}

.btn.btn-plum,
.btn-plum.elementor-widget-button .elementor-button { background: var(--rose-deep); color: #fff; border-color: var(--rose-deep); }
.btn.btn-plum:hover,
.btn-plum.elementor-widget-button .elementor-button:hover { background: var(--c-hypnose); color: #fff; transform: translateY(-3px); }

/* Bouton secondaire : contour épais dans la couleur de l'approche.
   Le gris précédent le faisait passer pour un élément désactivé. */
.btn.btn-ghost,
.btn-ghost.elementor-widget-button .elementor-button {
	background: #fff;
	color: var(--accent);
	border: 2px solid var(--accent);
	box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--accent) 40%, transparent);
}
.btn.btn-ghost:hover,
.btn-ghost.elementor-widget-button .elementor-button:hover {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
	transform: translateY(-3px);
	box-shadow: 0 16px 30px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}

.btn.btn-light,
.btn-light.elementor-widget-button .elementor-button { background: #fff; color: var(--ink); }
.btn.btn-light:hover,
.btn-light.elementor-widget-button .elementor-button:hover { background: var(--muted-100); color: var(--ink); transform: translateY(-2px); }

.btn.btn-outline-light,
.btn-outline-light.elementor-widget-button .elementor-button {
	background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5);
}
.btn.btn-outline-light:hover,
.btn-outline-light.elementor-widget-button .elementor-button:hover { background: #fff; color: var(--ink); border-color: #fff; transform: translateY(-2px); }

/* Le wrapper du widget ne doit pas s'étirer ni hériter des styles de bouton */
.elementor-widget-button { background: none; border: 0; }

/* ==========================================================================
   4. HEADER
   ========================================================================== */

.site-topbar {
	background: var(--ink);
	color: var(--text-invert);
	font-size: var(--fs-xs);
	position: relative;
	/* Sous l'en-tête collant, qui lui passe dessus au défilement — et sous le
	   panneau du menu, qui vit dans l'en-tête. À 101 il recouvrait le haut du
	   panneau, et le relever à l'ouverture faisait sauter l'empilement à la
	   fermeture, en plein milieu du coulissement. */
	z-index: 99;
}
.site-topbar::after {
	content: ""; position: absolute; inset: 0;
	background-image: var(--grain); opacity: .14; pointer-events: none;
}
.site-topbar__inner {
	width: min(100% - 2.5rem, var(--maxw));
	margin-inline: auto;
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; min-height: 40px; flex-wrap: wrap;
}
.site-topbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; }
.site-topbar a:hover { color: var(--muted); }
.site-topbar__group { display: flex; align-items: center; gap: 1.5rem; }
.site-topbar svg { width: 14px; height: 14px; opacity: .75; flex: none; }

/* ⚠️ Le fond flouté est sur un pseudo-élément, pas sur l'en-tête lui-même.
   Un élément filtré devient le bloc conteneur de ses descendants en
   `position: fixed` — et le panneau du menu mobile est son enfant. Posé sur
   l'en-tête, le filtre l'enfermait dans ses 136px de haut ; retiré le temps
   de l'ouverture, il revenait d'un coup à la fermeture et le panneau se
   repliait à la taille de l'en-tête avant même d'avoir commencé à coulisser.
   Sur un pseudo-élément, le filtre n'a plus de descendant à contraindre. */
.site-header {
	position: sticky; top: 0; z-index: 100;
	border-bottom: 1px solid transparent;
	transition: border-color .3s, box-shadow .3s;
}
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: color-mix(in srgb, var(--paper) 86%, transparent);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
}
.site-header.is-stuck {
	border-bottom-color: color-mix(in srgb, var(--ink) 10%, transparent);
	box-shadow: 0 10px 30px -24px rgba(17,38,31,.6);
}
.site-header__inner {
	width: min(100% - 2.5rem, var(--maxw));
	margin-inline: auto;
	display: flex; align-items: center; justify-content: space-between;
	gap: 2rem; padding-block: 1rem;
}

.brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
	font-family: var(--font-display);
	font-size: 1.22rem; font-weight: 600; color: var(--ink);
	letter-spacing: -.01em;
}
.brand__role {
	/* 0.7rem = 11.2px : plancher de lisibilité pour du texte fonctionnel */
	font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--text-soft); font-weight: 600; margin-top: .18rem;
	white-space: nowrap;
}

.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.site-nav ul { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.site-nav li { position: relative; }
.site-nav a {
	font-size: var(--fs-sm); font-weight: 500; color: var(--text);
	text-decoration: none; padding-block: .4rem; display: inline-block; position: relative;
	white-space: nowrap;
}
.site-nav a::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
	background: var(--rose); transition: right .35s cubic-bezier(.2,.8,.3,1);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after,
.site-nav .current-menu-item > a::after,
.site-nav .current_page_item > a::after { right: 0; }
.site-nav .current-menu-item > a { color: var(--ink); font-weight: 600; }

/* Sous-menus */
.site-nav ul ul {
	position: absolute; top: 100%; left: -1.1rem;
	flex-direction: column; align-items: stretch; gap: 0;
	min-width: 270px; padding: .6rem;
	background: #fff; border-radius: var(--radius);
	box-shadow: var(--shadow); border: 1px solid var(--muted-100);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .25s, transform .25s, visibility .25s;
}
.site-nav li:hover > ul,
.site-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav ul ul a { padding: .7rem 1.1rem; border-radius: 10px; width: 100%; }
.site-nav ul ul a::after { display: none; }
.site-nav ul ul a:hover { background: var(--muted-50); }

.header__cta { display: flex; align-items: center; gap: .75rem; }
.header__cta .btn { padding: .85rem 1.5rem; }

/* Burger */
.nav-toggle {
	display: none; width: 46px; height: 46px; padding: 0;
	border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
	background: transparent; border-radius: var(--radius-btn); cursor: pointer;
	align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; transition: background .2s; }
.nav-toggle span::before, .nav-toggle span::after {
	content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink);
	transition: transform .3s cubic-bezier(.2,.8,.3,1), top .3s;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
/* ⚠️ `reset.css` de Hello Elementor colore TOUS les `<button>` au survol et
   au focus : `background-color: #c36`. Après un clic — ou un appui sur
   téléphone, où le focus reste — le bouton du menu devenait un carré rose.
   On reprend la main explicitement ; le `:focus-visible` du clavier garde
   son contour, posé plus bas. */
.nav-toggle:hover,
.nav-toggle:focus,
.nav-open .nav-toggle:hover,
.nav-open .nav-toggle:focus {
	background: transparent;
	color: inherit;
}

.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

/* Entre 1150 et 1340 px : on resserre pour que le CTA ne déborde pas */
@media (max-width: 1340px) {
	.site-header__inner { gap: 1.1rem; }
	.site-nav, .site-nav ul { gap: 1.1rem; }
	.site-nav a { font-size: .9rem; }
	.header__cta .btn { padding: .8rem 1.25rem; }
}

/* En dessous de 1150 px la nav ne tient plus : menu burger */
@media (max-width: 1150px) {
	.nav-toggle { display: inline-flex; }
	.site-nav {
		position: fixed; inset: 0 0 0 auto; width: min(400px, 88vw);
		/* Masqué tant qu'il est fermé : sinon ses liens restent atteignables
		   au clavier et annoncés par les lecteurs d'écran hors de l'écran. */
		visibility: hidden;
		background: var(--ink);
		flex-direction: column; align-items: stretch; justify-content: flex-start;
		gap: 0; padding: 6.5rem 2rem 2rem;
		transform: translateX(100%);
		transition: transform .45s cubic-bezier(.2,.8,.3,1), visibility .45s;
		z-index: 200; overflow-y: auto;
	}
	/* ⚠️ Le panneau est un enfant de l'en-tête, et l'en-tête porte un
	   `backdrop-filter`. Or un élément filtré devient le bloc conteneur de ses
	   descendants en `position: fixed` : le panneau se retrouvait enfermé dans
	   la hauteur de l'en-tête — 136px — avec ses liens coupés par
	   `overflow-y: auto`. On retire le filtre le temps que le menu est ouvert :
	   le panneau retrouve le viewport comme référence, et le flou de l'en-tête
	   ne manque à personne puisqu'un voile le recouvre déjà. */
	.nav-open .site-nav { transform: translateX(0); visibility: visible; box-shadow: var(--shadow-lg); }
	.site-nav ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.site-nav a { color: var(--text-invert); font-size: 1.1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
	.site-nav a:hover { color: #fff; }
	/* La page courante était colorée en --ink sur un panneau --ink :
	   le lien devenait invisible, sur chaque page du site. */
	.site-nav .current-menu-item > a,
	.site-nav .current_page_item > a { color: #fff; }
	.site-nav a::after { display: none; }
	.site-nav ul ul {
		position: static; opacity: 1; visibility: visible; transform: none;
		background: transparent; border: 0; box-shadow: none; padding: 0 0 .5rem 1rem; min-width: 0;
	}
	.site-nav ul ul a { color: var(--muted); font-size: .98rem; padding: .6rem 0; border: 0; }
	.nav-backdrop {
		position: fixed; inset: 0; background: rgba(17,38,31,.5);
		opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; z-index: 150;
		backdrop-filter: blur(2px);
	}
	.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
	.nav-toggle { z-index: 250; }
	.nav-open .nav-toggle { border-color: rgba(255,255,255,.35); }
	.nav-open .nav-toggle span::before, .nav-open .nav-toggle span::after { background: #fff; }
}

@media (max-width: 640px) {
	.brand__name { font-size: 1.05rem; }
	/* Le bouton du header débordait à 375px, et faisait doublon avec la barre
	   flottante de prise de rendez-vous présente en bas d'écran. */
	.header__cta .btn-primary { display: none; }

	/* Bandeau supérieur : au doigt, c'est le téléphone qui sert, pas un
	   second lien de prise de rendez-vous — la barre flottante s'en charge.
	   L'adresse est trop longue pour cette largeur, elle reste en pied. */
	.site-topbar .site-topbar__group--meta { display: flex; }
	.site-topbar a.site-topbar__addr { display: none; }
	.site-topbar .site-topbar__group:not(.site-topbar__group--meta) { display: none; }
	.site-topbar__inner { justify-content: center; }
}

/* ==========================================================================
   5. SECTIONS & TEXTURES
   ========================================================================== */

.e-con, .elementor-section { position: relative; }

/* Rythme vertical.
   Une seule valeur partout donne le même poids à tout : la page ne mène nulle
   part. Trois paliers, attribués selon le rôle de la section — les moments
   narratifs respirent, les sections pratiques se resserrent. */
.sec { padding-block: var(--sp-section); }
.sec--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }

/* Serré : contenu pratique, enchaînements rapides */
.sec-accompagnements,
.sec-cabinet      { padding-block: clamp(3.25rem, 5vw, 5rem); }

/* Ample : les moments où le visiteur doit s'arrêter */
.sec-parcours,
.sec-avis         { padding-block: clamp(5.5rem, 9vw, 9.5rem); }

/* Le bandeau de rendez-vous est une respiration courte, pas une section */
.sec-rdv          { padding-block: clamp(2.75rem, 4.5vw, 4rem); }

.sec--paper { background: var(--paper); }
.sec--paper2 { background: var(--paper-2); }
.sec--white { background: var(--white); }

.sec--dark {
	background: var(--ink);
	color: var(--text-invert);
}
.sec--dark h1, .sec--dark h2, .sec--dark h3, .sec--dark h4 { color: #fff; }
.sec--dark p { color: color-mix(in srgb, #fff 82%, transparent); }
.sec--dark .eyebrow { color: var(--muted); }
.sec--dark .eyebrow::before { background: var(--muted); }

/* Le conteneur porte aussi `e-no-lazyload` dans la page.
   Elementor diffère les fonds de conteneur avec
   `background-image: none !important` jusqu'à ce que son observateur ajoute
   `.e-lazyloaded` — ce qu'il ne fait jamais pour un fond venant du thème,
   qu'il ne connaît pas. Sans cet opt-out, le dégradé ne s'affiche jamais.
   Un background-color n'est pas concerné, d'où .sec--dark resté intact. */
/* Aplat, pas dégradé. Pour revenir en arrière :
   background: linear-gradient(150deg, var(--accent) 0%, var(--ink) 85%); */
.sec.sec--deep {
	background: var(--accent-strong);
	color: var(--text-invert);
}
.sec--deep h2, .sec--deep h3 { color: #fff; }
.sec--deep p { color: rgba(255,255,255,.85); }
.sec--deep .eyebrow { color: var(--muted); }
.sec--deep .eyebrow::before { background: var(--muted); }

/* Texture grain sur les fonds sombres */
.sec--dark::before, .sec--deep::before {
	content: ""; position: absolute; inset: 0;
	background-image: var(--grain);
	opacity: .17; pointer-events: none; mix-blend-mode: overlay;
}

/* Halo organique en fond de section — retiré.
   Pour le remettre :
   .sec--glow::after {
       content: ""; position: absolute; z-index: 0; pointer-events: none;
       left: auto; bottom: auto;
       width: 46rem; height: 46rem; right: -14rem; top: -16rem;
       background: radial-gradient(circle, color-mix(in srgb, var(--muted) 38%, transparent) 0%, transparent 68%);
       filter: blur(14px);
   }
   .sec--glow-left::after { right: auto; left: -16rem; top: auto; bottom: -18rem; width: 40rem; height: 40rem; }
*/

/* Motif pointillé */
.sec--dotted::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	color: color-mix(in srgb, var(--accent) 20%, transparent);
	background-image: var(--dots);
	background-size: 22px 22px;
	mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
	opacity: .5;
}

/* Les enfants passent au-dessus des décorations */
.sec > .e-con-inner, .sec > * { position: relative; z-index: 1; }

/* ==========================================================================
   6. TITRES & INTROS
   ========================================================================== */

/* `:not(.elementor-widget)` est indispensable : sans lui la règle touche à la
   fois le wrapper du widget ET le titre à l'intérieur, ce qui affichait
   deux traits au lieu d'un. */
.eyebrow:not(.elementor-widget),
.elementor-widget-heading.eyebrow .elementor-heading-title {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 650;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rose-deep);
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	margin-bottom: .4rem;
}
.eyebrow:not(.elementor-widget)::before,
.elementor-widget-heading.eyebrow .elementor-heading-title::before {
	content: ""; width: 28px; height: 1.5px; background: var(--rose); flex: none;
}

.lead,
.elementor-widget-text-editor.lead {
	font-size: var(--fs-md);
	line-height: 1.68;
	color: var(--text-soft);
	max-width: 46ch !important;
}

/* Plafond de mesure sur tout texte courant.
   En colonne unique (tablette, 768px), un paragraphe sans plafond prenait
   toute la largeur du conteneur : 89 caractères par ligne, l'œil perd la
   ligne suivante en revenant à la marge.
   `!important` nécessaire : Elementor impose `max-width: 100%` en important
   sur ses widgets (même raison que pour `.prose`). */
.sec .elementor-widget-text-editor { max-width: 58ch !important; }
.testimonial__text { max-width: 54ch !important; }
.intro-center .elementor-widget-text-editor { margin-inline: 0; }

/* Emphase en romain, jamais en italique. Un grand titre serif en italique est
   devenu LE hero de page d'accueil générée ; la couleur suffit à distinguer. */
.title-serif-em em,
.elementor-heading-title em { font-style: normal; color: var(--accent); font-weight: 500; }
/* Sur un fond coloré, l'emphase est une teinte claire de ce même fond, jamais
   un gris : `--muted` donnait 2,8:1 sur le dégradé vert, et le gris sur couleur
   est précisément ce que le craft-floor refuse. */
.sec--dark .elementor-heading-title em,
.sec--deep .elementor-heading-title em { color: color-mix(in srgb, var(--accent) 22%, #fff); }

/* Les liens glissés dans une phrase (shortcode [telephone]) héritaient de
   `--accent` : vert foncé sur le dégradé vert du bandeau, soit 1,7:1. */
.sec--dark p a,
.sec--deep p a {
	color: #fff;
	text-decoration-color: rgba(255,255,255,.5);
}
.sec--dark p a:hover,
.sec--deep p a:hover { color: #fff; text-decoration-color: #fff; }

/* ==========================================================================
   7. HERO
   ========================================================================== */

.hero {
	position: relative;
	padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem);
	overflow: hidden;
}
/* Les deux halos en dégradé du hero ont été retirés.
   Ils teintaient le fond derrière le texte — jusqu'à 18% de gris sur la zone
   du titre. Depuis que le fond de lisibilité se pose mot par mot, ce fond
   papier ne tombait plus sur du papier : chaque mot chevauchant la photo
   laissait voir un rectangle plus clair sur le fond teinté, juste à côté.
   Un fond plat règle le problème à la source — le fond des mots devient
   invisible partout sauf sur la photo, c'est-à-dire là où il sert.
   La texture du hero vient maintenant de la photo elle-même, qui a pris
   beaucoup plus de place. */

.hero__title { margin-bottom: .35em; }
.hero__title .elementor-heading-title { letter-spacing: -.02em; }

/* Bandeau de réassurance.
   Volontairement SANS pilule ni bordure : avec un contour arrondi, les trois
   mentions se lisaient comme des boutons cliquables. Ici : icône en pastille,
   texte large, fins séparateurs verticaux, et un léger flottement continu. */
.chips.elementor-widget-icon-list .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.4rem 2.6rem;
	margin-top: 1.6rem;
}

.chips.elementor-widget-icon-list .elementor-icon-list-item {
	position: relative;
	display: flex !important;
	align-items: center;
	gap: .9rem !important;
	padding: 0 !important;
	background: none;
	border: 0;
	font-size: 1.04rem !important;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
	animation: chip-float 5.5s ease-in-out infinite;
}
.chips.elementor-widget-icon-list .elementor-icon-list-item:nth-child(2) { animation-delay: -1.8s; }
.chips.elementor-widget-icon-list .elementor-icon-list-item:nth-child(3) { animation-delay: -3.6s; }

/* Séparateur fin, centré dans l'espace entre deux mentions */
.chips.elementor-widget-icon-list .elementor-icon-list-item + .elementor-icon-list-item::before {
	content: "";
	position: absolute;
	left: -1.3rem; top: 50%; right: auto; bottom: auto;
	width: 1px; height: 30px;
	translate: 0 -50%;
	background: var(--muted-100);
}

/* Pastille d'icône */
.chips.elementor-widget-icon-list .elementor-icon-list-icon {
	width: 46px; height: 46px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 !important;
	border-radius: 50%;
	background: var(--muted-50);
	border: 1px solid var(--muted-100);
	transition: background-color .4s, border-color .4s, transform .4s cubic-bezier(.2,.8,.3,1);
}
.chips.elementor-widget-icon-list .elementor-icon-list-icon svg,
.chips.elementor-widget-icon-list .elementor-icon-list-icon i {
	width: 19px !important; height: 19px !important; font-size: 18px !important;
	color: var(--accent); fill: var(--accent);
	transition: color .4s, fill .4s;
}
.chips.elementor-widget-icon-list .elementor-icon-list-item:hover .elementor-icon-list-icon {
	background: var(--accent);
	border-color: var(--accent);
	transform: scale(1.1) rotate(-8deg);
}
.chips.elementor-widget-icon-list .elementor-icon-list-item:hover .elementor-icon-list-icon svg,
.chips.elementor-widget-icon-list .elementor-icon-list-item:hover .elementor-icon-list-icon i {
	color: #fff; fill: #fff;
}

/* Le nombre mis en avant (animé par site.js) */
.chips .chip-num {
	font-family: var(--font-display);
	font-size: 1.32em;
	font-weight: 700;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
	margin-right: .08em;
}

@keyframes chip-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
	.chips.elementor-widget-icon-list .elementor-icon-list-item { animation: none; }
}

/* Empilées sur mobile : les séparateurs n'ont plus de sens */
@media (max-width: 680px) {
	.chips.elementor-widget-icon-list .elementor-icon-list-items { gap: 1rem; }
	.chips.elementor-widget-icon-list .elementor-icon-list-item + .elementor-icon-list-item::before { display: none; }
}

/* ==========================================================================
   8. PLACEHOLDERS IMAGES
   ========================================================================== */

/* Spécificité (0,3,0) : le CSS du widget image d'Elementor se charge après
   et remet border-radius à 0 / display inline-block. */
/* `contain` et non `cover` : la photo n'est jamais rognée, seulement réduite
   pour tenir dans son cadre. Le fond du cadre comble l'écart quand les
   proportions de la photo ne correspondent pas exactement à celles du cadre. */
.ph.elementor-widget-image img,
.ph img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	object-fit: contain;
}

.ph.elementor-widget-image,
.ph { text-align: center; }

/* Le cadre reprend le langage des boutons : contour fin dans la couleur de
   l'approche courante et ombre teintée de cette même couleur. Il change donc
   page par page, comme le reste.
   Première tentative : une bande de 3px en pseudo-élément. Le détecteur l'a
   refusée — c'est le motif « onglet latéral », la même bande décorative qu'il
   m'avait signalée sur les cartes. Un contour de 1px passe, et surtout il
   entoure le sujet au lieu de le surligner. */
.ph.elementor-widget-image,
.ph {
	position: relative;
	border: 1px solid var(--accent);
	/* Forme signature : deux coins opposés largement arrondis, deux coins
	   francs. Construite sur les rayons déjà en place (28px et 4px), elle est
	   reconnaissable sans être décorative, et se retrouve d'une image à
	   l'autre. Une seule ligne à changer pour en essayer une autre. */
	border-radius: var(--radius-lg) var(--radius-btn) var(--radius-lg) var(--radius-btn);
	background: var(--muted-50);
	overflow: hidden;
	box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 45%, transparent);
}
.ph.elementor-widget-image img,
.ph img { box-shadow: none; }

/* Sur les images contenues (portrait 380px, vignettes), le filet s'aligne
   sur l'image, pas sur la colonne qui la contient. */
.ph-organic.elementor-widget-image,
.ph-framed.elementor-widget-image {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

/* Portrait : arche douce — plus lisible qu'une forme organique,
   et le visage n'est pas rogné sur les côtés. */
/* 360 px et ratio 5/6 : au plus près de la photo fournie (274 × 300 px)
   pour limiter l'agrandissement et le recadrage latéral. */
/* Portrait : un rectangle franc.
   La version précédente découpait une arche dans la photo — une silhouette
   décorative qui rognait le sujet et ne répondait à rien dans le contenu. */
/* `width` et non `max-width` seul : le conteneur est en `fit-content` pour que
   le filet s'aligne sur l'image, donc sans largeur explicite il se réduirait à
   la taille native du fichier (274px ici) au lieu de la taille voulue. */
/* Pas de `aspect-ratio` imposé : le cadre épouse les proportions réelles du
   fichier, donc rien n'est rogné ni déformé, quelle que soit la photo
   qu'Elisabeth déposera. */
.ph-organic.elementor-widget-image img,
.ph-organic img {
	width: 380px;
	max-width: 100%;
	height: auto;
}

/* Images de contexte : même traitement, format paysage, sans cadre décalé */
.ph-framed.elementor-widget-image img,
.ph-framed img {
	width: 520px;
	max-width: 100%;
	height: auto;
}
.ph-framed {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

/* ==========================================================================
   9. CARTES
   ========================================================================== */

.card .elementor-widget-container,
.card.e-con {
	background: #fff;
	border: 1px solid var(--muted-100);
	border-radius: var(--radius-lg);
	padding: clamp(1.75rem, 2.4vw, 2.5rem);
	height: 100%;
	transition: transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s, border-color .4s;
	position: relative;
	overflow: hidden;
}
.card.e-con:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow);
	border-color: var(--muted);
}

/* Blocs éditoriaux — anciennement des cartes.
   La carte était le conteneur par défaut : une boîte blanche, une ombre et un
   coin arrondi autour de chaque idée. Ici, un simple filet au-dessus du bloc
   suffit à le séparer, et le texte redevient l'objet principal. */
.item.e-con {
	background: none;
	border: 0;
	border-top: 1px solid var(--muted-100);
	border-radius: 0;
	padding: 1.5rem 0 0;
	position: relative;
}
.item .elementor-widget-heading .elementor-heading-title {
	font-size: var(--fs-h3);
	max-width: 22ch;
}
/* Le lien est poussé en bas : alignement entre blocs de hauteurs différentes */
.item .elementor-widget-button { margin-top: auto; padding-top: .5rem; }

/* Le filet s'épaissit discrètement au survol d'un bloc cliquable */
.item.e-con:has(.elementor-widget-button) { transition: border-top-color .4s; }
.item.e-con:has(.elementor-widget-button):hover { border-top-color: var(--accent); }

/* Même traitement sur fond sombre */
.item-dark.e-con {
	background: none;
	border: 0;
	border-top: 1px solid rgba(255,255,255,.2);
	border-radius: 0;
	padding: 1.5rem 0 0;
}

/* ==========================================================================
   10. LISTES « POUR QUOI ? »
   ========================================================================== */

/* Liste sans boîte : un filet horizontal entre les entrées suffit.
   L'ancienne version avait une bordure gauche de 3px, un motif que le
   craft-floor refuse au-delà de 1px (« onglet latéral » décoratif). */
.list-reasons .elementor-icon-list-items { display: grid; gap: 0; }
.list-reasons .elementor-icon-list-item {
	background: none;
	border: 0;
	border-top: 1px solid var(--muted-100);
	border-radius: 0;
	padding: 1.05rem 0 !important;
	font-size: var(--fs-base) !important;
	line-height: 1.6;
	max-width: 52ch;
	color: var(--text);
	align-items: flex-start !important;
	transition: color .3s;
}
.list-reasons .elementor-icon-list-item:first-child { border-top-color: var(--ink); border-top-width: 2px; }
.list-reasons .elementor-icon-list-item:hover { color: var(--accent); }
.list-reasons .elementor-icon-list-icon { padding-top: .25rem; }
.list-reasons .elementor-icon-list-icon svg,
.list-reasons .elementor-icon-list-icon i { color: var(--accent); }

@media (min-width: 860px) {
	.list-reasons--2col .elementor-icon-list-items { grid-template-columns: 1fr 1fr; }
}

/* Liste simple à puces feuille */
.list-clean .elementor-icon-list-item {
	font-size: var(--fs-base) !important;
	padding-block: .45rem !important;
	align-items: flex-start !important;
}
.list-clean .elementor-icon-list-icon { padding-top: .35rem; }
.list-clean .elementor-icon-list-icon svg { color: var(--accent); }
.sec--dark .list-clean .elementor-icon-list-icon svg { color: var(--muted); }
.sec--dark .list-clean .elementor-icon-list-text { color: rgba(255,255,255,.85); }

/* ==========================================================================
   11. TÉMOIGNAGES
   ========================================================================== */

.testimonial.e-con {
	background: #fff;
	border: 1px solid var(--muted-100);
	border-radius: var(--radius-lg);
	padding: clamp(1.9rem, 2.6vw, 2.6rem);
	position: relative;
	overflow: hidden;
	transition: transform .4s, box-shadow .4s;
	break-inside: avoid;
}
.testimonial.e-con:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
/* Elementor applique `inset: 0` à .e-con::before (overlay de fond) :
   il faut neutraliser left/bottom, sinon le guillemet s'étire à gauche. */
.testimonial.e-con::before {
	content: "”";
	position: absolute;
	top: -1.2rem; right: 1rem; left: auto; bottom: auto;
	width: auto; height: auto;
	font-family: var(--font-display);
	font-size: 8rem; line-height: 1;
	color: var(--muted-100);
	pointer-events: none;
}
.testimonial__text,
.testimonial__text .elementor-widget-container {
	font-size: var(--fs-base);
	line-height: 1.75;
	color: var(--text);
	position: relative;
	z-index: 1;
}
.testimonial__author .elementor-heading-title {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--rose-deep);
	display: inline-flex; align-items: center; gap: .6rem;
}
.testimonial__author .elementor-heading-title::before {
	content: ""; width: 22px; height: 1.5px; background: var(--rose-300);
}

/* Mosaïque témoignages */
@media (min-width: 900px) {
	.testimonials-masonry.e-con { column-count: 2; column-gap: 1.6rem; display: block !important; }
	.testimonials-masonry.e-con > .e-con { margin-bottom: 1.6rem; width: 100%; }
}
@media (min-width: 1200px) {
	.testimonials-masonry.e-con { column-count: 3; }
}

/* ==========================================================================
   11 bis. BANDEAU AVIS GOOGLE
   Codes officiels Google : bleu #1A73E8, étoiles #FBBC04, gris de bordure
   #DADCE0, texte secondaire #5F6368. On garde cette DA telle quelle pour
   que les avis soient immédiatement identifiables comme venant de Google.
   ========================================================================== */

/* La section est pleine largeur : le carrousel va d'un bord à l'autre,
   seul l'en-tête est contenu par .el-wrap */
.gavis-sec.e-con { padding-inline: 0 !important; }

.gavis {
	--g-blue: #1A73E8;
	--g-star: #FBBC04;
	--g-line: #DADCE0;
	--g-grey: #5F6368;
	position: relative;
}

.gavis__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.9rem;
}
.gavis__headline { display: flex; flex-direction: column; gap: .18rem; margin-right: auto; }
.gavis__title {
	font-family: var(--font-body);
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -.01em;
}
.gavis__meta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: var(--fs-sm);
	color: var(--g-grey);
}
.gavis__meta strong { color: var(--ink); font-weight: 700; }

.gavis__stars { display: inline-flex; gap: 1px; }
.gavis__stars svg { width: 17px; height: 17px; fill: var(--g-star); flex: none; }

.gavis__link {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--g-blue);
	text-decoration: none;
	padding: .6rem 1.1rem;
	border: 1px solid var(--g-line);
	border-radius: var(--radius-btn);
	background: #fff;
	transition: background-color .3s, border-color .3s, transform .3s;
	white-space: nowrap;
}
.gavis__link:hover {
	color: var(--g-blue);
	background: #F1F6FE;
	border-color: #C6DAFC;
	transform: translateY(-1px);
}

/* -- Piste défilante ------------------------------------------------------ */

.gavis__viewport {
	overflow: hidden;
	/* Les cartes s'estompent sur les bords plutôt que d'être coupées net */
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.gavis__track {
	display: flex;
	gap: 1.1rem;
	width: max-content;
	animation: gavis-scroll 64s linear infinite;
}
.gavis__viewport:hover .gavis__track,
.gavis__viewport:focus-within .gavis__track { animation-play-state: paused; }

@keyframes gavis-scroll {
	from { transform: translateX(0); }
	/* La piste contient deux copies : -50% ramène exactement au point de départ */
	to   { transform: translateX(-50%); }
}

/* -- Carte d'avis --------------------------------------------------------- */

.gavis-card {
	flex: none;
	width: 340px;
	background: #fff;
	border: 1px solid var(--g-line);
	border-radius: 14px;
	padding: 1.25rem 1.35rem 1.4rem;
	box-shadow: 0 1px 3px rgba(60, 64, 67, .08);
	transition: box-shadow .35s, transform .35s;
}
.gavis-card:hover { box-shadow: 0 8px 22px -10px rgba(60, 64, 67, .35); transform: translateY(-3px); }

.gavis-card__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }

.gavis-card__avatar {
	width: 38px; height: 38px; flex: none;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--accent);
	color: #fff;
	font-family: var(--font-body);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1;
}
/* Teintes alternées, comme les avatars sans photo chez Google */
.gavis-card:nth-child(3n+2) .gavis-card__avatar { background: var(--rose-deep); }
.gavis-card:nth-child(3n+3) .gavis-card__avatar { background: #3C6E8F; }

.gavis-card__name {
	font-family: var(--font-body);
	font-size: .95rem;
	font-weight: 600;
	color: var(--ink);
	margin-right: auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gavis-card .gavis__g { flex: none; opacity: .9; }

.gavis-card .gavis__stars { margin-bottom: .55rem; }
.gavis-card .gavis__stars svg { width: 15px; height: 15px; }

.gavis-card__text {
	margin: 0;
	font-size: .93rem;
	line-height: 1.62;
	color: var(--text-soft);
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* -- Accessibilité / mobile ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.gavis__track { animation: none; width: auto; }
	.gavis__viewport { overflow-x: auto; }
}

@media (max-width: 680px) {
	.gavis-card { width: 280px; }
	.gavis__track { animation-duration: 48s; }
	.gavis__head { gap: .75rem; }
	.gavis__link { margin-left: auto; }
}

/* ==========================================================================
   12. ÉTAPES
   ========================================================================== */

.step.e-con { position: relative; padding-top: .5rem; }
.step__num .elementor-heading-title {
	font-family: var(--font-display);
	font-size: 3.2rem;
	line-height: 1;
	color: color-mix(in srgb, var(--muted) 65%, transparent);
}
.sec--dark .step__num .elementor-heading-title { color: rgba(255,255,255,.22); }

/* Trait de liaison entre étapes */
@media (min-width: 900px) {
	.steps-row.e-con > .e-con:not(:last-child)::after {
		content: ""; position: absolute; top: 2.1rem; right: -1.1rem; left: auto; bottom: auto;
		width: 2.2rem; height: 1.5px;
		background: repeating-linear-gradient(90deg, var(--muted) 0 5px, transparent 5px 10px);
	}
}

/* ==========================================================================
   13. BLOC CONTACT / MAP
   ========================================================================== */

.contact-card.e-con {
	background: #fff;
	border: 1px solid var(--muted-100);
	border-radius: var(--radius-lg);
	padding: clamp(1.8rem, 2.5vw, 2.6rem);
	box-shadow: var(--shadow-sm);
}

/* La liste vient du shortcode [coordonnees], avec des SVG écrits par le thème.
   Elementor dimensionnait ses propres icônes ; les nôtres n'ont aucune
   contrainte native et s'étalaient sur toute la carte. D'où les tailles
   explicites ci-dessous. */
.contact-list .elementor-icon-list-items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.contact-list .elementor-icon-list-item {
	display: flex !important;
	align-items: flex-start !important;
	gap: .8rem;
	padding-block: .85rem !important;
	border-bottom: 1px solid var(--muted-100);
	font-size: var(--fs-base) !important;
	line-height: 1.5;
}
.contact-list .elementor-icon-list-item:last-child { border-bottom: 0; }
.contact-list .elementor-icon-list-item > a { display: flex; align-items: center; gap: .8rem; }
.contact-list .elementor-icon-list-icon {
	display: inline-flex;
	flex: none;
	padding-top: .15rem;
}
.contact-list .elementor-icon-list-icon svg {
	width: 17px;
	height: 17px;
	flex: none;
	fill: var(--accent);
	color: var(--accent);
}
.contact-list a { color: var(--text); text-decoration: none; }
.contact-list a:hover { color: var(--rose-deep); }

/* Carte Google (Elementor 4 ne génère plus .elementor-widget-container) */
.map-block,
.map-block .elementor-widget-container,
.map-block .elementor-custom-embed {
	border-radius: var(--radius-lg);
	overflow: hidden;
	line-height: 0;
}
.map-block {
	border: 1px solid var(--muted-100);
	box-shadow: var(--shadow);
}
.map-block iframe {
	filter: grayscale(.35) contrast(1.02) saturate(.9);
	transition: filter .5s;
}
.map-block:hover iframe { filter: grayscale(0) saturate(1); }

/* Réseaux sociaux */
.socials .elementor-social-icon {
	background: transparent !important;
	border: 1px solid var(--muted-100);
	border-radius: var(--radius-btn) !important;
	width: 46px; height: 46px;
	transition: transform .35s, background-color .35s, border-color .35s;
}
.socials .elementor-social-icon svg { fill: var(--accent); transition: fill .35s; }
.socials .elementor-social-icon:hover { background: var(--ink) !important; border-color: var(--ink); transform: translateY(-3px); }
.socials .elementor-social-icon:hover svg { fill: #fff; }

.sec--dark .socials .elementor-social-icon,
.sec--deep .socials .elementor-social-icon { border-color: rgba(255,255,255,.22); }
.sec--dark .socials .elementor-social-icon svg,
.sec--deep .socials .elementor-social-icon svg { fill: #fff; }
.sec--dark .socials .elementor-social-icon:hover,
.sec--deep .socials .elementor-social-icon:hover { background: #fff !important; border-color: #fff; }
.sec--dark .socials .elementor-social-icon:hover svg,
.sec--deep .socials .elementor-social-icon:hover svg { fill: var(--ink); }

/* ==========================================================================
   14. FORMULAIRE (WPForms)
   ========================================================================== */

.wpforms-container { margin: 0 !important; }
.wpforms-form .wpforms-field { padding: 0 0 1.1rem !important; }
.wpforms-form .wpforms-field-label {
	font-family: var(--font-body) !important;
	font-size: var(--fs-sm) !important;
	font-weight: 600 !important;
	color: var(--ink) !important;
	margin-bottom: .45rem !important;
}
.wpforms-form input[type=text],
.wpforms-form input[type=email],
.wpforms-form input[type=tel],
.wpforms-form select,
.wpforms-form textarea {
	width: 100% !important;
	max-width: 100% !important;
	font-family: var(--font-body) !important;
	font-size: var(--fs-base) !important;
	color: var(--text) !important;
	background: var(--paper) !important;
	border: 1px solid var(--muted-100) !important;
	border-radius: var(--radius-sm) !important;
	padding: .95rem 1.1rem !important;
	height: auto !important;
	box-shadow: none !important;
	transition: border-color .3s, background-color .3s, box-shadow .3s;
}
.wpforms-form input:focus,
.wpforms-form select:focus,
.wpforms-form textarea:focus {
	border-color: var(--accent) !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 35%, transparent) !important;
	outline: none !important;
}
/* `!important` : WPForms fixe la hauteur du champ par un attribut `rows`
   que le CSS doit surpasser, sinon la zone tombe à 77px sur téléphone. */
.wpforms-form textarea { min-height: 150px !important; resize: vertical; }
/* Même traitement que les autres boutons principaux : couleur d'accent en
   aplat, ombre teintée, et 48px de haut minimum pour le doigt. */
.wpforms-form button[type=submit] {
	background: var(--accent) !important;
	color: #fff !important;
	font-family: var(--font-body) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	border: 0 !important;
	border-radius: var(--radius-btn) !important;
	padding: 1.15rem 2.2rem !important;
	min-height: 48px;
	/* ⚠️ WPForms sort le bouton en `inline-block` avec une interligne de
	   16px. Avec un `min-height` de 48px, le libellé se calait en haut au
	   lieu de tenir au milieu. Même centrage que les autres boutons du site :
	   flex, et une interligne qui suit la taille du texte. */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1.15 !important;
	box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--accent) 55%, transparent);
	cursor: pointer;
	transition: background-color .3s, transform .3s, box-shadow .3s !important;
}
.wpforms-form button[type=submit]:hover {
	background: var(--accent-strong) !important;
	transform: translateY(-3px);
	box-shadow: 0 16px 30px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.wpforms-confirmation-container-full {
	background: var(--muted-50) !important;
	border: 1px solid var(--muted) !important;
	border-radius: var(--radius) !important;
	color: var(--ink) !important;
	padding: 1.4rem 1.6rem !important;
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.site-footer {
	position: relative;
	background: var(--ink);
	color: var(--text-invert);
	padding-block: clamp(3.5rem, 6vw, 5.5rem) 0;
	overflow: hidden;
}
.site-footer::before {
	content: ""; position: absolute; inset: 0;
	background-image: var(--grain); opacity: .18; pointer-events: none; mix-blend-mode: overlay;
}
/* Halo du pied de page — retiré. Pour le remettre :
   .site-footer::after {
       content: ""; position: absolute; pointer-events: none;
       width: 40rem; height: 40rem; left: -14rem; bottom: -22rem;
       background: radial-gradient(circle, rgba(141,174,157,.22) 0%, transparent 68%);
   }
*/
.site-footer__inner { position: relative; z-index: 1; }
.site-footer__grid {
	display: grid;
	gap: 2.75rem 2.25rem;
	grid-template-columns: 1.5fr 1fr 1.2fr 1fr;
	padding-bottom: 3rem;
}
@media (max-width: 1000px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px)  { .site-footer__grid { grid-template-columns: 1fr; gap: 2.25rem; } }

.site-footer h3 {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 650;
	margin-bottom: 1.15rem;
}
.site-footer p, .site-footer li, .site-footer a { font-size: var(--fs-sm); color: rgba(255,255,255,.76); }
.site-footer a { text-decoration: none; transition: color .25s; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }

.footer-brand__name {
	font-family: var(--font-display);
	font-size: 1.5rem; color: #fff; margin-bottom: .2rem; display: block;
}
.footer-brand__role {
	font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
	color: var(--muted); margin-bottom: 1.1rem; display: block;
}
.footer-contact li { display: flex; gap: .7rem; align-items: flex-start; }
.footer-contact svg { width: 16px; height: 16px; flex: none; margin-top: .3rem; color: var(--muted); }

.footer-socials { display: flex; gap: .65rem; margin-top: 1.2rem; }
.footer-socials a {
	width: 42px; height: 42px; border-radius: var(--radius-btn);
	border: 1px solid rgba(255,255,255,.2);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background-color .3s, border-color .3s, transform .3s;
}
.footer-socials svg { width: 17px; height: 17px; fill: #fff; }
.footer-socials a:hover { background: #fff; border-color: #fff; transform: translateY(-3px); }
.footer-socials a:hover svg { fill: var(--ink); }

.footer-cta {
	display: inline-flex; align-items: center; gap: .6rem;
	background: #fff; color: var(--ink);
	padding: .9rem 1.6rem; border-radius: var(--radius-btn);
	font-weight: 650; font-size: var(--fs-sm); margin-top: .35rem;
	transition: transform .3s, background-color .3s;
}
/* `.site-footer a` (0,2,0) écrasait la couleur du bouton (0,1,0) : le libellé
   ressortait en blanc sur fond blanc, donc invisible. */
.site-footer .footer-cta { color: var(--ink); }
.site-footer .footer-cta:hover { background: var(--muted-100); color: var(--ink); transform: translateY(-2px); }

.footer-map-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: .9rem; color: var(--muted) !important; }
.footer-map-link:hover { color: #fff !important; }
.footer-map-link svg { width: 15px; height: 15px; fill: currentColor; }

.site-footer__bottom {
	border-top: 1px solid rgba(255,255,255,.12);
	padding-block: 1.6rem;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
	font-size: var(--fs-xs);
	color: rgba(255,255,255,.55);
}
.site-footer__bottom a { font-size: var(--fs-xs); color: rgba(255,255,255,.55); }

/* Feuillage décoratif */
.footer-leaf {
	position: absolute; right: -2rem; top: -1rem; width: 16rem; opacity: .07;
	pointer-events: none; color: var(--muted);
}

/* Bouton RDV flottant (mobile) */
.floating-cta {
	position: fixed; left: 1rem; right: 1rem; z-index: 90;
	/* L'indicateur d'accueil des iPhone récents occupe le bas de l'écran :
	   sans cette marge de sécurité, le bouton passe dessous. */
	bottom: max(1rem, env(safe-area-inset-bottom));
	display: none; justify-content: center; align-items: center; gap: .55rem;
	background: var(--ink); color: #fff; text-decoration: none;
	min-height: 48px;
	padding: 1rem; border-radius: var(--radius-btn); font-weight: 650; font-size: var(--fs-sm);
	/* Le bouton est sombre, et il passe au fil du défilement sur des bandes
	   claires puis sombres — le bandeau vert, le pied de page — où il se
	   fondait dans le décor. Un anneau clair l'en détache ; l'anneau sombre
	   qui le borde à son tour le garde lisible sur fond clair, où l'anneau
	   clair disparaîtrait. Deux cernes valent mieux qu'un script qui devine
	   ce qu'il y a dessous. */
	box-shadow:
		0 0 0 2px rgba(255, 255, 255, .92),
		0 0 0 3.5px rgba(34, 36, 43, .28),
		0 16px 36px -14px rgba(44, 27, 44, .8);
}
.floating-cta svg { width: 17px; height: 17px; fill: currentColor; }

/* ==========================================================================
   ÉCRANS TACTILES
   Ciblé sur le mode de pointage, pas sur la largeur : un portable à écran
   tactile doit aussi en profiter, et un petit écran à la souris n'a pas
   besoin de cibles de 44px. Seuil de 44px, minimum recommandé au doigt.
   ========================================================================== */

@media (pointer: coarse) {
	.btn,
	.elementor-widget-button .elementor-button,
	.gavis__link,
	.wpforms-form button[type=submit] {
		min-height: 48px;
	}
	/* Champs de saisie : 48px au doigt, sinon la frappe est pénible */
	.wpforms-form input[type=text],
	.wpforms-form input[type=email],
	.wpforms-form input[type=tel] { min-height: 48px; }

	.brand { min-height: 44px; align-items: center; }

	.site-topbar a {
		min-height: 44px;
		padding-block: .55rem;
	}
	.site-topbar__inner { padding-block: .25rem; }

	/* Téléphone et e-mail : les deux actions les plus probables au doigt */
	.contact-list .elementor-icon-list-item {
		padding-block: 1rem !important;
	}
	.contact-list a { display: inline-flex; align-items: center; min-height: 44px; }

	.socials .elementor-social-icon,
	.footer-socials a,
	.nav-toggle {
		width: 44px !important;
		height: 44px !important;
	}

	.footer-contact li { min-height: 44px; align-items: center; }
	.site-footer ul a { display: inline-flex; align-items: center; min-height: 40px; }
}
@media (max-width: 640px) {
	.floating-cta { display: flex; }
	.site-footer { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   17. DIVERS ELEMENTOR
   ========================================================================== */

.elementor-widget-text-editor { line-height: 1.72; }
.elementor-widget-divider .elementor-divider-separator { border-color: var(--muted-100) !important; }

/* Page title par défaut masqué (les pages gèrent leur propre hero) */
.page .page-header { display: none; }

/* Conteneur Elementor : largeur commune */
.e-con { --container-max-width: var(--maxw); }

/* Évite les débordements horizontaux des halos */
.sec { overflow: hidden; }

/* ==========================================================================
   18. GRILLES & MISE EN PAGE
   (le layout est piloté par le thème, pas par les réglages Elementor :
    plus robuste, et Elisabeth ne peut pas casser la mise en page par erreur)
   ========================================================================== */

/* Respiration entre les blocs d'une section */
.sec > .e-con-inner { gap: clamp(1.9rem, 3.2vw, 3rem) !important; }

.e-con.grid-2,
.e-con.grid-3,
.e-con.grid-4 {
	display: grid !important;
	width: 100%;
	align-items: stretch;
}
.e-con.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 2.2vw, 1.9rem) !important; }
.e-con.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.2vw, 1.8rem) !important; }
.e-con.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.5rem) !important; }

.e-con.split,
.e-con.split-rev {
	display: grid !important;
	width: 100%;
	grid-template-columns: 1.02fr .98fr;
	gap: clamp(2.2rem, 5.5vw, 4.8rem) !important;
	align-items: center;
}
.e-con.split--top, .e-con.split-rev--top { align-items: start; }
.e-con.split--wide-left { grid-template-columns: 1.35fr .95fr; }
.e-con.split--wide-right { grid-template-columns: .95fr 1.35fr; }

@media (min-width: 861px) {
	.e-con.split-rev > *:first-child { order: 2; }
}

@media (max-width: 1024px) {
	.e-con.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.e-con.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.e-con.grid-2,
	.e-con.grid-3,
	.e-con.grid-4,
	.e-con.split,
	.e-con.split-rev { grid-template-columns: minmax(0, 1fr); }
}

/* Piles verticales */
.e-con.stack-tight { gap: .55rem !important; }
.e-con.stack-sm    { gap: 1rem !important; }
.e-con.stack-md    { gap: 1.6rem !important; }

/* Rangée de boutons */
.e-con.btn-row {
	/* Elementor donne 10px de remplissage à tout conteneur : les boutons
	   étaient donc rentrés de 10px par rapport au texte au-dessus, des deux
	   côtés. Les quatre variables ET la propriété : Elementor écrit le
	   `padding` à partir des variables, remettre l'une sans l'autre ne suffit
	   pas. */
	--padding-block-start: 0px;
	--padding-block-end: 0px;
	--padding-inline-start: 0px;
	--padding-inline-end: 0px;
	padding: 0 !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
	gap: .85rem !important;
	width: 100%;
	margin-top: .6rem;
}
.btn-row .elementor-widget-button { width: auto; }

/* Sur téléphone, un libellé long déborde.
   « Plus d'informations sur mon parcours » demande 367px de large dans une
   colonne qui en fait 315 : le bouton sortait de l'écran à droite, et donnait
   l'impression d'être mal aligné. Les boutons prennent donc toute la largeur
   de la colonne, leur libellé passe à la ligne au besoin, et il se retrouve
   centré dedans. Le hero garde ses propres règles, plus spécifiques. */
@media (max-width: 640px) {
	/* Aucun bouton ne dépasse de sa colonne, qu'il soit dans une rangée ou
	   seul : à 320px, « Découvrir les mouvements oculaires » sortait encore
	   de l'écran. Le libellé passe à la ligne plutôt que de pousser. */
	.elementor-widget-button .elementor-button,
	.btn {
		max-width: 100%;
		white-space: normal;
	}

	.btn-row { flex-direction: column; align-items: stretch; }
	.btn-row > .elementor-widget-button { width: 100%; max-width: 100%; }
	.btn-row .elementor-button {
		width: 100%;
		white-space: normal;
		text-align: center;
		justify-content: center;
	}
}

/* Blocs d'introduction.
   Les intros étaient toutes centrées : répété quatre fois, le centrage devient
   une signature de gabarit. Par défaut elles s'alignent à gauche, comme le
   reste du système éditorial ; le centrage ne sert plus qu'au bandeau RDV. */
.e-con.intro { max-width: 760px; }
.e-con.intro-center { max-width: 820px; margin-inline: 0; text-align: left; }
.sec-rdv .e-con.intro-center { max-width: 740px; margin-inline: auto; text-align: center; }

/* Accompagnements : une pratique sous trois angles, pas trois produits.
   Le premier bloc porte la phrase-socle, les deux autres la précisent. */
.e-con.facets {
	display: grid !important;
	width: 100%;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(1.6rem, 3vw, 3rem) clamp(2.5rem, 5vw, 4.5rem) !important;
	align-items: start;
}
.facets > .item:first-child {
	grid-row: span 2;
	border-top-width: 2px;
	border-top-color: var(--ink);
}
.facets > .item:first-child .elementor-widget-heading .elementor-heading-title {
	font-size: var(--fs-h2);
	max-width: 14ch;
}
@media (max-width: 860px) {
	.e-con.facets { grid-template-columns: minmax(0, 1fr); }
	.facets > .item:first-child { grid-row: auto; }
}
.intro-center .eyebrow,
.intro-center .elementor-widget-heading.eyebrow .elementor-heading-title { justify-content: center; }
.intro-center .elementor-widget-button { text-align: center; }

.e-con.narrow { max-width: 780px; }
.e-con.narrow-center { max-width: 780px; margin-inline: auto; }

/* Bandeau CTA */
.cta-band.e-con {
	display: grid !important;
	grid-template-columns: 1.4fr auto;
	gap: clamp(1.5rem, 4vw, 3rem) !important;
	align-items: center;
}
@media (max-width: 860px) { .cta-band.e-con { grid-template-columns: minmax(0, 1fr); } }

/* Hero : le texte occupe la colonne de gauche sur toute la hauteur, la photo
   et les réseaux s'empilent à droite. Placement explicite, sinon les trois
   enfants se rangeraient en deux rangées et les pastilles passeraient sous
   le texte. */
.hero .e-con.split {
	align-items: start;
	/* `minmax(0, ...)` sur la colonne de droite : sans ça, la largeur explicite
	   des pastilles (calée sur la photo) devient le minimum de la piste et
	   écrase la colonne de texte — le titre tombait sur quatre lignes et plus
	   rien ne débordait. */
	grid-template-columns: 1.35fr minmax(0, .95fr);
	/* `auto 1fr` : la première rangée se cale sur la photo au lieu de se
	   partager la hauteur du texte, qui laissait 127px de vide sous l'image. */
	grid-template-rows: auto 1fr;
	row-gap: 1.1rem !important;
}
.hero .e-con.split > .stack-tight { grid-row: 1 / span 2; }
.hero .e-con.split > .ph { grid-row: 1; grid-column: 2; align-self: start; }
.hero .e-con.split > .hero-socials { grid-row: 2; grid-column: 2; align-self: start; }

/* L'image remonte légèrement : les pastilles ajoutées en dessous décalaient
   l'ensemble vers le bas par rapport au titre. */
.hero .e-con.split > .ph { margin-top: -1.2rem; }

/* Centrées sur la photo, pas sur la colonne : depuis que la photo déborde de
   sa colonne, les deux n'ont plus le même milieu. On donne donc aux pastilles
   exactement la boîte de la photo — même largeur, même bord droit — et le
   centrage tombe juste tout seul.
   ⚠ Elementor rend `.elementor-social-icons-wrapper` en `inline-block` : c'est
   `text-align` sur le widget qui le déplace, `justify-content` n'a aucun effet. */
.hero .e-con.split > .hero-socials {
	width: clamp(320px, 42vw, 600px);
	max-width: none;
	justify-self: end;
}
.hero-socials.elementor-widget-social-icons { text-align: center; }

/* --------------------------------------------------------------------------
   Chevauchement photo / texte.
   La photo passe devant la colonne de texte au lieu de rester sagement dans
   sa colonne : c'est ce qui donne de la profondeur au premier écran, et ça
   permet de l'agrandir sans voler de place au titre.
   Pour que le texte reste lisible là où la photo arrive, il s'appuie sur un
   voile de papier flouté qui s'estompe vers la droite — le texte passe donc
   DEVANT la photo (z-index 2 contre 1), posé sur son propre fond.
   -------------------------------------------------------------------------- */
.hero .e-con.split { column-gap: 0 !important; }

.hero .e-con.split > .ph {
	z-index: 1;
	justify-self: end;
	margin-inline: 0;
	/* Le cadre est plus large que sa colonne et calé à droite : il déborde
	   donc vers la gauche, par-dessus le texte. Une marge négative n'y aurait
	   rien fait — avec `justify-self: end`, c'est le bord droit qui est posé,
	   la marge ne déplace pas la boîte. Il faut bien l'élargir.
	   `max-width: none` : sans ça, le 100% hérité la ramènerait à la largeur
	   de la colonne. */
	max-width: none;
}
.hero .ph-organic.elementor-widget-image img,
.hero .ph-organic img {
	width: clamp(320px, 42vw, 600px);
	max-width: none;
}

.hero .e-con.split > .stack-tight {
	position: relative;
	z-index: 2;
}

/* Le chapeau s'arrête avant la photo.

   Le titre, lui, passe volontairement dessus — c'est l'effet recherché, et le
   fond posé mot par mot le garde lisible. Le chapeau non : en petit corps sur
   un visage, il se lisait mal et donnait l'impression d'un débordement.

   La réserve suit le débord réel de la photo, qui ne se comporte pas pareil
   des deux côtés de 1220px :
   - en dessous, le conteneur grandit avec la fenêtre et la photo aussi, le
     débord reste autour de 25px ;
   - au-dessus, le conteneur plafonne à 1180px alors que la photo continue de
     grandir jusqu'à 600px : le débord monte jusqu'à 125px.
   Une valeur fixe aurait donc rogné le texte pour rien sur les écrans
   moyens. */
@media (min-width: 861px) {
	.hero .lead,
	.hero .lead p { max-width: calc(100% - 3rem) !important; }
}
@media (min-width: 1220px) {
	.hero .lead,
	.hero .lead p {
		max-width: calc(100% - clamp(3rem, 42vw - 30rem, 9rem)) !important;
	}
}

/* --------------------------------------------------------------------------
   Fond de lisibilité, mot par mot.
   Un panneau plein derrière la colonne de texte réglait bien le contraste,
   mais il masquait tout le côté gauche de la photo : on ne voyait plus que
   le visage. Le fond se réduit donc à chaque mot — `site.js` les enveloppe —
   et la photo réapparaît entre les mots, entre les lignes et dans les marges.
   Sur le fond papier du hero il est invisible ; il ne se remarque que là où
   la photo passe dessous, c'est-à-dire exactement où il sert.
   -------------------------------------------------------------------------- */
/* Et seulement sur les mots qui tombent réellement sur la photo : `site.js`
   compare chaque mot au cadre et pose la classe. Un fond sur tous les mots
   se serait vu partout ailleurs — le hero porte deux halos en dégradé, un
   aplat de papier par-dessus se lit comme un surlignage. */
.hero .sur-photo {
	background: var(--paper);
	border-radius: 2px;
	padding: .04em .16em;
	margin: 0 -.05em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Les pastilles de réassurance sont réécrites par le compteur : elles n'ont
   pas de spans de mots. Le fond se pose donc sur la pastille entière, icône
   comprise — une plaque de papier d'un seul tenant, plus lisible sur la photo
   qu'un fond sous le seul libellé avec l'icône qui flotte à côté. */
.hero .chips .elementor-icon-list-item.sur-photo {
	background: var(--paper);
	border-radius: 3px;
	padding: .2rem .45rem;
	margin-left: -.45rem;
}

/* --------------------------------------------------------------------------
   Surbrillance mot à mot du titre.
   Les mots sont enveloppés par `site.js` ; sans JavaScript le titre reste un
   titre ordinaire. Réservé au pointeur : sur écran tactile un `:hover` reste
   collé au dernier mot touché.
   -------------------------------------------------------------------------- */
.hero__title .w { transition: background-color .16s ease, color .16s ease; }
@media (hover: hover) {
	.hero__title .w:hover {
		background: color-mix(in srgb, var(--accent) 24%, transparent);
		color: var(--accent-strong);
	}
	.hero__title em .w:hover {
		background: color-mix(in srgb, var(--accent) 30%, transparent);
	}
}

/* ==========================================================================
   PREMIER ÉCRAN SUR TÉLÉPHONE
   Le visiteur arrive pour juger une personne, pas pour lire une méthode.
   En pile verticale, l'ordre du desktop lui servait quatre lignes de titre
   et deux paragraphes avant le moindre visage. On inverse : le portrait
   d'abord, un titre court, une phrase, une action. Le reste passe sous la
   ligne de flottaison — rien n'est masqué, seulement différé.
   ========================================================================== */

@media (max-width: 860px) {
	.hero { padding-block: 1.5rem clamp(2.5rem, 7vw, 3.5rem); }

	/* Deux zones : une rangée « titre + portrait », puis tout le reste centré.
	   `display: contents` sur la colonne de texte dissout son conteneur, ce
	   qui permet de placer le titre et l'image côte à côte alors qu'ils ne
	   sont pas frères dans le DOM. */
	/* La colonne image est fixée en proportion, sinon le dimensionnement
	   tourne en rond : sa largeur viendrait de sa hauteur, qui vient du
	   titre, qui vient de la largeur restante. À 38% le texte reste
	   nettement plus large, et l'image s'étire sur la hauteur du titre. */
	/* Espacement généreux assumé : il écarte les cibles tactiles et laisse
	   la description passer sous la ligne de flottaison, plutôt que de la
	   masquer. Le premier écran tient alors en titre, visage, action. */
	.hero .e-con.split {
		display: grid !important;
		/* 46% et non 38% : la photo est le premier argument du site, elle
		   mérite plus que le tiers de l'écran. Elle déborde en plus sur la
		   colonne du titre (voir plus bas), d'où la gouttière à zéro. */
		grid-template-columns: 1fr 42%;
		align-items: start;
		/* Un seul rythme vertical pour tout le premier écran : c'est l'écart
		   entre chaque rangée, et c'est aussi l'écart minimum que `site.js`
		   garde entre le bas de la photo et les pastilles de réseaux. Au
		   dessus comme en dessous des réseaux, on retrouve donc la même
		   respiration. */
		--hero-rythme: 1.15rem;
		gap: var(--hero-rythme) 0 !important;
	}
	.hero .e-con.split > .stack-tight { display: contents; }

	.hero__title { grid-column: 1; grid-row: 1; margin: 0; }
	.hero__title .elementor-heading-title { font-size: clamp(1.5rem, 6vw, 2.1rem); }

	/* Le cadre épouse la photo, il ne s'étire plus à la hauteur du titre.
	   Tant que l'image était recadrée elle remplissait un cadre étiré ; depuis
	   qu'elle n'est plus rognée, cet étirement laissait voir le fond et la
	   bordure autour d'elle — le « vert qui dépasse ». Le cadre prend donc la
	   taille de la photo, calée en haut de la colonne de droite. */
	/* Sélecteur complet : `.hero .e-con.split > .ph` pèse 4 classes plus haut
	   dans la feuille, un `.hero .ph.elementor-widget-image` à 3 perdait et la
	   photo restait sur la seule première rangée. */
	.hero .e-con.split > .ph.elementor-widget-image {
		grid-column: 2; grid-row: 1 / span 2;
		align-self: start;
		justify-self: end;
		position: relative;
		overflow: hidden;
		/* La photo mord sur la colonne du titre. `width` explicite : en grille
		   une marge négative seule ne l'élargit pas, elle la décale. */
		width: calc(100% + 2.6rem);
		margin-inline: -2.6rem 0;
		z-index: 1;
	}
	/* Sans cette remise à zéro, la photo garde la largeur fixe du bureau
	   (320px minimum) dans un cadre de 189px : `overflow: hidden` la rognerait
	   sur le côté, alors qu'elle ne doit jamais l'être. */
	.hero .ph-organic.elementor-widget-image img,
	.hero .ph-organic img {
		position: static;
		display: block;
		width: 100%;
		height: auto;
		max-width: none;
		margin: 0;
		border-radius: 0;
		box-shadow: none;
		object-fit: contain;
	}

	/* Le titre passe devant la photo ; sa lisibilité vient du fond posé sous
	   chaque mot (voir plus haut), pas d'un panneau qui masquerait la photo. */
	.hero__title {
		position: relative;
		z-index: 2;
	}

	/* Placement explicite, rangée par rangée. Les pastilles de réassurance
	   tiennent dans la colonne du titre, juste sous lui : rangées en pleine
	   largeur, elles attendaient la fin de la photo et un vide de 100px
	   s'ouvrait sous le texte. La photo enjambe donc les deux rangées.
	   L'ordre reste : preuves, actions, description. Elles rassurent avant
	   qu'on demande de cliquer, et le titre dit déjà qui elle est. */
	.hero .chips {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
		/* Même largeur que les boutons : les deux s'arrêtent là où commence
		   le débord de la photo. Le bord gauche de la photo devient une
		   verticale franche à laquelle tout le bloc de gauche s'aligne, et
		   les libellés passent à la ligne au lieu de mordre sur l'image. */
		width: calc(100% - 2.6rem);
		/* Le titre reste la seule chose qui chevauche la photo — c'est
		   voulu. Les pastilles gardent le `z-index` au cas où un libellé
		   plus long déborderait quand même. */
		position: relative;
		z-index: 2;
	}
	/* Les actions reprennent toute la largeur, côte à côte : les réseaux sont
	   remontés dans la rangée des pastilles, la bande leur revient entière. */
	.hero .btn-row { grid-column: 1 / -1; grid-row: 3; }
	.hero .lead    { grid-column: 1 / -1; grid-row: 4; }

	/* Sous la photo et centrées dessus : elles reprennent sa boîte, débord
	   compris. Pleine largeur, elles n'avaient plus de rapport avec elle. */
	/* Sous la photo et centrées dessus : elles reprennent sa boîte, débord
	   compris. Pleine largeur, elles n'avaient plus de rapport avec elle. */
	/* Rangée des pastilles de réassurance, dans la colonne de la photo, calés
	   en bas : leur bord inférieur tombe sur celui de la dernière pastille.
	   La photo occupe le haut de cette même cellule (elle enjambe les
	   rangées 1 et 2) et se termine plus haut, donc les deux ne se touchent
	   pas. */
	.hero .e-con.split > .hero-socials {
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
		/* Calées en haut de la rangée, puis descendues par `site.js` juste
		   sous la photo : l'écart au-dessus vaut alors exactement le rythme
		   du hero, comme celui qui les sépare des boutons en dessous.
		   Calées en bas, elles suivaient la hauteur des pastilles et
		   l'écart du dessus partait à 31px. */
		align-self: start;
		width: calc(100% + 2.6rem);
		max-width: none;
		margin: 0 0 0 -2.6rem;
	}
	/* Les trois pastilles tiennent sur une ligne, quoi qu'il arrive : la
	   rangée devient une grille de trois parts égales qui se partagent la
	   largeur de la photo. Chacune plafonne à 58px — plus grandes que sur
	   ordinateur, puisque c'est ici la seule façon d'ouvrir ses pages et que
	   le doigt n'a pas la précision du curseur — et rétrécit en dessous
	   quand la place manque, au lieu de passer à la ligne.
	   `min-width: 0` : sans lui une part ne descend pas sous la taille de son
	   contenu et la troisième repart quand même à la ligne. */
	.hero .hero-socials .elementor-social-icons-wrapper {
		display: flex !important;
		flex-wrap: nowrap;
		justify-content: center;
		gap: .5rem;
		width: 100%;
	}
	.hero .hero-socials .elementor-grid-item {
		display: block;
		flex: 1 1 0;
		min-width: 0;
		max-width: 58px;
	}
	.hero .hero-socials .elementor-social-icon {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 !important;
	}
	.hero .hero-socials .elementor-social-icon svg { width: 36%; height: 36%; }
	.hero .lead {
		text-align: left;
		margin-inline: 0;
		max-width: 42ch !important;
	}
	/* Les deux actions tiennent sur une seule ligne : empilées, elles
	   repoussaient la description hors du premier écran, et la seconde se
	   lisait comme une retombée de la première. Côte à côte, elles se lisent
	   comme un choix. Le libellé peut passer sur deux lignes — d'où
	   `align-items: stretch`, qui garde les deux boutons de la même hauteur. */
	.hero .btn-row {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: stretch;
		gap: .55rem !important;
		/* Pas de marge propre : l'écart au-dessus des boutons est celui de la
		   grille, le même que partout ailleurs dans le hero. */
		margin-top: 0;
	}
	/* `display: flex` sur le widget, `height: 100%` sur le bouton : sans ça
	   `align-items: stretch` étire le widget mais pas le bouton, et celui
	   dont le libellé tient sur une ligne reste plus court que l'autre. */
	.hero .btn-row > .elementor-widget-button {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
	}
	.hero .btn-row .elementor-button { height: 100%; }
	.hero .btn-row .elementor-button {
		width: 100%;
		white-space: normal;
		padding: .9rem .45rem;
		/* Les libellés passent sur deux lignes dans les 161px du coin. Les
		   faire tenir d'un trait demandait 12px de texte : illisible au
		   pouce. Deux lignes, à taille lisible, et `align-items: stretch`
		   garde les deux boutons de la même hauteur. */
		font-size: .86rem;
		line-height: 1.25;
	}
	/* L'icône coûte la ligne : avec elle, « Prendre rendez-vous » se coupe en
	   deux. Les deux libellés tiennent d'un trait sans elle. */
	.hero .btn-row .elementor-button-icon { display: none; }
	.hero .btn-row .elementor-button-content-wrapper { gap: 0; }

	/* Alignement à gauche : titre, preuves et description partagent le même
	   bord. Centrées, les trois pastilles flottaient sans axe commun avec le
	   titre juste au-dessus. */
	.hero .chips.elementor-widget-icon-list .elementor-icon-list-items {
		justify-content: flex-start;
		align-items: flex-start;
	}
	.hero .chips.elementor-widget-icon-list .elementor-icon-list-item { justify-content: flex-start; }

	/* Les pastilles de réassurance deviennent une ligne de preuve compacte.
	   Réduites : elles arrivent juste sous le titre, elles ne doivent pas
	   peser autant que lui. */
	/* Une par ligne : réduites, elles se répartissaient 1 + 2 sur deux rangées,
	   une asymétrie qu'on lit comme un bug. Trois sur une ligne ne tiennent
	   pas à 320px. */
	.chips.elementor-widget-icon-list .elementor-icon-list-items {
		flex-direction: column;
		gap: .45rem;
	}
	/* Serré pour que les trois libellés tiennent chacun sur une ligne dans
	   les 161px de la colonne : gouttière icône/texte ramenée de .9 à .55rem,
	   corps à .8rem. Sinon « Membre EFTA · SFTF » se coupait avant le sigle. */
	.chips.elementor-widget-icon-list .elementor-icon-list-item {
		font-size: .8rem !important;
		gap: .55rem !important;
	}
	.chips.elementor-widget-icon-list .elementor-icon-list-icon { width: 28px; height: 28px; }
	.chips.elementor-widget-icon-list .elementor-icon-list-icon svg { width: 13px; height: 13px; }
	.hero .chips .chip-num { font-size: 1.05rem; }
	/* Les libellés passent à la ligne dans leur colonne plutôt que de mordre
	   sur la photo. `align-items: flex-start` garde l'icône calée en haut du
	   libellé quand il tient sur deux lignes. */
	.hero .chips .elementor-icon-list-item { align-items: flex-start; }
	.hero .chips .elementor-icon-list-icon { margin-top: .05rem; }

	/* Le chapeau se resserre et sa seconde phrase — les diplômes — passe au
	   second plan : utile, mais ce n'est pas ce qui décide le visiteur. */
	.hero .lead { font-size: 1.02rem; line-height: 1.6; }
	.hero .lead p { margin-bottom: .7em; }
	/* Pas d'opacité ici : elle délavait le texte à 4,3:1, sous le seuil
	   de 4,5:1. La taille réduite suffit à poser la hiérarchie. */
	.hero .lead p + p { font-size: .95rem; color: var(--text-soft); }

	.hero .stack-tight { gap: .45rem !important; }
}

/* Téléphone en paysage : le titre ne fait plus que deux lignes, donc le cadre
   de la photo devient large et court et rogne le haut du visage. On lui donne
   un plancher — l'égalité stricte des hauteurs compte moins ici que le sujet. */
@media (max-width: 860px) and (max-height: 520px) {
	.hero .ph.elementor-widget-image { min-height: 170px; }
	.hero { padding-block: 1rem 2rem; }
}

/* Moins de chrome avant le contenu : 147px de barres sur un écran de 844px,
   c'est un sixième du premier écran dépensé en navigation. */
@media (max-width: 640px) {
	.site-topbar__inner { min-height: 0; padding-block: 0; }
	.site-topbar a { min-height: 40px !important; padding-block: .3rem !important; }
	.site-header__inner { padding-block: .6rem; }
}

/* Hero des pages intérieures */
.hero--page { padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); }
.hero--page h1.elementor-heading-title { max-width: 20ch; }
.hero--page .eyebrow .elementor-heading-title,
.hero--page .eyebrow { max-width: none; white-space: nowrap; }

/* Fil d'ariane maison */
.crumb .elementor-heading-title {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-soft);
}

/* Encart « définition » : l'aplat suffit à le détacher, sans bordure latérale */
.definition.e-con {
	background: var(--muted-50);
	border: 1px solid var(--muted-100);
	border-radius: var(--radius);
	padding: clamp(1.4rem, 2.2vw, 2rem) clamp(1.5rem, 2.4vw, 2.2rem);
	max-width: 55ch;
}
.definition .elementor-heading-title {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
	font-weight: 700;
}

/* Prose longue (pages de contenu) */
/* 55ch : en Karla le "ch" est plus large que la lettre moyenne, 68ch rendait 94 caractères réels.
   `.elementor-widget.prose` (0,2,0) : Elementor impose `max-width: 100%`
   à ses widgets et gagnerait sur `.prose` seul. */
.prose,
.prose .elementor-widget-container { font-size: var(--fs-base); line-height: 1.8; }
/* `!important` assumé : une règle d'Elementor impose `max-width: 100%` en
   important sur ses widgets, que la spécificité seule ne peut pas battre. */
.elementor-widget.prose,
.narrow .elementor-widget-text-editor { max-width: 55ch !important; }
.prose p { margin-bottom: 1.3em; }

/* Image sticky dans les splits longs */
@media (min-width: 1025px) {
	.sticky-media { position: sticky; top: 7.5rem; }
}

/* ==========================================================================
   PAGE INTROUVABLE (404)
   Elle emprunte le vocabulaire du reste du site — même cadre à deux coins
   arrondis, même couleur d'approche, mêmes boutons — pour qu'on sente qu'on
   est toujours chez Elisabeth, pas sur une page d'erreur du serveur.
   ========================================================================== */

.notfound { position: relative; overflow: hidden; }
.notfound__inner {
	width: min(100% - 2.5rem, 760px);
	margin-inline: auto;
	text-align: center;
}

/* Le code d'erreur reste lisible pour qui le cherche, sans dominer la page :
   c'est l'information la moins utile au visiteur. */
.notfound__code {
	font-family: var(--font-display);
	font-size: clamp(4.5rem, 16vw, 9rem);
	line-height: .9;
	letter-spacing: -.04em;
	margin: 0 0 .6rem;
	color: color-mix(in srgb, var(--accent) 22%, transparent);
}

.notfound__title {
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 4.5vw, 2.9rem);
	line-height: 1.12;
	letter-spacing: -.02em;
	margin: 0 0 .8rem;
	color: var(--ink);
}

.notfound__lead {
	font-size: 1.08rem;
	line-height: 1.65;
	color: var(--text-soft);
	max-width: 46ch;
	margin: 0 auto 2rem;
}

.notfound__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .85rem;
	margin-bottom: 3rem;
}

/* Les pistes : une liste, pas une grille de cartes. Six destinations en
   cartes feraient un second menu, alors que le menu est déjà au-dessus. */
.notfound__links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .5rem 1.5rem;
	text-align: left;
	margin-bottom: 3rem;
}
.notfound__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 52px;
	padding: .55rem .9rem;
	border-bottom: 1px solid var(--muted-100);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s, border-color .2s, padding-left .2s;
}
.notfound__links a:hover,
.notfound__links a:focus-visible {
	background: color-mix(in srgb, var(--accent) 7%, transparent);
	border-bottom-color: var(--accent);
	padding-left: 1.3rem;
	color: var(--accent-strong);
}
.notfound__links svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--accent);
}

.notfound__search { margin-bottom: 1.6rem; }
.notfound__search label {
	display: block;
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-soft);
	margin-bottom: .6rem;
}
.notfound__search-row {
	display: flex;
	gap: .6rem;
	justify-content: center;
	flex-wrap: wrap;
}
.notfound__search input[type="search"] {
	flex: 1 1 260px;
	min-width: 0;
	min-height: 52px;
	padding: .8rem 1rem;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--text);
	background: #fff;
	border: 1px solid var(--muted-100);
	border-radius: var(--radius-btn);
}
.notfound__search input[type="search"]:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: var(--accent);
}

.notfound__call {
	font-size: .98rem;
	color: var(--text-soft);
	margin: 0;
}
.notfound__call a {
	color: var(--accent-strong);
	font-weight: 700;
}

@media (max-width: 640px) {
	.notfound__links { grid-template-columns: minmax(0, 1fr); }
	.notfound__actions .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   LE JOURNAL : page « Articles » et article seul

   Ces deux gabarits ne passent pas par Elementor — c'est voulu. Elisabeth
   écrit son article dans l'éditeur de WordPress et la mise en page suit,
   sans qu'elle ait à reconstruire quoi que ce soit. Le style reprend donc le
   vocabulaire du reste du site : mêmes cadres à deux coins arrondis, même
   couleur d'approche, même rythme vertical.
   ========================================================================== */

.journal-tete,
.article-tete { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem); }

.journal-tete__titre,
.article-tete__titre {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4.5vw, 3rem);
	line-height: 1.12;
	letter-spacing: -.02em;
	margin: 0 0 .6rem;
	color: var(--ink);
	max-width: 22ch;
}

.journal-tete__intro {
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--text-soft);
	max-width: 56ch;
	margin: 0;
}

/* -- La liste ------------------------------------------------------------- */

.journal-liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
	gap: clamp(1.6rem, 3vw, 2.6rem);
}

.journal-carte {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Le cadre reprend la signature des images du site : deux coins largement
   arrondis, deux coins francs, contour dans la couleur de l'approche. */
.journal-carte__image {
	display: block;
	overflow: hidden;
	border: 1px solid var(--accent);
	border-radius: var(--radius-lg) var(--radius-btn) var(--radius-lg) var(--radius-btn);
	background: var(--muted-50);
	aspect-ratio: 4 / 3;
}
.journal-carte__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2,.8,.3,1);
}
.journal-carte:hover .journal-carte__image img { transform: scale(1.04); }

.journal-carte__date {
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-soft);
	margin: 0 0 .4rem;
}

.journal-carte__titre {
	font-family: var(--font-display);
	font-size: 1.35rem;
	line-height: 1.22;
	margin: 0 0 .55rem;
}
.journal-carte__titre a {
	color: var(--ink);
	text-decoration: none;
}
.journal-carte:hover .journal-carte__titre a { color: var(--accent-strong); }

.journal-carte__chapeau {
	color: var(--text-soft);
	line-height: 1.6;
	margin: 0 0 .9rem;
}

.journal-carte__lien {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-weight: 700;
	color: var(--accent-strong);
}
.journal-carte__lien svg { width: 17px; height: 17px; }
.journal-carte:hover .journal-carte__lien svg { transform: translateX(3px); }
.journal-carte__lien svg { transition: transform .3s cubic-bezier(.2,.8,.3,1); }

.journal-vide {
	font-size: 1.05rem;
	color: var(--text-soft);
}

/* Pagination : WordPress sort une liste de liens, on la pose simplement. */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 3rem;
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	min-height: 46px;
	padding: 0 .9rem;
	border: 1px solid var(--muted-100);
	border-radius: var(--radius-btn);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}
.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent-strong); }
.pagination .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

/* -- L'article ------------------------------------------------------------ */

.article-tete__retour { margin: 0 0 1.2rem; }
.article-tete__retour a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--accent-strong);
}

.article-tete__date {
	font-size: .9rem;
	color: var(--text-soft);
	margin: 0;
}

.article-image {
	margin-block: clamp(1.5rem, 3vw, 2.5rem) 0;
}
/* ⚠️ `width: auto` et non `100%`. Les illustrations fournies font de 224 à
   762 pixels de large, quand la colonne en fait 1180 : forcées à la pleine
   largeur, elles étaient agrandies jusqu'à cinq fois et devenaient floues.
   Elles s'affichent donc à leur taille réelle, centrées — une image nette et
   petite vaut mieux qu'une grande image sale. Une image assez grande, elle,
   prendra toute la largeur comme avant. */
.article-image { text-align: center; }
.article-image img {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--accent);
	border-radius: var(--radius-lg) var(--radius-btn) var(--radius-lg) var(--radius-btn);
}

.article-corps { padding-block: clamp(2rem, 4vw, 3.5rem); }

/* La mesure de lecture : au-delà de ~70 signes, l'œil perd sa ligne. */
.article-texte {
	max-width: 68ch;
	font-size: 1.06rem;
	line-height: 1.75;
	color: var(--text);
}
.article-texte > * + * { margin-top: 1.1em; }
.article-texte h2 {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 2.6vw, 1.85rem);
	line-height: 1.2;
	color: var(--ink);
	margin-top: 2.2em;
}
.article-texte h3 {
	font-family: var(--font-display);
	font-size: 1.25rem;
	color: var(--ink);
	margin-top: 1.8em;
}
.article-texte a {
	color: var(--accent-strong);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.article-texte a:hover { text-decoration-color: var(--accent); }
.article-texte ul,
.article-texte ol { padding-left: 1.3rem; }
.article-texte li + li { margin-top: .4em; }
.article-texte blockquote {
	margin-inline: 0;
	padding-left: 1.3rem;
	border-left: 2px solid var(--accent);
	color: var(--text-soft);
	font-style: italic;
}
.article-texte img {
	border-radius: var(--radius-btn);
}

/* -- Les voisins ---------------------------------------------------------- */

.article-voisins { padding-block: clamp(2rem, 4vw, 3rem); }
.article-voisins__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 1rem;
}
.article-voisin {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: 1.1rem 1.3rem;
	background: var(--paper);
	border: 1px solid var(--muted-100);
	border-radius: var(--radius-btn);
	text-decoration: none;
	transition: border-color .3s, transform .3s cubic-bezier(.2,.8,.3,1);
}
.article-voisin:hover { border-color: var(--accent); transform: translateY(-2px); }
.article-voisin--droite { text-align: right; }
.article-voisin__sens {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-soft);
}
.article-voisin__titre {
	font-family: var(--font-display);
	font-size: 1.1rem;
	line-height: 1.25;
	color: var(--ink);
}

/* -- Le rappel de rendez-vous --------------------------------------------- */

.article-rdv { padding-block: clamp(2.5rem, 5vw, 4rem); }
.article-rdv__inner { max-width: 760px; }
.article-rdv h2 {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	line-height: 1.15;
	margin: 0 0 .6rem;
}
.article-rdv p { margin: 0 0 1.6rem; }
.article-rdv__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
}

@media (max-width: 640px) {
	.article-voisin--droite { text-align: left; }
	.article-rdv__actions .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   CARTE SUR DEMANDE
   La carte Google ne se charge qu'au clic : voir le commentaire de
   `eli_carte_sur_demande()` dans functions.php. L'encart doit donc tenir tout
   seul — il porte l'adresse, et un lien pour ouvrir Google Maps à part.
   ========================================================================== */

.carte-demande {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: 2rem 1.5rem;
	background: var(--muted-50);
	border: 1px solid var(--muted-100);
	border-radius: var(--radius-lg) var(--radius-btn) var(--radius-lg) var(--radius-btn);
}
.carte-demande__texte {
	max-width: 46ch;
	text-align: center;
}
.carte-demande__titre {
	font-family: var(--font-display);
	font-size: 1.25rem;
	color: var(--ink);
	margin: 0 0 .5rem;
}
.carte-demande p {
	color: var(--text-soft);
	line-height: 1.6;
	margin: 0 0 1.2rem;
}
.carte-demande__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	justify-content: center;
	margin-bottom: 1rem !important;
}
.carte-demande__adresse {
	font-size: .92rem;
	margin: 0 !important;
}

/* Une fois chargée, l'encart s'efface derrière la carte. */
.carte-demande--chargee {
	display: block;
	padding: 0;
	overflow: hidden;
	background: none;
}
.carte-demande--chargee iframe {
	display: block;
	width: 100%;
	height: 320px;
	border: 0;
}

@media (max-width: 640px) {
	.carte-demande__actions .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   CHAMPS À REMPLIR DES PAGES LÉGALES
   Ces encadrés attendent des informations qu'Elisabeth seule possède :
   SIRET, assurance, hébergeur, médiateur. Ils doivent sauter aux yeux — un
   trou qu'on ne voit pas est un trou qui part en ligne.
   ========================================================================== */

.a-completer {
	display: inline-block;
	padding: .15em .6em;
	border: 1px dashed var(--c-oculaire);
	border-radius: 3px;
	background: color-mix(in srgb, var(--c-oculaire) 8%, transparent);
	color: var(--c-oculaire);
	font-size: .92em;
	font-weight: 600;
	font-style: normal;
}

/* Liens légaux du pied de page */
.site-footer__legal {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .4rem 1.1rem;
}
.site-footer__legal a {
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(255,255,255,.25);
}
.site-footer__legal a:hover { color: #fff; text-decoration-color: #fff; }

/* ==========================================================================
   LA PLANTE DU HERO DE CONTACT
   Image détourée de son ancien site, qu'Elisabeth tenait à garder. Elle est
   posée en ornement, pas en contenu : d'où un pseudo-élément plutôt qu'une
   image dans la page — rien à annoncer à un lecteur d'écran, rien à
   légender.
   Le fondu du bas est dans le fichier lui-même (tools/preparer-plante.py) et
   non ici : l'image reste juste partout où elle sera posée ensuite, y compris
   si Elisabeth l'insère depuis WordPress.
   ========================================================================== */

.eli-page-contact-rendez-vous .hero--page {
	position: relative;
	overflow: hidden;
}
.eli-page-contact-rendez-vous .hero--page::after {
	content: "";
	position: absolute;
	/* Elementor pose `inset: 0` sur les pseudo-éléments de conteneur : les
	   quatre côtés sont donc écrits, sinon la plante se colle en haut à
	   gauche et s'étire. */
	top: auto;
	left: auto;
	right: clamp(.5rem, 5vw, 4rem);
	bottom: 0;
	width: clamp(130px, 20vw, 250px);
	aspect-ratio: 714 / 1017;
	background: url("assets/img/plante-contact.png") no-repeat bottom center / contain;
	pointer-events: none;
	z-index: 0;
}

/* Sous 560px, plutôt que d'effacer la plante pour laisser passer le texte,
   on recule le texte : il s'arrête avant elle. Un chapeau posé sur un
   feuillage, même pâli, perd le contraste dont il a besoin. */
@media (max-width: 560px) {
	.eli-page-contact-rendez-vous .hero--page::after { width: 110px; }
	.eli-page-contact-rendez-vous .hero--page .lead,
	.eli-page-contact-rendez-vous .hero--page .lead p {
		max-width: calc(100% - 6rem) !important;
	}
}

/* La même plante sur l'accueil, dans la section des témoignages.

   Ce choix n'est pas qu'esthétique : cette section portait deux halos en
   dégradé, retirés depuis, et elle est restée un peu nue. La plante y rend
   le service que rendaient les halos, en plus franc.

   À droite, et pas à gauche comme essayé d'abord : le bouton « Lire tous les
   témoignages » occupe le bas de la colonne de gauche, la plante passait
   derrière et les deux s'abîmaient. Le bas de la troisième carte, lui, est
   libre. */
.eli-page-accueil .sec-avis {
	position: relative;
	overflow: hidden;
}
.eli-page-accueil .sec-avis::after {
	content: "";
	position: absolute;
	top: auto;
	left: auto;
	right: clamp(.5rem, 3vw, 2.5rem);
	bottom: 0;
	width: clamp(120px, 16vw, 210px);
	aspect-ratio: 714 / 1017;
	background: url("assets/img/plante-contact.png") no-repeat bottom center / contain;
	pointer-events: none;
	z-index: 0;
}

/* Sur téléphone, les témoignages prennent toute la largeur : la plante se
   retire plutôt que de passer sous le texte. Elle a déjà sa place sur la
   page Contact, elle ne manque pas ici. */
@media (max-width: 860px) {
	.eli-page-accueil .sec-avis::after { display: none; }
}

/* ==========================================================================
   LA GRANDE PLANTE DE LA SECTION « UN ESPACE POUR CHACUN »

   Ici elle est nette en bas, pas en fondu : son pied s'arrête pile sur la
   limite entre la bande blanche et la bande suivante. C'est la coupure qui
   fait l'effet — la plante a l'air posée sur la ligne. D'où un second
   fichier, `plante-entiere.png`, l'original sans le dégradé appliqué à
   `plante-contact.png`.

   Le texte recule à gauche pour lui laisser la place, plutôt que de passer
   derrière : trois cartes lues par-dessus un feuillage, ce serait illisible.
   ========================================================================== */

.eli-page-accueil .sec-accompagnements {
	position: relative;
	overflow: hidden;
}

@media (min-width: 861px) {
	/* La réserve suit la largeur de la plante, plus une gouttière. */
	.eli-page-accueil .sec-accompagnements .e-con.intro-center,
	.eli-page-accueil .sec-accompagnements .e-con.facets {
		max-width: calc(100% - clamp(250px, 33vw, 480px));
		margin-right: auto;
	}

	.eli-page-accueil .sec-accompagnements::after {
		content: "";
		position: absolute;
		top: auto;
		left: auto;
		bottom: 0;
		/* Alignée sur le bord droit du contenu, pas sur celui de la fenêtre :
		   au-delà de --maxw la bande déborde du contenu des deux côtés. */
		right: max(1.25rem, calc((100% - var(--maxw)) / 2));
		width: clamp(220px, 30vw, 440px);
		aspect-ratio: 714 / 1017;
		background: url("assets/img/plante-entiere.png") no-repeat bottom center / contain;
		pointer-events: none;
		z-index: 0;
	}
}