/*
Theme Name: Médecine Intime
Theme URI:    https://www.medecineintime.fr/
Author:       Philae Développement
Description:  Thème bloc sur mesure pour le site du Dr Valéry Poulard — gynécologie médicale, obstétrique et médecine intime. Charte « Concept 3 » : frais, doux, clinique, rassurant.
Version:      4.24.3
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  medecine-intime
Tags:         one-column, block-patterns, full-site-editing, accessibility-ready
*/

/* ===================================================================
   SOMMAIRE
   1. Jetons locaux         7. Cadres & médias
   2. Animations            8. Cartes de contenu
   3. Socle                 9. Les traitements
   4. En-tête              10. Valeurs & icônes
   5. Boutons & CTA        11. FAQ, témoignage, tarifs
   6. Décor & textures     12. Fiche, pied de page, impression
   =================================================================== */

/* === 1. JETONS LOCAUX ============================================ */

:root {
	--mi-r-carte: 20px;
	--mi-r-douce: 14px;
	--mi-r-large: 32px;
	--mi-courbe: cubic-bezier(.22, .61, .36, 1);

	/* Progression des approches, du geste le plus doux au plus complet. */
	--mi-degre-1: #f7d9cc;
	--mi-degre-2: #eddfe6;
	--mi-degre-3: #d8e9e8;
	--mi-degre-4: #33635f;

	/* Teintes intermédiaires tirées des planches, hors palette éditeur. */
	--mi-peche-profond: #f0b49b;
	--mi-menthe: #c8ddd8;
	--mi-teal-clair: #9ec7c4;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 7rem;
}

/* === 2. ANIMATIONS =============================================== */

/* « est-masque » n'est jamais écrit dans le HTML : seul mi-anim.js le pose,
   juste avant de confier l'élément à l'observateur. Sans JavaScript, ou si le
   script échoue, aucune règle ne masque quoi que ce soit — le contenu reste
   lisible. C'est le point important sur un site de santé. */
.est-masque:not(.mi-stagger) {
	opacity: 0;
	transform: translateY(26px);
}
.est-masque:not(.mi-stagger).est-visible {
	opacity: 1;
	transform: none;
	transition: opacity .75s var(--mi-courbe), transform .75s var(--mi-courbe);
}

.est-masque.mi-stagger > * {
	opacity: 0;
	transform: translateY(22px);
}
.est-masque.mi-stagger.est-visible > * {
	opacity: 1;
	transform: none;
	transition: opacity .65s var(--mi-courbe), transform .65s var(--mi-courbe);
	transition-delay: calc(var(--mi-rang, 0) * 70ms);
}

@keyframes mi-monte { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes mi-eclot { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes mi-flotte {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%      { transform: translate3d(0, -16px, 0) rotate(3deg); }
}
@keyframes mi-trace { to { stroke-dashoffset: 0; } }

.mi-anim .mi-hero__texte > * { animation: mi-monte .9s var(--mi-courbe) backwards; }
.mi-anim .mi-hero__texte > *:nth-child(1) { animation-delay: .05s; }
.mi-anim .mi-hero__texte > *:nth-child(2) { animation-delay: .14s; }
.mi-anim .mi-hero__texte > *:nth-child(3) { animation-delay: .23s; }
.mi-anim .mi-hero__texte > *:nth-child(4) { animation-delay: .32s; }
.mi-anim .mi-hero__texte > *:nth-child(5) { animation-delay: .41s; }
.mi-anim .mi-hero__visuel { animation: mi-eclot 1.1s var(--mi-courbe) .18s backwards; }

/* Filet du hero — voir « filetHero() » dans mi-anim.js. Posé deux secondes
   après l'amorçage, quand les animations d'entrée sont forcément terminées.
   L'état d'arrivée étant identique, retirer l'animation ne produit aucun
   saut ; en revanche, si elle n'a jamais démarré, le contenu réapparaît. */
.mi-anim-pose .mi-hero__texte > *,
.mi-anim-pose .mi-hero__visuel {
	animation: none;
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* === 3. SOCLE ==================================================== */

.mi-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: .85rem 1.4rem;
	border-radius: 0 0 var(--mi-r-douce) 0;
	background: var(--wp--preset--color--eucalyptus-fonce);
	color: #fff;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--mention);
	text-decoration: none;
}
.mi-skip-link:focus { left: 0; top: 0; }

/* Les surfaces que le navigateur dessine à notre place portent le design
   autant que le reste : sélection, curseur de saisie, barre de défilement. */
::selection {
	background: var(--wp--preset--color--peche);
	color: var(--wp--preset--color--encre);
}
:root {
	caret-color: var(--wp--preset--color--eucalyptus-fonce);
	scrollbar-color: var(--mi-teal-clair) var(--wp--preset--color--brume);
	scrollbar-width: thin;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--wp--preset--color--brume); }
::-webkit-scrollbar-thumb {
	background: var(--mi-teal-clair);
	border: 3px solid var(--wp--preset--color--brume);
	border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--wp--preset--color--eucalyptus); }

/* Idiome unique de survol pour tout lien de texte : un changement de couleur,
   jamais un soulignement. Trois traitements différents cohabitaient — pêche
   en contenu, souligné simple dans le fil d'Ariane, souligné sans décalage
   dans le bloc contact — et cela se voyait en passant d'une page à l'autre.
   Les composants qui ont leur propre langage gardent le leur : la navigation
   et son filet coulissant, les cartes, les boutons, les pastilles du plan. */
/* :not(.wp-element-button) n'est pas cosmétique : sans lui, la règle est plus
   spécifique que les styles de bouton générés par theme.json et ferait virer
   au mauve le texte blanc d'un bouton plein au survol. */
.mi-contenu a:not(.wp-element-button),
.mi-footer a,
.mi-ariane__etape a,
.mi-contact__valeur a,
.mi-carte-lieu__replis a {
	text-decoration: none;
	/* La même durée pour les quatre : seuls les liens du pied de page
	   fondaient vers le mauve, les autres basculaient d'un coup. */
	transition: color .25s ease;
}
.mi-contenu a:not(.wp-element-button):hover,
.mi-footer a:hover,
.mi-ariane__etape a:hover,
.mi-contact__valeur a:hover {
	text-decoration: none;
	color: var(--wp--preset--color--mauve-fonce);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--eucalyptus-fonce);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Grain papier — texture 1 de la planche. Généré, pas téléchargé : une image
   de bruit coûterait 40 Ko pour le même effet. */
.mi-grain { position: relative; }
.mi-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}

/* === 4. EN-TÊTE ================================================== */

/* Le collant est porté par l'enveloppe de la partie de gabarit, pas par le
   <header> lui-même. Un élément sticky reste prisonnier de la boîte de son
   parent : posé sur .mi-header, il ne pouvait coller que sur les 74 px de
   hauteur de cette enveloppe, puis disparaissait avec elle. L'enveloppe, elle,
   est fille directe de .wp-site-blocks et couvre donc toute la page. */
.wp-site-blocks > .wp-block-template-part:first-child {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Le fond dépoli est porté par un pseudo-élément, et non par l'en-tête.
   « backdrop-filter » fait de l'élément qui le porte un bloc conteneur pour ses
   descendants en position fixe : le panneau du menu, pourtant en inset:0, se
   retrouvait enfermé dans les 66 px de la barre au lieu de couvrir l'écran.
   Sur le pseudo-élément, l'effet est identique et l'en-tête redevient
   transparent à la position fixe. */
.mi-header {
	position: relative;
	border-bottom: 1px solid transparent;
	transition: box-shadow .3s ease, border-color .3s ease;
}
.mi-header::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: rgba(255, 255, 255, .88);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
}
.mi-header.a-defile {
	border-bottom-color: var(--wp--preset--color--filet);
	box-shadow: 0 6px 28px rgba(51, 99, 95, .07);
}

/* --- Verrou de marque -------------------------------------------------
   Reprend le logo vectoriel du graphiste : emblème, nom en deux couleurs,
   liseré, signature. Les teintes viennent du fichier lui-même et non de la
   palette du thème — c'est un logo, il doit être fidèle à sa source. Les deux
   passent AA sur blanc : 5,47:1 pour l'eucalyptus, 4,50:1 pour le mauve. */
:root {
	--mi-logo-teal: #21747b;
	--mi-logo-peche: #fdb6a2;

	/* Le mauve du fichier, #9e6681, tombe à 4,49:1 sur blanc — sous le seuil AA
	   de 0,01. Un logotype en est formellement dispensé, mais deux teintes de la
	   charte ont déjà été assombries ici pour la même raison : on s'y tient.
	   L'écart est de quatre points de rouge, invisible à l'œil. Le mauve
	   d'origine reste sur la pastille de l'emblème, qui est une forme et non un
	   texte, et n'a donc aucun seuil à tenir. */
	--mi-logo-mauve: #9a637e;
}

.mi-logo {
	display: flex;
	align-items: center;
	gap: .9rem;
	text-decoration: none;
}
.mi-logo__marque {
	width: 52px;
	height: 52px;
	flex: none;
	transition: transform .5s var(--mi-courbe);
}
.mi-logo:hover .mi-logo__marque { transform: rotate(-7deg) scale(1.05); }

.mi-logo__texte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .3rem;
	min-width: 0;
}
.mi-logo__nom {
	font-family: var(--wp--preset--font-family--titre);
	font-size: 1.32rem;
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: .005em;
	white-space: nowrap;
}
.mi-logo__nom--un { color: var(--mi-logo-teal); }
.mi-logo__nom--deux { color: var(--mi-logo-mauve); }

/* Le liseré du logo : court, aligné à gauche, entre le nom et la signature.
   Il s'étire au survol, comme les autres filets du thème. */
.mi-logo__filet {
	display: block;
	width: 3.2rem;
	height: 1px;
	background: var(--mi-logo-peche);
	transform: scaleX(.7);
	transform-origin: left center;
	transition: transform .45s var(--mi-courbe);
}
.mi-logo:hover .mi-logo__filet { transform: scaleX(1); }

.mi-logo__signature {
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--mention);
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.1;
	color: var(--mi-logo-teal);
	white-space: nowrap;
}

.mi-header .wp-block-navigation-item__content {
	position: relative;
	padding-block: .4rem;
}
.mi-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--eucalyptus);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--mi-courbe);
}
.mi-header .wp-block-navigation-item__content:hover::after,
.mi-header .current-menu-item .wp-block-navigation-item__content::after { transform: scaleX(1); }

/* Le bouton de rendez-vous du menu ne sert qu'au panneau mobile ; sa règle
   d'effacement au-dessus de 768 px est posée avec le reste du panneau, plus
   bas. Rappel valable pour tout l'en-tête : les feuilles de blocs du cœur sont
   imprimées avant style.css, mais leurs sélecteurs sont parfois plus
   spécifiques que les nôtres — vérifier la spécificité, jamais se fier au seul
   ordre des feuilles. */

/* --- Bascule du menu ---------------------------------------------------
   Le cœur passe du panneau au menu horizontal à 600 px. C'est bien trop tôt
   ici : mesuré à 768 px, le logo fait 316 px, les quatre entrées 487, le bouton
   de rendez-vous 219 — avec les espaces, il faut environ 1100 px pour tenir sur
   une ligne. En dessous, la barre s'empilait sur trois rangées et l'en-tête
   montait à 190 px de haut.

   La borne du cœur est donc repoussée à 1280 px. La valeur vient de la mesure,
   pas d'un chiffre rond : à 1100 comme à 1200 px la barre repassait sur deux
   rangées, parce que la colonne « alignwide » ne fait encore que 1088 px à
   l'intérieur d'une fenêtre de 1200. 1280 est la première largeur où elle tient.
   Les deux règles ci-dessous sont exactement celles que le cœur applique à
   partir de 600 px, remises dans leur état fermé. Sélecteurs à quatre classes :
   ses feuilles de blocs sont imprimées avant style.css, mais on ne se repose pas
   sur l'ordre pour une bascule aussi structurante. */
@media (max-width: 1279.98px) {
	.mi-header .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	.mi-header .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container-open {
		display: flex;
	}
}

/* --- Barre mobile ------------------------------------------------------
   Sous 768 px, le bouton de rendez-vous quitte la barre : logo et déclencheur
   du menu suffisent à tenir la ligne, et l'appel à l'action reparaît en
   pastille au bas du panneau. Entre 768 et 1280 px il reste dans la barre, à
   côté du déclencheur — il y a la place, et c'est l'action principale. Le seuil
   est bien à 768 et non à 600 : à 600 px, logo (316) plus bouton (219) plus
   déclencheur (44) dépassaient déjà la ligne. */
@media (max-width: 767.98px) {
	.mi-header__barre {
		flex-wrap: nowrap;
		gap: 1rem;
	}
	.mi-logo { min-width: 0; gap: .7rem; }
	.mi-logo__marque { width: 42px; height: 42px; }
	.mi-logo__nom { font-size: 1.06rem; }
	.mi-logo__filet { width: 2.4rem; }
	.mi-logo__signature {
		font-size: .66rem;
		letter-spacing: .08em;
		/* Une signature tronquée vaut mieux qu'un nom repoussé sur deux lignes. */
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	/* Le bouton de la barre disparaît, son jumeau prend le relais dans le
	   panneau. Ni l'un ni l'autre n'est masqué à l'écran de lecture : celui
	   qui reste est un lien complet. */
	.mi-header .wp-block-buttons.mi-header__rdv { display: none; }
	.mi-header__actions { flex: none; }
}

/* Déclencheur du menu : cible de 44 px, au-delà du minimum de 24 px demandé
   par le critère 2.5.8, parce qu'un pouce n'est pas un curseur.
   Aucune propriété « display » ici : c'est le cœur qui décide de l'afficher ou
   non selon la largeur, et une déclaration de notre côté le laissait visible
   sur grand écran, à côté du menu horizontal. */
.mi-header .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -.35rem;
	border-radius: var(--mi-r-moyen, 14px);
	color: var(--wp--preset--color--eucalyptus-fonce);
	transition: background-color .3s var(--mi-courbe);
}
.mi-header .wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--brume);
}
.mi-header .wp-block-navigation__responsive-container-open svg,
.mi-header .wp-block-navigation__responsive-container-close svg {
	width: 26px;
	height: 26px;
}

/* --- Panneau du menu --------------------------------------------------- */

.mi-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
	background: var(--wp--preset--gradient--aube);
	/* Le galet décoratif dépasse volontairement du cadre : il est écrêté ici,
	   comme dans toutes les sections du thème. */
	overflow: hidden;
	isolation: isolate;
}
.mi-header .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: -7rem;
	bottom: -9rem;
	width: 22rem;
	height: 22rem;
	border-radius: 50%;
	background: var(--wp--preset--color--peche);
	opacity: .55;
	pointer-events: none;
}
/* Le retrait haut place la croix exactement là où était le déclencheur : le
   bouton ne saute pas au moment de l'ouverture. */
.mi-header .is-menu-open .wp-block-navigation__responsive-close {
	max-width: none;
	padding: .69rem 1.25rem 2.5rem;
}
.mi-header .is-menu-open .wp-block-navigation__responsive-container-close {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	margin-right: -.35rem;
	border-radius: var(--mi-r-moyen, 14px);
	color: var(--wp--preset--color--eucalyptus-fonce);
}
.mi-header .is-menu-open .wp-block-navigation__responsive-container-close:hover {
	background: rgba(255, 255, 255, .6);
}
/* Le menu de la barre est calé à droite ; le cœur reporte ce réglage dans le
   panneau via ses variables de mise en page, et les entrées s'y retrouvaient
   alignées à droite, à contre-courant de la lecture et en décalage avec leurs
   propres filets de séparation. On redéfinit les variables plutôt que de
   surcharger les règles qui les consomment : elles sont le point d'extension
   prévu, et toutes les règles du cœur suivent d'un coup. */
.mi-header .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 2rem;
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-align: flex-start;
	align-items: stretch;
	text-align: left;
}
/* La liste porte elle-même les classes du bloc navigation, donc aussi les
   variables de mise en page : les redéfinir sur un ancêtre ne suffisait pas,
   la valeur posée sur la liste était plus proche. Le « width: 100% » tranche
   définitivement — quelle que soit la valeur d'alignement retenue, chaque
   entrée occupe la largeur du panneau, et son filet de séparation avec elle. */
.mi-header .is-menu-open .wp-block-navigation__container {
	gap: 0;
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-align: flex-start;
	align-items: stretch;
	justify-content: flex-start;
}
.mi-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
}
.mi-header .is-menu-open .wp-block-navigation-item {
	border-top: 1px solid rgba(51, 99, 95, .14);
}
.mi-header .is-menu-open .wp-block-navigation-item:last-child { border-bottom: 1px solid rgba(51, 99, 95, .14); }

/* Le sélecteur reprend le conteneur intermédiaire pour égaler les quatre
   classes de la règle du cœur qui remet ces liens à padding:0 — sans lui, les
   entrées restaient hautes de 26 px, soit à peine la hauteur du texte. */
.mi-header .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	display: block;
	padding-block: 1.05rem;
	font-family: var(--wp--preset--font-family--titre);
	font-size: 1.32rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--eucalyptus-fonce);
	/* Le soulignement animé de la barre ne convient pas à des entrées de cette
	   taille : elles se décalent vers la droite à la place. */
	transition: transform .3s var(--mi-courbe), color .3s var(--mi-courbe);
}
.mi-header .is-menu-open .wp-block-navigation-item__content::after { display: none; }
.mi-header .is-menu-open .wp-block-navigation-item__content:hover,
.mi-header .is-menu-open .wp-block-navigation-item__content:focus-visible {
	transform: translateX(.4rem);
	color: var(--wp--preset--color--mauve-fonce);
}
.mi-header .is-menu-open .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--mauve-fonce);
}

/* Le rendez-vous du panneau est un vrai bloc bouton, pas une entrée de menu
   déguisée. C'est ce qui garantit qu'il est identique à celui de la barre :
   il porte les mêmes classes « wp-block-button__link wp-element-button » et
   reçoit donc les styles de la charte tels que theme.json les produit, sans
   qu'aucune déclaration ne soit recopiée ici. Une pastille pêche dessinée à la
   main avait été posée à cet endroit — fond, couleur, taille et graisse
   différaient tous du bouton de la charte.

   Ne rien ajouter ici qui touche au fond, à la couleur ou à la typographie :
   toute déclaration de ce genre recréerait l'écart. */
.mi-header .is-menu-open .mi-nav__rdv {
	margin-top: 2rem;
	justify-content: flex-start;
}

/* Au-dessus de 768 px le bouton de la barre est resté visible : la même action
   deux fois à l'écran n'aiderait personne. */
@media (min-width: 768px) {
	.mi-header .wp-block-navigation .wp-block-buttons.mi-nav__rdv { display: none; }
}

/* Entrée en cascade. Le masquage vit dans les images clés et n'est posé que
   sous .mi-anim, la classe que mi-anim.js ajoute quand les animations sont
   souhaitées : sans elle, aucune règle ne rend une entrée invisible. */
.mi-anim .mi-header .is-menu-open .wp-block-navigation-item,
.mi-anim .mi-header .is-menu-open .mi-nav__rdv {
	animation: mi-monte .5s var(--mi-courbe) backwards;
}
.mi-anim .mi-header .is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: .06s; }
.mi-anim .mi-header .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: .12s; }
.mi-anim .mi-header .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: .18s; }
.mi-anim .mi-header .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: .24s; }
/* Le bouton n'est pas dans la liste : il est frère du <ul>, sa cascade se règle
   donc à part et vient après la dernière entrée. */
.mi-anim .mi-header .is-menu-open .mi-nav__rdv { animation-delay: .32s; }
.mi-anim .mi-header .is-menu-open .wp-block-navigation__responsive-container-close {
	animation: mi-eclot .4s var(--mi-courbe) backwards;
}

/* === 5. BOUTONS & CTA ============================================
   Planche « Boutons & CTA » : 4 variantes, 4 états chacune. La planche
   demande elle-même un contraste minimal de 4,5:1 — d'où l'usage
   systématique des variantes profondes du teal et du mauve pour le texte.
   =============================================================== */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease,
		transform .3s var(--mi-courbe), box-shadow .3s ease;
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(51, 99, 95, .16);
}
.wp-block-button__link:active { transform: translateY(0); box-shadow: none; }

/* 2. Secondaire — contour */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1.5px solid var(--wp--preset--color--eucalyptus);
	color: var(--wp--preset--color--eucalyptus-fonce);
	background: transparent;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--eucalyptus-fonce);
	border-color: var(--wp--preset--color--eucalyptus-fonce);
	color: #fff;
}

/* 3. Tertiaire — lien texte fléché
   Deux écritures mènent ici : le style de bloc « is-style-lien », posé dans
   l'éditeur, et .mi-praticien__lien, écrit dans la composition d'accueil. Elles
   partagent les mêmes sélecteurs plutôt que deux jeux de règles jumelles :
   c'est en les tenant séparées que la seconde avait perdu le changement de
   couleur au survol. */
.wp-block-button.is-style-lien > .wp-block-button__link,
.mi-praticien__lien a {
	padding: .4rem 0;
	background: transparent;
	border-radius: 0;
	color: var(--wp--preset--color--eucalyptus-fonce);
	box-shadow: none;
	text-decoration: none;
	transition: color .3s var(--mi-courbe);
}
/* Le filet s'allonge par scaleX et non par width : animer la largeur force un
   recalcul de mise en page à chaque image, alors qu'une transformation est
   composée par le GPU. Sur un trait plein de 1 px de haut, l'étirement
   horizontal ne se voit pas. */
.wp-block-button.is-style-lien > .wp-block-button__link::after,
.mi-praticien__lien a::after {
	content: "";
	width: 2.4rem;
	height: 1px;
	background: currentColor;
	transform: scaleX(.583);
	transform-origin: left center;
	transition: transform .35s var(--mi-courbe);
}
.wp-block-button.is-style-lien > .wp-block-button__link:hover,
.mi-praticien__lien a:hover {
	transform: none;
	box-shadow: none;
	color: var(--wp--preset--color--mauve-fonce);
}
.wp-block-button.is-style-lien > .wp-block-button__link:hover::after,
.mi-praticien__lien a:hover::after { transform: scaleX(1); }

/* 4. Action douce — fond menthe */
.wp-block-button.is-style-douce > .wp-block-button__link {
	background: var(--wp--preset--color--brume);
	color: var(--wp--preset--color--eucalyptus-fonce);
}
.wp-block-button.is-style-douce > .wp-block-button__link:hover {
	background: var(--mi-menthe);
	color: var(--wp--preset--color--eucalyptus-fonce);
}

/* 6. CTA pilule pêche — bouton très visible */
.wp-block-button.is-style-peche > .wp-block-button__link {
	background: var(--wp--preset--color--peche);
	color: var(--wp--preset--color--encre);
}
.wp-block-button.is-style-peche > .wp-block-button__link:hover {
	background: var(--mi-peche-profond);
	color: var(--wp--preset--color--encre);
}

/* === 6. DÉCOR & TEXTURES ========================================= */

/* Les sections pleine largeur se touchent : leur respiration vient de leur
   propre padding, pas d'une marge extérieure. Le blockGap de 1,5 rem hérité
   de theme.json posait sinon 24 px entre chacune — invisible entre deux fonds
   identiques, mais visible comme une bande blanche dès que deux sections
   n'ont pas la même couleur de fond. */
/* Une seule règle pour les trois endroits où WordPress pose son blockGap de
   1,5 rem entre des sections empilées : la racine (en-tête / main / pied de
   page), les enfants d'un <main> en flux libre, et les blocs pleine largeur
   posés dans le contenu. À chaque fois cela laissait une bande de fond de
   24 px, invisible entre deux sections de même couleur mais bien visible dès
   que les fonds diffèrent.

   `main.is-layout-flow` et non `main` tout court : les gabarits d'archive et
   de recherche gardent une colonne de lecture constrained, dont les titres et
   les listes ont besoin de ce blockGap pour respirer.

   Les sections tirent leur respiration de leur propre padding. */
.wp-site-blocks > *,
main.is-layout-flow > *,
.wp-block-post-content > .alignfull {
	margin-block: 0;
}

/* Toute section qui accueille du décor doit porter cette classe : sans
   ancêtre positionné, un .mi-decor se calerait sur le bloc conteneur initial,
   et sans overflow il élargirait la page — un galet qui dépasse de 4 rem à
   droite provoque un défilement horizontal sur mobile.

   `isolation: isolate` fait de la section un contexte d'empilement. Sans lui,
   le z-index négatif du décor ci-dessous le ferait passer derrière le fond de
   la section, donc invisible. Avec lui, le décor se peint entre ce fond et le
   contenu — exactement là où il doit être. Aucun effet sur la mise en page. */
.mi-hero,
.mi-section {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* z-index négatif, et c'est le cœur de l'affaire.
   À z-index 0, le décor est un élément positionné : il se peint donc au-dessus
   de tout texte resté dans le flux, quel que soit l'ordre du DOM. Il masquait
   ainsi 37 fragments de texte sur six pages en mobile — fils d'Ariane, titres,
   boutons du bandeau de rendez-vous. Le passer en -1 le range définitivement
   sous le contenu, et supprime le besoin de relever chaque bloc de texte au
   cas par cas : c'est cette approche-là qui laissait passer des oublis. */
.mi-decor {
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

.mi-galet { border-radius: 50%; background: var(--wp--preset--gradient--petale); opacity: .5; filter: blur(1px); }
.mi-galet--brume { background: var(--wp--preset--gradient--lagune); opacity: .75; }
.mi-galet--mauve { background: linear-gradient(150deg, #e8d7df, #d6bdc9); opacity: .45; }
.mi-anim .mi-galet { animation: mi-flotte 15s ease-in-out infinite; }
.mi-anim .mi-galet--lent { animation-duration: 22s; animation-delay: -7s; }

/* Motif pois délicat — texture 8 de la planche. */
.mi-trame {
	background-image: radial-gradient(var(--wp--preset--color--eucalyptus) 1.7px, transparent 1.7px);
	background-size: 17px 17px;
	opacity: .3;
}
.mi-trame--peche { background-image: radial-gradient(var(--mi-peche-profond) 1.7px, transparent 1.7px); }

.mi-vague {
	display: block;
	width: min(100%, 34rem);
	height: auto;
	margin-inline: auto;
}

/* Séparateur ornemental : filet, point mauve, filet. */
.mi-ornement {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .9rem;
	color: var(--wp--preset--color--filet);
}
.mi-ornement::before,
.mi-ornement::after {
	content: "";
	height: 1px;
	width: min(9rem, 22vw);
	background: currentColor;
}
.mi-ornement span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--mauve);
}

/* === 7. CADRES & MÉDIAS ==========================================
   Planche « Frames & media containers ».
   =============================================================== */

/* 5. Masque organique */
.is-style-organique img,
img.is-style-organique {
	border-radius: 58% 42% 47% 53% / 44% 52% 48% 56% !important;
}
/* 4. Arche organique */
.is-style-arche img,
img.is-style-arche {
	border-radius: 50% 50% var(--mi-r-large) var(--mi-r-large) / 34% 34% 6% 6% !important;
}
/* 3. Cercle */
.is-style-cercle img,
img.is-style-cercle { border-radius: 50% !important; }
/* 11. Double bordure douce */
.is-style-double-bordure img,
img.is-style-double-bordure {
	border-radius: var(--mi-r-carte) !important;
	outline: 1px solid var(--wp--preset--color--peche);
	outline-offset: 9px;
}

/* === 8. CARTES DE CONTENU ========================================
   Planche « Cartes & blocs de contenu ».
   =============================================================== */

.mi-carte,
.is-style-carte {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--preset--color--blanc);
	border: 1px solid var(--wp--preset--color--filet);
	border-radius: var(--mi-r-carte);
	box-shadow: var(--wp--preset--shadow--voile);
	padding: 1.75rem;
	transition: transform .4s var(--mi-courbe), box-shadow .4s ease, border-color .4s ease;
}
.mi-carte:hover,
.mi-carte:focus-within,
.is-style-carte:hover,
.is-style-carte:focus-within {
	transform: translateY(-6px);
	border-color: var(--mi-teal-clair);
	box-shadow: var(--wp--preset--shadow--relief);
}
.mi-carte .wp-block-post-title {
	margin-block: 0 .5rem;
	font-size: var(--wp--preset--font-size--moyen);
	line-height: 1.3;
}
.mi-carte .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--encre); }
.mi-carte .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mi-carte:hover .wp-block-post-title a { color: var(--wp--preset--color--eucalyptus-fonce); }
.mi-carte .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--gris);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 300;
	margin-bottom: 0;
}

/* --- Encart praticien : portrait, citation, signature ---
   Resserré à dessein. Le parcours détaillé a sa page ; en accueil, il s'agit
   de présenter une personne, pas d'aligner un CV. */
.mi-praticien {
	position: relative;
	z-index: 1;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.35rem;
}
/* Le portrait a quitté ce bloc : la même photographie ouvrait déjà la page.
   La citation devient donc l'objet principal, et prend la place que le
   portrait occupait — sans quoi le bloc paraîtrait amputé plutôt que
   resserré. Le filet pêche au-dessus lui donne son point de départ. */
.mi-praticien__citation {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 36rem;
	font-family: var(--wp--preset--font-family--editorial);
	font-style: italic;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
	line-height: 1.4;
	color: var(--wp--preset--color--encre);
}
.mi-praticien__citation::before,
.mi-praticien__citation::after { color: var(--wp--preset--color--mauve); }

/* Filet d'ouverture, repris du hero et du panneau réjuvénation : c'est le
   même signe partout, il annonce une prise de parole. */
.mi-praticien::before {
	content: "";
	display: block;
	width: 3.5rem;
	height: 3px;
	border-radius: 3px;
	background: var(--mi-peche-profond);
}
.mi-praticien__citation::before { content: "« "; }
.mi-praticien__citation::after  { content: " »"; }
.mi-praticien__signature {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}
.mi-praticien__nom {
	font-family: var(--wp--preset--font-family--editorial);
	font-style: italic;
	font-size: var(--wp--preset--font-size--moyen);
	color: var(--wp--preset--color--eucalyptus-fonce);
}
.mi-praticien__role {
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--mention);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mauve-fonce);
}
/* Couleurs, filet et survol sont mutualisés avec « is-style-lien », section 5.
   Il ne reste ici que la mise en forme propre à cet emplacement. */
.mi-praticien__lien { margin: 0; }
.mi-praticien__lien a {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--mention);
	font-weight: 600;
}

/* --- Agrandissement des illustrations ---------------------------------
   Le bouton est posé par mi-anim.js autour de l'image. Il ne doit rien changer
   à la mise en page : sans « display: block » et « width: 100% », un <button>
   inséré autour d'une image la ramènerait à sa largeur intrinsèque. */
.mi-loupe {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	position: relative;
	line-height: 0;
	border-radius: var(--mi-r-large);
}
.mi-loupe img { transition: transform .5s var(--mi-courbe); }
.mi-loupe:hover img { transform: scale(1.015); }

/* La pastille signale que l'image s'agrandit : sans elle, personne ne pense à
   cliquer. Le disque et le manche sont dessinés en SVG intégré à la feuille —
   aucune requête, et l'icône suit la couleur du thème.

   En haut à droite, et non en bas : les illustrations portent leur titre en
   haut, une barre de cinq icônes légendées en bas, et seul le coin supérieur
   droit est libre. En bas à droite, la pastille masquait « Résultats
   naturels ». */
.mi-loupe::after {
	content: "";
	position: absolute;
	right: 1rem;
	top: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92) center / 1.35rem 1.35rem no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333635f' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
	box-shadow: 0 6px 18px rgba(51, 99, 95, .18);
	transition: transform .35s var(--mi-courbe);
}
.mi-loupe:hover::after { transform: scale(1.08); }

.mi-loupe__boite {
	max-width: min(94vw, 1100px);
	max-height: 94vh;
	padding: 0;
	border: 0;
	background: none;
	overflow: visible;
}
.mi-loupe__boite::backdrop {
	background: rgba(24, 44, 42, .82);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.mi-loupe__image {
	display: block;
	width: auto;
	height: auto;
	max-width: min(94vw, 1100px);
	/* La croix occupe le haut du cadre : on lui laisse la place plutôt que de
	   la superposer à l'image. */
	max-height: calc(94vh - 4rem);
	margin-inline: auto;
	border-radius: var(--mi-r-large);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.mi-loupe__fermer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 0 .6rem auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
	transition: background-color .25s ease;
}
.mi-loupe__fermer:hover { background: rgba(255, 255, 255, .3); }

/* En dessous de 1024 px, une image carrée ramenée à la taille de l'écran ne
   gagne rien : 1,05× sur un téléphone, 1,04× sur une tablette en portrait —
   l'aperçu ne tiendrait pas sa promesse. On la porte donc à sa taille native et
   l'on fait défiler à l'intérieur du cadre : les légendes en petites capitales
   de l'illustration redeviennent lisibles. La croix reste collée en haut,
   sinon elle disparaîtrait au premier défilement et il ne resterait que la
   touche Échap pour sortir.

   Au-dessus, l'image tient à l'écran en entier et gagne déjà 1,4 à 1,9× : la
   voir d'un seul tenant vaut mieux que de la faire défiler. */
@media (max-width: 63.99rem) {
	.mi-loupe__boite {
		width: 100vw;
		max-width: 100vw;
		height: 100vh;
		max-height: 100vh;
		padding: .75rem;
		overflow: auto;
		overscroll-behavior: contain;
	}
	.mi-loupe__image {
		width: min(1100px, 205vw);
		max-width: none;
		max-height: none;
		margin-inline: 0;
	}
	.mi-loupe__fermer {
		position: sticky;
		top: 0;
		left: calc(100vw - 5.25rem);
		z-index: 1;
		margin: 0 0 .6rem;
		background: rgba(20, 38, 36, .82);
	}
}

/* Le défilement de la page est neutralisé pendant l'aperçu : sans cela, la
   molette fait glisser le contenu derrière le fond assombri. */
.mi-loupe-ouverte { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.mi-loupe img,
	.mi-loupe::after { transition: none; }
	.mi-loupe:hover img { transform: none; }
}

@media print {
	.mi-loupe::after { display: none; }
}

/* --- Illustration de fiche --- */
.mi-illustration .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	border-radius: var(--mi-r-large);
	box-shadow: var(--wp--preset--shadow--voile);
}

/* --- Témoignage --- */
.mi-temoignage {
	position: relative;
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: var(--mi-r-large);
	background: var(--wp--preset--color--brume);
}
.mi-temoignage__guillemet {
	display: block;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: 4.5rem;
	line-height: .6;
	color: var(--wp--preset--color--mauve);
	opacity: .55;
}
.mi-temoignage__texte {
	margin: 1rem 0 0;
	font-family: var(--wp--preset--font-family--editorial);
	font-style: italic;
	font-size: var(--wp--preset--font-size--grand);
	line-height: 1.5;
	color: var(--wp--preset--color--encre);
}
.mi-temoignage__source {
	margin: 1.25rem 0 0;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--mention);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mauve-fonce);
}

/* === 9. LES TRAITEMENTS ========================================== */

.mi-soins__progression { margin-bottom: var(--wp--preset--spacing--50); }
.mi-soins__reperes {
	list-style: none;
	margin: 0 0 .9rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.mi-soins__repere a,
.mi-soins__repere span {
	display: block;
	padding: .55rem 1.15rem;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--mention);
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--wp--preset--color--encre);
	text-decoration: none;
	transition: transform .3s var(--mi-courbe), box-shadow .3s ease;
}
.mi-soins__repere[data-degre="1"] a, .mi-soins__repere[data-degre="1"] span { background: var(--mi-degre-1); }
.mi-soins__repere[data-degre="2"] a, .mi-soins__repere[data-degre="2"] span { background: var(--mi-degre-2); }
.mi-soins__repere[data-degre="3"] a, .mi-soins__repere[data-degre="3"] span { background: var(--mi-degre-3); }
.mi-soins__repere[data-degre="4"] a, .mi-soins__repere[data-degre="4"] span { background: var(--mi-degre-4); color: #fff; }
.mi-soins__repere a:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(51, 99, 95, .14); }

.mi-soins__rail {
	display: block;
	height: 5px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--mi-degre-1) 0%, var(--mi-degre-2) 34%, var(--mi-degre-3) 62%, var(--mi-degre-4) 100%);
}

.mi-soins__grille {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
}

.mi-soin {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--mi-r-carte);
	background: var(--wp--preset--color--blanc);
	border: 1px solid var(--wp--preset--color--filet);
	box-shadow: var(--wp--preset--shadow--voile);
	overflow: hidden;
	cursor: pointer;
	transition: transform .45s var(--mi-courbe), box-shadow .45s ease, border-color .45s ease;
}

/* Vignette : les illustrations sont carrées et portent leur titre en haut,
   une barre d'icônes en bas. Le cadrage 2:1 calé à 64 % isole la bande
   centrale — le motif — sans jamais trancher un texte. Valeurs vérifiées
   sur les huit illustrations avant d'être figées ici.

   position:relative est ici sans danger : .mi-soin__visuel est un frère de
   .mi-soin__corps, pas un ancêtre du lien du titre. La nappe de clic continue
   donc de se caler sur .mi-soin, et comme elle est déclarée après dans le DOM,
   elle passe au-dessus de l'image. */
.mi-soin__visuel {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--brume);
}
.mi-soin__image {
	display: block;
	width: 100%;
	/* height:auto est indispensable, pas cosmétique : WordPress pose un
	   attribut height="768" sur ses vignettes, qui fixe une hauteur réelle.
	   Tant que la hauteur n'est pas « auto », aspect-ratio est ignoré et
	   l'image s'affiche en 768 px de haut. */
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	object-position: 50% 64%;
	transition: transform .6s var(--mi-courbe);
}
.mi-soin:hover .mi-soin__image { transform: scale(1.04); }

.mi-soin__corps {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: .6rem;
	padding: 1.5rem 1.6rem 0;
}

/* Étiquette d'approche posée sur l'image : elle libère une ligne dans le
   corps et donne à la carte son point de couleur. Les illustrations sont
   très claires, la teinte du degré s'y détache nettement. */
.mi-soin__approche {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	padding: .35rem .85rem;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--titre);
	/* 11 px minimum : en capitales espacées, en dessous ça devient pénible à
	   lire, et le lectorat du site a plutôt entre 45 et 70 ans. */
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--encre);
	box-shadow: 0 2px 10px rgba(51, 99, 95, .12);
}
.mi-soin[data-degre="1"] .mi-soin__approche { background: var(--mi-degre-1); }
.mi-soin[data-degre="2"] .mi-soin__approche { background: var(--mi-degre-2); }
.mi-soin[data-degre="3"] .mi-soin__approche { background: var(--mi-degre-3); }
.mi-soin[data-degre="4"] .mi-soin__approche { background: var(--mi-degre-4); color: #fff; }
.mi-soin:hover,
.mi-soin:focus-within {
	transform: translateY(-5px);
	border-color: var(--mi-teal-clair);
	box-shadow: var(--wp--preset--shadow--relief);
}

/* Aucun enfant de la carte ne doit être positionné.
   La nappe de clic est le ::after du lien du titre, en inset:0 : elle se cale
   sur le plus proche ancêtre positionné. Poser position:relative sur le titre
   — ou sur tous les enfants — la réduirait à la seule ligne du titre, et le
   reste de la carte, « En savoir plus » compris, ne serait plus cliquable.
   Le seul élément positionné de la carte doit rester .mi-soin lui-même. */

.mi-soin__titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--moyen);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.005em;
	text-wrap: balance;
}
.mi-soin__titre a { color: var(--wp--preset--color--encre); text-decoration: none; }
.mi-soin__titre a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mi-soin:hover .mi-soin__titre a { color: var(--wp--preset--color--eucalyptus-fonce); }

.mi-soin__resume {
	margin: 0;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 300;
	line-height: 1.6;
	color: var(--wp--preset--color--gris);
}

/* Pied de carte : caractéristiques et invitation, sur un fond très légèrement
   teinté qui court d'un bord à l'autre. Il regroupe les données et donne à la
   carte une assise, au lieu d'une pile de lignes qui s'arrête n'importe où. */
.mi-soin__pied {
	margin: auto -1.6rem 0;
	padding: 1.1rem 1.6rem 1.25rem;
	background: #f6faf9;
	border-top: 1px solid var(--wp--preset--color--filet);
}

.mi-soin__faits {
	margin: 0;
	display: grid;
	gap: .5rem;
}
/* Le libellé au-dessus de sa valeur, et non en regard.
   Les faits tenaient en deux colonnes, celle de gauche fixée à 5.5rem (88 px).
   Le renommage d'« Éviction » en « Recommandations » y met un mot insécable de
   quinze lettres : en capitales interlettrées, il mesure ~128 px et débordait
   sur la valeur. Empilé, le libellé n'a plus de largeur à respecter et la
   valeur récupère toute la largeur de la carte. */
.mi-soin__fait {
	display: grid;
	gap: .1rem;
}
.mi-soin__fait dt {
	font-family: var(--wp--preset--font-family--titre);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris);
}
.mi-soin__fait dd {
	margin: 0;
	font-size: .8125rem;
	line-height: 1.45;
	color: var(--wp--preset--color--encre);
}

.mi-soin__lire {
	margin: 1rem 0 0;
	display: flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--wp--preset--font-family--titre);
	font-size: .8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--eucalyptus-fonce);
}
.mi-soin__fleche {
	width: 2.75rem;
	height: 1px;
	background: currentColor;
	transform: scaleX(.545);
	transform-origin: left center;
	transition: transform .35s var(--mi-courbe);
}
.mi-soin:hover .mi-soin__fleche { transform: scaleX(1); }

/* === 10. VALEURS & ICÔNES ======================================== */

.mi-icone {
	width: 3.4rem;
	height: 3.4rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--wp--preset--color--eucalyptus-fonce);
}
.mi-glyphe {
	width: 1.15em;
	height: 1.15em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

.mi-valeurs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2rem 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
}
.mi-valeur {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}
.mi-valeur .mi-icone { transition: transform .45s var(--mi-courbe), color .45s ease; }
.mi-valeur:hover .mi-icone { transform: translateY(-5px) scale(1.05); }
.mi-valeur__nom {
	margin: 0;
	max-width: 10rem;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--mention);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: .02em;
	color: var(--wp--preset--color--encre);
}

/* === 11. FAQ, TARIFS ============================================= */

.mi-faq { display: grid; gap: .75rem; }
.mi-faq__item {
	border: 1px solid var(--wp--preset--color--filet);
	border-radius: var(--mi-r-douce);
	background: var(--wp--preset--color--blanc);
	transition: border-color .3s ease, box-shadow .3s ease;
}
.mi-faq__item[open] {
	border-color: var(--mi-teal-clair);
	box-shadow: var(--wp--preset--shadow--voile);
}

.mi-faq__question {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.25rem 1.5rem;
	cursor: pointer;
	list-style: none;
	transition: color .3s ease;
}
.mi-faq__question::-webkit-details-marker { display: none; }
.mi-faq__question:hover { color: var(--wp--preset--color--eucalyptus-fonce); }

/* L'intitulé prend la place restante : une question longue passe à la ligne
   sans jamais comprimer le signe, qui reste calé à droite. */
.mi-faq__intitule {
	flex: 1;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 600;
	line-height: 1.45;
	color: inherit;
	text-wrap: balance;
}
.mi-faq__item[open] .mi-faq__intitule { color: var(--wp--preset--color--eucalyptus-fonce); }

/* Signe + / − dans une pastille, pour donner une cible visible à l'œil. */
.mi-faq__signe {
	position: relative;
	width: 2rem;
	height: 2rem;
	flex: none;
	border-radius: 50%;
	background: var(--wp--preset--color--brume);
	color: var(--wp--preset--color--eucalyptus-fonce);
	transition: background-color .35s ease, transform .35s var(--mi-courbe);
}
.mi-faq__question:hover .mi-faq__signe { background: var(--mi-menthe); }
.mi-faq__item[open] .mi-faq__signe {
	background: var(--wp--preset--color--eucalyptus-fonce);
	color: #fff;
	transform: rotate(180deg);
}
.mi-faq__signe::before,
.mi-faq__signe::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: .7rem;
	height: 1.6px;
	margin: -.8px 0 0 -.35rem;
	border-radius: 2px;
	background: currentColor;
	transition: transform .35s var(--mi-courbe);
}
.mi-faq__signe::after { transform: rotate(90deg); }
.mi-faq__item[open] .mi-faq__signe::after { transform: rotate(0deg); }

.mi-faq__reponse {
	padding: 0 1.5rem 1.5rem;
	/* Le texte s'alignait sur toute la largeur de l'accordéon, soit près de
	   120 signes par ligne. On le ramène à une mesure de lecture, et on le
	   décale sous l'intitulé plutôt que de le coller au bord. */
	margin-left: 0;
}
.mi-faq__reponse p {
	margin: 0;
	max-width: 36rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--filet);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 300;
	line-height: 1.7;
	color: var(--wp--preset--color--gris);
}

/* === 12. FICHE, PIED DE PAGE, IMPRESSION ========================= */

.is-style-chapo {
	font-size: var(--wp--preset--font-size--moyen);
	font-weight: 300;
	line-height: 1.65;
	color: var(--wp--preset--color--gris);
}

/* Le mauve #b58fa1 de la charte ne donne que 2,5:1 sur fond clair : il reste
   aux aplats et aux formes, jamais au texte. Le surtitre prend le mauve
   profond, qui tient l'esprit de la charte en passant le niveau AA — que la
   planche « Boutons & CTA » exige elle-même. */
.is-style-surtitre {
	display: flex;
	align-items: center;
	gap: .8rem;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--mention);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mauve-fonce);
}
.is-style-surtitre::before {
	content: "";
	width: 2rem;
	height: 3px;
	flex: none;
	border-radius: 3px;
	background: var(--wp--preset--color--peche);
}
/* Variante centrée, pour les titres de section — planche « Inspirations ». */
.is-style-surtitre.mi-centre { justify-content: center; }
.is-style-surtitre.mi-centre::before { display: none; }

.is-style-citation-editoriale {
	font-family: var(--wp--preset--font-family--editorial);
	font-style: italic;
	font-size: var(--wp--preset--font-size--grand);
	line-height: 1.5;
	color: var(--wp--preset--color--eucalyptus-fonce);
}

.wp-block-term-description { font-size: var(--wp--preset--font-size--moyen); line-height: 1.55; }

/* Bandeau d'accueil */
.mi-hero__texte { position: relative; z-index: 2; }
.mi-hero__titre {
	font-size: var(--wp--preset--font-size--manchette);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.02em;
}
.mi-hero__titre em { font-style: normal; font-weight: 700; color: var(--wp--preset--color--eucalyptus-fonce); }
/* Filet pêche sous l'accroche — reprise de la maquette de la charte. */
.mi-hero__filet {
	display: block;
	width: 3.5rem;
	height: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--peche);
}

.mi-hero__visuel { position: relative; z-index: 1; }

/* En dessous de 832 px, les colonnes s'empilent et le portrait héritait de
   toute la largeur : 335 px sur un écran de 375, soit 41 % de la hauteur
   visible pour une seule image, juste avant que la page ne commence vraiment.
   Il est ramené à une taille de vignette large et centré. C'est la colonne
   entière qui est bridée, et non l'image : le galet pêche est positionné par
   rapport à elle et se décalerait si seule l'image rétrécissait. */
@media (max-width: 51.99rem) {
	.mi-hero__visuel {
		/* Le pourcentage tient les tout petits écrans, la valeur fixe empêche
		   l'image de regrossir dès qu'on approche de la bascule. */
		width: min(70%, 15rem);
		max-width: min(70%, 15rem);
		flex-basis: auto;
		margin-inline: auto;
	}
}
.mi-hero__visuel img {
	position: relative;
	z-index: 2;
	width: 100%;
	height: auto;
	border-radius: 46% 54% 42% 58% / 40% 44% 56% 60%;
	box-shadow: var(--wp--preset--shadow--relief);
}
.mi-hero__visuel::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: auto -6% -8% -10%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--gradient--petale);
	opacity: .6;
}

/* Encadré « En pratique » */
.mi-infos {
	background: var(--wp--preset--color--brume);
	border-radius: var(--mi-r-carte);
	padding: var(--wp--preset--spacing--40);
}
.mi-infos__title {
	font-family: var(--wp--preset--font-family--titre) !important;
	font-size: var(--wp--preset--font-size--mention) !important;
	font-weight: 600 !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--mauve-fonce);
}
.mi-infos__list { margin: 0; }
.mi-infos__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .15rem;
	padding: .8rem 0;
	border-top: 1px solid rgba(51, 99, 95, .12);
}
.mi-infos__row:first-child { border-top: 0; padding-top: 0; }
.mi-infos__row dt {
	font-family: var(--wp--preset--font-family--titre);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris);
}
.mi-infos__row dd { margin: 0; font-size: var(--wp--preset--font-size--petit); line-height: 1.5; }
@media (min-width: 40rem) {
	.mi-infos__row { grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
}

/* Tarifs et modalités, page « La consultation ».
   Même encadré que le « En pratique » des fiches : c'est la même nature
   d'information — des faits courts qu'on vient vérifier — et la patiente a
   déjà appris à le lire. Seule la marge diffère : ici l'encadré suit un
   paragraphe, là il est seul dans sa colonne. */
.mi-modalites { margin-top: var(--wp--preset--spacing--40); }

/* « CONVENTIONNEMENT » fait seize lettres sans césure possible : 147 px en
   capitales interlettrées, pour une colonne de libellé de 9 rem (144 px). Il
   dépassait de trois pixels, et comme le contexte hérite d'un
   « word-break: break-word », le mot ne débordait pas — il se cassait, le « t »
   tombant seul à la ligne suivante.
   À noter pour la prochaine vérification : un test « scrollWidth > clientWidth »
   ne voit RIEN de ce défaut. Une fois le mot cassé, le contenu tient dans sa
   boîte. Il faut compter les rectangles d'un Range sur le texte.
   L'encadré des fiches vit dans une barre latérale étroite et garde ses 9 rem ;
   celui-ci occupe une colonne de page et peut s'offrir la largeur qui manque. */
@media (min-width: 40rem) {
	.mi-modalites .mi-infos__row { grid-template-columns: 11rem minmax(0, 1fr); }
}

/* Tarifs : l'acte à gauche, en prose, le montant à droite.
   Ces intitulés sont des phrases — « Consultation de réjuvénation / médecine
   intime » — là où les libellés de .mi-infos__row sont des étiquettes de deux
   mots. Les passer en capitales interlettrées de 11 px les rendrait illisibles :
   d'où un second gabarit, dans le même encadré.

   AUCUN filet entre les lignes de tarif, contrairement aux modalités plus bas.
   Un trait pleine largeur passant juste au-dessus d'un montant se lit comme
   s'il séparait ce montant de son acte, alors que les deux sont côte à côte sur
   la même ligne. Ils ne sont que deux : l'espacement suffit à les distinguer. */
.mi-honoraires { margin: 0; }
.mi-honoraires__ligne {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: .1rem 1.25rem;
	padding: .3rem 0;
}
.mi-honoraires__ligne:first-child { padding-top: 0; }
.mi-honoraires__ligne dt {
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.45;
}
.mi-honoraires__ligne dd {
	/* auto à gauche : sous 640 px, l'intitulé et le montant ne tiennent plus
	   sur une ligne. Le montant passe alors seul sur la suivante, et
	   « space-between » le renvoie à gauche — il perdrait sa colonne juste au
	   moment où la comparaison des prix devient la plus difficile à l'œil. */
	margin: 0 0 0 auto;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	/* Le montant ne se coupe jamais : « De 65 € à 70 € » sur deux lignes se
	   lirait comme deux tarifs. */
	white-space: nowrap;
	color: var(--wp--preset--color--eucalyptus-fonce);
}

.mi-honoraires__note {
	margin: .85rem 0 0;
	font-size: var(--wp--preset--font-size--mention);
	line-height: 1.55;
	color: var(--wp--preset--color--gris);
}

/* Le seul filet de l'encadré : celui qui sépare ce qu'on paie de la façon dont
   on le règle. Porté par le sélecteur adjacent, il disparaît de lui-même si le
   réglage « Tarifs » est vidé — sans quoi un trait resterait, seul, au-dessus
   des modalités. */
.mi-modalites .mi-honoraires__note + .mi-infos__list {
	margin-top: 1.35rem;
	padding-top: 1.35rem;
	border-top: 1px solid rgba(51, 99, 95, .12);
}

/* Un seul marqueur de liste sur tout le site, décrit une seule fois.
   Deux systèmes cohabitaient : cette pastille pêche à coche, et un simple
   point teal pour les listes de contenu. Le second étant plus spécifique, il
   l'emportait sur la pastille — mais la coche, elle, n'avait pas de
   concurrente et restait affichée. On voyait donc un point ET une coche.
   Les trois sélecteurs produisent désormais strictement le même rendu :
   lequel l'emporte n'a plus d'importance. */
.mi-contenu > ul,
.mi-indications ul,
.is-style-indications { list-style: none; padding-left: 0; }

.mi-contenu > ul > li,
.mi-indications li,
.is-style-indications > li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: .5rem;
}

.mi-contenu > ul > li::before,
.mi-indications li::before,
.is-style-indications > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--peche);
}

.mi-contenu > ul > li::after,
.mi-indications li::after,
.is-style-indications > li::after {
	content: "";
	position: absolute;
	left: .38rem;
	top: .82em;
	width: .5rem;
	height: .26rem;
	border-left: 1.7px solid var(--wp--preset--color--eucalyptus-fonce);
	border-bottom: 1.7px solid var(--wp--preset--color--eucalyptus-fonce);
	transform: rotate(-45deg);
}

.mi-avertissement,
.is-style-avertissement {
	font-size: var(--wp--preset--font-size--mention);
	line-height: 1.65;
	color: var(--wp--preset--color--gris);
	background: var(--wp--preset--color--brume);
	border-radius: var(--mi-r-douce);
	padding: var(--wp--preset--spacing--30);
}

/* Le survol et la transition sont posés une seule fois, dans l'idiome unifié
   de la section 3 — ils étaient déclarés deux fois à l'identique ici.

   Exception : les entrées de menu du pied de page. Le cœur leur applique
   « color: inherit » avec un sélecteur dont il double volontairement la
   classe — .wp-block-navigation .wp-block-navigation-item__content
   .wp-block-navigation-item__content, soit trois classes. Cette règle n'a pas
   de :hover, mais elle est plus spécifique que « .mi-footer a:hover » et
   s'applique donc aussi au survol : les liens « Mentions légales », « Politique
   de confidentialité », « Gestion des cookies » et « Plan du site » restaient
   couleur encre, immobiles, alors que tous les autres liens du site passaient
   au mauve.

   Leçon de méthode : pour savoir ce que donne un survol, il ne suffit pas de
   comparer les règles :hover entre elles. Une règle sans :hover mais plus
   spécifique l'emporte sur une règle :hover qui l'est moins.

   D'où le sélecteur ci-dessous, à trois classes plus un élément : il reprend
   aussi la couleur de repos, que l'héritage laissait en encre alors que le
   reste du pied de page est en eucalyptus foncé. */
.mi-footer .wp-block-navigation a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--eucalyptus-fonce);
}
.mi-footer .wp-block-navigation a.wp-block-navigation-item__content:hover,
.mi-footer .wp-block-navigation a.wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--mauve-fonce);
}
.mi-signature {
	font-family: var(--wp--preset--font-family--editorial);
	font-style: italic;
	font-size: var(--wp--preset--font-size--titre);
	line-height: 1.1;
	color: var(--wp--preset--color--eucalyptus-fonce);
}

/* === 12b. PAGE PARCOURS ==========================================
   Le fil vertical n'est pas un ornement : un parcours se lit comme une
   suite, et le trait rend cette continuité au lieu de la sous-entendre.
   =============================================================== */

.mi-parcours__identite {
	display: grid;
	gap: clamp(1.75rem, 5vw, 3.5rem);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 48rem) {
	.mi-parcours__identite { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
}

.mi-parcours__portrait { position: relative; margin: 0; }
.mi-parcours__portrait img {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: auto;
	/* Arche organique — cadre 4 de la planche. */
	border-radius: 50% 50% var(--mi-r-large) var(--mi-r-large) / 34% 34% 6% 6%;
	box-shadow: var(--wp--preset--shadow--voile);
}
.mi-parcours__portrait::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 10% -6% -6% 8%;
	border-radius: 50% 50% var(--mi-r-large) var(--mi-r-large) / 34% 34% 6% 6%;
	background: var(--wp--preset--gradient--petale);
	opacity: .5;
}

.mi-parcours__nom {
	margin: 0;
	font-family: var(--wp--preset--font-family--editorial);
	font-style: italic;
	font-size: var(--wp--preset--font-size--affiche);
	line-height: 1.05;
	color: var(--wp--preset--color--eucalyptus-fonce);
}
.mi-parcours__role {
	margin: .5rem 0 0;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--mention);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mauve-fonce);
}

/* Le numéro d'Ordre est une donnée vérifiable : il mérite d'être lisible
   d'un coup d'œil, pas noyé dans une liste. */
.mi-ordre {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: .6rem 1.1rem;
	border-radius: 999px;
	background: var(--wp--preset--color--brume);
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--wp--preset--color--encre);
}
.mi-ordre .mi-glyphe { color: var(--wp--preset--color--eucalyptus-fonce); }
.mi-ordre strong { font-weight: 600; white-space: nowrap; }

.mi-fil {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}
.mi-fil::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 1.1rem;
	bottom: 1.1rem;
	width: 1px;
	background: var(--wp--preset--color--filet);
}
.mi-fil li {
	position: relative;
	padding: .6rem 0 .6rem 1.9rem;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.55;
}
.mi-fil li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.05rem;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--wp--preset--color--blanc);
	border: 2px solid var(--wp--preset--color--eucalyptus);
}
.mi-fil--diplomes li::before { border-color: var(--wp--preset--color--mauve); }

/* Les diplômes sont datés : l'année est sortie du libellé et alignée en
   colonne, ce qui transforme la liste en chronologie lisible d'un coup d'œil.
   « tabular-nums » est ce qui rend l'alignement exact — sans lui, le 1 de 1999
   est plus étroit que le 2 de 2001 et la colonne se déhanche. */
.mi-fil--diplomes li {
	display: flex;
	gap: .85rem;
	align-items: baseline;
}
.mi-fil__annee {
	flex: none;
	width: 2.6rem;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--mention);
	font-weight: 600;
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--mauve-fonce);
}

/* Précision entre parenthèses fournie par le praticien : elle explique le
   libellé qui précède, elle ne se lit pas sur le même plan. Passée en seconde
   ligne, elle évite un élément de liste qui court sur trois lignes pleines. */
.mi-fil__precision {
	display: block;
	margin-top: .25rem;
	font-size: var(--wp--preset--font-size--mention);
	line-height: 1.5;
	color: var(--wp--preset--color--gris);
}

/* Panneau blanc posé sur la bande teintée : la profondeur remplace la dalle
   plate, et le trait vertical des deux fils a enfin un fond sur lequel se
   détacher. */
.mi-parcours__colonnes {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	grid-template-columns: 1fr;
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: var(--mi-r-large);
	background: var(--wp--preset--color--blanc);
	box-shadow: var(--wp--preset--shadow--voile);
}
@media (min-width: 46rem) {
	.mi-parcours__colonnes {
		grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
		gap: clamp(1.5rem, 4vw, 3rem);
	}
	/* Filet de séparation en élément de grille plutôt qu'en bordure : il ne
	   descend pas jusqu'aux bords du panneau, il respire. */
	.mi-parcours__colonnes::before {
		content: "";
		grid-row: 1;
		grid-column: 2;
		width: 1px;
		margin-block: .5rem;
		background: var(--wp--preset--color--filet);
	}
}
.mi-parcours__colonnes h2 {
	margin: 0 0 1.25rem;
	padding-bottom: .85rem;
	border-bottom: 1px solid var(--wp--preset--color--filet);
	font-size: var(--wp--preset--font-size--moyen);
	font-weight: 600;
	letter-spacing: .01em;
}

/* === 12c. ENCART RÉJUVÉNATION ====================================
   Pas une bande pleine largeur de plus : un panneau contenu, au galbe
   organique de la charte, débordé par un arc. La teinte est réservée à ce
   bloc et au bandeau de rendez-vous, pas distribuée à toutes les sections.
   =============================================================== */

.mi-rejuvenation {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	grid-template-columns: 1fr;
	align-items: center;
	padding: clamp(2rem, 5vw, 3.5rem);
	/* Galbe asymétrique : les quatre coins ne se répondent pas, ce qui
	   suffit à sortir du rectangle sans tomber dans la bulle. */
	border-radius: 48px 96px 48px 96px / 72px 48px 72px 48px;
	background: var(--wp--preset--gradient--aube);
}
@media (min-width: 52rem) {
	.mi-rejuvenation { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
}

.mi-rejuvenation__marque {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.mi-rejuvenation__marque h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--titre);
	line-height: 1.1;
}
.mi-rejuvenation__filet {
	display: block;
	width: 3rem;
	height: 3px;
	border-radius: 3px;
	background: var(--mi-peche-profond);
}

/* La trame reste en flux — elle occupe la colonne, elle ne se superpose à
   rien. Elle s'estompe vers le bas pour ne pas s'arrêter net sur une rangée
   de points, ce qui la ferait ressembler à un tableau. */
.mi-rejuvenation__trame {
	display: block;
	width: min(100%, 9rem);
	height: 4.5rem;
	opacity: .38;
	-webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent);
	mask-image: linear-gradient(to bottom, #000 35%, transparent);
}
@media (max-width: 51.99rem) {
	/* En une seule colonne, le titre est directement suivi du texte : une
	   texture entre les deux ne ferait que les éloigner. */
	.mi-rejuvenation__trame { display: none; }
}

.mi-rejuvenation__texte { position: relative; z-index: 1; }
.mi-rejuvenation__texte > p { margin: 0 0 1rem; max-width: 34rem; }
.mi-rejuvenation__texte > p:last-of-type { margin-bottom: 0; }

/* Arc décoratif qui déborde du panneau : il casse le contour sans ajouter
   d'objet supplémentaire à la page. */
.mi-rejuvenation__arc {
	position: absolute;
	z-index: 0;
	right: -6rem;
	bottom: -7rem;
	width: 18rem;
	height: 18rem;
	opacity: .5;
	pointer-events: none;
}

/* === 12e. PAGE CONSULTATION ======================================
   Les numéros sont ici légitimes : la consultation se déroule dans cet
   ordre, et savoir ce qui va se passer est ce que la page doit apporter.
   Ailleurs sur le site, aucune section n'est numérotée.
   =============================================================== */

.mi-etapes {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: mi-etape;
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
	.mi-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem; }
}

.mi-etape {
	position: relative;
	counter-increment: mi-etape;
	padding-top: 4rem;
}
.mi-etape::before {
	content: counter(mi-etape, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--blanc);
	border: 1.5px solid var(--wp--preset--color--peche);
	font-family: var(--wp--preset--font-family--titre);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--wp--preset--color--eucalyptus-fonce);
}
/* Le trait relie les pastilles : c'est lui qui dit « puis ». */
@media (min-width: 52rem) {
	.mi-etape:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 1.375rem;
		left: 3.25rem;
		right: -2.75rem;
		height: 1px;
		background: var(--wp--preset--color--filet);
	}
}
.mi-etape__titre {
	margin: 0 0 .5rem;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--moyen);
	font-weight: 600;
	line-height: 1.35;
	text-wrap: balance;
}
.mi-etape__texte {
	margin: 0;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 300;
	line-height: 1.6;
	color: var(--wp--preset--color--gris);
}

/* --- Ce qu'il est utile d'apporter --- */
.mi-apporter {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 48rem) {
	.mi-apporter { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
}
.mi-apporter__intro .mi-icone { width: 3rem; height: 3rem; }
.mi-apporter__intro h2 {
	margin: 1rem 0 .75rem;
	font-size: var(--wp--preset--font-size--grand);
}
.mi-apporter__intro p {
	margin: 0;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 300;
	line-height: 1.6;
	color: var(--wp--preset--color--gris);
}
.mi-apporter__liste {
	list-style: none;
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: var(--mi-r-large);
	background: var(--wp--preset--color--blanc);
	box-shadow: var(--wp--preset--shadow--voile);
	display: grid;
	gap: .9rem;
}
.mi-apporter__liste li {
	position: relative;
	padding-left: 2rem;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.55;
}
.mi-apporter__liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--peche);
}
.mi-apporter__liste li::after {
	content: "";
	position: absolute;
	left: .38rem;
	top: .72em;
	width: .5rem;
	height: .26rem;
	border-left: 1.7px solid var(--wp--preset--color--eucalyptus-fonce);
	border-bottom: 1.7px solid var(--wp--preset--color--eucalyptus-fonce);
	transform: rotate(-45deg);
}

/* --- Cadre légal --- */
.mi-cadre {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: 1fr;
	padding: clamp(2rem, 5vw, 3.25rem);
	border-radius: 40px 88px 40px 88px / 64px 40px 64px 40px;
	background: var(--wp--preset--gradient--aube);
}
@media (min-width: 52rem) {
	.mi-cadre { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); align-items: start; }
}
.mi-cadre__marque .mi-icone { width: 3.25rem; height: 3.25rem; }
.mi-cadre__marque h2 {
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--grand);
	line-height: 1.2;
}
.mi-cadre__texte > p { margin: 0 0 1rem; max-width: 34rem; }
.mi-cadre__texte > p:last-child { margin-bottom: 0; }
.mi-cadre__texte strong { color: var(--wp--preset--color--eucalyptus-fonce); font-weight: 600; }
/* La phrase qui rassure, détachée du reste et mise en voix éditoriale. */
.mi-cadre__appui {
	font-family: var(--wp--preset--font-family--editorial);
	font-style: italic;
	font-size: var(--wp--preset--font-size--grand);
	line-height: 1.45;
	color: var(--wp--preset--color--eucalyptus-fonce);
}

/* --- Consigne d'urgence ---
   Le seul bloc du site qui doit se lire sans être cherché : on ne le découvre
   pas, on tombe dessus. D'où l'aplat pêche, la pastille et les numéros au
   corps du titre. */
.mi-urgence {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	grid-template-columns: 1fr;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border-radius: var(--mi-r-large);
	background: var(--wp--preset--color--peche);
}
@media (min-width: 40rem) {
	.mi-urgence { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
}
.mi-urgence__pastille {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--eucalyptus-fonce);
}
.mi-urgence__pastille .mi-glyphe { width: 1.4rem; height: 1.4rem; }
.mi-urgence__texte h2 {
	margin: 0 0 .6rem;
	font-size: var(--wp--preset--font-size--grand);
}
.mi-urgence__texte p { margin: 0 0 .6rem; font-size: var(--wp--preset--font-size--petit); }
.mi-urgence__numeros {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 2rem;
	margin: 1rem 0 !important;
}
.mi-urgence__numeros span {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--mention);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--encre);
}
.mi-urgence__numeros strong {
	font-size: var(--wp--preset--font-size--titre);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--wp--preset--color--eucalyptus-fonce);
}
/* Mauve profond et non gris : sur l'aplat pêche, le gris ne donne que 3,91:1.
   Un texte secondaire posé sur une surface colorée se teinte depuis la
   palette, il ne se désature pas. */
.mi-urgence__appoint { color: var(--wp--preset--color--mauve-fonce); }

/* --- Mention à compléter avant mise en ligne --- */
.mi-a-completer {
	display: flex;
	gap: .75rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: .9rem 1.15rem;
	border-radius: var(--mi-r-douce);
	background: #f6eef2;
	font-size: var(--wp--preset--font-size--mention);
	line-height: 1.55;
	color: var(--wp--preset--color--mauve-fonce);
}
.mi-a-completer::before {
	content: "";
	flex: none;
	width: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--mauve);
}

/* === 13. FIL D'ARIANE ============================================ */

/* Une seule ligne, toujours. Le dernier maillon reprend le titre de la page —
   qui figure en grand juste en dessous — et faisait passer le fil sur trois
   lignes sur les titres longs. On le tronque plutôt que de le laisser
   déborder : l'information n'est jamais perdue, elle est répétée deux
   centimètres plus bas. Le balisage et les données structurées, eux, restent
   complets. */
.mi-ariane__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: .5rem .75rem;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--mention);
	font-weight: 500;
	letter-spacing: .02em;
}
.mi-ariane__etape { display: flex; align-items: center; gap: .75rem; color: var(--wp--preset--color--gris); }
.mi-ariane__etape + .mi-ariane__etape::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--peche);
}
/* padding-block plutôt que rien : sans lui le lien tombe à 22 px de haut,
   sous le minimum de 24 px pour une cible tactile. */
.mi-ariane__etape a {
	display: inline-block;
	padding-block: .2rem;
	color: var(--wp--preset--color--gris);
}
/* Pas de règle de survol ici : elle virait à l'eucalyptus foncé et, venant
   après l'idiome unifié de la section 3, elle l'emportait. Le fil d'Ariane
   était ainsi le seul lien du site à ne pas passer au mauve. */
.mi-ariane__etape { min-width: 0; }
.mi-ariane__etape:not(:last-child) { flex: none; }
.mi-ariane__etape [aria-current] {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--wp--preset--color--eucalyptus-fonce);
	font-weight: 600;
}

/* === 12d. FICHE TRAITEMENT — EN-TÊTE ============================= */

.mi-fiche__approche {
	display: inline-block;
	margin: 0;
	padding: .4rem 1rem;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--titre);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--encre);
}
.mi-fiche__approche[data-degre="1"] { background: var(--mi-degre-1); }
.mi-fiche__approche[data-degre="2"] { background: var(--mi-degre-2); }
.mi-fiche__approche[data-degre="3"] { background: var(--mi-degre-3); }
.mi-fiche__approche[data-degre="4"] { background: var(--mi-degre-4); color: #fff; }

.mi-fiche__visuel .wp-block-post-featured-image { margin: 0; }
.mi-fiche__visuel img {
	width: 100%;
	height: auto;
	border-radius: var(--mi-r-large);
	box-shadow: var(--wp--preset--shadow--relief);
}

/* La colonne latérale suit la lecture : sur une fiche longue, l'anesthésie et
   les recommandations sont ce qu'on relit le plus souvent.

   C'est la colonne entière qui colle, et non le seul encadré. Un élément
   collant est positionné, donc il se peint au-dessus de ses voisins restés
   dans le flux : coller le seul encadré le faisait glisser par-dessus le
   bouton de rendez-vous, qui devenait illisible. En collant le conteneur,
   ses deux enfants se déplacent ensemble et ne peuvent plus se recouvrir.

   align-self est indispensable : sans lui la colonne s'étire à la hauteur de
   la rangée, et une boîte aussi haute que son parent n'a nulle part où
   coller. */
@media (min-width: 62rem) {
	.mi-fiche__cote {
		position: sticky;
		top: 6.5rem;
		align-self: flex-start;
	}
}

/* === 14. CARTE DU CABINET ======================================== */

.mi-carte-lieu {
	position: relative;
	overflow: hidden;
	border-radius: var(--mi-r-large);
	background: var(--wp--preset--gradient--lagune);
	min-height: 22rem;
	display: grid;
}
/* Trame de points en fond : évoque un plan sans rien télécharger. */
.mi-carte-lieu::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--wp--preset--color--eucalyptus) 1.5px, transparent 1.5px);
	background-size: 22px 22px;
	opacity: .18;
}
.mi-carte-lieu__voile {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .9rem;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
}
.mi-carte-lieu__pastille {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--eucalyptus-fonce);
	box-shadow: var(--wp--preset--shadow--voile);
}
.mi-carte-lieu__pastille .mi-glyphe { width: 1.5rem; height: 1.5rem; }
.mi-carte-lieu__adresse {
	margin: 0;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.6;
	color: var(--wp--preset--color--encre);
}
.mi-carte-lieu__bouton {
	margin-top: .35rem;
	padding: .85em 2em;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--eucalyptus-fonce);
	color: #fff;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--mention);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .3s ease, transform .3s var(--mi-courbe), box-shadow .3s ease;
}
.mi-carte-lieu__bouton:hover {
	background: var(--wp--preset--color--encre);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(51, 99, 95, .18);
}
.mi-carte-lieu__mention,
.mi-carte-lieu__replis {
	margin: 0;
	max-width: 30rem;
	font-size: var(--wp--preset--font-size--mention);
	line-height: 1.55;
	color: var(--wp--preset--color--gris);
}
.mi-carte-lieu__bouton[disabled] { opacity: .7; cursor: progress; }

.mi-carte-lieu__toile {
	grid-area: 1 / 1;
	width: 100%;
	min-height: 24rem;
	border-radius: var(--mi-r-large);
	z-index: 1;
}
.mi-carte-lieu.est-chargee .mi-carte-lieu__voile,
.mi-carte-lieu.est-chargee::before { display: none; }

/* Marqueur dessiné en CSS plutôt qu'avec les images par défaut de Leaflet :
   trois fichiers en moins, et il suit la charte. */
.mi-carte-lieu__marqueur span {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: var(--wp--preset--color--eucalyptus-fonce);
	border: 3px solid #fff;
	box-shadow: 0 3px 10px rgba(51, 99, 95, .35);
}
.mi-carte-lieu__marqueur span::after {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	margin: 5px auto 0;
	border-radius: 50%;
	background: var(--wp--preset--color--peche);
}

/* Habillage Leaflet aux couleurs du site. */
.mi-carte-lieu .leaflet-container { font-family: var(--wp--preset--font-family--texte); }
.mi-carte-lieu .leaflet-control-attribution {
	background: rgba(255, 255, 255, .88);
	font-size: 11px;
	color: var(--wp--preset--color--gris);
}
.mi-carte-lieu .leaflet-control-attribution a { color: var(--wp--preset--color--eucalyptus-fonce); }
.mi-carte-lieu .leaflet-control-zoom a {
	color: var(--wp--preset--color--eucalyptus-fonce);
	border-color: var(--wp--preset--color--filet);
}
.mi-carte-lieu .leaflet-bar { border-radius: 10px; overflow: hidden; box-shadow: var(--wp--preset--shadow--voile); }

/* --- Photographie du cabinet ---
   Le galet décore l'image, pas la figure : ancré sur la figure, son bord bas
   tombait sur la légende et la recouvrait entièrement — un élément positionné
   se peint au-dessus du contenu resté dans le flux. Le porter par <picture>
   le cale sur l'image quelle que soit la longueur de la légende. */
.mi-cabinet__photo { margin: 0; }
.mi-cabinet__photo picture { position: relative; display: block; }
.mi-cabinet__photo picture::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: auto -1.25rem -1.25rem 2.5rem;
	aspect-ratio: 2 / 1;
	border-radius: var(--mi-r-large);
	background: var(--wp--preset--gradient--petale);
	opacity: .5;
}
.mi-cabinet__photo img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--mi-r-large);
	box-shadow: var(--wp--preset--shadow--voile);
}
/* Et par sécurité, la légende passe au-dessus de tout décor. */
.mi-cabinet__legende {
	position: relative;
	z-index: 2;
	margin: 1.25rem 0 0;
	font-size: var(--wp--preset--font-size--mention);
	line-height: 1.55;
	color: var(--wp--preset--color--gris);
}

/* === 15. BLOC CONTACT ============================================ */

.mi-contact { display: grid; gap: 1rem; }
.mi-contact__ligne {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem 1.15rem;
	border-radius: var(--mi-r-douce);
	background: var(--wp--preset--color--blanc);
	border: 1px solid var(--wp--preset--color--filet);
	transition: border-color .3s ease, transform .3s var(--mi-courbe);
}
.mi-contact__ligne:hover { border-color: var(--mi-teal-clair); transform: translateY(-2px); }
.mi-contact__pastille {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	border-radius: 50%;
	background: var(--wp--preset--color--brume);
	color: var(--wp--preset--color--eucalyptus-fonce);
}
.mi-contact__ligne:nth-child(2) .mi-contact__pastille { background: var(--wp--preset--color--peche); }
.mi-contact__ligne:nth-child(3) .mi-contact__pastille { background: #eddfe6; }
.mi-contact__pastille .mi-glyphe { width: 1.25rem; height: 1.25rem; }
.mi-contact__cle {
	display: block;
	font-family: var(--wp--preset--font-family--titre);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris);
}
.mi-contact__valeur {
	display: block;
	margin-top: .15rem;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
	color: var(--wp--preset--color--encre);
}
.mi-contact__valeur a { color: inherit; text-decoration: none; }
.mi-contact__valeur a:hover { color: var(--wp--preset--color--eucalyptus-fonce); }
.mi-contact__note {
	margin-top: .2rem;
	font-size: var(--wp--preset--font-size--mention);
	color: var(--wp--preset--color--mauve-fonce);
}

/* === 16. CONTENU DES PAGES INTÉRIEURES ===========================
   Les pages de texte ne doivent pas retomber sur le style brut de
   l'éditeur : titres ponctués d'un filet pêche, listes et citations
   reprises de la charte.
   =============================================================== */

.mi-contenu > h2 {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--grand);
}
.mi-contenu > h2::before {
	content: "";
	display: block;
	width: 2.25rem;
	height: 3px;
	margin-bottom: 1rem;
	border-radius: 3px;
	background: var(--wp--preset--color--peche);
}
.mi-contenu > h3 {
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: .6rem;
	font-size: var(--wp--preset--font-size--moyen);
	color: var(--wp--preset--color--eucalyptus-fonce);
}
.mi-contenu > p { margin-block: 0 1.15rem; }
.mi-contenu strong { font-weight: 600; color: var(--wp--preset--color--encre); }
/* Liens en pleine prose : la graisse 600 les distingue au repos, puisque
   l'écart de luminance avec le texte courant n'est que de 1,74:1 et que la
   couleur seule ne suffirait pas. Le survol suit l'idiome unique du site,
   défini plus bas : un simple changement de couleur. */
.mi-contenu a:not(.wp-element-button) { font-weight: 600; }
/* Les puces des listes de contenu sont décrites plus haut, avec celles des
   fiches — un seul jeu de règles pour éviter que deux marqueurs se
   superposent. */
/* Repère « à compléter » laissé par la trame rédactionnelle : il doit sauter
   aux yeux en relecture, et ne jamais passer inaperçu en production. */
.mi-contenu p:has(> strong:only-child) { margin-block: 1.5rem; }

/* === 17. CARTE TARIFS / INFOS PRATIQUES ========================== */

.mi-tarifs {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	grid-template-columns: 1fr;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border-radius: var(--mi-r-large);
	background: var(--wp--preset--color--blanc);
	border: 1px solid var(--wp--preset--color--filet);
	box-shadow: var(--wp--preset--shadow--voile);
}
@media (min-width: 46rem) { .mi-tarifs { grid-template-columns: 1fr 1fr; } }
.mi-tarifs__titre {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--mention);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mauve-fonce);
}
.mi-tarifs__liste { list-style: none; margin: 0; padding: 0; }
.mi-tarifs__liste li {
	display: flex;
	align-items: baseline;
	gap: .75rem;
	padding: .7rem 0;
	border-top: 1px solid var(--wp--preset--color--filet);
	font-size: var(--wp--preset--font-size--petit);
}
.mi-tarifs__liste li:first-child { border-top: 0; padding-top: 0; }
.mi-tarifs__liste .mi-glyphe { color: var(--wp--preset--color--eucalyptus); align-self: center; }

/* === 18. PLAN DU SITE ============================================ */

.mi-plan {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.mi-plan__titre {
	margin: 0 0 1rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--wp--preset--color--filet);
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--mention);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mauve-fonce);
}
.mi-plan__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.mi-plan__liste a {
	display: inline-flex;
	align-items: baseline;
	gap: .6rem;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--encre);
	text-decoration: none;
}
.mi-plan__liste a::before {
	content: "";
	width: 5px;
	height: 5px;
	flex: none;
	border-radius: 50%;
	background: var(--wp--preset--color--peche);
	transition: transform .3s var(--mi-courbe), background-color .3s ease;
}
.mi-plan__liste a:hover { color: var(--wp--preset--color--eucalyptus-fonce); }
.mi-plan__liste a:hover::before { transform: scale(1.7); background: var(--wp--preset--color--eucalyptus); }

@media print {
	.mi-header, .mi-footer, .wp-block-navigation, .mi-no-print, .mi-decor { display: none !important; }
	.mi-carte-lieu__bouton { display: none !important; }
	body { font-size: 11pt; }
	.mi-soin, .mi-carte { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
	.mi-soins__grille { grid-template-columns: 1fr 1fr; }
	.mi-faq__reponse { display: block !important; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}