/* =====================================================================
   Evok — header fixe (reproduction du header du theme Evok, variante
   header_black : fond blanc + logo fonce, comme les pages "no_background"
   du site principal). Unites en px (1rem theme = 10px). JS .scrolled
   injecte par evok-forms.php.
   ===================================================================== */

header.header {
	--white:#FFFFFF; --black_alt:#121212; --body-color:var(--black_alt);
	--blue_dark:#13294B;

	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	padding: 0 48px;
	/* base = variante "sur photo" : transparent, controles blancs ;
	   header_black / scrolled repassent en fond blanc + controles fonces */
	background: transparent;
	font-family: 'Futura PT', Arial, sans-serif;
	font-size: 16px;
	color: var(--body-color);
	letter-spacing: 0.32px;
	transition: background 0.4s ease;
}
header.header.header_black { background: var(--white); }

/* ETAT INITIAL SANS ANIMATION.
   La classe est posee par le script le temps d'etablir l'etat de depart, puis
   retiree au bout de deux images (voir header.php). Sans elle, une page rouverte
   en cours de lecture rejouait tout le repli du header alors que le visiteur
   n'avait pas bouge.

   `!important` et le selecteur universel : les transitions sont declarees sur
   une dizaine d'elements du header, chacune avec ses propres delais. Les
   suspendre une par une reviendrait a tenir deux listes en parallele. */
header.header.sans-transition,
header.header.sans-transition *,
.header_nav.sans-transition,
.header_nav.sans-transition * {
	transition: none !important;
}
header.header *, header.header *::before, header.header *::after { box-sizing: border-box; }
header.header ul { list-style: none; margin: 0; padding: 0; }
header.header a { text-decoration: none; color: inherit; }
header.header button { background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0; }
body.admin-bar header.header { top: 32px; }

header.header .header_top {
	position: relative;
	height: 130px;
	display: flex;
	align-items: center;
	/* trait sous le header (border du header_nav sur evok), meme sans menu :
	   blanc sur la photo, fonce sur fond blanc */
	border-bottom: 1px solid var(--white);
	transition: height 0.4s ease 0.4s, border 0.4s ease;
}
header.header.header_black .header_top,
header.header.scrolled .header_top {
	border-bottom: 1px solid var(--body-color);
}

/* ---- bandeau d'annonce ----
   Bande d'encre en tete du header, rendue par bandeau.php. Elle vit DANS le
   header (fixe) : c'est la seule facon d'etre au-dessus de lui sans passer
   dessous — voir l'explication dans le module.

   LES MARGES NEGATIVES NE SONT PAS UN BRICOLAGE : le header porte 48 px de
   marge interieure (20 px sur telephone) pour aligner son contenu sur la
   colonne du site. Un aplat qui s'y conformerait laisserait deux bandes
   blanches sur les cotes, et se lirait comme une boite posee dans le header
   plutot que comme un bandeau. Les valeurs sont celles du header, a reprendre
   ensemble si elles changent. */
header.header .evok-bandeau {
	margin: 0 -48px;
	padding: 12px 48px;
	background: var(--body-color);
	color: var(--white);
	text-align: center;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	/* PAS D'ANIMATION SUR CE BANDEAU — deux tentatives, deux echecs, et la
	   raison vaut d'etre notee pour ne pas la refaire une troisieme fois.

	   L'idee etait de le replier en meme temps que le header se reduit, pour
	   eviter qu'un ecart entre les deux ne laisse voir la page derriere. Mais
	   `height: auto` ne s'anime pas, et les deux facons de contourner echouent
	   ici :

	     - un PLAFOND FIXE (`max-height: 8rem`) pour une bande qui fait 44 px :
	       les deux premiers tiers de la course ne changent rien a l'ecran, le
	       bandeau reste immobile pendant que la barre de menu remonte. Le
	       decalage rouvre le trou qu'on voulait fermer ;
	     - le plafond LU SUR LA HAUTEUR MESUREE : la mesure est alors prise sur
	       un element deja plafonne. Les deux valeurs se poursuivent, et la bande
	       finit rognee — le texte coupe.

	   On revient donc au retrait franc. L'ecart eventuel pendant la transition
	   est un artefact de quelques dixiemes de seconde ; une bande rognee, elle,
	   se voit en permanence. */
}

header.header .evok-bandeau__texte { margin: 0; }

/* Le lien se distingue par le seul soulignement : une seconde couleur sur un
   aplat noir tournerait vite au criard. */
header.header .evok-bandeau__lien {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 0.3s ease;
}

header.header .evok-bandeau__lien:hover { opacity: .7; }

/* Elle s'efface des le premier defilement, en meme temps que le header se
   reduit et que les logos basculent : une annonce se lit en arrivant, elle n'a
   pas a tenir le haut de l'ecran pendant toute la visite. La classe est celle
   du chrome, deja posee par son script — rien de nouveau a ecouter.

   Le retrait est FRANC (voir la note sur les animations, plus haut) : la bande
   s'efface, le header reprend sa hauteur reduite. */
header.header.scrolled .evok-bandeau { display: none; }

/* ---- logos centres (plein -> reduit au scroll) ---- */
header.header .header_top .header--logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
header.header .header_top .header--logo img {
	display: block;
	/* taille modulable via l'option site_logo--scale (defaut 1) */
	width: calc(120px * var(--logo-scale, 1));
	height: auto;
}
header.header .header_top .header--logo.logo--full { transition: transform 0.4s ease 0.4s; }
header.header .header_top .header--logo.logo--text { opacity: 0; transition: opacity 0.4s ease; }

/* ---- boutique : recherche, compte, panier ----
   C'est ce bloc qui pousse la fin de ligne vers la droite (margin-left:auto).
   Le selecteur de langue garde le sien pour le cas ou la boutique n'est pas
   rendue (WooCommerce absent) ; quand les deux sont la, la regle de voisinage
   plus bas remet la langue a une simple marge. */
header.header .header_top .header--shop {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0 22px;
}
header.header .header_top .header--shop-lien {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--white);
	line-height: 1;
	transition: opacity 0.3s ease, color 0.4s ease;
}
header.header.header_black .header_top .header--shop-lien,
header.header.scrolled .header_top .header--shop-lien { color: var(--body-color); }
header.header .header_top .header--shop-lien:hover { opacity: .6; }

/* Compteur : un chiffre pose A DROITE du sac, dans la meme encre que lui, et
   non plus une pastille sur son coin. Il suit donc la couleur du lien — plus
   rien a inverser selon que le header est sur photo ou sur fond blanc, ce que
   la pastille imposait.

   Il reste affiche a zero : la barre annonce l'etat du panier, et non ses seuls
   changements. La classe `est-vide` demeure — elle ne masque plus, elle attenue.

   Chiffres a chasse fixe : le sac ne se decale pas d'un pixel entre 1 et 2. */
header.header .header_top .header--panier-compte {
	margin-left: 5px;
	/* Remonte en exposant : le chiffre se pose sur l'epaule du sac au lieu de
	   s'aligner sur son milieu, ou il se lisait comme un mot a cote de lui. */
	margin-top: -8px;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}
header.header .header_top .header--panier-compte.est-vide { opacity: .55; }

header.header .header_top .header--panier-zone { position: relative; display: inline-flex; }

/* =========================================================================
   VOLET DE PANIER

   Il remplace l'ancien panneau deroulant sous le sac. Deux raisons, et elles
   valent d'etre rappelees avant d'y toucher :

     - un panneau accroche au header ne peut pas depasser son contexte
       d'empilement (le header est `position: fixed`). Le volet est donc un
       FRERE du header, fixe au bord droit de la fenetre ;
     - il s'ouvre au CLIC et ne se referme que sur un geste. L'ancien s'ouvrait
       au survol et se derobait au bout de quatre secondes : on ne lit pas un
       panier dans ces conditions.

   Ferme, il porte `hidden` (pose par le script) : rien a lire pour un lecteur
   d'ecran, rien a atteindre a la tabulation. Le glissement, lui, est commande
   par la classe `est-ouvert` — d'ou les deux etats.
   ========================================================================= */
.evok-volet {
	/* PIEGE, et il coute cher : les couleurs de ce fichier sont declarees sur
	   `header.header`, pas sur `:root`. Le volet etant un FRERE du header (voir
	   plus haut pourquoi), il n'en herite pas : `var(--white)` y valait rien,
	   `background` devenait invalide, et le panneau s'affichait transparent —
	   liste flottant sur la page, boutons sans cadre, noir plein disparu.

	   On les redeclare donc ici, exactement comme le font `.header_nav`
	   (chrome.css) et `.wp_popin` (popin.css) : chaque composant detache du
	   header porte sa propre palette. Meme valeurs, une seule source a corriger
	   le jour ou la charte les changera. */
	--white: #ffffff;
	--black_alt: #121212;
	--body-color: var(--black_alt);
	--gris-texte: #6b6b66;
	--gris-filet: #e4e1db;

	position: fixed;
	inset: 0;
	/* Au-dessus de TOUT, y compris de la barre d'achat collante de Storefront,
	   qui monte a 99998 (woocommerce.css) et passait donc par-dessus le bas du
	   volet. Le chiffre n'est pas arbitraire : il repond a celui-la. */
	z-index: 100000;
	/* Le volet vit hors du header : sa typographie non plus n'est pas heritee. */
	font-family: var(--font-body, 'Futura PT', Arial, Helvetica, sans-serif);
	color: var(--body-color);
}

.evok-volet[hidden] { display: none; }

/* La barre d'achat s'efface pendant que le volet est ouvert. Passer au-dessus
   d'elle suffisait a la couvrir, mais elle restait lisible sous le voile, a
   proposer un achat pendant qu'on relit son panier. */
body.evok-volet-ouvert .storefront-sticky-add-to-cart { display: none; }

/* Remise a zero des marges du navigateur.
   Meme cause que les couleurs plus haut : `header.header ul { margin:0; padding:0 }`
   ne porte pas jusqu'ici. Sans ces trois lignes, la liste heritait des 40 px de
   retrait par defaut d'un <ul> et les bons se decalaient vers la droite, sans
   plus s'aligner sur le titre du volet ni sur le sous-total. */
.evok-volet ul { list-style: none; margin: 0; padding: 0; }
.evok-volet p { margin: 0; }
.evok-volet a { color: inherit; text-decoration: none; }

/* Le volet est ecrit d'une seule fonte, la fonte de labeur. Sans cette regle,
   le titre — un <h2> — passe au serif de titrage impose par la feuille du
   theme (`h1, h2, h3, h4`, style.css section 2), et le volet se lit en deux
   ecritures. */
.evok-volet h2,
.evok-volet h3 {
	font-family: var(--font-body, 'Futura PT', Arial, Helvetica, sans-serif);
	font-weight: 400;
}
.evok-volet button {
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	cursor: pointer;
}
.evok-volet *, .evok-volet *::before, .evok-volet *::after { box-sizing: border-box; }

.evok-volet__voile {
	position: absolute;
	inset: 0;
	background: rgba(19, 41, 75, .28); /* bleu de charte, tres dilue */
	opacity: 0;
	transition: opacity .35s ease;
}

.evok-volet.est-ouvert .evok-volet__voile { opacity: 1; }

.evok-volet__panneau {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: 420px;
	max-width: 100vw;
	height: 100%;
	background: var(--white);
	color: var(--body-color);
	transform: translateX(100%);
	transition: transform .35s ease;
	box-shadow: -18px 0 40px rgba(0, 0, 0, .08);
}

.evok-volet.est-ouvert .evok-volet__panneau { transform: translateX(0); }

/* Le contenu est un fragment AJAX remplace en bloc : c'est LUI qui doit porter
   la colonne, sans quoi la liste ne defilerait plus apres un retrait. */
.evok-volet .header--panier-contenu {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

/* Entete et pied ne sont plus des aplats : un simple filet gris les detache du
   corps. Le volet est ainsi d'un seul blanc, et les trois zones se distinguent
   par leur separation, pas par leur fond. */
.evok-volet__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0 15px;
	padding: 22px 24px;
	border-bottom: 1px solid var(--gris-filet);
}

.evok-volet__titre {
	display: flex;
	align-items: center;
	gap: 0 10px;
	margin: 0;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 2.4px;
	text-transform: uppercase;
}

/* Le compte reprend le chiffre du header : meme role, meme discretion. */
.evok-volet__compte {
	/* La fonte est REDITE ici, et ce n'est pas une precaution inutile : le titre
	   du volet est un <h2>, que la feuille du theme passe au serif de titrage
	   (`h1, h2, h3, h4 { font-family: var(--font-display) }`, style.css section
	   2). Le chiffre en heritait et se lisait dans une autre fonte que celui du
	   header, juste au-dessus. */
	font-family: var(--font-body, 'Futura PT', Arial, Helvetica, sans-serif);
	font-size: 15px;
	letter-spacing: 0;
	color: var(--gris-texte);
	font-variant-numeric: tabular-nums;
}

.evok-volet__fermer {
	display: inline-flex;
	padding: 6px;
	background: none;
	border: 0;
	color: var(--body-color);
	cursor: pointer;
	transition: opacity .3s ease;
}

.evok-volet__fermer:hover { opacity: .6; }

/* Seul le corps defile : l'entete et le pied restent en vue, le bouton
   « Commander » n'est jamais a chercher en bas d'une longue liste. */
.evok-volet__corps {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.evok-volet .header--panier-liste { padding: 24px; }
.evok-volet .header--panier-liste li {
	display: flex;
	align-items: flex-start;
	gap: 0 15px;
	text-align: left;
}
.evok-volet .header--panier-liste li + li {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--gris-filet);
}
.evok-volet .header--panier-liste img {
	width: 80px;
	height: auto;
	flex: 0 0 auto;
	/* Angles droits, comme partout ailleurs dans la boutique : l'arrondi vient
	   des images de Storefront, il n'a jamais ete un choix de la charte. */
	border-radius: 0;
}
.evok-volet .header--panier-detail { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.5; }

/* Nom et montant sur la meme ligne, cales en HAUT (`baseline` ferait descendre
   le montant avec la derniere ligne d'un nom qui en occupe deux). */
.evok-volet .header--panier-ligne {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0 14px;
}

.evok-volet .header--panier-titre {
	flex: 1 1 auto;
	min-width: 0;
	text-transform: uppercase;
	letter-spacing: 1.04px;
}
.evok-volet .header--panier-valeur { display: block; margin-top: 4px; color: var(--gris-texte); }

/* ---- Quantite ----
   Un seul cadre pour les trois elements, comme le champ de code promotionnel :
   c'est une commande, pas trois boutons voisins. */
.evok-volet__qte {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--gris-filet);
}

.evok-volet .evok-volet__qte-pas {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	/* Signes plus grands mais fins : a cette taille, la graisse normale de
	   Futura donne un « + » qui pese plus lourd que le chiffre entre les deux. */
	font-weight: 100;
	line-height: 1;
	color: var(--body-color);
	transition: background .25s ease;
}

.evok-volet .evok-volet__qte-pas:hover:not(:disabled) { background: #f5f3f0; }

/* Desactive : le bouton reste EN PLACE, en retrait. Le faire disparaitre
   deplacerait le chiffre d'un cran a chaque fois qu'on atteint une borne. */
.evok-volet .evok-volet__qte-pas:disabled {
	color: var(--gris-filet);
	cursor: default;
}

.evok-volet__qte-valeur {
	min-width: 30px;
	text-align: center;
	font-size: 14px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Pendant l'aller-retour serveur : le volet ne se fige pas visuellement (il
   n'y a rien de plus desagreable qu'un contenu qui clignote a chaque clic),
   mais il n'accepte plus de geste — le suivant porterait sur un affichage
   deja perime. */
.evok-volet .header--panier-contenu.est-en-cours .evok-volet__qte,
.evok-volet .header--panier-contenu.est-en-cours .evok-volet__retirer {
	pointer-events: none;
	opacity: .55;
}
/* Le prix formate par WooCommerce arrive en <span> : il ne doit pas reprendre
   la casse du titre. */
.evok-volet .header--panier-valeur .amount { text-transform: none; }
.evok-volet .header--panier-prix { flex: 0 0 auto; font-size: 14px; white-space: nowrap; }

/* Les deux commandes de la ligne, cote a cote. */
.evok-volet__commandes {
	display: flex;
	align-items: center;
	gap: 0 14px;
	margin-top: 12px;
}

/* La corbeille est en retrait : c'est le geste qu'on regrette, il ne doit pas
   peser autant que le bon lui-meme. */
.evok-volet .evok-volet__retirer {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--gris-texte);
	transition: color .25s ease, opacity .25s ease;
}
.evok-volet .evok-volet__retirer:hover { color: var(--body-color); }
.evok-volet .evok-volet__retirer.est-en-cours { opacity: .4; pointer-events: none; }

.evok-volet .header--panier-vide {
	margin: 0;
	padding: 40px 24px;
	text-align: center;
	/* Corps de base du site (16 px, comme `header.header` et le `--text-base` du
	   theme) : c'est une phrase, pas une etiquette. */
	font-size: 16px;
	color: var(--gris-texte);
}

.evok-volet__pied {
	flex: 0 0 auto;
	padding: 24px 24px 24px;
	border-top: 1px solid var(--gris-filet);
}

/* ---- Code promotionnel ----
   Champ et bouton d'un seul tenant, sur toute la largeur du pied : il est
   visible sans rien deplier, comme au panier. */
.evok-volet__coupon {
	display: flex;
	margin: 0 0 14px;
}

/* Champ calé sur celui du bloc cadeau de la fiche produit (style.css,
   section 5) : meme hauteur, meme retrait, meme filet, meme corps. Les valeurs
   sont converties en px, unite de ce fichier — 3,25rem = 52 px, 1rem = 16 px. */
.evok-volet__coupon input {
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	padding: 0 16px;
	background: var(--white);
	border: 1px solid var(--gris-filet);
	border-right: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: inherit;
	font-size: 16px;
	color: var(--body-color);
}

.evok-volet__coupon input:focus {
	outline: none;
	box-shadow: none;
	border-color: var(--body-color);
}

/* Meme invite que sur la fiche produit : grise, et volontairement pale — c'est
   une indication, pas une valeur saisie. */
.evok-volet__coupon ::placeholder {
	color: var(--gris-texte);
	opacity: .55;
}

.evok-volet__coupon button {
	flex: 0 0 auto;
	height: 52px;
	padding: 0 20px;
	border: 1px solid var(--body-color);
	font-size: 13px;
	/* Storefront met tous ses boutons en 600 : le gras jurait a cote d'un champ
	   au trait fin, et avec les deux gestes du pied, qui sont en graisse
	   normale. */
	font-weight: 400;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	transition: background .3s ease, color .3s ease;
}

.evok-volet__coupon button:hover {
	background: var(--body-color);
	color: var(--white);
}

/* Reponse de WooCommerce (code inconnu, expire, applique). Le markup vient du
   coeur : on n'en reprend que la taille et la couleur. */
.evok-volet__message:not(:empty) {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gris-texte);
}
.evok-volet__message ul { margin: 0; }

/* Les notices arrivent avec l'habillage que leur donne le theme (fond teinte,
   filet a gauche, angles) : dans un pied de volet, ce cadre dans le cadre
   n'apporte rien. On le remet a plat — le message se lit comme une phrase
   posee sous le champ, sans retrait : il s'aligne sur le champ auquel il
   repond.

   L'orange est celui des notices de WooCommerce (#e2401c). Un code refuse est
   la seule chose qui s'ecrit ici — une couleur d'alerte y est a sa place, et
   celle-la est deja celle du reste de la boutique.

   Valeurs ECRITES EN CLAIR plutot qu'en variables du theme : celles-ci sont
   declarees dans style.css, et ce fichier-ci doit pouvoir s'afficher sans lui.
   Une variable absente rendrait la declaration invalide — c'est exactement ce
   qui a rendu le volet transparent plus haut. */
.evok-volet__message .woocommerce-message,
.evok-volet__message .woocommerce-info,
.evok-volet__message .woocommerce-error {
	background: none;
	border: none;
	border-radius: 0;
	color: #e2401c;
	font-size: 14.4px;
	line-height: 1.25;
	padding: 0;
}

.evok-volet__promo {
	display: flex;
	align-items: baseline;
	gap: 0 10px;
	margin: 0 0 10px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1.04px;
}
.evok-volet__promo-code { flex: 1 1 auto; }
.evok-volet__promo-montant { letter-spacing: 0; text-transform: none; }
.evok-volet .evok-volet__promo-retirer {
	flex: 0 0 auto;
	color: var(--gris-texte);
	font-size: 16px;
	line-height: 1;
	transition: color .25s ease;
}
.evok-volet .evok-volet__promo-retirer:hover { color: var(--body-color); }

.evok-volet .header--panier-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 0 16px;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 1.04px;
}
.evok-volet .header--panier-total .amount {
	font-size: 18px;
	letter-spacing: 0;
	text-transform: none;
}

/* Deux gestes de poids differents : le noir plein emporte, le contour attend. */
.evok-volet__gestes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 10px;
}

/* PIEGE DE SPECIFICITE, et il rendait le bouton illisible : la remise a zero
   plus haut, `.evok-volet a { color: inherit }`, compte une classe ET un
   element — elle l'emportait sur `.evok-volet__geste--principal`, qui n'a
   qu'une classe. Le texte du bouton heritait donc du noir du pied, sur un fond
   noir. Les regles de couleur des liens du volet sont pour cette raison
   ecrites avec DEUX classes. */
.evok-volet .evok-volet__geste {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 12px;
	border: 1px solid var(--body-color);
	font-size: 13px;
	letter-spacing: 1.04px;
	text-align: center;
	text-transform: uppercase;
	color: var(--body-color);
	transition: background .3s ease, color .3s ease;
}

.evok-volet .evok-volet__geste--principal {
	background: var(--body-color);
	color: var(--white);
}
.evok-volet .evok-volet__geste--principal:hover {
	background: transparent;
	color: var(--body-color);
}

.evok-volet .evok-volet__geste--second:hover {
	background: var(--body-color);
	color: var(--white);
}

/* Le survol attenue des liens du header n'a rien a faire ici. */
.evok-volet a:hover { opacity: 1; }

/* La page ne defile plus derriere le volet : on revient a sa position exacte
   en le refermant, ce qu'un defilement conserve ne garantit pas. */
body.evok-volet-ouvert { overflow: hidden; }

@media (max-width: 480px) {
	.evok-volet__panneau { width: 100%; }
	.evok-volet__gestes { grid-template-columns: 1fr; gap: 10px 0; }
}

/* (La loupe mene desormais a la page de recherche, qui porte le champ : le
   panneau deroulant sous l'en-tete et ses regles ont disparu avec lui.) */

/* ---- selecteur de langue ---- */
header.header .header_top .wp_lang { margin-left: auto; display: inline-flex; }
/* Ecart plus large qu'entre les trois icones elles-memes : la langue n'est pas
   une quatrieme commande de la boutique, et la pastille du panier venait
   presque toucher le globe. */
header.header .header_top .header--shop + .wp_lang { margin-left: 42px; }

header.header .wp_lang .fa-chevron-down { font-size: 7.5px; }
header.header .wp_lang .wp_lang--dropdown { position: relative; }
header.header .wp_lang .wp_lang--dropdown button {
	display: flex;
	align-items: center;
	gap: 0 10px;
	color: var(--white);
	font-size: 16px;
	transition: color 0.4s ease;
}
header.header.header_black .wp_lang .wp_lang--dropdown button,
header.header.scrolled .wp_lang .wp_lang--dropdown button {
	color: var(--body-color);
}
header.header .wp_lang .wp_lang--dropdown .dropdown--list {
	position: absolute;
	left: 0;
	top: 100%;
	padding-top: 7.5px;
	opacity: 0;
	pointer-events: none;
	z-index: -1;
}
header.header .wp_lang .wp_lang--dropdown .dropdown--list li a {
	display: block;
	background: var(--white);
	color: var(--body-color);
	font-size: 16px;
	padding: 11px 15px;
	border: 1px solid var(--body-color);
	transition: color 0.3s ease, background-color 0.3s ease;
}
header.header .wp_lang .wp_lang--dropdown .dropdown--list li a:hover {
	background: var(--body-color);
	color: var(--white);
}
header.header .wp_lang .wp_lang--dropdown .dropdown--list li + li a { border-top: 0; }
header.header .wp_lang .wp_lang--dropdown:hover .dropdown--list {
	opacity: 1;
	pointer-events: auto;
	z-index: 10;
}

/* ---- boutons (portes du theme, header_black : bordure foncee) ---- */
header.header .btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	white-space: normal;
	text-align: left;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 13px;
	line-height: 22px;
	letter-spacing: 1.04px;
	padding: 10px 20px;
	border: 1px solid var(--body-color);
	color: var(--body-color);
	cursor: pointer;
	transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
}
header.header .btn:hover {
	background: var(--body-color);
	border: 1px solid var(--body-color);
	color: var(--white);
}
/* bouton Book : blanc sur la photo, fonce en header_black / scrolled */
header.header .btn.btn-white {
	background: transparent;
	border: 1px solid var(--white);
	color: var(--white);
}
header.header .btn.btn-white:hover {
	background: var(--body-color);
	border: 1px solid var(--body-color);
	color: var(--white);
}
header.header.header_black .header_top .header--book > .btn,
header.header.scrolled .header_top .header--book > .btn {
	background: transparent;
	border: 1px solid var(--body-color);
	color: var(--body-color);
}
header.header.header_black .header_top .header--book > .btn:hover,
header.header.scrolled .header_top .header--book > .btn:hover {
	background: var(--body-color);
	border: 1px solid var(--body-color);
	color: var(--white);
}

/* ---- Book (dropdown au survol) ----
   Il ouvre la ligne, a gauche : plus de marge gauche, la marge passe a droite
   pour le decoller de ce qui suivrait. */
header.header .header_top .header--book { margin-right: 20px; position: relative; }
header.header .header_top .header--book > .btn { min-width: 120px; }
header.header .header_top .header--book .book--btns {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	opacity: 0;
	pointer-events: none;
	z-index: -1;
	transition: opacity 0.2s ease;
}
header.header .header_top .header--book .book--btns .btn {
	width: 100%;
	background: var(--white);
	color: var(--black_alt);
	border: 1px solid var(--black_alt);
	border-top: 0;
}
header.header .header_top .header--book .book--btns .btn:hover {
	background: var(--black_alt);
	color: var(--white);
}
header.header .header_top .header--book:hover .book--btns {
	opacity: 1;
	pointer-events: auto;
	z-index: 10;
}

/* masque Book sous 992px (d-lg-block d-none du theme) */
@media (max-width: 991px) {
	header.header .header_top .header--book { display: none; }
}

/* ---- etat scrolled : header reduit, bascule des logos ---- */
header.header.scrolled { background: var(--white); transition: background 0.4s ease 0.4s; }
header.header.scrolled .header_top { height: 80px; transition: height 0.4s ease, border 0.4s ease; }
header.header.scrolled .header_top .header--logo.logo--full {
	transform: translate(-50%, -250%);
	transition: transform 0.4s ease;
}
header.header.scrolled .header_top .header--logo.logo--text {
	opacity: 1;
	transition: opacity 0.4s ease 0.4s;
}

/* ---- DÉGAGEMENT DU CONTENU : VOLONTAIREMENT ABSENT DE CE FICHIER ----

   La version de forms posait ici :

       body:not(.evok-has-hero) { padding-top: 130px; }

   Deux raisons de l'avoir retirée.

   D'abord elle est fausse sur la boutique : sa spécificité (0,1,1) l'emportait
   sur le calcul de chrome.css (0,0,1), qui tient compte du menu principal.
   Le contenu démarrait donc à 130px et le titre du produit disparaissait
   derrière la barre de menu — sans que rien ne le signale.

   Ensuite elle n'est pas à sa place : ce fichier habille le header, il ne
   met pas la page en page. Tout le dégagement est calculé dans chrome.css,
   à un seul endroit, header + menu + barre d'admin + respiration.

   L'image d'en-tête a également disparu avec le champ ACF qui la pilotait. */

/* =========================================================================
   MOBILE

   TOUT PART D'UN FAIT DE MISE EN PAGE : le logo est centre en POSITION
   ABSOLUE. Il n'occupe aucune place dans la ligne, donc il ne repousse rien —
   ce qui l'entoure doit se tenir a distance par ses propres largeurs, sinon il
   lui passe dessus sans que rien ne l'en empeche.

   Tant que les quatre pictos etaient masses a droite, la seule variable etait
   leur taille : on les a rapetisses, puis on a sacrifie l'enveloppe. La
   REPARTITION DE PART ET D'AUTRE change la donne — chaque groupe ne se bat plus
   que contre un demi-logo, et l'espace disponible double.

   Le calcul, valable pour les deux cotes :

       (largeur d'ecran − largeur du logo) / 2 − 20 de marge

   soit 137 px a 375, 129 a 360, 109 a 320. Les paliers ci-dessous s'y tiennent
   avec une reserve. TOUTE ICONE AJOUTEE DANS CETTE BARRE EST A REPASSER PAR CE
   CALCUL — c'est la seule chose qui empeche le recouvrement.
   ========================================================================= */

@media (max-width: 767px) {
	header.header { padding: 0 20px; }

	/* Les marges negatives suivent la marge interieure du header, qui tombe a
	   20 px ici. Le texte se resserre : sur un telephone, la meme phrase en
	   13 px et 1,2 px d'interlettrage passait sur deux lignes. */
	header.header .evok-bandeau {
		margin: 0 -20px;
		padding: 10px 20px;
		font-size: 12px;
		letter-spacing: 1px;
	}

	header.header .header_top .header--logo img { width: calc(100px * var(--logo-scale, 1)); }
	header.header .header_top .header--logo.logo--text img { width: calc(90px * var(--logo-scale, 1)); }
	header.header .header_top .wp_lang { display: none; }
	header.header.scrolled .header_top { height: 65px; }
	body.admin-bar header.header { top: 46px; }
	/* Le degagement mobile est lui aussi dans chrome.css : le header garde
	   ses 130px hors defilement, seul le logo y est plus petit. */

	/* ---- de part et d'autre du logo ----
	   A gauche les utilitaires — langue, recherche, compte. A droite
	   le panier, SEUL : c'est la convention e-commerce la mieux etablie, et
	   c'est le seul picto qui porte un etat (son compteur change). Entoure de
	   trois voisins, il n'etait qu'une icone parmi d'autres ; isole, il devient
	   une cible.

	   AUCUN CHANGEMENT DE MARKUP : l'ordre du document reste celui du bureau,
	   donc la tabulation et les lecteurs d'ecran ne bougent pas. Seul l'ordre
	   VISUEL change, par `order` et une marge automatique. */
	header.header .header_top .header--shop {
		/* La rangee occupe toute la largeur restante au lieu de fermer la ligne
		   (`margin-left: auto` du bureau) : c'est ce qui permet d'ecarter ses
		   propres enfants. */
		flex: 1 1 auto;
		margin-left: 0;
		gap: 0 16px;
	}

	/* Le panier est pousse jusqu'au bord droit ; tout ce qui le precede reste
	   groupe a gauche. Une seule declaration fait la separation. */
	header.header .header_top .header--panier-zone { margin-left: auto; }

	/* L'ENVELOPPE NE SUIT PAS SUR TELEPHONE, et ce n'est plus une question de
	   place : elle rentrerait desormais. C'est la seule des quatre commandes qui
	   ne mene pas a la boutique — elle ouvre le logiciel de courrier, sort le
	   client du site, et la meme adresse est dans le pied de page. Recherche,
	   compte et panier sont des gestes d'achat ; sur un ecran ou chaque cible se
	   paie en pixels, la barre ne garde que ceux-la.

	   Elle reste rendue dans le document et visible des 768 px : rien n'est
	   retire du markup, seulement de l'affichage. */
	header.header .header_top .header--shop > a[href^="mailto:"] { display: none; }

	/* Les SVG portent `width`/`height` en attributs : la feuille les surcharge,
	   les attributs restent la valeur de repli si le fichier ne se charge pas.
	   22 px et non 20 : la place regagnee sert d'abord a rendre les cibles plus
	   sures au pouce. */
	header.header .header_top .header--shop-lien svg {
		width: 22px;
		height: 22px;
	}

	/* Le chiffre suit les pictos : il se pose sur l'epaule du sac, il doit
	   garder la meme hauteur relative a un sac plus petit. */
	header.header .header_top .header--panier-compte {
		margin-left: 4px;
		margin-top: -6px;
		font-size: 12px;
	}

	/* (Le panneau de recherche debordait de l'ecran des lors que la loupe est
	   passee a GAUCHE, et il fallait le desancrer de son icone pour l'etaler
	   d'un bord a l'autre. La loupe menant maintenant a la page de recherche,
	   le probleme n'a plus d'objet — un lien ne deborde de rien.) */
}

@media (max-width: 600px) {
	header.header .header_top .header--logo img { width: calc(88px * var(--logo-scale, 1)); }
	header.header .header_top .header--logo.logo--text img { width: calc(80px * var(--logo-scale, 1)); }
}

/* Deux commandes a gauche au lieu de trois : le groupe vaut desormais, a
   375 px, langue (26) + 16 + deux pictos de 22 (44) + un ecart de 16 = 102,
   pour 137 disponibles. Il tient meme a 320 px (109 disponibles), ou aucun
   palier n'etait tenable avec quatre pictos masses a droite.

   Ce palier n'est donc plus une necessite mais une aisance : sur les tres
   petits ecrans, on resserre encore pour eloigner la barre du logo. */
@media (max-width: 420px) {
	header.header .header_top .header--shop { gap: 0 12px; }
	header.header .header_top .header--shop-lien svg { width: 20px; height: 20px; }
}

/* =========================================================================
   BURGER + VOLET DE NAVIGATION (telephone)

   Sur telephone, le menu principal ne s'empile plus sous l'en-tete : un burger
   ouvre un panneau glissant depuis la gauche, meme mecanisme que le volet du
   panier (evok-volet), ou les entrees respirent en grand. Le burger et le
   masquage de .header_nav sont sous le point de rupture ; le panneau reutilise
   la coque .evok-volet, on ne redecrit que son cote et son contenu.
   ========================================================================= */

.header--burger { display: none; }

@media (max-width: 767px) {
	.header--burger {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 40px;
		height: 40px;
		padding: 0;
		margin: 0;
		order: -2;
		background: none;
		border: 0;
		cursor: pointer;
	}

	.header--burger-trait {
		display: block;
		width: 22px;
		height: 1px;
		background: var(--body-color);
	}

	/* La barre de nav sous l'en-tete cede la place au burger et a son volet. */
	header.header .header_nav { display: none; }
}

/* Le panneau glisse depuis la GAUCHE (le panier vient de la droite). */
.evok-volet--nav .evok-volet__panneau--nav {
	right: auto;
	left: 0;
	width: 88vw;
	max-width: 360px;
	padding: 22px 24px 28px;
	transform: translateX(-100%);
	box-shadow: 18px 0 40px rgba(0, 0, 0, .08);
}

.evok-volet--nav.est-ouvert .evok-volet__panneau--nav { transform: translateX(0); }

.evok-volet--nav .evok-volet__panneau--nav { padding: 22px 26px 20px; }

/* En-tete : la croix a GAUCHE avec le mot "Close", un filet sous toute la
   rangee, comme le burger d'evokcollection.com. La croix est un SVG au trait
   d'un pixel, plus grand et plus fin qu'un caractere. */
.evok-nav-volet__tete {
	display: flex;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(19, 41, 75, .14);
}
.evok-nav-volet__fermer {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 4px 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--body-color);
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 0.04em;
	transition: opacity .3s ease;
}
.evok-nav-volet__fermer:hover { opacity: 1; }
.evok-nav-volet__fermer-x { display: block; }
.evok-nav-volet__fermer-mot { line-height: 1; }

/* Menu en capitales espacees, aere, comme la nav de marque. */
.evok-nav-volet__menu { margin-top: 30px; }
.evok-nav-volet__liste { list-style: none; margin: 0; padding: 0; }
.evok-nav-volet__liste li { margin: 0; margin-top: 1rem; line-height: 2.5rem; }
.evok-nav-volet__liste a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0px 0;
	font-size: 15px;
	line-height: 1.0;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--body-color);
	text-decoration: none;
	transition: opacity .3s ease;
}

/* Chevron a droite de chaque entree : le VRAI chevron du jeu d'icones du site
   (fa-light fa-chevron-right, repli SVG au meme dessin), injecte dans le lien
   par `link_after`. Meme trait fin et net que le menu a paliers
   d'evokcollection.com. */
.evok-nav-volet__liste a i,
.evok-nav-volet__liste a svg {
	flex: 0 0 auto;
	opacity: .55;
	transition: transform .3s ease;
}
.evok-nav-volet__liste a i { font-size: 13px; line-height: 1; }
.evok-nav-volet__liste a svg { width: 11px; height: 11px; }
.evok-nav-volet__liste a:hover { opacity: .55; }
.evok-nav-volet__liste a:hover i,
.evok-nav-volet__liste a:hover svg { transform: translateX(3px); }
.evok-nav-volet__liste .current-menu-item > a,
.evok-nav-volet__liste .current-product-parent > a,
.evok-nav-volet__liste .current-menu-parent > a {
	text-decoration: none;
}

/* Bas du panneau, pousse en pied (le panneau est une colonne flex) : les
   services, puis les liens legaux, puis les langues. */
.evok-nav-volet__bas { margin-top: auto; padding-top: 30px; }

/* Menu des services : liens principaux du pied, un cran plus lisibles que les
   mentions legales sans concurrencer le menu du haut. */
.evok-nav-volet__services { list-style: none; margin: 0 0 22px; padding: 0; }
.evok-nav-volet__services li { margin: 0; line-height: normal; }
.evok-nav-volet__services a {
	display: inline-block;
	padding: 5px 0;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--body-color);
	text-decoration: none;
	transition: opacity .3s ease;
}
.evok-nav-volet__services a:hover { opacity: .55; }

.evok-nav-volet__legal { list-style: none; margin: 0 0 20px; padding: 0; }
.evok-nav-volet__legal li { margin: 0 0 0px; line-height: normal; letter-spacing: 0.02em; }
.evok-nav-volet__legal a {
	font-size: 12px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 1);
	text-decoration: none;
	transition: color .3s ease;
}
.evok-nav-volet__legal a:hover { color: var(--body-color); }

/* Selecteur de langue en globe deroulant, comme le footer d'evokcollection.com.
   Ouvert au TAP (focus-within, fiable sur mobile la ou :hover ne l'est pas) et
   vers le HAUT, puisqu'il est en pied de panneau. */
.wp_lang.evok-nav-volet__lang { margin-top: 0.6rem; }
.evok-nav-volet__lang .wp_lang--dropdown { position: relative; display: inline-block; }
.evok-nav-volet__lang button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--body-color);
	font-size: 13px;
	letter-spacing: 0.03em;
	line-height: 1;
	font-weight: 300;
}
.evok-nav-volet__lang button svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.evok-nav-volet__lang .dropdown--list {
	position: absolute;
	left: 0;
	bottom: 100%;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
	z-index: 5;
}
.evok-nav-volet__lang .dropdown--list li a {
	display: block;
	padding: 9px 16px;
	background: var(--white);
	color: var(--body-color);
	border: 1px solid var(--body-color);
	font-size: 13px;
	letter-spacing: 0.03em;
	white-space: nowrap;
	text-decoration: none;
}
.evok-nav-volet__lang .dropdown--list li + li a { border-top: 0; }
.evok-nav-volet__lang .dropdown--list li a:hover { background: var(--body-color); color: var(--white); }
.evok-nav-volet__lang .wp_lang--dropdown:hover .dropdown--list,
.evok-nav-volet__lang .wp_lang--dropdown:focus-within .dropdown--list {
	opacity: 1;
	pointer-events: auto;
}