/* ==========================================================================
   V&P Philadelphia — la boutique
   Chargee par shop.html seulement. Elle ne redefinit aucun jeton : la
   palette, les deux courbes et les polices viennent de base.css, sinon la
   boutique se mettrait a ressembler a un autre site.

   Elle reutilise le presentoir de l'accueil (.shelf__track, .shelf__nav,
   .shelf__dots) et n'ajoute que ce qui lui est propre : la barre de niveau,
   les cartes marque et produit, le choix du gout et le tiroir du panier.
   ========================================================================== */

/* --- la barre de niveau ---------------------------------------------------
   Pas de bandeau d'en-tete sur cette page, a la demande de Lucas (session
   du 06/09) : le catalogue doit etre a l'ecran tout de suite. La marge du
   haut compense donc directement la barre de navigation fixe, et le titre
   de cette barre porte le seul h1 de la page.
   Le titre et la consigne changent de texte selon le niveau, le bloc ne
   bouge pas : la hauteur est la meme aux deux niveaux, donc rien ne saute
   quand on ouvre une marque.
   scroll-margin-top sert au retour par l'adresse (#catalog, ce que fait le
   bouton de retour) : sans lui la section remonte SOUS la barre fixe, et le
   retour comme le sur-titre disparaissent derriere elle. */
.shop{
  padding-block:clamp(18px,2.4vw,32px) clamp(56px,7vw,96px);
  scroll-margin-top:calc(var(--nav-h) + 16px);
}
/* Le titre de la boutique n'est pas un titre de hero : il annonce une
   etape. Reduit par rapport au h1 general, il rend a la carte les quelque
   quarante pixels de hauteur qui lui manquaient pour tenir a l'ecran. */
.shop__titles h1{font-size:clamp(2.1rem,3.6vw,3.2rem)}
.shop__bar{
  display:grid;
  gap:clamp(10px,1.4vw,18px);
  grid-template-columns:1fr;
  align-items:end;
  margin-bottom:clamp(14px,1.8vw,24px);
}
@media (min-width:900px){
  .shop__bar{grid-template-columns:1fr auto}
  .shop__note{text-align:right}
}
/* Il y avait ici une troisieme colonne au-dela de 1180px, pour l'annotation
   .shop__ecart. Celle-ci disait ce qui separait les DEUX appareils d'une
   marque, et il n'y en a plus qu'un depuis le 08/09/2026 : la colonne aurait
   laisse la consigne au milieu de la barre au lieu de son bord droit. */
.shop__titles h1{margin:0}
/* Le nom de la marque en blanc, le decompte en retrait : c'est le nom qu'on
   cherche des yeux en arrivant sur la page d'une marque. */
.shop__titre-nom{color:var(--text-primary)}
.shop__titles h1{color:var(--text-secondary)}
.shop__lede{
  color:var(--text-secondary);margin:.7rem 0 0;
  font-size:1rem;max-width:32ch;
}
.shop__lede[hidden]{display:none}
.shop__note{
  color:var(--text-secondary);margin:0;
  font-size:.95rem;max-width:42ch;
}

/* --- le bloc d'identite de la marque --------------------------------------
   Il occupe le vide a GAUCHE des cartes, qui existe deja : le presentoir
   centre sa premiere carte sur la fenetre, donc au niveau des appareils
   (deux cartes seulement) toute la moitie gauche restait noire. Il ne
   deplace donc rien, il remplit.
   Il est en position absolue dans la scene pour ne pas entrer dans le calcul
   de la piste, dont le remplissage lateral commande le centrage des cartes.
   Purement decoratif : le nom de la marque est deja le titre h1 au-dessus. */
.marque-bloc{
  position:absolute;left:clamp(20px,3.4vw,72px);top:50%;
  transform:translateY(-50%);
  z-index:1;pointer-events:none;
  display:none;flex-direction:column;
  max-width:min(34vw,470px);
}
.marque-bloc[hidden]{display:none}
/* Sous 1180px les cartes occupent toute la largeur utile : il n'y a plus de
   vide a remplir, et le bloc chevaucherait le presentoir. */
@media (min-width:1180px){
  .marque-bloc:not([hidden]){display:flex}
}
.marque-bloc__nom{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(3.6rem,11vw,10rem);line-height:.88;
  letter-spacing:-.03em;text-transform:uppercase;
  /* Presque noir : c'est un filigrane, pas un titre. Il ne doit jamais
     concurrencer le h1 ni les cartes. */
  color:rgba(255,255,255,.055);
}
.marque-bloc__rule{
  width:54px;height:2px;flex:none;
  margin:clamp(26px,3vw,46px) 0 clamp(14px,1.6vw,22px);
  background:var(--tone,var(--accent));
  opacity:.7;
}
.marque-bloc__devise{
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-faint);
  max-width:12ch;line-height:1.8;
}

/* Le retour occupe sa place meme masque : sans cela, tout le bloc remonte
   d'une ligne au niveau des marques et redescend en ouvrant une marque. */
.shop__back{
  grid-column:1 / -1;
  justify-self:start;
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
  background:none;border:0;padding:.4rem 0;cursor:pointer;
  transition:color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.shop__back[hidden]{display:inline-flex;visibility:hidden}
.shop__back svg{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.shop__back:hover{color:var(--accent-hover)}
.shop__back:hover svg{transform:translateX(-3px)}

/* --- la piste ------------------------------------------------------------
   Memes regles que l'accueil, y compris le correctif WebKit (50vw et non
   50%) herite de sections.css. Seule la largeur de carte change : les
   cartes produit portent des commandes, elles ont besoin de plus de place
   que les vignettes de l'accueil. */
/* La largeur des cartes produit est elle aussi plafonnee par la hauteur
   disponible, sur le meme principe que les cartes marques. Leur geometrie
   est simple depuis que la photo est carree : hauteur = largeur + 246px de
   panneau (texte, gout, quantite, bouton). On retire donc de la fenetre ce
   qui est au-dessus (barre fixe, titre, phrase), les pastilles en dessous et
   ces 246px, et le reste est la largeur que la carte peut se permettre.
   Le plancher de 268px est assume : sous une fenetre d'environ 900px de
   haut, la carte deborde plutot que de devenir inutilisable. */
.shop__track{
  --card-w:clamp(268px, min(25vw, calc(100svh - 619px)), 380px);
  gap:clamp(16px,3.4vw,54px);
  padding-block:clamp(16px,2vw,30px);
}
/* Les cartes marques sont plus larges que les cartes produit, et c'est une
   consequence directe de leur nature : tout leur contenu est PEINT dans
   l'image, donc leur lisibilite depend de leur taille a l'ecran, pas d'une
   taille de police. Mesure a 296px de large : le libelle du bouton tombait a
   8px de haut. Les cartes produit, elles, ecrivent leur texte en HTML et
   restent lisibles a n'importe quelle taille. */
/* Sa largeur est plafonnee par la HAUTEUR disponible, et non par la seule
   largeur de la fenetre. La carte a le rapport tres allonge du fichier
   (941x1672) : large de 440px elle fait 782px de haut, et son bouton peint
   tombait sous la ligne de flottaison sur un ecran de portable, mesure a
   1029px de bas de carte pour une fenetre de 1000. On part donc de la place
   verticale reelle, dont on retire ce qui est au-dessus (barre fixe, titre)
   et au-dessous (pastilles), et on en deduit la largeur que la carte peut se
   permettre. Le retrait de 380px a ete releve, pas estime. */
.shop__track--marques{
  --card-w:min(clamp(300px,30vw,460px), calc((100svh - 380px) * 941 / 1395));
  /* Le presentoir respire moins ici : chaque pixel repris en haut et en bas
     est un pixel rendu a la carte, donc a la lisibilite de son texte peint. */
  padding-block:clamp(14px,1.8vw,28px);
}
@media (max-width:720px){
  .shop__track{
    /* Meme plafond par la hauteur qu'en grand ecran, avec sa propre mesure :
       sur telephone l'en-tete est plus haut (le titre passe sur deux lignes)
       et le bouton Ajouter tombait sous le bord. */
    --card-w:clamp(240px, min(72vw, calc(100svh - 600px)), 300px);
    gap:12px;
    padding-left:calc(50vw - var(--card-w) / 2);
    padding-right:calc(50vw - var(--card-w) / 2);
  }
  /* Plus large sur telephone aussi, pour la meme raison, tout en gardant de
     quoi voir depasser les voisines : c'est ce qui annonce qu'on peut
     faire defiler. Meme plafond par la hauteur qu'au-dessus, sinon le bouton
     peint tombe sous le bord bas de l'ecran (mesure : 853px pour une fenetre
     de 844). */
  .shop__track--marques{
    --card-w:min(clamp(260px,84vw,360px), calc((100svh - 340px) * 941 / 1395));
  }
}

/* --- la carte, socle commun aux deux niveaux ------------------------------
   Meme dessin que le presentoir de l'accueil : elle prend la distance au
   centre ecrite par le script (--d, --s) et la traduit en echelle et en
   opacite. La carte produit ne peut pas etre une simple photo pleine : elle
   porte des commandes, donc photo en haut, texte et boutons en dessous. */
.pcard{
  flex:0 0 var(--card-w);
  scroll-snap-align:center;
  transform:
    translateX(calc(var(--s,0) * 10px))
    scale(calc(1 - .13 * var(--d,0)));
  opacity:calc(1 - .26 * var(--d,0));
  filter:brightness(calc(1 - .1 * var(--d,0)));
  transition:transform .8s var(--ease-slow),opacity .8s var(--ease-slow),filter .8s var(--ease-slow);
}
@media (max-width:720px){
  .pcard{
    transform:
      translateX(calc(var(--s,0) * 3px))
      scale(calc(1 - .05 * var(--d,0)));
    opacity:calc(1 - .18 * var(--d,0));
    filter:brightness(calc(1 - .06 * var(--d,0)));
  }
}

.pcard__box{
  display:flex;flex-direction:column;
  width:100%;height:100%;
  padding:0;text-align:left;
  border:1px solid var(--line-soft);border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 120% 60% at 50% 12%,color-mix(in srgb,var(--tone) 15%,transparent),transparent 70%),
    linear-gradient(180deg,#14121C 0%,#0B0A11 100%);
  transition:
    border-color .55s var(--ease-slow),
    transform .55s var(--ease-slow),
    box-shadow .55s var(--ease-slow);
}
/* Le cadre de la photo. Le rapport CARRE vient de la maquette de Lucas et
   n'est pas qu'une question de gout : il raccourcit la carte de 85px, ce qui
   la fait tenir dans une fenetre de 954px de haut, la sienne. En 4/5 elle
   depassait de 58px et le bouton Ajouter tombait sous le bord.
   Le recadrage a ete verifie avant d'etre pose : les photos font 760x1350,
   donc `cover` garde ici une fenetre de 56 % de leur hauteur, centree, soit
   de 21,8 a 78,1 %. Les appareils occupent de 27 a 77 %, ils tiennent donc
   entiers, reflet au sol compris. Changer ce rapport recadre les sept
   photos, et en dessous du carre l'appareil commence a etre coupe. */
.pcard__media{
  position:relative;display:block;
  aspect-ratio:1/1;overflow:hidden;flex:none;
}
.pcard__img{
  position:absolute;inset:0;
  width:100%;height:100%;min-height:0;
  object-fit:cover;object-position:50% 50%;
  transition:opacity .28s var(--ease),transform .8s var(--ease-slow);
}
/* Le fondu du changement de gout : la photo s'efface, la source change, elle
   revient. Sans lui l'image saute d'un coup et le geste ne se lit pas. */
.pcard__img.is-swapping{opacity:0}

/* L'autonomie, en haut a GAUCHE : elle doit se lire avant tout le reste, et
   le sens de lecture commence a gauche.
   Elle avait ete agrandie (police d'affichage au lieu d'une pastille mono de
   11px) pour distinguer d'un coup d'oeil les DEUX appareils d'une marque, qui
   se confondaient sinon. Depuis le 08/09/2026 chaque marque n'a plus qu'un
   appareil, et trois marques sur quatre sont a 25K : la pastille ne compare
   donc plus rien. Elle est gardee parce que l'autonomie reste l'argument de
   vente numero un d'une puff jetable, et parce que c'est la seule difference
   chiffree entre le Lost Mary 35K et les trois autres. */
.pcard__k{
  position:absolute;top:12px;left:12px;z-index:3;
  display:flex;flex-direction:column;align-items:center;
  padding:.5rem .9rem .55rem;
  border:1px solid color-mix(in srgb,var(--tone) 55%,transparent);
  border-radius:14px;
  background:rgba(8,7,14,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 0 24px color-mix(in srgb,var(--tone) 22%,transparent);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.pcard__k b{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.24rem,1.7vw,1.6rem);line-height:1;
  letter-spacing:-.01em;color:var(--text-primary);
}
.pcard__k i{
  font-family:var(--font-mono);font-style:normal;
  font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tone);margin-top:.28rem;
}

/* Le bouton de fiche technique, en haut a droite, en face de l'autonomie.
   Discret par defaut, il se revele au survol de la carte : la carte doit
   d'abord vendre le produit, la fiche est pour qui la cherche. Sur les
   appareils tactiles il n'y a pas de survol, donc il reste toujours visible
   (voir la regle pointer:coarse plus bas). */
.pcard__specs{
  position:absolute;top:12px;right:12px;z-index:3;
  display:inline-flex;align-items:center;gap:.42rem;
  padding:.5rem .78rem;min-height:38px;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  background:rgba(8,7,14,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--text-secondary);cursor:pointer;
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.55;
  transition:opacity var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.pcard__specs svg{width:15px;height:15px;flex:none}
.pcard--prod:hover .pcard__specs{opacity:1}
.pcard__specs:hover,
.pcard__specs:focus-visible{
  opacity:1;color:var(--text-primary);
  border-color:color-mix(in srgb,var(--tone) 65%,transparent);
  background:rgba(8,7,14,.82);
}
@media (pointer:coarse){
  .pcard__specs{opacity:1}
}
/* Sur les cartes les plus etroites le libelle saute, l'icone suffit : les
   deux pastilles se rejoignaient au milieu du cadre. */
@media (max-width:720px){
  .pcard__specs span{display:none}
  .pcard__specs{padding:.5rem;min-width:38px;justify-content:center}
}

/* --- le corps de la carte ------------------------------------------------
   Hauteur FIXE, et c'est deliberé : ce bloc porte tantot le nom du produit,
   tantot les bulles de gout, et il ne doit pas changer de taille en passant
   de l'un a l'autre. Sinon la carte grandit sous le doigt, la piste se
   remet en page et le carrousel perd son centrage. */
.pcard__body{
  position:relative;
  padding:clamp(14px,1.5vw,18px) clamp(14px,1.5vw,18px) 0;
  height:clamp(104px,11vw,116px);
}
.pcard__face{
  position:absolute;inset:0;
  padding:inherit;
  display:flex;flex-direction:column;
  transition:opacity .26s var(--ease);
}
.pcard__face[hidden]{display:none}

.pcard__row{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.pcard__name{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(.94rem,1.1vw,1.1rem);letter-spacing:-.01em;
  text-transform:uppercase;color:var(--text-primary);
}
.pcard__price{
  font-family:var(--font-mono);font-size:.92rem;flex:none;
  color:var(--text-primary);font-variant-numeric:tabular-nums;
}
.pcard__sub{
  font-size:.82rem;color:var(--text-secondary);margin-top:.3rem;
}
/* Le gout choisi, avec la pastille a sa couleur : c'est le rappel de ce que
   montre la photo au-dessus. */
.pcard__flavour{
  display:flex;align-items:center;gap:.5rem;margin-top:auto;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tone);
}
.pcard__flavour i{
  width:7px;height:7px;border-radius:50%;background:var(--tone);flex:none;
  box-shadow:0 0 10px color-mix(in srgb,var(--tone) 70%,transparent);
}

/* --- le choix du gout ----------------------------------------------------
   Il remplace le bloc d'information, au meme endroit et a la meme hauteur.
   La liste defile toute seule si les gouts ne tiennent pas : le catalogue
   reel en compte plus de trois par appareil. */
.pcard__pick-lab{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-faint);
  margin-bottom:.5rem;flex:none;
}
.pcard__bulles{
  display:flex;flex-wrap:wrap;gap:.4rem;
  overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:.2rem;
  scrollbar-width:thin;
}
.bulle{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-secondary);
  border:1px solid var(--line);border-radius:20px;
  padding:.42rem .72rem;
  background:rgba(255,255,255,.03);
  cursor:pointer;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.bulle:hover{border-color:rgba(168,85,247,.5);color:var(--text-primary)}
/* Le gout choisi ressort en violet, comme demande : contour et fond, pas
   seulement une nuance de gris qui ne se verrait pas. */
.bulle.is-on{
  border-color:var(--accent);
  color:var(--text-primary);
  background:rgba(168,85,247,.18);
  box-shadow:0 0 0 1px rgba(168,85,247,.35),0 0 18px rgba(168,85,247,.22);
}

/* --- la barre de commande ------------------------------------------------
   Toujours au meme endroit, quel que soit l'etat du bloc au-dessus : le
   bouton Ajouter ne doit jamais se deplacer sous le doigt. */
.pcard__bar{
  margin-top:auto;
  display:grid;gap:.5rem;
  padding:clamp(12px,1.4vw,16px);
}
.pcard__bar-haut{display:grid;grid-template-columns:1fr auto;gap:.5rem}

.pcard__flav{
  display:inline-flex;align-items:center;justify-content:space-between;gap:.5rem;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-primary);
  border:1px solid var(--line);border-radius:12px;
  padding:.6rem .8rem;min-height:42px;
  background:rgba(255,255,255,.04);cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.pcard__flav:hover{border-color:rgba(168,85,247,.5);background:rgba(168,85,247,.12)}
.pcard__flav svg{width:13px;height:13px;flex:none;transition:transform var(--dur) var(--ease)}
.pcard.is-picking .pcard__flav{border-color:var(--accent);background:rgba(168,85,247,.16)}
.pcard.is-picking .pcard__flav svg{transform:rotate(180deg)}

.qte{
  display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.04);overflow:hidden;
}
.qte button{
  width:38px;min-height:42px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;color:var(--text-primary);
  font-size:1.1rem;line-height:1;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.qte button:hover{background:rgba(168,85,247,.18)}
.qte button[disabled]{opacity:.3;pointer-events:none}
.qte span{
  min-width:26px;text-align:center;
  font-family:var(--font-mono);font-size:.86rem;
  font-variant-numeric:tabular-nums;
}

.pcard__add{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  width:100%;min-height:46px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;
  color:#0A0A0A;background:var(--accent);
  border:0;border-radius:12px;cursor:pointer;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.pcard__add:hover{background:var(--accent-hover)}
.pcard__add:active{transform:scale(.98)}
/* La confirmation vit sur le bouton lui-meme : un message ailleurs sur la
   page, on ne le voit pas quand on regarde ce qu'on vient de toucher. */
.pcard__add.is-done{background:var(--live);color:#04120C}

/* --- la carte marque -----------------------------------------------------
   La carte EST une image (fichiers fournis par Lucas le 06/09, puis le
   08/09 pour Foger et Lost Mary) : le nom et les phrases y sont peints.
   Attention, ce n'est pas un gabarit : Geek Bar et RAZ portent en plus une
   mention "2 devices" peinte, Foger et Lost Mary n'en portent aucune. Le
   texte repris en .sr-only vient donc du catalogue, marque par marque.

   LE BOUTON PEINT A ETE COUPE, et c'est le seul ecart avec les fichiers
   d'origine. La raison est mesuree, pas esthetique : ces fichiers font du
   941x1672, un rapport tres allonge. Pour que leur bouton peint atteigne une
   taille lisible (12px de haut), la carte doit faire 440px de large, donc
   782px de haut, donc reclamer une fenetre de 1160px de haut. Sur un
   portable de 820px, la carte retombait a 248px et le libelle a 6,8px,
   illisible. Coupees a y=1395, juste au-dessus de la pilule et de sa lueur
   (verifie fichier par fichier, y compris sur l'appel a l'action peint de
   Lost Mary qui tombe a y=1495), les images passent en 941x1395 et le bouton
   est redessine ci-dessous en HTML : sa taille ne depend plus de celle de la
   carte. Les fichiers d'origine restent intacts dans brut/.

   Le rapport est celui EXACT des fichiers coupes, donc `cover` n'a rien a
   couper : le cadrage voulu est celui qu'on voit. */
.pcard--brand .pcard__box{
  position:relative;display:block;
  aspect-ratio:941/1395;
  padding:0;cursor:pointer;
  background:#0B0A11;
}
.pcard__brand-img{
  position:absolute;inset:0;
  width:100%;height:100%;min-height:0;
  object-fit:cover;object-position:50% 50%;
}
.pcard--brand .pcard__box:hover,
.pcard--brand .pcard__box:focus-visible{
  transform:translateY(-10px) scale(1.03);
  border-color:color-mix(in srgb,var(--tone) 55%,transparent);
  box-shadow:
    0 26px 60px rgba(0,0,0,.6),
    0 0 40px color-mix(in srgb,var(--tone) 22%,transparent);
}
.pcard--brand .pcard__box:hover .pcard__brand-img{transform:scale(1.03)}
.pcard__brand-img{transition:transform .8s var(--ease-slow)}

/* Le bouton, redessine, pose sur le sol de l'image la ou le peint se
   trouvait. Fond opaque et flou derriere : le sol est reflechissant et clair
   par endroits (le sol dore de Foger est le pire cas), un simple contour n'y
   tiendrait pas. La bordure prend la couleur de la marque. */
.pcard__cta{
  position:absolute;left:50%;bottom:5.5%;
  transform:translateX(-50%);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  white-space:nowrap;
  font-family:var(--font-mono);
  font-size:clamp(.6rem,.86vw,.72rem);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-primary);
  border:1px solid color-mix(in srgb,var(--tone) 70%,transparent);
  border-radius:999px;
  padding:.7rem clamp(1rem,1.8vw,1.6rem);min-height:44px;
  /* Fond a 0,82 : mesure sur la page rendue, jamais en theorie. Les deux
     illustrations arrivees le 08/09 sont bien plus claires derriere la
     pilule que les trois premieres (luminance moyenne du fichier sous le
     bouton : 20 pour Geek Bar, 33 pour RAZ, 65 pour Lost Mary, 77 pour
     Foger), donc le calcul a ete refait sur les PIXELS RENDUS a l'ecran, en
     ecartant les bords arrondis et les pixels de lissage : blanc contre le
     fond median, 18,1:1 sur Geek Bar, 17,9 sur RAZ, 17,5 sur Foger, 17,6 sur
     Lost Mary. Contre le neuvieme decile du fond, le pire cas tombe a 15,0:1
     sur Lost Mary. C'est exactement la marge que cette valeur avait ete
     choisie pour garder d'avance, donc rien a rectifier ici. */
  background:rgba(8,7,14,.82);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 0 22px color-mix(in srgb,var(--tone) 26%,transparent);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.pcard__cta svg{width:15px;height:15px;flex:none;transition:transform var(--dur) var(--ease)}
.pcard--brand .pcard__box:hover .pcard__cta,
.pcard--brand .pcard__box:focus-visible .pcard__cta{
  background:color-mix(in srgb,var(--tone) 26%,rgba(8,7,14,.72));
  border-color:var(--tone);
  box-shadow:0 0 34px color-mix(in srgb,var(--tone) 48%,transparent);
}
.pcard--brand .pcard__box:hover .pcard__cta svg{transform:translateX(3px)}

/* --- la fiche technique ---------------------------------------------------
   Demande de Lucas : une carte plus grande qui prend l'ecran, mais a travers
   laquelle on voit ce qu'il y a derriere. D'ou le panneau translucide pose
   sur un voile leger, et non un fond plein : la page reste perceptible, donc
   on sait toujours d'ou on vient et ou on va revenir.
   Le prix de ce parti pris est le contraste : le texte est pose sur ce qui se
   trouve derriere, donc l'opacite du panneau a ete mesuree, pas choisie. */
.fiche{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:clamp(14px,3vw,40px)}
.fiche[hidden]{display:none}
.fiche__voile{
  position:absolute;inset:0;
  background:rgba(4,4,8,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s var(--ease);
}
.fiche.is-open .fiche__voile{opacity:1}
.fiche__carte{
  position:relative;z-index:1;
  width:min(880px,100%);max-height:88svh;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(22px,3.2vw,42px);
  border:1px solid color-mix(in srgb,var(--tone,var(--accent)) 40%,transparent);
  border-radius:22px;
  /* 0,74 : mesure sur la page ouverte, le pire fond a travers le panneau
     ressort a rgb(14,13,22) et le blanc du texte y tient 19,3:1. C'est la
     marge qui permet de garder le panneau translucide sans sacrifier la
     lecture. */
  background:rgba(14,12,22,.74);
  -webkit-backdrop-filter:blur(26px) saturate(1.2);backdrop-filter:blur(26px) saturate(1.2);
  box-shadow:
    0 40px 90px rgba(0,0,0,.6),
    0 0 60px color-mix(in srgb,var(--tone,var(--accent)) 16%,transparent);
  opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .34s var(--ease-slow),transform .34s var(--ease-slow);
}
.fiche.is-open .fiche__carte{opacity:1;transform:none}

.fiche__x{
  position:absolute;top:clamp(14px,1.6vw,20px);right:clamp(14px,1.6vw,20px);
  width:38px;height:38px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;
  color:var(--text-primary);cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.fiche__x:hover{border-color:var(--tone,var(--accent));background:rgba(255,255,255,.12)}
.fiche__x svg{width:16px;height:16px}

.fiche__tete{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2vw,26px);
  align-items:center;
  padding-right:48px;
  padding-bottom:clamp(18px,2.4vw,28px);
  border-bottom:1px solid var(--line-soft);
}
.fiche__img{
  width:clamp(64px,7vw,92px);aspect-ratio:1;border-radius:14px;
  object-fit:cover;border:1px solid var(--line-soft);background:#0B0A11;
}
.fiche__kick{
  display:block;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tone,var(--accent));
}
.fiche__titre{
  margin:.34rem 0 0;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.01em;
  color:var(--text-primary);
}
.fiche__gout{
  display:block;margin-top:.3rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-secondary);
}

.fiche__corps{display:grid;gap:clamp(20px,2.6vw,32px);margin-top:clamp(20px,2.6vw,30px)}

/* Les quatre chiffres qui decident de l'achat, en grand et en premier : ce
   sont eux qu'on vient chercher, le reste se lit apres. */
.fiche__cles{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(12px,1.6vw,18px);
}
@media (min-width:660px){
  .fiche__cles{grid-template-columns:repeat(4,1fr)}
}
.fiche__cles li{
  padding:clamp(12px,1.6vw,18px);
  border:1px solid var(--line-soft);border-radius:14px;
  background:rgba(255,255,255,.03);
  text-align:center;
}
.fiche__cles b{
  display:block;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.1;
  color:var(--text-primary);
}
.fiche__cles span{
  display:block;margin-top:.36rem;
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tone,var(--accent));
}

/* Le reste en lignes libellé/valeur : ca se parcourt des yeux, contrairement
   a un paragraphe. */
.fiche__traits{margin:0;display:grid;gap:0;border-top:1px solid var(--line-soft)}
.fiche__traits div{
  display:grid;grid-template-columns:1fr;gap:.2rem;
  padding:clamp(12px,1.5vw,16px) 0;
  border-bottom:1px solid var(--line-soft);
}
@media (min-width:660px){
  .fiche__traits div{grid-template-columns:minmax(110px,.28fr) 1fr;gap:clamp(14px,2vw,28px);align-items:baseline}
}
/* --text-secondary et non --text-faint : mesure sur le panneau translucide,
   le gris faible n'y tenait que 3,83:1, sous le plancher de 4,5 pour du
   petit texte. Celui-ci passe a 7,4:1. */
.fiche__traits dt{
  margin:0;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-secondary);
}
.fiche__traits dd{margin:0;color:var(--text-primary);font-size:.95rem;line-height:1.55}

/* Mention legale : elle doit se lire, pas se deviner. Meme gris que les
   libelles ci-dessus, pour la meme raison mesuree. */
.fiche__warn{
  margin:clamp(18px,2.4vw,26px) 0 0;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;
  line-height:1.7;color:var(--text-secondary);
}

@media (prefers-reduced-motion:reduce){
  .fiche__carte,.fiche__voile{transition:none}
}

/* --- le tiroir du panier -------------------------------------------------
   Panneau lateral sur grand ecran, feuille qui monte du bas sur telephone :
   au pouce, un panneau colle a droite est le bord le plus dur a atteindre. */
.tiroir{position:fixed;inset:0;z-index:150}
.tiroir[hidden]{display:none}
.tiroir__voile{
  position:absolute;inset:0;
  background:rgba(4,4,8,.72);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .32s var(--ease);
}
.tiroir.is-open .tiroir__voile{opacity:1}
.tiroir__panneau{
  position:absolute;right:0;top:0;bottom:0;
  width:min(420px,100%);
  display:flex;flex-direction:column;
  background:var(--panel);
  border-left:1px solid var(--line);
  transform:translateX(100%);
  transition:transform .38s var(--ease-slow);
}
.tiroir.is-open .tiroir__panneau{transform:none}
@media (max-width:640px){
  .tiroir__panneau{
    right:0;left:0;top:auto;width:auto;
    max-height:86svh;
    border-left:0;border-top:1px solid var(--line);
    border-radius:20px 20px 0 0;
    transform:translateY(100%);
  }
}

.tiroir__tete{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(18px,2.4vw,26px);
  border-bottom:1px solid var(--line-soft);flex:none;
}
.tiroir__titre{
  margin:0;font-family:var(--font-display);font-weight:700;
  font-size:1.1rem;letter-spacing:-.01em;
}
.tiroir__x{
  width:38px;height:38px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);border-radius:10px;
  color:var(--text-primary);cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.tiroir__x:hover{border-color:var(--accent);background:rgba(168,85,247,.14)}
.tiroir__x svg{width:16px;height:16px}

.tiroir__corps{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(14px,2vw,20px) clamp(18px,2.4vw,26px);
}
.tiroir__vide{color:var(--text-secondary);margin:0;font-size:.95rem}

.ligne{
  display:grid;grid-template-columns:56px 1fr;gap:.9rem;
  padding:.9rem 0;border-bottom:1px solid var(--line-soft);
}
.ligne__img{
  width:56px;aspect-ratio:1;border-radius:10px;object-fit:cover;
  border:1px solid var(--line-soft);background:#0B0A11;
}
.ligne__nom{
  font-family:var(--font-display);font-weight:600;font-size:.9rem;
  display:block;
}
.ligne__gout{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tone,var(--accent));display:block;margin-top:.16rem;
}
.ligne__bas{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  margin-top:.5rem;flex-wrap:wrap;
}
/* Le compteur du tiroir : meme mecanisme que celui de la carte produit, en
   plus petit. La cible tactile reste a 34px de haut, sous le confort de 44px
   mais au-dessus du seuil ou le doigt rate, et c'est ce qu'une ligne de
   panier peut porter sans doubler de hauteur. */
.qte--mini{border-radius:10px}
.qte--mini button{width:30px;min-height:34px;font-size:1rem}
.qte--mini span{min-width:20px;font-size:.78rem}

/* Le prix suit le compteur, et c est Remove qui est pousse au bord. Pose a
   droite contre lui, il s en trouvait a quelques pixels et les deux se
   lisaient comme un seul bloc, verifie en capture. */
.ligne__prix{
  font-family:var(--font-mono);font-size:.84rem;
  font-variant-numeric:tabular-nums;color:var(--text-primary);
  display:flex;flex-direction:column;line-height:1.25;
}
/* Le prix unitaire reste lisible sous le total : sans lui, une ligne a
   plusieurs exemplaires n'affiche plus qu'une somme, et le visiteur ne peut
   plus verifier ce qu'il paye a l'unite. */
.ligne__prix i{font-style:normal;font-size:.62rem;color:var(--text-faint);letter-spacing:.04em}
.ligne__prix b{font-weight:500}
.ligne__x{
  margin-left:auto;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-faint);
  transition:color var(--dur) var(--ease);
}
.ligne__x:hover{color:#F87171}

.tiroir__pied{
  flex:none;padding:clamp(16px,2.2vw,24px);
  border-top:1px solid var(--line-soft);
  background:rgba(0,0,0,.24);
}
.tiroir__total{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:.9rem;
}
.tiroir__total span{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-faint);
}
.tiroir__total b{
  font-family:var(--font-mono);font-size:1.2rem;
  font-variant-numeric:tabular-nums;color:var(--text-primary);
}
.tiroir__go{display:flex;justify-content:center;width:100%;margin-bottom:.55rem}
.tiroir__note{
  margin:.7rem 0 0;font-size:.76rem;line-height:1.5;color:var(--text-faint);
}
/* Un panier vide ne propose pas d'envoyer une commande vide. */
.tiroir__go[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* Le code promo. Il ne touche PAS au total affiche au-dessus : la note qui
   le suit est donc obligatoire, sinon un total qui ne bouge pas se lit
   comme un code refuse. */
.tiroir__promo{display:flex;gap:.5rem;align-items:stretch;margin-bottom:.5rem}
.tiroir__promo input{
  flex:1 1 auto;min-width:0;
  font-family:var(--font-mono);font-size:.86rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-primary);
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:.62rem .8rem;transition:border-color var(--dur) var(--ease);
}
.tiroir__promo input::placeholder{letter-spacing:.1em;color:var(--text-faint)}
.tiroir__promo input:focus{border-color:var(--accent);outline:none}
.tiroir__promo-x{
  flex:none;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-secondary);
  background:none;border:1px solid var(--line);border-radius:10px;
  padding:0 .8rem;cursor:pointer;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.tiroir__promo-x:hover{color:var(--text-primary);border-color:var(--accent)}
.tiroir__promo-dit{margin:0 0 1rem;font-size:.76rem;line-height:1.5;color:var(--text-faint)}

/* --- Le pied du tiroir sur telephone -------------------------------------
   Mesure le 09/09/2026 en 390x844 : le pied prenait 396,6px, soit 64,4 % de
   la feuille avec un seul article et 54,6 % avec quatre, et la liste tombait
   a 253px pour 489px de contenu. Le probleme n existe pas sur ordinateur,
   ou le panneau fait toute la hauteur : toute la correction est donc ici,
   sous 640px, et rien au-dessus n a bouge.
   Trois leviers, dans cet ordre d effet : le bouton SMS retire (HTML), la
   feuille montee de 86 a 90svh, et les marges du pied resserrees. Les
   cibles tactiles restent au-dessus de 44px, plancher a ne pas franchir. */
@media (max-width:640px){
  .tiroir__panneau{max-height:90svh}
  .tiroir__pied{padding:13px var(--gutter, 16px) 14px}
  .tiroir__promo{margin-bottom:.35rem}
  .tiroir__promo input{padding-top:.55rem;padding-bottom:.55rem}
  .tiroir__promo-dit{margin:0 0 .6rem;font-size:.72rem;line-height:1.42}
  .tiroir__total{margin-bottom:.55rem}
  .tiroir__go{margin-bottom:.4rem}
  /* Le lien d expedition est secondaire : il descend a 44px, le plancher
     tactile, quand le bouton principal garde sa taille pleine. */
  .tiroir__go.btn--ghost{min-height:44px;padding-top:.6rem;padding-bottom:.6rem}
  .tiroir__note{margin-top:.5rem;font-size:.72rem;line-height:1.42}
}

body.tiroir-ouvert{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .pcard{transition:none}
  .tiroir__panneau,.tiroir__voile{transition:none}
  .pcard__img{transition:opacity .01s}
}