/**
 * Dahu Theme Annad 2026 — header.
 *
 * Mobile-first. Breakpoint unique du thème : 64em (1024px) — navigation desktop
 * au-dessus, hamburger + menu mobile en dessous. (Les custom properties ne sont pas
 * utilisables dans les media queries : la valeur est répétée en dur, garder 64em partout.)
 *
 * Custom properties : les couleurs pointent vers les variables que WordPress génère à partir de
 * la palette de theme.json — seule source de vérité des valeurs hex (légende du canvas Figma).
 * WordPress dérive la variable du champ « slug » de la palette (pas du libellé) :
 *   fond → --wp--preset--color--fond                     (COULEUR HEADER / FOOTER)
 *   surface → --wp--preset--color--surface               (COULEUR BACKGROUND)
 *   surface-claire → --wp--preset--color--surface-claire (COULEUR BACKGROUND CLAIR)
 *   accent → --wp--preset--color--accent                 (COULEUR CTA PRINCIPAL)
 *   vert-annad → --wp--preset--color--vert-annad         (COULEUR VERT ANNAD)
 *   texte-clair → --wp--preset--color--texte-clair       (hors légende, texte clair)
 * Ces variables sont imprimées par WordPress (global styles) en front et dans l'éditeur.
 * Ce fichier est chargé en premier (dépendance des autres CSS du thème) : les alias --color-*
 * utilisés par tout le thème vivent ici.
 */

:root {
	/* Couleurs de base (alignées sur la palette sombre pour rester lisibles sur --color-bg) */
	--color-primary: var(--wp--preset--color--surface-claire); /* focus visibles, badge panier, bouton newsletter */
	--color-text: var(--wp--preset--color--texte-clair);
	--color-text-muted: var(--wp--preset--color--surface-claire);
	--color-bg: var(--wp--preset--color--fond); /* Figma : COULEUR HEADER / FOOTER */
	--color-bg-alt: var(--wp--preset--color--fond); /* fond du footer */
	--color-border: var(--wp--preset--color--accent);
	--color-overlay: rgba(0, 0, 0, 0.5);
	--color-on-primary: var(--wp--preset--color--fond);

	/* Fiche produit */
	--color-accent: var(--wp--preset--color--accent); /* Figma : COULEUR CTA PRINCIPAL (fond des CTA) */
	--color-on-accent: var(--wp--preset--color--texte-clair);
	--color-surface: var(--wp--preset--color--surface); /* Figma : COULEUR BACKGROUND — fond général des pages */
	--color-surface-2: var(--wp--preset--color--surface-2); /* grands blocs et panneaux posés sur le fond des pages (mesuré sur la maquette) */
	--color-surface-3: var(--wp--preset--color--surface-3); /* petites cartes internes à un bloc (badges, cartes FAQ, cartes suggérées, cartes avis) */
	--color-faq-bg: var(--wp--preset--color--fond-faq); /* fond du bloc FAQ produit uniquement */
	--color-on-surface: var(--wp--preset--color--texte-clair);
	--color-surface-light: var(--wp--preset--color--surface-claire); /* Figma : COULEUR BACKGROUND CLAIR */
	--color-on-surface-light: var(--wp--preset--color--fond);

	/* Zone claire (Mon compte, FAQ, Panier) : exception claire assumée, utilisée uniquement sous
	   .annad-light-page (light-zone.css). Valeurs internes aux gabarits, volontairement hors palette
	   theme.json (non proposées aux blocs). */
	--color-light-bg: #E1E1E1;
	--color-light-card-top: #D4D4D4;
	--color-light-card-bottom: #D1D1D1;
	--color-light-field: var(--wp--preset--color--blanc);

	/* Étoiles et barres des avis (maquette : doré) */
	--color-stars: var(--wp--preset--color--or-avis);

	/* Highlight de marque — distinct de --color-accent (réservé au fond des CTA) */
	--color-brand-green: var(--wp--preset--color--vert-annad); /* Figma : COULEUR VERT ANNAD */
	--color-on-brand-green: var(--wp--preset--color--fond);

	/* Typographie : Montserrat (theme.json, fontFamilies « montserrat »).
	   Montserrat auto-hébergée (assets/css/fonts.css) ; repli pile système si les woff2 manquent. */
	--font-body: var(--wp--preset--font-family--montserrat);
	--font-heading: var(--font-body);

	/* Mise en page */
	--container-max: 80rem;
	--gutter: 1rem;
	--header-height: 4rem;
	/* Réglables dans Personnaliser > Réglages Annad > Apparence (inc/appearance.php) */
	--annad-body-size: 1rem; /* taille du texte courant */
	--radius: 0;
	--radius-large: 1.25rem; /* panneaux et cartes arrondis de la maquette (aussi dans theme.json : custom.radius-large) */
	--shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
	--transition-duration: 0.25s;
	--transition: var(--transition-duration) ease;

	/* Transitions d'apparition / disparition (modèle du tiroir d'onglets : 300 ms, ease-out, élément
	   retiré du rendu — visibility — seulement à la fin de la transition). Mises à 0s sous
	   prefers-reduced-motion : tout composant qui les utilise devient instantané. */
	--annad-transition-fast: 150ms; /* survols, bascules courtes (catégories du mega menu) */
	--annad-transition-base: 300ms; /* panneaux, sous-menus, accordéons */
	--annad-ease: ease-out;
	--annad-panel-shift: 0.5rem; /* léger déplacement vertical à l'ouverture des panneaux */

	/* Empilement */
	--z-header: 100;
	--z-dropdown: 110;
	--z-mobile-menu: 1000;
}

@media (min-width: 64em) {
	:root {
		--gutter: 2rem;
		--header-height: 5rem;
	}
}

body {
	font-family: var(--font-body);
	font-size: var(--annad-body-size);
	font-weight: 400;
	color: var(--color-text);
	/* Maquette : pages sur --color-surface ; header et footer restent sur --color-bg */
	background-color: var(--color-surface);
}

/* Titres : Montserrat 700 par défaut, interlignage resserré sur les grands titres uniquement
   (maquette Figma : hauteur de ligne ~97% sur les titres, ~150% sur le texte courant). */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.15;
}

h1 {
	font-weight: 800;
	line-height: 1;
}

/* Format de texte « Vert Annad » (éditeur de blocs, assets/js/editor-formats.js) — utilisable partout */
.is-brand {
	color: var(--color-brand-green);
}

/* ---------- Banderole d'annonce (inc/banderole.php, Personnaliser > Réglages Annad > Banderole) ---------- */

/* Sans couleur choisie : vert Annad, texte foncé. Avec une couleur, --annad-banderole-bg est posée
   sur l'élément et le texte passe en blanc ou en noir selon sa luminance (classe posée en PHP) :
   noir et blanc purs, hors palette, parce que c'est la garantie de contraste sur une couleur libre. */
.annad-banderole {
	padding: 0.5rem var(--gutter);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	color: var(--color-on-brand-green);
	background-color: var(--annad-banderole-bg, var(--color-brand-green));
}

.annad-banderole--texte-clair {
	color: #fff;
}

.annad-banderole--texte-fonce {
	color: #000;
}

/* Couleur de texte choisie dans le Personnaliser : remplace le choix automatique ci-dessus (le
   contraste est alors laissé à la personne qui règle). */
.annad-banderole--couleur {
	color: var(--annad-banderole-color);
}

/* Position « bas » : écrite après le footer, collée au bas de l'écran pendant le défilement, puis
   posée à sa place sous le footer en fin de page. Sous l'en-tête et ses menus, sous le menu mobile ;
   marge basse des iPhone (barre d'accueil) incluse. */
.annad-banderole--bas {
	position: sticky;
	bottom: 0;
	z-index: calc(var(--z-header) - 1);
	padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
	box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.25);
}

.annad-banderole__text {
	max-width: var(--container-max);
	margin: 0 auto;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.annad-banderole a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.annad-banderole a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ---------- Header (maquette « LE HEADER PETIT.png ») ---------- */

.site-header {
	position: relative; /* référence de positionnement du mega-menu-panel */
	z-index: var(--z-header);
	background-color: var(--color-bg);
}

/* Barre plus large que le contenu des pages (90rem contre 80rem) : jusqu'à 1440px de large, le logo
   est au ras de la gouttière gauche et les icônes au ras de la droite, comme sur la maquette ; au-delà,
   la barre reste centrée. Le mega menu a sa propre largeur (mega-menu.css), il n'est pas concerné. */
.site-header__inner {
	--annad-header-max: 90rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: var(--annad-header-max);
	min-height: var(--header-height);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

@media (min-width: 64em) {
	.site-header__inner {
		gap: 1.5rem;
	}
}

/* Hamburger : visible uniquement sous le breakpoint */
.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
}

@media (min-width: 64em) {
	.menu-toggle {
		display: none;
	}
}

/* ---------- Logo (Personnaliser > Identité du site) ---------- */

.site-branding {
	flex: 0 0 auto;
	line-height: 0;
}

.site-branding .custom-logo-link,
.site-logo {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

/* Hauteur du logo : 28px sous 64em, 32px au-dessus (40px avant). 28px est le plancher : en dessous,
   le trait fin des lettres et l'accent lime ne se lisent plus. */
.site-branding .custom-logo,
.site-logo__img {
	width: auto;
	height: auto;
	max-height: 1.75rem; /* le fichier porte déjà le blanc et l'accent lime : aucun filtre CSS */
}

@media (min-width: 64em) {
	.site-branding .custom-logo,
	.site-logo__img {
		max-height: 2rem;
	}

	/* Écart entre le logo et le premier élément du menu (« Créer son kit ») : s'ajoute à l'écart de la
	   barre (1.5rem). Nul à 68rem et en dessous, où le menu occupe toute la barre ; il grandit ensuite
	   avec l'écran, jusqu'à 2.5rem (atteint vers 74rem) — soit 64px entre logo et bouton, 24px avant. */
	.site-branding {
		margin-right: clamp(0rem, (100vw - 68rem) * 0.4, 2.5rem);
	}
}

/* Repli sans logo : sobre, ce n'est qu'un dépannage */
.site-logo__text {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.125rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
}

/* ---------- Pilule CTA : élément de menu portant la classe « nav-cta » ---------- */

.menu-item.nav-cta > a {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--color-on-surface-light);
	background-color: var(--color-surface-light);
	border-radius: 999px;
	transition: background-color var(--transition);
}

.menu-item.nav-cta > a::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	background-color: var(--color-brand-green);
	border-radius: 50%;
}

/* C'est un bouton, pas un lien de navigation : fond blanc et coins arrondis dans tous les états
   (repos, survol, focus, page courante), jamais souligné. */
.menu-item.nav-cta > a:hover,
.menu-item.nav-cta > a:focus-visible,
.menu-item.nav-cta.current-menu-item > a,
.menu-item.nav-cta.current-menu-ancestor > a,
.menu-item.nav-cta.current-menu-parent > a {
	color: var(--color-on-surface-light);
	background-color: var(--color-surface-light);
	border-radius: 999px;
	text-decoration: none;
}

/* ---------- Navigation principale : masquée sous le breakpoint (menu mobile à la place) ---------- */

.primary-nav {
	display: none;
}

@media (min-width: 64em) {
	.primary-nav {
		display: block;
		flex: 0 0 auto;
		align-self: stretch;
	}
}

/* ---------- Barre desktop : resserrage progressif (4.37.0) ----------
   Logo, quatre entrées de menu, sélecteur de langue et icônes tenaient tout juste : à 1024px, le
   français dépassait déjà de 7px, et une page traduite par GTranslate (libellés plus longs) bien
   davantage. Entre 1024 et 1280px, l'écart entre les blocs de la barre, l'écart et les marges des
   entrées du menu et la taille de leur texte se réduisent progressivement ; à 1280px et au-delà, on
   retrouve exactement les valeurs d'avant (24px, 20px, 16px, 16px). Les libellés ne passent jamais à
   la ligne (white-space: nowrap, mega-menu.css).
   Interpolation linéaire entre deux largeurs : valeur = a·vw + b, bornée par clamp(). Les règles du
   menu sont dans mega-menu.css (chargée après celle-ci) : spécificité plus forte ici (.site-header).
   La pilule « nav-cta » garde ses marges. */
@media (min-width: 64em) {
	.site-header__inner {
		gap: clamp(1rem, 3.125vw - 1rem, 1.5rem); /* 16px à 1024 → 24px à 1280 */
	}

	.site-header .primary-nav__menu {
		gap: clamp(0.25rem, 6.25vw - 3.75rem, 1.25rem); /* 4px → 20px */
	}

	.site-header .primary-nav__menu > li:not(.nav-cta) > a {
		padding-inline: clamp(0.5rem, 3.125vw - 1.5rem, 1rem); /* 8px → 16px */
		font-size: clamp(0.875rem, 0.78125vw + 0.375rem, 1rem); /* 14px → 16px */
	}

	/* Page traduite par GTranslate (Google pose .translated-ltr / .translated-rtl sur <html>) :
	   libellés plus longs, resserrage plus marqué, interpolé de 1024 à 1600px mais figé à 1440px :
	   la barre ne s'élargit plus au-delà de 90rem (min(100vw, 90rem) au lieu de 100vw), le menu ne
	   doit donc plus grandir non plus. Le français n'est jamais concerné. */
	:root:is(.translated-ltr, .translated-rtl) .site-header__inner {
		gap: clamp(0.75rem, min(100vw, 90rem) * 0.02083 - 0.583rem, 1.5rem); /* 12px à 1024 → 20,7px à 1440 et plus */
	}

	:root:is(.translated-ltr, .translated-rtl) .site-header .primary-nav__menu {
		gap: clamp(0.25rem, min(100vw, 90rem) * 0.02778 - 1.528rem, 1.25rem); /* 4px → 15,6px */
	}

	:root:is(.translated-ltr, .translated-rtl) .site-header .primary-nav__menu > li:not(.nav-cta) > a {
		padding-inline: clamp(0.375rem, min(100vw, 90rem) * 0.01736 - 0.736rem, 1rem); /* 6px → 13,2px */
		font-size: clamp(0.8125rem, min(100vw, 90rem) * 0.00521 + 0.479rem, 1rem); /* 13px → 15,2px */
	}
}

/* ---------- Barre desktop qui ne tient pas : menu hamburger (4.38.0) ----------
   html.annad-nav-compact est posé par assets/js/header-nav-fit.js quand, malgré le resserrage
   ci-dessus, la barre complète déborde (libellés traduits trop longs). On affiche alors la barre
   comme sous 64em : hamburger, logo, icônes ; le menu desktop et le sélecteur de langue du header
   sont masqués, le menu mobile (et son sélecteur de langue) prend le relais. .is-measuring : posé
   par le script le temps d'une mesure, rétablit la barre complète. Hauteur de barre inchangée.
   Le menu mobile est masqué à partir de 64em dans mobile-menu.css (0-1-0) : rétabli ici (0-2-0). */
@media (min-width: 64em) {
	.annad-nav-compact .site-header:not(.is-measuring) .menu-toggle {
		display: inline-flex;
	}

	.annad-nav-compact .site-header:not(.is-measuring) :is(.primary-nav, .header-lang) {
		display: none;
	}

	.annad-nav-compact .mobile-menu {
		display: block;
	}
}

/* ---------- Sélecteur de langue (GTranslate ou autre extension) ----------
   Maquette « LE HEADER PETIT » : « Français » seul, discret, à droite de la navigation, sans chevron.
   Avec GTranslate (liste déroulante), assets/js/header-lang.js remplace l'affichage du <select> par
   un bouton et un panneau (.annad-lang) ; les règles génériques ci-dessous ramènent tout autre rendu
   d'extension à un texte simple. */

.header-lang {
	display: none;
	flex: 0 0 auto;
	margin-right: auto; /* pousse les icônes à droite */
	font-size: 0.8125rem;
	font-weight: 400;
	text-transform: none; /* seul élément en bas de casse de la barre */
	line-height: 1;
	color: var(--color-text);
}

@media (min-width: 64em) {
	.header-lang {
		display: block;
	}
}

/* Rendu de l'extension ramené à un texte simple : ni drapeaux, ni select natif visible */
.header-lang img,
.header-lang .gt_float_switcher-arrow,
.header-lang .glink img {
	display: none;
}

.header-lang select,
.header-lang .gt_selected,
.header-lang .gt_float_switcher,
.header-lang .gt_switcher {
	width: auto;
	min-width: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	appearance: none;
}

.header-lang a,
.header-lang .gt_current_lang {
	color: inherit;
	text-decoration: none;
}

/* Plus de chevron (absent de la maquette) */
.header-lang::after {
	display: none;
}

/* Select de GTranslate une fois remplacé : présent pour l'extension, invisible et hors parcours */
.header-lang .annad-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.annad-lang {
	position: relative;
}

/* Bouton : la langue courante, en texte de navigation, soulignement fin au survol */
.annad-lang__button {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem; /* cible tactile, sans changer la hauteur de la barre */
	padding: 0;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
	transition: text-decoration-color var(--annad-transition-fast) var(--annad-ease);
}

.annad-lang__button:hover,
.annad-lang__button:focus-visible,
.annad-lang__button[aria-expanded="true"] {
	text-decoration-color: currentColor;
}

/* Panneau : aligné à droite sous le bouton. Fermé : invisible et hors rendu (visibility à la fin du
   fondu, 120 ms) ; ouvert : fondu, glissement de -8px et échelle de 0,98 à 1 (180 ms). */
.annad-lang__list {
	position: absolute;
	top: calc(100% + 0.25rem);
	right: 0;
	z-index: var(--z-dropdown);
	width: 12.5rem;
	margin: 0;
	padding: 0.375rem;
	list-style: none;
	background-color: var(--color-surface-2);
	border: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent);
	border-radius: var(--radius-large);
	box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.35), 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(0.98);
	transform-origin: top right;
	transition:
		opacity 120ms ease-out,
		transform 120ms ease-out,
		visibility 0s linear 120ms;
}

.annad-lang.is-open .annad-lang__list {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity 180ms ease-out,
		transform 180ms ease-out,
		visibility 0s;
}

.annad-lang__list:focus {
	outline: none;
}

/* Langues : arrivée en cascade (20 ms d'écart, --annad-lang-i posé par le script) */
.annad-lang__option {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.625rem 0.75rem;
	font-size: 0.875rem;
	line-height: 1.2;
	color: color-mix(in srgb, var(--color-on-surface) 82%, transparent);
	border-radius: calc(var(--radius-large) - 0.375rem);
	cursor: pointer;
	opacity: 0;
	transform: translateY(-4px);
	transition:
		opacity 120ms ease-out,
		transform 120ms ease-out,
		color var(--annad-transition-fast) var(--annad-ease),
		background-color var(--annad-transition-fast) var(--annad-ease);
}

.annad-lang.is-open .annad-lang__option {
	opacity: 1;
	transform: none;
	transition:
		opacity 180ms ease-out calc(var(--annad-lang-i, 0) * 20ms),
		transform 180ms ease-out calc(var(--annad-lang-i, 0) * 20ms),
		color var(--annad-transition-fast) var(--annad-ease),
		background-color var(--annad-transition-fast) var(--annad-ease);
}

/* Point vert ANNAD devant la langue active (même pastille que « Configurer mon kit ») */
.annad-lang__option::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
}

.annad-lang__option[aria-selected="true"] {
	color: var(--color-on-surface);
}

.annad-lang__option[aria-selected="true"]::before {
	background-color: var(--color-brand-green);
}

.annad-lang__option:hover,
.annad-lang__option:focus {
	color: var(--wp--preset--color--blanc);
	background-color: color-mix(in srgb, var(--wp--preset--color--blanc) 7%, transparent);
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.annad-lang__button,
	.annad-lang__list,
	.annad-lang.is-open .annad-lang__list,
	.annad-lang__option,
	.annad-lang.is-open .annad-lang__option {
		transition: none;
	}

	.annad-lang__list,
	.annad-lang__option {
		transform: none;
	}
}

/* ---------- Actions (compte, panier) : pastilles claires ---------- */

.header-actions {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-left: auto;
}

.header-actions__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--color-on-surface-light);
	text-decoration: none;
	background-color: var(--color-surface-light);
	border: 0;
	border-radius: 50%;
	transition: background-color var(--transition);
}

.header-actions__link:hover {
	background-color: color-mix(in srgb, var(--color-surface-light) 88%, var(--color-on-surface-light));
}

.header-actions__link svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* ---------- Recherche de produits (4.43.0) ----------
   Loupe (même pastille que compte et panier) à gauche des icônes, à partir de 64em seulement : sous
   64em, et en mode compact (barre qui ne tient pas, 4.38.0), le champ est en tête du menu mobile
   (mobile-menu.css). Le bouton est masqué (hidden) tant que assets/js/header-search.js ne l'a pas
   affiché : sans JS, pas de loupe. Panneau aligné à droite sous la loupe, même animation que le
   panneau de langue : fondu, glissement de -8px et échelle 0,98 → 1 (180 ms à l'ouverture, 120 ms à
   la fermeture). Formulaire : template-parts/header/search-form.php. */
.header-search {
	position: relative;
	display: none;
}

@media (min-width: 64em) {
	.header-search {
		display: block;
	}

	.annad-nav-compact .site-header:not(.is-measuring) .header-search {
		display: none;
	}
}

.header-search__toggle[hidden] {
	display: none;
}

.header-search__toggle {
	cursor: pointer;
}

.header-search__toggle[aria-expanded="true"] {
	background-color: color-mix(in srgb, var(--color-surface-light) 88%, var(--color-on-surface-light));
}

.header-search__panel {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: var(--z-dropdown);
	width: min(24rem, calc(100vw - 2 * var(--gutter)));
	padding: 0.5rem;
	background-color: var(--color-surface-2);
	border: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent);
	border-radius: var(--radius-large);
	box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.35), 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(0.98);
	transform-origin: top right;
	transition:
		opacity 120ms ease-out,
		transform 120ms ease-out,
		visibility 0s linear 120ms;
}

.header-search.is-open .header-search__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity 180ms ease-out,
		transform 180ms ease-out,
		visibility 0s;
}

/* Formulaire (header et menu mobile) : champ arrondi sur fond sombre, bouton loupe en pastille claire.
   16px de texte : en dessous, Safari iOS zoome sur le champ. */
.annad-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.annad-search__field {
	flex: 1 1 auto;
	min-width: 0;
	height: 2.75rem;
	margin: 0;
	padding: 0 1rem;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: normal;
	color: var(--color-text);
	background-color: color-mix(in srgb, var(--color-on-surface) 6%, transparent);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	appearance: none;
}

.annad-search__field::placeholder {
	color: color-mix(in srgb, var(--color-text) 60%, transparent);
	opacity: 1;
}

/* Croix d'effacement native : sombre et illisible sur ce fond, Échap efface déjà le champ. */
.annad-search__field::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.annad-search__field:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 2px;
}

.annad-search__submit {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	color: var(--color-on-surface-light);
	background-color: var(--color-surface-light);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--transition);
}

.annad-search__submit:hover {
	background-color: color-mix(in srgb, var(--color-surface-light) 88%, var(--color-on-surface-light));
}

.annad-search__submit:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 2px;
}

.annad-search__submit svg {
	width: 1.125rem;
	height: 1.125rem;
}

@media (prefers-reduced-motion: reduce) {
	.header-search__panel,
	.header-search.is-open .header-search__panel,
	.annad-search__submit {
		transition: none;
	}

	.header-search__panel {
		transform: none;
	}
}

/* Interrupteur « Pro » (prix pros / prix client, extension dahu-pricing) : activé = prix pros,
   libellé « Pro » à droite, atténué quand l'interrupteur est désactivé (prix client). */
.header-price-mode {
	--price-mode-track-w: 2.5rem;
	--price-mode-track-h: 1.375rem;
	--price-mode-knob: 1rem;
	--price-mode-inset: 0.1875rem;
	--price-mode-off: color-mix(in srgb, var(--color-text) 30%, transparent);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
}

.header-price-mode[hidden] {
	display: none;
}

/* Case native : invisible mais focusable et annoncée (role="switch") */
.header-price-mode__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.header-price-mode__track {
	position: relative;
	flex: 0 0 auto;
	width: var(--price-mode-track-w);
	height: var(--price-mode-track-h);
	background-color: var(--price-mode-off);
	border-radius: 999px;
	transition: background-color var(--transition);
}

.header-price-mode__track::before {
	content: "";
	position: absolute;
	top: var(--price-mode-inset);
	left: var(--price-mode-inset);
	width: var(--price-mode-knob);
	height: var(--price-mode-knob);
	background-color: var(--color-surface-light);
	border-radius: 50%;
	transition: transform var(--transition);
}

.header-price-mode__label {
	color: var(--price-mode-off);
	transition: color var(--transition);
}

.header-price-mode__input:checked ~ .header-price-mode__track {
	background-color: var(--color-brand-green);
}

.header-price-mode__input:checked ~ .header-price-mode__track::before {
	transform: translateX(calc(var(--price-mode-track-w) - var(--price-mode-knob) - 2 * var(--price-mode-inset)));
}

.header-price-mode__input:checked ~ .header-price-mode__label {
	color: var(--color-text);
}

.header-price-mode__input:focus-visible ~ .header-price-mode__track {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.header-price-mode__track,
	.header-price-mode__track::before,
	.header-price-mode__label {
		transition: none;
	}
}

/* Badge de quantité : pastille lime sur le coin de l'icône (absent de la maquette, conservé) */
.header-cart__count {
	position: absolute;
	top: -0.125rem;
	right: -0.125rem;
	min-width: 1.125rem;
	height: 1.125rem;
	padding-inline: 0.25rem;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.125rem;
	text-align: center;
	color: var(--color-on-brand-green);
	background-color: var(--color-brand-green);
	border-radius: 999px;
}

.header-cart__count[data-cart-count="0"] {
	display: none;
}

/* Focus visible commun aux contrôles du header */
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header select:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.menu-item.nav-cta > a,
	.header-actions__link {
		transition: none;
	}
}

/* ---------- Accordéons (assets/js/accordion.js) : hauteur animée sans mesure JS ----------
   Technique : panneau en grille à une rangée, grid-template-rows 0fr (replié) → 1fr (ouvert) ;
   l'unique enfant .annad-accordion__inner (créé par le script) a min-height: 0 et overflow: hidden.
   visibility bascule à la fin de la fermeture (retrait de l'accessibilité et du clavier, avec inert).
   Navigateurs sans interpolation de grid-template-rows : ouverture / fermeture instantanées. */
.annad-accordion {
	display: grid;
	grid-template-rows: 1fr;
	visibility: visible;
	transition:
		grid-template-rows var(--annad-transition-base) var(--annad-ease),
		visibility 0s linear 0s;
}

.annad-accordion.is-collapsed {
	grid-template-rows: 0fr;
	visibility: hidden;
	transition:
		grid-template-rows var(--annad-transition-base) var(--annad-ease),
		visibility 0s linear var(--annad-transition-base);
}

.annad-accordion > .annad-accordion__inner {
	min-height: 0;
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--annad-transition-fast: 0s;
		--annad-transition-base: 0s;
		--annad-panel-shift: 0;
	}
}