/* ================================================================
   header.css — Zones globales du gabarit (L'Instant Douceur)
   ----------------------------------------------------------------
   Phase 5 du plan d'integration (§10 de la norme). Habille les
   template-parts FSE-natifs, SANS jamais porter de contenu :
	 1. en-tete sticky (parts/header.html) : logo, navigation core
		(mega-menu « Vos besoins »), compte/panier WooCommerce,
		bouton « Rendez-vous » lie par Bindings ;
	 2. volet mobile = overlay NATIF du bloc core/navigation, style
		en tiroir lateral (clavier + ARIA geres par le core, §21) ;
	 3. barre RDV collante (mobile) ;
	 4. pied de page sombre 3 colonnes + barre legale
		(parts/footer.html) ;
	 5. variantes allegees du tunnel e-commerce (--tunnel).

   Regles d'ecriture (§5.4, §5.5) :
	 - tokens partout avec repli litteral : var(--x, 12px) ;
	 - seules valeurs litterales tolerees : opacites sur fond sombre
	   (non-tokenisables, meme tolerance que composants.css) ;
	 - proprietes logiques ; commentaires en francais ; ASCII dans
	   les identifiants (§16.1) ;
	 - les composants communs restent dans composants.css — ici
	   uniquement le SPECIFIQUE des zones en-tete / pied.

   Bascule desktop <-> mobile de la navigation : 1000px (1000px sur la maquette, releve car le menu passait sur deux lignes vers 1024px),
   au lieu des 600px du core — d'ou les surcharges marquees plus bas.
   ================================================================ */


/* ================================================================
   1. En-tete — barre sticky pleine largeur
   ----------------------------------------------------------------
   Le sticky est porte par l'element <header> emis par le bloc
   template-part (templates Phase 7 : {"slug":"header","tagName":"header"}).
   Le voile flou est un pseudo-element : un backdrop-filter pose sur
   .entete lui-meme ferait de .entete le bloc conteneur des elements
   fixes (overlay natif du menu, barre RDV) et les briserait.
   ================================================================ */

header.wp-block-template-part {
	position: sticky;
	inset-block-start: 0;
	z-index: 60;
}

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

.entete::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--surface, #F7F3EC);
	background: color-mix(in srgb, var(--surface, #F7F3EC) 86%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* Ombre douce une fois la page defilee (classe posee par idouceur-header.js). */
.est-defile .entete {
	box-shadow: var(--shadow-soft, 0 14px 38px -26px rgba(42, 37, 33, 0.4));
}

/* Specificite .wp-block-group + classe : le blockGap global a 0 (§4)
   genere un gap:0 par conteneur (regle .wp-container-* imprimee apres
   cette feuille) — la double classe garantit que NOTRE gap gagne. */
.wp-block-group.entete__barre {
	padding-block: var(--space-m, 16px);
	gap: var(--space-l, 24px);
}

/* Logo pleine taille en haut de page. Une fois la page defilee, il
   revient a 60px : la barre sticky retrouve EXACTEMENT sa hauteur
   d'avant (~93px desktop), et les offsets qui s'y calent restent
   justes — `top: var(--entete-hauteur, 96px)` du resume produit et des
   filtres boutique, `inset-block-start: var(--entete-hauteur, 71px)`
   des chips de la carte de soins. Sans ce retour, l'en-tete gagnait
   20px et recouvrait ces elements colles. */
.entete__logo img {
	max-height: 80px;
	width: auto;
	transition: max-height 0.35s var(--ease, ease);
}

.est-defile .entete__logo img {
	max-height: 60px;
}

/* Ordre mobile impose par la maquette : logo | compte | panier | menu.
   Le DOM du part place la navigation AVANT le groupe d'actions (ordre
   desktop : logo | menu | actions) — sous 1000px, `order` remet le
   bouton burger en dernier sans toucher au balisage editable.
   Double classe : les regles de layout generees (.wp-container-*)
   sont imprimees apres cette feuille. */
@media (max-width: 999.98px) {

	.wp-block-group.entete__barre {
		gap: var(--space-m, 16px);
	}

	.entete__barre > .entete__logo {
		order: 1;
		margin-inline-end: auto;
	}

	.wp-block-group.entete__actions {
		order: 2;
		margin-top: 0;
	}

	.wp-block-navigation.entete__nav {
		order: 3;
		margin-top: 0;
	}
}


/* ================================================================
   2. Navigation principale — liens, soulignement anime, mega-menu
   ----------------------------------------------------------------
   Charte des liens : majuscules, Jost, encre douce -> encre, filet
   dore anime (data-navlink des maquettes traduit en ::after).
   Reserve au mode barre (>= 1000px) ; le tiroir mobile a sa propre
   typo (section 3).
   ================================================================ */

.entete__nav {
	font-family: var(--ff-text, 'Jost', sans-serif);
	font-size: var(--t-overline, 12.5px);
	font-weight: 400;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

/* Ecart entre items : le blockGap global a 0 (§4) ecrase le gap natif
   du bloc Navigation — on le repose ici (bornes = tokens d'espacement). */
.wp-block-navigation.entete__nav,
.wp-block-navigation.entete__nav .wp-block-navigation__container {
	gap: clamp(var(--space-m, 16px), 2.1vw, var(--space-xl, 32px));
	margin-top: 14px;
}

@media (min-width: 1000px) {

	html:not(.idouceur-nav-compacte) .entete__nav .wp-block-navigation-item__content {
		position: relative;
		padding-block-end: 6px;
		color: var(--ink-soft, #5C534A);
		transition: color 0.35s var(--ease, ease);
	}

	
	/* Filet dore anime sous le lien survole/focalise : balayage de la
	   GAUCHE vers la DROITE (maquette). Le trait est pose a 100 % de large
	   puis comprime par scaleX — on anime une transformation composee, pas
	   une largeur (pas de reflow, balayage regulier). */
html:not(.idouceur-nav-compacte) .entete__nav .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		inset-block-end: 0;
		height: 1px;
		width: 100%;
		background: var(--or, #A8895E);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.4s var(--ease, ease);
	}

	html:not(.idouceur-nav-compacte) .entete__nav .wp-block-navigation-item__content:hover,
html:not(.idouceur-nav-compacte) .entete__nav .wp-block-navigation-item__content:focus-visible {
		color: var(--ink, #2A2521);
	}

	html:not(.idouceur-nav-compacte) .entete__nav .wp-block-navigation-item__content:hover::after,
html:not(.idouceur-nav-compacte) .entete__nav .wp-block-navigation-item__content:focus-visible::after {
		transform: scaleX(1);
	}

	
	/* Le core souligne le lien survole/focalise
	   (`.wp-block-navigation .wp-block-navigation-item__content:hover`,
	   3 classes, `text-decoration` non animable) : ce trait instantane
	   double le filet dore et donne l'effet « oui/non » constate en recette.
	   Neutralisation a 4 classes (double classe `.wp-block-navigation.entete__nav`),
	   donc sans `!important` : seul le filet anime subsiste. */
html:not(.idouceur-nav-compacte) .wp-block-navigation.entete__nav .wp-block-navigation-item__content:hover,
html:not(.idouceur-nav-compacte) .wp-block-navigation.entete__nav .wp-block-navigation-item__content:focus,
html:not(.idouceur-nav-compacte) .wp-block-navigation.entete__nav .wp-block-navigation-item__content:focus-visible {
		text-decoration: none;
	}

	
	/* Caret du sous-menu, discret et dore. */
html:not(.idouceur-nav-compacte) .entete__nav .wp-block-navigation__submenu-icon {
		color: var(--or-deep, #876A3C);
	}

	
	/* --- Mega-panneau « Vos besoins » : carte 2 colonnes ---
	   Le core impose au panneau `display:flex; flex-direction:column`
	   (`.wp-block-navigation .has-child .wp-block-navigation__submenu-container`)
	   et, a l'ouverture, `width:auto; min-width:200px`
	   (`.wp-block-navigation .has-child:hover > ...`) : deux regles a
	   3 classes qui ecrasaient la mise en colonnes (panneau rendu sur une
	   seule colonne en recette). Selecteurs portes ici a 4 classes
	   (double classe `.wp-block-navigation.entete__nav` + enfant direct) :
	   la carte gagne sans `!important`.

	   Colonnes CSS (`columns`) plutot qu'une grille a nombre de lignes fige :
	   le panneau se re-equilibre seul si un item est ajoute ou retire en
	   Site Editor (§1 — tout editable en admin), et le remplissage reste
	   vertical (colonne 1 puis colonne 2), comme la maquette. */
html:not(.idouceur-nav-compacte) .wp-block-navigation.entete__nav .has-child > .wp-block-navigation__submenu-container {
		display: block;
		columns: 2;
		column-gap: 26px;
		padding: var(--space-m, 18px);
		background: var(--bg, #FBF8F3);
		border: 1px solid var(--line, #E0D5C4);
		border-radius: var(--r-m, 10px);
		box-shadow: var(--shadow-card, 0 18px 50px -28px rgba(42, 37, 33, 0.45));
		text-transform: none;
		letter-spacing: 0;
	}

	
	/* Largeur imposee aux SEULS etats ouverts : replie, le core garde
	   `width:0; height:0` et le panneau ne reserve aucune place. */
html:not(.idouceur-nav-compacte) .wp-block-navigation.entete__nav .has-child:hover > .wp-block-navigation__submenu-container,
html:not(.idouceur-nav-compacte) .wp-block-navigation.entete__nav .has-child:focus-within > .wp-block-navigation__submenu-container {
		width: 520px;
		min-width: 520px;
		height: auto;
	}

	
	/* Un item ne doit jamais etre coupe entre les deux colonnes. */
html:not(.idouceur-nav-compacte) .wp-block-navigation.entete__nav .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		display: block;
		break-inside: avoid;
	}

	html:not(.idouceur-nav-compacte) .entete__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		padding: 7px 10px;
		border-radius: var(--r-s, 4px);
		font-size: var(--t-small, 14px);
		color: var(--ink-soft, #5C534A);
		transition: background 0.25s var(--ease, ease), color 0.25s var(--ease, ease);
	}

	html:not(.idouceur-nav-compacte) .entete__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
html:not(.idouceur-nav-compacte) .entete__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		background: var(--surface-2, #EDE5D8);
		color: var(--ink, #2A2521);
	}

	
	/* Pas de filet anime dans le panneau (l'etat survole = fond teinte). */
html:not(.idouceur-nav-compacte) .entete__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
		content: none;
	}
}


/* ================================================================
   3. Bascule 1000px & tiroir mobile (overlay natif core/navigation)
   ----------------------------------------------------------------
   Le core bascule a 600px ; la maquette a 1000px. On force donc :
	 - < 1000px : barre masquee, burger visible ;
	 - >= 1000px : burger masque (la barre est geree par le core).
   Les !important repondent aux media queries internes du core
   (meme specificite, ordre de chargement non garanti).
   Ouverture/fermeture, focus, Echap, aria-expanded : natifs (§10.2).
   ================================================================ */

.entete__nav .wp-block-navigation__responsive-container-open {
	color: var(--ink, #2A2521);
}

@media (max-width: 999.98px) {

	.entete__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.entete__nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	/* Le bloc Navigation pilote l'alignement de son overlay par deux
	   variables posees par la classe de layout (.items-justified-center
	   du mode barre) : le core s'en sert dans PLUSIEURS regles internes
	   (contenu du dialogue, conteneur, items). On reprend la main a la
	   source — une seule declaration au lieu d'une surcharge par regle. */
	.wp-block-navigation.entete__nav {
		--navigation-layout-align: stretch;
		--navigation-layout-justification-setting: flex-start;
		--navigation-layout-justify: flex-start;
		--navigation-layout-direction: column;
	}

	/* Conteneur ouvert = voile sombre plein ecran. Le core lui pose un
	   padding calque sur les marges racine : le tiroir doit toucher les
	   bords, on le remet a zero. */
	.entete__nav .wp-block-navigation__responsive-container.is-menu-open {
		background: rgba(42, 37, 33, 0.45);
		padding: 0;
		align-items: stretch;
		justify-content: flex-start;
		overflow: hidden;
	}

	/* Enveloppe intermediaire du core (`__responsive-close`) : elle est
	   centree et bornee a la largeur « large » du site des que le corps
	   porte .has-modal-open. Sans cette remise a plat, le tiroir ne peut
	   ni occuper toute la largeur en telephone, ni se coller a droite en
	   tablette. */
	.entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		display: flex;
		justify-content: flex-end;
		flex: 1 1 auto;
		inline-size: 100%;
		max-inline-size: none;
		min-block-size: 0;
		margin: 0;
	}

	/* Le tiroir lui-meme. En telephone il couvre toute la largeur
	   (maquette) ; le panneau lateral n'apparait qu'en tablette.
	   C'est LUI qui defile (le voile, lui, ne bouge pas) : hauteur
	   bornee a l'ecran + defilement interne contenu.

	   `margin-top` : le core decale le tiroir de 46px quand la barre
	   d'admin est la — d'ou un bandeau clair au-dessus du menu. Sous
	   600px cette barre n'est PAS fixe (elle defile avec la page), le
	   decalage n'a donc aucune utilite ici et le tiroir doit toucher
	   le haut de l'ecran (maquette). */
	.wp-block-navigation.entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		display: flex;
		flex-direction: column;
		inline-size: 100%;
		block-size: 100%;
		margin-top: 0;
		background: var(--surface, #F7F3EC);
		padding: var(--space-l, 26px) var(--space-l, 24px) var(--space-xl, 32px);
		overflow-y: auto;
		overscroll-behavior: contain;
		animation: idouceur-tiroir 0.45s var(--ease, ease);
	}

	/* Colonne pleine hauteur : c'est ce qui permet au pied du tiroir
	   (bouton RDV + telephone) de se coller en bas via margin auto.
	   Le core reserve ici un padding haut de « 2rem + 24px » pour sa
	   croix de fermeture ; notre ligne de logo joue ce role. */
	.entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		align-items: stretch;
		padding-block-start: 0;
	}

	/* La liste. Le bloc Navigation garde ici le layout du mode barre
	   (justifyContent center + gap de la section 2) : sans neutralisation,
	   les items se centrent et leur filet ne fait que la largeur du texte.
	   Double classe pour passer devant la regle .wp-container-* imprimee
	   apres cette feuille. */
	.wp-block-navigation.entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		order: -1;
		flex: 1 1 auto;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		text-align: start;
		gap: 0;
		margin-top: var(--space-xs, 8px);
	}

	/* Ligne d'en-tete du tiroir : logo a gauche, croix de fermeture a
	   droite (celle-ci est positionnee en absolu par le core, d'ou la
	   reserve d'espace a droite). Le logo est un bloc core/site-logo
	   pose DANS le bloc Navigation (blocs autorises), donc editable en
	   Site Editor comme le reste — aucun visuel en dur (§1, §6.0).
	   Le core l'enveloppe dans un <li> de la liste : le filet de
	   separation vient de ce <li> (regle des items ci-dessous), pas du
	   bloc logo — sinon double trait. */
	.entete__nav .wp-block-navigation__responsive-container.is-menu-open .tiroir__logo {
		margin: 0;
		padding-block-end: var(--space-m, 14px);
		/* Valeur pleine, hors demi-echelle mobile (fin de « tokens.css ») :
		   cette reserve n'est pas du rythme, c'est la place du bouton de
		   fermeture pose en absolu par le core. Divisee, le logo passerait
		   dessous. */
		padding-inline-end: var(--espace-plein-2xl, 40px);
		text-align: start;
	}

	.entete__nav .wp-block-navigation__responsive-container.is-menu-open .tiroir__logo img {
		max-height: 50px;
		width: auto;
	}

	/* Items du tiroir : Cormorant, grands, separes d'un filet beige. */
	.entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		inline-size: 100%;
		border-block-end: 1px solid var(--line, #E0D5C4);
	}

	.entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* Le core fait du <li> un conteneur flex : sans cette ligne le lien
		   se dimensionne sur son texte et seule cette largeur est cliquable.
		   Il occupe donc toute la ligne (zone de tap pleine largeur). */
		inline-size: 100%;
		min-inline-size: 0;
		/* 🔒 « inline-size: 100% » PLUS un padding lateral : sans border-box
		   le lien mesure plus large que sa ligne et deborde le tiroir
		   (meme piege que les chips de la boutique, v1.22.0). */
		box-sizing: border-box;
		font-family: var(--ff-display, 'Cormorant Garamond', serif);
		font-size: var(--t-h4, 22px);
		font-weight: 500;
		letter-spacing: 0;
		text-transform: none;
		color: var(--ink, #2A2521);
		line-height: 1.25;
		padding-block: var(--space-m, 15px);
		padding-inline: var(--space-xs, 4px);
	}

	/* « Vos besoins » = lien + bascule (maquette). Le lien reste un lien
	   (il mene a /vos-besoins/) ; le chevron est un bouton pose par
	   idouceur-header.js, section 3 — l'icone native du core, simple
	   <span> non cliquable, est masquee au profit de ce bouton. */
	.entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
		position: relative;
	}

	/* Le lien couvre desormais toute la ligne, y compris sous la bascule
	   (posee en absolu, donc au-dessus : le chevron reste cliquable).
	   Reserve d'espace pour que le libelle ne passe pas dessous. */
	.entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
		padding-inline-end: 56px;
	}

	.entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
		display: none;
	}

	.entete__nav .wp-block-navigation__responsive-container.is-menu-open .tiroir__bascule {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		/* Hauteur bornee a la premiere ligne : le <li> parent englobe
		   aussi le sous-menu deplie, un bouton en hauteur 100 % couvrirait
		   les sous-liens et les rendrait inclicables. */
		inline-size: 56px;
		block-size: calc(var(--space-m, 15px) * 2 + 1.25 * var(--t-h4, 22px));
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		font-family: var(--ff-text, 'Jost', sans-serif);
		font-size: var(--t-h4, 26px);
		font-weight: 300;
		line-height: 1;
		color: var(--or-deep, #876A3C);
	}

	.entete__nav .wp-block-navigation__responsive-container.is-menu-open .tiroir__bascule::before {
		content: "\25BE";
		display: block;
		transition: transform 0.35s var(--ease, ease);
	}

	.entete__nav .wp-block-navigation__responsive-container.is-menu-open .tiroir__bascule[aria-expanded="true"]::before {
		transform: rotate(180deg);
	}

	/* Sous-menu replie par defaut. Le core force son affichage dans
	   l'overlay (position statique, visible) : on reprend la main avec
	   une specificite superieure plutot qu'un !important. */
	.wp-block-navigation.entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		display: none;
	}

	/* Le core pose sur ce conteneur, dans l'overlay, un retrait gauche de
	   2rem et un padding haut egal au blockGap : les deux sont remis aux
	   valeurs de la maquette (retrait de 8px, aucun sur-espacement). */
	.wp-block-navigation.entete__nav .wp-block-navigation__responsive-container.is-menu-open .has-child.est-ouvert > .wp-block-navigation__submenu-container {
		display: block;
		min-width: 0;
		padding-block: 0 var(--space-s, 10px);
		padding-inline-start: var(--space-s, 8px);
	}

	/* Sous-liens (mega-menu replie en liste) : Jost, plus petits. */
	.entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-block-end: 0;
	}

	.entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		/* Meme raison qu'au niveau 1 : le <li> est flex, le lien doit
		   occuper toute la largeur pour que la ligne entiere soit cliquable. */
		inline-size: 100%;
		min-inline-size: 0;
		/* 🔒 Meme raison qu'au niveau 1 : largeur pleine + padding lateral. */
		box-sizing: border-box;
		font-family: var(--ff-text, 'Jost', sans-serif);
		font-size: var(--t-small, 15px);
		font-weight: 300;
		line-height: 1.4;
		color: var(--ink-soft, #5C534A);
		padding-block: var(--space-s, 10px);
		padding-inline: var(--space-s, 8px);
	}

	/* Croix de fermeture : le core la place en absolu au coin du tiroir
	   (inset 0). On la ramene dans l'axe de la ligne de logo. */
	.entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		inset-block-start: var(--space-l, 26px);
		inset-inline-end: var(--space-l, 24px);
		color: var(--ink-soft, #5C534A);
	}

	/* Pied du tiroir : bouton RDV + numero, colles en bas de la colonne.
	   Les deux liens sont des core/button lies a la source
	   « idouceur/identite » (URL Planity, telephone + tel:) — le client
	   n'edite ces valeurs qu'une fois, dans les reglages (§10.1, §26). */
	.wp-block-buttons.tiroir__pied {
		order: 1;
		display: flex;
		flex-direction: column;
		gap: var(--space-s, 12px);
		margin-block-start: auto;
		padding-block-start: var(--space-l, 18px);
		border-block-start: 1px solid var(--line, #E0D5C4);
	}

	.tiroir__pied .wp-block-button__link {
		display: block;
		width: 100%;
		background: var(--ink, #2A2521);
		color: var(--surface, #F7F3EC);
		border-radius: var(--r-s, 5px);
		text-align: center;
		font-size: var(--t-overline, 12px);
		letter-spacing: 0.12em;
		padding-block: var(--space-m, 15px);
	}

	/* Le numero n'est pas un bouton plein : lien dore centre (maquette). */
	.tiroir__pied .tiroir__tel .wp-block-button__link {
		background: none;
		color: var(--or-deep, #876A3C);
		font-family: var(--ff-text, 'Jost', sans-serif);
		font-size: var(--t-small, 13px);
		letter-spacing: 0.02em;
		text-transform: none;
		padding-block: 0;
	}

	/* Numero non renseigne en reglages : pas de bouton vide dans le tiroir. */
	.tiroir__pied .tiroir__tel .wp-block-button__link:empty {
		display: none;
	}
}

/* Tablette : le tiroir redevient un panneau lateral (la maquette ne
   passe en plein ecran qu'en telephone). */
@media (min-width: 641px) and (max-width: 999.98px) {

	.entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		inline-size: min(420px, 88vw);
		box-shadow: var(--shadow-card, 0 18px 50px -28px rgba(42, 37, 33, 0.45));
		border-inline-start: 1px solid var(--line, #E0D5C4);
	}
}

@media (min-width: 1000px) {

	html:not(.idouceur-nav-compacte) .entete__nav .wp-block-navigation__responsive-container-open {
		display: none !important;
	}

	
	/* Logo, pied du tiroir et bascule de sous-menu vivent DANS le bloc
	   Navigation : en mode barre ils feraient doublon avec l'en-tete et
	   le mega-menu (ouvert au survol) — masques, donc hors tabulation. */
html:not(.idouceur-nav-compacte) .entete__nav .tiroir__logo,
html:not(.idouceur-nav-compacte) .entete__nav .tiroir__bascule,
html:not(.idouceur-nav-compacte) .entete__nav .wp-block-buttons.tiroir__pied {
		display: none;
	}
}

/* Glissement d'entree du tiroir (neutralise si mouvement reduit, section 8). */
@keyframes idouceur-tiroir {
	from {
		transform: translateX(102%);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}


/* ================================================================
   4. Actions d'en-tete — compte, mini-panier, bouton Rendez-vous
   ================================================================ */

.wp-block-group.entete__actions {
	gap: var(--space-m, 16px);
	margin-top: 18px;
}

/* Icones compte / panier a l'encre (blocs WooCommerce).
   Doublage par `.entete__actions` : le groupe parent garde sa classe meme
   si un rendu WooCommerce venait a ne plus reporter le `className` du bloc. */
.entete__compte,
.entete__panier,
.entete__actions .wc-block-customer-account,
.entete__actions .wc-block-mini-cart {
	color: var(--ink, #2A2521);
}

/* Le lien du bloc « customer-account » se reduit a une boite de 1em : son
   SVG n'a pas de dimension propre. On le calibre sur l'icone du panier. */
.entete__compte .wc-block-customer-account__link {
	display: flex;
	align-items: center;
	color: inherit;
}

.entete__compte .wc-block-customer-account__link svg {
	display: block;
	inline-size: 24px;
	block-size: 24px;
}

/* Pastille de quantite du mini-panier : fond dore, chiffre clair.

   `!important` assume et documente : le mini-panier est pilote par l'API
   Interactivity de WordPress. A l'hydratation, ses directives
   `data-wp-style--background-color` / `data-wp-style--color` ecrivent un
   `style=` EN LIGNE sur la pastille — WooCommerce lit les couleurs calculees
   du bloc et les REINJECTE INVERSEES (fond = notre `color`, texte = notre
   `background`). D'ou la pastille correcte au chargement puis retournee une
   fois le script parti. Un style en ligne ne cede qu'a `!important` cote
   feuille : c'est le seul levier CSS, et il est prefere a un contournement
   (valeurs volontairement inversees) qui casserait au premier changement
   d'implementation WooCommerce et laisserait un flash inverse avant
   hydratation. `border-color` neutralise le lisere clair du style par defaut. */
.entete__panier .wc-block-mini-cart__badge,
.entete__actions .wc-block-mini-cart__badge {
	background-color: var(--or, #A8895E) !important;
	border-color: var(--or, #A8895E);
	color: var(--bg, #FBF8F3) !important;
}

/* ================================================================
   4bis. Tiroir du mini-panier (bloc « woocommerce/mini-cart »)
   ----------------------------------------------------------------
   🔴 Correctif 2026-08-24 (recette). Le tiroir affichait le visuel
   produit DEUX FOIS, l'un sous l'autre.

   Cause : boutique.css habillait les lignes de panier sans ancrage —
   « .wc-block-cart-items__row td { display: block } » notamment. Or le
   tiroir reutilise EXACTEMENT les classes de la page Panier, et
   WooCommerce y masque certaines cellules par ses propres styles. La
   regle en bloc les reaffichait ; la grille trois colonnes les faisait
   retomber en colonne 1, deuxieme rangee — d'ou le doublon. Les regles
   de boutique.css sont desormais ancrees sur « .wp-block-woocommerce-cart »
   (page Panier uniquement, cf. boutique.css §6.2).

   🔒 Pourquoi ICI et pas dans boutique.css : le tiroir vit dans
   l'en-tete, donc sur TOUTES les pages, alors que boutique.css n'est
   charge que sur les contextes WooCommerce (§20,
   inc/woocommerce.php → idouceur_charger_boutique_css). Le tiroir doit
   avoir la meme tenue partout.

   Principe retenu : on ne pose AUCUNE regle en bloc sur « td ». On nomme
   les trois cellules attendues (visuel · produit · total) ; toute
   cellule que WooCommerce masque reste masquee.
   ================================================================ */
.wc-block-mini-cart__products-table .wc-block-cart-items,
.wc-block-mini-cart__products-table .wc-block-cart-items > tbody {
	display: block;
	inline-size: 100%;
	border: 0;
	border-collapse: collapse;
	margin-inline: 0;
	padding-inline: 0;
}

.wc-block-mini-cart__products-table .wc-block-cart-items__row {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: start;
	column-gap: var(--space-m, 14px);
	padding-block: var(--space-m, 18px);
	padding-inline: 0;
	margin-inline: 0;
	border-block-end: 1px solid var(--line, #E0D5C4);
}

.wc-block-mini-cart__products-table .wc-block-cart-items__row td.wc-block-cart-item__image,
.wc-block-mini-cart__products-table .wc-block-cart-items__row td.wc-block-cart-item__product,
.wc-block-mini-cart__products-table .wc-block-cart-items__row td.wc-block-cart-item__total {
	display: block;
	padding: 0;
	border: 0;
}

.wc-block-mini-cart__products-table .wc-block-cart-items__row td.wc-block-cart-item__image {
	inline-size: 64px;
}

.wc-block-mini-cart__products-table .wc-block-cart-item__image img {
	inline-size: 64px;
	block-size: 78px;
	object-fit: cover;
	display: block;
	border: 1px solid var(--line, #E0D5C4);
	border-radius: var(--space-xs, 8px);
	background: var(--bg, #FBF8F3);
}

/* 🔒 Garde-fou anti-doublon : une ligne = UN visuel. Seul le premier
   contenu de la cellule s'affiche, quoi que rende WooCommerce ou une
   extension (second lien, second « img », visuel de repli). */
.wc-block-mini-cart__products-table .wc-block-cart-item__image > :not( :first-child ),
.wc-block-mini-cart__products-table .wc-block-cart-item__image img ~ img,
.wc-block-mini-cart__products-table .wc-block-cart-item__image a ~ a {
	display: none;
}

/* Colonne produit : marque au-dessus du nom, comme la page Panier.
   L'ordre est porte par la CELLULE (le wrapper interne n'est pas
   toujours interpose par WooCommerce, constat de recette 2026-07-30). */
.wc-block-mini-cart__products-table .wc-block-cart-items__row td.wc-block-cart-item__product {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.wc-block-mini-cart__products-table .wc-block-cart-item__wrap,
.wc-block-mini-cart__products-table .wc-block-components-product-metadata,
.wc-block-mini-cart__products-table .wc-block-components-product-details {
	display: contents;
}

/* Specificite volontairement portee a (0,3,0) : sur les pages
   WooCommerce, boutique.css est charge APRES cette feuille et ecrit la
   meme regle en (0,2,0) pour la page Panier (nom en 21 px). Sans ce
   troisieme ancrage, le tiroir n'aurait pas la meme tenue selon la page. */
.wc-block-mini-cart__products-table .wc-block-cart-item__product .wc-block-components-product-name {
	order: 0;
	font-family: var(--ff-display, serif);
	font-weight: 600;
	font-size: var(--t-lead, 18px);
	line-height: 1.2;
	color: var(--ink, #2A2521);
	text-decoration: none;
}

.wc-block-mini-cart__products-table .wc-block-cart-item__product .wc-block-cart-item__prices {
	order: 1;
	margin: 0;
	font-size: var(--t-small, 13px);
	color: var(--ink-xsoft, #746F68);
}

.wc-block-mini-cart__products-table .wc-block-cart-item__product .wc-block-components-product-details > * {
	order: 2;
	display: block;
	margin: 0;
	font-size: var(--t-small, 13px);
	color: var(--ink-xsoft, #746F68);
}

/* La marque prend le role « overline » de la charte (§5.5). */
.wc-block-mini-cart__products-table .wc-block-cart-item__product .wc-block-components-product-details > .wc-block-components-product-details__marque {
	order: -1;
	font-size: var(--t-overline, 11px);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--or-deep, #876A3C);
	margin-block-end: var(--space-xs, 4px);
}

/* Le libelle « Marque : » est redondant a l'affichage. */
.wc-block-mini-cart__products-table .wc-block-components-product-details__marque
	.wc-block-components-product-details__name {
	display: none;
}

/* L'extrait de fiche produit n'a pas sa place dans le tiroir. */
.wc-block-mini-cart__products-table .wc-block-components-product-metadata__description {
	display: none;
}

.wc-block-mini-cart__products-table .wc-block-cart-item__quantity {
	order: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-m, 14px);
	margin-block-start: var(--space-s, 12px);
	padding: 0;
}

.wc-block-mini-cart__products-table .wc-block-cart-item__total {
	justify-self: end;
	text-align: end;
	white-space: nowrap;
	font-family: var(--ff-display, serif);
	font-weight: 600;
	color: var(--ink, #2A2521);
}

/* Bouton « Rendez-vous » : declinaison sombre compacte de la charte
   bouton (base commune dans theme.json > styles.elements.button,
   memes tokens que .btn--sombre / .btn--sm de composants.css). */
.entete__rdv .wp-block-button__link {
	background: var(--ink, #2A2521);
	color: var(--surface, #F7F3EC);
	padding-block: var(--space-s, 11px);
	padding-inline: var(--space-l, 20px);
	font-size: var(--t-overline, 11.5px);
	letter-spacing: 0.13em;
	transition: background 0.4s var(--ease, ease);
}

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

/* Sous 1000px : le bouton RDV cede la place a la barre collante.
   L'icone compte, elle, reste visible a toutes les largeurs (trio
   compte | panier | menu de la maquette mobile).
   Double classe : la regle de layout generee (.wp-block-buttons-is-layout-flex,
   display:flex) est imprimee apres cette feuille — sans elle, le
   display:none perdrait (meme cas que .barre-rdv plus bas). */
@media (max-width: 999.98px) {

	.wp-block-buttons.entete__rdv {
		display: none;
	}
}


/* ================================================================
   5. Barre RDV collante (mobile) — lien Planity lie par Bindings
   ================================================================ */

/* Double classe : la regle de layout generee (.wp-container-*, gap/flex)
   est imprimee apres cette feuille — sans elle, le display:none perdrait. */
.wp-block-buttons.barre-rdv {
	display: none;
}

@media (max-width: 999.98px) {

	.wp-block-buttons.barre-rdv {
		display: block;
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 70;
		margin: 0;
	}

	.barre-rdv .wp-block-button {
		width: 100%;
		margin: 0;
	}

	.barre-rdv .wp-block-button__link {
		display: block;
		width: 100%;
		border-radius: 0;
		background: var(--ink, #2A2521);
		color: var(--surface, #F7F3EC);
		text-align: center;
		font-size: var(--t-overline, 12px);
		letter-spacing: 0.12em;
		padding-block: var(--space-m, 15px);
	}

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


/* ================================================================
   6. Pied de page — sombre, 3 colonnes, barre legale
   ----------------------------------------------------------------
   Les coordonnees (telephone, horaires, adresse) sont des blocs core
   LIES a la source idouceur/identite : ici on ne fait qu'habiller.
   Opacites creme sur fond sombre : litteraux toleres (§5.5).
   ================================================================ */

.pied {
	border-block-start: 1px solid rgba(247, 243, 236, 0.09);
}

.pied__colonnes {
	gap: 0;
}

.pied__colonne {
	padding: var(--space-2xl, 48px) var(--space-2xl, 40px);
	border-inline-end: 1px solid rgba(247, 243, 236, 0.1);
}

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

.pied__logo img {
	max-height: 88px;
	width: auto;
}

/* Baseline sous le logo : petites majuscules tres espacees. */
.pied__baseline {
	font-size: 10px;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: rgba(247, 243, 236, 0.5);
	margin-block: var(--space-s, 12px) 0;
}

/* Rangee libelle dore + valeur (telephone, adresse, stationnement).
   Double classe : gagne sur le gap:0 genere par le blockGap global (§4). */
.wp-block-group.pied__ligne {
	gap: var(--space-xs, 8px);
	margin-block-start: var(--space-l, 20px);
	align-items: baseline;
}

.pied__libelle {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-weight: 500;
	font-size: var(--t-small, 15px);
	color: var(--or, #A8895E);
	min-inline-size: 90px;
	margin: 0;
}

.pied__libelle--large {
	min-inline-size: 104px;
}

.pied__valeur {
	font-size: var(--t-small, 14px);
	color: rgba(247, 243, 236, 0.82);
	margin: 0;
}

/* Horaires : tableau rendu par le bloc « idouceur/horaires » (composition et
   regroupement des jours dans inc/reglages.php, §5.5 ; styles propres au bloc
   dans blocks/build/horaires/style-index.css). Ici, uniquement sa place dans
   la colonne du pied et la teinte creme du fond sombre. */
.pied__horaires {
	margin-block-start: var(--space-m, 16px);
	color: rgba(247, 243, 236, 0.82);
}

/* Reseaux sociaux : pastilles rondes cerclees, remplies d'or au survol. */
.wp-block-social-links.pied__social {
	margin-block-start: var(--space-l, 24px);
	gap: var(--space-s, 12px);
}

.pied__social .wp-social-link {
	border: 1px solid rgba(247, 243, 236, 0.25);
	border-radius: var(--r-pill, 999px);
	transition: background 0.4s var(--ease, ease), border-color 0.4s var(--ease, ease);
}

.pied__social .wp-social-link a {
	color: var(--surface, #F7F3EC);
	padding: var(--space-xs, 8px);
}

.pied__social .wp-social-link:hover,
.pied__social .wp-social-link:focus-within {
	background: var(--or, #A8895E);
	border-color: var(--or, #A8895E);
	transform: none;
}

/* Titres de colonnes (Navigation / Nous trouver). */
.pied__titre {
	font-family: var(--ff-display, 'Cormorant Garamond', serif);
	font-size: var(--t-h4, 20px);
	font-weight: 600;
	color: var(--surface, #F7F3EC);
	margin-block: 0 var(--space-m, 18px);
}

/* Menu du pied : liens creme -> or. */
.pied__nav {
	font-size: var(--t-small, 14px);
}

.pied__nav .wp-block-navigation__container {
	gap: var(--space-s, 11px);
}

.pied__nav .wp-block-navigation-item__content {
	color: rgba(247, 243, 236, 0.78);
	transition: color 0.3s var(--ease, ease);
}

.pied__nav .wp-block-navigation-item__content:hover,
.pied__nav .wp-block-navigation-item__content:focus-visible {
	color: var(--or, #A8895E);
}

/* Encadre de la carte Google Maps. */
.pied__carte {
	margin-block-start: var(--space-m, 18px);
	border: 1px solid rgba(247, 243, 236, 0.14);
	border-radius: var(--r-m, 10px);
	overflow: hidden;
	line-height: 0;
}

.pied__carte iframe {
	display: block;
	width: 100%;
	height: 190px;
	border: 0;
	filter: grayscale(0.25);
}

/* Barre legale : copyright + liens juridiques. */
.wp-block-group.pied__legal {
	border-block-start: 1px solid rgba(247, 243, 236, 0.12);
	padding-block: var(--space-l, 20px);
	gap: var(--space-m, 16px);
	flex-wrap: wrap;
	font-size: var(--t-overline, 12.5px);
	color: rgba(247, 243, 236, 0.62);
}

.pied__copyright {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

.pied__nav-legal {
	font-size: var(--t-overline, 12.5px);
}

.pied__nav-legal .wp-block-navigation__container {
	gap: var(--space-m, 18px);
}

.pied__nav-legal .wp-block-navigation-item__content {
	color: rgba(247, 243, 236, 0.62);
	transition: color 0.3s var(--ease, ease);
}

.pied__nav-legal .wp-block-navigation-item__content:hover,
.pied__nav-legal .wp-block-navigation-item__content:focus-visible {
	color: var(--or, #A8895E);
}

/* Empilement mobile : les colonnes du bloc columns s'empilent seules
   (< 782px, comportement core) ; on retire alors les filets verticaux. */
@media (max-width: 781px) {

	.pied__colonne {
		border-inline-end: 0;
		padding: var(--space-xl, 32px) var(--space-l, 24px);
		border-block-end: 1px solid rgba(247, 243, 236, 0.1);
	}

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

	/* Laisser la barre RDV collante ne rien masquer en bas de page.
	   Exception a la demi-echelle mobile (fin de « tokens.css ») : ce
	   n'est pas du rythme, c'est la hauteur de la barre fixe (~50 px).
	   A 32 px, la mention legale passerait DERRIERE elle — on repasse
	   donc la valeur pleine. */
	.pied__legal {
		padding-block-end: var(--espace-plein-3xl, 64px);
	}
}


/* ================================================================
   7. Variantes tunnel e-commerce (parts *-checkout, alleges)
   ================================================================ */

/* En-tete du tunnel : logo · « Commande securisee » · retour au panier
   (maquette « Commande »). Les trois zones sont reparties, le libelle
   central reste centre grace aux deux colonnes laterales de meme poids. */
.entete--tunnel .entete__barre--tunnel {
	justify-content: space-between;
	align-items: center;
	gap: var(--space-l, 24px);
	padding-block: var(--space-m, 16px);
}

.entete--tunnel .entete__logo,
.entete--tunnel .entete__retour {
	flex: 1 1 0;
}

.entete--tunnel .entete__retour {
	justify-content: flex-end;
}

/* Mention de reassurance centrale — cadenas en masque CSS (zero requete
   reseau, §19/§20). */
.entete--tunnel .entete__securite {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs, 8px);
	margin: 0;
	font-size: var(--t-overline, 12px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-soft, #5C534A);
	white-space: nowrap;
}

.entete--tunnel .entete__securite::before {
	content: "";
	flex: none;
	inline-size: 14px;
	block-size: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='5' y='11' width='14' height='9' rx='1.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='5' y='11' width='14' height='9' rx='1.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Le retour au panier est un core/button (URL liee, §26) rendu en lien
   texte : on neutralise le fond dore du bouton core. */
.entete--tunnel .entete__retour .wp-block-button__link {
	padding: 0;
	min-block-size: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--ink-soft, #5C534A);
	font-size: var(--t-small, 13px);
	letter-spacing: 0.06em;
	text-transform: none;
}

.entete--tunnel .entete__retour .wp-block-button__link:hover,
.entete--tunnel .entete__retour .wp-block-button__link:focus-visible {
	background: none;
	color: var(--or-deep, #876A3C);
	transform: none;
	box-shadow: none;
}

/* Sur la page Panier, « Retour au panier » n'a pas de sens. */
.woocommerce-cart .entete--tunnel .entete__retour {
	visibility: hidden;
}

/* Mobile : le libelle central passe a la ligne sous le logo. */
@media (max-width: 640px) {
	.entete--tunnel .entete__barre--tunnel {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-s, 12px);
	}

	.entete--tunnel .entete__logo,
	.entete--tunnel .entete__retour {
		flex: none;
	}

	.entete--tunnel .entete__securite {
		order: 3;
		inline-size: 100%;
		justify-content: center;
	}
}

.pied--tunnel .pied__legal--tunnel {
	border-block-start: 0;
	padding-block: var(--space-l, 24px);
	align-items: baseline;
}

.pied--tunnel .pied__ligne--tunnel {
	margin-block-start: 0;
}

.pied--tunnel .pied__libelle {
	min-inline-size: 0;
}


/* ================================================================
   8. Mouvement reduit (§21) — aucune animation imposee
   ================================================================ */

@media (prefers-reduced-motion: reduce) {

	.entete__logo img,
	.entete__nav .wp-block-navigation-item__content,
	.entete__nav .wp-block-navigation-item__content::after,
	.entete__rdv .wp-block-button__link,
	.pied__social .wp-social-link,
	.pied__nav .wp-block-navigation-item__content,
	.pied__nav-legal .wp-block-navigation-item__content {
		transition: none;
	}

	.entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		animation: none;
	}
}

/* =========================================================================
   Bandeau d'annonces (ajout du 2026-11-03)
   Markup : inc/cpt.php (idouceur_afficher_bandeau_annonces), sorti sur
   wp_body_open, au-dessus du header collant : il defile avec la page.
   Comportement : assets/js/idouceur-header.js (dates + defilement).
   ========================================================================= */
.bandeau-annonces {
	background: var(--ink, #2A2521);
	color: var(--surface, #F7F3EC);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

.bandeau-annonces[hidden],
.bandeau-annonces__item[hidden],
.bandeau-annonces__pause[hidden] {
	display: none;
}

.bandeau-annonces__cadre {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 1180px;
	min-height: 40px;
	margin-inline: auto;
	padding: 10px 48px;
}

/* Les annonces s'empilent dans la meme cellule : la hauteur du bandeau est
   celle de la plus longue, rien ne saute pendant le defilement. */
.bandeau-annonces__liste {
	display: grid;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bandeau-annonces__item {
	grid-area: 1 / 1;
	text-align: center;
	transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
}

/* Avec JS : seule l'annonce courante est visible (et atteignable au clavier). */
.bandeau-annonces.is-pret .bandeau-annonces__item:not(.is-courante) {
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
}

/* Sans JS : seule la premiere annonce active est visible. */
.bandeau-annonces:not(.is-pret) .bandeau-annonces__item:not([hidden]) ~ .bandeau-annonces__item {
	display: none;
}

.bandeau-annonces__lien {
	margin-inline-start: 0.5em;
	color: inherit;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.bandeau-annonces__lien:hover {
	text-decoration-thickness: 2px;
}

.bandeau-annonces__lien:focus-visible,
.bandeau-annonces__pause:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.bandeau-annonces__pause {
	position: absolute;
	top: 50%;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 0.625rem;
	opacity: 0.7;
	cursor: pointer;
	transform: translateY(-50%);
}

.bandeau-annonces__pause:hover {
	opacity: 1;
}

@media (max-width: 640px) {
	.bandeau-annonces {
		font-size: 0.75rem;
	}

	.bandeau-annonces__cadre {
		padding: 8px 44px 8px 16px;
	}

	.bandeau-annonces__item {
		text-align: left;
	}
}

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

	.bandeau-annonces.is-pret .bandeau-annonces__item:not(.is-courante) {
		transform: none;
	}
}


/* =========================================================================
   Bascule automatique de la navigation (ajout du 2026-11-03)
   Au-dessus de 1000px, assets/js/idouceur-header.js mesure si la barre de
   navigation tient sur une ligne. Si ce n'est pas le cas (lien ajoute,
   intitule plus long, police plus large), il pose html.idouceur-nav-compacte : les
   regles mobiles ci-dessous (copies des blocs « max-width: 999.98px »
   plus haut) prennent le relais et le menu passe en tiroir.
   Les regles desktop (min-width: 1000px) sont neutralisees par
   html:not(.idouceur-nav-compacte).
   🔴 Toute modification d'un bloc mobile plus haut doit etre reportee ici.
   ========================================================================= */
@media (min-width: 1000px) {

	html.idouceur-nav-compacte .wp-block-group.entete__barre {
		gap: var(--space-m, 16px);
	}

	html.idouceur-nav-compacte .entete__barre > .entete__logo {
		order: 1;
		margin-inline-end: auto;
	}

	html.idouceur-nav-compacte .wp-block-group.entete__actions {
		order: 2;
		margin-top: 0;
	}

	html.idouceur-nav-compacte .wp-block-navigation.entete__nav {
		order: 3;
		margin-top: 0;
	}
}

@media (min-width: 1000px) {

	html.idouceur-nav-compacte .entete__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	html.idouceur-nav-compacte .entete__nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	
	/* Le bloc Navigation pilote l'alignement de son overlay par deux
	   variables posees par la classe de layout (.items-justified-center
	   du mode barre) : le core s'en sert dans PLUSIEURS regles internes
	   (contenu du dialogue, conteneur, items). On reprend la main a la
	   source — une seule declaration au lieu d'une surcharge par regle. */
html.idouceur-nav-compacte .wp-block-navigation.entete__nav {
		--navigation-layout-align: stretch;
		--navigation-layout-justification-setting: flex-start;
		--navigation-layout-justify: flex-start;
		--navigation-layout-direction: column;
	}

	
	/* Conteneur ouvert = voile sombre plein ecran. Le core lui pose un
	   padding calque sur les marges racine : le tiroir doit toucher les
	   bords, on le remet a zero. */
html.idouceur-nav-compacte .entete__nav .wp-block-navigation__responsive-container.is-menu-open {
		background: rgba(42, 37, 33, 0.45);
		padding: 0;
		align-items: stretch;
		justify-content: flex-start;
		overflow: hidden;
	}

	
	/* Enveloppe intermediaire du core (`__responsive-close`) : elle est
	   centree et bornee a la largeur « large » du site des que le corps
	   porte .has-modal-open. Sans cette remise a plat, le tiroir ne peut
	   ni occuper toute la largeur en telephone, ni se coller a droite en
	   tablette. */
html.idouceur-nav-compacte .entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		display: flex;
		justify-content: flex-end;
		flex: 1 1 auto;
		inline-size: 100%;
		max-inline-size: none;
		min-block-size: 0;
		margin: 0;
	}

	
	/* Le tiroir lui-meme. En telephone il couvre toute la largeur
	   (maquette) ; le panneau lateral n'apparait qu'en tablette.
	   C'est LUI qui defile (le voile, lui, ne bouge pas) : hauteur
	   bornee a l'ecran + defilement interne contenu.

	   `margin-top` : le core decale le tiroir de 46px quand la barre
	   d'admin est la — d'ou un bandeau clair au-dessus du menu. Sous
	   600px cette barre n'est PAS fixe (elle defile avec la page), le
	   decalage n'a donc aucune utilite ici et le tiroir doit toucher
	   le haut de l'ecran (maquette). */
html.idouceur-nav-compacte .wp-block-navigation.entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		display: flex;
		flex-direction: column;
		inline-size: 100%;
		block-size: 100%;
		margin-top: 0;
		background: var(--surface, #F7F3EC);
		padding: var(--space-l, 26px) var(--space-l, 24px) var(--space-xl, 32px);
		overflow-y: auto;
		overscroll-behavior: contain;
		animation: idouceur-tiroir 0.45s var(--ease, ease);
	}

	
	/* Colonne pleine hauteur : c'est ce qui permet au pied du tiroir
	   (bouton RDV + telephone) de se coller en bas via margin auto.
	   Le core reserve ici un padding haut de « 2rem + 24px » pour sa
	   croix de fermeture ; notre ligne de logo joue ce role. */
html.idouceur-nav-compacte .entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		align-items: stretch;
		padding-block-start: 0;
	}

	
	/* La liste. Le bloc Navigation garde ici le layout du mode barre
	   (justifyContent center + gap de la section 2) : sans neutralisation,
	   les items se centrent et leur filet ne fait que la largeur du texte.
	   Double classe pour passer devant la regle .wp-container-* imprimee
	   apres cette feuille. */
html.idouceur-nav-compacte .wp-block-navigation.entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		order: -1;
		flex: 1 1 auto;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		text-align: start;
		gap: 0;
		margin-top: var(--space-xs, 8px);
	}

	
	/* Ligne d'en-tete du tiroir : logo a gauche, croix de fermeture a
	   droite (celle-ci est positionnee en absolu par le core, d'ou la
	   reserve d'espace a droite). Le logo est un bloc core/site-logo
	   pose DANS le bloc Navigation (blocs autorises), donc editable en
	   Site Editor comme le reste — aucun visuel en dur (§1, §6.0).
	   Le core l'enveloppe dans un <li> de la liste : le filet de
	   separation vient de ce <li> (regle des items ci-dessous), pas du
	   bloc logo — sinon double trait. */
html.idouceur-nav-compacte .entete__nav .wp-block-navigation__responsive-container.is-menu-open .tiroir__logo {
		margin: 0;
		padding-block-end: var(--space-m, 14px);
		/* Valeur pleine, hors demi-echelle mobile (fin de « tokens.css ») :
		   cette reserve n'est pas du rythme, c'est la place du bouton de
		   fermeture pose en absolu par le core. Divisee, le logo passerait
		   dessous. */
		padding-inline-end: var(--espace-plein-2xl, 40px);
		text-align: start;
	}

	html.idouceur-nav-compacte .entete__nav .wp-block-navigation__responsive-container.is-menu-open .tiroir__logo img {
		max-height: 50px;
		width: auto;
	}

	
	/* Items du tiroir : Cormorant, grands, separes d'un filet beige. */
html.idouceur-nav-compacte .entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		inline-size: 100%;
		border-block-end: 1px solid var(--line, #E0D5C4);
	}

	html.idouceur-nav-compacte .entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* Le core fait du <li> un conteneur flex : sans cette ligne le lien
		   se dimensionne sur son texte et seule cette largeur est cliquable.
		   Il occupe donc toute la ligne (zone de tap pleine largeur). */
		inline-size: 100%;
		min-inline-size: 0;
		/* 🔒 « inline-size: 100% » PLUS un padding lateral : sans border-box
		   le lien mesure plus large que sa ligne et deborde le tiroir
		   (meme piege que les chips de la boutique, v1.22.0). */
		box-sizing: border-box;
		font-family: var(--ff-display, 'Cormorant Garamond', serif);
		font-size: var(--t-h4, 22px);
		font-weight: 500;
		letter-spacing: 0;
		text-transform: none;
		color: var(--ink, #2A2521);
		line-height: 1.25;
		padding-block: var(--space-m, 15px);
		padding-inline: var(--space-xs, 4px);
	}

	
	/* « Vos besoins » = lien + bascule (maquette). Le lien reste un lien
	   (il mene a /vos-besoins/) ; le chevron est un bouton pose par
	   idouceur-header.js, section 3 — l'icone native du core, simple
	   <span> non cliquable, est masquee au profit de ce bouton. */
html.idouceur-nav-compacte .entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
		position: relative;
	}

	
	/* Le lien couvre desormais toute la ligne, y compris sous la bascule
	   (posee en absolu, donc au-dessus : le chevron reste cliquable).
	   Reserve d'espace pour que le libelle ne passe pas dessous. */
html.idouceur-nav-compacte .entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
		padding-inline-end: 56px;
	}

	html.idouceur-nav-compacte .entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
		display: none;
	}

	html.idouceur-nav-compacte .entete__nav .wp-block-navigation__responsive-container.is-menu-open .tiroir__bascule {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		/* Hauteur bornee a la premiere ligne : le <li> parent englobe
		   aussi le sous-menu deplie, un bouton en hauteur 100 % couvrirait
		   les sous-liens et les rendrait inclicables. */
		inline-size: 56px;
		block-size: calc(var(--space-m, 15px) * 2 + 1.25 * var(--t-h4, 22px));
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		font-family: var(--ff-text, 'Jost', sans-serif);
		font-size: var(--t-h4, 26px);
		font-weight: 300;
		line-height: 1;
		color: var(--or-deep, #876A3C);
	}

	html.idouceur-nav-compacte .entete__nav .wp-block-navigation__responsive-container.is-menu-open .tiroir__bascule::before {
		content: "\25BE";
		display: block;
		transition: transform 0.35s var(--ease, ease);
	}

	html.idouceur-nav-compacte .entete__nav .wp-block-navigation__responsive-container.is-menu-open .tiroir__bascule[aria-expanded="true"]::before {
		transform: rotate(180deg);
	}

	
	/* Sous-menu replie par defaut. Le core force son affichage dans
	   l'overlay (position statique, visible) : on reprend la main avec
	   une specificite superieure plutot qu'un !important. */
html.idouceur-nav-compacte .wp-block-navigation.entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		display: none;
	}

	
	/* Le core pose sur ce conteneur, dans l'overlay, un retrait gauche de
	   2rem et un padding haut egal au blockGap : les deux sont remis aux
	   valeurs de la maquette (retrait de 8px, aucun sur-espacement). */
html.idouceur-nav-compacte .wp-block-navigation.entete__nav .wp-block-navigation__responsive-container.is-menu-open .has-child.est-ouvert > .wp-block-navigation__submenu-container {
		display: block;
		min-width: 0;
		padding-block: 0 var(--space-s, 10px);
		padding-inline-start: var(--space-s, 8px);
	}

	
	/* Sous-liens (mega-menu replie en liste) : Jost, plus petits. */
html.idouceur-nav-compacte .entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-block-end: 0;
	}

	html.idouceur-nav-compacte .entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		/* Meme raison qu'au niveau 1 : le <li> est flex, le lien doit
		   occuper toute la largeur pour que la ligne entiere soit cliquable. */
		inline-size: 100%;
		min-inline-size: 0;
		/* 🔒 Meme raison qu'au niveau 1 : largeur pleine + padding lateral. */
		box-sizing: border-box;
		font-family: var(--ff-text, 'Jost', sans-serif);
		font-size: var(--t-small, 15px);
		font-weight: 300;
		line-height: 1.4;
		color: var(--ink-soft, #5C534A);
		padding-block: var(--space-s, 10px);
		padding-inline: var(--space-s, 8px);
	}

	
	/* Croix de fermeture : le core la place en absolu au coin du tiroir
	   (inset 0). On la ramene dans l'axe de la ligne de logo. */
html.idouceur-nav-compacte .entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		inset-block-start: var(--space-l, 26px);
		inset-inline-end: var(--space-l, 24px);
		color: var(--ink-soft, #5C534A);
	}

	
	/* Pied du tiroir : bouton RDV + numero, colles en bas de la colonne.
	   Les deux liens sont des core/button lies a la source
	   « idouceur/identite » (URL Planity, telephone + tel:) — le client
	   n'edite ces valeurs qu'une fois, dans les reglages (§10.1, §26). */
html.idouceur-nav-compacte .wp-block-buttons.tiroir__pied {
		order: 1;
		display: flex;
		flex-direction: column;
		gap: var(--space-s, 12px);
		margin-block-start: auto;
		padding-block-start: var(--space-l, 18px);
		border-block-start: 1px solid var(--line, #E0D5C4);
	}

	html.idouceur-nav-compacte .tiroir__pied .wp-block-button__link {
		display: block;
		width: 100%;
		background: var(--ink, #2A2521);
		color: var(--surface, #F7F3EC);
		border-radius: var(--r-s, 5px);
		text-align: center;
		font-size: var(--t-overline, 12px);
		letter-spacing: 0.12em;
		padding-block: var(--space-m, 15px);
	}

	
	/* Le numero n'est pas un bouton plein : lien dore centre (maquette). */
html.idouceur-nav-compacte .tiroir__pied .tiroir__tel .wp-block-button__link {
		background: none;
		color: var(--or-deep, #876A3C);
		font-family: var(--ff-text, 'Jost', sans-serif);
		font-size: var(--t-small, 13px);
		letter-spacing: 0.02em;
		text-transform: none;
		padding-block: 0;
	}

	
	/* Numero non renseigne en reglages : pas de bouton vide dans le tiroir. */
html.idouceur-nav-compacte .tiroir__pied .tiroir__tel .wp-block-button__link:empty {
		display: none;
	}
}

@media (min-width: 1000px) {

	html.idouceur-nav-compacte .entete__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		inline-size: min(420px, 88vw);
		box-shadow: var(--shadow-card, 0 18px 50px -28px rgba(42, 37, 33, 0.45));
		border-inline-start: 1px solid var(--line, #E0D5C4);
	}
}

@media (min-width: 1000px) {

	html.idouceur-nav-compacte .wp-block-buttons.entete__rdv {
		display: none;
	}
}

@media (min-width: 1000px) {

	html.idouceur-nav-compacte .wp-block-buttons.barre-rdv {
		display: block;
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 70;
		margin: 0;
	}

	html.idouceur-nav-compacte .barre-rdv .wp-block-button {
		width: 100%;
		margin: 0;
	}

	html.idouceur-nav-compacte .barre-rdv .wp-block-button__link {
		display: block;
		width: 100%;
		border-radius: 0;
		background: var(--ink, #2A2521);
		color: var(--surface, #F7F3EC);
		text-align: center;
		font-size: var(--t-overline, 12px);
		letter-spacing: 0.12em;
		padding-block: var(--space-m, 15px);
	}

	html.idouceur-nav-compacte .barre-rdv .wp-block-button__link:hover,
html.idouceur-nav-compacte .barre-rdv .wp-block-button__link:focus-visible {
		background: var(--or-deep, #876A3C);
		color: var(--surface, #F7F3EC);
	}
}