/**
 * 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;
	}
}

/* ---------- Sélecteur de langue (GTranslate ou autre extension) ---------- */

.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 1rem 0 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;
}

/* Chevron discret, dessiné en CSS (jamais l'icône de l'extension) */
.header-lang::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-left: -0.75rem;
	vertical-align: middle;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
}

/* ---------- 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;
}

/* 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;
	}
}