/* ═══════════════════════════════════════════════════════════════════════
   PoupeCosmetic - NAVBAR
   Trois ilots flottants au lieu d'une barre rectangulaire :
     1. la marque, sur une plaque qui deborde sous la barre
     2. le menu, dans une forme petale asymetrique (999px / 26px croises)
     3. les actions, dans le petale miroir
   Un arc dore relie les trois, une barre de progression ferme le bas.
   Charge apres poupe.css : elle gagne la cascade.
   ═══════════════════════════════════════════════════════════════════════ */

.nv{
  position:sticky;top:0;z-index:400;padding:18px 0 14px;
  isolation:auto;pointer-events:none;
  transition:padding .45s var(--ease),transform .5s var(--ease);
}
.nv > *{pointer-events:auto}
.nv.compact{padding:10px 0 8px}
/* se replie vers le haut quand on descend, revient des qu'on remonte */
.nv.hid{transform:translateY(-118%)}

/* la barre elle-meme n'a plus de fond : ce sont les ilots qui portent le verre */
.nv__in{
  max-width:1360px;margin:0 auto;padding:0 22px;
  display:flex;align-items:center;gap:14px;
  background:none;border:0;box-shadow:none;border-radius:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  pointer-events:none;
}
.nv__in > *{pointer-events:auto}
.nv.compact .nv__in{background:none;box-shadow:none}

/* ─── surface de verre commune aux ilots ───────────────────────────── */
.nv__brand,.nv__pill,.nv__acts{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.56));
  border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 14px 38px rgba(96,52,32,.14);
  transition:box-shadow .45s var(--ease),background .45s,transform .45s var(--ease);
}
.nv.compact .nv__brand,
.nv.compact .nv__pill,
.nv.compact .nv__acts{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.76));
  box-shadow:0 1px 0 rgba(255,255,255,.98) inset,0 10px 26px rgba(96,52,32,.2);
}

/* Le degrade dore faisait le tour des ilots en s'arretant a 72 % : il se
   lisait comme un contour rate, pas comme une finition. Il est remplace par
   un reflet interieur en haut, qui donne l'epaisseur du verre sans dessiner
   de cadre. L'or ne sert plus qu'a marquer la page courante. */
.nv__brand::after,.nv__pill::after,.nv__acts::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 42%);
  opacity:.9;
}

/* ─── ILOT 1 : la marque ───────────────────────────────────────────── */
.nv__brand > *{position:relative;z-index:1}
.nv__acts > *{position:relative;z-index:1}
.nv__brand{
  display:flex;align-items:center;gap:13px;flex:none;text-decoration:none;
  padding:8px 22px 8px 8px;
  /* Rythme des trois ilots : la marque s'arrondit completement du cote
     exterieur (gauche) et se resserre vers le centre ; les actions font
     l'inverse a droite ; le menu au milieu est un losange. L'ensemble
     s'ouvre vers l'exterieur et se pince vers le centre. */
  border-radius:999px 20px 20px 999px;
}
.nv__brand:hover{transform:translateY(-2px)}
.nv__plate{
  position:relative;flex:none;display:grid;place-items:center;
  width:46px;height:46px;border-radius:15px;
  background:radial-gradient(130% 130% at 28% 18%,#fff,var(--peach) 62%,var(--sand));
  box-shadow:0 8px 20px rgba(96,52,32,.2),0 1px 0 #fff inset;
  transition:transform .55s var(--spring),border-radius .55s var(--ease);
}
.nv__brand:hover .nv__plate{transform:rotate(-7deg) scale(1.05);border-radius:19px}
.nv__plate img{width:30px;height:auto;display:block}
.nv__spark{
  position:absolute;top:-6px;right:-6px;font-size:.7rem;color:var(--gold);
  text-shadow:0 2px 6px rgba(201,143,28,.5);
  animation:nvspark 3.4s var(--ease) infinite;
}
@keyframes nvspark{
  0%,100%{transform:scale(1) rotate(0);opacity:.85}
  50%{transform:scale(1.35) rotate(22deg);opacity:1}
}
.nv__lock{display:flex;flex-direction:column;gap:3px;line-height:1}
.nv__lock b{
  font-family:"Fraunces",serif;font-weight:800;font-size:1.02rem;color:var(--ink);
  letter-spacing:-.01em;
}
.nv__lock b em{font-style:normal;color:var(--red)}
.nv__tag{
  font-family:"DM Mono",monospace;font-size:.5rem;line-height:1.3;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink3);
  padding:0;border:0;
}

/* ─── ILOT 2 : le menu, forme petale ──────────────────────────────── */
.nv__pill{
  flex:0 1 auto;min-width:0;padding:7px 9px;
  border-radius:20px 999px 20px 999px;
}
.nv__menu{
  display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;
  position:relative;z-index:1;
}
.nv__menu a{
  display:flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:999px;position:relative;z-index:1;
  font-size:.8rem;font-weight:600;color:var(--ink2);text-decoration:none;
  white-space:nowrap;transition:color .3s,transform .35s var(--spring);
}
.nv__emo{
  font-size:.82rem;line-height:1;display:inline-block;
  transform:scale(.85);opacity:.55;
  transition:transform .45s var(--spring),opacity .35s;
}
.nv__menu a:hover{color:var(--red)}
.nv__menu a:hover .nv__emo{transform:scale(1.15) rotate(-10deg);opacity:1}

/* Le menu n'est pas une file de six liens : les quatre premiers menent a la
   boutique, les deux derniers a l'aide. Un filet vertical separe les deux
   familles, ce qui rend la barre lisible d'un coup d'oeil. */
.nv__menu li:nth-child(5){margin-left:11px;padding-left:12px;position:relative}
.nv__menu li:nth-child(5)::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:17px;border-radius:1px;
  background:linear-gradient(180deg,transparent,rgba(31,21,18,.16),transparent);
}

/* page courante : pastille pleine, plus de doute sur ou l'on se trouve */
.nv__menu a.is-on{
  color:#fff;
  background:linear-gradient(135deg,var(--red),var(--red-d));
  box-shadow:0 6px 16px rgba(233,30,30,.3),0 1px 0 rgba(255,255,255,.3) inset;
}
/* seule marque doree de la barre : un trait sous la page courante */
.nv__menu a.is-on::after{
  content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  width:16px;height:2px;border-radius:2px;background:var(--gold);
}
.nv__menu a.is-on .nv__emo{opacity:1;transform:scale(1)}
.nv__menu a.is-on:hover{color:#fff}

.nv__glide{
  position:absolute;top:0;height:100%;border-radius:999px;
  background:linear-gradient(135deg,rgba(255,196,63,.24),rgba(233,30,30,.13));
  transition:transform .5s var(--spring),width .5s var(--spring),opacity .3s;
  opacity:0;pointer-events:none;z-index:0;
}
.nv__menu:hover .nv__glide{opacity:1}

/* ─── ILOT 3 : les actions, petale miroir ─────────────────────────── */
.nv__acts{
  display:flex;align-items:center;gap:7px;margin-left:auto;flex:none;
  padding:6px 6px 6px 12px;
  border-radius:20px 999px 999px 20px;
}
.nv__acts .ic{
  width:38px;height:38px;background:rgba(255,255,255,.72);
  box-shadow:0 3px 12px rgba(96,52,32,.1);
}
.nv__acts .ic:hover{background:var(--red);color:#fff}
.nv__acts .ic--red{background:var(--red);color:#fff;box-shadow:0 6px 16px rgba(233,30,30,.3)}
.nv__acts form{display:flex}

/* infobulle discrete sous chaque icone */
.nv__acts .ic[data-tip]::after{
  content:attr(data-tip);
  position:absolute;top:calc(100% + 9px);left:50%;transform:translate(-50%,4px);
  padding:5px 10px;border-radius:999px;white-space:nowrap;
  background:var(--ink);color:#fff;
  font-family:"DM Mono",monospace;font-size:.56rem;letter-spacing:.09em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .28s,transform .28s var(--ease);
}
.nv__acts .ic[data-tip]:hover::after{opacity:1;transform:translate(-50%,0)}

.nv__cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:14px 999px 999px 14px;
  background:linear-gradient(135deg,var(--red),var(--red-d) 60%,var(--red-deep));
  color:#fff;font-size:.8rem;font-weight:700;text-decoration:none;white-space:nowrap;
  box-shadow:0 10px 24px rgba(233,30,30,.36);
  position:relative;overflow:hidden;
  transition:transform .38s var(--spring),box-shadow .38s,border-radius .45s var(--ease);
}
.nv__cta i{font-style:normal;font-size:.9rem;transition:transform .45s var(--spring)}
.nv__cta::before{
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:55%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .7s var(--ease);
}
.nv__cta:hover{
  color:#fff;transform:translateY(-3px);border-radius:999px 14px 14px 999px;
  box-shadow:0 16px 34px rgba(233,30,30,.48);
}
.nv__cta:hover::before{left:120%}
.nv__cta:hover i{transform:rotate(-12deg) scale(1.15)}

/* ─── arc dore + progression ──────────────────────────────────────── */
.nv__arc{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:min(1240px,88vw);height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,196,63,.6) 22%,rgba(233,30,30,.4) 50%,rgba(255,196,63,.6) 78%,transparent);
  opacity:0;transition:opacity .5s ease;pointer-events:none;
}
.nv.compact .nv__arc{opacity:1}
.nv__prog{
  position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;pointer-events:none;
}
.nv__prog i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold),var(--red) 55%,var(--red-deep));
  transition:transform .12s linear;
}

/* ─── menu mobile ─────────────────────────────────────────────────── */
.nv__burger{
  display:none;width:42px;height:42px;border:0;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.7));
  border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  cursor:pointer;position:relative;flex:none;
  box-shadow:0 8px 22px rgba(96,52,32,.16);
}
.nv__burger span{left:13px;right:13px;background:var(--ink)}
.nv__burger span:nth-child(1){top:15px}
.nv__burger span:nth-child(2){top:20px}
.nv__burger span:nth-child(3){top:25px}

.nv__scrim{
  position:fixed;inset:0;z-index:390;background:rgba(31,21,18,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;
}
body.nv-open .nv__scrim{opacity:1;visibility:visible}
body.nv-open{overflow:hidden}

@media (max-width:1180px){
  .nv__in{gap:10px;padding:0 14px}
  /* le pill s'efface : le UL devient enfant direct de la barre */
  .nv__pill{display:contents}
  .nv__pill::after{display:none}

  .nv__menu{
    display:flex;visibility:hidden;opacity:0;
    /* absolu par rapport a .nv : le panneau suit la hauteur reelle de la
       barre, au lieu d'un top fixe qui chevauchait de quelques pixels. */
    position:absolute;left:14px;right:14px;top:calc(100% - 4px);z-index:395;
    flex-direction:column;gap:4px;
    padding:14px;border-radius:26px;
    background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,252,248,.9));
    border:1px solid rgba(255,255,255,.95);
    -webkit-backdrop-filter:blur(30px) saturate(1.7);backdrop-filter:blur(30px) saturate(1.7);
    box-shadow:0 30px 70px rgba(96,52,32,.3);
    transform:translateY(-14px) scale(.97);transform-origin:100% 0;
    transition:opacity .38s var(--ease),transform .44s var(--spring),visibility .38s;
  }
  .nv__menu.open{visibility:visible;opacity:1;transform:translateY(0) scale(1)}
  .nv__menu::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background-image:var(--sil);background-repeat:no-repeat;
    background-position:right -12% bottom;background-size:auto 96%;
    opacity:.07;
  }
  .nv__menu li{position:relative;z-index:1}
  .nv__menu a{padding:13px 16px;font-size:.95rem;border-radius:18px 18px 18px 6px}
  .nv__menu a .nv__emo{font-size:1.05rem;opacity:.9;transform:none}
  .nv__glide{display:none}

  .nv__burger{display:block;order:9}
  .nv__acts{margin-left:auto;order:8}
  .nv__lock b{font-size:.95rem}
  .nv__tag{display:none}
  .nv__cta{display:none}
}

@media (max-width:720px){
  .nv{padding:12px 0 10px}
  .nv__brand{padding:6px 14px 6px 6px;gap:10px}
  .nv__plate{width:40px;height:40px}
  .nv__plate img{width:26px}
  .nv__lock b{font-size:.88rem}
  .nv__acts{padding:5px}
  .nv__acts .ic{width:36px;height:36px}
  .nv__acts .ic[data-tip]::after{display:none}
}

@media (max-width:420px){
  /* on garde favoris + panier accessibles : ce sont les deux raccourcis
     que la cliente utilise vraiment. Seul le bouton compte passe dans
     le menu deroulant pour ne pas empiler la barre sur deux lignes. */
  .nv__lock{display:none}
  .nv__brand{padding:6px;border-radius:20px}
  .nv__acts{gap:5px;padding:5px}
  .nv__acts .ic{width:34px;height:34px}
  .nv__acts .ic svg{width:15px;height:15px}
  .nv__acts form,
  .nv__acts > a.ic:not([aria-label="Mes favoris"]):not(.ic--red){display:none}
}

@media (prefers-reduced-motion:reduce){
  .nv,.nv__brand,.nv__pill,.nv__acts,.nv__plate,.nv__cta,.nv__menu{transition:none}
  .nv__spark{animation:none}
  .nv.hid{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   CORRECTIF : la barre ne restait pas collee en haut
   body.pc portait overflow-x:hidden, ce qui fait du body un conteneur de
   defilement : position:sticky s'accrochait alors a ce conteneur et
   remontait avec la page. overflow-x:clip coupe le debordement sans
   creer de conteneur de defilement, donc sticky refonctionne.
   La declaration hidden reste en premier comme repli pour les vieux
   navigateurs qui ignorent clip.
   ═══════════════════════════════════════════════════════════════════════ */
html{overflow-x:hidden;overflow-x:clip}
body.pc{overflow-x:hidden;overflow-x:clip}

/* La barre reste visible en permanence : plus de repli au defilement. */
.nv.hid{transform:none}

/* Lenis pilote deja le defilement en douceur ; laisser scroll-behavior
   a smooth ferait lutter les deux mecaniques sur les ancres. */
html{scroll-behavior:auto}