/* ==========================================================================
   EL MODE — LE PANIER

   DEUX CHOSES DANS CE FICHIER, ET ELLES NE SE CHARGENT PAS AU MEME ENDROIT :
   1. le bouton du header et sa pastille — sur TOUTES les pages ;
   2. la liste de /panier.html — sur cette page seulement.
   Elles vivent ensemble parce qu'elles sont le meme objet pour qui relit le
   code : le panier.

   AUCUNE COULEUR EN DUR ICI — regle n°3 du socle. Tout vient de tokens.css,
   donc tout suit le theme clair, le theme sombre et la palette du dashboard
   sans une ligne de plus.
   ========================================================================== */

/* ==========================================================================
   1. Le bouton flottant du panier
   ========================================================================== */

/* IL A QUITTE L'EN-TETE, ET IL FLOTTE.
   Demande du proprietaire. L'icone vivait dans la barre du haut, a 20 px :
   des le premier defilement elle sortait de l'ecran, et plus rien ne disait
   qu'un article attendait dans le panier. C'est maintenant un rond fixe, au
   meme bord que le bouton WhatsApp (.wa-float, css/styles.css) et pose JUSTE
   AU-DESSUS de lui.

   LE `bottom` SE CALCULE, IL NE SE CHOISIT PAS. C'est celui du bouton vert,
   plus sa hauteur, plus l'air entre les deux :
     telephone  : 86 + 56 + 14 = 156px  (86 laisse passer la barre .sticky-cta)
     des 760 px : 18 + 56 + 14 =  88px  (la barre fixe disparait)
   Changer l'un des deux boutons sans l'autre les fait se chevaucher ou bailler.

   UN CRAN PLUS GRAND QUE LE VERT — 60 contre 56. Le proprietaire l'a demande,
   et il y a une raison de le suivre : ce bouton-la porte un chiffre par-dessus
   son trace, ce que le logo WhatsApp n'a pas a faire.

   Le balisage n'est plus dans <header> : .site-header porte un
   `backdrop-filter`, qui fait de l'en-tete le bloc conteneur de ses enfants
   `position:fixed` — le rond s'y serait ancre sur la barre du haut au lieu de
   l'ecran. Voir le commentaire du lien dans les pages. */
.btn-panier{
  position:fixed;inset-inline-end:18px;bottom:156px;z-index:60;
  width:60px;height:60px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  /* Pas de couleur en dur — regle n°3 du socle. Le fond des bandes et de
     l'en-tete : le rond se lit comme un morceau de la boutique posé sur la
     page, la ou le vert de WhatsApp est la couleur d'un service exterieur. */
  background:var(--fond-1);color:var(--texte-0);
  border:1px solid var(--ligne);
  /* Deux ombres, comme le bouton vert : la courte decolle le rond du fond,
     la longue le detache d'une photo de produit qui passerait dessous. */
  box-shadow:0 4px 12px rgba(0,0,0,.15),0 8px 24px rgba(0,0,0,.22);
  transition:transform .14s ease-out,box-shadow .14s ease-out,
             border-color .14s ease-out,color .14s ease-out;
}
/* .btn-ghost:hover vire a l'orange du socle ; ici c'est la couleur de la
   marque qu'il faut, celle de la pastille et des bandes. */
.btn-panier:hover{
  transform:scale(1.06);
  border-color:var(--bande);color:var(--bande-vif);
  box-shadow:0 6px 16px rgba(0,0,0,.18),0 10px 30px rgba(0,0,0,.30);
}
.btn-panier svg{width:26px;height:26px;display:block;}

/* LE SURSAUT DE L'AJOUT.
   Pose par js/panier.js quand le compte monte, retire 600 ms plus tard. Il ne
   decore pas : depuis que la pastille a quitte l'en-tete, « Ajouter au panier »
   et le chiffre qui monte ne sont plus dans le meme regard, et le geste
   semblait ne rien faire. Le mouvement ramene l'oeil, c'est tout ce qu'on lui
   demande.
   Le creux a 95 % apres la pointe a 122 % : un grossissement qui revient tout
   droit a sa taille se lit comme un defaut d'affichage, le rebond se lit comme
   une reponse. */
@keyframes panier-recoit{
  0%   {transform:scale(1);}
  35%  {transform:scale(1.22);}
  62%  {transform:scale(.95);}
  100% {transform:scale(1);}
}
.btn-panier-recoit{animation:panier-recoit .55s ease-out;}

/* Un telephone regle sur « moins d'animations » le demande pour de bonnes
   raisons — mal des transports, vertiges. On garde le signal, sans le
   mouvement : le bouton s'allume a la couleur de la marque le temps du meme
   delai. */
@media (prefers-reduced-motion:reduce){
  .btn-panier-recoit{
    animation:none;
    border-color:var(--bande);
    box-shadow:0 0 0 3px var(--voile-orange-doux),0 4px 12px rgba(0,0,0,.15);
  }
}

@media (min-width:760px){
  .btn-panier{bottom:88px;}
}

/* LA PASTILLE SUIT LE SENS DE LECTURE.
   inset-inline-end et pas right : en arabe le bouton est a gauche de la ligne
   et la pastille doit rester du cote exterieur.
   4px et non 2 : le cadre du bouton est rond, et son coin haut-droit tombe
   hors du disque — a 2px le chiffre debordait du trace. */
.panier-compte{
  position:absolute;inset-inline-end:4px;top:4px;
  min-width:19px;height:19px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bande);color:var(--sur-bande);
  font-family:var(--police-titre);font-size:.66rem;line-height:1;
  font-variant-numeric:tabular-nums;
  border-radius:10px;
  /* Un liseré de la couleur de l'en-tete : sans lui, la pastille touche le
     trait de l'icone et les deux se confondent en un pate a petite taille. */
  box-shadow:0 0 0 2px var(--fond-1);
  pointer-events:none;
}
.panier-compte[hidden]{display:none;}

/* Panier plein : l'icone passe a la couleur d'accent, pour que le bouton se
   remarque sans que rien ne bouge dans la ligne. */
.btn-panier-plein svg{color:var(--bande);}

/* ==========================================================================
   2. La page /panier.html
   ========================================================================== */

/* La liste reprend .pack-choix de css/pack.css — meme ligne, meme separateur.
   Ce qui s'ajoute : la photo, le compteur, et de la hauteur pour les deux. */
.panier-choix{gap:12px;padding-block:14px;}

.panier-choix-image{
  flex:0 0 auto;width:52px;height:52px;
  display:block;overflow:hidden;
  background:var(--fond-2);
  border:1px solid var(--ligne);
}
.panier-choix-image img{width:100%;height:100%;object-fit:cover;display:block;}

.panier-choix-unite{
  display:inline-block;margin-top:2px;
  color:var(--texte-3);font-size:.78rem;letter-spacing:.03em;
}

/* LE COMPTEUR — direction:ltr sur la piste.
   « − 2 + » se lit dans cet ordre dans les deux langues : c'est une reglette,
   pas une phrase. En rtl, les trois cases s'inversaient et le moins passait a
   droite du plus. */
.panier-qte{
  direction:ltr;
  flex:0 0 auto;display:inline-flex;align-items:center;
  border:1px solid var(--ligne);
}
.panier-qte-btn{
  width:30px;height:30px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;
  color:var(--texte-1);font-size:1.05rem;line-height:1;
  transition:background .15s ease,color .15s ease;
}
.panier-qte-btn:hover:not(:disabled){background:var(--voile-orange-doux);color:var(--texte-0);}
.panier-qte-btn:disabled{color:var(--texte-4);cursor:default;}
.panier-qte-val{
  min-width:26px;text-align:center;
  color:var(--texte-0);font-size:.9rem;
  font-variant-numeric:tabular-nums;
}

/* Le panier vide : un mot, et le chemin vers les rayons. Pas un formulaire. */
.panier-vide{
  margin:0;padding:28px 0;text-align:center;
  color:var(--texte-3);font-size:.95rem;
}
.panier-vide[hidden]{display:none;}
.panier-suite{margin:0;padding-bottom:12px;text-align:center;}

/* ==========================================================================
   3. « Ajouter au panier » sur une fiche produit
   Le bouton se pose SOUS le formulaire de la fiche, pas a la place : la fiche
   vend toujours a l'unite en un seul geste, et le panier est l'autre chemin —
   celui de qui prend deux articles avant de commander.
   ========================================================================== */
/* Un filet au-dessus, parce que ce bloc n'est plus le formulaire : sans lui,
   « Ajouter au panier » se lit comme un deuxieme bouton du formulaire, et on
   ne sait plus lequel commande. */
/* MEME LARGEUR QUE LE FORMULAIRE, et pas celle du conteneur : .form-carte est
   plafonnee a 620px et centree (css/styles.css). Sans ce rappel, le bouton
   traversait toute la page sous une carte deux fois plus etroite, et il ne se
   lisait plus comme la suite du formulaire. */
.produit-panier{
  max-width:620px;margin-inline:auto;
  margin-top:20px;padding-top:16px;
  border-top:1px solid var(--ligne);
}
.produit-panier .btn{width:100%;}
.produit-panier-note{
  margin:0 0 12px;
  text-align:center;color:var(--gris);
  font-size:.86rem;line-height:1.55;
}

/* Le bouton qui vient de servir se le dit, deux secondes, sans deplacer quoi
   que ce soit : la page ne change pas, il faut bien qu'un signal parte. */
.btn-ajoute{border-color:var(--bande) !important;color:var(--bande) !important;}

/* ==========================================================================
   4. Les deux gestes d'une vignette de rayon

   POURQUOI CETTE VARIANTE DE CARTE EXISTE
   Dans le socle, la carte ENTIERE est un <a> : toucher n'importe ou mene au
   produit, ce qui est le bon geste au telephone. Sur une page de rayon il faut
   deux gestes en plus, et un <button> dans un <a> n'est pas du HTML valide — le
   navigateur sort le bouton du lien et la grille se disloque. La carte devient
   donc un <article> : un <a> qui porte la photo et le prix, puis les deux
   gestes a cote, en dehors du lien. Voir carte() dans
   js/rayon-vignettes.js, partage par /bags.html, /casquettes.html et
   /accessoires.html.
   ========================================================================== */

.carte-achat{display:flex;flex-direction:column;}

/* Le lien reprend ce que la carte faisait : colonne, et il prend toute la
   hauteur restante pour que le bouton s'aligne en bas d'une rangee de cartes
   aux noms de longueurs differentes. */
.carte-achat-lien{
  display:flex;flex-direction:column;flex:1;
  color:inherit;text-decoration:none;
}
/* Le focus visible a suivi le lien : il etait sur .carte-produit, qui n'est
   plus focusable ici. Sans cette ligne, on navigue la grille au clavier sans
   voir ou on est. */
.carte-achat-lien:focus-visible{outline:2px solid var(--orange);outline-offset:3px;}

.carte-achat-panier{
  margin-top:12px;
  /* .btn interdit le retour a la ligne : un libelle court en capitales
     espacees casse mal dans un en-tete. Ici c'est l'inverse — a deux colonnes
     sur un telephone, « AJOUTER AU PANIER » ne tient pas sur une ligne et
     debordait de la carte. */
  white-space:normal;line-height:1.35;
  font-size:.68rem;letter-spacing:.12em;
  padding:11px 10px;
}

/* --------------------------------------------------------------------------
   LES DEUX GESTES D'UNE VIGNETTE DE RAYON

   La vignette ne montre plus que le prix : le nom et l'accroche ont ete
   retires de l'affichage — le nom reste dans le document, en .sr-only, pour
   Google et les lecteurs d'ecran. Restent deux gestes, et ils ne font pas la
   meme chose. « Ajouter au panier » garde la cliente sur la grille, c'est le
   geste de qui prend un sac ET une casquette. « Acheter » l'emmene sur la
   fiche de l'article, la ou est le formulaire : un article, une wilaya, c'est
   commande.

   EN COLONNE, PAS COTE A COTE. A deux colonnes sur un telephone une vignette
   fait environ 170 px : deux boutons cote a cote y donnent deux cibles de
   80 px, avec un libelle coupe en trois lignes.
   -------------------------------------------------------------------------- */
.carte-achat-actions{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
/* La marge du haut est portee par le conteneur. Laissee sur le bouton, elle
   s'ajoutait au gap et creusait un trou entre les deux. */
.carte-achat-actions .carte-achat-panier{margin-top:0;}
/* Meme traitement que le bouton du panier : dans une vignette etroite, le
   libelle doit pouvoir revenir a la ligne au lieu de deborder. */
.carte-achat-acheter{
  white-space:normal;line-height:1.35;
  font-size:.68rem;letter-spacing:.12em;
  padding:11px 10px;
}