/* ============================================
   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);
}

/* Palier 1 — doux : le doré commence à se teinter de chaleur rosée */
.gv-panier[data-temp="doux"]{
  background:linear-gradient(155deg, #E0BB4A 0%, var(--gv-or) 45%, var(--gv-terracotta) 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);
}

/* Palier 2 — chaud : la braise s'installe, ombre terracotta profonde */
.gv-panier[data-temp="chaud"]{
  background:linear-gradient(155deg, var(--gv-or) 0%, var(--gv-terracotta-fonce) 60%, var(--gv-grenat) 100%);
  color:#FFFDFD;
  box-shadow:
    0 5px 20px rgba(122,38,79,.35),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -3px 5px rgba(0,0,0,.3);
}

/* Palier 3 — intense : le doré n'est plus qu'une lueur, tout est braise */
.gv-panier[data-temp="intense"]{
  background:linear-gradient(155deg, var(--gv-terracotta-fonce) 0%, var(--gv-grenat) 55%, #380E2C 100%);
  color:#FFFDFD;
  box-shadow:
    0 5px 22px rgba(56,14,44,.5),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -3px 5px rgba(0,0,0,.35);
}

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

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