/*
 * Drache d'Avril — En-tête (desktop).
 *
 * Réf design : Figma node 14329:17127.
 * Tokens consommés depuis theme.json via var(--wp--preset--*) ; aucune valeur
 * de design redéfinie en dur, sauf les exceptions signalées ci-dessous.
 * L'animation pluie est reprise du thème V1 (demande explicite d'Hubert).
 *
 * Mobile / burger : passe ultérieure (design mobile à valider).
 */

/*
 * Hauteur du header, exposée aux pages qui commencent sous lui.
 *
 * Le header est en `position: absolute` : il ne pousse rien, c'est donc au
 * contenu de se dégager. La home s'en sort parce que son hero est une image
 * haute, mais une page qui commence par du texte lui rentre dedans.
 *
 * La valeur est COMPOSÉE à partir de ses deux seuls ingrédients, le logo et le
 * retrait vertical de .site-header__inner. Elle ne peut donc pas dériver de la
 * hauteur réelle : changer l'un des deux change les deux.
 *
 * Bureau : 24 + 120 + 24 = 168, conforme à la maquette.
 * Mobile : 24 + 72 + 24 = 120, là où la maquette dit 80. Le header mobile est
 * une passe à part, annoncée en tête de ce fichier, et le hero réserve ce qui
 * existe plutôt que ce qui est dessiné.
 */
:root {
	--dda-logo-size: 120px;
	--dda-header-pad: var(--wp--preset--spacing--xl, 1.5rem);
	--dda-header-height: calc(2 * var(--dda-header-pad) + var(--dda-logo-size));
}

.site-header {
	position: absolute;
	width: 100%;
	z-index: 100;

	/*
	 * Couleur des labels de nav : violet foncé du Figma (#28076e).
	 * Cette teinte N'EXISTE PAS dans la palette theme.json (qui s'arrête à
	 * violet #7631FF et violet-desat #664D9A). Variable locale en attendant
	 * l'arbitrage : soit ajouter un token (ex. violet-bolder), soit retomber
	 * sur var(--wp--preset--color--violet).
	 */
	--dda-nav-color: #28076e;

	/* Easing "ressort" du rebond logo : défini globalement dans main.css (:root),
	   consommé ici via var(--dda-spring). */

	/* Largeur max du header dans le Figma (1680px) — pas encore tokenisée. */
	--dda-header-max: 1680px;
}

.site-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--6-xl, 5rem); /* 80px */
	width: 100%;
	max-width: var(--dda-header-max);
	margin-inline: auto;
	padding-block: var(--dda-header-pad);                    /* 24px */
	padding-inline: var(--wp--preset--spacing--3-xl, 2.5rem); /* 40px */
	overflow: hidden; /* clippe le blob rose des actions et la pluie du logo */
}

/* ---------------------------------------------------------------- Logo --- */

.site-logo {
	position: relative;
	flex-shrink: 0;
}

.site-logo__link {
	display: block;
	position: relative;
}

.site-logo__link #logo-drache {
	display: block;
	position: relative;
	z-index: 1;
	width: var(--dda-logo-size);
	height: var(--dda-logo-size);
	transition: transform 1s var(--dda-spring);
}

/* --------------------------------------------------- Navigation (cat.) --- */

.primary-nav {
	flex: 1 1 auto;
	min-width: 0;
}

.primary-menu {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xl, 1.5rem); /* 24px */
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-menu a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg, 1.25rem); /* 20px - nav/lg */
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--dda-nav-color);
	transition: color 0.2s ease;
}

.primary-menu a:hover,
.primary-menu a:focus-visible,
.primary-menu .current-menu-item > a {
	color: var(--wp--preset--color--orange, #fc4c02);
}

/* ------------------------------------------------- Actions e-commerce --- */

.header-actions {
	position: relative;
	z-index: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xl, 1.5rem); /* 24px */
	/* Ancre les actions à droite, même sans menu (le <nav> flex:1 absent). */
	margin-left: auto;
}

/* Blob rose arrondi derrière les actions, débordant et clippé par __inner. */
.header-actions::before {
	content: "";
	position: absolute;
	top: -160px;
	right: -220px;
	bottom: -40px;
	left: -80px;
	z-index: -1;
	background: var(--wp--preset--color--rouge-07, #fef2f5);
	border-top-left-radius: var(--wp--custom--radius--full, 9999px);
	border-bottom-left-radius: var(--wp--custom--radius--full, 9999px);
}

.header-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--wp--preset--color--rose-04, #664d9a); /* icônes violet-desat */
	transition: color 0.2s ease;
}

.header-action:hover,
.header-action:focus-visible {
	color: var(--wp--preset--color--violet, #7631ff);
}

.header-action svg {
	display: block;
	width: 40px;
	height: 40px;
}

.header-action--cart {
	position: relative;
}

.header-action__badge {
	position: absolute;
	top: -2px;
	right: -4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 6px;
	border-radius: var(--wp--custom--radius--full, 9999px);
	background: var(--wp--preset--color--pink, #f8c9de);
	color: var(--wp--preset--color--violet, #7631ff);
	font-family: var(--wp--preset--font-family--headings, sans-serif);
	font-size: var(--wp--preset--font-size--xs, 0.625rem);
	font-weight: 700;
	line-height: 1;
}

/* ============================================== Animation pluie (hover) === */
/* Reprise du thème V1. La pluie tourne en continu mais reste invisible
   (opacity 0) tant que le logo n'est pas survolé. */

.site-logo__link #logo-rain {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 0; /* derrière le logo (#logo-drache z-index:1), devant le fond */
	width: 100%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.site-logo__link #logo-rain .rain-column line {
	stroke: var(--wp--preset--color--rose-04, #664d9a);
	opacity: 0.6;
}

.site-logo__link #logo-rain .rain-column {
	animation: dda-rain-move 1s ease-in-out infinite;
}
.site-logo__link #logo-rain .rain-column:nth-child(1) { animation-delay: 0.05s;  animation-duration: 1s;    }
.site-logo__link #logo-rain .rain-column:nth-child(2) { animation-delay: 0s;     animation-duration: 0.95s; }
.site-logo__link #logo-rain .rain-column:nth-child(3) { animation-delay: 0.025s; animation-duration: 1.05s; }
.site-logo__link #logo-rain .rain-column:nth-child(4) { animation-delay: 0.1s;   animation-duration: 0.9s;  }
.site-logo__link #logo-rain .rain-column:nth-child(5) { animation-delay: 0.025s; animation-duration: 0.95s; }

.site-logo__link #splash circle {
	fill: var(--wp--preset--color--rose-04, #664d9a);
	opacity: 0;
	transform-origin: center;
	transform-box: fill-box;
}
.site-logo__link #splash circle.left  { animation: dda-splash-left  1.6s ease-out infinite; }
.site-logo__link #splash circle.right { animation: dda-splash-right 1.6s ease-out infinite; }

.site-logo__link #splash .splash-group:nth-child(1) .left  { animation-delay: 0.5s;   }
.site-logo__link #splash .splash-group:nth-child(1) .right { animation-delay: 0.25s;  }
.site-logo__link #splash .splash-group:nth-child(2) .left  { animation-delay: 0.25s;  }
.site-logo__link #splash .splash-group:nth-child(2) .right { animation-delay: 0.2s;   }
.site-logo__link #splash .splash-group:nth-child(3) .left  { animation-delay: 0.6s;   }
.site-logo__link #splash .splash-group:nth-child(3) .right { animation-delay: 0.625s; }
.site-logo__link #splash .splash-group:nth-child(4) .left  { animation-delay: 0.4s;   }
.site-logo__link #splash .splash-group:nth-child(4) .right { animation-delay: 0.325s; }
.site-logo__link #splash .splash-group:nth-child(5) .left  { animation-delay: 0.75s;  }
.site-logo__link #splash .splash-group:nth-child(5) .right { animation-delay: 0.775s; }

/* Révélation au survol */
.site-logo__link:hover #logo-rain {
	opacity: 1;
}
.site-logo__link:hover #logo-drache {
	transform: scale(1.05) rotate(-2deg);
}

@keyframes dda-rain-move {
	0%   { transform: translateY(-240px); }
	50%  { transform: translateY(240px);  }
	100% { transform: translateY(240px);  }
}

@keyframes dda-splash-left {
	0%   { opacity: 0;   transform: translate(0, 0)        scale(0.4); }
	70%  { opacity: 0;   transform: translate(0, 0)        scale(0.8); }
	80%  { opacity: 0.6; transform: translate(-12px, -40px) scale(1);  }
	90%  { opacity: 0.4; transform: translate(-24px, -80px) scale(0.9); }
	100% { opacity: 0;   transform: translate(-32px, -48px) scale(0.8); }
}

@keyframes dda-splash-right {
	0%   { opacity: 0;   transform: translate(0, 0)       scale(0.4); }
	70%  { opacity: 0;   transform: translate(0, 0)       scale(0.4); }
	80%  { opacity: 0.6; transform: translate(12px, -40px) scale(1);  }
	90%  { opacity: 0.4; transform: translate(24px, -80px) scale(0.9); }
	100% { opacity: 0;   transform: translate(32px, -64px) scale(0.8); }
}

/* Respect de prefers-reduced-motion : pas de pluie animée ni de rebond. */
@media (prefers-reduced-motion: reduce) {
	.site-logo__link #logo-rain .rain-column,
	.site-logo__link #splash circle {
		animation: none;
	}
	.site-logo__link:hover #logo-drache {
		transform: none;
	}
}

/* ===================================================== Menu mobile ======= */
/*
 * Pas de maquette mobile validée : repris du principe V1 (panneau plein écran
 * lilas qui entre en biais). Breakpoint à 1024px = container token "normal"
 * (et = lg de la V1). À confirmer quand le design mobile existera.
 */

/* Burger : invisible en desktop. Contient deux icônes (burger / croix) dont
   l'affichage suit l'état aria-expanded. */
.menu-toggle {
	display: none;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--dda-nav-color);
}
.menu-toggle__icon {
	display: none;
}
.menu-toggle__icon svg {
	display: block;
	width: 40px;
	height: 40px;
}
.menu-toggle__icon--open {
	display: inline-flex; /* burger par défaut */
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open {
	display: none;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close {
	display: inline-flex; /* croix une fois ouvert */
}

/* Verrou de scroll quand le panneau est ouvert. */
html.is-menu-open {
	overflow: hidden;
}

@media (max-width: 1024px) {

	/* Barre resserrée : gap large desktop trop ample, icônes + burger
	   déborderaient sur petit écran (et seraient coupées par overflow:hidden). */
	.site-header__inner {
		gap: var(--wp--preset--spacing--md, 1rem);
		padding-inline: var(--wp--preset--spacing--md, 1rem);
		justify-content: space-between;
		transition: padding-left 0.9s var(--dda-spring);
	}

	/* Menu ouvert : on décale le logo vers la droite (padding gauche). */
	html.is-menu-open .site-header__inner {
		padding-left: calc(var(--wp--preset--spacing--md, 1rem) + 80px);
	}

	/* Menu ouvert : le store locator réapparaît dans la barre. */
	html.is-menu-open .header-action--location {
		display: inline-flex;
	}

	/*
	 * La barre flotte AU-DESSUS du hero, comme en bureau : elle ne réserve pas
	 * sa hauteur et le fond de la première section passe dessous.
	 *
	 * Elle était en relative, ce qui la remettait dans le flux et posait une
	 * bande blanche de 112 px au-dessus du hero. C'était un effet de bord du
	 * réglage de l'empilement du menu, pas un choix : ce qui garde la barre
	 * au-dessus du panneau, c'est le z-index, et le panneau est en position
	 * fixed — il se moque de savoir si la barre est absolue ou relative.
	 *
	 * Fond blanc à l'ouverture pour masquer le panneau qui passe dessous.
	 */
	.site-header {
		z-index: 101;
	}

	/*
	 * Logo réduit pour laisser de la place à la barre. Posé sur :root et non sur
	 * le logo : c'est aussi ce qui donne --dda-header-height, que les pages
	 * réservent pour ne pas commencer sous la barre.
	 */
	:root {
		--dda-logo-size: 72px;
	}

	/* Actions resserrées ; le blob rose (pensé desktop) est masqué.
	   Le store locator est retiré du mobile (réversible). */
	.header-actions {
		gap: var(--wp--preset--spacing--md, 1rem);
	}
	.header-actions::before {
		display: none;
	}
	.header-action--location {
		display: none;
	}

	/* Le burger réapparaît, à droite de la barre. */
	.menu-toggle {
		display: inline-flex;
		order: 3;
	}

	/* La nav devient un panneau plein écran hors flux, sous la barre. */
	.primary-nav {
		position: fixed;
		inset: 0;
		z-index: 100;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: var(--wp--preset--spacing--3-xl, 2.5rem);
		background: var(--wp--preset--color--lilas, #e5b0fe);
		color: var(--wp--preset--color--rose-04, #664d9a);
		box-shadow: var(--wp--preset--shadow--violet-desat-2-xl, 12px 20px 0 0 #664d9a);
		/* État fermé : décalé en haut à droite, incliné, masqué au tab. */
		transform: translate(110%, -8%) rotate(-6deg);
		visibility: hidden;
		transition: transform 0.9s var(--dda-spring), visibility 0s linear 0.9s;
		z-index: -1;
	}

	/* État ouvert : carte légèrement inclinée et décalée (valeurs Hubert). */
	.primary-nav.is-open {
		transform: rotate(2deg) translate(40px, -12px);
		visibility: visible;
		transition: transform 0.9s var(--dda-spring), visibility 0s;
	}

	/* Liste verticale, gros libellés. */
	.primary-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--md, 1rem);
	}

	.primary-menu a {
		font-size: var(--wp--preset--font-size--3-xl, 2.5rem);
		color: var(--wp--preset--color--rose-04, #664d9a);
		padding-block: var(--wp--preset--spacing--xs, 0.5rem);
	}
	.primary-menu a:hover,
	.primary-menu a:focus-visible,
	.primary-menu .current-menu-item > a {
		color: var(--wp--preset--color--violet, #7631ff);
	}

	/* Cascade : les items apparaissent APRÈS l'arrivée du panneau (délais
	   > durée du panneau), un par un. */
	.primary-menu li {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.45s ease, transform 0.45s ease;
	}
	.primary-nav.is-open .primary-menu li {
		opacity: 1;
		transform: none;
	}
	.primary-nav.is-open .primary-menu li:nth-child(1) { transition-delay: 0.55s; }
	.primary-nav.is-open .primary-menu li:nth-child(2) { transition-delay: 0.68s; }
	.primary-nav.is-open .primary-menu li:nth-child(3) { transition-delay: 0.81s; }
	.primary-nav.is-open .primary-menu li:nth-child(4) { transition-delay: 0.94s; }
	.primary-nav.is-open .primary-menu li:nth-child(5) { transition-delay: 1.07s; }
}

/*
 * Tablette : le panneau a bien plus de place qu'un téléphone, les libellés
 * passent donc de 3-xl à 7-xl.
 *
 * Les trois conditions se lisent ensemble. max-width 1024 parce que c'est là que
 * le panneau existe ; au-delà, l'iPad affiche la nav de bureau et la question ne
 * se pose plus. min-width ET min-height à 700 pour attraper la tablette dans les
 * DEUX orientations (768 × 1024 debout, 1024 × 768 couché) tout en excluant un
 * téléphone couché, qui a la largeur d'une tablette mais 400 px de haut : à
 * 7-xl ses quatre items ne tiendraient pas dans l'écran.
 *
 * Placée après le bloc mobile, sans quoi elle perdrait : une media query
 * n'augmente pas la spécificité, seul l'ordre source départage.
 */
@media (min-width: 700px) and (min-height: 700px) and (max-width: 1024px) {
	.primary-menu {
		gap: var(--wp--preset--spacing--xl, 1.5rem);
	}

	.primary-menu a {
		font-size: var(--wp--preset--font-size--7-xl, 5rem);
	}
}

/* Pas de glissement ni de cascade si l'utilisateur réduit les animations. */
@media (prefers-reduced-motion: reduce) {
	.primary-nav,
	.primary-nav.is-open {
		transition: visibility 0s;
	}
	.primary-nav {
		transform: none; /* fermé : pas de décalage animé (reste masqué) */
	}
	.primary-menu li {
		transition: none;
		opacity: 1;
		transform: none;
	}
}