/*
 * En-tête Animal-Rit - DA2 « L'Écurie »
 * Filet fin, pastilles de navigation, bascule de thème, tiroir mobile.
 * La navigation reste entièrement lisible et utilisable sans JavaScript :
 * le script ne sert qu'à ouvrir le tiroir et les accordéons.
 */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	height: 4.125rem;
	padding-inline: var(--pad-x);
	background: color-mix(in srgb, var(--c-bg) 90%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--c-line);
	transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

/* Marque */
/* flex-shrink:0 : la marque ne doit jamais être le point de rupture du
 * flex .site-header. Sans ça, .nav (8 libellés, largeur fixe car sans
 * retour à la ligne) et .hact ont un plancher min-width:auto qui refuse
 * de rétrécir, donc c'est .brand (seul élément avec min-width:0) qui se
 * fait écraser jusqu'à 0px pendant que son contenu (logo + texte) continue
 * de déborder visuellement par-dessus la nav. Voir DEFAUTS.md ticket
 * chevauchement nav/logo. */
.brand { display: flex; align-items: center; gap: var(--sp-3); margin-right: auto; min-width: 0; flex-shrink: 0; }
.brand .emblem { width: 2.125rem; height: 2.125rem; color: var(--c-ink); }
/* Le nom de la marque ne se coupe jamais : « Animal- » sur une ligne et
 * « Rit » sur la suivante casse l'identité dès le premier écran mobile. */
.brand__name { font-family: var(--od-serif); font-weight: 400; font-size: clamp(1rem, 3.6vw, 1.125rem); line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; }
.brand__sub { display: block; font-family: var(--od-sans); font-size: .5rem; letter-spacing: .44em; color: var(--c-deco-ink); margin-top: -.125rem; }

/* Navigation desktop */
/* Seuil relevé de 61rem à 85rem (mesuré, marge ~23px) : avec 8 libellés
 * (dont « Volailles et petits animaux ») la nav ne tient sur une seule
 * ligne qu'à partir de 85rem environ. En dessous, brand+nav+hact ne
 * rentrent jamais (il manquerait jusqu'à ~330px à 61rem) : mieux vaut le
 * tiroir mobile, propre et fonctionnel, qu'une nav qui déborde sur le
 * logo. Les 3 autres seuils de ce fichier (survol sous-menu, burger,
 * tiroir) DOIVENT rester synchronisés à la même valeur. */
.nav { display: none; }
@media (min-width: 85rem) { .nav { display: block; } }
.nav > ul { display: flex; align-items: center; gap: 2px; }
.nav li { position: relative; }
.nav__row { display: flex; align-items: center; }
.nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--r-pill);
	font-size: var(--t-micro);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--c-ink-soft);
	white-space: nowrap;
	transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav a:hover { background: var(--c-muted); color: var(--c-ink); }
.nav a[aria-current="page"], .nav a.is-on { background: var(--c-ink); color: var(--c-bg); }
/* Cheval, plus gros segment du catalogue, porte l'accent de la marque. */
.nav a.hl { color: var(--c-cta); font-weight: 500; }
.nav a.hl:hover { background: color-mix(in srgb, var(--c-cta) 14%, transparent); color: var(--c-cta); }

/* Sous-menus desktop : ouverts au survol ET au focus clavier. */
.nav .submenu {
	position: absolute;
	top: calc(100% + var(--sp-2));
	left: 0;
	min-width: 15rem;
	padding: var(--sp-3);
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	box-shadow: var(--c-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), visibility var(--dur-1);
}
@media (min-width: 85rem) {
	.nav li:hover > .submenu,
	.nav li:focus-within > .submenu { opacity: 1; visibility: visible; transform: none; }
}
.nav .submenu a { display: flex; width: 100%; border-radius: var(--r-sm); text-transform: none; letter-spacing: .01em; font-size: var(--t-small); }
.nav .submenu-toggle { display: none; }

/* Outils de droite */
.hact { display: flex; align-items: center; gap: var(--sp-2); }
.hact__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--sp-3);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-sm);
	font-size: var(--t-micro);
	letter-spacing: .1em;
	color: var(--c-ink);
	transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.hact__btn:hover { border-color: var(--c-ink); background: var(--c-muted); }
.hact__label { display: none; }
@media (min-width: 48rem) { .hact__label { display: inline; } }
.hact__count { font-variant-numeric: tabular-nums; }

/* Bascule de thème. Les deux icônes sont dans le DOM, une seule est visible
 * selon le thème actif : pas de bascule d'image à charger, pas de scintillement. */
.theme-toggle .i-sun { display: none; }
.theme-toggle .i-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
	:root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}

/* Bouton du tiroir mobile */
.burger { display: inline-flex; }
@media (min-width: 85rem) { .burger { display: none; } }
.burger span { display: block; width: 17px; height: 1.5px; background: currentColor; position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform var(--dur-1) var(--ease); }
.burger span::before { top: -5px; }
.burger span::after { top: 5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

/* -------------------------------------------------------------------
 * TIROIR MOBILE
 * ------------------------------------------------------------------- */

.drawer {
	position: fixed;
	inset: 4.125rem 0 0 auto;
	z-index: var(--z-drawer);
	width: min(24rem, 100%);
	padding: var(--sp-5) var(--pad-x) var(--sp-8);
	background: var(--c-bg);
	border-left: 1px solid var(--c-line);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform var(--dur-2) var(--ease), visibility var(--dur-2);
}
.drawer[data-open="true"] { transform: none; visibility: visible; }
@media (min-width: 85rem) { .drawer { display: none; } }

.drawer__scrim {
	position: fixed;
	inset: 4.125rem 0 0 0;
	z-index: calc(var(--z-drawer) - 1);
	background: color-mix(in srgb, var(--od-navy) 55%, transparent);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2);
}
.drawer__scrim[data-open="true"] { opacity: 1; visibility: visible; }

.drawer li { border-bottom: 1px solid var(--c-line); }
.drawer .nav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.drawer a { display: flex; align-items: center; min-height: 52px; font-family: var(--od-serif); font-size: 1.2rem; letter-spacing: -.01em; color: var(--c-ink); }
.drawer a.hl { color: var(--c-cta); }
.drawer .submenu-toggle {
	display: grid; place-items: center;
	width: 44px; height: 44px;
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	color: var(--c-ink-soft);
	flex: 0 0 auto;
}
.drawer .chevron { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur-1) var(--ease); }
.drawer .submenu-toggle[aria-expanded="true"] .chevron { transform: rotate(-135deg) translate(-2px, -2px); }

/* Accordéon : fermé par défaut, ouvert par le script. Sans JavaScript, les
 * sous-menus restent atteignables car le bouton n'est affiché que si le
 * script s'est exécuté (classe .has-js posée sur <html>). */
.drawer .submenu { display: none; padding-bottom: var(--sp-3); }
.drawer .submenu[data-open="true"] { display: block; }
.drawer .submenu li { border-bottom: 0; }
.drawer .submenu a { font-family: var(--od-sans); font-size: var(--t-small); min-height: 44px; color: var(--c-ink-soft); padding-left: var(--sp-4); }
html:not(.has-js) .drawer .submenu { display: block; }
html:not(.has-js) .drawer .submenu-toggle { display: none; }