/* ============================================================
   PRÉPARATEUR.E46 — LE PANIER EN TIROIR
   ============================================================
   Demande de Florient : « fluide et bref, sans page intermédiaire ni perte de
   temps ». Le tiroir glisse depuis la droite, par-dessus la page — jamais un
   changement d'adresse tant qu'on n'a pas décidé de payer.
   ============================================================ */

/* ── L'ICÔNE DU PANIER ────────────────────────────────────────────────────
   En position FIXE, superposée au-dessus de l'en-tête — pas injectée dans son
   flux (voir la note dans inc/panier.php : le rendu du header de Blocksy varie
   selon l'écran et dupliquait l'icône). Positionnée à la même hauteur que le
   reste de l'en-tête (voir --pe-h-entete, posée dans entete.css). */

.pe-panier-icone{
  position:fixed;
  top:0;
  right:clamp(1rem, 4vw, 2.2rem);
  z-index:210;                      /* au-dessus de #header (z-index:200) */
  height:var(--pe-h-entete);         /* toute la hauteur de l'en-tête */
  display:inline-flex;
  align-items:center;                /* centre le corps de taille fixe verticalement */
  justify-content:center;
  border:0;
  background:transparent;
  color:var(--pe-blanc);
  cursor:pointer;
  transition:opacity .15s ease;
}
.pe-panier-icone:hover{ opacity:.75; }
.pe-panier-icone:focus-visible{ outline:2px solid var(--pe-or); outline-offset:2px; }

/* Le conteneur intérieur, à taille FIXE (2.4rem carré) : c'est lui qui ancre le
   badge, jamais le bouton — dont la hauteur suit celle de l'en-tête et varie
   entre desktop et mobile (--pe-h-entete). Séparer les deux évite de recalculer
   la position du badge à chaque changement de cette hauteur. */
.pe-panier-icone-corps{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.4rem; height:2.4rem;
  border-radius:50%;
  transition:background .4s ease, box-shadow .4s ease, color .4s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 4px rgba(0,0,0,.25),
    0 2px 8px rgba(0,0,0,.35);
}

/* ── LA JAUGE QUI ROUGIT (Florient, 01/08) ───────────────────────────────────
   Mécanique du groupe, héritée de Gravano : le panier prend la température de
   la zone la plus chaude qu'il contient (logique dans inc/panier.php,
   pe_get_panier_temperature). Au repos c'est l'or de la maison — comme
   n'importe quel bouton E46 — et il rougit à mesure que ça chauffe.
   ⚠️ Le ROUGE des paliers "chaud"/"intense" n'est PAS une couleur E46 : ce sont
   les mêmes valeurs hexadécimales que sur Gravano et tous les satellites
   (--gv-rouge-vif/cuisant/braise, ~350° de teinte, "la peau qui rougit" —
   jamais le violacé d'un vin qu'on remplit). C'est un repère transversal du
   groupe, au même titre que l'or : il doit rester identique d'une boutique à
   l'autre, donc en valeurs directes ici plutôt que via les variables locales
   de palette.css (qui, elles, sont propres à E46). */
.pe-panier-icone[data-temp="vide"] .pe-panier-icone-corps{
  background:linear-gradient(155deg, var(--pe-or-clair) 0%, var(--pe-or) 55%, var(--pe-or-sombre) 100%);
}
.pe-panier-icone[data-temp="doux"] .pe-panier-icone-corps{
  background:linear-gradient(155deg, var(--pe-or-clair) 0%, var(--pe-or) 45%, #F08496 100%);
}
.pe-panier-icone[data-temp="chaud"] .pe-panier-icone-corps{
  background:linear-gradient(155deg, var(--pe-or) 0%, #E24357 55%, #C2172F 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -2px 4px rgba(0,0,0,.3),
    0 3px 12px rgba(194,23,47,.45);
}
.pe-panier-icone[data-temp="intense"] .pe-panier-icone-corps{
  background:linear-gradient(155deg, #C2172F 0%, #8E0B1C 65%, #5C0712 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 4px rgba(0,0,0,.35),
    0 3px 14px rgba(142,11,28,.55);
}
/* Contraste de l'icône et du compteur : sombre sur les paliers dorés (clairs),
   blanc dès que le rouge domine (fond trop sombre pour du texte sombre). */
.pe-panier-icone[data-temp="vide"],
.pe-panier-icone[data-temp="doux"]{ color:#17130a; }
.pe-panier-icone[data-temp="chaud"],
.pe-panier-icone[data-temp="intense"]{ color:var(--pe-blanc); }

.pe-panier-compte{
  position:absolute;
  top:0; right:0;
  min-width:1.15rem; height:1.15rem;
  padding:0 .25rem;
  display:grid; place-items:center;
  border-radius:99px;
  font-family:'Barlow Condensed', sans-serif;
  font-size:.68rem;
  font-weight:700;
  line-height:1;
  color:#17130a;
  background:var(--pe-or);
  font-variant-numeric:tabular-nums;
}
/* Un panier à zéro ne mérite pas un badge : ça ressemblerait à une notification
   non lue, ce qui inviterait à cliquer pour rien. */
.pe-panier-compte:empty,
.pe-panier-compte[data-vide]{ display:none; }


/* ── LE TIROIR ────────────────────────────────────────────────────────────
   Deux couches : un fond qui assombrit la page (cliquable pour fermer, comme
   data-pe-fermer le permet) et le volet lui-même, qui glisse depuis la droite.
   display:none tant qu'il n'est pas ouvert : évite qu'un lecteur d'écran ou la
   tabulation clavier n'atteignent un panneau invisible mais présent dans le DOM. */

.pe-panier{
  position:fixed;
  inset:0;
  z-index:500;
  display:none;
}
.pe-panier.pe-panier--ouvert{ display:block; }

.pe-panier-fond{
  position:absolute;
  inset:0;
  background:rgba(5,5,6,.6);
  backdrop-filter:blur(1px);
  animation:pe-panier-fond-entree .18s ease both;
}

.pe-panier-volet{
  position:absolute;
  top:0; right:0; bottom:0;
  width:min(26rem, 100vw);
  display:flex;
  flex-direction:column;
  background:linear-gradient(174deg, var(--pe-anthracite) 0%, var(--pe-noir) 100%);
  border-left:1px solid rgba(201,148,14,.32);
  box-shadow:-18px 0 44px rgba(0,0,0,.5);
  animation:pe-panier-volet-entree .22s cubic-bezier(.2,.7,.3,1) both;
}

@keyframes pe-panier-fond-entree{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pe-panier-volet-entree{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }

.pe-panier-tete{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.1rem 1.2rem;
  border-bottom:1px solid rgba(201,148,14,.22);
}
.pe-panier-titre{
  margin:0;
  font-family:'Barlow Condensed', sans-serif;
  font-size:1.3rem;
  font-weight:600;
  color:var(--pe-blanc);
}
.pe-panier-fermer{
  width:2.1rem; height:2.1rem;
  border:1px solid rgba(243,243,243,.24);
  border-radius:8px;
  background:transparent;
  color:var(--pe-blanc-doux);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
}
.pe-panier-fermer:hover{ border-color:var(--pe-or); color:var(--pe-or-clair); }

.pe-panier-corps{
  flex:1;
  overflow-y:auto;
  padding:1.1rem 1.2rem 1.4rem;
}

.pe-panier-vide{
  margin:2.5rem 0 0;
  text-align:center;
  color:var(--pe-blanc-doux);
}
.pe-panier-vide a{ color:var(--pe-or-clair); }


/* ── L'HABILLAGE DU MINI-PANIER WOOCOMMERCE ──────────────────────────────────
   `woocommerce_mini_cart()` produit son propre balisage (`.woocommerce-mini-cart`,
   `.cart_list`, `.total`, etc.) : on ne le remplace pas, on l'habille dans la
   palette de la maison — même principe que la fiche produit et le fil. */

.pe-panier-corps .woocommerce-mini-cart{ list-style:none; margin:0; padding:0; }

.pe-panier-corps .woocommerce-mini-cart-item{
  position:relative;
  display:flex;
  gap:.75rem;
  padding:.9rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pe-panier-corps .woocommerce-mini-cart-item img{
  width:3.4rem; height:3.4rem;
  object-fit:contain;
  border-radius:8px;
  background:#fff;
  padding:.3rem;
  flex:0 0 auto;
}
.pe-panier-corps .woocommerce-mini-cart-item a:not(.remove){
  color:var(--pe-blanc);
  text-decoration:none;
  font-size:.94rem;
  line-height:1.3;
}
.pe-panier-corps .woocommerce-mini-cart-item .quantity{
  display:block;
  margin-top:.2rem;
  color:var(--pe-or-clair);
  font-family:'Barlow Condensed', sans-serif;
  font-size:.88rem;
}
/* Le bouton de suppression WooCommerce (×) : redessiné en relief discret plutôt
   que son croix rouge par défaut, hors de la palette de la maison. */
.pe-panier-corps .woocommerce-mini-cart-item .remove{
  position:absolute;
  top:.85rem; right:0;
  width:1.5rem; height:1.5rem;
  display:grid; place-items:center;
  border-radius:50%;
  color:var(--pe-blanc-doux) !important;
  background:rgba(255,255,255,.06);
  font-size:0; /* le glyphe × vient du contenu WooCommerce, on l'agrandit ci-dessous */
}
.pe-panier-corps .woocommerce-mini-cart-item .remove::before{
  content:"✕"; font-size:.7rem;
}
.pe-panier-corps .woocommerce-mini-cart-item .remove:hover{
  background:rgba(226,67,63,.18);
  color:var(--pe-refus) !important;
}

.pe-panier-corps .woocommerce-mini-cart__total,
.pe-panier-corps .total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin:1.1rem 0 0;
  padding-top:1rem;
  border-top:1px solid rgba(201,148,14,.28);
  font-family:'Barlow Condensed', sans-serif;
  font-size:1.15rem;
  color:var(--pe-blanc);
}
.pe-panier-corps .total strong{ font-weight:600; }
.pe-panier-corps .woocommerce-Price-amount{ color:var(--pe-or-clair); }

/* Les boutons « Voir le panier » / « Commander » de WooCommerce : le relief de
   boutons.css les couvre déjà par sélecteur générique (.woocommerce a.button) —
   on ajuste seulement l'espacement propre à ce contexte étroit. */
.pe-panier-corps .wc-proceed-to-checkout{ margin-top:1.2rem; }

/* ⚠️ Repeints EXPLICITEMENT en or : la règle générique `.woocommerce a.button`
   de boutons.css existe déjà et DEVRAIT suffire, mais ces deux liens ressortent
   en bleu malgré tout — un style plus spécifique les vise ailleurs (probable :
   les blocs WooCommerce natifs, qui posent souvent une couleur « primary »
   codée en dur). Plutôt que de chercher cette règle précise dans un plugin
   tiers, on regagne la priorité ici, dans le scope du tiroir. */
.pe-panier-corps .wc-proceed-to-checkout a.button,
.pe-panier-corps .wc-forward{
  display:block;
  width:100%;
  margin-bottom:.6rem;
  text-align:center;
  color:#17130a !important;
  background:linear-gradient(168deg, var(--pe-or-clair) 0%, var(--pe-or) 52%, var(--pe-or-sombre) 100%) !important;
  border:0 !important;
}
.pe-panier-corps .wc-proceed-to-checkout a.button:hover,
.pe-panier-corps .wc-forward:hover{ filter:brightness(1.06); }


/* ── LA JAUGE DU CADEAU AU SEUIL (inc/cadeau.php) ─────────────────────────
   Posée en tête du tiroir, avant le mini-panier. Cadre discret sur le fond
   déjà sombre du tiroir — pas un aplat coloré qui trancherait avec le reste. */
.pe-cadeau-jauge{
  margin:0 0 1rem;
  padding:.75rem .9rem;
  border:1px solid rgba(201,148,14,.3);
  border-radius:10px;
  background:rgba(201,148,14,.07);
}
.pe-cadeau-jauge p{
  margin:0 0 .5rem;
  font-size:.86rem;
  line-height:1.4;
  color:var(--pe-blanc-doux);
}
.pe-cadeau-jauge p strong{ color:var(--pe-or-clair); font-weight:600; }
.pe-cadeau-jauge .woocommerce-Price-amount{ color:var(--pe-or-clair); font-weight:600; }
.pe-cadeau-barre{
  height:.4rem;
  border-radius:99px;
  background:rgba(243,243,243,.14);
  overflow:hidden;
}
.pe-cadeau-barre span{
  display:block;
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg, var(--pe-or-sombre), var(--pe-or-clair));
  transition:width .3s ease;
}
.pe-cadeau-jauge--atteint{ padding-bottom:.75rem; }
.pe-cadeau-jauge--atteint p{ margin-bottom:0; color:var(--pe-blanc); }

/* La ligne du cadeau dans le mini-panier : discrète, jamais confondue avec un
   article payant. Le libellé "offert" prend la place du sélecteur de
   quantité (voir pe_cadeau_quantite_verrouillee). */
.pe-cadeau-qte, .pe-cadeau-offert{
  font-size:.78rem;
  color:var(--pe-or-clair);
  white-space:nowrap;
}


/* ── LE BLOCAGE DU DÉFILEMENT DE FOND ────────────────────────────────────── */
body.pe-panier-bloque{ overflow:hidden; }


/* ── MOBILE ──────────────────────────────────────────────────────────────── */
@media (max-width:480px){
  .pe-panier-volet{ width:100vw; }
}

@media (prefers-reduced-motion:reduce){
  .pe-panier-fond, .pe-panier-volet{ animation:none; }
}