/* ============================================
   GRAVANO — PANIER THERMIQUE
   Fond doré plein à l'état vide (comme le logo),
   qui rougit progressivement par ombres internes
   à mesure que la température monte.
   Le mot "Panier" + le compteur restent TOUJOURS
   affichés — la clarté avant tout.
   Logique JS : voir inc/panier-thermique.php
   ============================================ */

.gv-panier{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.88rem;
  letter-spacing:.02em;
  border:1px solid rgba(0,0,0,.22);
  border-radius:1.4rem;
  padding:.68rem 1.5rem;
  cursor:pointer;
  transition:all .4s ease;
  text-decoration:none;
  font-weight:700;
  position:relative;
  overflow:hidden;             /* garde le reflet dans l'arrondi */
}
/* Reflet brossé, commun aux 4 paliers — même langage que le cadre-signature
   du header/logo (métal technologique), pour que le panier paraisse aussi
   massif/dense qu'eux plutôt qu'un simple bouton plat. */
.gv-panier::before{
  content:'';
  position:absolute;inset:0;
  background:
    linear-gradient(115deg,
      transparent 20%, rgba(255,255,255,.22) 40%,
      rgba(255,255,255,.32) 48%, rgba(255,255,255,.16) 56%,
      transparent 75%),
    repeating-linear-gradient(102deg,
      rgba(255,255,255,.07) 0px, rgba(255,255,255,.07) 1px,
      transparent 1px, transparent 3px);
  pointer-events:none;
}
.gv-panier > *{ position:relative; z-index:1; }

/* Palier 0 — vide : doré plein, comme le logo */
.gv-panier[data-temp="vide"]{
  background:linear-gradient(155deg, #E0BB4A 0%, var(--gv-or) 55%, #A6801D 100%);
  color:#2A1F0A;
  box-shadow:
    0 5px 18px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -3px 5px rgba(0,0,0,.25);
}

/* ⭐ LES 3 PALIERS QUI FONCENT — LE BAIN D'INDIGO.
   La mère fait ROUGIR son panier comme une peau. Ici la chaleur n'aurait aucun
   sens : on vend du vêtement. La bonne métaphore, vraie et du métier, c'est le
   TREMPAGE — le denim se teint par bains successifs, plus on trempe, plus
   l'indigo fonce. Le panier qui se remplit fonce comme une étoffe qu'on teint.
   ⚠️ Les 4 nuances sont calées sur la MÊME teinte (~210°) pour que la montée se
   lise comme une seule étoffe qui prend, jamais comme un liquide qui monte —
   c'est la règle exacte de la mère, transposée. Le doré ne disparaît pas : il
   se retire du fond et reste en LISERÉ HAUT (le fil conducteur du groupe). */

/* Palier 1 — premier trempage : l'or domine encore, l'indigo pointe en bas. */


/* Palier 2 — la teinte prend : l'indigo occupe toute la place,
   l'or ne subsiste qu'en reflet sur l'arête haute. */


/* Palier 3 — le bain profond : indigo dense, jamais noir. */



/* ⭐⭐ LES 3 PALIERS ROUGISSENT — règle de groupe, identique sur toutes les boutiques
   (Florient, 28/07). Le panier ne prend PAS la couleur de la marque : il rougit comme une peau,
   parce qu'il se remplit. L'or reste en liseré sur l'arête haute — le fil du groupe. */
.gv-panier[data-temp="doux"]{
  background:linear-gradient(155deg, #E0BB4A 0%, var(--gv-or) 42%, var(--gv-rouge-rose) 100%);
  color:#2A1F0A;
  box-shadow:0 5px 18px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -3px 5px rgba(0,0,0,.22);
}
.gv-panier[data-temp="chaud"]{
  background:linear-gradient(155deg, var(--gv-rouge-rose) 0%, var(--gv-rouge-vif) 52%, var(--gv-rouge-cuisant) 100%);
  color:#FFFDFD;
  box-shadow:0 5px 20px rgba(226,67,87,.38),inset 0 1px 0 rgba(240,215,126,.5),inset 0 -3px 5px rgba(120,8,24,.35);
}
.gv-panier[data-temp="intense"]{
  background:linear-gradient(155deg, var(--gv-rouge-vif) 0%, var(--gv-rouge-cuisant) 50%, var(--gv-rouge-braise) 100%);
  color:#FFFDFD;
  box-shadow:0 5px 22px rgba(142,11,28,.5),inset 0 1px 0 rgba(240,215,126,.42),inset 0 -3px 6px rgba(90,4,14,.45);
}

.gv-panier:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}

.gv-panier .gv-panier-compteur{
  font-weight:700;
}