/* =========================================================
   BIZZOO — application client (mobile d'abord)
   Charte graphique tirée de l'icône : bleu vif, bleu nuit,
   orange et ambre.
   ========================================================= */

/* ---------- Jetons de design ---------- */
/* La charte vient de l'icône BIZZOO : le bleu vif du fond, le bleu
   nuit du sac, l'orange de la vague et l'ambre de l'anse.
   Règle de lisibilité : l'orange sert de fond et porte du bleu nuit
   (5,6:1) ; en texte sur fond clair, c'est l'orange foncé (4,9:1).
   Le rouge ne dit plus la marque, seulement le danger et la rupture. */
/* ---------- Poppins, embarquée ---------- */
/* LES FICHIERS SONT DANS L'APPLICATION, pas chez Google. Une police
   allée chercher sur le réseau ne s'affiche pas quand il n'y en a
   pas — et BIZZOO doit s'ouvrir hors connexion. Quatre graisses
   latines : 31 Ko en tout, moins qu'une seule photo de produit.
   « font-display: swap » : le texte s'affiche tout de suite dans la
   police du téléphone, puis bascule. Mieux vaut un texte lisible
   aussitôt qu'un écran blanc le temps du chargement. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url(polices/poppins-400.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url(polices/poppins-500.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url(polices/poppins-600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url(polices/poppins-700.woff2) format('woff2')}

:root{
  /* LE BLEU DE L'ICÔNE, et les nuances qui en descendent. Chacune garde
     la clarté de la nuance de la DA qu'elle remplace — donc les mêmes
     contrastes — et prend la couleur que la tuile de l'icône a à cette
     clarté, le long de sa diagonale : le bleu principal tombe au milieu
     de la tuile, les plus claires éclaircissent son bleu le plus clair,
     la plus sombre assombrit son plus sombre (voir le README).
     Les ombres reprennent --bleu et --bleu-900 en rgba(…) : elles
     changent avec eux. */
  --bleu-900:#091A51;
  --bleu-800:#102A7C;
  --bleu-700:#1A3B98;
  --bleu:#2550B7;
  --bleu-400:#3B76F4;
  --bleu-300:#749EF8;
  --bleu-100:#D5E2FD;
  --bleu-50:#ECF2FE;

  /* L'ORANGE DE LA DA, et le texte qu'il porte : BLANC, comme sur la
     DA corrigée — ses trois boutons, sa pastille de remise, sa cloche.

     CE N'EST PAS LE CHOIX LE PLUS LISIBLE, et il faut le savoir : blanc
     sur cet orange donne 2,36:1, sous le seuil des règles
     d'accessibilité ; le texte sombre de la DA y donnait 6,21:1, et la
     version précédente l'employait pour cette raison. La marque a
     tranché pour le blanc. Ce jeton est le seul endroit à changer pour
     revenir au sombre : « #1F2937 », et tous les composants orange
     suivent.

     En TEXTE sur fond clair, c'est l'orange foncé — l'orange vif y
     tomberait au même 2,36:1. */
  --orange:#FF8A00;
  --orange-texte:#FFFFFF;
  --orange-fonce:#A85800;
  --orange-clair:#FFF1DE;
  --ambre:#FFA808;
  --ambre-clair:#FFF3DE;

  --rouge:#D92D20;
  --rouge-fonce:#B42318;
  --rouge-clair:#FEE4E2;
  --vert:#0F9D58;
  --vert-clair:#E4F5EC;
  --wa:#1FAF56;

  /* LE TEXTE ET LE FOND DE LA DA. */
  --encre:#1F2937;
  --encre-douce:#4B5563;
  --encre-tres-douce:#9AA3AF;
  --trait:#E3E8EF;
  --fond:#F5F7FA;
  --blanc:#FFFFFF;

  --ombre:0 12px 30px -18px rgba(9,26,81,.55);
  --ombre-forte:0 20px 45px -20px rgba(9,26,81,.6);
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  /* Poppins d'abord ; la police du téléphone tant qu'elle charge, et
     pour les alphabets qu'elle ne couvre pas. */
  --police:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --barre-h:66px;
  --safe-b:max(env(safe-area-inset-bottom,0px), 8px);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--police);
  background:var(--fond);
  color:var(--encre);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{margin:0;line-height:1.25}

.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-sm{width:17px;height:17px}
.ic-lg{width:26px;height:26px}

/* ---------- Barre supérieure ---------- */
.topbar{
  /* BLANC, comme la DA. Le dégradé bleu foncé d'avant avalait le
     mot-symbole — dont le « Bizz » est bleu — et forçait tout ce que
     l'en-tête porte à s'écrire en blanc. Sur fond clair, la marque
     reste elle-même et le titre se lit à 13,7:1. */
  position:sticky;top:0;z-index:30;
  background:var(--blanc);
  color:var(--encre);
  padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 12px;
  border-bottom:1px solid var(--trait);
}
.topbar-ligne{display:flex;align-items:center;gap:12px;min-height:40px}
/* LE TITRE D'ÉCRAN EN BLEU NUIT, comme « Catégories », « Nos
   boutiques » ou « Mon panier » sur la DA : plus sombre que le bleu
   des titres de section, pour que l'écran et ses rubriques ne se
   confondent pas. */
.topbar h1{font-size:20px;font-weight:700;letter-spacing:-.3px;color:var(--bleu-900);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .sous{font-size:12.5px;color:var(--encre-douce);margin-top:2px}

/* ---------- L'en-tête d'une boutique, sur deux lignes ----------
   La première ne porte que le retour et les boutons ; l'enseigne a
   toute la seconde. Voir « entete » dans ui.js : sur une seule ligne,
   il restait cent vingt pixels pour le nom. */
.topbar-ligne-outils{gap:8px}
.topbar-vide{flex:1;min-width:0}
.topbar-enseigne{
  display:flex;align-items:center;gap:11px;
  margin-top:8px;min-width:0;
}
.topbar-enseigne-mots{flex:1;min-width:0}
/* Le nom ne se coupe QUE s'il est vraiment trop long — et il a
   désormais toute la largeur avant d'en arriver là. */
.topbar-enseigne h1{
  font-size:19px;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Le slogan EN DESSOUS, sur une seule ligne. Sans « nowrap » il se
   pliait sur quatre lignes et poussait tout l'écran vers le bas ;
   une description de boutique peut faire deux cents caractères. */
.topbar-enseigne .sous{
  margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.topbar-actions{display:flex;gap:6px;align-items:center}
.topbar-logo{flex:1;min-width:0}
.topbar-slogan{
  margin-top:10px;
  background:var(--orange);
  color:var(--orange-texte);
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  text-align:center;
  padding:7px 10px;
  border-radius:9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.btn-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;border:0;
  /* Sur l'en-tête blanc, un bouton translucide ne se voyait plus. */
  background:var(--fond);color:var(--encre);
}
.btn-ic:active{transform:scale(.94)}
/* DANS L'EN-TÊTE, DES ICÔNES NUES ET BLEUES, comme la DA : le retour,
   la cloche, le panier. Les ronds gris d'avant faisaient quatre
   boutons côte à côte, et un en-tête chargé de boutons se lit comme
   une barre d'outils, pas comme une vitrine. La cible tactile garde
   ses 38 px : c'est le fond qui disparaît, pas la zone du doigt. */
.topbar .btn-ic{background:transparent;color:var(--bleu)}
.topbar .btn-ic .ic{width:24px;height:24px;stroke-width:1.9}
/* Le compte, sur son propre écran : allumé comme l'onglet qu'il était. */
.topbar .btn-compte.actif{background:var(--bleu-50)}
.topbar .btn-compte.actif .ic{fill:currentColor}
/* Le logo de la boutique, à gauche de son nom. */
.topbar-vignette{
  flex:none;width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;overflow:hidden;
  box-shadow:0 0 0 2px rgba(255,255,255,.35);
}
.topbar-vignette-photo{background:#fff}
.topbar-vignette img{width:100%;height:100%;object-fit:cover}
.topbar-vignette .ic{width:21px;height:21px}

/* ---------- Logo ---------- */
/* ---------- Le mot-symbole ---------- */
/* Écrit, pas dessiné : net à toutes les tailles, et rien à charger. */
.logo-mot{
  display:inline-block;position:relative;
  font-weight:700;font-size:26px;line-height:1;letter-spacing:-.01em;
  padding-bottom:9px;white-space:nowrap;
}
.logo-bizz{color:var(--bleu)}
.logo-oo{color:var(--orange)}
/* Les deux points, sous le mot : ils sont au logo ce que les roues
   sont au chariot de l'icône. */
.logo-points{
  position:absolute;left:.09em;bottom:1px;display:flex;gap:.16em;
}
.logo-points i{width:.17em;height:.17em;border-radius:50%;display:block}
.logo-points i:first-child{background:var(--bleu)}
.logo-points i:last-child{background:var(--orange)}
/* Sur un fond sombre, le bleu du mot disparaîtrait. */
.logo-mot.clair .logo-bizz,
.logo-mot.clair .logo-points i:first-child{color:#fff;background:#fff}
.logo-mot.clair .logo-bizz{background:none;color:#fff}
/* DEUX LIGNES AU PLUS. Une seule ne suffisait pas : sur un téléphone
   de 320 px il ne reste que 106 px entre le bord et les boutons, et
   « Toutes vos boutiques » y était déjà coupé. Au-delà de deux lignes
   on s'arrête — la barre du haut porte « --haut-topbar », et tout ce
   qui se fige dessous descend avec elle. */
.logo-sous{
  font-size:10.5px;font-weight:600;color:var(--encre-douce);
  letter-spacing:.01em;margin-top:3px;line-height:1.25;
  max-width:100%;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* « max-width:100% » RETIENT LE SLOGAN. Un « inline-flex » se dimensionne
   sur son contenu et déborde son parent sans rien demander : le
   « min-width:0 » plus bas ne servait à rien, la coupure du slogan non
   plus, et un slogan un peu long faisait défiler la page de côté.
   Mesuré à 390 px avec un slogan de vingt mots. */
.logo{display:inline-flex;align-items:center;gap:9px;min-width:0;max-width:100%}
/* AVEC UN SLOGAN, le logo prend toute la place qu'on lui laisse.
   Sans cela, « logo-textes » se dimensionne sur le mot « BIZZOO » —
   116 px — et le slogan n'avait pas le droit d'être plus large que
   lui : vingt caractères, et le reste coupé. La place réelle, entre le
   bord de l'écran et les boutons, en tient une trentaine. */
.logo-avec-sous{display:flex;width:100%}
.logo-avec-sous .logo-textes{flex:1;min-width:0}
.marque{flex:none;display:block;object-fit:contain}
.logo-textes{display:flex;flex-direction:column;min-width:0;line-height:1.05}

/* ---------- Zone de vue ---------- */
.vue{
  padding:16px 16px calc(var(--barre-h) + var(--safe-b) + 28px);
  max-width:720px;margin:0 auto;
  outline:none;
}
.vue > * + *{margin-top:14px}

/* ---------- Barre d'onglets ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  /* Autant de colonnes que d'onglets visibles : l'onglet « Contact »
     disparaît quand BIZZOO n'a pas de numéro, et la barre se
     répartit sans qu'aucun compte ne soit écrit en dur. */
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  align-items:center;
  height:calc(var(--barre-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--trait);
}
/* QUATRE ONGLETS SUR BIZZOO, CINQ DANS UNE BOUTIQUE : Accueil,
   Catégories, Favoris, Recherche, et « Retour à Bizzoo ». Il y en a eu
   jusqu'à six, le texte descendait alors à 9,5 px pour tenir : à cinq,
   il garde sa taille. */
.tabbar a{
  /* CALÉS EN HAUT, et non centrés : « Retour à Bizzoo » tient sur deux
     lignes, et centré, son logo montait au-dessus des autres icônes. */
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;
  height:100%;font-size:11px;font-weight:500;color:var(--encre-tres-douce);
  min-width:0;padding:11px 2px 0;
}
.tabbar a[hidden]{display:none}
/* Le nom de l'enseigne n'apparaît que dans le menu latéral, sur
   ordinateur : sur un téléphone il ferait une septième colonne. */
.tabbar-marque{display:none}
/* Le logo BIZZOO tient la place d'une icône : c'est lui qui dit où l'on
   revient, mieux qu'un dessin de plus. */
.tab-logo{width:21px;height:21px;border-radius:6px;object-fit:cover;flex:none}
/* « Retour à Bizzoo » ne tient pas sur une ligne au cinquième d'un
   téléphone : il passe sur deux, « Retour à » puis « Bizzoo » (l'espace
   insécable les garde ensemble), sans rien couper. */
.tabbar a.tab-bizzoo span{
  white-space:normal;text-overflow:clip;text-align:center;line-height:1.12;
}
/* Cinq onglets sur un téléphone de 320 px : 64 px chacun, et
   « Catégories » s'écourtait en « Catégori… ». Un point de moins et
   les marges à 1 px : il tient en entier. */
@media (max-width:340px){
  body.en-boutique .tabbar a{font-size:10px;padding-left:1px;padding-right:1px}
}

/* ---------- Contact, en bouton flottant ----------
   Dans une boutique, la barre du bas est pleine. « Contact » en sort et
   se pose ici : au même endroit sur tous les écrans de la boutique, à
   portée du pouce droit, et au-dessus de la barre pour ne rien couvrir
   de ce qu'on lit. */
.contact-flottant{
  position:fixed;right:16px;z-index:45;
  bottom:calc(var(--barre-h) + var(--safe-b) + 16px);
  display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;
  background:var(--wa);color:#fff;
  box-shadow:0 12px 26px -8px rgba(31,175,86,.75);
}
.contact-flottant[hidden]{display:none}
.contact-flottant .ic{width:27px;height:27px;stroke-width:1.9}
.contact-flottant:active{transform:scale(.94)}
/* Six onglets sur un écran étroit : « Catégories » doit tenir sans
   pousser ses voisins, et s'écourter plutôt que déborder. */
.tabbar a span{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tabbar .ic{width:23px;height:23px}
/* L'ONGLET ACTIF EST PLEIN ET BLEU, les autres sont des contours gris :
   c'est ce que montre la DA, et c'est la forme — pas seulement la
   couleur — qui dit où l'on est. Un daltonien distingue un dessin plein
   d'un dessin creux ; il ne distingue pas toujours deux teintes. */
.tabbar a.actif{color:var(--bleu);font-weight:600}
.tabbar a.actif .ic{stroke-width:2;fill:currentColor}

/* ---------- Les écrans de parcours, sans barre du bas ----------
   LA DA NE MONTRE LA BARRE QUE SUR LES ÉCRANS OÙ L'ON CIRCULE —
   Accueil, Catégories, Nos boutiques. La fiche d'une boutique, celle
   d'un produit, le panier, le paiement et la confirmation n'en ont pas :
   ils ont un retour en haut, et UNE action en bas. Deux barres fixes
   l'une sur l'autre mangeraient un tiers d'un petit écran. */
body.sans-onglets .tabbar{display:none}
body.sans-onglets .vue{padding-bottom:calc(var(--safe-b) + 28px)}
body.sans-onglets.avec-action .vue{padding-bottom:calc(var(--safe-b) + 108px)}
body.sans-onglets .contact-flottant{bottom:calc(var(--safe-b) + 16px)}
body.sans-onglets.avec-action .contact-flottant{bottom:calc(var(--safe-b) + 96px)}
/* LA FICHE PRODUIT GARDE LA BARRE DE SA BOUTIQUE : son action se pose
   au-dessus des onglets, jamais dessus. */
body.avec-action:not(.sans-onglets) .barre-action{
  bottom:calc(var(--barre-h) + var(--safe-b));padding-bottom:12px;
}
body.avec-action:not(.sans-onglets) .vue{
  padding-bottom:calc(var(--barre-h) + var(--safe-b) + 108px);
}
body.avec-action:not(.sans-onglets) .contact-flottant{
  bottom:calc(var(--barre-h) + var(--safe-b) + 96px);
}

/* L'action du bas : « Ajouter au panier », « Passer la commande »,
   « Payer ». Fixée, pour qu'on n'ait pas à la chercher au fond d'une
   longue fiche. */
.barre-action{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:12px 16px calc(var(--safe-b) + 12px);
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  box-shadow:0 -10px 28px -18px rgba(9,26,81,.45);
}
.barre-action-dedans{max-width:720px;margin:0 auto;display:flex;align-items:center;gap:12px}
.barre-action .btn{flex:1}

/* ---------- Cartes & boutons ---------- */
.carte{
  background:var(--blanc);
  border-radius:var(--r);
  padding:16px;
  box-shadow:var(--ombre);
}
/* Une carte peut être un lien : « a » resterait en ligne, son fond ne
   couvrant que des bouts de ligne (le piège de la carte Stock de
   l'admin). Toute carte-lien est un bloc ; « :where » laisse aux
   variantes en flex, plus bas, le dernier mot. */
:where(a).carte{display:block}
/* Les icônes sont des « svg », donc des blocs : sans cette ligne, une
   icône en tête de titre se posait SEULE au-dessus du texte. */
.carte-titre{
  display:flex;align-items:center;gap:6px;
  font-size:15px;font-weight:700;margin-bottom:12px;
}

.btn{
  /* BOUTON PRINCIPAL DE LA DA : bleu plein, texte blanc (7,23:1).
     EN PILULE, comme les trois boutons de la DA corrigée : les coins
     de 13 px d'avant en faisaient des rectangles adoucis, que la
     maquette ne montre nulle part. */
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:10px 22px;border:0;border-radius:999px;
  background:var(--bleu);
  color:#fff;font-weight:600;font-size:15px;
  box-shadow:0 10px 22px -12px rgba(37,80,183,.6);
  width:100%;
}
.btn:active{transform:scale(.98)}
.btn-clair{
  /* BOUTON SECONDAIRE DE LA DA : fond blanc, trait bleu, texte bleu. */
  background:var(--blanc);color:var(--bleu);box-shadow:none;
  border:1.5px solid var(--bleu);
}
/* BOUTON ORANGE DE LA DA : l'action qui ACHÈTE — « Ajouter au panier »
   et « Passer la commande » depuis le panier. Partout ailleurs, même
   pour payer, la DA prend le bleu.

   TEXTE BLANC, COMME LA DA. Blanc sur cet orange donne 2,36:1 : c'est
   moins que ce que demandent les règles d'accessibilité, et la version
   précédente écrivait en sombre pour cette raison. La DA corrigée
   redonne du blanc, c'est la marque qui tranche. On compense ce qui
   peut l'être sans toucher à la couleur : texte GRAS et un peu plus
   grand, qui se lisent mieux au soleil qu'un texte mi-gras. */
.btn-orange{
  background:var(--orange);color:var(--orange-texte);font-weight:700;font-size:15.5px;
  box-shadow:0 10px 22px -12px rgba(255,138,0,.7);
}
/* LIEN TEXTE DE LA DA : souligné, bleu, sans fond ni cadre. */
.lien-texte{
  color:var(--bleu);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;
}
.btn-danger{background:linear-gradient(135deg,var(--rouge),var(--rouge-fonce));box-shadow:0 10px 22px -10px rgba(230,35,41,.6)}
.btn-wa{background:linear-gradient(135deg,#2BC665,var(--wa));box-shadow:0 10px 22px -10px rgba(31,175,86,.7)}
.btn-rangee{display:flex;flex-direction:column;gap:10px}

/* ---------- Sections ---------- */
.section-titre{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:20px 2px 10px;
}
.vue > .section-titre:first-child{margin-top:2px}
/* LES RUBRIQUES EN BLEU, comme « Nos boutiques partenaires » et
   « Méthode de paiement » sur la DA. Le titre de l'écran, lui, est en
   bleu nuit : deux teintes pour deux niveaux, sans avoir à grossir. */
.section-titre h2{font-size:16.5px;font-weight:700;letter-spacing:-.2px;color:var(--bleu)}
.section-lien{
  display:inline-flex;align-items:center;gap:2px;
  font-size:12.5px;font-weight:600;color:var(--bleu);
}
/* Un titre de carte qui ouvre une liste à choisir — la méthode de
   paiement — prend le bleu des rubriques. Les autres restent sombres. */
.carte-titre-bleu{color:var(--bleu)}

.aide{font-size:12.5px;color:var(--encre-tres-douce);line-height:1.5}
/* « a{color:inherit} » rend les liens invisibles dans un texte d'aide :
   « Se connecter » y ressemblait à du gris ordinaire, et personne ne
   pensait à appuyer dessus. Un lien doit se voir. */
.aide a{color:var(--bleu);font-weight:600;text-decoration:underline;
  text-underline-offset:2px}

.note-hors-ligne{
  display:flex;align-items:center;gap:8px;
  background:#FFF6E5;border:1px solid #F5DEB0;color:#8A5B00;
  font-size:12.5px;font-weight:600;
  padding:10px 12px;border-radius:var(--r-sm);
}

/* ---------- Slider : images de la boutique puis produits en avant ---------- */
.slider{position:relative}
.slider-piste{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  border-radius:var(--r-lg);
  box-shadow:var(--ombre-forte);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.slider-piste::-webkit-scrollbar{display:none}
.slide{
  position:relative;
  flex:0 0 100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  aspect-ratio:16/10;
  max-height:300px;
  background:linear-gradient(135deg,var(--bleu-400),var(--bleu-800));
  overflow:hidden;
  display:flex;
}
.slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Une vidéo occupe l'écran comme une photo ; le noir derrière évite le
   clignotement blanc avant la première image. */
video.slide-img{background:#000}
/* Produit sans photo : le logo en filigrane plutôt qu'un cadre vide. */
.slide-motif{
  position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;
  opacity:.35;transform:translateY(-12%) scale(1.15);
}
.slide-voile{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(6,30,60,.86) 0%,rgba(6,30,60,.34) 45%,rgba(6,30,60,0) 70%);
}
.slide-infos{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:14px 16px 16px;
  color:#fff;display:flex;flex-direction:column;gap:4px;
}
.slide-badge{position:absolute;top:12px;left:12px;z-index:2}
.slide-nom{
  font-size:17.5px;font-weight:800;letter-spacing:-.2px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.slide-prix{font-size:15.5px;font-weight:800;color:#FFD7A6}
.slide-prix s{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.65);margin-left:6px}
.slide-cta{
  display:inline-flex;align-items:center;gap:4px;align-self:flex-start;
  margin-top:6px;padding:7px 12px;border-radius:999px;
  background:var(--orange);color:var(--orange-texte);font-size:12.5px;font-weight:700;
}
.slider-points{
  display:flex;justify-content:center;gap:7px;
  margin-top:10px;
}
.slider-points button{
  width:8px;height:8px;border-radius:50%;border:0;padding:0;
  background:#C6D4E6;transition:all .25s;
}
.slider-points button.actif{background:var(--bleu-700);width:22px;border-radius:999px}

/* ---------- Catégories ---------- */
/* ---------- Boutiques (les secteurs de l'enseigne) ---------- */
/* TROIS DE FRONT. Le plus petit téléphone commande : à 320 px la
   colonne fait 288, et trois cartes avec deux écarts de 8 px n'en
   laissent que 90,7 chacune — 74,7 une fois les marges intérieures
   retirées. Le rond de 64 px y touchait les deux bords ; il descend
   donc à 48, et le reste suit. L'écart de 8 px est celui des
   catégories : deux grilles côte à côte sur le même écran ne peuvent
   pas respirer différemment. */
.bou-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
/* « min-width:0 » N'EST PAS DÉCORATIF. Une case de grille vaut par
   défaut « min-width:auto » : un nom d'un seul long mot — INFORMATIQUE
   — élargit sa colonne au lieu d'être coupé, les trois cartes passent
   de 91 à 143 px et la page se met à défiler de côté. Mesuré à 320 px
   avant d'écrire cette ligne. */
.bou-carte{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  min-width:0;
  background:var(--blanc);border-radius:var(--r);
  padding:14px 8px 12px;text-align:center;
  box-shadow:var(--ombre);
}
.bou-carte:active{transform:scale(.97)}
.bou-rond{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:48px;height:48px;border-radius:16px;
  background:var(--bleu);color:#fff;overflow:hidden;
}
.bou-rond .ic{width:24px;height:24px}
.bou-rond-photo{background:var(--bleu-50)}
.bou-rond img{width:100%;height:100%;object-fit:cover}
/* Deux lignes réservées d'avance : sans cela, une boutique au nom
   court fait une carte plus basse que sa voisine, et la rangée se lit
   comme un défaut d'alignement. C'est la leçon des catégories. */
.bou-carte-nom{
  font-size:12px;font-weight:800;line-height:1.25;color:var(--encre);
  min-height:2.5em;max-width:100%;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Le secteur tient sur une ligne : « High-Tech & Électronique » ne
   rentre pas dans 75 px, et le couper vaut mieux que le replier. */
.bou-carte-sous{
  font-size:10px;color:var(--encre-tres-douce);line-height:1.3;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* La vignette d'une boutique, en petit, dans une ligne d'infos. */
.ligne-info .bou-rond{width:38px;height:38px;border-radius:13px}
.ligne-info .bou-rond .ic{width:19px;height:19px}

/* Bandeau « vous êtes dans… », avec le retour vers les autres boutiques. */
.bou-bandeau{
  display:flex;align-items:center;gap:11px;
  padding:12px 14px;border-radius:var(--r);
  background:var(--blanc);box-shadow:var(--ombre);
  font-size:13px;color:var(--encre-douce);
}
.bou-bandeau .bou-rond{width:40px;height:40px;border-radius:14px}
.bou-bandeau .bou-rond .ic{width:20px;height:20px}
.bou-bandeau strong{display:block;font-size:14px;color:var(--encre)}
/* La pastille de la boutique est un carré de 40 px — mais elle est,
   elle aussi, un « span » enfant direct. Sans cette exception elle
   héritait du « flex:1 », dont le « flex-basis:0 » l'emportait sur sa
   largeur : le rond devenait un long rectangle bleu. */
.bou-bandeau > span:not(.bou-rond){flex:1;min-width:0}
.bou-bandeau > .ic{flex:none;color:var(--encre-tres-douce)}

/* QUATRE DE FRONT, donc les huit de l'accueil sur DEUX RANGÉES. À trois
   colonnes elles en prenaient trois, dont une à moitié vide — et une
   rangée incomplète se lit comme un oubli. L'écart passe à 8 px : à
   390 px, quatre cartes et trois écarts doivent tenir dans 358. */
.cat-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cat-carte{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--blanc);border-radius:var(--r);
  padding:11px 5px 10px;text-align:center;
  box-shadow:var(--ombre);
}
.cat-carte:active{transform:scale(.97)}
.cat-rond{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border-radius:13px;
  background:linear-gradient(135deg,var(--bleu-50),var(--bleu-100));
  color:var(--bleu-700);
}
/* La pastille de l'écran « Catégories » : RONDE, et de la couleur que
   l'enseigne a donnée au secteur. Le carré arrondi bleu ci-dessus sert
   ailleurs, sur les vignettes de l'accueil. */
.cat-rond-couleur{border-radius:50%;background:var(--bleu-700);color:#fff}
.cat-rond-couleur .ic{width:18px;height:18px;stroke-width:2}
/* Le trait s'épaissit à mesure que l'icône rétrécit : à 1,9 sur 18 px
   elle devenait pâle, et une icône pâle sur une pastille de couleur
   ne se lit plus au soleil. */
/* DEUX LIGNES RÉSERVÉES, toujours. « Auto & Moto » tient sur une ligne,
   « Mode & Vêtements » sur deux : sans hauteur fixe, le « à découvrir »
   de l'un se posait plus haut que celui de l'autre, et la rangée
   paraissait de travers. On réserve la place des deux lignes même
   quand une suffit. */
.cat-nom{font-size:11px;font-weight:700;line-height:1.2;
  min-height:2.4em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat-compte{font-size:9.5px;color:var(--encre-tres-douce);font-weight:600}

.cat-ligne{display:flex;align-items:center;gap:12px;color:inherit}
.cat-ligne + .cat-ligne{margin-top:10px}
.cat-ligne-corps{flex:1;min-width:0}
.cat-ligne-nom{display:block;font-size:14.5px;font-weight:700}
.cat-ligne-sous{
  display:block;font-size:11.5px;color:var(--encre-tres-douce);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cat-ligne-compte{
  flex:none;min-width:26px;height:26px;padding:0 8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bleu-50);color:var(--bleu-800);
  border-radius:999px;font-size:12px;font-weight:800;
}
.cat-ligne > .ic-sm{color:var(--encre-tres-douce)}
/* Sur l'accueil de l'enseigne, la sous-ligne d'un rayon nomme sa
   boutique : c'est ce qu'on veut savoir avant de cliquer. */
.cat-ligne-boutique{display:flex;align-items:center;gap:5px;color:var(--bleu-700);font-weight:700}
.cat-ligne-boutique .ic{width:13px;height:13px;stroke-width:2;flex:none}
.cat-ligne-boutique > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Puces ---------- */
.puces{display:flex;gap:8px;overflow-x:auto;padding:2px;scrollbar-width:none}
.puces::-webkit-scrollbar{display:none}
.puces-pliees{flex-wrap:wrap;overflow:visible}
.puce{
  flex:none;display:inline-flex;align-items:center;
  padding:8px 14px;border-radius:999px;
  background:var(--blanc);border:1px solid var(--trait);
  font-size:12.5px;font-weight:700;color:var(--encre-douce);
}
.puce.active{background:var(--bleu);border-color:var(--bleu);color:#fff}

/* Sous-catégories d'un rayon : elles restent sous la barre du haut
   pendant qu'on fait défiler les produits, à portée du pouce. Le
   bandeau va d'un bord à l'autre pour que rien ne passe derrière. */
.puces-collees{
  position:sticky;
  top:calc(var(--haut-topbar, 76px) - 1px);
  z-index:20;
  /* Le -16px du haut annule le retrait de la vue : la rangée est déjà
     à sa place définitive avant même qu'on défile, elle ne saute pas. */
  margin:-16px -16px 0;
  padding:12px 16px;
  background:var(--fond);
  border-bottom:1px solid var(--trait);
}

/* ---------- Prix & badges ---------- */
.prix{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
/* LE PRIX EST BLEU, comme « 299 000 FCFA » sur la fiche produit de la
   DA. L'orange-brun d'avant le confondait avec la pastille de remise
   posée juste à côté : deux choses orange, dont une seule est un prix. */
.prix-actuel{font-size:14.5px;font-weight:700;color:var(--bleu)}
.prix-grand .prix-actuel{font-size:23px}
.prix-ancien{font-size:11.5px;color:var(--encre-tres-douce)}
.prix-grand .prix-ancien{font-size:14px}

.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 9px;border-radius:999px;
  font-size:11px;font-weight:700;
}
.badge-avant{background:var(--ambre-clair);color:var(--orange-fonce)}
/* LA REMISE : pilule orange, texte blanc — celle de la DA. Même choix
   que pour le bouton orange, et même compensation : le chiffre est gras. */
.badge-promo{background:var(--orange);color:var(--orange-texte);font-weight:800}
.badge-flash{background:var(--ambre);color:var(--bleu-900)}
/* Le prix d'un revendeur n'est pas une promotion : il ne crie pas comme
   une affiche de soldes, il dit simplement à qui ce prix appartient. */
.badge-revendeur{background:var(--vert-clair);color:var(--vert)}
.flash-echeance{
  display:flex;align-items:center;gap:7px;
  margin:10px 0 2px;padding:9px 12px;border-radius:var(--r-sm);
  background:var(--ambre-clair);color:var(--orange-fonce);
  font-size:12.5px;font-weight:700;
}
.badge-ok{background:var(--vert-clair);color:var(--vert)}

/* Les trois états d'un produit : le vert rassure, le rouge qui bat
   appelle l'œil, le bleu informe sans alarmer. */
.badge-disponible{background:var(--vert-clair);color:var(--vert)}
.badge-rupture{
  background:var(--rouge);color:#fff;
  animation:clignoter 1.1s ease-in-out infinite;
}
.badge-commande{background:var(--bleu-50);color:var(--bleu-700)}
/* Un réassort en route : l'ambre de la charte, qui dit l'attente
   sans alarmer comme le rouge de la rupture. */
.badge-approvisionnement{background:var(--ambre-clair);color:var(--orange-fonce)}
/* LE SUIVI D'UNE COMMANDE SE LIT EN QUATRE PALIERS, et quatre paliers
   demandent quatre couleurs : « Payé » bleu clair (rien à faire
   encore), « Colis préparé » ambre (la boutique s'en occupe),
   « Livraison en cours » bleu profond (ça bouge), « Livré » vert.
   Deux paliers de la même teinte, et la progression ne se lit plus. */
.badge-livraison{background:var(--bleu-700);color:#fff}
.appro-echeance{
  display:flex;align-items:center;gap:7px;
  margin:10px 0 2px;padding:9px 12px;border-radius:var(--r-sm);
  background:var(--ambre-clair);color:var(--orange-fonce);
  font-size:12.5px;font-weight:700;
}
/* Les dernières pièces, et dans le panier ce qui a dû bouger. */
.stock-bas{
  display:flex;align-items:center;gap:7px;
  margin:10px 0 2px;padding:9px 12px;border-radius:var(--r-sm);
  background:var(--orange-clair);color:var(--orange-fonce);
  font-size:12.5px;font-weight:700;
}
.pa-ligne-stock{
  display:flex;align-items:center;gap:6px;
  margin-top:6px;font-size:12px;font-weight:700;color:var(--orange-fonce);
}
.pa-ligne-stock.pa-ligne-rupture{color:var(--rouge)}
@keyframes clignoter{
  0%,100%{opacity:1}
  50%{opacity:.35}
}
/* Un clignotement peut gêner : on le retire pour qui l'a demandé. */
@media (prefers-reduced-motion:reduce){
  .badge-rupture{animation:none}
}

/* ---------- Cartes produit ---------- */
.p-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.p-carte{
  display:flex;flex-direction:column;
  background:var(--blanc);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--ombre);
}
.p-carte:active{transform:scale(.98)}
.p-carte-img{
  position:relative;display:block;aspect-ratio:1/1;
  background:var(--bleu-50);overflow:hidden;min-height:0;
}
/* Photo posée par-dessus le cadre : c'est le cadre qui commande la
   taille, jamais l'inverse (sans quoi une photo haute l'étirerait). */
.p-carte-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-carte-badges{position:absolute;top:8px;left:8px;z-index:2;display:flex;gap:5px;flex-wrap:wrap}
.img-absente{display:flex;align-items:center;justify-content:center;opacity:.5}
.p-carte-corps{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px}
.p-carte-nom{
  font-size:13px;font-weight:700;line-height:1.3;min-height:2.6em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.p-carte-cat{font-size:11px;color:var(--encre-tres-douce);font-weight:600}
/* La boutique d'où vient le produit, en tête de carte : c'est ce
   qu'on cherche d'abord quand le résultat vient d'ailleurs. */
.p-carte-boutique{
  display:flex;align-items:center;gap:4px;
  font-size:10.5px;font-weight:700;letter-spacing:.02em;
  color:var(--bleu-700);
  text-transform:uppercase;
}
.p-carte-boutique span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-carte-boutique .ic{width:13px;height:13px;stroke-width:2}

.p-rangee{
  display:flex;gap:12px;overflow-x:auto;
  padding:2px 2px 6px;margin:0 -16px;padding-left:16px;padding-right:16px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.p-rangee::-webkit-scrollbar{display:none}

/* ---------- Publicité de BIZZOO ----------
   Des affiches plus larges que hautes : une publicité se regarde en
   entier, elle ne se recadre pas comme une vignette de produit. */
.pub-rangee{
  display:flex;gap:12px;overflow-x:auto;
  scroll-snap-type:x proximity;
  padding:2px 2px 6px;margin:0 -16px;padding-left:16px;padding-right:16px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.pub-rangee::-webkit-scrollbar{display:none}
.pub-carte{
  flex:0 0 272px;scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:var(--blanc);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--ombre);color:inherit;
}
a.pub-carte:active{transform:scale(.98)}
.pub-cadre{
  position:relative;display:block;aspect-ratio:16/10;
  background:linear-gradient(135deg,var(--bleu-400),var(--bleu-800));
  display:flex;align-items:center;justify-content:center;
}
.pub-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.pub-motif{display:flex;align-items:center;justify-content:center;opacity:.6}
.pub-pied{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px}
.pub-titre{font-size:13.5px;font-weight:700;line-height:1.3}
.pub-prix{font-size:14px;font-weight:800;color:var(--orange-fonce)}
.pub-boutique{
  display:flex;align-items:center;gap:4px;
  font-size:10.5px;font-weight:700;letter-spacing:.02em;
  color:var(--bleu-700);text-transform:uppercase;
}
.pub-boutique .ic{width:13px;height:13px;stroke-width:2;flex:none}
.pub-boutique > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-lien{
  display:inline-flex;align-items:center;gap:2px;margin-top:2px;
  font-size:12.5px;font-weight:700;color:var(--bleu-700);
}
.p-mini{
  flex:0 0 150px;display:flex;flex-direction:column;gap:6px;
  background:var(--blanc);border-radius:var(--r);
  padding:10px;box-shadow:var(--ombre);
}
.p-mini:active{transform:scale(.97)}
.p-mini-img{
  position:relative;display:block;aspect-ratio:1/1;border-radius:var(--r-sm);
  overflow:hidden;background:var(--bleu-50);min-height:0;
}
.p-mini-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-mini-nom{
  font-size:12.5px;font-weight:700;line-height:1.3;min-height:2.6em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---------- Fiche produit ---------- */
/* LA PHOTO SUR BLANC, SANS CADRE NI OMBRE, comme la DA : le produit
   posé sur la page, pas dans une boîte. Carrée et jamais rognée. */
.fiche-img{
  position:relative;
  aspect-ratio:1/1;width:100%;
  background:var(--blanc);
  border-radius:var(--r-lg);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:0;
}
/* Photo entière visible (jamais rognée) dans un cadre toujours carré. */
.fiche-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.fiche-img.img-absente{background:linear-gradient(135deg,var(--bleu-50),var(--bleu-100))}
.fiche-carrousel{
  display:flex;overflow-x:auto;gap:0;
  scroll-snap-type:x mandatory;
  border-radius:var(--r-lg);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.fiche-carrousel::-webkit-scrollbar{display:none}
.fiche-carrousel .fiche-img{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;border-radius:0;box-shadow:none}
.fiche-points{margin-top:10px}
/* Le nom, le prix, la note : sans carte autour, comme sur la DA. */
.fiche-infos{display:flex;flex-direction:column;gap:9px;padding:4px 2px 2px}
.fiche-badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fiche-nom{font-size:19px;font-weight:700;letter-spacing:-.2px;line-height:1.3;color:var(--encre)}
.fiche-prix-ligne{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fiche-prix-ligne .badge-promo{font-size:12px;padding:4px 10px}
.fiche-ref{font-size:12px;color:var(--encre-tres-douce);font-weight:600}
/* LES SPÉCIFICATIONS DE LA DA : la clé en gris à gauche, la valeur à
   droite, une ligne par caractéristique. */
.fiche-specs{
  display:grid;grid-template-columns:minmax(92px,max-content) 1fr;
  gap:9px 16px;margin:0;font-size:13.5px;
}
.fiche-specs dt{color:var(--encre-douce)}
.fiche-specs dd{margin:0;color:var(--encre);font-weight:500;overflow-wrap:anywhere}
/* Le cœur dans l'en-tête : une icône bleue parmi les autres, et plus
   une pastille flottante. Plein et orange quand le produit est gardé. */
.topbar .coeur-entete{
  position:static;width:38px;height:38px;border:0;border-radius:12px;
  background:transparent;backdrop-filter:none;color:var(--bleu);
}
.topbar .coeur-entete .ic{width:24px;height:24px;stroke-width:1.9}
/* Le compteur de la barre du bas : le « − 1 + » gris de la DA. */
.pa-compteur-da{
  flex:none;background:var(--fond);border-radius:999px;padding:3px;
}
.pa-compteur-da button{background:var(--blanc)}
.fiche-reference{
  font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--encre-tres-douce);margin:-4px 0 2px;
}
.fiche-chemin{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.fiche-description p{margin:0 0 9px;font-size:14px;line-height:1.6;color:var(--encre-douce)}
.fiche-description p:last-child{margin-bottom:0}

.boutique-photos{
  display:flex;gap:10px;overflow-x:auto;
  padding:2px;margin:0 -4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.boutique-photos::-webkit-scrollbar{display:none}
.boutique-photos img{
  flex:0 0 168px;height:126px;object-fit:cover;
  border-radius:var(--r-sm);background:var(--bleu-50);
}

.reseaux{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.reseau{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  width:74px;text-align:center;
  font-size:11px;font-weight:700;color:var(--encre-douce);
}
.reseau:active{transform:scale(.95)}
.reseau-rond{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:18px;color:#fff;
  box-shadow:var(--ombre);
}
.reseau-rond .ic{width:26px;height:26px}
.reseau-facebook .reseau-rond{background:#1877F2}
.reseau-instagram .reseau-rond{background:linear-gradient(135deg,#FEDA75,#FA7E1E 30%,#D62976 60%,#962FBF 85%,#4F5BD5)}
.reseau-tiktok .reseau-rond{background:#111}
.reseau-youtube .reseau-rond{background:#FF0000}
.reseau-snapchat .reseau-rond{background:#FFFC00;color:#111}

/* ---------- Vidéo ---------- */
.fiche-video{
  width:100%;max-height:320px;background:#000;
  border-radius:var(--r-sm);display:block;
}
.pastille-video{
  position:absolute;right:8px;bottom:8px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:rgba(8,42,82,.78);color:#fff;
}
.pastille-video .ic-sm{width:15px;height:15px}

/* ---------- Recherche ----------
   LA PILULE DE LA DA : fond gris très clair, trait fin, loupe à
   gauche, coins tout ronds. La même pour le champ où l'on tape et pour
   la porte de l'accueil, qui ne fait que mener à la recherche — les
   deux doivent se reconnaître comme une seule chose. */
.recherche-boite,.recherche-pilule{
  display:flex;align-items:center;gap:10px;
  background:var(--fond);border:1px solid var(--trait);
  border-radius:999px;padding:3px 18px;
  color:var(--encre-tres-douce);
}
.recherche-boite:focus-within{border-color:var(--bleu);background:var(--blanc)}
.recherche-boite input{
  flex:1;border:0;outline:none;background:none;
  min-height:44px;font-size:14.5px;color:var(--encre);
}
.recherche-pilule{min-height:48px;font-size:14px;text-decoration:none}
.recherche-pilule span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recherche-pilule .ic{color:var(--encre-douce)}
.recherche-pilule:active{transform:scale(.99)}

/* ---------- Infos boutique ---------- */
.carte-boutique{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
/* Une boutique porte son nom en toutes lettres ; l'enseigne, son logo. */
.boutique-nom{font-size:19px;font-weight:800;letter-spacing:-.2px;color:var(--encre)}
.boutique-desc{margin:0;font-size:13.5px;line-height:1.55;color:var(--encre-douce)}
.chip-slogan{
  display:inline-block;background:var(--orange);color:var(--orange-texte);
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;
}
.ligne-info{
  display:flex;align-items:center;gap:12px;
  padding:11px 2px;color:inherit;width:100%;
  border:0;background:none;text-align:left;font-size:14px;
}
.ligne-info + .ligne-info{border-top:1px solid var(--trait)}
.ligne-info > span:nth-child(2){flex:1;min-width:0;line-height:1.35}
.ligne-info small{color:var(--encre-tres-douce)}
.ligne-info > .ic-sm{color:var(--encre-tres-douce)}
.rond-wa,.rond-bleu{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:42px;height:42px;border-radius:14px;color:#fff;
}
.rond-wa{background:linear-gradient(135deg,#2BC665,var(--wa))}
.rond-bleu{background:linear-gradient(135deg,var(--bleu-400),var(--bleu-800))}
.carte-contact{display:flex;align-items:center;gap:12px;font-size:13.5px;line-height:1.4}
.carte-contact small{color:var(--encre-tres-douce)}
.carte-contact > .ic-sm{margin-left:auto;color:var(--encre-tres-douce)}
.champ-config{margin-bottom:10px}
.champ-config input{
  width:100%;min-height:46px;
  border:1.5px solid var(--trait);border-radius:12px;
  background:var(--blanc);
  padding:11px 13px;font-size:14px;outline:none;
}
.champ-config input:focus{border-color:var(--bleu)}
.bloc-aide{margin-top:12px;border-top:1px solid var(--trait);padding-top:10px}
.bloc-aide summary{font-size:13px;font-weight:700;color:var(--bleu-800);cursor:pointer}
.bloc-aide p{font-size:13px;line-height:1.55;color:var(--encre-douce);margin:9px 0 0}

/* ---------- Crédit développeur ---------- */
.credit-dev{
  margin-top:12px;padding-top:10px;border-top:1px solid var(--trait);
  font-size:12px;color:var(--encre-tres-douce);line-height:1.6;
}
.credit-dev strong{color:var(--bleu-800)}
.credit-dev a{color:var(--bleu-700);font-weight:700}

/* ---------- États vides & chargement ---------- */
.vide{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;padding:38px 20px;
  color:var(--encre-tres-douce);
}
.vide .ic{width:44px;height:44px;stroke-width:1.3;color:#B9C4D4}
.vide p{margin:4px 0 0;font-size:15px;font-weight:700;color:var(--encre-douce)}
.vide small{font-size:12.5px;line-height:1.5;max-width:280px}
.vide .btn,.vide .btn-clair{width:auto;margin-top:10px}

.chargement{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:60px 20px;color:var(--encre-tres-douce);font-size:13.5px;font-weight:600;
}
.chargement-rond{
  width:34px;height:34px;border-radius:50%;
  border:3.5px solid var(--bleu-100);border-top-color:var(--bleu-700);
  animation:tourner .9s linear infinite;
}
@keyframes tourner{to{transform:rotate(360deg)}}
.btn-ic.tourne .ic{animation:tourner .8s linear infinite}

/* ---------- Toasts ---------- */
.toasts{
  position:fixed;left:16px;right:16px;
  bottom:calc(var(--barre-h) + var(--safe-b) + 14px);
  z-index:60;display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;
}
.toast{
  background:var(--encre);color:#fff;
  font-size:13.5px;font-weight:600;
  padding:11px 18px;border-radius:12px;
  box-shadow:var(--ombre-forte);
  max-width:100%;text-align:center;
}
.toast-ok{background:var(--vert)}
.toast-err{background:var(--rouge-fonce)}

/* ---------- Visionneuse ---------- */
.visionneuse{
  position:fixed;inset:0;z-index:80;
  background:rgba(5,16,31,.94);
  display:flex;align-items:center;justify-content:center;
  /* La marge est portee par chaque vue, pas par le cadre : la piste
     garde ainsi la meme largeur, agrandie ou non, et la photo
     zoomee occupe l ecran en entier. */
}
.visionneuse[hidden]{display:none}
/* z-index : agrandie, la photo passerait par-dessus ces boutons. */
.visionneuse-fermer{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;color:#fff;background:rgba(255,255,255,.15);z-index:1}
.visionneuse-telecharger{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);left:14px;color:#fff;background:rgba(255,255,255,.15);z-index:1}
.visionneuse-telecharger[hidden]{display:none}
.visionneuse-zoom{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:62px;color:#fff;background:rgba(255,255,255,.15);z-index:1}
.visionneuse-zoom.actif{background:rgba(255,255,255,.32)}
.visionneuse-zoom .ic-zoom-moins,.visionneuse-zoom.actif .ic-zoom-plus{display:none}
.visionneuse-zoom.actif .ic-zoom-moins{display:block}


/* ---------- Visionneuse : galerie ---------- */
.visionneuse-piste{
  display:flex;width:100%;height:100%;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  /* Le doigt fait défiler la galerie ; le pincement, lui, est à nous
     (sans quoi c'est toute la page qui grossirait). */
  touch-action:pan-x;
}
/* Photo agrandie : plus de défilement, le doigt la promène. */
.visionneuse-piste.figee{overflow:hidden;touch-action:none}
.visionneuse-piste::-webkit-scrollbar{display:none}
.visionneuse-vue{
  flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.visionneuse-vue img{
  max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-sm);
  transform-origin:center center;transition:transform .18s ease-out;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
/* Pendant le geste, la photo colle aux doigts : aucune animation. */
.visionneuse-piste.pincee .visionneuse-vue img{transition:none}
.visionneuse-fleche{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.visionneuse-fleche[hidden]{display:none}
.visionneuse-precedent{left:10px}
.visionneuse-suivant{right:10px}
.visionneuse-pied{
  position:absolute;left:0;right:0;
  bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;
}
.visionneuse-points{display:flex;justify-content:center;gap:7px;pointer-events:auto}
.visionneuse-points button{
  width:8px;height:8px;border-radius:50%;border:0;padding:0;
  background:rgba(255,255,255,.4);transition:all .25s;
}
.visionneuse-points button.actif{background:#fff;width:22px;border-radius:999px}
.visionneuse-compteur{
  font-size:12.5px;font-weight:700;color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.35);padding:4px 12px;border-radius:999px;
}
.visionneuse-compteur:empty{display:none}

/* Sur une carte : discret, sous le nom, avant le prix. */
.p-carte-code{
  display:block;margin:2px 0 4px;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;
  color:var(--encre-tres-douce);
}

/* Le code du produit : un repère, pas une décoration. Il se lit avant
   la référence et se recopie sans erreur. */
.fiche-code{
  display:inline-block;margin-right:10px;padding:2px 8px;
  border-radius:6px;background:var(--bleu-50);color:var(--bleu-700);
  font-weight:800;letter-spacing:.06em;
}

/* ---------- Panier, commande, reçu ---------- */
/* Le bouton du panier vit dans la barre du haut : la pastille déborde
   volontairement du rond, c'est ce qui la rend visible du coin de l'œil. */
.btn-panier{position:relative;text-decoration:none}
.panier-pastille{
  position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--orange);color:var(--orange-texte);
  font-size:11px;font-weight:800;line-height:18px;text-align:center;
  box-shadow:0 0 0 2px var(--bleu);
}

/* La fiche produit : compteur + bouton, sur une seule ligne. */
.p-panier-ligne{display:flex;align-items:center;gap:12px}
.p-panier-ligne .btn{flex:1;margin:0}
.p-panier-dedans{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;border-radius:var(--r-sm);
  background:var(--vert-clair);color:var(--vert);
  font-size:13px;font-weight:600;text-decoration:none;
}
.p-panier-dedans[hidden]{display:none}
.p-panier-dedans span{flex:1;min-width:0}

/* Le compteur — moins, quantité, plus — partagé par la fiche et le panier. */
.pa-compteur{display:flex;align-items:center;gap:2px}
.pa-compteur button{
  width:34px;height:34px;border:1px solid var(--trait);border-radius:10px;
  background:var(--blanc);color:var(--encre);
  font-size:19px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.pa-compteur button:active{transform:scale(.92)}
.pa-compteur > span{
  min-width:34px;text-align:center;font-size:15px;font-weight:800;
}
.pa-compteur .pa-retirer{
  margin-left:8px;border-color:transparent;background:transparent;
  color:var(--encre-tres-douce);
}

/* Une boutique, un bloc : le panier se prépare boutique par boutique. */
.pa-groupe-titre{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
  font-size:13px;font-weight:800;color:var(--bleu-700);
  text-transform:uppercase;letter-spacing:.04em;
}
.pa-ligne{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--trait)}
.pa-groupe .pa-ligne:first-of-type{border-top:0;padding-top:0}
.pa-ligne-img{flex:none;width:66px;height:66px}
.pa-ligne-photo{
  width:66px;height:66px;border-radius:var(--r-sm);object-fit:cover;
  background:var(--bleu-50);
}
.pa-ligne-photo.img-absente{display:flex;align-items:center;justify-content:center}
.pa-ligne-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.pa-ligne-nom{
  font-size:14px;font-weight:700;color:var(--encre);text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pa-ligne-prix{font-size:13px;color:var(--encre-douce)}
.pa-ligne-sous{font-weight:800;color:var(--encre)}
.pa-sous-total{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:12px;padding-top:12px;border-top:1px dashed var(--trait);
  font-size:13.5px;color:var(--encre-douce);
}
.pa-sous-total strong{font-size:15px;color:var(--encre)}

.pa-total-ligne{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:12px;font-size:14px;color:var(--encre-douce);
}
.pa-total-ligne strong{font-size:22px;font-weight:800;color:var(--bleu-700)}

/* ---------- Le code promo ----------
   Le champ et son bouton sur une même ligne : on tape un code court,
   on appuie, on voit le total bouger juste en dessous. */
.co-code-ligne{display:flex;gap:8px;align-items:stretch}
.co-code-ligne input{flex:1;min-width:0;text-transform:uppercase}
.co-code-ligne .btn{width:auto;flex:none;padding-left:18px;padding-right:18px}
.co-code-ok,.co-code-non{
  margin-top:10px;padding:9px 11px;border-radius:10px;
  font-size:13px;line-height:1.5;
}
.co-code-ok{background:var(--vert-clair);color:var(--vert)}
.co-code-non{background:var(--rouge-clair);color:var(--rouge-fonce)}
/* La remise dans le récapitulatif : en vert, et signée, pour qu'on la
   lise comme un retrait et pas comme une ligne de plus à payer. */
.pa-total-ligne.co-remise{color:var(--vert);font-weight:700}

/* ---------- Où en est ma commande ----------
   Les cinq étapes, la faite en vert, les suivantes en gris. Le client
   lit de haut en bas et sait où il en est sans lire une phrase. */
.re-suivi{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--trait);
}
.re-etape{
  display:flex;align-items:center;gap:8px;
  padding:3px 0;font-size:13px;color:var(--encre-tres-douce);
}
.re-etape.faite{color:var(--encre);font-weight:600}
.re-puce{
  width:18px;height:18px;flex:none;border-radius:999px;
  border:2px solid var(--trait);background:var(--blanc);
  display:inline-flex;align-items:center;justify-content:center;
}
.re-etape.faite .re-puce{background:var(--vert-clair);border-color:var(--vert);color:var(--vert)}
.re-etape.faite .re-puce .ic{width:11px;height:11px}
.re-confirmer{margin-top:12px}
.re-recu{
  display:flex;align-items:flex-start;gap:8px;
  margin-top:12px;padding:9px 11px;border-radius:10px;
  background:var(--vert-clair);color:var(--vert);
  font-size:13px;line-height:1.5;
}
.re-recu .ic{flex:none;margin-top:2px}
.re-suivi-annule{
  display:flex;align-items:flex-start;gap:8px;
  font-size:13px;line-height:1.5;color:var(--rouge-fonce);
}
.re-suivi-annule .ic{flex:none;margin-top:2px}

.pa-avertissement,.pa-essai,.pa-confirme{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;line-height:1.5;
}
.pa-avertissement{background:var(--ambre-clair);color:var(--orange-fonce)}
.pa-essai{
  background:var(--ambre-clair);color:var(--orange-fonce);
  border-radius:var(--r-sm);padding:11px 13px;margin-bottom:14px;
}
.pa-confirme{background:var(--vert-clair);color:var(--vert)}
.pa-avertissement .ic,.pa-essai .ic,.pa-confirme .ic{flex:none;margin-top:1px}
.pa-confirme strong,.pa-avertissement strong{color:inherit}

/* « Un compte est nécessaire » : un avis, pas une alarme — on le dit
   dans le ton de l'aide, sans fond coloré. Le flex sert seulement à
   garder l'icône À CÔTÉ du texte : posée dans le fil de la phrase, elle
   se retrouve seule sur sa ligne dès que la phrase dépasse la largeur —
   ce qui arrive toujours sur un téléphone. */
.pa-compte-requis{
  display:flex;align-items:flex-start;gap:7px;
  margin:0 0 12px;font-size:12.5px;line-height:1.5;
  color:var(--encre-tres-douce);
}
.pa-compte-requis .ic{margin-top:1px;color:var(--bleu)}

/* Où se trouve le commerce d'un revendeur, tel qu'il l'a déclaré. On le
   montre AVANT le formulaire : qui a déjà donné son adresse n'a pas à
   retomber sur trois champs à chaque visite. */
.cp-ou-actuel{
  margin:0 0 12px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--bleu-50);border:1px solid var(--bleu-100);
  font-size:13px;line-height:1.5;
}
.cp-ou-actuel a{color:var(--bleu);font-weight:600;text-decoration:underline}

/* L'espace vendeur. Il se distingue du reste de l'écran sans crier :
   c'est une passerelle, pas une alerte. */
.cp-vendeur{border:1px solid var(--bleu-100);background:var(--bleu-50)}
.cp-vendeur .carte-titre .ic{color:var(--bleu)}

/* Le reçu : le numéro d'abord, c'est ce qu'on dicte au téléphone. */
.re-entete{text-align:center}
.re-numero{
  font-size:13px;font-weight:800;letter-spacing:.12em;
  color:var(--encre-tres-douce);margin-bottom:8px;
}
.re-montant{font-size:28px;font-weight:800;color:var(--bleu-700);margin-top:10px}
.re-ligne{
  display:flex;justify-content:space-between;gap:12px;
  padding:8px 0;font-size:13.5px;
}
.re-ligne small{color:var(--encre-tres-douce)}
.re-code{
  padding:1px 6px;border-radius:5px;
  background:var(--bleu-50);color:var(--bleu-700);font-weight:800;
}
/* La carte porte maintenant DEUX rangées : la commande, puis la barre
   de suivi. D'où la colonne — en ligne, la barre se serait tassée à
   côté du montant. */
.re-resume{
  display:flex;flex-direction:column;gap:12px;
  text-decoration:none;color:inherit;
}
.re-resume-ligne{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}

/* ---------- La barre de suivi ----------
   Quatre paliers, remplis jusqu'où en est le colis. La pastille nomme
   l'étape ; la barre dit le chemin parcouru et celui qui reste.

   Les segments sont séparés par un écart plutôt que fondus : on doit
   pouvoir COMPTER où l'on en est, pas estimer une longueur. */
.re-barre{
  padding-top:11px;border-top:1px solid var(--trait);
}
.re-barre-piste{display:flex;gap:4px}
.re-barre-pas{
  flex:1;height:5px;border-radius:99px;background:var(--trait);
}
.re-barre-pas.fait{background:var(--bleu)}
/* L'étape en cours porte la couleur pleine ; celles d'avant la même,
   en un peu plus pâle — on lit le chemin, puis où l'on est. */
.re-barre-pas.fait:not(.ici){background:var(--bleu-300)}
.re-barre-pas.ici{background:var(--bleu)}
.re-barre-mots{
  display:flex;gap:4px;margin-top:6px;
}
.re-barre-mots span{
  flex:1;min-width:0;
  font-size:10px;font-weight:600;line-height:1.2;
  color:var(--encre-tres-douce);
  text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.re-barre-mots span.fait{color:var(--encre-douce)}
.re-barre-mots span.ici{color:var(--bleu-700);font-weight:800}
/* Le bouton de confirmation, sous la barre pleine. Il vit DANS une
   carte qui est un lien : c'est « preventDefault » qui l'empêche
   d'ouvrir la commande, pas le style. */
.re-recu-btn{width:100%;margin-top:11px}
.re-resume-numero{font-size:14px;font-weight:800}
.re-resume-date{font-size:12px;color:var(--encre-tres-douce);margin-top:3px}
/* La colonne de droite ne se laisse pas écraser par un long numéro de
   commande : le montant et l'état tiennent sur une ligne chacun. */
.re-resume > div:last-child{flex:none;white-space:nowrap}
.re-resume > div:first-child{min-width:0}

/* ---------- Formulaire (coordonnées de commande) ---------- */
.champ{margin-bottom:14px}
.champ:last-child{margin-bottom:0}
.champ label{
  display:block;margin-bottom:6px;
  font-size:12.5px;font-weight:700;color:var(--encre-douce);
}
.champ label small{font-weight:500;color:var(--encre-tres-douce)}
.champ input,.champ textarea{
  width:100%;padding:12px 14px;
  border:1px solid var(--trait);border-radius:var(--r-sm);
  background:var(--blanc);color:var(--encre);
  font-family:inherit;font-size:15px;
}
.champ input:focus,.champ textarea:focus{outline:0;border-color:var(--bleu)}
.champ textarea{resize:vertical;min-height:52px}
.champ-tel{display:flex;gap:8px}
.champ-tel input:first-child{width:72px;flex:none;text-align:center}

/* ---------- Écrans plus larges ---------- */
@media (min-width:560px){
  .p-grille{grid-template-columns:repeat(3,1fr)}
  /* Les catégories restent à quatre : elles sont huit, et deux rangées
     pleines valent mieux qu'une rangée et demie. Ce qui change avec la
     place, c'est la taille des cartes, pas leur nombre par ligne. */
  .cat-grille{gap:10px}
  .cat-carte{padding:14px 8px 12px;gap:7px}
  .cat-rond{width:44px;height:44px;border-radius:15px}
  .cat-rond-couleur .ic{width:21px;height:21px;stroke-width:1.9}
  .cat-nom{font-size:12.5px}
  .cat-compte{font-size:10.5px}
}

/* =========================================================
   Écran d'ordinateur
   =========================================================
   La barre du bas est faite pour le pouce : sur un écran large
   elle laisse un bandeau vide tout en bas, où le regard ne va
   jamais. Au-delà de 1024 px elle devient donc un menu, à
   gauche, là où la lecture commence — et le catalogue s'étale
   au lieu de flotter dans une colonne étroite.

   Rien de tout cela ne descend sous 1024 px : sur un téléphone
   l'application reste exactement celle qu'elle est aujourd'hui.
   ========================================================= */
@media (min-width:1024px){
  :root{ --rail:240px; }

  /* Le corps se décale une fois pour toutes : la barre du haut et
     les écrans suivent, sans qu'on ait à décaler chacun d'eux. */
  body{ padding-left:var(--rail); }

  /* ---------- Le menu, sur le bord gauche ---------- */
  .tabbar{
    top:0;bottom:0;right:auto;width:var(--rail);
    height:100dvh;padding:16px 12px;
    /* En colonne, et chaque entrée à sa hauteur : sans quoi la
       grille étirerait les six onglets sur toute la hauteur. */
    grid-auto-flow:row;grid-auto-columns:auto;grid-auto-rows:max-content;
    align-content:start;gap:3px;
    background:var(--blanc);backdrop-filter:none;
    border-top:0;border-right:1px solid var(--trait);
  }
  .tabbar a{
    flex-direction:row;justify-content:flex-start;gap:13px;
    height:46px;padding:0 13px;border-radius:12px;
    font-size:14px;font-weight:600;
  }
  .tabbar a span{max-width:none;font-size:14px}
  .tabbar .ic{width:22px;height:22px;flex:none}
  .tabbar a:hover{background:var(--fond)}
  .tabbar a.actif,.tabbar a.actif:hover{background:var(--bleu-50);color:var(--bleu-700)}
  .tabbar .tab-contact:hover{background:rgba(31,175,86,.10)}

  /* Le nom de l'enseigne en haut du menu : la barre du haut change
     de titre à chaque écran, le menu, lui, ne bouge pas. */
  .tabbar-marque{
    display:flex;align-items:center;gap:10px;
    padding:6px 13px 16px;margin-bottom:6px;
    border-bottom:1px solid var(--trait);
  }
  /* Le logo de la charte, à sa taille de menu. Aucune couleur n'est
     posée ici : « Bizz » et « oo » tiennent les leurs, et une règle
     sur .tabbar-marque span les écraserait toutes les deux. */
  .tabbar-marque .logo-mot{font-size:20px}

  /* ---------- Ce que le menu libère ---------- */
  .topbar{border-radius:0}
  .vue{
    max-width:1180px;
    padding:22px 28px 48px;   /* plus de barre en bas : plus de place à lui réserver */
  }
  .toasts{left:calc(var(--rail) + 16px);bottom:22px}
  /* Plus de barre en bas : le bouton flottant descend d'autant. */
  .contact-flottant{bottom:24px;right:24px}
  /* Dans le menu, « Retour à Bizzoo » tient sur une ligne. */
  .tabbar a.tab-bizzoo span{white-space:nowrap}
  /* La fiche produit, menu ouvert à gauche : son action reste en bas,
     à droite du menu, et non par-dessus. */
  body.avec-action:not(.sans-onglets) .barre-action{
    bottom:0;left:var(--rail);padding-bottom:calc(var(--safe-b) + 12px);
  }
  body.avec-action:not(.sans-onglets) .vue{padding-bottom:120px}
  body.avec-action:not(.sans-onglets) .contact-flottant{bottom:96px}

  /* Quatre produits de front plutôt que trois : à cette largeur,
     trois cartes deviennent des affiches. */
  .p-grille{grid-template-columns:repeat(4,1fr)}
  /* Toujours quatre, donc toujours deux rangées. À six colonnes, les
     huit catégories donnaient six et deux — une seconde ligne presque
     vide, qu'on lit comme un oubli. On borne plutôt la largeur : sur
     1 180 px, quatre cartes étalées feraient des affiches. */
  .cat-grille{max-width:720px}
}

/* ---------- Compte : client ordinaire ou revendeur ----------
   Le choix se fait à l'inscription, sur deux cartes que le pouce
   atteint sans viser. Une liste déroulante aurait tenu moins de place,
   mais personne ne l'aurait ouverte — et un revendeur qui s'inscrit
   comme client paie le prix de la vitrine sans le savoir. */
.cp-choix{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.cp-carte{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  text-align:left;padding:12px;border-radius:var(--r-sm);
  background:var(--bleu-50);border:2px solid transparent;
  color:var(--encre);cursor:pointer;
}
.cp-carte .ic{color:var(--bleu);width:22px;height:22px}
.cp-carte strong{font-size:14px;font-weight:800}
.cp-carte small{font-size:11.5px;color:var(--encre-tres-douce);line-height:1.4}
.cp-carte.cp-choisi{
  border-color:var(--bleu);background:var(--bleu-100);
  box-shadow:0 0 0 3px var(--bleu-50);
}

.cp-revendeur-ok{border:1px solid var(--vert);background:var(--vert-clair)}
.cp-revendeur-ok .carte-titre .ic{color:var(--vert)}
/* Le motif d'un refus se lit : sans lui, le client redemande à
   l'identique et se fait refuser une seconde fois. */
.cp-rv-motif{
  margin:0 0 10px;padding:10px 12px;border-radius:var(--r-sm);
  background:#FFF6E5;border:1px solid #F5DEB0;color:#8A5B00;
  font-size:12.5px;font-weight:600;line-height:1.5;
}
.fiche-revendeur{
  display:inline-flex;align-items:center;gap:5px;margin-top:8px;
  padding:5px 10px;border-radius:999px;
  background:var(--vert-clair);color:var(--vert);
  font-size:12px;font-weight:800;
}

/* ---------- Entrer par son numéro ----------
   L'indicatif est fixe et collé au champ : le taper serait une faute de
   plus à faire, et « +229 » devant la saisie dit d'un coup d'œil quelle
   forme on attend. */
.cp-tel-ligne{display:flex;align-items:stretch}
.cp-indicatif{
  display:flex;align-items:center;padding:0 12px;
  background:var(--bleu-50);border:1px solid var(--trait);border-right:0;
  border-radius:var(--r-sm) 0 0 var(--r-sm);
  font-weight:800;color:var(--bleu-700);
}
.cp-tel-ligne input{border-radius:0 var(--r-sm) var(--r-sm) 0;flex:1;min-width:0}

/* Six chiffres qu'on recopie d'un SMS : gros, espacés, au centre. */
.cp-code{
  font-size:26px;font-weight:800;letter-spacing:.35em;text-align:center;
  font-variant-numeric:tabular-nums;
}
.cp-verifie{display:flex;align-items:center;gap:5px;color:var(--vert);font-weight:700}
.cp-verifie .ic{color:var(--vert)}

/* Une commande que la base ne connaît pas : elle ne vit que sur ce
   téléphone. Discret — c'est une information, pas un avertissement. */
.badge-local{
  background:var(--fond);color:var(--encre-tres-douce);
  font-weight:700;margin-left:6px;vertical-align:middle;
}

/* ---------- Les avis ----------
   Les étoiles vides restent visibles mais effacées : cinq étoiles
   grises se lisent « mal noté », alors que trois pleines sur cinq
   grises se lisent « trois sur cinq ». */
.etoiles{display:inline-flex;align-items:center;gap:1px;margin:4px 0}
.etoiles .et{color:var(--trait);display:inline-flex}
/* Les icônes du projet sont dessinées au trait (« fill:none »). Une
   étoile pleine doit être PLEINE : sans ce remplissage, « pleine » et
   « vide » ne se distinguaient que par la couleur — et sur un écran au
   soleil, ou pour un œil qui confond l'ambre et le gris, elles se
   lisaient toutes pareilles. */
.etoiles .et-pleine{color:var(--ambre)}
.etoiles .et-pleine .ic{fill:currentColor}
.etoiles-grand .ic{width:20px;height:20px}
.etoiles-note{
  margin-left:6px;font-size:12.5px;font-weight:800;color:var(--encre-douce);
  font-variant-numeric:tabular-nums;
}
.etoiles-grand .etoiles-note{font-size:15px}
.etoiles-combien{margin-left:4px;font-size:11.5px;color:var(--encre-tres-douce)}

.fiche-note{display:inline-block;margin-top:6px}
.boutique-note{margin:6px 0 10px}

.av-un{padding:14px 0;border-top:1px solid var(--trait)}
.av-un:first-child{border-top:0;padding-top:0}
.av-mien{
  background:var(--bleu-50);border:1px solid var(--bleu-100);
  border-radius:var(--r-sm);padding:12px;margin-bottom:12px;
}
.av-entete{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.av-auteur{font-size:14px;font-weight:800}
.av-vous{
  margin-left:6px;padding:2px 7px;border-radius:999px;
  background:var(--bleu-100);color:var(--bleu-700);
  font-size:10.5px;font-weight:800;
}
.av-quand{font-size:11.5px;color:var(--encre-tres-douce);margin-top:2px}
.av-texte{margin:8px 0 0;font-size:13.5px;line-height:1.55;white-space:pre-wrap}
/* La réponse de la boutique est une conversation, pas un second avis :
   décalée, et marquée de son icône. */
.av-reponse{
  display:flex;gap:8px;margin:10px 0 0 12px;padding:10px 12px;
  border-left:3px solid var(--bleu-100);border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--fond);font-size:12.5px;line-height:1.5;
}
.av-reponse .ic{flex:none;color:var(--bleu);margin-top:1px}
.av-actions{flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:10px}
.btn-mini{
  padding:6px 12px;border:1px solid var(--trait);border-radius:999px;
  background:var(--blanc);font-size:12px;font-weight:700;color:var(--encre-douce);
}
.av-retirer{color:var(--rouge-fonce);border-color:var(--rouge-clair)}
.av-moderation{
  margin:9px 0 0;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--bleu-50);color:var(--bleu-700);font-size:12.5px;
}
.av-signalement{margin-top:10px;padding:12px;border:1px solid var(--trait);border-radius:var(--r-sm)}
.av-signalement label{display:block;margin-bottom:9px;font-size:12.5px;font-weight:700}
.av-signalement select,.av-signalement textarea{
  display:block;width:100%;margin-top:5px;padding:9px;border:1px solid var(--trait);
  border-radius:var(--r-sm);font:inherit;background:var(--blanc);
}
.av-auteurs-masques{margin:12px 0;font-size:12.5px;color:var(--encre-douce)}
.av-auteurs-masques summary{cursor:pointer;font-weight:700}
.av-auteurs-masques>div{display:flex;align-items:center;gap:8px;margin-top:8px}
.av-conditions{display:flex;align-items:flex-start;gap:8px;margin:8px 0 14px;
  font-size:12.5px;line-height:1.45;color:var(--encre-douce)}
.av-conditions input{flex:none;margin-top:2px}

.av-formulaire{margin-top:14px;padding-top:14px;border-top:1px solid var(--trait)}
.av-question{font-size:14px;font-weight:800;margin-bottom:8px}
/* Des étoiles qu'on touche : assez grandes pour le pouce, et espacées
   pour qu'on ne vise pas la voisine. */
.av-etoiles{display:flex;gap:4px;margin-bottom:12px}
.av-etoile{
  border:0;background:none;padding:6px;color:var(--trait);
  display:inline-flex;
}
.av-etoile .ic{width:30px;height:30px}
.av-etoile.av-choisie{color:var(--ambre)}
.av-etoile.av-choisie .ic{fill:currentColor}
.av-etoile:active{transform:scale(.9)}
.av-fermee{display:flex;align-items:flex-start;gap:6px}
.av-fermee .ic{flex:none;margin-top:2px;color:var(--vert)}

/* ---------- Le service après-vente ----------
   La boutique d'abord, BIZZOO en recours : les états se lisent d'un
   coup d'œil, et le recours porte sa couleur à lui. */
.sav-resume{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 0;border-top:1px solid var(--trait);color:inherit;
}
.sav-resume:first-of-type{border-top:0}
.carte.sav-resume{border-top:0;padding:16px}
.sav-quand{font-size:11.5px;color:var(--encre-tres-douce);margin-top:3px}
.sav-entete{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.badge.sav-attente{background:var(--ambre-clair);color:var(--orange-fonce)}
.badge.sav-repondue{background:var(--bleu-50);color:var(--bleu-700)}
.badge.sav-resolue{background:var(--vert-clair);color:var(--vert)}
/* Le recours se voit : c'est le moment où l'enseigne entre en jeu. */
.badge.sav-recours{background:var(--orange);color:var(--orange-texte)}
.badge.sav-tranchee{background:var(--bleu-900);color:#fff}

/* Le fil : qui parle se lit avant ce qui est dit. */
.sav-message{padding:12px 0;border-top:1px solid var(--trait)}
.sav-message:first-of-type{border-top:0;padding-top:0}
.sav-message-qui{display:flex;align-items:center;gap:6px;font-size:13px}
.sav-message-qui .ic{color:var(--encre-tres-douce)}
.sav-message-qui .sav-quand{margin:0 0 0 auto}
.sav-message-texte{margin:6px 0 0;font-size:13.5px;line-height:1.55;white-space:pre-wrap}
.sav-de-boutique .sav-message-qui .ic{color:var(--bleu)}
/* Ce que dit BIZZOO tranche : cela doit se distinguer du reste. */
.sav-de-enseigne{
  background:var(--bleu-50);border:1px solid var(--bleu-100);
  border-radius:var(--r-sm);padding:12px;margin-top:12px;
}
.sav-de-enseigne .sav-message-qui .ic{color:var(--bleu-700)}
.sav-recours-btn{color:var(--orange-fonce);border-color:var(--ambre-clair)}
.sav-close{display:flex;gap:8px;align-items:flex-start}
.sav-close .ic{flex:none;margin-top:2px;color:var(--vert)}

/* =========================================================
   Favoris et adresses
   ========================================================= */

/* ---------- Le cœur ----------
   Posé sur la carte d'un produit ET sur sa fiche. Il est TRACÉ tant que
   le produit n'est pas gardé, PLEIN dès qu'il l'est : c'est la seule
   différence qu'on lise d'un coup d'œil, et sans elle le bouton ne dit
   rien de son état.

   Il se touche par-dessus la carte, qui est un lien. D'où le z-index et
   le « position:absolute » : sans eux, toucher le cœur ouvrirait la
   fiche du produit — et le client repartirait sans son favori. */
.coeur{
  position:absolute;top:8px;right:8px;z-index:3;
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  border:1px solid var(--trait);color:var(--encre-tres-douce);
  cursor:pointer;
}
.coeur .ic{width:19px;height:19px;stroke-width:1.8}
.coeur:active{transform:scale(.9)}
.coeur.coeur-plein{color:var(--orange);border-color:var(--orange-clair)}
.coeur.coeur-plein .ic{fill:currentColor;stroke:currentColor}
/* Sur la fiche produit, il rejoint la rangée des boutons : plus de
   pastille flottante, il tient sa place dans la ligne. */
.coeur-fiche{position:static;width:46px;height:46px;flex:none;border-radius:14px}
.coeur-fiche .ic{width:22px;height:22px}

/* Les favoris qui ne s'affichent plus : dit, pas caché. */
.fav-absents{
  margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--encre-tres-douce);
}

/* ---------- Les adresses ---------- */
.adr-carte + .adr-carte{margin-top:10px}
.adr-tete{display:flex;gap:11px;align-items:flex-start}
.adr-tete strong{font-size:14.5px;font-weight:700}
.adr-tete p{
  margin:3px 0 0;font-size:13px;line-height:1.5;color:var(--encre-douce);
}
.adr-rond{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:10px;
  background:var(--bleu-50);color:var(--bleu);
}
.adr-defaut{
  display:inline-block;margin-left:7px;padding:2px 7px;border-radius:99px;
  background:var(--bleu-50);color:var(--bleu-700);
  font-size:10.5px;font-weight:700;letter-spacing:.02em;vertical-align:2px;
}
.adr-actions{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-top:11px;padding-top:11px;border-top:1px solid var(--trait);
}
.adr-case{
  display:flex;align-items:center;gap:9px;
  margin:2px 0 14px;font-size:13.5px;font-weight:600;color:var(--encre-douce);
}
.adr-case input{width:18px;height:18px;flex:none;accent-color:var(--bleu)}
.adr-boutons{display:flex;gap:9px}
.adr-boutons .btn{flex:1}

/* Un bouton qui n'est pas un bouton : une action secondaire, écrite
   comme un lien parce qu'elle n'appelle pas le doigt. */
.btn-lien{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--bleu);
}
.btn-lien .ic{width:15px;height:15px}
.btn-lien:disabled{opacity:.5;cursor:default}
.btn-lien-danger{color:var(--rouge)}

/* ---------- L'offre du jour ----------
   Le bandeau de l'accueil. Il est BLEU et non orange : l'orange de la
   charte est réservé à ce qu'on touche — ajouter au panier, payer —, et
   un aplat orange de cette taille en tête d'écran lui ferait concurrence
   sur tous les boutons d'en dessous.

   Le chiffre qu'il annonce est calculé sur les remises en cours ; quand
   il n'y en a plus, le bandeau disparaît au lieu de mentir. */
.offre-jour{
  display:block;padding:16px 18px;border-radius:var(--r);
  background:linear-gradient(135deg,var(--bleu) 0%,var(--bleu-800) 100%);
  color:#fff;
}
.offre-jour-quoi{
  display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--bleu-100);
}
.offre-jour-chiffre{
  display:block;margin-top:5px;font-size:clamp(22px,6vw,28px);
  font-weight:700;letter-spacing:-.6px;line-height:1.1;
}
.offre-jour-voir{
  display:inline-flex;align-items:center;gap:4px;margin-top:9px;
  font-size:12.5px;font-weight:600;color:var(--bleu-100);
}
.offre-jour:active{transform:scale(.99)}

/* ---------- Les notifications ----------
   Une ligne par nouvelle, groupée par famille. Le point bleu à droite
   dit « pas encore lue » sans avoir à comparer les gris entre eux :
   une teinte plus claire que sa voisine ne se remarque pas sur un
   téléphone au soleil. */
.notif-groupe{display:flex;flex-direction:column;gap:8px}
.notif{
  display:flex;align-items:flex-start;gap:11px;
  padding:12px 13px;border-radius:var(--r);
  background:var(--blanc);box-shadow:var(--ombre);
  color:inherit;text-decoration:none;
}
.notif:active{transform:scale(.99)}
.notif-lue{box-shadow:none;background:var(--fond)}
.notif-rond{
  flex:none;width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bleu-50);color:var(--bleu-700);
}
.notif-lue .notif-rond{background:var(--trait);color:var(--encre-tres-douce)}
.notif-corps{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.notif-titre{font-size:13.5px;font-weight:700;line-height:1.3;color:var(--encre)}
.notif-lue .notif-titre{font-weight:600;color:var(--encre-douce)}
.notif-texte{font-size:12.5px;line-height:1.35;color:var(--encre-douce)}
.notif-quand{font-size:11px;color:var(--encre-tres-douce);margin-top:2px}
.notif-point{
  flex:none;width:9px;height:9px;border-radius:50%;
  background:var(--bleu);margin-top:6px;
}

/* =========================================================
   LA DA CORRIGÉE — l'accueil, les boutiques, la fiche
   ========================================================= */

/* ---------- Les catégories en ronds, sur l'accueil ----------
   Des ronds pastel sans cadre, le nom court dessous : ceux de la DA.
   Les cartes blanches d'avant faisaient huit boîtes sous huit boîtes. */
.cat-ronds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 8px}
.cat-rond-lien{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  min-width:0;text-decoration:none;color:var(--encre);
}
.cat-rond-da{
  width:62px;height:62px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:none;
  position:relative;overflow:hidden;
}
.cat-rond-da .ic{width:27px;height:27px;stroke-width:1.8}
/* LA PHOTO DU ROND, celle de la DA, quand l'enseigne en a posé une :
   elle recouvre l'icône, qui reste dessous. Tant qu'elle charge on voit
   l'icône ; si elle ne vient pas, elle s'efface (« data-secours ») et
   l'icône reste. Même chose sur l'écran « Catégories ». */
.cat-rond-da img,
.cat-rond-couleur img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;
}
.cat-rond-couleur{position:relative;overflow:hidden}
.cat-rond-nom{
  font-size:12px;font-weight:500;max-width:100%;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cat-rond-lien:active .cat-rond-da{transform:scale(.95)}

/* ---------- Le logo d'une boutique ----------
   Un carré aux coins ronds, comme sur la DA — un rond coupait les
   logos carrés, qui sont la plupart. */
.bou-logo{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:64px;height:64px;border-radius:17px;overflow:hidden;
  background:var(--blanc);color:#fff;
  box-shadow:0 6px 16px -10px rgba(9,26,81,.55),0 0 0 1px var(--trait);
}
.bou-logo img{width:100%;height:100%;object-fit:cover;display:block}
.bou-logo-icone{box-shadow:0 6px 16px -10px rgba(9,26,81,.55)}
.bou-logo-icone .ic{width:28px;height:28px}

/* ---------- Les tuiles « Nos boutiques partenaires » ----------
   QUATRE PAR RANGÉE, comme les catégories au-dessus : une rangée se
   lit d'un coup d'œil. Le logo suit la largeur de la tuile, 60 px au
   plus : sur le plus petit téléphone, il garde de l'air autour de lui
   au lieu de toucher les bords. Le nom tient sur deux lignes, et deux
   lignes lui sont toujours réservées — toutes les tuiles ont ainsi la
   même hauteur, qu'une boutique s'appelle « ABC » ou « Impact
   Informatique ». */
.bou-tuiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bou-tuile{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  min-width:0;padding:12px 4px 10px;border-radius:var(--r);
  background:var(--blanc);box-shadow:var(--ombre);
  text-decoration:none;color:var(--encre);
}
.bou-tuiles .bou-logo{
  width:min(60px,calc(100% - 12px));height:auto;aspect-ratio:1/1;border-radius:15px;
}
.bou-tuile-nom{
  font-size:11px;font-weight:600;line-height:1.25;text-align:center;
  max-width:100%;min-height:2.5em;overflow-wrap:anywhere;hyphens:auto;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Un nom d'un seul mot : une ligne, et « … » s'il déborde, plutôt
   qu'un mot coupé en deux au milieu. La hauteur réservée ne change pas. */
.bou-tuile-nom-mot{display:block;width:100%;white-space:nowrap;text-overflow:ellipsis}
.bou-tuile:active{transform:scale(.98)}

/* ---------- « Nos produits » et sa galerie ----------
   Le « Voir tout » de l'accueil est un vrai bouton, sous les cartes :
   c'est là que le pouce arrive quand il a fini de les regarder. */
.accueil-voir-tout{display:flex;width:100%}
.accueil-voir-tout .ic{width:16px;height:16px}
/* Sous la galerie : le bouton de secours, puis le mot de la fin. */
.galerie-suite{display:flex;justify-content:center;min-height:24px}
.galerie-suite .btn{width:auto;min-width:200px}
.galerie-fin{margin:6px 0 0;font-size:12.5px;color:var(--encre-tres-douce);text-align:center}

/* ---------- La liste « Nos boutiques » ---------- */
.puces-da .puce{padding:9px 18px;font-size:13px;font-weight:600}
.bou-liste{padding:6px 14px}
.bou-ligne{
  display:flex;align-items:center;gap:13px;padding:12px 0;
  text-decoration:none;color:var(--encre);
}
.bou-ligne + .bou-ligne{border-top:1px solid var(--trait)}
.bou-ligne > .ic{color:var(--encre-tres-douce);flex:none}
.bou-logo-liste{width:58px;height:58px;border-radius:15px}
.bou-ligne-mots{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
/* LE NOM EN BLEU, comme dans la liste de la DA : c'est lui qu'on lit. */
.bou-ligne-nom{
  font-size:15px;font-weight:600;color:var(--bleu);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bou-ligne-sous{
  font-size:12.5px;color:var(--encre-douce);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bou-ligne-pied{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:1px}
.bou-sans-avis{font-size:12px;color:var(--encre-tres-douce)}
.bou-distance{display:inline-flex;align-items:center;gap:3px;font-size:12px;
  font-weight:600;color:var(--encre-douce)}
.bou-distance .ic{width:14px;height:14px}
.bou-liste-note{margin:14px 0 2px;padding-top:12px;border-top:1px solid var(--trait)}

/* ---------- La note de la DA : une étoile, le chiffre, les avis ---------- */
.note-courte{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;
  color:var(--encre-douce)}
.note-courte .ic{width:15px;height:15px;color:var(--orange);fill:var(--orange);stroke:var(--orange)}
.note-courte strong{font-weight:700;color:var(--orange-fonce)}

/* ---------- La fiche d'une boutique ----------
   LA COUVERTURE DÉBORDE LA MARGE DE LA VUE, bord à bord, et la fiche
   blanche la chevauche, coins arrondis en haut : la mise en page de la
   DA. Sans photo déposée, un aplat bleu porte le mot BIZZOO plutôt
   qu'un trou gris. */
.bou-couverture{
  margin:-16px -16px 0;height:190px;overflow:hidden;position:relative;
  background:linear-gradient(135deg,var(--bleu),var(--bleu-800));
}
.bou-couverture img{width:100%;height:100%;object-fit:cover;display:block}
.bou-couverture-vide{display:flex;align-items:center;justify-content:center}
.bou-couverture-motif .logo-mot{font-size:40px;opacity:.9}
.vue > .bou-fiche{margin-top:-28px}
.bou-fiche{
  position:relative;margin:0 -16px;padding:18px 16px 4px;
  background:var(--blanc);border-radius:24px 24px 0 0;
}
.bou-fiche-tete{display:flex;align-items:center;gap:14px}
.bou-logo-fiche{width:72px;height:72px;border-radius:19px;margin-top:-4px}
.bou-fiche-mots{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.bou-fiche-nom{font-size:21px;font-weight:700;line-height:1.2;color:var(--bleu);
  overflow-wrap:anywhere}
/* TROIS LIGNES AU PLUS : faute de slogan, c'est la description qui
   s'écrit ici, et elle peut faire deux cents caractères — elle
   repousserait « Suivre » et les onglets sous le pli. */
.bou-fiche-slogan{margin:14px 0 0;font-size:14px;color:var(--encre);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Les atouts : de petites pilules grises, une pastille orange devant. */
.bou-atouts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px}
.bou-atout{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px 6px 6px;border-radius:999px;
  background:var(--fond);font-size:12px;font-weight:500;color:var(--encre-douce);
}
.bou-atout-rond{
  width:22px;height:22px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--orange-clair);color:var(--orange-fonce);
}
.bou-atout-rond .ic{width:13px;height:13px;stroke-width:2.2}
/* Les trois onglets de la fiche : le texte seul, l'actif souligné de
   bleu — la DA ne met pas de pilules ici, et c'est ce qui les distingue
   des filtres de la liste. */
.bou-onglets{display:flex;margin:18px -16px 0;border-bottom:1px solid var(--trait)}
.bou-onglet{
  flex:1;background:none;border:0;padding:13px 4px 12px;
  font-size:14px;font-weight:500;color:var(--encre-tres-douce);
  border-bottom:3px solid transparent;margin-bottom:-1px;
}
.bou-onglet.actif{color:var(--bleu);font-weight:600;border-bottom-color:var(--bleu)}
.vue > #bou-contenu{margin-top:16px}
#bou-contenu > * + *{margin-top:14px}
/* Tout le catalogue en vignettes, trois par rangée, comme la DA. */
.bou-vignettes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.bou-vignette{
  display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
  background:var(--fond);
}
.bou-vignette-photo{width:100%;height:100%;object-fit:cover;display:block}
.bou-vignette .img-absente{display:flex;align-items:center;justify-content:center;height:100%}
/* Au-delà de neuf vignettes, la liste complète s'ouvre à part. */
.bou-tout-voir{display:flex;width:100%}

/* =========================================================
   LA DA CORRIGÉE — le panier, le paiement, la confirmation
   ========================================================= */

/* « Supprimer tout », en toutes lettres dans l'en-tête du panier. */
.lien-entete{
  background:none;border:0;padding:8px 2px;
  font-size:13px;font-weight:500;color:var(--encre-tres-douce);white-space:nowrap;
}

/* ---------- Le panier ----------
   Une ligne de la DA : la photo, le nom, le prix, le compteur gris, et
   la corbeille à droite. */
.pa-ligne{align-items:center}
.pa-ligne-corps{gap:5px}
.pa-ligne-nom{font-weight:500}
.pa-ligne-prix{color:var(--encre);font-weight:600}
.pa-ligne-sous{font-weight:500;color:var(--encre-douce)}
.pa-ligne .pa-compteur-da{align-self:flex-start;margin-top:2px}
.pa-compteur-da button{width:30px;height:30px;border:0;border-radius:50%;font-size:17px}
.pa-compteur-da > span{min-width:30px;font-size:14px;font-weight:600}
.pa-corbeille{
  flex:none;align-self:center;width:38px;height:38px;border:0;border-radius:12px;
  background:transparent;color:var(--encre-tres-douce);
  display:flex;align-items:center;justify-content:center;
}
.pa-corbeille:active{transform:scale(.92);color:var(--rouge)}
.pa-groupe-titre{font-size:12px;font-weight:700;color:var(--encre-douce);letter-spacing:.03em}

/* Le récapitulatif : sous-total et livraison en gris, le total en bleu. */
.pa-recap{display:flex;flex-direction:column;gap:9px}
.pa-recap-ligne{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;
  color:var(--encre-douce)}
.pa-recap-ligne span:last-child{text-align:right;color:var(--encre)}
.pa-recap-total{padding-top:11px;margin-top:3px;border-top:1px solid var(--trait);
  font-size:15px;font-weight:600;color:var(--encre)}
.pa-recap-total strong{font-size:18px;font-weight:700;color:var(--bleu)}

/* ---------- La méthode de paiement ----------
   Une tuile colorée, le nom, un bouton radio à droite : la liste de la
   DA. Le radio se remplit de bleu quand la ligne est choisie. */
.pay-methodes{display:flex;flex-direction:column;gap:8px}
.pay-methode{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:11px 13px;border-radius:14px;
  background:var(--blanc);border:1px solid var(--trait);color:var(--encre);
}
.pay-methode.active{border-color:var(--bleu);box-shadow:0 0 0 3px var(--bleu-50)}
.pay-methode:disabled{opacity:1;cursor:default}
.pay-tuile{
  width:40px;height:40px;border-radius:11px;flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.pay-tuile .ic{width:21px;height:21px}
.pay-tuile-orange{background:var(--orange)}
.pay-tuile-bleu{background:var(--bleu)}
.pay-tuile-nuit{background:var(--bleu-900)}
.pay-mots{flex:1;min-width:0;display:flex;flex-direction:column}
.pay-mots strong{font-size:14.5px;font-weight:600}
.pay-mots small{font-size:12px;color:var(--encre-tres-douce)}
.pay-radio{
  width:22px;height:22px;border-radius:50%;flex:none;
  border:2px solid var(--trait);background:var(--blanc);
}
.pay-methode.active .pay-radio{border-color:var(--bleu);background:var(--bleu);
  box-shadow:inset 0 0 0 4px var(--blanc)}

/* ---------- L'adresse de livraison, résumée ---------- */
.co-adresse-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:10px}
.co-modifier{background:none;border:0;padding:4px 0;font-size:13.5px}
.co-resume{display:flex;flex-direction:column;gap:3px;font-size:13.5px;color:var(--encre-douce)}
.co-resume strong{font-size:14.5px;font-weight:600;color:var(--encre)}
.co-resume[hidden],.co-formulaire[hidden],.co-modifier[hidden]{display:none}

/* ---------- « Commande confirmée ! » ----------
   Le rond bleu et sa coche blanche, les confettis autour, le titre, le
   merci, puis les deux boutons de la DA. */
.re-heros{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:30px 12px 6px;
}
.re-heros-rond{
  position:relative;width:96px;height:96px;border-radius:50%;
  background:var(--bleu);color:#fff;margin:26px 0 26px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 34px -14px rgba(37,80,183,.7);
}
.re-heros-rond > .ic{width:46px;height:46px;stroke-width:2.8;position:relative;z-index:1}
.re-confettis{position:absolute;left:50%;top:50%;width:0;height:0}
.re-confettis i{position:absolute;left:0;top:0;border-radius:50%;margin:-3px 0 0 -3px}
.re-confetti-b{background:var(--bleu)}
.re-confetti-o{background:var(--orange)}
.re-heros h2{font-size:21px;font-weight:700;color:var(--encre);margin:0 0 10px}
.re-heros p{margin:0 0 22px;font-size:14px;line-height:1.55;color:var(--encre-douce);max-width:320px}
.re-heros .btn + .btn{margin-top:10px}
@media (prefers-reduced-motion:no-preference){
  .re-heros-rond{animation:re-apparait .45s cubic-bezier(.2,1.4,.4,1) both}
}
@keyframes re-apparait{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* L'actualisation du catalogue, sous « Compte » : l'icône tourne tant
   que la base n'a pas répondu. */
.ic.tourne-seul{animation:tourner .8s linear infinite}
.cp-bizzoo{padding-top:6px;padding-bottom:6px}

/* L'invitation à se connecter, sur l'écran de paiement : une ligne. */
.co-invite{margin:2px 2px 0;font-size:13px;color:var(--encre-douce)}
/* Le code du produit parmi les pastilles : lisible, pas criard. */
.fiche-badges .fiche-code{margin:0;padding:3px 8px;font-size:11.5px;font-weight:700;
  letter-spacing:.04em}