/*
 * Sanoo · en-tête : navigation de la production en trois barres (Univers, Espaces, Rubriques), méga-menus,
 * outils (recherche, compte, panier) et menu mobile. Balisage : inc/entete.php ; comportements :
 * blocks/rubriques/entete.js. Variables --sn-* (charte) uniquement. Point de rupture : 56.25em (900 px).
 */

/* ---------- Une couleur par Espace (classe sur le corps de page et sur chaque Espace) ----------
   --espace : aplat ; --espace-texte : texte sur l'aplat ; --espace-survol : aplat au survol ;
   --espace-pale / --espace-pale-texte : Espace inactif ; --espace-focus : contour de focus sur l'aplat.
   Contrastes (texte normal, 4,5:1 minimum) : blanc sur rouge 5,06:1, blanc sur vert 8,63:1, encre sur jaune 6,45:1,
   rouge foncé sur rouge pâle 5,18:1, vert sur vert pâle 7,01:1, jaune texte sur jaune pâle 4,89:1. */
:root,
.sanoo-espace--boutique {
	--espace: var(--sn-rouge); --espace-texte: var(--sn-blanc); --espace-survol: var(--sn-rouge-fonce); --espace-survol-texte: var(--sn-blanc);
	--espace-pale: var(--sn-rouge-pale); --espace-pale-texte: var(--sn-rouge-fonce); --espace-focus: var(--sn-blanc);
}
.sanoo-espace--cagnotte {
	--espace: var(--sn-vert); --espace-texte: var(--sn-blanc); --espace-survol: var(--sn-vert-fonce); --espace-survol-texte: var(--sn-blanc);
	--espace-pale: var(--sn-vert-pale); --espace-pale-texte: var(--sn-vert); --espace-focus: var(--sn-blanc);
}
.sanoo-espace--club {
	--espace: var(--sn-jaune); --espace-texte: var(--sn-encre); --espace-survol: var(--sn-jaune-pale); --espace-survol-texte: var(--sn-encre);
	--espace-pale: var(--sn-jaune-pale); --espace-pale-texte: var(--sn-jaune-texte); --espace-focus: var(--sn-encre);
}

.sanoo-chevron { width: 8px; height: 8px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
[aria-expanded="true"] > .sanoo-chevron { transform: translateY(2px) rotate(-135deg); }
.sanoo-icone.dashicons { width: 20px; height: 20px; flex: none; font-size: 18px; line-height: 20px; }

/* ---------- Barre 1 : Univers (grand écran ; dans le menu mobile sinon) ---------- */
.sanoo-univers { display: none; background: var(--sn-encre); color: var(--sn-blanc); }
.sanoo-univers__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--sn-sp-4); max-width: 1280px; margin: 0 auto; padding: 0 var(--sn-sp-6); list-style: none; }
/* Large écran : l'Univers actif au centre, les autres alignés à droite (retour client du 23/07/2026). La colonne de
   droite prend la largeur de son texte : l'Univers actif se décale un peu plutôt que de couper les libellés. */
@media (min-width: 80em) {
	.sanoo-univers__liste { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); align-items: center; }
	.sanoo-univers__item { grid-column: 3; justify-self: end; }
	.sanoo-univers__item.is-actif { grid-column: 2; grid-row: 1; justify-self: center; }
}
.sanoo-univers__lien { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--sn-sp-3); color: inherit; font: 700 var(--sn-fs-xs)/1.2 var(--sn-font); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
a.sanoo-univers__lien:hover { text-decoration: underline; text-underline-offset: 4px; }
.sanoo-univers__lien[aria-current] { box-shadow: inset 0 -3px 0 var(--sn-jaune); }
.sanoo-univers__lien:focus-visible { outline: var(--sn-focus-on-dark); outline-offset: -3px; }

/* ---------- Barre 2 : Espaces, colonnes égales ---------- */
.sanoo-espaces__liste { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 0; padding: 0; list-style: none; }
.sanoo-espaces__lien { display: flex; align-items: center; justify-content: center; min-height: var(--sn-target); padding: var(--sn-sp-1) var(--sn-sp-2); background: var(--espace-pale); color: var(--espace-pale-texte); font: 800 var(--sn-fs-s)/1.15 var(--sn-font); font-stretch: var(--sn-stretch-bouton); letter-spacing: 0.04em; text-align: center; text-transform: uppercase; text-decoration: none; }
a.sanoo-espaces__lien:hover,
.sanoo-espaces__item.is-actif > .sanoo-espaces__lien { background: var(--espace); color: var(--espace-texte); }
/* Espace actif : aplat plein et filet bas (repère qui ne tient pas qu'à la couleur), aria-current. */
.sanoo-espaces__item.is-actif > .sanoo-espaces__lien { box-shadow: inset 0 -4px 0 var(--espace-texte); }
.sanoo-espaces__lien:focus-visible { outline: 3px solid var(--sn-encre); outline-offset: -6px; }
.sanoo-espaces__item.is-actif > .sanoo-espaces__lien:focus-visible { outline-color: var(--espace-focus); }

/* ---------- Barre 3 : logo, Rubriques de l'Espace actif, outils, sur la couleur de l'Espace ---------- */
.sanoo-masthead { position: relative; z-index: 40; background: var(--espace); color: var(--espace-texte); }
.sanoo-masthead :focus-visible { outline: 3px solid var(--espace-focus); outline-offset: 2px; }
.sanoo-masthead__inner { position: static; display: flex; align-items: center; gap: var(--sn-sp-1); padding: var(--sn-sp-2) var(--sn-sp-2) var(--sn-sp-2) var(--sn-sp-4); }
.wp-block-sanoo-theme-rubriques { display: contents; }

/* Logo : pastille blanche, proportions de l'image (480 × 177) toujours gardées, signature « ma santé libre » lisible.
   Le lien ne rétrécit jamais (flex: none) et l'image n'est jamais contrainte en largeur (max-width: none). */
.sanoo-masthead__logo { order: 0; flex: none; display: flex; align-items: center; min-height: var(--sn-target); margin-right: auto; padding: 4px var(--sn-sp-2); background: var(--sn-blanc); border-radius: var(--sn-r-controle); }
.sanoo-masthead__logo img { display: block; width: auto; max-width: none; height: 40px; aspect-ratio: 480 / 177; object-fit: contain; filter: none; }
.sanoo-masthead .sanoo-masthead__logo:focus-visible { outline-offset: 3px; }

.sanoo-rubriques { display: none; order: 1; }
.sanoo-masthead__tools { order: 2; display: flex; align-items: center; gap: 0; }
.sanoo-barre__menu { order: 3; }

/* Outils : recherche, compte, panier (core/search, woocommerce/customer-account, mini-cart de sanoo-core). */
.sanoo-masthead__tools .wp-block-search__button,
.sanoo-masthead__tools .wp-block-woocommerce-customer-account a,
.sanoo-masthead__tools .sanoo-mini-panier,
.sanoo-barre__menu {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sn-sp-2);
	min-width: var(--sn-target); min-height: var(--sn-target); margin: 0; padding: 0 var(--sn-sp-2);
	border: 0; border-radius: var(--sn-r-controle); background: transparent; color: var(--espace-texte);
	font: 600 var(--sn-fs-s)/1.2 var(--sn-font); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.sanoo-masthead__tools .wp-block-search__button:hover,
.sanoo-masthead__tools .wp-block-woocommerce-customer-account a:hover,
.sanoo-masthead__tools .sanoo-mini-panier:hover,
.sanoo-barre__menu:hover,
.sanoo-barre__menu[aria-expanded="true"] { background: var(--espace-survol); color: var(--espace-survol-texte); }
.sanoo-masthead__tools svg { width: 24px; height: 24px; flex: none; fill: none; }
.sanoo-masthead__tools .wp-block-search__button svg,
.sanoo-masthead__tools .wp-block-woocommerce-customer-account svg { fill: currentColor; }

/* Icônes du panier et du menu : masque SVG coloré par currentColor. */
.sanoo-masthead__tools .sanoo-mini-panier::before,
.sanoo-barre__menu::before {
	content: ""; width: 24px; height: 24px; flex: none; background: currentColor;
	-webkit-mask: var(--sanoo-icone) center / 24px no-repeat; mask: var(--sanoo-icone) center / 24px no-repeat;
}
.sanoo-masthead__tools .sanoo-mini-panier {
	--sanoo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18l-2 11H5z'/%3E%3Cpath d='M8 9l4-6 4 6'/%3E%3C/svg%3E");
}
/* Texte « Mon panier (n articles) » : masqué visuellement (mais lu) sous 1920 px ; inc/entete.php l'enveloppe. */
.sanoo-masthead__tools .sanoo-mini-panier__texte,
.sanoo-masthead__tools .wp-block-woocommerce-customer-account .label { 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; }
/* Bouton « Menu » : icône et libellé visible dessous, pour tenir en 375 px avec le logo à taille lisible. */
.sanoo-barre__menu {
	--sanoo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
	flex-direction: column; gap: 0; padding: 2px var(--sn-sp-1); border: 2px solid currentColor; font-size: var(--sn-fs-xs); font-weight: 700; line-height: 1.1;
}

/* Recherche dépliable : le champ s'ouvre en barre pleine largeur sous l'en-tête. */
.sanoo-masthead__search { margin: 0; }
.sanoo-masthead__search .wp-block-search__inside-wrapper { border: 0; padding: 0; background: none; }
.sanoo-masthead__search .wp-block-search__input {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 30; box-sizing: border-box; width: 100% !important; max-width: none;
	min-height: 64px; margin: 0; padding: var(--sn-sp-3) max(var(--sn-sp-4), calc((100% - 1280px) / 2 + var(--sn-sp-6)));
	border: 0; border-radius: 0; background: var(--sn-vert-fonce); color: var(--sn-blanc); font-size: var(--sn-fs-m);
}
.sanoo-masthead__search .wp-block-search__input::placeholder { color: var(--sn-vert-pale); opacity: 1; }
.sanoo-masthead .sanoo-masthead__search .wp-block-search__input:focus-visible { outline: var(--sn-focus-on-dark); outline-offset: -6px; }
.sanoo-masthead__search.wp-block-search__searchfield-hidden .wp-block-search__input { visibility: hidden; }

@media (min-width: 56.25em) {
	.sanoo-univers { display: block; }
	.sanoo-espaces__lien { min-height: 48px; font-size: var(--sn-fs-m); }
	/* Toute la largeur utile (pas de plafond à 1280 px) : logo, Rubriques et outils tiennent sur une ligne dès 1280 px,
	   comme en production (lot 9). Les autres barres restent alignées par leur propre marge. */
	.sanoo-masthead__inner { max-width: none; gap: var(--sn-sp-2); padding: var(--sn-sp-2) var(--sn-sp-6); }
	.sanoo-masthead__logo { margin-right: 0; padding: 6px var(--sn-sp-3); }
	.sanoo-masthead__logo img { height: 48px; }
	.sanoo-rubriques { display: block; flex: 1; min-width: 0; }
	.sanoo-barre__menu, .sanoo-tiroir { display: none; }
}
/* Libellés des outils (« Mon compte », « Mon panier (n articles) ») : visibles seulement en très large écran ; en
   dessous, icône seule et texte masqué mais lu (nom accessible), pour laisser la ligne aux Rubriques. */
@media (min-width: 120em) {
	.sanoo-masthead__tools .sanoo-mini-panier__texte,
	.sanoo-masthead__tools .wp-block-woocommerce-customer-account .label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; }
	.sanoo-masthead__tools .sanoo-mini-panier { padding: 0 var(--sn-sp-3); }
	.sanoo-masthead__tools .wp-block-woocommerce-customer-account a { padding: 0 var(--sn-sp-3); }
}

/* ---------- Rubriques (N3) ---------- */
.sanoo-rubriques__liste { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.sanoo-rubriques__item { position: static; }
.sanoo-rubriques__lien { display: inline-flex; align-items: center; gap: 6px; min-height: var(--sn-target); padding: 0 var(--sn-sp-2); border: 0; border-radius: var(--sn-r-controle); background: transparent; color: inherit; font: 700 var(--sn-fs-s)/1.2 var(--sn-font); text-decoration: none; white-space: nowrap; cursor: pointer; }
a.sanoo-rubriques__lien:hover,
.sanoo-rubriques__bouton:hover,
.sanoo-rubriques__bouton[aria-expanded="true"] { background: var(--espace-survol); color: var(--espace-survol-texte); }
.sanoo-rubriques__lien.is-texte { cursor: default; }
.sanoo-rubriques__item.is-actif > .sanoo-rubriques__lien { box-shadow: inset 0 -4px 0 currentColor; }

/* ---------- Méga-menus (N4 onglets verticaux, N5 colonnes) ---------- */
.sanoo-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; background: var(--sn-blanc); color: var(--sn-encre); border-top: 4px solid var(--espace); box-shadow: var(--sn-shadow-superpose); white-space: normal; }
.sanoo-mega[hidden] { display: none; }
.sanoo-mega__inner { display: flex; flex-direction: column; gap: var(--sn-sp-3); max-width: 1280px; margin: 0 auto; padding: var(--sn-sp-4) var(--sn-sp-6) var(--sn-sp-6); }
.sanoo-masthead .sanoo-mega :focus-visible,
.sanoo-tiroir :focus-visible { outline: var(--sn-focus); outline-offset: 2px; }
.sanoo-mega__tout { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--sn-target); color: var(--sn-vert); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.sanoo-mega__contenu--onglets { display: grid; grid-template-columns: minmax(14rem, 1fr) 3fr; gap: var(--sn-sp-5); align-items: start; }
.sanoo-mega__onglets { display: flex; flex-direction: column; gap: var(--sn-sp-1); }
.sanoo-mega__onglet { display: flex; align-items: center; gap: var(--sn-sp-2); width: 100%; min-height: var(--sn-target); padding: var(--sn-sp-2) var(--sn-sp-3); border: 0; border-left: 4px solid transparent; border-radius: 0 var(--sn-r-controle) var(--sn-r-controle) 0; background: var(--sn-papier); color: var(--sn-encre); font: 700 var(--sn-fs-s)/1.3 var(--sn-font); text-align: left; cursor: pointer; }
.sanoo-mega__onglet::after { content: ""; width: 7px; height: 7px; margin-left: auto; flex: none; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.sanoo-mega__onglet:hover { background: var(--sn-papier-2); }
/* Onglet choisi : filet gauche épais, foncé (3:1 au moins sur le fond), et fond plus soutenu. */
.sanoo-mega__onglet[aria-selected="true"] { border-left-color: var(--espace-pale-texte); background: var(--sn-papier-2); }
.sanoo-mega__panneaux { min-width: 0; }
.sanoo-mega__panneau[hidden] { display: none; }

.sanoo-mega__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sn-sp-3) var(--sn-sp-5); }
.sanoo-mega__col { grid-column: span var(--sanoo-col, 12); display: flex; flex-direction: column; gap: var(--sn-sp-3); min-width: 0; }
.sanoo-mega__section { display: flex; flex-direction: column; gap: var(--sn-sp-1); }
.sanoo-mega__titre { margin: 0; font: 700 var(--sn-fs-s)/1.3 var(--sn-font); color: var(--sn-encre); }
.sanoo-mega__intertitre { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sn-sp-2); color: inherit; text-decoration: none; }
a.sanoo-mega__intertitre { min-height: var(--sn-target); text-decoration: underline; text-underline-offset: 4px; }
.sanoo-mega__intertitre__note,
.sanoo-mega__lien__note { flex-basis: 100%; color: var(--sn-encre-3); font-size: var(--sn-fs-xs); font-weight: 400; }
.sanoo-mega__liens { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.sanoo-mega__liens > li { border-bottom: 1px solid var(--sn-filet); }
.sanoo-mega__lien { display: flex; flex-direction: column; justify-content: center; min-height: var(--sn-target); padding: var(--sn-sp-1) 0; color: var(--sn-encre); font-size: var(--sn-fs-s); line-height: 1.35; text-decoration: none; }
a.sanoo-mega__lien:hover { color: var(--sn-vert); text-decoration: underline; text-underline-offset: 4px; }
a.sanoo-mega__lien[aria-current] { font-weight: 700; }
/* Élément sans adresse dans le menu (lien « # » en production) : texte, pas lien. */
.sanoo-mega__lien.is-texte { color: var(--sn-encre-3); }

/* ---------- Menu mobile : <dialog> modal ---------- */
.sanoo-tiroir { position: fixed; inset: 0 auto 0 0; box-sizing: border-box; width: min(100%, 28rem); max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: var(--sn-blanc); color: var(--sn-encre); overflow-y: auto; }
.sanoo-tiroir::backdrop { background: color-mix(in srgb, var(--sn-encre) 60%, transparent); }
.sanoo-tiroir__tete { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--sn-sp-3); padding: var(--sn-sp-2) var(--sn-sp-4); background: var(--espace); color: var(--espace-texte); }
.sanoo-tiroir__titre { margin: 0; font: 800 var(--sn-fs-l)/1.2 var(--sn-font); color: inherit; }
.sanoo-tiroir__fermer { min-height: var(--sn-target); padding: 0 var(--sn-sp-3); border: 2px solid currentColor; border-radius: var(--sn-r-controle); background: transparent; color: inherit; font: 700 var(--sn-fs-s)/1 var(--sn-font); cursor: pointer; }
.sanoo-tiroir .sanoo-tiroir__tete :focus-visible { outline: 3px solid var(--espace-focus); }
.sanoo-tiroir__nav { padding: var(--sn-sp-2) var(--sn-sp-4) var(--sn-sp-4); }
.sanoo-tiroir__liste,
.sanoo-tiroir__sous,
.sanoo-tiroir__univers ul { margin: 0; padding: 0; list-style: none; }
.sanoo-tiroir__item { border-bottom: 1px solid var(--sn-filet); }
.sanoo-tiroir__bouton,
.sanoo-tiroir__lien { display: flex; align-items: center; gap: var(--sn-sp-2); width: 100%; min-height: 48px; padding: var(--sn-sp-2) 0; border: 0; background: none; color: var(--sn-encre); font: 700 var(--sn-fs-m)/1.3 var(--sn-font); text-align: left; text-decoration: none; cursor: pointer; }
.sanoo-tiroir__lien.is-texte { color: var(--sn-encre-3); cursor: default; }
.sanoo-tiroir__bouton .sanoo-chevron { margin-left: auto; }
.sanoo-tiroir__bouton--n4 { padding-left: var(--sn-sp-3); font-size: var(--sn-fs-s); }
.sanoo-tiroir__bouton--n4[aria-expanded="true"] { box-shadow: inset 4px 0 0 var(--espace-pale-texte); }
.sanoo-tiroir__zone { padding: 0 0 var(--sn-sp-3); }
.sanoo-tiroir__zone[hidden] { display: none; }
.sanoo-tiroir__sous > li + li { border-top: 1px solid var(--sn-filet); }
.sanoo-tiroir__zone .sanoo-mega__grille { display: flex; flex-direction: column; gap: var(--sn-sp-3); padding-left: var(--sn-sp-3); }
.sanoo-tiroir__zone .sanoo-tiroir__zone .sanoo-mega__grille { padding-left: var(--sn-sp-5); }
.sanoo-tiroir__univers { padding: var(--sn-sp-3) var(--sn-sp-4) var(--sn-sp-5); background: var(--sn-papier); }
.sanoo-tiroir__univers-lien { display: flex; align-items: center; min-height: var(--sn-target); color: var(--sn-encre); font: 700 var(--sn-fs-xs)/1.3 var(--sn-font); letter-spacing: 0.04em; text-transform: uppercase; }
.sanoo-tiroir__univers-lien[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }