/* --------------------------------------------------------------------------
   COULEUR VIVANTE
   Le catalogue etait blanc sur blanc : 88 cartes identiques, rien pour guider
   l'oeil. Cette couche donne a chaque fiche la couleur de SA famille de gout
   (fruite, menthole, gourmand, boisson, tabac) ou de son type de materiel.
   La couleur porte donc une information — on repere un menthole a son bleu
   glace sans lire l'etiquette — au lieu d'etre une simple decoration.

   Regle de cout tenue partout ici : on n'anime que `transform` et `opacity`,
   et les halos sont des degrades radiaux, jamais des `filter: blur()`.
   -------------------------------------------------------------------------- */

/* Palette par defaut (corail du magasin) : une carte sans famille connue reste
   dans l'identite de la marque plutot que de tomber en gris. */
.pcard,.fam-dot{--a:#C63F48;--aw:#FFF3EF;--ag:rgba(242,105,107,.22);--al:rgba(242,105,107,.20)}

/* --- Familles de gout (e-liquides) --- */
[data-fam="fruite"]  {--a:#C63F48;--aw:#FFF2EE;--ag:rgba(242,105,107,.24);--al:rgba(242,105,107,.22)}
[data-fam="menthol"] {--a:#1A7A9A;--aw:#ECF8FC;--ag:rgba(47,168,204,.24) ;--al:rgba(47,168,204,.22)}
[data-fam="gourmand"]{--a:#A0650B;--aw:#FFF7E8;--ag:rgba(224,149,28,.24) ;--al:rgba(224,149,28,.24)}
[data-fam="boisson"] {--a:#7C50E8;--aw:#F5F0FF;--ag:rgba(139,92,246,.22) ;--al:rgba(139,92,246,.20)}
[data-fam="tabac"]   {--a:#95663B;--aw:#FAF3EC;--ag:rgba(169,118,74,.22) ;--al:rgba(169,118,74,.22)}
/* --- Types de materiel (aucune famille de gout) --- */
[data-fam="Pod"]       {--a:#4165E0;--aw:#EFF2FE;--ag:rgba(78,107,230,.20);--al:rgba(78,107,230,.20)}
[data-fam="Resistance"]{--a:#12814D;--aw:#ECF9F3;--ag:rgba(32,160,107,.20);--al:rgba(32,160,107,.20)}
[data-fam="VapeEcig"]  {--a:#C53C66;--aw:#FDF0F5;--ag:rgba(225,86,126,.22);--al:rgba(225,86,126,.20)}
[data-fam="DIY"]       {--a:#A0650B;--aw:#FFF7E8;--ag:rgba(224,149,28,.24);--al:rgba(224,149,28,.24)}

/* ---------------------------------------------------------------- LA CARTE */
.pcard{position:relative;background:linear-gradient(178deg,var(--aw) 0%,#fff 56%);
  border-color:var(--al);
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,border-color .22s}
.pcard:hover{border-color:var(--a);box-shadow:0 22px 44px var(--ag),0 3px 10px rgba(80,40,40,.05)}

/* Trait de couleur qui se deploie sous la carte au survol. */
.pcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--a);transform:scaleX(0);transform-origin:center;
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
.pcard:hover::after{transform:scaleX(1)}

/* Halo colore derriere le produit : un degrade radial, pas un flou. */
.pcard .ph{background:#fff}
.pcard .ph::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 42%,var(--ag),transparent 62%);
  transform:scale(.92);opacity:.85;
  transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .3s}
.pcard:hover .ph::before{transform:scale(1.1);opacity:1}
/* La bouteille passe au-dessus du halo. On ne touche SURTOUT pas a `position` :
   les deux visuels sont deja cales en absolu (style.css l.219) et c'est ce qui
   contient les grands flacons SIX dans la vignette. Y ecrire `position:relative`
   fait perdre la reference de hauteur, l'image explose et l'etiquette sort du
   cadre — les flacons apparaissaient alors vierges. */
.pcard .ph .cut{z-index:1}

/* La marque et la fleche prennent la couleur de la famille. */
.pcard .br{color:var(--a)}
.pcard .add{background:var(--a);box-shadow:0 6px 16px var(--ag);
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s}
.pcard:hover .add{transform:translateY(-2px) scale(1.06);box-shadow:0 10px 22px var(--ag)}

/* Pastilles de volume : teintees plutot que grises. */
.pcard .vols span{background:var(--aw);border-color:var(--al);color:var(--a)}

/* Badge "nouveau" : un reflet le traverse pour attirer l'oeil. */
.pcard .tag.new{overflow:hidden}
.pcard .tag.new::after{content:"";position:absolute;top:0;bottom:0;width:44%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.72),transparent);
  transform:translateX(-160%);animation:vifShine 3.6s ease-in-out infinite}
@keyframes vifShine{0%,62%{transform:translateX(-160%)}88%,100%{transform:translateX(330%)}}

/* --------------------------------------------------- PASTILLE DE FAMILLE
   Un point de couleur ET le nom de la famille : la couleur seule ne doit
   jamais porter une information, sinon elle est perdue pour qui distingue
   mal les teintes. Le mot est donc toujours ecrit a cote. */
.fam-dot{display:inline-flex;align-items:center;gap:6px;font:700 10.5px/1 var(--font);
  letter-spacing:.04em;text-transform:uppercase;color:var(--a);
  background:var(--aw);border:1px solid var(--al);border-radius:999px;padding:5px 9px 5px 7px}
.fam-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--a);flex:none}
.pcard .fam-dot{position:absolute;top:12px;inset-inline-end:12px;z-index:2;
  background:rgba(255,255,255,.92)}

/* ------------------------------------------------- ARRIVEE DES CARTES
   Les cartes montent en fondu en entrant dans l'ecran. La classe n'est posee
   que par le JS : sans JS, ou si le navigateur ne sait pas observer, tout
   reste visible d'emblee. */
.prow.vif-in .pcard{opacity:0;transform:translateY(18px)}
.prow.vif-in .pcard.vin{opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}

/* --------------------------------------------------- BARRE DE FILTRES
   Elle etait blanche sur blanc et se confondait avec la grille. */
.filters{background:linear-gradient(180deg,rgba(255,246,242,.97),rgba(255,251,247,.94));
  border-bottom:1px solid rgba(242,105,107,.14)}
.chip{transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s,color .2s}
.chip .ico{margin-inline-end:5px}

/* Chaque puce de famille porte sa couleur meme eteinte : le code couleur
   s'apprend depuis le filtre avant de servir dans la grille. */
.chip[data-fam]{border-color:var(--al);color:var(--a);background:var(--aw)}
.chip[data-fam]:hover{border-color:var(--a);box-shadow:0 6px 16px var(--ag)}
.chip[data-fam].on{background:var(--a);border-color:transparent;color:#fff;
  box-shadow:0 8px 20px var(--ag)}
.chip[data-fam].on .n{opacity:.85}

/* ------------------------------------------------------ ENTETE DE PAGE
   Un bandeau qui respire, au lieu d'un aplat rose pale. */
.pagehead{position:relative;overflow:hidden;
  background:
    radial-gradient(58% 120% at 88% 0%,rgba(245,176,46,.20),transparent 62%),
    radial-gradient(52% 130% at 12% 100%,rgba(139,92,246,.16),transparent 64%),
    linear-gradient(120deg,#FFF4F0,#FFF9F4 52%,#F6FBFF)}
.pagehead::before,.pagehead::after{content:"";position:absolute;border-radius:50%;
  pointer-events:none}
.pagehead::before{width:340px;height:340px;top:-160px;inset-inline-end:6%;
  background:radial-gradient(circle,rgba(242,105,107,.20),transparent 68%);
  animation:vifFloat 11s ease-in-out infinite}
.pagehead::after{width:260px;height:260px;bottom:-150px;inset-inline-start:10%;
  background:radial-gradient(circle,rgba(47,179,122,.16),transparent 68%);
  animation:vifFloat 14s ease-in-out infinite reverse}
@keyframes vifFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,22px,0) scale(1.08)}}
.pagehead .wrap{position:relative;z-index:1}

/* ----------------------------------------------------- FICHE PRODUIT
   La page produit heritait du meme blanc : elle prend la couleur de sa
   famille, posee par produit.js sur <body>. */
body[data-fam] .pdp-media{background:
  radial-gradient(circle at 50% 38%,var(--ag),transparent 66%),#fff}
body[data-fam] .pdp .chip.on{background:var(--a);box-shadow:0 8px 20px var(--ag)}

@media(prefers-reduced-motion:reduce){
  .pagehead::before,.pagehead::after,.pcard .tag.new::after{animation:none}
  .prow.vif-in .pcard{opacity:1;transform:none}
}

/* ------------------------------------------------ CHOIX DU COLORIS
   La pastille montre le produit lui-meme en miniature plutot qu'un aplat de
   couleur : rien a tenir a jour quand un coloris s'ajoute, et le client voit
   exactement l'objet qu'il commande. */
.chip.ccol{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px}
.chip.ccol img{width:26px;height:26px;border-radius:50%;object-fit:contain;
  background:#F6EFEC;padding:2px;flex:none}
.chip.ccol.on img{background:rgba(255,255,255,.28)}

/* « Prix en boutique » : lisible mais visiblement different d'un montant, pour
   qu'on ne le confonde pas avec un prix affiche. */
.askprice{font:800 14px/1.3 var(--font);color:var(--a);letter-spacing:.01em}
.pdp .priceline .askprice{font-size:22px}

/* ------------------------------------------- VISUELS NON DETOURES
   Quelques visuels gardent leur fond d'origine : une illustration dont le fond
   EST l'image, ou une photo sur plan reflechissant qu'un detourage laisserait
   couverte de bavures. Sur ces fiches on retire le halo colore : sinon le fond
   blanc de la photo dessine un rectangle franc au milieu de la teinte. */
.pcard .ph.flat::before{display:none}
.pcard .ph.flat{background:#fff}
/* Le visuel occupe alors tout le cadre : son propre fond devient le fond de
   la vignette, et il n'y a plus de bord visible. */
.pcard .ph.flat img{inset:0;width:100%;height:100%;object-fit:cover}
.pdp-media.flat,body[data-fam] .pdp-media.flat{background:#fff}


/* ══════════════════════════════════════════════════════════════════════════
   TÉLÉPHONE — suite du bloc de style.css.

   Ces trois règles vivent ICI et pas dans style.css parce que `vif.css` est
   chargé APRÈS : une taille posée là-bas gagnait contre le correctif, et les
   pastilles de famille restaient à 10,5 px malgré la correction.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* La famille de goût est ce qui aide à choisir entre 88 flacons : elle doit
     se lire sans approcher le téléphone. */
  .fam-dot { font-size: 12px; padding: 5px 9px; }
  .pcard .fam-dot { top: 8px; inset-inline-end: 8px; }
  .pcard .vols span { font-size: 12px; }

  /* Les liens du pied de page faisaient 24 px de haut : un doigt en rate un
     sur trois. 12 px de marge haute et basse les portent au-dessus de 44. */
  .foot a { padding: 12px 0; }

  /* Les liens légaux — informations sur le vendeur, confidentialité, droit de
     rétractation, accessibilité — faisaient 19 px de haut. Ce sont des
     mentions obligatoires : elles doivent être atteignables, pas seulement
     présentes. */
  .foot-legal-links { display: flex; flex-wrap: wrap; gap: 0 14px; }
  .foot-legal-links a { padding: 13px 0; }

  /* Icônes sociales : 40 px, juste sous le seuil. */
  .soc a { min-width: 44px; min-height: 44px; display: grid; place-items: center; }

  /* Le sélecteur de langue faisait 31 px. C'est le premier bouton qu'un
     client touche quand le site ne s'ouvre pas dans sa langue : le rater
     décide de la suite de la visite. */
  .lang button { min-height: 44px; padding-inline: 14px; }

  /* Croix de fermeture du tiroir : 21 × 29 px, la plus petite cible du site. */
  .cs-x { min-width: 44px; min-height: 44px; }

  /* « J'ai moins de 18 ans » du portail : 17 px de haut. Un mineur doit
     pouvoir sortir aussi facilement qu'un adulte peut entrer. */
  .agev-out { min-height: 44px; }

  /* Les boutons ordinaires du site — « nous appeler », « voir le magasin »,
     « rejoindre » — passaient sous le seuil sur la page magasin. */
  .btn { min-height: 44px; }

  /* Flèches du bandeau de la page d'accueil, et retour de la fiche produit. */
  .adb-nav { min-width: 44px; min-height: 44px; }
  .pdp-back { min-height: 44px; display: inline-flex; align-items: center; }

  /* `.hero-inner` porte aussi la classe `.wrap`, mais déclare `padding` en
     raccourci : les marges latérales de `.wrap` repassaient donc à zéro. Sur
     grand écran cela ne se voyait pas — la largeur maximale laissait de l'air
     de chaque côté. Sur téléphone, le titre, le texte et le bouton d'achat
     touchaient les deux bords de l'écran. */
  .hero-inner { padding-inline: clamp(16px, 4vw, 34px); }
}


/* ── Carnet d'adresses, au moment de commander ───────────────────────────
   Le client tapait son adresse a chaque commande, et son profil n'en montrait
   aucune : rien n'etait enregistre. Les adresses connues s'affichent en
   pastilles, un clic remplit les champs. */
.carnet{margin:14px 0 6px}
.carnet-t{font:700 11px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.carnet-c{display:block;width:100%;text-align:start;border:1.5px solid var(--line);
  background:#fff;border-radius:14px;padding:11px 14px;margin-bottom:8px;cursor:pointer;
  transition:border-color .18s,background .18s}
.carnet-c b{display:block;font:700 14px/1.3 var(--font);color:var(--ink)}
.carnet-c span{display:block;font:400 12.5px/1.4 var(--font);color:var(--muted);margin-top:2px}
.carnet-c:hover{border-color:var(--coral)}
.carnet-c.on{border-color:var(--coral);background:#FFF3EF}
.carnet-c.autre b{color:var(--muted)}

.retenir{margin-top:10px}
.retenir-c{display:flex;align-items:center;gap:9px;cursor:pointer;
  font:500 13.5px/1.4 var(--font);color:var(--ink)}
.retenir-c input{width:20px;height:20px;accent-color:var(--coral)}
.retenir-nom{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:10px}
.retenir-nom input{flex:1;min-width:150px;padding:11px 13px;border:1px solid var(--line);
  border-radius:12px;font:500 14px/1 var(--font);color:var(--ink)}
.retenir-s{border:1px solid var(--line);background:#fff;color:var(--muted);
  border-radius:999px;padding:9px 15px;cursor:pointer;font:600 12.5px/1 var(--font)}
.retenir-s:hover{border-color:var(--coral);color:var(--coral)}
@media (max-width:700px){
  .carnet-c{min-height:56px}
  .retenir-s{min-height:44px}
  .retenir-nom input{min-height:46px;font-size:16px}
}


/* ── Reseaux sociaux : les vrais logos, poses dans le pied de page ───────
   Le pied de page portait trois emojis (appareil photo, pouce, bulle). Ils ne
   disaient pas de quel reseau il s'agissait, et leur dessin change d'un
   telephone a l'autre.

   Premier essai : les logos sur des pastilles blanches. Trois blocs blancs
   dans un pied de page violet sombre et doux — ca faisait autocollant plaque.
   Ici, plus de boite du tout : les logos sont poses directement, comme les
   emojis de contact juste a cote. Ils sont livres sans fond, autant s'en
   servir.

   Ils sont legerement adoucis au repos pour ne pas crier plus fort que le
   texte, et reprennent toute leur couleur au survol. */
.foot .soc{gap:16px;align-items:center}
.foot .soc a{
  width:38px;height:38px;padding:0;
  background:transparent;border-radius:50%;
  position:relative;display:grid;place-items:center;
  transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
/* Un halo aux couleurs du magasin apparait sous le logo au survol : c'est ce
   qui les rattache au reste du site plutot qu'aux trois marques. */
.foot .soc a::before{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,105,107,.34),transparent 68%);
  opacity:0;transition:opacity .2s;
}
.foot .soc a:hover::before{opacity:1}
.foot .soc a:hover{transform:translateY(-3px)}
.foot .soc a img{
  position:relative;
  width:30px;height:30px;object-fit:contain;display:block;
  opacity:.86;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.4));
  transition:opacity .2s;
}
.foot .soc a:hover img{opacity:1}
.foot .soc a:focus-visible{outline:3px solid #FFFFFF;outline-offset:4px}

@media (max-width:700px){
  /* La cible reste a 44 px : c'est le logo qui est plus petit, pas la zone
     ou l'on tape. */
  .foot .soc a{width:44px;height:44px}
}


/* Les vrais logos des reseaux, partout ou l'on avait mis un emoji.
   Deux tailles seulement : dans un bouton (a hauteur de texte), et dans la
   pastille ronde d'une carte d'info. */
.cs-wa-logo,
.btn-logo{
  width:1.15em;height:1.15em;
  object-fit:contain;
  vertical-align:-.22em;
  margin-inline-end:.15em;
}

/* Dans la pastille de 52 px des cartes « magasin ». Le fond colore de la
   pastille reste, le logo se pose dessus a sa taille reelle. */
.infocard .ic > img{
  width:28px;height:28px;object-fit:contain;display:block;
}


/* ── Le fond du catalogue ────────────────────────────────────────────────
   La page etait d'un blanc de laboratoire : des dizaines de fiches claires
   sur un fond clair, sans respiration. On pose dessous trois halos tres
   dilues, pris dans les couleurs du magasin (corail, raisin, or) — assez
   pour qu'on sente le fruit, assez peu pour que le texte reste net et que
   les visuels produits gardent la vedette.

   `fixed` : les halos ne defilent pas. Les fiches passent DEVANT une
   ambiance, au lieu de trainer un decor avec elles. */
body.page-cat{
  background:
    radial-gradient(62% 46% at 88% 4%,  rgba(242,105,107,.20), transparent 64%),
    radial-gradient(58% 44% at 6% 28%,  rgba(139,92,246,.15),  transparent 66%),
    radial-gradient(64% 40% at 92% 62%, rgba(47,179,122,.11),  transparent 66%),
    radial-gradient(70% 50% at 40% 104%,rgba(245,176,46,.20),  transparent 68%),
    #FDF4EA;
  background-attachment: fixed;
}

/* Sur telephone, `fixed` coute cher au defilement (repeint a chaque image)
   et iOS le rend mal. On garde les memes halos, poses normalement. */
@media (max-width:760px){
  body.page-cat{ background-attachment: scroll; background-size: 100% 220vh; }
}

/* Les fiches doivent rester lisibles par-dessus : un blanc franc et une
   ombre un peu plus marquee les decollent du fond colore. Sans ca, une carte
   blanche sur un fond creme se met a flotter sans contour. */
body.page-cat .pcard,
body.page-cat .panel{
  background:#fff;
  box-shadow:0 10px 30px rgba(120,60,80,.10);
}

/* Le bandeau de filtres couvrait toute la largeur en blanc plein : il coupait
   la page en deux et effacait l'ambiance juste sous le titre. Translucide, il
   laisse passer le fond tout en gardant les puces parfaitement lisibles. */
body.page-cat .filters{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 26px rgba(120,60,80,.07);
}
/* Cette regle est plus specifique que `.pcard:hover` de style.css : sans la
   redeclarer ici, le survol perdait son relief et la fiche ne repondait plus
   au regard. */
body.page-cat .pcard:hover{
  box-shadow:0 20px 46px rgba(120,60,80,.17);
}


/* ── Suggestions du panier ───────────────────────────────────────────────
   Elles vivent SOUS le panier, jamais a cote : rien ne doit disputer
   l'attention au bouton « commander ». Volontairement plus discretes que les
   fiches du catalogue — c'est un complement, pas une vitrine. */
.ps{ margin-top:38px; }
.ps + .ps{ margin-top:30px; }
.ps-tete h3{
  font-family:var(--display); font-size:21px; line-height:1.2; margin:0;
}
.ps-tete p{ margin:6px 0 0; color:var(--muted); font-size:13.5px; }

.ps-liste{
  margin-top:16px; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
}
.ps-c{
  display:flex; align-items:center; gap:12px; padding:10px;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  text-decoration:none; color:inherit;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.ps-c:hover{
  transform:translateY(-3px);
  border-color:transparent;
  box-shadow:0 14px 32px rgba(120,60,80,.14);
}
.ps-img{
  flex:none; width:62px; height:62px; border-radius:12px;
  display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 50% 35%,#FFF3EF,#fff);
}
.ps-img img{ max-width:82%; max-height:82%; object-fit:contain; }
.ps-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ps-marque{
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--coral, #C63F48); font-weight:800;
}
/* Le nom peut etre long ; on le coupe sur deux lignes plutot que de laisser
   la carte s'etirer et casser l'alignement de la grille. */
.ps-nom{
  font-weight:700; font-size:13.5px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.ps-prix{ font-size:12.5px; color:var(--muted); margin-top:2px; }

@media (max-width:700px){
  /* Sur telephone, deux colonnes tiennent : la carte est horizontale et
     compacte, elle n'a pas besoin de toute la largeur. */
  .ps-liste{ grid-template-columns:1fr 1fr; gap:10px; }
  .ps-c{ flex-direction:column; align-items:flex-start; }
  .ps-img{ width:100%; height:96px; }
}