/* ==========================================================================
   En-tête (parts/header.html) : barre d'annonce, logo, menus, compte et panier,
   menu mobile, menu déroulant du compte. En-tête de la page de commande
   (parts/checkout-header.html).
   Tout se modifie dans Apparence → Éditeur → Compositions.
   ========================================================================== */

/* ---------- Barre d'annonce : un message à la fois (interface.js) ---------- */
.annonce{position:relative;margin:0;height:var(--annonce-h);display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(90deg,var(--nuit),color-mix(in srgb,var(--nuit) 80%,var(--lilas)) 50%,var(--nuit));color:var(--sur-nuit);font-size:14px;letter-spacing:.02em}
.annonce__message{grid-area:1/1;color:inherit;text-decoration:none;opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease;white-space:nowrap;padding-inline:16px}
.annonce__message strong{color:var(--rose)}
.annonce__message a{color:inherit;text-decoration:none}
a.annonce__message::after{content:"→";margin-left:8px;opacity:.6;transition:margin .3s}
.annonce__message:focus-visible{color:var(--sur-nuit);text-decoration:underline;text-decoration-color:var(--rose);text-underline-offset:4px}
@media (hover:hover){.annonce__message:hover{color:var(--sur-nuit);text-decoration:underline;text-decoration-color:var(--rose);text-underline-offset:4px}}
@media (hover:hover){a.annonce__message:hover::after{margin-left:12px}}
.annonce__message.est-visible{opacity:1;transform:none;transition:opacity .5s var(--courbe) .3s,transform .6s var(--courbe) .3s}   /* le message suivant arrive quand le précédent est parti : jamais deux superposés */
.annonce__message.sort{opacity:0;transform:translateY(-12px)}

/* ---------- En-tête collant, effacé en descendant (interface.js) ----------
   Le collage est natif (sticky) : le navigateur le tient en place, même pendant le défilement du téléphone.
   Le seul mouvement posé par le script est l'effacement (est-cache), dans les deux sens à la même douceur.
   PIÈGE : un backdrop-filter sur l'en-tête devient le bloc conteneur du panneau « fixe » du menu mobile
   (croix hors écran). Le verre dépoli vit sur un pseudo-élément. */
:root{--annonce-h:38px}
header.wp-block-template-part{position:sticky;top:0;z-index:40;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.admin-bar header.wp-block-template-part{top:32px}
/* effacé : entièrement (aucune lisière ne dépasse sous la barre du navigateur), puis caché une fois sorti */
header.wp-block-template-part.est-cache{transform:translateY(calc(-100% - 8px));visibility:hidden;transition:transform .45s cubic-bezier(.4,0,.2,1),visibility 0s .45s}
/* PIÈGE iPhone : quand la barre du navigateur apparaît ou disparaît, l'en-tête collé suit avec un temps de
   retard et une bande de page défilait au-dessus de lui. Sa nuit (celle de la barre d'annonce) se prolonge
   vers le haut : cette bande est toujours nuit, comme le fond du document. */
header.wp-block-template-part::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:240px;background:var(--nuit);pointer-events:none}
.entete{position:relative;z-index:40;background:transparent;border-bottom:1px solid transparent;transition:border-color .4s}
.entete::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--ambiance-fond) 72%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);transition:opacity .4s}
.est-colle .entete{border-bottom-color:var(--ambiance-trait)}
.home header:not(.est-colle) .entete::before{opacity:0}

/* Téléphone et tablette : en-tête FIXE. PIÈGE iPhone et iPad : un en-tête « sticky » est recalé par la page,
   avec une image de retard quand on remonte vite pendant que la barre du navigateur bouge : il vibrait
   (mesuré sur les vidéos : ±3 à ±10 px d'une image à l'autre). Un en-tête fixe est tenu par le navigateur
   lui-même. Sa place est réservée en haut de la page (padding de .wp-site-blocks) : la mise en page ne bouge
   pas. Une fois la page défilée, il ne garde que sa rangée (la barre d'annonce glisse au-dessus, une seule
   fois) ; le menu ouvert le remet en place (un transform ferait du panneau du menu un enfant de l'en-tête). */
@media (max-width:1024px){
  header.wp-block-template-part{position:fixed;top:0;left:0;right:0}
  .admin-bar header.wp-block-template-part{top:32px}
  .wp-site-blocks:has(>header.wp-block-template-part){padding-top:calc(var(--entete-h) + 1px)}   /* barre d'annonce vidée par le client */
  .wp-site-blocks:has(>header .annonce){padding-top:calc(var(--annonce-h) + var(--entete-h) + 1px)}
  .wp-site-blocks:has(>header .entete-commande){padding-top:calc(var(--entete-h) + 1px)}
  header.wp-block-template-part.est-colle:not(.est-cache):has(.annonce){transform:translateY(calc(-1 * var(--annonce-h)))}
  header.wp-block-template-part.est-cache{transform:translateY(calc(-100% - 8px))}   /* l'effacement l'emporte */
  header.wp-block-template-part:has(.is-menu-open){transform:none!important;visibility:visible!important;transition:none}
}

/* [menu catalogue] [logo] [menu pages] [compte, panier] */
.entete-rangee{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;justify-content:space-between;gap:24px;min-height:var(--entete-h)}
.entete-rangee .entete-logo{justify-self:center}
.entete-logo img{display:block;width:150px;height:auto}
.theme-nuit .entete-logo img{filter:brightness(0) invert(1)}   /* sans transition : un filtre animé sur une image la faisait disparaître sur iPhone */   /* la nuit, le « N » bleu nuit disparaissait sur l'en-tête nuit */
.menu-pages{justify-self:end}
:is(.menu-catalogue,.menu-pages) .wp-block-navigation__container{gap:30px}
:is(.menu-catalogue,.menu-pages) .wp-block-navigation-item__content{position:relative;padding:6px 0;font-size:15px;font-weight:500;text-decoration:none;color:var(--ambiance-encre)}
:is(.menu-catalogue,.menu-pages) .wp-block-navigation-item__content::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--courbe)}
:is(.menu-catalogue,.menu-pages) .current-menu-item>.wp-block-navigation-item__content::after{transform:scaleX(1);transform-origin:left}
@media (hover:hover){:is(.menu-catalogue,.menu-pages) .wp-block-navigation-item__content:hover::after{transform:scaleX(1);transform-origin:left}}

/* « Trouver mon produit » : un bouton, sans trait au survol */
.menu-test .wp-block-navigation-item__content{padding:6px 14px!important;border-radius:999px;background:var(--nuit);color:#fff!important;font-weight:600;text-decoration:none!important}
@media (hover:hover){.menu-test .wp-block-navigation-item__content:hover{background:var(--nuit-2)}}
.menu-test .wp-block-navigation-item__content::before,.menu-test .wp-block-navigation-item__content::after{display:none!important}

/* ---------- Compte et panier : icônes dessinées par le thème (la feuille des blocs WooCommerce n'est pas toujours chargée) ---------- */
.entete-actions{display:flex;align-items:center;gap:6px}
.entete-compte{position:relative}
.entete-compte a,.entete-panier .wc-block-mini-cart__button{color:var(--ambiance-encre);width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%}
.entete-compte .wc-block-customer-account__visual{display:grid;place-items:center;width:26px;height:26px}
.entete-compte svg,.entete-compte .wc-block-customer-account__account-icon{width:26px!important;height:26px!important;display:block}
.entete-panier .wc-block-mini-cart__button{background:transparent!important;border:0!important;box-shadow:none!important;cursor:pointer;font:inherit}
.entete-panier .wc-block-mini-cart__quantity-badge{position:relative;display:grid;place-items:center}
.entete-panier .wc-block-mini-cart__icon{width:26px!important;height:26px!important;display:block}
.entete-panier .wc-block-mini-cart__badge{position:absolute;top:-6px;right:-9px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;display:grid;place-items:center;
  font-size:11px;font-weight:700;line-height:1;background:var(--rose-vif)!important;color:#fff!important}
.entete-panier .wc-block-mini-cart__badge:empty{display:none}
/* pages panier et commande : WooCommerce masque le mini-panier mais lui garde sa place ; le compte la reprend */
:is(.woocommerce-cart,.woocommerce-checkout) .entete-panier{display:none}

/* ---------- Menu déroulant du compte (inc/compte.php), au survol en ordinateur ---------- */
.compte-menu{position:absolute;top:calc(100% + 10px);right:-12px;z-index:60;width:260px;padding:16px;border-radius:20px;background:#fff;color:var(--texte);
  border:1px solid color-mix(in srgb,var(--trait) 70%,transparent);box-shadow:0 26px 60px -26px color-mix(in srgb,var(--nuit) 50%,transparent);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s var(--courbe),transform .25s var(--courbe),visibility .25s}
.compte-menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}   /* pont entre l'icône et le menu */
.entete-compte:focus-within .compte-menu{opacity:1;visibility:visible;transform:none}
@media (hover:hover){.entete-compte:hover .compte-menu{opacity:1;visibility:visible;transform:none}}
.compte-menu__bonjour{margin:0 0 4px;font:400 20px/1.2 var(--police-titres)}
.compte-menu__texte{margin:0 0 10px;font-size:13px;color:var(--sourdine)}
.compte-menu__liens{display:flex;flex-direction:column;gap:2px;margin-top:8px}
/* qualifiés : les liens du menu n'héritent pas du style rond de l'icône */
.entete-compte .compte-menu a{width:auto!important;height:auto!important;display:block!important;place-items:initial;border-radius:12px;padding:9px 12px;
  font-size:14px;font-weight:600;color:var(--texte)!important;text-decoration:none!important;white-space:nowrap}
@media (hover:hover){.compte-menu__lien:hover{background:var(--fond)}}
.entete-compte .compte-menu a.compte-menu__lien--customer-logout{margin-top:6px;border-top:1px solid var(--trait);border-radius:0 0 12px 12px;color:var(--sourdine)!important}
.entete-compte .compte-menu a.compte-menu__bouton{display:flex!important;justify-content:center;align-items:center;min-height:44px;margin-bottom:6px;padding:0 16px;border-radius:999px;
  background:var(--nuit);color:#fff!important;font-weight:700}

/* ---------- Menu mobile (panneau de core/navigation) : nuit étoilée, liens numérotés qui entrent un à un ----------
   PIÈGE (vécu en production) : WordPress règle la marge du panneau sur le padding racine de
   theme.json, et le CSS du bloc est imprimé APRÈS cette feuille : sélecteurs qualifiés,
   !important là où WordPress écrit à spécificité égale. */
.wp-block-navigation.menu .wp-block-navigation__responsive-container-open{width:44px;height:44px;align-items:center;justify-content:center;margin-left:-11px;color:inherit}
.wp-block-navigation.menu .wp-block-navigation__responsive-container-open svg{width:26px;height:26px}
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open{color:var(--sur-nuit)!important;padding:14px var(--gouttiere) calc(28px + env(safe-area-inset-bottom))!important;
  background:radial-gradient(110% 60% at 100% 0%,color-mix(in srgb,var(--lilas) 32%,transparent),transparent 60%),
    radial-gradient(90% 50% at 0% 100%,color-mix(in srgb,var(--rose-vif) 26%,transparent),transparent 65%),var(--nuit)!important;
  animation:menu-ouvre .45s var(--courbe) both}
/* quelques étoiles, et le nom de la marque en tête du panneau */
.wp-block-navigation.menu .is-menu-open::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:radial-gradient(1.2px 1.2px at 18% 14%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 72% 9%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 88% 38%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 9% 62%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 56% 78%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 34% 92%,#fff 50%,transparent 51%)}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-dialog::before{content:"N Y V A L I";position:absolute;top:24px;left:0;
  font:300 15px/1 var(--police-texte);letter-spacing:.32em;color:var(--sur-nuit-sourdine)}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-close{top:10px;right:-6px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  color:var(--sur-nuit);background:color-mix(in srgb,#fff 10%,transparent);border:1px solid var(--trait-nuit);border-radius:50%;transition:transform .4s var(--courbe),background-color .3s}
@media (hover:hover){.wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-close:hover{transform:rotate(90deg);background:color-mix(in srgb,#fff 18%,transparent)}}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-close svg{width:24px;height:24px}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-content{padding-top:80px!important;align-items:stretch!important}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__container{flex-direction:row!important;flex-wrap:wrap;gap:0!important;width:100%;align-items:stretch!important;counter-reset:menu}
/* un lien : numéro, grand titre, flèche */
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item{flex:1 0 100%;width:100%;counter-increment:menu;border-bottom:1px solid color-mix(in srgb,var(--trait-nuit) 80%,transparent);
  opacity:0;transform:translateY(14px);animation:menu-lien .55s var(--courbe) forwards}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item__content{display:flex;align-items:center;gap:16px;width:100%;padding:15px 2px!important;
  font-family:var(--police-titres);font-size:34px;line-height:1.05;text-decoration:none;color:var(--sur-nuit)}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item__content::before{content:counter(menu,decimal-leading-zero);flex:none;width:26px;
  font:600 12px/1 var(--police-texte);letter-spacing:.08em;color:var(--rose)}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item__content::after{content:"";flex:none;margin-left:auto;width:20px;height:20px;background:var(--sur-nuit-sourdine);
  -webkit-mask:var(--i-fleche) center/contain no-repeat;mask:var(--i-fleche) center/contain no-repeat;transition:transform .35s var(--courbe),background-color .3s}
@media (hover:hover){.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item__content:is(:hover,:focus-visible)::after{transform:translateX(4px);background:var(--rose)}}
.wp-block-navigation.menu .is-menu-open .current-menu-item>.wp-block-navigation-item__content{color:var(--rose)}
/* « Trouver mon produit » : une carte mise en avant */
.wp-block-navigation.menu .is-menu-open .menu-mobile-test{margin:10px 0 6px;border:0;counter-increment:none}
.wp-block-navigation.menu .is-menu-open .menu-mobile-test>.wp-block-navigation-item__content{padding:16px 18px!important;border-radius:20px;font-size:26px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--rose-vif) 30%,transparent),color-mix(in srgb,var(--lilas) 22%,transparent));border:1px solid color-mix(in srgb,var(--rose) 45%,transparent)}
.wp-block-navigation.menu .is-menu-open .menu-mobile-test>.wp-block-navigation-item__content::before{content:"✦";width:auto;font-size:16px}
.wp-block-navigation.menu .is-menu-open .menu-mobile-test>.wp-block-navigation-item__content::after{background:var(--rose)}
/* liens secondaires (compte, suivi, aide) : des pastilles en bas du panneau, puis la garantie */
.wp-block-navigation.menu .is-menu-open .menu-mobile-pied{flex:0 0 auto;width:auto;margin:16px 8px 0 0;border:0;counter-increment:none}
.wp-block-navigation.menu .is-menu-open .menu-mobile-pied>.wp-block-navigation-item__content{padding:11px 16px!important;border-radius:999px;font:600 14px/1 var(--police-texte);
  background:color-mix(in srgb,#fff 9%,transparent);border:1px solid var(--trait-nuit)}
.wp-block-navigation.menu .is-menu-open .menu-mobile-pied>.wp-block-navigation-item__content::before,
.wp-block-navigation.menu .is-menu-open .menu-mobile-pied>.wp-block-navigation-item__content::after{display:none}
.wp-block-navigation.menu .is-menu-open .menu-mobile-garantie{flex-basis:100%}
.wp-block-navigation.menu .is-menu-open .menu-mobile-garantie>.wp-block-navigation-item__content{padding:8px 0 0!important;background:none;border:0;font-weight:500;color:var(--sur-nuit-sourdine)}
/* les liens entrent un à un */
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item:nth-child(1){animation-delay:.08s}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item:nth-child(2){animation-delay:.13s}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item:nth-child(3){animation-delay:.18s}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item:nth-child(4){animation-delay:.23s}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item:nth-child(5){animation-delay:.28s}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item:nth-child(6){animation-delay:.33s}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item:nth-child(7){animation-delay:.38s}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item:nth-child(n+8){animation-delay:.43s}
@keyframes menu-ouvre{from{opacity:0}}
@keyframes menu-lien{to{opacity:1;transform:none}}
/* liens réservés au panneau (className « menu-mobile-seul ») : ce que l'en-tête masque en mobile */
.wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.is-menu-open) .menu-mobile-seul{display:none}

/* ---------- En-tête de la page de commande ---------- */
.entete-commande{border-bottom:1px solid var(--trait);background:var(--fond)}
.entete-commande-rangee{display:flex;align-items:center;gap:24px;min-height:var(--entete-h)}
.entete-commande-rangee .commande-securisee{display:flex;align-items:center;gap:8px;margin-left:auto;color:var(--sourdine);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.entete-commande-rangee .commande-securisee::before{content:"";width:15px;height:15px;background:currentColor;
  -webkit-mask:var(--i-cadenas) center/contain no-repeat;mask:var(--i-cadenas) center/contain no-repeat}
.entete-commande-rangee .commande-retour{font-size:15px}

/* ---------- Adaptatif ---------- */
@media (max-width:1100px){
  .menu-pages .menu-test{display:none}
}
@media (max-width:1024px){
  /* en-tête replié : [menu][logo] … [compte][panier] ; le menu se replie dès la tablette
     (WordPress ne replie qu'à 600 px, et cinq liens touchent le logo entre 600 et 1024 px) */
  .entete-rangee{display:flex;justify-content:flex-start}
  .entete-rangee .wp-block-navigation.menu{order:-1}
  .entete-actions{margin-left:auto}
  .menu-pages{display:none}
  .entete-logo img{width:120px}
  .wp-block-navigation.menu .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex}
  .wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:none}
}
@media (max-width:782px){
  .admin-bar header.wp-block-template-part{top:46px}
  /* téléphone : un en-tête plein, sans flou ni transparence (aucune couleur ne bave sur ses bords) */
  .entete::before{background:var(--ambiance-fond);-webkit-backdrop-filter:none;backdrop-filter:none}
  .entete-rangee{gap:12px}
}
@media (hover:none),(max-width:781px){
  .compte-menu{display:none}   /* pas de survol : l'icône mène à la page du compte */
}
@media (max-width:600px){
  /* la barre d'administration (connecté) reste en haut, comme l'en-tête : sinon un vide s'ouvrait entre eux */
  #wpadminbar{position:fixed}
}
@media (max-width:560px){
  .entete-commande-rangee{gap:14px}
  .entete-commande-rangee .commande-securisee{font-size:0;gap:0}
  .entete-commande-rangee .commande-retour{white-space:nowrap;font-size:14px}
}
@media (max-width:520px){
  :root{--annonce-h:34px}
  .annonce{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .wp-block-navigation.menu .is-menu-open .wp-block-navigation-item{opacity:1;transform:none;animation:none}
}

/* Ordinateur : en-tête plus fin (1.8.21), pour laisser la place au contenu, surtout sur les portables. */
@media (min-width:1025px){
  :root{--entete-h:66px}
  .entete-logo img{width:140px}
}