/* ============================================================
   Provenance : adapté d'EcomOne (ecran/ecran.css) le 3 septembre 2026 pour Harness1,
   d'après la maquette V4 actée par Ayoub (maquettes/proposition-ecran-v4.html).
   Verdict : adapté. Repris d'EcomOne : le téléphone centré et sa vue mobile (dvh),
   le bouton hors cadre et sa confirmation, l'icône mobile, la pause visible pendant
   un tour (en-tour), l'indicateur « l'agent écrit », la note d'erreur, la réduction
   de mouvement. Remplacé par la V4 : l'identité (rouge du logo, texte, gris neutre,
   vert, rayons et polices relevés sur le site public), les cartes grandes à photos
   défilables, les pastilles de couleurs, les blocs structurés du fil, les panneaux,
   la confirmation de retrait, la vignette volante, la validation. Repris au lot 4
   (EcomOne) : la barre vocale (maintien, enregistrement libre, onde, corbeille) et
   la bulle vocale jouable, aux couleurs du cas ; sans la transcription affichée.
   Sortis : le sens d'écriture arabe, la police arabe, les badges de conditionnement.
   Aucun état de survol : application mobile.
   ============================================================ */

:root {
  --rouge: #b72200;
  --rouge-fonce: #9a1c00;
  --texte: #2d2c29;
  --texte-2: #6f6c66;
  --fond-page: #ebebeb;
  --gris: #f1f2f4;
  --gris-2: #e6e7ea;
  --trait: #e3e4e8;
  --vert: #52943a;
  --vert-pale: #eef7ea;
  --bleu-pale: #eef4fc;
  --blanc: #ffffff;
  --r1: 6px; --r2: 10px; --r3: 15px;
  --marge: 20px;
  --police: "Plus Jakarta Sans", system-ui, sans-serif;
  --titres: "Playfair Display", Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: var(--police); background: var(--fond-page); color: var(--texte);
  display: flex; align-items: flex-start; justify-content: center; padding: 24px; min-height: 100vh; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.devise { font-family: 'aedregular', var(--police); font-weight: 400; }   /* le texte « AED » dessiné en symbole du dirham */
img { display: block; }

/* ---------- Le téléphone ---------- */
.telephone { width: 430px; height: min(900px, calc(100vh - 48px)); min-height: 560px; background: var(--blanc); border-radius: 34px; box-shadow: 0 18px 60px rgba(0,0,0,.18);
  position: relative; overflow: hidden; display: flex; flex-direction: column; flex: none; }

/* ---------- Hors du cadre : la nouvelle conversation ---------- */
.hors-cadre { position: fixed; top: 50%; left: calc(50% + 215px); width: calc(50% - 215px); transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 24px; }
.bouton-nouvelle { display: inline-flex; align-items: center; gap: 12px; border-radius: 99px; padding: 8px 22px 8px 8px;
  background: var(--texte); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.bouton-nouvelle .rond-icone { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--rouge); color: #fff; }
.confirmation-nouvelle { width: 340px; padding: 18px 20px; border-radius: var(--r3); background: var(--blanc); border: 1px solid var(--trait); box-shadow: 0 14px 34px rgba(0,0,0,.14); }
.confirmation-nouvelle p { font-size: 14px; font-weight: 500; line-height: 1.45; }
.confirmation-nouvelle .choix { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.confirmation-nouvelle button { border-radius: 99px; padding: 9px 18px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.confirmation-nouvelle .btn-annuler { background: var(--gris); color: var(--texte); }
.confirmation-nouvelle .btn-confirmer { background: var(--rouge); color: #fff; }
.bouton-nouvelle-mobile { display: none; }
.voile-nouvelle { position: absolute; inset: 0; z-index: 30; background: rgba(45,44,41,.45); display: grid; place-items: center; padding: 24px; }
.voile-nouvelle[hidden] { display: none; }
.voile-nouvelle .confirmation-nouvelle { width: auto; max-width: 340px; }

@media (max-width: 760px) {
  /* Le fond de page suit la hauteur réellement visible (dvh) : avec 100vh, les barres
     du navigateur iPhone faisaient une bande vide et coupaient la barre de saisie
     (constat d'Ayoub sur EcomOne, 1er septembre 2026). */
  body { padding: 0; background: var(--blanc); display: block; height: 100vh; height: 100dvh; min-height: 100dvh; }
  .hors-cadre { display: none; }
  .bouton-nouvelle-mobile { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gris); color: var(--texte-2); }
  .telephone { width: 100%; height: 100vh; height: 100dvh; min-height: 0; border-radius: 0; box-shadow: none; }
  .barre { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* ---------- L'en-tête ---------- */
.entete { background: var(--blanc); border-bottom: 1px solid var(--trait); padding: 14px var(--marge) 12px; display: flex; align-items: center; gap: 12px; flex: none; }
.entete .logo { height: 16px; width: auto; }
.entete .marque { flex: 1; min-width: 0; }
.entete .sous-titre { font-size: 12px; color: var(--texte-2); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panier-entete { display: flex; align-items: center; gap: 8px; background: var(--texte); color: var(--blanc); border-radius: 999px; padding: 8px 12px 8px 10px; font-size: 12.5px; font-weight: 600; transition: transform .15s; white-space: nowrap; }
.panier-entete.pulse { transform: scale(1.08); }
.pict { position: relative; width: 22px; height: 22px; display: grid; place-items: center; }
.badge { position: absolute; top: -6px; right: -7px; background: var(--rouge); color: #fff; font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; padding: 0 4px; font-variant-numeric: tabular-nums; }
.badge:empty { display: none; }

/* ---------- Le fil ---------- */
.fil { flex: 1; overflow-y: auto; padding: 18px 0 14px; background: var(--blanc); scroll-behavior: smooth; scrollbar-width: none; }
.fil::-webkit-scrollbar { display: none; }
.bulle { max-width: 84%; margin: 0 var(--marge) 16px; padding: 13px 16px; border-radius: 18px; font-size: 14.5px; line-height: 1.55; overflow-wrap: break-word; }
.bulle.client { margin-left: auto; background: var(--texte); color: var(--blanc); border-bottom-right-radius: 6px; white-space: pre-wrap; }
.bulle.agent { background: var(--gris); border-bottom-left-radius: 6px; }
.bulle p + p, .bulle p + ul, .bulle ul + p, .bulle p + ol, .bulle ol + p { margin-top: 9px; }
.bulle ul, .bulle ol { padding-left: 18px; }
.bulle li { margin: 4px 0; }
.bulle strong { font-weight: 600; }

/* L'indicateur « l'agent écrit » */
/* La bulle de l'indicateur se serre sur ses trois points (remarque d'Ayoub du
   4 septembre 2026 : elle prenait toute la largeur ; chez EcomOne la rangée la serrait). */
#bulle-tape { width: fit-content; }
.tape { display: flex; gap: 4px; padding: 5px 2px; }
.tape i { width: 7px; height: 7px; border-radius: 50%; background: #b3b1ab; animation: tape 1s infinite ease-in-out; }
.tape i:nth-child(2) { animation-delay: .15s; }
.tape i:nth-child(3) { animation-delay: .3s; }
@keyframes tape { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* L'erreur technique, honnête, hors des bulles */
.note-erreur { margin: 0 auto 16px; max-width: 86%; font-size: 12.5px; color: #8c2f28; background: #fcebea; border: 1px solid #f2c9c5; border-radius: var(--r2); padding: 8px 12px; text-align: center; }

/* Le bloc structuré dans le fil : la confirmation d'ajout, la commande passée */
.bloc { margin: 0 var(--marge) 16px; max-width: 84%; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r3); overflow: hidden; }
.bloc .titre-bloc { display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-size: 13px; font-weight: 700; background: var(--gris); }
.bloc.confirmation .titre-bloc { background: var(--vert-pale); color: var(--vert); }
.bloc .ligne-bloc { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--trait); font-size: 13.5px; }
.bloc .ligne-bloc img, .bloc .ligne-bloc .vignette-vide { width: 40px; height: 40px; border-radius: var(--r1); object-fit: cover; background: var(--gris); flex: none; }
.bloc .ligne-bloc .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloc .ligne-bloc .q { color: var(--texte-2); font-size: 12.5px; white-space: nowrap; }
.bloc .ligne-bloc .m { font-weight: 600; white-space: nowrap; }
.bloc .total-bloc { display: flex; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--trait); font-size: 13.5px; }
.bloc .total-bloc b { font-size: 15px; }
.bloc .pied-bloc { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--trait); }
.bloc .pied-bloc button { flex: 1; height: 36px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--trait); }
.bloc .pied-bloc button.plein { background: var(--texte); color: #fff; border-color: var(--texte); }

/* ---------- Les cartes ---------- */
.carrousel { display: flex; gap: 12px; overflow-x: auto; padding: 2px var(--marge) 16px; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-left: var(--marge); }
.carrousel::-webkit-scrollbar { display: none; }
.carte { flex: none; width: calc(100% - 2 * var(--marge) - 34px); scroll-snap-align: start; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r3); overflow: hidden; user-select: none; -webkit-user-select: none; }
.photos { position: relative; background: var(--gris); }
.defile { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 4 / 3; }
.defile::-webkit-scrollbar { display: none; }
.defile img { flex: none; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.defile .vide { flex: none; width: 100%; display: grid; place-items: center; color: var(--texte-2); font-size: 13px; padding: 20px; text-align: center; }
.points { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.points i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.points i.actif { background: var(--blanc); width: 16px; border-radius: 3px; }
.stock { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--vert); }
.stock::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); margin-right: 5px; }
.stock.rupture { color: var(--rouge); } .stock.rupture::before { background: var(--rouge); }
.compte-photos { position: absolute; top: 10px; right: 10px; font-size: 11px; background: rgba(45,44,41,.72); color: #fff; padding: 3px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.corps { padding: 12px 14px 14px; }
.nom { font-size: 14.5px; font-weight: 600; line-height: 1.3; height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dims { font-size: 12px; color: var(--texte-2); margin-top: 4px; height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pastilles { display: flex; align-items: center; gap: 6px; height: 26px; margin-top: 8px; }
.pastilles button { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; border: 2px solid var(--blanc); box-shadow: 0 0 0 1px var(--gris-2); padding: 0; flex: none; background: var(--gris); }
.pastilles button.active { box-shadow: 0 0 0 2px var(--texte); }
.pastilles button.attente { opacity: .5; }
.pastilles img { width: 100%; height: 100%; object-fit: cover; }
.pastilles .plus { font-size: 11px; color: var(--texte-2); margin-left: 2px; }
.pastilles .seul, .pastilles .nom-couleur { font-size: 11.5px; color: var(--texte-2); margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bas { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 10px; }
.prix { font-size: 18px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* L'action d'achat en noir (le primaire du site, `--primary #2d2c29`, celui de ses
   boutons ; le rouge est celui du logo) : décision d'Ayoub du 4 septembre 2026. */
.ajout { width: 40px; height: 40px; border-radius: 50%; background: var(--texte); color: #fff; display: grid; place-items: center; transition: transform .12s; flex: none; }
.ajout:active { transform: scale(.92); }
.ajout:disabled { background: var(--gris-2); color: var(--texte-2); cursor: default; }
.reglette { display: none; align-items: center; gap: 2px; background: var(--texte); color: #fff; border-radius: 999px; height: 40px; padding: 0 4px; flex: none; }
.reglette button { width: 34px; height: 34px; color: #fff; font-size: 18px; border-radius: 50%; }
.reglette .q { min-width: 22px; text-align: center; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.carte.au-panier .ajout { display: none; }
.carte.au-panier .reglette { display: flex; }
.carte-tout { flex: none; width: 128px; scroll-snap-align: start; border-radius: var(--r3); border: 1px solid var(--trait); background: var(--gris);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; font-size: 13px; font-weight: 600; color: var(--texte-2); padding: 12px; }
.carte-tout b { font-size: 26px; color: var(--texte); font-family: var(--titres); }
.carte-tout .rond { width: 36px; height: 36px; border-radius: 50%; background: var(--texte); color: #fff; display: grid; place-items: center; margin-top: 8px; }

/* ---------- La barre de saisie ---------- */
.barre { display: flex; align-items: flex-end; gap: 10px; padding: 10px var(--marge) 14px; border-top: 1px solid var(--trait); background: var(--blanc); flex: none; }
/* 16 px au moins : en dessous, Safari iPhone zoome la page au focus (constat d'Ayoub
   sur EcomOne, 1er septembre 2026). */
.champ { flex: 1; resize: none; border: 1px solid var(--gris-2); background: var(--gris); border-radius: 22px; padding: 11px 16px; font: inherit; font-size: 16px; line-height: 1.35; outline: none; max-height: 120px; overflow-y: auto; color: var(--texte); }
.champ::placeholder { color: var(--texte-2); }
/* Au repos, neutre (gris, icône sombre), comme EcomOne : on voit le bouton s'allumer
   quand il envoie (vert) ou enregistre (rouge). Décision d'Ayoub du 4 septembre 2026. */
.principal { width: 44px; height: 44px; border-radius: 50%; background: var(--gris-2); color: var(--texte); display: grid; place-items: center; flex: none; transition: background .15s, color .15s, box-shadow .15s;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }   /* le maintien du doigt ne doit ni sélectionner ni faire défiler */
.principal svg { grid-area: 1 / 1; }
/* Un seul bouton, deux visages : le micro quand le champ est vide, la flèche quand il
   porte du texte ou qu'un enregistrement libre attend son envoi. */
.principal .icone-envoi { display: none; }
.barre.avec-texte .icone-micro, .barre.libre .icone-micro { display: none; }
.barre.avec-texte .icone-envoi, .barre.libre .icone-envoi { display: block; }
/* Actif, il envoie : le vert. */
.barre.avec-texte .principal, .barre.libre .principal { background: var(--vert); color: #fff; box-shadow: 0 3px 10px rgba(82, 148, 58, .35); }
/* Pendant un enregistrement, tout le cadre refuse la sélection de texte et le menu
   d'appui long du système (constat d'EcomOne sur iPhone : ce menu volait le relâchement). */
.telephone.enregistre-vocal, .telephone.enregistre-vocal * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* La zone d'enregistrement remplace le champ : corbeille ou micro rouge à gauche, le
   chronomètre, puis l'onde en direct (libre) ou l'indication (maintien). */
.zone-vocale { flex: 1; display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px 0 4px; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--texte); }
.barre.enregistre .champ { display: none; }
.barre.enregistre .zone-vocale { display: flex; }
.zone-vocale .temps-vocal { flex: none; min-width: 42px; font-size: 17px; font-weight: 500; color: var(--texte-2); }
.zone-vocale .onde-directe { display: none; flex: 1; height: 44px; min-width: 0; }
.zone-vocale .indication-annuler { display: none; align-items: center; gap: 5px; margin: 0 auto; font-size: 15px; font-weight: 500; color: var(--texte-2); }
.zone-vocale .micro-rouge { display: none; flex: none; color: var(--rouge); line-height: 0; animation: clignote-micro 1s infinite steps(1); }
@keyframes clignote-micro { 0% { opacity: 1; } 50% { opacity: 0; } }
.zone-vocale .bouton-corbeille { display: none; flex: none; width: 40px; height: 40px; border-radius: 50%; color: var(--texte-2); place-items: center; }
.barre.maintien .indication-annuler { display: flex; }
.barre.maintien .micro-rouge { display: block; }
.barre.libre .onde-directe { display: block; }
.barre.libre .bouton-corbeille { display: grid; }
/* Il enregistre : le rouge. */
.barre.maintien .principal { background: var(--rouge); color: #fff; animation: pulse-vocal 1.2s infinite ease-in-out; box-shadow: 0 3px 10px rgba(183,34,0,.4); }
@keyframes pulse-vocal { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* La bulle vocale (EcomOne) : le rond de lecture, l'onde du vrai signal, la durée ;
   même largeur pour toutes ; les barres lues passent au rouge du logo. */
.bulle.vocale { padding: 11px 13px 9px; width: 84%; }
.ligne-vocale { display: flex; align-items: center; gap: 10px; }
.bouton-lecture { flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; cursor: default; }
.bouton-lecture svg { display: block; grid-area: 1 / 1; }
.bouton-lecture.jouable { cursor: pointer; }
.bouton-lecture .icone-pause { display: none; }
.bouton-lecture.joue .icone-lecture { display: none; }
.bouton-lecture.joue .icone-pause { display: block; }
.onde { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 2.5px; height: 34px; min-width: 0; }
.onde i { width: 3px; border-radius: 2px; background: rgba(255,255,255,.55); }
.onde i.lu { background: var(--rouge); }
.duree-vocale { flex: none; font-size: 11.5px; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }

/* ---------- Les panneaux ---------- */
.voile { position: absolute; inset: 0; background: rgba(45,44,41,.4); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 5; }
.voile.ouvert { opacity: 1; pointer-events: auto; }
.panneau { position: absolute; left: 0; right: 0; bottom: 0; background: var(--blanc); border-radius: 22px 22px 0 0; z-index: 6;
  transform: translateY(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; max-height: 92%; box-shadow: 0 -8px 30px rgba(0,0,0,.14); }
.panneau.ouvert { transform: translateY(0); }
.panneau.fiche { z-index: 7; }
.voile.au-dessus { z-index: 6; }
.poignee { width: 42px; height: 5px; border-radius: 3px; background: var(--gris-2); margin: 10px auto 4px; flex: none; }
.entete-panneau { display: flex; align-items: center; justify-content: space-between; padding: 8px var(--marge) 10px; flex: none; }
.entete-panneau h3 { font-family: var(--titres); font-size: 21px; font-weight: 600; }
.entete-panneau .compte { font-size: 12.5px; color: var(--texte-2); }
.contenu-panneau { overflow-y: auto; flex: 1 1 auto; min-height: 0; }   /* min-height 0 : le contenu défile, le pied reste */

/* Le panier */
.ligne { display: flex; gap: 12px; padding: 12px var(--marge); border-top: 1px solid var(--trait); align-items: center; }
.ligne img, .ligne .vignette-vide { width: 64px; height: 64px; border-radius: var(--r2); object-fit: cover; background: var(--gris); flex: none; }
.ligne .infos { flex: 1; min-width: 0; }
.ligne .nom-ligne { font-size: 13.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ligne .montant { font-size: 13px; color: var(--texte-2); margin-top: 3px; font-variant-numeric: tabular-nums; }
.ligne .montant b { color: var(--texte); }
.ligne .reglette { display: flex; background: var(--gris); color: var(--texte); border: 1px solid var(--trait); }
.ligne .reglette button { color: var(--texte); }
.total-panneau { display: flex; justify-content: space-between; align-items: baseline; padding: 14px var(--marge) 6px; border-top: 1px solid var(--trait); font-size: 14px; color: var(--texte-2); flex: none; }
.total-panneau .valeur { font-size: 22px; font-weight: 700; color: var(--texte); font-variant-numeric: tabular-nums; }
.pied-panneau { padding: 8px var(--marge) 20px; flex: none; background: var(--blanc); border-top: 1px solid var(--trait); }
.bouton-plein { width: 100%; height: 50px; border-radius: 14px; background: var(--texte); color: #fff; font-size: 15.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; }
.bouton-plein.secondaire { background: var(--texte); }
.bouton-plein:disabled { background: var(--gris-2); color: var(--texte-2); cursor: default; }
.vide-panier { padding: 30px var(--marge); text-align: center; color: var(--texte-2); font-size: 14px; }

/* La fiche produit (V4, lot 3) : le pied fixe, seul le produit défile */
.fermer { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; z-index: 2; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.fiche .galerie .defile { aspect-ratio: 4 / 3; }
.fiche .galerie .compte-photos { right: 56px; }   /* le bouton de fermeture occupe l'angle */
.fiche .titre-fiche { font-family: var(--titres); font-size: 21px; font-weight: 600; line-height: 1.25; padding: 14px 60px 4px var(--marge); }
.fiche .sous-fiche { padding: 0 var(--marge); font-size: 12.5px; color: var(--texte-2); }
.fiche .rangee-prix { display: flex; align-items: center; justify-content: space-between; padding: 12px var(--marge) 8px; }
.fiche .rangee-prix .prix { font-size: 24px; }
.stock.statique { position: static; }
.livraison { margin: 6px var(--marge) 10px; background: var(--bleu-pale); border-radius: var(--r2); padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
.livraison svg { flex: none; margin-top: 2px; }
.livraison b { font-weight: 600; }
.livraison .note { color: var(--texte-2); font-size: 12px; font-style: italic; margin-top: 3px; }
.section-fiche { padding: 12px var(--marge) 4px; }
.section-fiche h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-2); margin-bottom: 8px; }
.variantes { display: flex; gap: 10px; flex-wrap: wrap; }
.variante { width: 56px; height: 56px; border-radius: var(--r2); overflow: hidden; border: 2px solid transparent; background: var(--gris); padding: 0; }
.variante.active { border-color: var(--texte); }
.variante img { width: 100%; height: 100%; object-fit: cover; }
.accordeons { margin-top: 8px; border-top: 1px solid var(--trait); }
.accordeon { border-bottom: 1px solid var(--trait); }
.accordeon > button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--marge); font-size: 15px; font-weight: 500; text-align: left; }
.accordeon > button svg { transition: transform .2s; flex: none; }
.accordeon.ouvert > button svg { transform: rotate(180deg); }
.accordeon .corps-acc { display: none; padding: 0 var(--marge) 14px; font-size: 13.5px; line-height: 1.5; overflow-wrap: break-word; }
.accordeon.ouvert .corps-acc { display: block; }
.corps-acc .detail { margin-top: 8px; color: var(--texte-2); font-size: 12.5px; }
.specs { display: grid; grid-template-columns: 1fr 1fr; row-gap: 7px; column-gap: 12px; font-size: 13px; }
.specs .k { color: var(--texte-2); } .specs .v { font-weight: 500; text-align: right; }
.corps-acc ul { padding-left: 18px; } .corps-acc li { margin: 3px 0; }
.fin-fiche { height: 12px; }
.pied-fiche { display: flex; gap: 10px; align-items: center; }
.pied-fiche:empty { display: none; }
.pied-fiche .reglette { display: flex; height: 50px; border-radius: 14px; padding: 0 6px; }
.pied-fiche .reglette button { width: 40px; height: 40px; }
.telephone.en-tour .variante, .telephone.en-tour .pied-fiche button { opacity: .4; pointer-events: none; }

/* La grille « See all » */
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px var(--marge) 20px; }
.grille .carte { width: auto; }
.grille .defile { aspect-ratio: 1 / 1; }
.grille .nom { font-size: 13px; }
.grille .nom-couleur, .grille .seul { display: none; }   /* la couleur est sur la ligne des dimensions */
.grille .prix { font-size: 15px; }
.grille .ajout, .grille .reglette { transform: scale(.9); }

/* La confirmation de retrait */
.dialogue { position: absolute; inset: 0; z-index: 8; display: none; align-items: center; justify-content: center; background: rgba(45,44,41,.45); padding: 24px; }
.dialogue.ouvert { display: flex; }
.dialogue .carte-dialogue { background: var(--blanc); border-radius: var(--r3); padding: 20px; width: 100%; max-width: 340px; }
.dialogue p { font-size: 15px; line-height: 1.45; }
.dialogue .choix { display: flex; gap: 10px; margin-top: 16px; }
.dialogue .choix button { flex: 1; height: 44px; border-radius: 12px; font-size: 14px; font-weight: 600; border: 1px solid var(--trait); }
.dialogue .choix .retirer { background: var(--rouge); color: #fff; border-color: var(--rouge); }

/* La vignette qui vole vers le panier, ou en redescend */
.volante { position: absolute; width: 56px; height: 56px; border-radius: var(--r2); object-fit: cover; z-index: 9; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: transform .6s cubic-bezier(.3,.7,.3,1), opacity .6s; }

/* La validation */
.validation { position: absolute; inset: 0; background: var(--blanc); display: none; flex-direction: column; align-items: center; padding: 60px 24px 24px; text-align: center; overflow-y: auto; z-index: 10; }
.validation.ouvert { display: flex; }
.rond-coche { width: 84px; height: 84px; border-radius: 50%; background: var(--vert); display: grid; place-items: center; margin-bottom: 18px; flex: none; animation: pop .45s cubic-bezier(.2,.9,.3,1.3); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.trace-coche { stroke-dasharray: 60; stroke-dashoffset: 60; animation: trace .4s ease-out .35s forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.validation h3 { font-family: var(--titres); font-size: 26px; font-weight: 600; margin-bottom: 6px; }
.validation p { color: var(--texte-2); font-size: 14px; }
.recap { width: 100%; margin-top: 22px; border: 1px solid var(--trait); border-radius: var(--r3); overflow: hidden; text-align: left; flex: none; }
.recap .ligne { padding: 10px 14px; }
.recap .ligne:first-child { border-top: 0; }
.recap .ligne img, .recap .ligne .vignette-vide { width: 52px; height: 52px; }
.recap .total-panneau { padding: 12px 14px; }
.validation .bouton-plein { margin-top: 18px; flex: none; }

/* ---------- Pause visible pendant un tour de l'agent ---------- */
.telephone.en-tour .ajout, .telephone.en-tour .reglette button, .telephone.en-tour .pastilles button,
.telephone.en-tour .pied-bloc button, .telephone.en-tour .bouton-valider,
.telephone.en-tour .dialogue .choix button { opacity: .4; pointer-events: none; }
.telephone.en-tour .champ, .telephone.en-tour .principal, .telephone.en-tour .bouton-corbeille { opacity: .45; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .trace-coche { stroke-dashoffset: 0; }
}

/* ---------- Retouches mobiles, en fin de fichier pour l'emporter sur les règles
   générales de même poids ---------- */
@media (max-width: 760px) {
  /* Reprises de la passe d'EcomOne du 1er septembre 2026, sur décision d'Ayoub du
     4 septembre 2026, la vue ordinateur inchangée : les textes de conversation
     grandissent d'un cran ; les zones sensibles des + et −, du bouton d'ajout et des
     pastilles s'élargissent sans changer leur apparence (pseudo-élément débordant :
     44 px de haut et 40 de large pour les − et + de la réglette, le chiffre entre les
     deux ne laissant pas plus, comme chez EcomOne ; 44 px pour le bouton d'ajout ; les
     pastilles de 22 px, écartées de 10 px au lieu de 6, atteignent 32 × 44 px sans se
     chevaucher). */
  .bulle { font-size: 15.5px; }
  .ajout, .reglette button, .pastilles button { position: relative; }
  .ajout::after { content: ""; position: absolute; inset: -2px; }
  .reglette button::after { content: ""; position: absolute; inset: -5px -3px; }
  .pastilles { gap: 10px; }
  .pastilles button { overflow: visible; }
  .pastilles img { border-radius: 50%; }
  .pastilles button::after { content: ""; position: absolute; inset: -11px -5px; }
}