/* ================================================================
   composants.css — Couche de composants partages (L'Instant Douceur)
   ----------------------------------------------------------------
   Phase 3 du plan d'integration (§5.5 de la norme). Construit AVANT
   tout bloc : chaque role (bouton, carte, overline, titre, chip,
   ligne de prestation, reassurance, fil d'ariane, accordeon, bandeau
   CTA, rythme de section) est defini UNE SEULE FOIS ici. Les blocs et
   patterns a venir CONSOMMENT ces classes, ils ne les redefinissent
   jamais (interdiction de reinventer, §5.5).

   Regles d'ecriture (§5.4) :
	 - Toujours consommer les tokens avec repli litteral : var(--x, 12px).
	   La valeur reelle vit dans theme.json (source unique, §5.1) ; le
	   repli n'est qu'un filet de securite si tokens.css n'a pas charge.
	 - Proprietes logiques (padding-block / margin-inline) partout.
	 - blockGap:0 (§4) => chaque section pose son propre padding-block.
	 - Les survols des maquettes (data-hov) sont traduits en :hover CSS.
	 - Identifiants ASCII, francais (§16.1).

   Valeurs extraites des maquettes (verite visuelle §0.1).
   ================================================================ */


/* ================================================================
   1. Rythme de section & utilitaires de mise en page
   ----------------------------------------------------------------
   Le gutter lateral est deja pose par theme.json (root padding
   clamp(20px,5vw,64px)) + layout contraint a 1180px. Ici on ne gere
   que le rythme VERTICAL des sections, par variation (§9ter). Ces
   classes sont branchees sur les variations de core/group en Phase 7 :
   chaque style enregistre (register_block_style, inc/patterns.php) pose
   la classe .is-style-section-* sur le groupe ; le double selecteur
   ci-dessous garde UNE SEULE definition partagee (utilitaire + variation
   d'editeur), sans duplication (§5.5).
   ================================================================ */

.section,
.wp-block-group.is-style-section {
	padding-block: var(--space-5xl, 96px);
}

/* Bande pleine largeur teintee (fond clair different du corps). */
.section--bande,
.wp-block-group.is-style-section-bande {
	padding-block: var(--space-5xl, 96px);
	background: var(--bg, #FBF8F3);
	border-block: 1px solid var(--line, #E0D5C4);
}

/* Bande accentuee (surface-2 : marques, rappels). */
.section--accent,
.wp-block-group.is-style-section-accent {
	padding-block: var(--space-3xl, 64px);
	background: var(--surface-2, #EDE5D8);
}

/* Bande sombre (reassurance, avant-pied). */
.section--sombre,
.wp-block-group.is-style-section-sombre {
	padding-block: var(--space-5xl, 96px);
	background: var(--ink, #2A2521);
	color: var(--surface, #F7F3EC);
}

/* 🔴 Titres sur fond sombre — correctif du 2026-08-22.
   « styles.elements.heading » de theme.json genere
   « :root :where(h1, h2, h3, h4, h5, h6) { color: encre } » : une regle qui
   MATCHE le titre, donc plus forte que la couleur creme heritee de la bande.
   Resultat : encre sur encre, titre invisible (constate sur la bande
   d'orientation de « Vos besoins » et sur le bandeau CTA). On rend la creme
   aux titres de TOUS les fonds sombres du theme, sans !important : la classe
   de la bande + l'element portent (0,1,1), au-dessus du (0,1,0) global.
   Les titres qui posent leur propre couleur en admin (has-text-color) gardent
   la main — c'est le reglage explicite de l'editeur qui doit gagner. */
.section--sombre :is(h1, h2, h3, h4, h5, h6):not(.has-text-color),
.wp-block-group.is-style-section-sombre :is(h1, h2, h3, h4, h5, h6):not(.has-text-color),
.bandeau-cta :is(h1, h2, h3, h4, h5, h6):not(.has-text-color),
.reassurance :is(h1, h2, h3, h4, h5, h6):not(.has-text-color),
.banniere--sombre :is(h1, h2, h3, h4, h5, h6):not(.has-text-color) {
	color: var(--surface, #F7F3EC);
}

/* Section resserree (bandeaux logos, rappels courts). */
.section--compact,
.wp-block-group.is-style-section-compact {
	padding-block: var(--space-3xl, 64px);
}

/* Texte reserve aux technologies d'assistance (§21) : masque a l'ecran,
   restitue par les lecteurs. Filet de securite si la feuille « common »
   du core n'est pas chargee. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* En-tete de section : overline + titre + chapo, marge basse commune
   avant la grille de contenu. */
.entete-section {
	margin-block-end: var(--space-2xl, 48px);
}

.entete-section--centre {
	text-align: center;
}

/* Bandeau de titre de page — pendant CLAIR des bannieres en cover
   (.besoins-entete / .soins-entete, §17.1).
   ----------------------------------------------------------------
   🔴 Recette du 2026-08-24 (page FAQ). Les maquettes des pages sans
   visuel d'en-tete (« FAQ », « Actualites », « Mentions legales »)
   ouvrent toutes sur la MEME bande : fond surface-2, filet bas beige,
   colonne centree collee au header. Le fond vient de .section--accent
   (deja defini plus haut) ; ce modificateur n'ajoute que le filet et le
   rythme vertical, pour une seule definition partagee (§5.5).

   🔒 Les respirations sont posees ici et NON en « style.spacing » dans
   le markup de bloc : « settings.spacing.padding » et « .margin » ne
   sont pas ouverts dans theme.json, un espacement ecrit dans le markup
   ne survit pas au rendu (meme cause que le correctif v1.13.1). */
.bandeau-titre {
	padding-block: var(--space-3xl, 64px) var(--space-2xl, 56px);
	border-block-end: 1px solid var(--line, #E0D5C4);
}

.bandeau-titre .fil-ariane {
	margin-block-end: var(--space-l, 22px);
}

.bandeau-titre .overline {
	margin-block-end: var(--space-m, 16px);
}

.bandeau-titre .chapo {
	margin-block-start: var(--space-l, 20px);
}

/* Ligne de service sous le titre d'un bandeau (« Derniere mise a jour »,
   mention de version) : plus petite et plus discrete qu'un chapo, dont
   ce n'est pas le role. Maquette « Mentions-legales.dc.html ». */
.bandeau-titre__note {
	font-size: var(--t-small, 15px);
	line-height: 1.6;
	color: var(--ink-soft, #5C534A);
	margin-block: var(--space-m, 16px) 0;
}


/* ================================================================
   2. Titres editoriaux, overline & chapo
   ----------------------------------------------------------------
   Les h1..h6 core heritent deja de theme.json (§4). Ces classes
   servent aux textes de pattern/bloc qui ne sont pas des balises de
   titre semantiques, pour garder EXACTEMENT la meme charte.
   ================================================================ */

/* Overline : petit label majuscule dore au-dessus d'un titre. */
.overline {
	display: block;
	font-family: var(--ff-text, 'Jost', sans-serif);
	font-size: var(--t-overline, 12px);
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--or-soft, #C3B097);
	margin-block-end: var(--space-s, 12px);
}

/* Variante sur fond sombre (heros, bandeau CTA) : dore clair, plus
   espace. */
.overline--sombre {
	color: var(--or-pale, #E6CBA0);
	letter-spacing: 0.36em;
}

/* Variante doree soutenue (mise en avant sur fond clair accentue). */
.overline--dore {
	color: var(--or-deep, #876A3C);
	letter-spacing: 0.36em;
}

/* Variante interne de carte (categorie d'un soin/produit). */
.overline--carte {
	font-size: var(--t-overline, 11px);
	letter-spacing: 0.18em;
	color: var(--or-deep, #876A3C);
	margin-block-end: var(--space-xs, 6px);
}

/* Titre de section non semantique (memes tailles que h2). */
.titre-section {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-weight: 500;
	font-size: var(--t-h2, clamp(30px, 4vw, 44px));
	line-height: 1.12;
	color: var(--ink, #2A2521);
	margin: 0;
}

/* Titre de bandeau d'en-tete de page (memes tailles que h1).
   ----------------------------------------------------------------
   🔴 Recette du 2026-08-24. Un « h1 » nu s'en remet a
   « styles.elements.h1 » de theme.json ; ce reglage n'atteint pas
   l'element sur ce site (titre rendu a la taille du corps, constate
   sur le bandeau des actualites). Le theme resout deja ce cas partout
   ailleurs par une classe portant l'alias de token — .hero-accueil__titre,
   .besoins-entete__titre, .boutique-entete__titre. Cette classe est la
   version GENERIQUE de ces trois-la : une seule definition pour les
   bandeaux clairs, reutilisable par tout modele (§5.5). Les bandeaux
   sombres gardent leur classe de zone, qui ajoute la couleur creme. */
.titre-page {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-weight: 500;
	font-size: var(--t-h1, clamp(40px, 5vw, 64px));
	line-height: 1.06;
	letter-spacing: 0.005em;
	color: var(--ink, #2A2521);
	margin-block: 0;
}

/* Chapo / paragraphe d'introduction sous un titre. */
.chapo {
	font-size: var(--t-lead, clamp(17px, 1.6vw, 20px));
	line-height: 1.65;
	color: var(--ink-soft, #5C534A);
	margin-block: var(--space-m, 14px) 0;
}

/* Mesure de lecture bornee sous un titre de bandeau clair — pendant
   exact de .chapo--sombre, sans le changement de couleur (§5.5). */
.chapo--mesure {
	max-width: 54ch;
	margin-inline: auto;
}

/* Variante sur fond sombre (bannieres, bandes encre) : creme adouci et
   mesure de lecture bornee, comme dans les maquettes. */
.chapo--sombre {
	color: rgba(251, 248, 243, 0.86);
	max-width: 56ch;
	line-height: 1.7;
}


/* ================================================================
   3. Boutons — un seul systeme (§5.5)
   ----------------------------------------------------------------
   La base .btn reprend EXACTEMENT theme.json > styles.elements.button
   (fond or profond, texte creme, radius 4px, majuscules, letter-spacing
   .14em, hover brun sombre) : un bouton core et un .btn sont identiques.
   Les variantes ne changent que la couleur/le contexte, jamais la forme
   ni l'effet.

   🔴 Contraste AA (Phase 9, §21 — arbitrage client du 2026-07-31).
   Le fond de repos etait l'or #A8895E : creme sur or ne donnait que
   3,09:1, alors qu'un libelle de 14 px en capitales exige 4,5:1
   (RGAA 4.x critere 3.2 / WCAG 1.4.3). Le repos prend donc l'or profond
   (4,77:1) — la teinte qui servait deja au survol — et la sequence
   descend d'un cran : repos or profond → survol brun sombre → actif
   encre profonde. Aucun autre element de la charte ne bouge.
   ================================================================ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs, 8px);
	min-height: 52px;
	padding-block: 0;
	padding-inline: var(--space-xl, 30px);
	font-family: var(--ff-text, 'Jost', sans-serif);
	font-size: var(--t-small, 14px);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bg, #FBF8F3);
	background: var(--or-deep, #876A3C);
	border: 1px solid transparent;
	border-radius: var(--r-s, 4px);
	cursor: pointer;
	transition: background 0.45s var(--ease), color 0.45s var(--ease),
		border-color 0.45s var(--ease), transform 0.45s var(--ease),
		box-shadow 0.45s var(--ease);
}

.btn:hover,
.btn:focus-visible {
	background: var(--or-dark, #3A3027);
	color: var(--bg, #FBF8F3);
	transform: translateY(-2px);
	box-shadow: var(--shadow-btn, 0 18px 50px -22px rgba(0, 0, 0, 0.6));
}

.btn:active {
	transform: translateY(0);
	background: var(--ink-deep, #211D19);
}

/* Primaire sombre : action principale du tunnel/commerce et RDV
   (fond encre -> hover dore profond). */
.btn--sombre {
	background: var(--ink, #2A2521);
	color: var(--surface, #F7F3EC);
	border-color: var(--ink, #2A2521);
}

.btn--sombre:hover,
.btn--sombre:focus-visible {
	background: var(--or-deep, #876A3C);
	border-color: var(--or-deep, #876A3C);
	color: var(--surface, #F7F3EC);
}

/* Clair : sur fond sombre (heros, bandeau CTA) — fond creme -> dore
   pale. */
.btn--white {
	background: var(--bg, #FBF8F3);
	color: var(--ink, #2A2521);
	border-color: transparent;
}

.btn--white:hover,
.btn--white:focus-visible {
	background: var(--or-pale, #E6CBA0);
	color: var(--ink, #2A2521);
}

/* Contour : bordure encre, remplissage au survol. */
.btn--contour {
	background: transparent;
	color: var(--ink, #2A2521);
	border-color: var(--ink, #2A2521);
}

.btn--contour:hover,
.btn--contour:focus-visible {
	background: var(--ink, #2A2521);
	color: var(--surface, #F7F3EC);
	border-color: var(--ink, #2A2521);
	box-shadow: none;
	transform: none;
}

/* Contour clair : contour sur fond sombre (texte creme -> remplissage
   creme). A combiner avec .btn--contour. */
.btn--light {
	color: var(--surface, #F7F3EC);
	border-color: rgba(247, 243, 236, 0.55);
}

.btn--light:hover,
.btn--light:focus-visible {
	background: var(--surface, #F7F3EC);
	color: var(--ink, #2A2521);
	border-color: var(--surface, #F7F3EC);
}

/* Petit bouton (icone d'ajout panier, RDV d'en-tete). */
.btn--sm {
	min-height: 0;
	padding-block: var(--space-s, 11px);
	padding-inline: var(--space-l, 20px);
	font-size: 11.5px;
	letter-spacing: 0.13em;
}

/* Bouton pilule (liens « voir tout » a bordure douce). */
.btn--pill {
	min-height: 0;
	padding-block: var(--space-m, 14px);
	padding-inline: var(--space-xl, 30px);
	font-size: 13px;
	letter-spacing: 0.18em;
	background: transparent;
	color: var(--ink, #2A2521);
	border-color: var(--or-soft, #C3B097);
	border-radius: var(--r-pill, 999px);
}

.btn--pill:hover,
.btn--pill:focus-visible {
	background: var(--ink, #2A2521);
	color: var(--bg, #FBF8F3);
	border-color: var(--ink, #2A2521);
	transform: none;
	box-shadow: none;
}

/* Lien texte souligne (secondaire dans les heros/sections). */
.lien-souligne {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs, 8px);
	font-family: var(--ff-text, 'Jost', sans-serif);
	font-size: var(--t-small, 13px);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--or-deep, #876A3C);
	border-block-end: 1px solid rgba(142, 112, 63, 0.4);
	padding-block-end: var(--space-xs, 3px);
	transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.lien-souligne:hover,
.lien-souligne:focus-visible {
	color: var(--ink, #2A2521);
	border-block-end-color: var(--ink, #2A2521);
}


/* ================================================================
   4. Cartes — base commune + declinaisons
   ----------------------------------------------------------------
   Une seule carte de reference (§5.5). Fond creme, bordure beige.
   Echelle de rayons a trois crans reprise des maquettes (arbitrage
   valide 2026-07-21, cf. PLAN-INTEGRATION) : base 10px (m — avis/actu),
   produit & besoin 12px (ml), membre & soins 14px (l). Chaque cran est
   un token, aucune valeur ad hoc (§5.5).
   ================================================================ */

.carte {
	display: flex;
	flex-direction: column;
	background: var(--bg, #FBF8F3);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-m, 10px);
	overflow: hidden;
	color: inherit;

	/* 🔒 « useRootPaddingAwareAlignments » (theme.json) pose la classe
	   .has-global-padding sur tout groupe en layout « constrained », qui
	   applique alors le padding racine du site — clamp(20px, 5vw, 64px). Dans
	   une carte, ce padding decolle le visuel des bords : le media ne touche
	   plus le cadre. Les compositions posent donc les cartes en layout
	   « default » ; remettre les variables a zero neutralise le cas des cartes
	   deja enregistrees en base, sans guerre de specificite. */
	--wp--style--root--padding-left: 0;
	--wp--style--root--padding-right: 0;
}

/* Carte-lien : toute la carte est cliquable (survol souleve). Sert aussi
   bien a une carte qui EST un <a> qu'a un groupe de blocs contenant un
   lien interne .carte__lien (rendu cliquable en entier via ::after, sans
   bloc lien natif — cf. compositions accueil/vos-besoins). */
.carte--lien {
	position: relative;
	text-decoration: none;
	transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.carte--lien:hover,
.carte--lien:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--shadow-card, 0 18px 50px -28px rgba(42, 37, 33, 0.45));
}

/* Le lien interne s'etire sur toute la carte (zone cliquable = la carte). */
.carte--lien .carte__lien a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Media de carte : hauteur cadree, image en couverture avec leger zoom.
   Le media peut etre un <div>/<a> (blocs dynamiques, boucle WooCommerce) ou
   un <figure class="wp-block-image"> (compositions : bloc core/image portant
   la classe .carte__media, remplacable en Site Editor). D'ou le selecteur
   descendant de .carte : il passe devant les regles de wp-block-library
   (.wp-block-image { margin: 0 0 1em } et .wp-block-image img { height: auto })
   sans dupliquer la definition du composant (§5.5). Toutes les occurrences de
   .carte__media sont bien des descendants de .carte. */
.carte .carte__media {
	position: relative;
	overflow: hidden;
	height: 170px;
	margin: 0;
}

.carte .carte__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease);
}

.carte--lien:hover .carte__media img,
.carte--lien:focus-visible .carte__media img {
	transform: scale(1.05);
}

/* Corps de carte. Le margin nul neutralise le blockGap que les styles globaux
   posent entre freres d'un core/group (media + corps) : le visuel doit toucher
   le corps, sans gouttiere (§5.5). Selecteur descendant de .carte pour passer
   devant .has-global-padding (meme motif que .carte__media ci-dessus). */
.carte .carte__corps {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin: 0;
	padding: var(--space-l, 24px) var(--space-l, 24px) var(--space-xl, 28px);
}

.carte__titre {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-weight: 600;
	font-size: var(--t-h4, 25px);
	line-height: 1.15;
	color: var(--ink, #2A2521);
	margin: 0;
}

.carte__texte {
	font-size: var(--t-small, 13.5px);
	line-height: 1.6;
	color: var(--ink-soft, #5C534A);
	margin-block: var(--space-xs, 8px) var(--space-m, 16px);
}

/* Lien/meta de bas de carte (overline dore, pousse en bas). */
.carte__lien {
	margin-block-start: auto;
	font-size: var(--t-overline, 12px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--or-deep, #876A3C);
}

/* --- Declinaison PRODUIT (boutique) --- */
.carte--produit {
	border-radius: var(--r-ml, 12px);
}

.carte--produit .carte__media {
	height: 250px;
}

.carte--produit .carte__corps {
	padding: var(--space-l, 22px) var(--space-l, 22px) var(--space-l, 24px);
}

.carte--produit .carte__titre {
	font-size: var(--t-h4, 23px);
}

/* Ligne de prix + action, poussee en bas de la carte produit. */
.carte__pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s, 12px);
	margin-block-start: auto;
	padding-block-start: var(--space-l, 20px);
}

.carte__prix {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-weight: 600;
	font-size: var(--t-h4, 22px);
	color: var(--ink, #2A2521);
}

/* --- Declinaison ACTUALITE ---
   Hauteur de media relevee de 100px le 2026-08-04 (demande client) : le visuel
   d'article manquait de presence face au corps de carte. Portee volontairement
   partagee (§5.5) — bloc « ID77 · Actualites » en apparence simple, boucle du
   blog (templates/index.html) et resultats de recherche (templates/search.html)
   gardent la meme hauteur. L'apparence « complete » du bloc a sa propre valeur
   (blocks/src/actualites/style.scss), relevee d'autant. */
.carte--actu .carte__media {
	height: 265px;
}

.carte--actu .carte__corps {
	padding: var(--space-l, 22px);
}

.carte--actu .carte__titre {
	font-size: var(--t-h4, 23px);
	margin-block: var(--space-xs, 8px);
}

/* Meta date/categorie de l'actualite. */
.carte__meta {
	font-size: var(--t-overline, 11px);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--or-deep, #876A3C);
}

/* Survol actu : ombre douce (plus subtile que la carte standard). */
.carte--actu:hover,
.carte--actu:focus-visible {
	transform: translateY(-5px);
	box-shadow: var(--shadow-soft, 0 14px 38px -26px rgba(42, 37, 33, 0.4));
}

/* --- Declinaison BESOIN (grande carte editoriale) --- */
.carte--besoin {
	border-radius: var(--r-ml, 12px);
}

.carte--besoin .carte__media {
	height: 220px;
}

.carte--besoin .carte__corps {
	padding: var(--space-xl, 28px) var(--space-l, 26px) var(--space-xl, 30px);
}

.carte--besoin .carte__titre {
	font-size: var(--t-h3, 27px);
	line-height: 1.1;
}

.carte--besoin .carte__texte {
	font-size: var(--t-base, 14px);
	line-height: 1.62;
	margin-block: var(--space-xs, 9px) var(--space-m, 16px);
}

/* --- Declinaison VALEUR (engagements : picto, titre court, texte bref) ---
   Carte SANS visuel : un picto typographique tient lieu d'illustration.
   Elle ne derive pas de .carte--besoin, dont l'echelle est calibree pour
   une carte a visuel : la maquette veut ici un titre de rang h4 et le
   corps « petit » — c'est-a-dire exactement la base .carte__texte, qu'on
   ne surcharge donc PAS (§5.5). */
.carte--valeur {
	border-radius: var(--r-ml, 12px);
}

.carte--valeur .carte__titre {
	font-size: var(--t-h4, 22px);
	line-height: 1.15;
}

/* 🔴 Garde-fou « carte en layout constrained » (recette 2026-08-25, page
   equipe — meme cause sur la grille « benefices » de la fiche soin).
   Une carte est un conteneur FLEX EN COLONNE (.carte, plus haut). Le layout
   « constrained » de WordPress pose sur chaque enfant « margin-inline: auto »
   + « max-width: content-size » : sur un item flex, une marge auto dans l'axe
   transverse annule l'etirement, l'enfant se reduit A SON CONTENU et se
   retrouve CENTRE. C'est ce qui decalait le picto au milieu de la carte.
   Et comme .carte remet le padding racine a zero (plus haut, meme raison),
   une carte sans .carte__corps n'avait plus AUCUN retrait interieur.
   Ces deux regles reparent les cartes deja enregistrees en base ; les
   compositions, elles, posent desormais un .carte__corps en layout
   « default » (motif de reference : inc/patterns/carte-besoin-content.php).

   ⚠️ « !important » assume : WordPress ecrit lui-meme ses marges de layout
   en « margin-left: auto !important » (feuille de styles de blocs du coeur).
   Aucune specificite ne peut en venir a bout — c'est la seule ecriture qui
   neutralise la regle du coeur. Portee volontairement etroite : enfants
   directs d'une carte, et uniquement en layout « constrained ». */
.carte.is-layout-constrained > * {
	margin-inline: 0 !important;
	max-width: none;
}

.carte.is-layout-constrained:not(:has(.carte__corps)) {
	padding: var(--space-xl, 28px) var(--space-l, 26px) var(--space-xl, 30px);
}

/* Picto decoratif en tete de carte (engagements, benefices) : respiration
   avant le titre — « blockGap » vaut 0 dans theme.json (§5.1). */
.carte .reassurance__icone {
	margin-block: 0 var(--space-s, 12px);
}

/* --- Declinaison MEMBRE (equipe : portrait 3/4, sans survol) --- */
.carte--membre {
	background: var(--surface, #F7F3EC);
	border-radius: var(--r-l, 14px);
}

.carte--membre .carte__media {
	height: auto;
	aspect-ratio: 3 / 4;
}

.carte--membre .carte__corps {
	padding: var(--space-l, 22px) var(--space-l, 22px) var(--space-xl, 26px);
}

.carte--membre .carte__titre {
	font-size: var(--t-h4, 23px);
	line-height: 1.1;
}

/* Role/specialite du membre (overline doree). */
.carte__role {
	font-size: var(--t-overline, 11px);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--or-deep, #876A3C);
	margin-block: var(--space-xs, 6px) var(--space-s, 12px);
}

/* --- Declinaison AVIS (temoignage, sans media) --- */
.carte--avis .carte__corps {
	padding: var(--space-xl, 28px) var(--space-l, 26px);
}

.carte__citation {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-style: italic;
	font-size: var(--t-lead, 19px);
	line-height: 1.45;
	color: var(--ink, #2A2521);
	margin: 0;
}

.carte__auteur {
	margin-block-start: var(--space-m, 18px);
	font-size: var(--t-overline, 12px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft, #5C534A);
}


/* ================================================================
   5. Chips / tags / badges — base pilule commune
   ================================================================ */

/* Les liens rapides de la page 404, les etiquettes de carte besoin et les
   nuages d'entree express SONT des chips : ils rejoignent la definition
   commune (double selecteur, §5.5) plutot que de la recopier.
   Le markup y est de la prose editoriale (paragraphe + lien), donc on cible
   le paragraphe/le lien, pas une classe posee a la main que l'editeur
   pourrait perdre en reecrivant le bloc. */
.chip,
.erreur-404__pilules a,
.carte__tags p,
.nuage-chips a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs, 7px);
	font-family: var(--ff-text, 'Jost', sans-serif);
	font-size: var(--t-small, 13px);
	color: var(--ink-soft, #5C534A);
	background: var(--bg, #FBF8F3);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-pill, 999px);
	padding-block: var(--space-xs, 5px);
	padding-inline: var(--space-s, 12px);
	text-decoration: none;
}

/* Chip cliquable (filtres, navigation par besoin) : remplissage encre. */
.chip--lien,
.erreur-404__pilules a,
.nuage-chips a {
	color: var(--ink, #2A2521);
	transition: background 0.3s var(--ease), color 0.3s var(--ease),
		border-color 0.3s var(--ease);
}

.chip--lien:hover,
.chip--lien:focus-visible,
.erreur-404__pilules a:hover,
.erreur-404__pilules a:focus-visible,
.nuage-chips a:hover,
.nuage-chips a:focus-visible {
	background: var(--ink, #2A2521);
	color: var(--bg, #FBF8F3);
	border-color: var(--ink, #2A2521);
}

/* Chip large (concerne / « pour qui », navigation par besoin, liens 404). */
.chip--lg,
.erreur-404__pilules a,
.nuage-chips a {
	font-size: var(--t-base, 14px);
	color: var(--ink, #2A2521);
	padding-block: var(--space-s, 11px);
	padding-inline: var(--space-l, 20px);
}

/* Tag teinte (etiquettes discretes sur carte besoin). */
.chip--tag,
.carte__tags p {
	font-size: var(--t-overline, 12px);
	background: var(--surface-2, #EDE5D8);
}

/* Badge absolu sur media de produit (angle superieur gauche). */
.badge {
	position: absolute;
	inset-block-start: var(--space-m, 14px);
	inset-inline-start: var(--space-m, 14px);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	padding-block: var(--space-xs, 6px);
	padding-inline: var(--space-s, 12px);
	border-radius: var(--r-pill, 999px);
	background: var(--ink, #2A2521);
	color: var(--or-pale, #E6CBA0);
}

.badge--nouveau { background: var(--or-deep, #876A3C); color: var(--bg, #FBF8F3); }
.badge--saison  { background: var(--or, #A8895E); color: var(--ink, #2A2521); }
.badge--cadeau  { background: var(--bg, #FBF8F3); color: var(--or-deep, #876A3C); }

/* Indisponibilite : gris neutre, volontairement en retrait des badges
   commerciaux (promo/nouveau) qu'il accompagne. */
.badge--epuise  { background: var(--ink-xsoft, #746F68); color: var(--bg, #FBF8F3); }

/* Pile de badges : quand plusieurs etiquettes coexistent (ex. « Épuisé »
   + « Promo »), c'est le CONTENEUR qui se positionne dans l'angle et les
   badges redeviennent des elements de flux — la definition de .badge
   n'est pas dupliquee, seule sa position est reprise (§5.5). */
.badges {
	position: absolute;
	inset-block-start: var(--space-m, 14px);
	inset-inline-start: var(--space-m, 14px);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs, 6px);
	max-width: calc(100% - 2 * var(--space-m, 14px));
	z-index: 1;
}

.badges .badge {
	position: static;
	inset: auto;
}


/* ================================================================
   6. Ligne de prestation (nom · duree ··· prix)
   ----------------------------------------------------------------
   Rangee flex avec pointille de liaison (span de remplissage), pas un
   border-bottom sur la rangee. Separateur de rangees : bordure basse.
   ================================================================ */

.ligne-prestation {
	display: flex;
	align-items: baseline;
	gap: var(--space-s, 12px);
	padding-block: var(--space-m, 14px);
	border-block-end: 1px solid var(--line, #E0D5C4);
}

.ligne-prestation:last-child {
	border-block-end: 0;
}

.ligne-prestation__intitule {
	flex: none;
	max-width: 60%;
}

.ligne-prestation__nom {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-weight: 600;
	font-size: var(--t-h4, 18px);
	color: var(--ink, #2A2521);
}

.ligne-prestation__duree {
	font-size: 12.5px;
	color: var(--ink-soft, #5C534A);
	margin-block-start: 1px;
}

/* Pointille de liaison : la ligne qui court entre le nom et le prix. */
.ligne-prestation__pointille {
	flex: 1;
	border-block-end: 1px dotted var(--or-soft, #C3B097);
	transform: translateY(-4px);
}

.ligne-prestation__prix {
	flex: none;
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-weight: 500;
	font-size: var(--t-h4, 21px);
	color: var(--ink, #2A2521);
}

/* Prix promotionnel / « offert » (dore). */
.ligne-prestation__prix--promo {
	color: var(--or-deep, #876A3C);
	font-size: var(--t-lead, 19px);
}

/* Variante large (carte des tarifs d'une fiche soin). */
.ligne-prestation--large {
	gap: var(--space-m, 14px);
	padding-block: var(--space-l, 22px);
}

.ligne-prestation--large .ligne-prestation__nom {
	font-size: var(--t-h4, 23px);
}

.ligne-prestation--large .ligne-prestation__prix {
	font-size: var(--t-h3, 26px);
}

.ligne-prestation--large .ligne-prestation__pointille {
	transform: translateY(-5px);
}


/* ================================================================
   7. Barre de reassurance (4 colonnes, fond sombre)
   ================================================================ */

.reassurance {
	background: var(--ink, #2A2521);
	color: var(--surface, #F7F3EC);
	border-block-start: 1px solid rgba(247, 243, 236, 0.09);
}

/* Contenu aligne sur le conteneur, fond sombre pleine largeur. */
.reassurance__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.reassurance__item {
	padding-block: var(--space-xl, 34px);
	padding-inline: var(--space-l, 24px);
	text-align: center;
	border-inline-end: 1px solid rgba(247, 243, 236, 0.12);
}

.reassurance__item:last-child {
	border-inline-end: 0;
}

.reassurance__icone {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-size: var(--t-h3, 30px);
	line-height: 1;
	color: var(--or, #A8895E);
}

.reassurance__valeur {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-size: var(--t-h4, 22px);
	margin-block: var(--space-xs, 8px) 4px;
}

.reassurance__label {
	font-size: var(--t-overline, 12px);
	color: rgba(247, 243, 236, 0.62);
}

/* Repli responsive : 2 colonnes maintenues jusqu'au plus petit ecran
   (grille 2x2 en smartphone, jamais d'empilement en colonne unique —
   retour recette). Le filet vertical tombe en fin de rangee, un filet
   horizontal separe les deux rangees. */
@media (max-width: 860px) {
	.reassurance__inner { grid-template-columns: repeat(2, 1fr); }
	.reassurance__item:nth-child(2n) { border-inline-end: 0; }
	.reassurance__item:nth-child(-n + 2) {
		border-block-end: 1px solid rgba(247, 243, 236, 0.12);
	}
}

/* Smartphone : la 2x2 reste, on ne rend que la gouttiere et la typo. */
@media (max-width: 520px) {
	.reassurance__item {
		padding-block: var(--space-l, 24px);
		padding-inline: var(--space-m, 16px);
	}

	.reassurance__icone {
		font-size: var(--t-h4, 22px);
	}

	.reassurance__valeur {
		font-size: var(--t-base, 16px);
	}

	.reassurance__label {
		line-height: 1.35;
	}
}


/* ================================================================
   8. Fil d'ariane (breadcrumb)
   ----------------------------------------------------------------
   Version claire par defaut ; variante sombre pour les heros.
   ================================================================ */

.fil-ariane {
	font-size: var(--t-overline, 12.5px);
	letter-spacing: 0.04em;
	color: var(--ink-xsoft, #746F68);
}

.fil-ariane__lien {
	color: var(--ink-xsoft, #746F68);
	text-decoration: none;
	transition: color 0.3s var(--ease);
}

.fil-ariane__lien:hover,
.fil-ariane__lien:focus-visible {
	color: var(--or-deep, #876A3C);
}

.fil-ariane__separateur {
	margin-inline: var(--space-xs, 9px);
	color: var(--or-soft, #C3B097);
}

.fil-ariane__actuel {
	color: var(--ink, #2A2521);
}

/* Variante sur fond sombre (dans un heros). */
.fil-ariane--sombre {
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(251, 248, 243, 0.64);
}

.fil-ariane--sombre .fil-ariane__lien { color: rgba(251, 248, 243, 0.64); }
.fil-ariane--sombre .fil-ariane__lien:hover,
.fil-ariane--sombre .fil-ariane__lien:focus-visible { color: var(--or-pale, #E6CBA0); }
.fil-ariane--sombre .fil-ariane__separateur { color: rgba(251, 248, 243, 0.4); }
.fil-ariane--sombre .fil-ariane__actuel { color: var(--or-pale, #E6CBA0); }


/* ================================================================
   9. Accordeon (FAQ / questions frequentes)
   ----------------------------------------------------------------
   Base commune ; l'ouverture/fermeture est pilotee par le JS du bloc
   (aria-expanded + hidden/max-height, §6.4). Ici : la charte visuelle.
   ================================================================ */

.accordeon__item {
	border-block-end: 1px solid var(--line, #E0D5C4);
}

.accordeon__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-l, 24px);
	background: none;
	border: 0;
	cursor: pointer;
	text-align: start;
	padding-block: var(--space-l, 24px);
	padding-inline: 4px;
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-size: var(--t-h4, 22px);
	font-weight: 600;
	color: var(--ink, #2A2521);
}

.accordeon__caret {
	flex: none;
	color: var(--or-deep, #876A3C);
	transition: transform 0.4s var(--ease);
	transform: rotate(0deg);
}

/* Etat ouvert : porte par aria-expanded (accessibilite §21). */
.accordeon__question[aria-expanded="true"] .accordeon__caret {
	transform: rotate(180deg);
}

.accordeon__panneau {
	overflow: hidden;
	transition: max-height 0.5s var(--ease);
	max-height: 0;
}

.accordeon__reponse {
	margin: 0;
	padding-block: 0 var(--space-xl, 26px);
	padding-inline: 4px;
	font-size: var(--t-base, 15.5px);
	line-height: 1.7;
	color: var(--ink-soft, #5C534A);
}

/* Colonne d'accordeon de la page FAQ (composition « idouceur/faq »).
   ----------------------------------------------------------------
   🔴 Recette du 2026-08-24. La zone de contenu suit le fond de PAGE
   (surface), pas la teinte du bandeau au-dessus (surface-2) : c'est ce
   contraste des deux aplats qui fait la maquette « FAQ.dc.html ». Le
   groupe ne porte donc AUCUN fond — un fond pose sur une colonne de
   820 px dessinerait un rectangle clair au milieu de la page au lieu
   d'une bande. Seul le rythme vertical de la maquette est repris
   (64 px sous le bandeau, 32 px avant le bandeau CTA du modele) ; il ne
   peut pas vivre dans le markup, cf. .bandeau-titre (§1). */
.faq-corps {
	padding-block: var(--space-3xl, 64px) var(--space-xl, 32px);
}


/* ================================================================
   10. Bandeau CTA « moment douceur » (pleine largeur, sombre)
   ----------------------------------------------------------------
   Pattern synchronise (§0.2-bis) : present sur toutes les pages
   editoriales, jamais dans le tunnel e-commerce. Consomme .overline,
   .titre-section et .btn.
   ================================================================ */

.bandeau-cta {
	position: relative;
	overflow: hidden;
	background: var(--grad-cta, linear-gradient(135deg, #3A3027, #2A2521 60%, #211D19));
	color: var(--surface, #F7F3EC);
	text-align: center;
}

.bandeau-cta__inner {
	position: relative;
	padding-block: var(--space-5xl, 88px);
}

/* Ornement floral en filigrane. */
.bandeau-cta__ornement {
	position: absolute;
	inset-block-start: -90px;
	inset-inline-end: -50px;
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-size: 300px;
	line-height: 1;
	color: rgba(168, 137, 94, 0.1);
	pointer-events: none;
	user-select: none;
}

.bandeau-cta__titre {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-weight: 500;
	font-size: clamp(32px, 4.4vw, 50px);
	line-height: 1.1;
	margin-block: var(--space-m, 16px) var(--space-s, 12px);
}

/* 🔴 Taille FIXE, seule exception a la typographie fluide du theme (§5.4,
   arbitrage du 2026-08-04). La maquette pose 15px ; « --t-base » vaut
   clamp(15px, 1.1vw, 16px) et atteint donc 16px au-dela de ~1365px de large.
   Les deux coincidaient sur ecran moyen, divergeaient de 6% sur grand ecran.
   Fidelite a la maquette retenue (§0.1) : la valeur est figee ici, et NULLE
   PART ailleurs dans la feuille. */
.bandeau-cta__texte {
	max-width: 46ch;
	margin-inline: auto;
	margin-block: 0 var(--space-xl, 32px);
	font-size: 15px;
	line-height: 1.6;
	color: rgba(247, 243, 236, 0.7);
}

.bandeau-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-m, 16px);
	justify-content: center;
	align-items: center;
}

/* 🔴 Bouton plein DU BANDEAU CTA — sequence de la maquette (arbitrage du
   2026-08-04). Ailleurs sur le site, le bouton garde l'arbitrage contraste de
   la Phase 9 (or profond + texte creme, cf. §3 en tete de feuille) : la portee
   est volontairement limitee a « .bandeau-cta ».

   Pourquoi c'est compatible AA (§21) : l'arbitrage Phase 9 visait le couple
   CREME SUR OR (3,09:1, insuffisant). Ici la maquette pose ENCRE sur or, qui
   mesure 4,65:1 — au-dessus du seuil de 4,5:1 exige par un libelle de 14px en
   capitales. Le survol (encre sur creme) est trivialement conforme.

   Le contour « Nous contacter » suit son propre arbitrage (bloc ci-dessous,
   2026-08-24) : le gris #cccccc et la largeur figee de la maquette restent
   ecartes comme une retouche accidentelle du fichier. */
.bandeau-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--or, #A8895E);
	color: var(--ink, #2A2521);
}

.bandeau-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.bandeau-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	background-color: var(--surface, #F7F3EC);
	color: var(--ink, #2A2521);
}

/* 🔴 Bouton contour DU BANDEAU CTA « Nous contacter » — arbitrage du
   2026-08-24, il remplace la neutralite decrite ci-dessus. Trois exigences :

   1. MEME GABARIT que « Prendre rendez-vous » a sa gauche. La variation de
      style « outline » du core repose son propre padding en « em »
      (.667em / 1.333em), qui ecrase celui de « theme.json » (elements.button)
      et rend le contour visiblement plus petit que le bouton plein. On
      restitue donc les jetons d'espacement du standard (§5.1) : aucune valeur
      en dur, on relit les presets generes par « theme.json ».
   2. REPOS = pave clair (creme sur fond sombre du bandeau), libelle encre.
      Contraste encre #2A2521 sur creme #F7F3EC = 13,9:1 (§21, largement AA).
   3. SURVOL = inversion en contour pur : fond transparent, bordure et libelle
      creme sur le degrade sombre du bandeau (creme sur #2A2521 = 13,9:1).

   La finesse (bordure 1px, graisse 300) n'est PAS repetee ici : elle vient de
   la variation « outline » declaree dans « theme.json » (styles.blocks.
   core/button.variations.outline), source unique des jetons (§5.1). Aucune
   classe de prereglage n'est posee sur le bloc — comme pour le bouton plein
   voisin, la couleur est pilotee par la section, ce qui evite d'avoir a
   surencherir sur les « !important » des classes « has-*-color » de WordPress. */
.bandeau-cta .wp-block-button.is-style-outline .wp-block-button__link {
	padding-block: var(--wp--preset--spacing--m, 16px);
	padding-inline: var(--wp--preset--spacing--xl, 32px);
	background-color: var(--surface, #F7F3EC);
	border-color: var(--surface, #F7F3EC);
	color: var(--ink, #2A2521);
}

.bandeau-cta .wp-block-button.is-style-outline .wp-block-button__link:hover,
.bandeau-cta .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: transparent;
	border-color: var(--surface, #F7F3EC);
	color: var(--surface, #F7F3EC);
}


/* ================================================================
   10-bis. Bande « carte cadeau » claire, deux colonnes
   ----------------------------------------------------------------
   Variante EDITORIALE de la mise en avant carte cadeau (maquette
   Boutique) : fond surface accentuee, discours a gauche, visuel a
   droite. Le bandeau sombre centre (.bandeau-cta--cadeau) reste la
   variante des pages editoriales. Les deux consomment .overline,
   .btn/boutons core et .lien-souligne — aucun style reinvente (§5.5).
   ================================================================ */

.bandeau-cadeau {
	background: var(--surface-2, #EDE5D8);
	border-block: 1px solid var(--line, #E0D5C4);
	padding-block: var(--space-4xl, 84px);
}

.bandeau-cadeau__titre {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-weight: 500;
	font-size: var(--t-h2, clamp(30px, 3.8vw, 44px));
	line-height: 1.1;
	color: var(--ink, #2A2521);
	margin-block: var(--space-m, 16px) 0;
}

.bandeau-cadeau__texte {
	max-width: 50ch;
	margin-block: var(--space-l, 20px) var(--space-xl, 28px);
	font-size: var(--t-base, 16px);
	line-height: 1.75;
	color: var(--ink-soft, #5C534A);
}

/* Rangee d'actions : bouton plein + lien souligne alignes. */
.wp-block-group.bandeau-cadeau__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-m, 16px);
}

.bandeau-cadeau__lien {
	margin: 0;
}

/* Visuel : cadre arrondi, hauteur minimale, image en couverture. */
.bandeau-cadeau__visuel {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-l, 14px);
}

.bandeau-cadeau__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
}

@media (max-width: 781px) {
	.bandeau-cadeau {
		padding-block: var(--space-3xl, 64px);
	}

	.bandeau-cadeau__visuel img {
		min-height: 240px;
	}
}


/* ================================================================
   10 bis. Tuile logo (partenaires, marques)
   ----------------------------------------------------------------
   Valeurs de la maquette (Accueil.dc.html, bandeau « Nos marques
   partenaires ») : cadre 4/3, fond surface, filet beige, logo
   desature au repos, couleur + souleve au survol. Definie ICI et
   pas dans le bloc « idouceur/partenaires » (§5.5) : le role
   « vignette de logo » resservira (page equipe, page a propos).

   Le survol ne concerne que la version LIEN : une tuile inerte qui
   se souleve promet une interaction qui n'existe pas (§21).
   ================================================================ */

.tuile-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: var(--space-l, 20px);
	background: var(--surface, #F7F3EC);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-s, 4px);
	color: inherit;
	text-decoration: none;
	filter: grayscale(1);
	opacity: 0.78;
	transition: filter 0.4s var(--ease), opacity 0.4s var(--ease),
		transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.tuile-logo img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	/* Fond du logo fondu dans la tuile sans detourage prealable. */
	mix-blend-mode: multiply;
}

/* Repli quand le partenaire n'a pas encore de logo : son nom, dans la
   police de titre — jamais une tuile vide (§27). */
.tuile-logo__nom {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-size: var(--t-h4, 22px);
	line-height: 1.15;
	text-align: center;
	color: var(--ink-soft, #5C534A);
}

.tuile-logo--lien:hover,
.tuile-logo--lien:focus-visible {
	filter: grayscale(0);
	opacity: 1;
	transform: translateY(-3px);
	box-shadow: var(--shadow-soft, 0 14px 38px -26px rgba(42, 37, 33, 0.4));
}


/* ================================================================
   11. Note en etoiles
   ================================================================ */

.note-etoiles {
	color: var(--or, #A8895E);
	letter-spacing: 2px;
	line-height: 1;
}

.note-etoiles--grand {
	letter-spacing: 3px;
	font-size: var(--t-lead, 20px);
}


/* ================================================================
   12. Revelation au defilement (data-reveal)
   ----------------------------------------------------------------
   Etat de base des sections revelees au scroll ; le JS ajoute
   .est-visible quand la section entre dans le viewport. Respect strict
   de prefers-reduced-motion (§21) : aucune animation pour ces usagers.
   ================================================================ */

[data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

[data-reveal].est-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	/* Seule la GRANDE revelation de section (fondu + montee pleine hauteur
	   au defilement) est neutralisee pour les usagers sensibles au
	   mouvement (§21 / WCAG 2.3.3). Les micro-interactions (survols de
	   boutons/liens/cartes, accordeon, slider au clic) restent : ce ne sont
	   pas des mouvements vestibulaires — et c'est la « douceur » attendue. */
	[data-reveal],
	[data-reveal].est-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* ================================================================
   13. Douceur des interactions — transitions globales (§5.5, §21)
   ----------------------------------------------------------------
   theme.json pose les couleurs de survol des boutons/liens core mais ne
   peut PAS declarer de transition (schema limite) : sans cette couche,
   chaque hover est instantane (« brut »). On pose ici, UNE SEULE FOIS, la
   douceur de toutes les interactions (courbe --ease), pour que les
   boutons/liens core s'animent exactement comme .btn.

   🔒 Ces regles sont TOUJOURS actives (pas de garde no-preference) : un
   fondu de couleur ou un leger souleve de 2px ne sont pas des mouvements
   vestibulaires ; seule la revelation de section (ci-dessus) respecte
   prefers-reduced-motion. Sinon toute la douceur disparaissait des qu'un
   usager (ou l'OS) activait « animations reduites » — cause des rendus
   « bruts » constates en recette.
   ================================================================ */

/* Boutons core (RDV, CTA, is-style-outline, recherche) = meme douceur que .btn. */
.wp-block-button__link,
.wp-element-button,
.wp-block-search__button {
	transition: background-color 0.45s var(--ease), color 0.45s var(--ease),
		border-color 0.45s var(--ease), transform 0.45s var(--ease),
		box-shadow 0.45s var(--ease);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--shadow-btn, 0 18px 50px -22px rgba(0, 0, 0, 0.6));
}

/* Reprise de specificite sur la finesse du contour (arbitrage 2026-08-24).
   « theme.json » declare la variation « outline » (styles.blocks.core/button.
   variations.outline) et WordPress l'emet en
   « :root :where(.wp-block-button.is-style-outline--N .wp-block-button__link) »,
   dont la specificite vaut 0-1-0 (« :where() » n'en apporte aucune). Or la
   variation du core pose le RACCOURCI « border: 2px solid » en 0-2-0 : il
   gagne et rend la declaration de « theme.json » inoperante sur la largeur.
   On reexprime donc la seule largeur ici, en ALIAS du jeton (§5.1) — la
   valeur reste unique, dans « theme.json » (custom.trait.contour). La graisse
   300 de la variation, elle, passe sans reprise : le core ne la touche pas. */
.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: var(--wp--custom--trait--contour, 1px);
}

/* Boutons « contour » (is-style-outline) : le core ne pose AUCUN effet de
   survol -> on le pose, remplissage doux coherent avec .btn--contour.
   Deux contextes : defaut (texte encre, fond clair) -> remplit en encre ;
   sur fond sombre (texte creme via has-surface-color) -> remplit en creme. */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--ink, #2A2521);
	border-color: var(--ink, #2A2521);
	color: var(--bg, #FBF8F3);
}

/* 🔴 « !important » ASSUME et strictement borne (recette du 2026-08-04).
   WordPress emet ses classes de couleur de prereglage avec « !important » :
   « .has-surface-color { color: var(--wp--preset--color--surface) !important } ».
   Sans surenchere, le libelle reste creme sur le remplissage creme du survol —
   bouton illisible, defaut constate sur « Nous contacter » du bandeau CTA.
   Aucune specificite ne peut battre un « !important » : c'est le seul cas de la
   feuille ou il est justifie. Il ne porte QUE sur la couleur de texte au survol
   d'un bouton contour deja colore par une classe de prereglage. */
.wp-block-button.is-style-outline .wp-block-button__link.has-surface-color:hover,
.wp-block-button.is-style-outline .wp-block-button__link.has-surface-color:focus-visible {
	background-color: var(--surface, #F7F3EC);
	border-color: var(--surface, #F7F3EC);
	color: var(--ink, #2A2521) !important;
}

/* Liens de prose et d'interface (hors boutons) : fondu de couleur.
   :where() garde une specificite nulle => n'ecrase jamais une regle plus
   ciblee (nav, fil d'ariane...). */
a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
		background-color 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* Liens du bloc Navigation (en-tete + pied de page). */
.wp-block-navigation-item__content {
	transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* Icones sociales : leger souleve au survol/focus. */
.wp-block-social-link {
	transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}

.wp-block-social-link:hover,
.wp-block-social-link:focus-within {
	transform: translateY(-2px);
}

/* Cartes : transition prete pour tout eveil au survol (coherente .carte--lien). */
.carte {
	transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease),
		border-color 0.5s var(--ease);
}

/* Champ de recherche : focus adouci. */
.wp-block-search__input {
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}


/* ================================================================
   14. Accessibilite — focus visible & lien d'evitement (§21)
   ----------------------------------------------------------------
   RGAA 4.x / WCAG 2.1 AA, critere 2.4.7 : tout element atteignable au
   clavier doit montrer un focus VISIBLE. theme.json ne peut pas declarer
   d'outline (schema limite) et les composants ne stylaient que .btn : le
   reste du site (liens editoriaux, champs, resumes d'accordeon, blocs
   core, formulaires WooCommerce) retombait sur l'anneau par defaut du
   navigateur — invisible sur nos fonds creme.

   🔒 Selecteur en :where() = specificite ZERO : cette regle sert de
   plancher et ne prend jamais le pas sur les focus deja dessines
   (.btn:focus-visible, §3), qui restent la reference visuelle.

   🔒 :focus-visible et non :focus — le clic souris ne doit pas dessiner
   d'anneau, seule la navigation clavier le fait apparaitre.
   ================================================================ */

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--or-deep, #876A3C);
	outline-offset: 3px;
	border-radius: var(--r-s, 4px);
}

/* Fonds sombres (bandeau CTA, reassurance, bannieres, tunnel) : l'or
   profond y disparait. Meme anneau, teinte claire — contraste AA des deux
   cotes (§21). */
:where(.section--sombre, .cta-douceur, .reassurance, .banniere--sombre, .fil-ariane--sombre)
	:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline-color: var(--or-pale, #E6CBA0);
}

/* ----------------------------------------------------------------
   Lien d'evitement « Aller au contenu »
   ----------------------------------------------------------------
   Les themes de blocs recoivent le lien du CORE (il cible le <main> du
   gabarit) : on ne le recree pas, on l'habille. Le core imprime SES
   styles en pied de page, donc APRES cette feuille : a specificite egale
   il gagnerait. D'ou la classe racine doublee (idiome du theme, cf.
   boutique.css §8) qui nous rend prioritaires sans !important.
   ---------------------------------------------------------------- */
.skip-link.skip-link.screen-reader-text:focus {
	top: 0;
	left: 0;
	z-index: 100000;
	padding: var(--space-m, 16px) var(--space-xl, 32px);
	background: var(--ink, #2A2521);
	color: var(--bg, #FBF8F3);
	border-radius: 0 0 var(--r-m, 10px) 0;
	box-shadow: var(--shadow-card);
	font-family: var(--ff-text);
	font-size: var(--t-small, 14px);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	outline: 2px solid var(--or-pale, #E6CBA0);
	outline-offset: -6px;
}


/* ================================================================
   15. Ecran d'activation des contenus embarques (RGPD, §19)
   ----------------------------------------------------------------
   Pose a la place de toute iframe tierce par [inc/rgpd.php](../../inc/rgpd.php).
   Il occupe EXACTEMENT la place de l'embarquement qu'il remplace (hauteur
   d'origine reportee en ligne) pour qu'aucun contenu ne saute au clic (§20).

   🔒 Ces regles vivent ici et non dans une feuille dediee : le rendu des
   blocs a lieu apres wp_head, une feuille enqueuee a ce moment-la ne serait
   plus imprimee. Quelques lignes dans composants.css, deja chargee.

   🔒 Le bouton n'invente rien : il porte .btn .btn--sm (§5.5).
   ================================================================ */

.embarque-consentement {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-s, 12px);
	padding: var(--space-xl, 32px);
	text-align: center;
	background: var(--surface-2, #EDE5D8);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-l, 14px);
}

.embarque-consentement__titre {
	margin: 0;
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-size: var(--t-h4, 22px);
	line-height: 1.2;
	color: var(--ink, #2A2521);
}

.embarque-consentement__detail {
	margin: 0;
	max-width: 46ch;
	font-size: var(--t-small, 14px);
	line-height: 1.6;
	color: var(--ink-soft, #5C534A);
}

/* Une fois active, le conteneur ne doit plus rien imposer : l'embarquement
   reprend exactement la mise en page qu'il avait dans le part. */
.embarque-consentement__contenu {
	display: contents;
}


/* ================================================================
   16. Page introuvable (404) — illustration plein cadre + actions
   ----------------------------------------------------------------
   Maquette « 404.dc.html » (verite visuelle §0.1). Ne sont ecrites ici
   que les regles REELLEMENT specifiques a cet ecran (§5.5) : la hauteur
   de l'illustration, son fondu vers le fond de page, l'ornement et la
   phrase italique. Tout le reste consomme les composants existants —
   rythme .section--compact, .overline, boutons core (theme.json), chips
   pour les liens rapides (§5 ci-dessus).
   ================================================================ */

/* Bande d'illustration : le fondu du bas la raccorde au fond de page,
   exactement comme le degrade de la maquette. */
.erreur-404__illustration {
	position: relative;
	background: var(--surface, #F7F3EC);
}

.erreur-404__illustration::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(247, 243, 236, 0) 58%,
		rgba(247, 243, 236, 0.55) 84%,
		var(--surface, #F7F3EC) 100%
	);
}

/* La figure du bloc image ne doit imposer ni marge ni largeur : c'est la
   bande qui cadre, l'image remplit. */
.erreur-404__visuel {
	margin: 0;
	line-height: 0;
}

.erreur-404__visuel img {
	display: block;
	width: 100%;
	height: 60vh;
	object-fit: cover;

	/* Cadrage vertical de la maquette : on garde le « 404 » et l'arche
	   dans le champ quelle que soit la hauteur. */
	object-position: center 34%;
}

/* Ornement : trait court dore au-dessus de la phrase (separateur core,
   donc annonce comme une separation aux lecteurs d'ecran).
   Selecteur aligne sur celui du core (`:not(.is-style-wide):not(.is-style-dots)`,
   qui impose une largeur de 100px) : sans cette specificite, la largeur de
   54px de la maquette serait perdue. */
.wp-block-separator.erreur-404__ornement:not(.is-style-wide):not(.is-style-dots) {
	width: 54px;
	max-width: 54px;
	height: 1px;
	margin-inline: auto;
	margin-block: 0 var(--space-l, 26px);
	border: 0;
	background: var(--or-soft, #C3B097);
	opacity: 1;
}

/* Phrase de reconfort : italique Cormorant, meme cran typographique que
   les autres accroches editoriales (--t-h4). */
.erreur-404__phrase {
	max-width: 30ch;
	margin-inline: auto;
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-style: italic;
	font-size: var(--t-h4, clamp(20px, 2.2vw, 26px));
	line-height: 1.4;
	color: var(--ink, #2A2521);
}

.erreur-404__boutons {
	margin-block-start: var(--space-xl, 32px);
}

/* Liens rapides : filet de separation puis rangee de pilules. */
.erreur-404__liens {
	margin-block-start: var(--space-2xl, 48px);
	padding-block-start: var(--space-xl, 32px);
	border-block-start: 1px solid var(--line, #E0D5C4);
}

.erreur-404__pilules p {
	margin: 0;
}

/* Tablette / mobile : l'illustration se resserre et remonte son cadrage
   (valeurs de la maquette : 52vh puis 50vh, focus 28 %). */
@media (max-width: 1159px) {

	.erreur-404__visuel img {
		height: 52vh;
	}
}

@media (max-width: 767px) {

	.erreur-404__visuel img {
		height: 50vh;
		object-position: center 28%;
	}
}


/* ================================================================
   17. Page « Vos besoins » — banniere, cartes larges, orientation
       et entree express
   ----------------------------------------------------------------
   Composition « idouceur/vos-besoins ». Les briques deja definies
   plus haut sont reutilisees telles quelles (.carte, .carte--besoin,
   .chip, .overline--sombre, .chapo--sombre, .section--sombre) : on ne
   pose ici QUE ce que la page ajoute (§5.5).
   ================================================================ */

/* ----------------------------------------------------------------
   17.1 Banniere d'en-tete
   ----------------------------------------------------------------
   Meme grammaire que les bannieres de boutique/compte (boutique.css
   §3.1), mais celle-ci doit vivre dans « composants.css » : la feuille
   « boutique.css » n'est enqueue que sur les contextes WooCommerce
   (inc/woocommerce.php) et ne se charge donc PAS sur /vos-besoins/.

   La banniere de la carte de soins (« .soins-entete », composition
   « idouceur/carte-soins-entete », ajoutee le 2026-08-24) partage la
   MEME definition, pour la meme raison : /soins/ n'est pas un contexte
   WooCommerce. Celle de la page equipe (« .equipe-entete », composition
   « idouceur/equipe », ajoutee le 2026-08-25) la rejoint : meme grammaire
   de heros sombre, meme raison de perimetre. Celle de la page contact
   (« .contact-entete », composition « idouceur/contact », correctif du
   2026-09-01) la rejoint a son tour. Selecteurs groupes, aucun style
   recopie (§5.5).
   ---------------------------------------------------------------- */
.besoins-entete .wp-block-cover__inner-container,
.soins-entete .wp-block-cover__inner-container,
.equipe-entete .wp-block-cover__inner-container,
.contact-entete .wp-block-cover__inner-container {
	text-align: center;
}

/* Le heros de la FICHE soin (« .soin-heros », correctif du 2026-09-01)
   rejoint les rythmes et la typographie ci-dessous, mais PAS le centrage
   ci-dessus : sa maquette le veut fer a gauche, discours et boutons alignes
   sur la colonne de texte. Il est donc absent du groupe « text-align » et
   present dans les trois suivants (§5.5 : on partage ce qui est identique,
   on ne recopie rien). */
.besoins-entete .fil-ariane,
.soins-entete .fil-ariane,
.equipe-entete .fil-ariane,
.contact-entete .fil-ariane,
.soin-heros .fil-ariane {
	margin-block-end: var(--space-l, 22px);
}

.besoins-entete .overline,
.soins-entete .overline,
.equipe-entete .overline,
.contact-entete .overline,
.soin-heros .overline {
	margin-block-end: var(--space-m, 18px);
}

.besoins-entete__titre,
.soins-entete__titre,
.equipe-entete__titre,
.contact-entete__titre,
.soin-heros__titre {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-weight: 500;
	font-size: var(--t-h1, clamp(40px, 5.4vw, 66px));
	line-height: 1.05;
	letter-spacing: 0.005em;
	margin-block: 0;
}

.besoins-entete .chapo--sombre,
.soins-entete .chapo--sombre,
.equipe-entete .chapo--sombre,
.contact-entete .chapo--sombre {
	margin-inline: auto;
	margin-block-start: var(--space-l, 24px);
}

/* ----------------------------------------------------------------
   17.2 Etiquettes de carte (chips « tag »)
   ----------------------------------------------------------------
   La base pilule vient de §5 (selecteur « .carte__tags p »). Ici, seuls
   la rangee et le calage vertical dans la carte. Le « margin-block-start:
   auto » sur le lien pousse l'appel a l'action en pied de carte, quelle
   que soit la longueur du texte : les cartes d'une meme rangee gardent
   leurs liens alignes.
   ---------------------------------------------------------------- */
.carte__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs, 8px);
	margin-block: 0 var(--space-l, 20px);
}

.carte__tags p {
	margin: 0;
}

.carte--besoin .carte__lien {
	margin-block-start: auto;
}

/* ----------------------------------------------------------------
   17.3 Carte large (visuel a gauche, discours a droite)
   ----------------------------------------------------------------
   Declinaison horizontale de « .carte--besoin » pour la seconde rangee
   de la grille. Le media perd sa hauteur fixe : il couvre la colonne.
   ---------------------------------------------------------------- */
.carte--large {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
}

.carte--large .carte__media,
.carte--besoin.carte--large .carte__media {
	height: 100%;
	min-height: 200px;
}

.carte--large .carte__corps {
	justify-content: center;
	padding: var(--space-xl, 30px) var(--space-xl, 28px);
}

/* Seconde rangee de la grille : meme gouttiere que la premiere. */
.grille-besoins--duo {
	margin-block-start: var(--space-l, 22px);
}

/* ----------------------------------------------------------------
   17.4 Bande d'orientation (fond sombre, discours + action)
   ---------------------------------------------------------------- */
.besoins-orientation {
	border-block-start: 1px solid rgba(247, 243, 236, 0.09);
}

.besoins-orientation .wp-block-columns {
	align-items: center;
}

.besoins-orientation__titre {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-weight: 500;
	font-size: var(--t-h2, clamp(28px, 3.6vw, 40px));
	line-height: 1.12;
	margin-block: 0;
}

.besoins-orientation__texte {
	max-width: 52ch;
	margin-block: var(--space-m, 18px) 0;
	line-height: 1.7;
	color: rgba(247, 243, 236, 0.78);
}

/* Actions de la bande : empilees et de meme largeur, calees a droite sur
   desktop (maquette : colonne flex, gouttiere 14px). Le bouton primaire est
   creme plein — l'or profond du theme disparaitrait sur l'encre. */
.besoins-orientation__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-m, 14px);
	align-items: stretch;
	max-width: 320px;
	margin-inline-start: auto;
}

.besoins-orientation__actions .wp-block-button__link {
	display: block;
	text-align: center;
}

/* Sous 782px les colonnes s'empilent : les actions reprennent toute la
   largeur et se recalent a gauche, dans le fil du discours. */
@media (max-width: 781px) {

	.besoins-orientation__actions {
		max-width: none;
		margin-inline-start: 0;
	}
}

/* ----------------------------------------------------------------
   17.5 Entree express (nuages de chips « ma peau » / « mon moment »)
   ---------------------------------------------------------------- */
.besoins-express__label {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-style: italic;
	font-size: var(--t-h5, 21px);
	color: var(--or-deep, #876A3C);
	margin-block: 0 var(--space-m, 18px);
}

.nuage-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s, 11px);
}

.nuage-chips p {
	margin: 0;
}

/* ----------------------------------------------------------------
   17.6 Adaptations — la carte large se replie en carte verticale
   ---------------------------------------------------------------- */
@media (max-width: 781px) {

	.carte--large {
		grid-template-columns: 1fr;
	}

	.carte--large .carte__media,
	.carte--besoin.carte--large .carte__media {
		height: 220px;
		min-height: 0;
	}
}


/* ================================================================
   18. Article d'actualite (« single ») — heros, corps, pied
   ----------------------------------------------------------------
   Maquette « Actualite — detail ». Le modele est 100 % core
   (templates/single.html) : core/cover en visuel mis en avant,
   core/post-title, core/post-content, core/buttons. Cette section ne
   pose QUE ce que la charte ajoute au core, jamais une valeur qui
   existe deja en jeton (§5.1, §5.5).
   ================================================================ */

/* ----------------------------------------------------------------
   18.1 Heros — visuel plein cadre, degrade, meta, titre, chapo
   ----------------------------------------------------------------
   Meme grammaire que les bannieres « boutique » / « vos besoins »
   (§17.1), a deux differences pres : le visuel n'est pas une image du
   theme mais l'image mise en avant de l'article (core/cover en mode
   « useFeaturedImage »), et le voile est un DEGRADE — plus clair en
   haut pour laisser respirer la photo, plus dense en bas pour porter
   le titre. Le degrade vit dans l'attribut du bloc (editable en Site
   Editor), pas ici.
   ---------------------------------------------------------------- */
.actu-entete {
	padding-block: var(--space-3xl, 64px);
	/* Hauteur proportionnelle a la largeur d'ecran : le bloc cover impose
	   min-height:600px en style inline, d'ou le !important. Sur grand ecran
	   la bande visible de la photo reste plus large (moins de tetes coupees),
	   sur mobile le cadrage horizontal est moins serre. */
	min-height: clamp(440px, 44vw, 800px) !important;
}

/* A partir de la tablette paysage, on ne descend jamais sous les 600px
   d'origine : la hauteur ne fait que grandir sur les grands ecrans. */
@media (min-width: 1024px) {
	.actu-entete {
		min-height: clamp(600px, 44vw, 800px) !important;
	}
}

.actu-entete .wp-block-cover__inner-container {
	text-align: center;
}

.actu-entete .fil-ariane {
	margin-block-end: var(--space-l, 22px);
}

/* Rangee « categorie · date · duree de lecture ». */
.actu-entete__meta {
	justify-content: center;
	align-items: center;
	gap: var(--space-s, 10px);
	margin-block-end: var(--space-l, 20px);
}

/* La categorie devient une pilule doree : c'est le seul element colore
   du heros, il signe la rubrique. core/post-terms rend un lien par
   terme — on habille le lien, pas le conteneur. */
.actu-entete__badge {
	font-size: 0;
	line-height: 1;
}

.actu-entete__badge a {
	display: inline-block;
	font-family: var(--ff-text, 'Jost', sans-serif);
	font-size: var(--t-overline, 11px);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink, #2A2521);
	background: var(--or-pale, #E6CBA0);
	border-radius: var(--r-pill, 999px);
	padding: 5px 13px;
}

.actu-entete__badge a:hover,
.actu-entete__badge a:focus-visible {
	background: var(--surface, #F7F3EC);
	color: var(--ink, #2A2521);
}

.actu-entete__date,
.actu-entete__lecture {
	font-size: var(--t-small, 13px);
	color: rgba(251, 248, 243, 0.8);
	margin: 0;
}

/* Separateur « · » entre la date et la duree de lecture : pose en CSS
   pour qu'il DISPARAISSE avec la duree quand l'article n'a pas encore
   de contenu (la liaison rend alors une chaine vide). */
.actu-entete__lecture:not(:empty)::before {
	content: '·';
	margin-inline-end: var(--space-xs, 8px);
	color: rgba(251, 248, 243, 0.5);
}

/* 🔴 Meme correctif que .titre-page (§2) : un « h1 » nu s'en remet a
   « styles.elements.h1 » de theme.json, reglage qui n'atteint pas
   l'element sur ce site — le titre d'article sortait a la taille du
   corps (constate en recette le 2026-08-24). La classe porte donc
   l'alias du jeton. La couleur, elle, vient de l'attribut « bg » du
   bloc : elle reste editable en Site Editor. */
.actu-entete__titre {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-weight: 500;
	font-size: var(--t-h1, clamp(36px, 4.8vw, 58px));
	line-height: 1.06;
	letter-spacing: 0.005em;
	margin-block: 0;
}

.actu-entete__chapo {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-style: italic;
	font-size: var(--t-lead, 19px);
	line-height: 1.6;
	color: rgba(251, 248, 243, 0.9);
	max-width: 52ch;
	margin-block: var(--space-l, 22px) 0;
	margin-inline: auto;
}

/* core/post-excerpt enveloppe le texte dans un « p » : la classe porte
   sur le conteneur, la marge doit tomber sur l'enfant. */
.actu-entete__chapo p {
	margin-block: 0;
}

/* ----------------------------------------------------------------
   18.2 Corps de lecture
   ----------------------------------------------------------------
   Colonne de 720px posee par le modele. Ces regles habillent le
   contenu SAISI en admin (core/paragraph, core/heading, core/list,
   core/quote) : le client ecrit normalement, la charte s'applique.
   Portee strictement bornee a « .article-corps » pour ne pas deborder
   sur les pages et les fiches soin.

   🔴 Les respirations haute et basse de la colonne sont posees ICI, pas
   en attribut de bloc (recette du 2026-08-24) : « settings.spacing.padding »
   n'est pas ouvert dans theme.json, un « style.spacing.padding » ecrit sur
   un core/group ne survit donc pas au rendu. Meme raison pour .actu-pied
   (§18.3) — c'est ce qui manquait sous la rangee de partage.
   ---------------------------------------------------------------- */
.article-corps {
	padding-block: var(--space-3xl, 64px) var(--space-l, 24px);
}

.article-corps p {
	font-size: var(--t-base, 17.5px);
	line-height: 1.85;
	color: var(--ink-soft, #5C534A);
	margin-block: 0 var(--space-l, 22px);
}

/* Attaque : le premier paragraphe est plus grand et plus sombre —
   c'est lui qui accroche la lecture (maquette). */
.article-corps .wp-block-post-content > p:first-of-type {
	font-size: var(--t-lead, 19px);
	line-height: 1.8;
	color: var(--ink, #2A2521);
}

.article-corps :is(h2, h3) {
	margin-block: var(--space-2xl, 40px) var(--space-m, 16px);
}

.article-corps a:not(.wp-element-button) {
	color: var(--or-deep, #876A3C);
	text-decoration: none;
	border-block-end: 1px solid var(--or-soft, #C3B097);
}

.article-corps a:not(.wp-element-button):hover,
.article-corps a:not(.wp-element-button):focus-visible {
	color: var(--ink, #2A2521);
	border-color: var(--ink, #2A2521);
}

/* Listes a puce « ❀ » — la fleur de la marque remplace le disque. */
.article-corps ul {
	list-style: none;
	padding-inline-start: 0;
	margin-block: 0 var(--space-l, 22px);
}

.article-corps ul li {
	position: relative;
	font-size: var(--t-base, 17px);
	line-height: 1.7;
	color: var(--ink-soft, #5C534A);
	padding-block: 7px;
	padding-inline-start: var(--space-l, 26px);
}

.article-corps ul li::before {
	content: '❀';
	position: absolute;
	inset-inline-start: 0;
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	color: var(--or, #A8895E);
}

/* Citation : filet dore a gauche, italique de titrage. */
.article-corps blockquote {
	border-inline-start: 3px solid var(--or, #A8895E);
	padding-block: var(--space-xs, 8px);
	padding-inline: var(--space-l, 26px) 0;
	margin-block: var(--space-xl, 34px);
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-style: italic;
	font-size: var(--t-h4, 24px);
	line-height: 1.45;
	color: var(--ink, #2A2521);
}

.article-corps blockquote p {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin-block-end: 0;
}

/* ----------------------------------------------------------------
   18.3 Pied d'article — rappel de reservation + partage
   ---------------------------------------------------------------- */
.actu-pied {
	padding-block: var(--space-l, 24px) var(--space-4xl, 80px);
}

.actu-cta {
	background: var(--bg, #FBF8F3);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-l, 14px);
	padding: var(--space-xl, 34px);
	gap: var(--space-l, 24px);
}

.actu-cta__texte {
	flex: 1 1 280px;
}

.actu-cta__titre {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-weight: 600;
	font-size: var(--t-h4, 23px);
	line-height: 1.2;
	color: var(--ink, #2A2521);
	margin-block: 0 var(--space-xs, 5px);
}

.actu-cta__phrase {
	font-size: var(--t-small, 14.5px);
	line-height: 1.6;
	color: var(--ink-soft, #5C534A);
	max-width: 42ch;
	margin-block: 0;
}

/* Action principale du pave : ENCRE, comme le « Reserver ce soin » de
   la maquette — le dore de theme.json reste celui des CTA de section,
   celui-ci doit trancher sur le fond creme du pave. */
.actu-cta__bouton .wp-block-button__link {
	background-color: var(--ink, #2A2521);
	color: var(--surface, #F7F3EC);
}

.actu-cta__bouton .wp-block-button__link:hover,
.actu-cta__bouton .wp-block-button__link:focus-visible {
	background-color: var(--or-deep, #876A3C);
	color: var(--surface, #F7F3EC);
}

/* Rangee de partage : filet de separation, libelle, trois pastilles. */
.partage {
	align-items: center;
	gap: var(--space-m, 14px);
	margin-block-start: var(--space-l, 26px);
	padding-block-start: var(--space-l, 24px);
	border-block-start: 1px solid var(--line, #E0D5C4);
}

.partage__label {
	color: var(--ink-xsoft, #746F68);
	margin-block: 0;
}

.partage__liens {
	gap: var(--space-s, 10px);
}

.partage__lien .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	font-size: var(--t-small, 14px);
	letter-spacing: 0;
	text-transform: none;
	background-color: transparent;
	color: var(--ink, #2A2521);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-pill, 999px);
}

.partage__lien .wp-block-button__link:hover,
.partage__lien .wp-block-button__link:focus-visible {
	background-color: var(--ink, #2A2521);
	border-color: var(--ink, #2A2521);
	color: var(--surface, #F7F3EC);
	transform: none;
	box-shadow: none;
}

/* ----------------------------------------------------------------
   18.4 Bande « A lire aussi »
   ---------------------------------------------------------------- */
.actu-similaires__actions {
	margin-block-start: var(--space-2xl, 44px);
}

/* Pilule « Toutes les actualites » — meme gabarit que .btn--pill (§3),
   applique ici a un bouton core « contour ». */
.actu-similaires__lien .wp-block-button__link {
	min-height: 0;
	padding-block: var(--space-m, 14px);
	padding-inline: var(--space-xl, 30px);
	font-size: 13px;
	letter-spacing: 0.18em;
	border-radius: var(--r-pill, 999px);
	border-color: var(--or-soft, #C3B097);
}

.actu-similaires__lien .wp-block-button__link:hover,
.actu-similaires__lien .wp-block-button__link:focus-visible {
	transform: none;
	box-shadow: none;
}


/* ================================================================
   19. Page « L'Equipe » — presentation « notre maison » & engagements
   ----------------------------------------------------------------
   Composition « idouceur/equipe ». La banniere vit en §17.1 (grammaire
   commune des heros sombres) et la grille des membres appartient au
   bloc « idouceur/equipe » (blocks/src/equipe/style.scss). Ne restent
   ici que les deux sections editoriales de la maquette (§5.5).
   ================================================================ */

/* Cadre du visuel de la bande « Notre maison » (core/media-text). Les
   deux maquettes qui portent cette bande — accueil et equipe — encadrent
   le visuel de la meme facon : rayon « l », debordement masque. Une
   seule definition, partagee par les deux compositions. */
.presentation-maison .wp-block-media-text__media {
	border-radius: var(--r-l, 14px);
	overflow: hidden;
}

/* Variante PORTRAIT (page equipe) : cadre 4/5 borde, la ou l'accueil
   laisse le visuel prendre la hauteur de la colonne de texte.
   Le calage de l'image est repose ici car « aspect-ratio » sur la figure
   ne contraint pas l'image que core y pose (largeur 100 %, hauteur auto). */
.presentation-maison--portrait .wp-block-media-text__media {
	aspect-ratio: 4 / 5;
	border: 1px solid var(--line, #E0D5C4);
}

.presentation-maison--portrait .wp-block-media-text__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ⚠️ Ecart au standard assume, demande explicite du 2026-08-25 : le titre
   des quatre cartes d'engagement est fige a 24 px, une valeur qui n'est PAS
   un token (§5.5 veut l'echelle de theme.json). Elle tombe entre « h4 »
   (20→26 px) et le rendu voulu, et n'a de sens que dans cette section : la
   regle est donc portee par .grille-engagements et non par la declinaison
   .carte--valeur, qui garde son rang de token pour tout autre emploi.
   Si ce corps ressert ailleurs, il devra devenir un token. */
.grille-engagements .carte__titre {
	font-size: 24px;
}

/* Grille des quatre engagements. core/columns tient les quatre colonnes
   au-dela de 1160 px et retombe en pile sous 782 px (comportement natif) ;
   entre les deux, la maquette veut DEUX colonnes — c'est la seule chose
   que ce modificateur ajoute. Le « flex-basis » l'emporte sur celui que
   core calcule sur chaque colonne, d'ou la valeur explicite. */
@media (min-width: 782px) and (max-width: 1159px) {
	.grille-engagements.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap;
	}

	.grille-engagements.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - (var(--wp--style--block-gap, 24px) / 2));
		flex-grow: 0;
	}
}


/* ================================================================
   20. Page « Informations legales » — sommaire collant + documents
   ----------------------------------------------------------------
   Composition « idouceur/mentions », modele « mentions-legales.html ».
   La maquette « Mentions-legales.dc.html » ouvre sur le MEME bandeau
   clair que « FAQ » et « Actualites » (.bandeau-titre, §1), puis pose
   deux colonnes : un sommaire collant de 210 px et une colonne de
   lecture de 680 px.

   🔴 Arbitrage du 2026-08-25 (valide avant ecriture). La maquette
   permute les quatre documents par ONGLETS JavaScript. Le portage FSE
   les EMPILE et le sommaire pointe des ANCRES :
	 - les quatre documents restent des blocs core entierement editables
	   en admin — l'echelle §6.0.0 s'arrete au niveau 3 (pattern), aucun
	   bloc custom ni JS de theme a maintenir ;
	 - les liens deja poses dans le pied de page (#confidentialite,
	   #cookies, #cgv) tombent juste, sans mecanique a synchroniser ;
	 - l'etat « actif » de l'onglet est rendu SANS JS par « :target ».

   🔒 Les respirations sont posees ICI et non en « style.spacing » dans
   le markup : « settings.spacing.padding » et « .margin » ne sont pas
   ouverts dans theme.json, un espacement ecrit dans le markup de bloc
   ne survit pas au rendu (meme cause que le correctif v1.13.1).
   ================================================================ */

/* Colonne de la page legale : rythme vertical propre, plus resserre
   qu'une section pleine (.section) car la page s'ouvre deja sur le
   bandeau. */
.legal-corps {
	padding-block: var(--space-3xl, 64px) var(--space-2xl, 48px);
}

/* blockGap:0 (§4) => le gouttiere des colonnes est posee ici.
   « align-items: flex-start » est indispensable : sans lui, core etire
   les deux colonnes a la meme hauteur et le « position: sticky » du
   sommaire n'a plus aucune marge de manoeuvre. */
.doc-legal.wp-block-columns {
	align-items: flex-start;
	gap: var(--space-2xl, 44px);
}


/* ----------------------------------------------------------------
   20.1 Sommaire — onglets de la maquette, rendus en liens d'ancre
   ---------------------------------------------------------------- */
.doc-legal__sommaire {
	position: sticky;
	top: var(--space-5xl, 96px);
}

.doc-legal__liens {
	list-style: none;
	padding-inline-start: 0;
	margin-block: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs, 9px);
}

/* Le style porte sur le lien et non sur une classe a poser item par
   item : le client peut ajouter ou retirer une entree dans l'editeur
   sans connaitre le nom d'une classe (§6.0). */
.doc-legal__liens a {
	display: block;
	padding-block: var(--space-s, 13px);
	padding-inline: var(--space-m, 16px);
	font-family: var(--ff-text, 'Jost', sans-serif);
	font-size: var(--t-small, 14px);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.3;
	text-align: start;
	text-decoration: none;
	color: var(--ink-soft, #5C534A);
	background: var(--bg, #FBF8F3);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-m, 8px);
	transition: background 0.3s var(--ease), color 0.3s var(--ease),
		border-color 0.3s var(--ease);
}

.doc-legal__liens a:hover,
.doc-legal__liens a:focus-visible {
	color: var(--ink, #2A2521);
	border-color: var(--or-soft, #C3B097);
}

/* Onglet actif, sans JS. Tant qu'aucune ancre n'est visee, c'est le
   premier document qu'on lit : son entree porte l'etat. Des qu'une
   ancre l'est (clic dans le sommaire, ou lien du pied de page), c'est
   la sienne. Les identifiants cibles sont le contrat deja tenu par
   parts/footer.html — les changer casse les deux endroits. */
.doc-legal:not(:has(:target)) .doc-legal__liens a[href="#mentions"],
.doc-legal:has(#mentions:target) .doc-legal__liens a[href="#mentions"],
.doc-legal:has(#confidentialite:target) .doc-legal__liens a[href="#confidentialite"],
.doc-legal:has(#cookies:target) .doc-legal__liens a[href="#cookies"],
.doc-legal:has(#cgv:target) .doc-legal__liens a[href="#cgv"] {
	color: var(--surface, #F7F3EC);
	background: var(--ink, #2A2521);
	border-color: var(--ink, #2A2521);
}


/* ----------------------------------------------------------------
   20.2 Colonne de lecture — un « article » par document
   ---------------------------------------------------------------- */
.doc-legal__doc {
	max-width: 680px;
	/* Le header est collant : sans cette marge de defilement, l'ancre
	   visee se cale SOUS lui et le titre du document disparait. */
	scroll-margin-block-start: var(--space-5xl, 96px);
}

/* Les documents sont empiles (cf. arbitrage ci-dessus) : un filet les
   separe, la ou la maquette n'en avait pas besoin puisqu'elle n'en
   montrait qu'un a la fois. */
.doc-legal__doc + .doc-legal__doc {
	margin-block-start: var(--space-3xl, 64px);
	padding-block-start: var(--space-3xl, 64px);
	border-block-start: 1px solid var(--line, #E0D5C4);
}

/* Titre de document. La maquette demande clamp(26px, 3.2vw, 34px) :
   c'est le token « h3 » (24 -> 32 px), pas « h2 » (30 -> 44 px) qu'un
   « h2 » nu prendrait. Le niveau semantique reste 2 (le h1 est le titre
   de page, §21/§22) — seule l'echelle visuelle descend d'un cran. */
.doc-legal__doc h2 {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-weight: 600;
	font-size: var(--t-h3, clamp(26px, 3.2vw, 34px));
	line-height: 1.15;
	color: var(--ink, #2A2521);
	margin-block: 0 var(--space-xs, 6px);
}

.doc-legal__doc h3 {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-weight: 600;
	font-size: var(--t-h4, 21px);
	line-height: 1.25;
	color: var(--ink, #2A2521);
	margin-block: var(--space-xl, 30px) var(--space-s, 10px);
}

.doc-legal__doc p {
	font-size: var(--t-base, 15.5px);
	line-height: 1.8;
	color: var(--ink-soft, #5C534A);
	margin-block: 0 var(--space-m, 16px);
}

/* Mise en exergue d'un intitule dans le corps (raison sociale, champ a
   completer) : la graisse de titrage du texte, pas du gras plein. */
.doc-legal__doc :is(strong, b) {
	font-weight: 500;
	color: var(--ink, #2A2521);
}

/* Lien dans le corps : meme traitement que le corps d'article (§18.2),
   dore souligne d'un filet. */
.doc-legal__doc a:not(.wp-element-button) {
	color: var(--or-deep, #876A3C);
	text-decoration: none;
	border-block-end: 1px solid var(--or-soft, #C3B097);
}

.doc-legal__doc a:not(.wp-element-button):hover,
.doc-legal__doc a:not(.wp-element-button):focus-visible {
	color: var(--ink, #2A2521);
	border-color: var(--ink, #2A2521);
}

/* Listes a cadratin « — ». C'est la puce que la maquette pose pour les
   documents legaux, la ou le corps d'article prend la fleur « ❀ »
   (§18.2) : deux contextes de lecture distincts, assumes. */
.doc-legal__doc ul {
	list-style: none;
	padding-inline-start: 0;
	margin-block: 0 var(--space-m, 16px);
}

.doc-legal__doc ul li {
	position: relative;
	font-size: var(--t-base, 15px);
	line-height: 1.7;
	color: var(--ink-soft, #5C534A);
	padding-block: var(--space-xs, 5px);
	padding-inline-start: var(--space-l, 24px);
}

.doc-legal__doc ul li::before {
	content: '—';
	position: absolute;
	inset-inline-start: 0;
	color: var(--or, #A8895E);
}


/* ----------------------------------------------------------------
   20.3 Sous 782 px — core empile les colonnes, le sommaire redevient
   une rangee de pastilles comme dans la maquette mobile.
   ---------------------------------------------------------------- */
@media (max-width: 781px) {
	.doc-legal__sommaire {
		position: static;
	}

	.doc-legal__liens {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.doc-legal__liens li {
		flex: 1 1 auto;
	}

	/* Exception a la demi-echelle mobile (fin de « tokens.css ») : cette
	   marge n'est pas du rythme, c'est la hauteur du header collant
	   (~71 px). Reduite de moitie, l'ancre d'un onglet du sommaire se
	   calerait SOUS le header et le titre du document disparaitrait —
	   exactement le defaut corrige en v1.17.0. On repasse donc la
	   valeur pleine. */
	.doc-legal__doc {
		scroll-margin-block-start: var(--espace-plein-5xl, 96px);
	}
}


/* ================================================================
   21. Champs de formulaire — un seul systeme (§5.5)
   ----------------------------------------------------------------
   Meme filet, meme fond, meme rayon que les champs WooCommerce
   (boutique.css §2) : un champ du formulaire de contact et un champ
   du tunnel se ressemblent trait pour trait. Le composant est defini
   ICI parce qu'il est un ROLE (saisie), pas la propriete d'un bloc.
   ================================================================ */

.champ {
	width: 100%;
	padding: 0.85em 0.95em;
	font-family: var(--ff-text, 'Jost', sans-serif);
	font-size: var(--t-base, 15px);
	font-weight: 300;
	line-height: 1.5;
	color: var(--ink, #2A2521);
	background: var(--bg, #FBF8F3);
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-s, 4px);
	transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}

.champ::placeholder {
	color: var(--ink-xsoft, #A9A298);
	opacity: 1; /* Firefox eclaircit les invites de saisie par defaut. */
}

.champ:focus {
	outline: 2px solid var(--or, #A8895E);
	outline-offset: 1px;
	border-color: var(--or, #A8895E);
	background: var(--surface, #FBF8F3);
}

/* Liste deroulante : chevron dessine en fond (aucune image a charger),
   fleche native retiree pour que le champ reste identique aux autres. */
.champ--select {
	appearance: none;
	padding-inline-end: var(--space-xl, 34px);
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235C534A' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
}

.champ--zone {
	min-height: 148px;
	line-height: 1.6;
	resize: vertical;
}


/* ================================================================
   22. Page « Contact » — formulaire, coordonnees & acces
   ----------------------------------------------------------------
   Maquette « Contact.dc.html ». La page se lit en trois temps :
	 1. un heros identique aux autres bannieres (composition) ;
	 2. formulaire a gauche, cartes de coordonnees a droite ;
	 3. plan d'acces + trois cartes pratiques.

   Rien de neuf cote briques : la carte est .carte (§4), le bouton
   .btn (§3), le champ .champ (§21), l'ecran de consentement du plan
   celui de §15. Ce bloc ne pose que l'agencement et les deux ou trois
   details propres a la page.
   ================================================================ */

/* --- 22.1 Bandeau haut : formulaire + colonne de coordonnees --- */
.contact-grille {
	align-items: flex-start;
}

/* Les deux cartes de la colonne de droite se suivent : le blockGap global
   est a zero (§4), la gouttiere se pose donc ici. */
.contact-coordonnees {
	display: flex;
	flex-direction: column;
	gap: var(--space-m, 18px);
}

.contact-coordonnees .carte {
	border-radius: var(--r-l, 14px);
}

.contact-coordonnees .carte__titre {
	font-size: var(--t-h4, 22px);
	margin-block-end: var(--space-m, 20px);
}

/* Ligne de coordonnee : pictogramme dore, intitule, valeur. Le filet
   separe les lignes, sauf la derniere. */
.coord__ligne {
	display: grid;
	grid-template-columns: 19px 1fr;
	gap: var(--space-s, 14px);
	align-items: start;
	margin: 0;
	padding-block-end: var(--space-m, 16px);
	border-block-end: 1px solid var(--line, #E0D5C4);
}

.coord__ligne + .coord__ligne {
	padding-block-start: var(--space-m, 16px);
}

.coord__ligne:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

/* Pictogramme : masque SVG (aucune requete, couleur pilotee par le token).
   Purement decoratif — l'intitule texte porte l'information (§21). */
.coord__ligne::before {
	content: "";
	width: 19px;
	height: 19px;
	margin-block-start: 2px;
	background: var(--or, #A8895E);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.coord__ligne--telephone::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.coord__ligne--email::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 6 10 7L22 6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 6 10 7L22 6'/%3E%3C/svg%3E");
}

.coord__ligne--adresse::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Le couple intitule / valeur occupe la seconde colonne de la grille :
   sans cette consigne, le placement automatique renverrait la valeur sous
   le pictogramme. */
.coord__libelle,
.coord__valeur {
	grid-column: 2;
}

.coord__libelle {
	margin: 0;
	font-size: var(--t-overline, 11px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-soft, #5C534A);
}

.coord__valeur {
	margin-block: 3px 0;
	font-size: var(--t-base, 15px);
	line-height: 1.5;
	color: var(--ink, #2A2521);
	overflow-wrap: anywhere; /* Une adresse e-mail longue ne deborde pas la carte. */
}

/* Tableau des horaires dans sa carte : le bloc idouceur/horaires garde
   sa mise en page, seule la respiration change. */
.contact-coordonnees .horaires-bloc {
	margin: 0;
}

/* --- 22.2 Plan d'acces + cartes pratiques --- */
.contact-acces {
	align-items: stretch;
}

/* Les deux colonnes ont la meme hauteur : le plan s'etire sur celle des
   trois cartes pratiques. */
.contact-acces > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.contact-acces > .wp-block-column > * {
	flex: 1;
}

/* Cadre du plan : le meme rayon que les cartes voisines. L'ecran de
   consentement (§15) prend exactement sa place tant que rien n'est
   accepte, l'iframe s'y glisse ensuite. */
.contact-plan {
	overflow: hidden;
	min-height: 340px;
	line-height: 0;
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--r-l, 14px);
}

.contact-plan iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 340px;
	border: 0;
	filter: grayscale(0.2);
}

/* L'ecran de consentement herite du cadre : pas de double bordure. */
.contact-plan .embarque-consentement {
	height: 100%;
	line-height: 1.7;
	border: 0;
	border-radius: 0;
}

.contact-acces__cartes {
	display: flex;
	flex-direction: column;
	gap: var(--space-m, 16px);
}

.contact-acces__cartes .carte {
	border-radius: var(--r-ml, 12px);
}

.contact-acces__cartes .carte__corps {
	padding: var(--space-l, 24px) var(--space-l, 26px);
}

.contact-acces__cartes .carte__titre {
	display: flex;
	align-items: center;
	gap: var(--space-xs, 10px);
	font-size: var(--t-h4, 18px);
	margin-block-end: var(--space-xs, 8px);
}

/* Glyphes de la maquette (stationnement, transports, acces). Decoratifs :
   ils vivent dans la couche de style, jamais dans le contenu (§6.0). */
.carte--acces .carte__titre::before {
	content: "\229A"; /* ⊚ */
	color: var(--or, #A8895E);
	font-family: var(--ff-text, 'Jost', sans-serif);
}

.carte--acces-transports .carte__titre::before {
	content: "\2197"; /* ↗ */
}

/* Troisieme carte : fond accentue de la maquette, glyphe or profond. */
.carte--acces-accueil {
	background: var(--surface-2, #EDE5D8);
}

.carte--acces-accueil .carte__titre::before {
	content: "\2726"; /* ✦ */
	color: var(--or-deep, #876A3C);
}

/* --- 22.3 Sous 782 px (seuil d'empilement des colonnes core) --- */
@media (max-width: 781px) {
	.contact-plan,
	.contact-plan iframe {
		min-height: 260px;
	}
}

/* ================================================================
   23. Fiche soin — heros, « en bref », « pour qui », avis
   ----------------------------------------------------------------
   Gabarit « single-soin.html » + composition « idouceur/soin ».
   Maquette « Soin visage anti-age.dc.html ». Correctif du 2026-09-01 :
   la fiche n'avait ni heros, ni carte « En pratique », ni « Pour qui ? »,
   ni avis clientes.

   Rien n'est reinvente (§5.5) : le heros est un « core/cover » comme les
   autres bannieres (§17.1, dont il partage rythmes et typographie de
   titre), les pilules sont « .chip », les cartes d'avis « .carte
   --avis », les cartes de benefices « .carte--besoin », les sections
   « .section ». On ne pose ici QUE ce que la fiche ajoute.
   ================================================================ */

/* ----------------------------------------------------------------
   23.1 Heros de la fiche — fer a gauche, voile en degrade
   ----------------------------------------------------------------
   🔴 Recette du 2026-09-02 (ter) — le voile n'est PAS peint ici, et
   c'est volontaire. Deux tentatives ont echoue avant d'en arriver la :

     1. Peindre un degrade sur « .wp-block-cover__background » depuis
        cette feuille : perdu contre la regle d'opacite du core, plus
        specifique — voile delave.
     2. Remonter la specificite : le degrade s'affichait, mais la PHOTO
        disparaissait. Le span porte aussi « has-ink-background-color »,
        et WordPress genere ses classes de couleur de preset avec
        « !important ». Aucune declaration de feuille ne peut rendre cet
        aplat transparent.

   La reponse est de ne pas se battre : « core/cover » sait poser un
   degrade lui-meme (attribut « customGradient »). Le span recoit alors
   « style="background:linear-gradient(...)" » et AUCUNE classe de
   couleur — donc plus d'aplat opaque a neutraliser. C'est deja l'idiome
   du heros d'article (templates/single.html, §5.5). Les alphas de la
   maquette vivent une seule fois, dans l'attribut du bloc, et restent
   modifiables en Editeur de site.
   ---------------------------------------------------------------- */

/* 🔴 Recette des 2026-09-01/02 — titre et chapo apparaissaient CENTRES dans
   un heros cense etre fer a gauche. Trois lectures ont ete necessaires, la
   note vaut pour tout le theme :

   1. Ce n'est PAS un « text-align ». La mise en page « constrained » du core
      pose sur chaque enfant « max-width: <contentSize> ; margin-left: auto
      !important ; margin-right: auto !important ». Borner une mesure (18ch,
      54ch, 60ch...) retrecit la boite, et les deux marges automatiques la
      RECENTRENT : le texte reste ferre a gauche DANS une boite centree.

   2. Surcharger la marge de debut a « 0 » ne repare rien — ca aggrave.
      Sans « !important » la declaration perd ; avec, l'element quitte AUSSI
      le calage de la colonne de 1180 px et vient se coller au bord de
      l'ecran, pendant que ses voisins non bornes restent dans la colonne.

   3. La reponse est STRUCTURELLE, pas une surcharge. Le contenu du heros est
      enveloppe dans un groupe en mise en page « flux » (« default », cf.
      single-soin.html ; idem « .pour-qui » dans la composition). Le groupe,
      lui, est un enfant normal du conteneur « constrained » : il recoit la
      largeur de colonne et son centrage. A l'interieur, le flux ne pose
      aucune marge automatique — borner une mesure y ferre le texte a gauche,
      comme dans la maquette. Aucun « !important », aucune valeur en dur. */
.soin-heros__titre {
	max-width: 18ch;
}

.soin-heros .chapo--sombre {
	max-width: 54ch;
	margin-block: var(--space-l, 22px) var(--space-xl, 30px);
}

/* Pilules du heros : meme gabarit que « .chip » (§8), palette inversee
   pour un fond sombre. Creme sur voile encre = contraste largement AA. */
.chip--sombre {
	color: var(--surface, #F7F3EC);
	background: rgba(251, 248, 243, 0.12);
	border-color: rgba(251, 248, 243, 0.22);
}

.soin-heros__chips {
	gap: var(--space-s, 10px);
	margin-block-end: var(--space-xl, 32px);
}

/* Pilules facultatives (« indication », « atout ») : sans saisie, la source
   Bindings rend une chaine vide et le core laisse un paragraphe VIDE — donc
   une pilule fantome. On la retire ici plutot que par une condition PHP : le
   gabarit reste un fichier de blocs, et la regle vaut pour les quatre
   pilules sans en distinguer aucune (§15, degradation gracieuse).
   « :empty » ignore les pseudo-elements : les glyphes ci-dessous ne
   ressuscitent pas une pilule vide. */
.soin-heros__chips .chip:empty {
	display: none;
}

/* Glyphes de la maquette (durée, atout). Decoratifs : ils vivent dans la
   couche de style, jamais dans le contenu (§6.0) — la saisie admin reste du
   texte pur. L'ecart est pose par le « gap » de « .chip » (§8). */
.chip--duree::before {
	content: "\25F7"; /* ◷ */
}

.chip--atout::before {
	content: "\2736"; /* ✶ */
	color: var(--or-pale, #E6CBA0);
}

.soin-heros__actions {
	gap: var(--space-m, 16px);
}

/* Bouton plein du heros = pave creme, libelle encre (13,9:1, §21) ;
   survol en or profond. Le contour est son exact negatif : filet creme
   au repos, pave creme au survol. Les deux restituent les jetons
   d'espacement du standard, que la variation « outline » du core ecrase
   avec ses propres valeurs en « em » (meme correctif qu'au bandeau CTA,
   §10). */
.soin-heros .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--surface, #F7F3EC);
	color: var(--ink, #2A2521);
}

.soin-heros .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.soin-heros .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	background-color: var(--or, #A8895E);
	color: var(--ink, #2A2521);
}

.soin-heros .wp-block-button.is-style-outline .wp-block-button__link {
	padding-block: var(--wp--preset--spacing--m, 16px);
	padding-inline: var(--wp--preset--spacing--xl, 32px);
	background-color: transparent;
	border-color: rgba(251, 248, 243, 0.5);
	color: var(--surface, #F7F3EC);
}

.soin-heros .wp-block-button.is-style-outline .wp-block-button__link:hover,
.soin-heros .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--surface, #F7F3EC);
	border-color: var(--surface, #F7F3EC);
	color: var(--ink, #2A2521);
}

/* ----------------------------------------------------------------
   23.2 « Le soin en bref » & carte « En pratique »
   ----------------------------------------------------------------
   Le fond, le filet et l'arrondi de la carte viennent de « .carte »
   (§5), son retrait du garde-fou « .carte.is-layout-constrained
   :not(:has(.carte__corps)) ». Ne restent que le tableau de lignes et
   son bouton.
   ---------------------------------------------------------------- */
.soin-bref .titre-section {
	max-width: 20ch;
	margin-block-end: var(--space-l, 20px);
}

/* 🔴 Recette du 2026-09-01 (ter) : titre et paragraphes colles. « blockGap »
   vaut 0 dans theme.json (§4) — les respirations sont donc TOUJOURS a poser
   par la feuille, jamais heritees. La regle est bornee a la colonne de
   discours (« .soin-bref__texte ») : la carte « En pratique » voisine vit
   dans la meme section et a son propre rythme de lignes. */
/* Double selecteur (2026-09-15) : le texte de referencement des pages
   « Famille de soins » (.famille-seo, §24) a exactement le rythme de
   discours de « Le soin en bref » — une seule definition (§5.5). */
.soin-bref__texte p:not(.overline),
.famille-seo p:not(.overline) {
	margin-block: 0 var(--space-m, 16px);
	line-height: 1.78;
	color: var(--ink-soft, #5C534A);
}

.soin-bref__texte p:not(.overline):last-child,
.famille-seo p:not(.overline):last-child {
	margin-block-end: 0;
}

.en-pratique__titre {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-weight: 600;
	font-size: var(--t-h4, 21px);
	line-height: 1.2;
	margin-block: 0 var(--space-m, 18px);
}

.en-pratique__ligne {
	gap: var(--space-m, 16px);
	align-items: baseline;
	padding-block: var(--space-s, 13px);
	border-block-end: 1px solid var(--line, #E0D5C4);
}

/* Derniere ligne avant le bouton : pas de filet en pied de tableau. */
.en-pratique__ligne:last-of-type {
	border-block-end: 0;
}

.en-pratique__cle,
.en-pratique__valeur {
	margin-block: 0;
	font-size: var(--t-base, 14px);
}

.en-pratique__cle {
	color: var(--ink-soft, #5C534A);
}

.en-pratique__valeur {
	font-weight: 500;
	color: var(--ink, #2A2521);
	text-align: end;
}

.en-pratique__action {
	margin-block-start: var(--space-l, 22px);
}

/* ----------------------------------------------------------------
   23.3 « Pour qui ? » — encart accentue et nuage de preoccupations
   ---------------------------------------------------------------- */
.pour-qui {
	background: var(--surface-2, #EDE5D8);
	border-radius: var(--r-xl, 14px);
	padding: var(--space-3xl, 46px) var(--space-2xl, 40px);
}

.pour-qui .titre-section {
	margin-block-end: var(--space-xs, 8px);
}

.pour-qui__texte {
	max-width: 60ch;
	margin-block: 0 var(--space-xl, 26px);
	color: var(--ink-soft, #5C534A);
}

.pour-qui__liste {
	gap: var(--space-s, 11px);
}

/* ----------------------------------------------------------------
   23.4 Avis clientes — note moyenne + trois citations
   ----------------------------------------------------------------
   La grille reprend « .grille-avis » et « .carte--avis » de l'accueil
   (§5) : seule la ligne de note est propre a la fiche.
   ---------------------------------------------------------------- */
.soin-avis__note {
	gap: var(--space-l, 18px);
	align-items: center;
	margin-block: var(--space-m, 14px) var(--space-xl, 32px);
}

.soin-avis__chiffre {
	margin-block: 0;
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-weight: 600;
	font-size: 48px;
	line-height: 1;
	color: var(--ink, #2A2521);
}

.soin-avis__detail > * {
	margin-block: 0;
}

.soin-avis__base {
	margin-block-start: 4px; /* respiration d'interligne, pas un pas de grille */
	font-size: var(--t-small, 13px);
	color: var(--ink-soft, #5C534A);
}

/* ----------------------------------------------------------------
   23.5 Sous 782 px (seuil d'empilement des colonnes core)
   ----------------------------------------------------------------
   Les colonnes s'empilent d'elles-memes ; on ne reprend que ce que
   l'empilement ne resout pas : la hauteur du heros, ses limites de
   mesure devenues inutiles, et le retrait de l'encart accentue.
   Le « !important » sur la hauteur est ici inevitable : « core/cover »
   ecrit sa hauteur minimale en style EN LIGNE sur l'element.
   ---------------------------------------------------------------- */
@media (max-width: 781px) {
	.soin-heros {
		min-height: 500px !important;
	}

	.soin-heros__titre,
	.soin-heros .chapo--sombre,
	.soin-bref .titre-section {
		max-width: none;
	}

	.soin-heros__actions .wp-block-button {
		width: 100%;
	}

	.soin-heros__actions .wp-block-button__link {
		width: 100%;
	}

	.pour-qui {
		padding: var(--space-2xl, 32px) var(--space-l, 22px);
	}

	.soin-avis__chiffre {
		font-size: 40px;
	}
}


/* ================================================================
   24. Page « Famille de soins » (gabarit single-famille_soin.html)
   ----------------------------------------------------------------
   Chantier du 2026-09-15. Aucune maquette dediee (deviation validee) :
   la page ASSEMBLE des composants existants — heros de la fiche soin
   (.soin-heros, §23), en-tetes de section, encart « Pour qui ? »,
   bande FAQ, lignes de tarifs et cartes (§4-§6). Ne restent ici que
   les raccords propres a la page.
   ================================================================ */

/* Heros sans image mise en avant : fond encre, jamais un voile degrade
   sur le creme du corps (la page nait en brouillon, souvent sans visuel). */
.famille-heros {
	background-color: var(--ink, #2A2521);
}

/* Ancres « #soins » / « #tarifs » (bouton du heros) : la section arrive
   degagee sous l'en-tete collant. */
.famille-section {
	scroll-margin-block-start: var(--entete-hauteur, 71px);
}

/* Texte de referencement : titre a la mesure de la colonne de lecture.
   Le rythme des paragraphes vient de « .soin-bref__texte » (§23.2). */
.famille-seo .titre-section {
	margin-block-end: var(--space-l, 20px);
}


/* ==========================================================================
   Typographie : equilibrage des retours a la ligne des titres
   (evite un mot seul en derniere ligne, ex. « Robert » dans le H1 de L'equipe)
   ========================================================================== */
h1, h2, h3,
.wp-block-heading {
	text-wrap: balance;
}

.chapo {
	text-wrap: pretty;
}


/* ==========================================================================
   Liens dans les reponses de FAQ et les chapos (fonds clairs)
   Couleur doree des boutons (--or-deep, contraste 4,57 sur fond creme) ;
   soulignement discret car la couleur seule ne distingue pas assez le lien
   du texte courant (contraste 1,49, critere WCAG 1.4.1).
   ========================================================================== */
.accordeon__reponse a,
.chapo:not(.chapo--sombre) a {
	color: var(--or-deep);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--or-deep) 35%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.accordeon__reponse a:hover,
.accordeon__reponse a:focus-visible,
.chapo:not(.chapo--sombre) a:hover,
.chapo:not(.chapo--sombre) a:focus-visible {
	color: var(--or-dark);
	text-decoration-color: currentColor;
}


/* ==========================================================================
   Page Contact : pictogramme de la ligne « Instagram » des coordonnees
   (meme principe que telephone / e-mail / adresse : SVG en masque CSS)
   ========================================================================== */
.coord__ligne--instagram::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='0.6' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='0.6' fill='%23000'/%3E%3C/svg%3E");
}


/* ==========================================================================
   Champs de formulaire : la largeur 100 % inclut les marges interieures
   (en content-box, les champs debordaient de 31 px de leur colonne,
   provoquant un defilement horizontal en mobile sur la page Contact)
   ========================================================================== */
.champ {
	box-sizing: border-box;
	max-width: 100%;
}


/* ==========================================================================
   Alerte de retour en stock (extension Back In Stock Notifier)
   Habillage aux couleurs de l'institut : on neutralise le style Bootstrap
   bleu de l'extension et on reprend les jetons du theme.
   ========================================================================== */
.cwginstock-subscribe-form .cwginstock-panel-primary {
	margin: 0 0 1.5rem;
	border: var(--wp--custom--trait--contour, 1px) solid var(--wp--preset--color--line) !important;
	border-radius: var(--wp--custom--radius--m);
	background: var(--wp--preset--color--surface) !important;
	box-shadow: none;
	overflow: hidden;
}
.cwginstock-subscribe-form .cwginstock-panel-heading {
	padding: 1.25rem 1.5rem 0.25rem;
	border: 0 !important;
	background: transparent !important;
}
.cwginstock-subscribe-form .cwginstock-panel-heading h4 {
	margin: 0;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.25;
	text-align: left;
	color: var(--wp--preset--color--ink) !important;
}
.cwginstock-subscribe-form .cwginstock-panel-body {
	box-sizing: border-box;
	padding: 0.75rem 1.5rem 1.5rem !important;
}
/* Neutralise les gouttieres Bootstrap (-15px / 15px) qui faisaient deborder les champs. */
.cwginstock-subscribe-form .cwginstock-panel-body .row,
.cwginstock-subscribe-form .cwginstock-panel-body .col-md-12,
.cwginstock-subscribe-form .cwginstock-panel-body .form-group {
	box-sizing: border-box;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
.cwginstock-subscribe-form input.cwgstock_name,
.cwginstock-subscribe-form input.cwgstock_email {
	display: block;
	box-sizing: border-box;
	width: 100% !important;
	max-width: 100%;
	margin: 0 0 0.75rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--s);
	background: var(--wp--preset--color--bg);
	font-family: inherit;
	font-size: 15px;
	text-align: left !important;
	color: var(--wp--preset--color--ink);
}
.cwginstock-subscribe-form input.cwgstock_name:focus,
.cwginstock-subscribe-form input.cwgstock_email:focus {
	border-color: var(--wp--preset--color--or);
	outline: none;
	box-shadow: 0 0 0 3px rgba(168, 137, 94, 0.18);
}
.cwginstock-subscribe-form .cwg_iagree_checkbox {
	margin: 0.25rem 0 1rem;
}
/* Case a gauche positionnee en absolu : le texte et son lien restent sur une seule colonne. */
.cwginstock-subscribe-form .cwg_iagree_checkbox label {
	position: relative;
	display: block;
	padding-left: 1.6rem;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
}
.cwginstock-subscribe-form .cwg_iagree_checkbox_input {
	position: absolute;
	top: 3px;
	left: 0;
	margin: 0;
	accent-color: var(--wp--preset--color--or-deep);
}
.cwginstock-subscribe-form .cwg_iagree_checkbox a {
	color: var(--wp--preset--color--or-deep);
}
.cwginstock-subscribe-form .cwgstock_button {
	display: block;
	box-sizing: border-box;
	width: 100% !important;
	padding: 16px 32px;
	border: 0 !important;
	border-radius: var(--wp--custom--radius--s);
	background: var(--wp--preset--color--ink) !important;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.cwginstock-subscribe-form .cwgstock_button:hover,
.cwginstock-subscribe-form .cwgstock_button:focus-visible {
	background: var(--wp--preset--color--or-deep) !important;
}
.cwginstock-subscribe-form .cwgstock_output {
	margin-top: 0.75rem;
	font-size: 14px;
	color: var(--wp--preset--color--ink-soft);
}

/* Produit en rupture : la barre d'achat fixe du mobile n'a plus de bouton panier.
   On la remet dans le flux de la page pour qu'elle accueille le formulaire d'alerte
   sur toute la largeur, au lieu de le coincer en bas d'ecran. */
.produit-achat__acheter--barre:has(.cwginstock-subscribe-form) {
	position: static !important;
	inset: auto !important;
	flex-wrap: wrap !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}
.produit-achat__acheter--barre:has(.cwginstock-subscribe-form) p.stock {
	display: none;
}
.produit-achat__acheter--barre .cwginstock-subscribe-form {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Utilitaire : empeche la coupure d'un groupe de mots ou d'un nom compose
   (ex. « Brie-Comte-Robert » coupe a ses traits d'union dans les titres). */
.sans-coupure {
	white-space: nowrap;
}

/* Reassurance a trois elements (page panier) : trois colonnes, une seule
   colonne sous 860 px pour eviter une rangee orpheline. */
.reassurance__inner--trois {
	grid-template-columns: repeat(3, 1fr);
}

.reassurance__inner--trois .reassurance__item:last-child {
	border-inline-end: 0;
}

@media (max-width: 860px) {
	.reassurance__inner--trois {
		grid-template-columns: 1fr;
	}

	.reassurance__inner--trois .reassurance__item {
		border-inline-end: 0;
		border-block-end: 1px solid rgba(247, 243, 236, 0.12);
	}

	.reassurance__inner--trois .reassurance__item:last-child {
		border-block-end: 0;
	}
}