/* ==========================================================================
   AKWABA FOOD — feuille de style principale (refonte phase 3)
   Palette : vert forêt + or + crème · Titres Playfair Display · Texte Plus Jakarta Sans
   ========================================================================== */
:root{
  --or:#E8A80C; --or-fonce:#B8830A; --or-clair:#F7C948; --or-pale:#FFF4D6;
  --vert:#1B6E3C; --vert-fonce:#0E4A26; --vert-clair:#8FD14F; --vert-pale:#EAF6EE;
  --terre:#7A4A1F; --creme:#FFFBEF; --creme-2:#F7F1E1; --encre:#22190E; --gris:#6E6555; --gris-clair:#A39A88;
  --bord:#E9E0CB; --rouge:#C0392B; --rouge-pale:#FDECEA; --bleu:#0B5394; --bleu-pale:#E3F0FC;
  --rayon:16px; --rayon-petit:10px;
  --ombre:0 1px 2px rgba(34,25,14,.06),0 8px 24px rgba(34,25,14,.08);
  --ombre-forte:0 18px 44px rgba(34,25,14,.18);
  --police:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --police-titre:'Playfair Display',Georgia,serif;
  --nav-h:72px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{font-family:var(--police);background:var(--creme);color:var(--encre);min-height:100vh;line-height:1.6;font-size:16px;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;overflow-x:hidden}
main.contenu{flex:1 0 auto;width:100%}
img,svg,video,canvas{max-width:100%}
img{height:auto}
a{color:var(--vert)}
a:hover{color:var(--vert-fonce)}
h1,h2,h3,h4{font-family:var(--police-titre);line-height:1.2;color:var(--vert-fonce);font-weight:700;letter-spacing:.2px}
h1{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h2{font-size:clamp(1.3rem,2.4vw,1.75rem)}
h3{font-size:1.12rem}
h4{font-size:1rem;font-family:var(--police)}
p{overflow-wrap:break-word}
small{font-size:.82em}
hr{border:none;border-top:1px solid var(--bord);margin:20px 0}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:var(--creme-2);padding:1px 6px;border-radius:6px}
[hidden]{display:none!important}
.cache{display:none!important}
html:has(.popup-fond:not(.cache)),html.modale-ouverte{overflow:hidden}
:focus-visible{outline:3px solid var(--or);outline-offset:2px;border-radius:4px}
::selection{background:var(--or-clair);color:var(--encre)}

/* ---- Utilitaires ---- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lien-evitement{position:absolute;left:12px;top:-60px;z-index:200;background:var(--or);color:var(--encre);padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none;transition:top .2s}
.lien-evitement:focus{top:12px}
.texte-centre{text-align:center}
.nowrap{white-space:nowrap}
.marge-haut{margin-top:22px}
.marge-haut-petite{margin-top:10px}
.lien-fort{font-weight:700;color:var(--vert);text-decoration:underline;text-underline-offset:3px}
.lien-droite{display:block;text-align:right;font-size:.88rem;margin:-6px 0 14px}
.emoji-grand{font-size:3rem;line-height:1;display:block;margin-bottom:10px}
.titre-page{margin-bottom:6px}
.titre-gauche{text-align:left}
.titre-bloc{margin:24px 0 12px;font-size:1.15rem;padding-bottom:6px;border-bottom:2px solid var(--or-pale)}
.titre-section{text-align:center;margin-bottom:26px;font-size:clamp(1.4rem,2.6vw,1.9rem);position:relative;padding-bottom:12px}
.titre-section::after{content:'';position:absolute;left:50%;bottom:0;width:56px;height:4px;border-radius:4px;background:var(--or);transform:translateX(-50%)}
.surtitre{text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:700;color:var(--or-clair);margin-bottom:10px}
.sous-titre{color:var(--gris);margin-bottom:22px;font-weight:400}
.aide{font-size:.82rem;color:var(--gris);margin-top:5px}
.aide-claire{font-size:.85rem;color:rgba(255,255,255,.82);margin-top:8px}
.grille-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--rayon);box-shadow:var(--ombre);background:#fff}
.table-scroll>.tableau{box-shadow:none;border-radius:0;min-width:640px}
.icone-centree{display:flex;align-items:center;justify-content:center}
.icon-svg{width:1em;height:1em;fill:currentColor;vertical-align:-.12em}
.revele{transition:opacity .6s ease,transform .6s ease}
.js-pret .revele:not(.visible){opacity:0;transform:translateY(18px)}
.page-sortie body,.changement-langue body{opacity:.35;transition:opacity .2s}

/* ============================ NAVIGATION ============================ */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:22px;min-height:var(--nav-h);padding:8px max(4vw,16px);
  background:linear-gradient(115deg,var(--vert-fonce),var(--vert));color:#fff;border-bottom:4px solid var(--or);transition:box-shadow .25s,padding .25s}
.nav.defile{box-shadow:0 8px 24px rgba(14,74,38,.28)}
.logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.logo-img{height:54px;width:auto;display:block;border-radius:10px;background:#fff;padding:2px}
.nav-collapse{display:flex;align-items:center;gap:18px;flex:1;min-width:0}
.nav-liens{display:flex;align-items:center;gap:4px;flex:1;flex-wrap:wrap;min-width:0}
.nav-liens a{color:#EAF6E5;text-decoration:none;font-weight:600;font-size:.92rem;padding:7px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;transition:background .2s,color .2s;white-space:nowrap}
.nav-liens a:hover{background:rgba(255,255,255,.12);color:#fff}
.nav-liens a.actif{background:rgba(247,201,72,.18);color:var(--or-clair)}
.nav-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.selecteur-langue{display:inline-flex;background:rgba(0,0,0,.18);border-radius:999px;padding:3px}
.selecteur-langue a{color:#EAF6E5;text-decoration:none;font-size:.75rem;font-weight:700;padding:4px 9px;border-radius:999px;letter-spacing:.04em}
.selecteur-langue a:hover{color:#fff;background:rgba(255,255,255,.12)}
.selecteur-langue a.actif{background:var(--or);color:var(--encre)}
.salut{color:var(--or-pale);font-weight:500;font-size:.9rem;white-space:nowrap}
.btn-panier{color:#fff;position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);transition:transform .2s,background .2s}
.btn-panier:hover{color:#fff;background:rgba(255,255,255,.22);transform:scale(1.06)}
.badge{position:absolute;top:-6px;right:-8px;background:var(--or);color:var(--encre);font-size:.7rem;font-weight:800;border-radius:999px;padding:1px 7px;min-width:20px;text-align:center;border:2px solid var(--vert-fonce);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.badge.saut{transform:scale(1.5)}
.pastille-compteur{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--rouge);color:#fff;font-size:.7rem;font-weight:800;line-height:1;box-shadow:0 0 0 2px rgba(255,255,255,.9);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 0 rgba(192,57,43,.5)}50%{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 6px rgba(192,57,43,0)}}
.btn-nav{padding:8px 16px;font-size:.88rem}
.nav .btn-contour{color:#fff;border-color:rgba(255,255,255,.7)}
.nav .btn-contour:hover{background:#fff;color:var(--vert-fonce)}
.nav-toggle{display:none;background:rgba(255,255,255,.1);border:none;cursor:pointer;padding:10px;margin-left:auto;flex-direction:column;gap:5px;border-radius:10px;flex-shrink:0}
.nav-toggle span{display:block;width:24px;height:3px;background:#fff;border-radius:2px;transition:transform .25s,opacity .25s}
.nav-toggle.ouvert span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle.ouvert span:nth-child(2){opacity:0}
.nav-toggle.ouvert span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ============================ BOUTONS ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid transparent;cursor:pointer;text-decoration:none;text-align:center;
  font-family:var(--police);font-weight:700;font-size:.95rem;line-height:1.2;padding:11px 22px;border-radius:999px;transition:transform .15s,box-shadow .2s,background .2s,color .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-plein,.btn-or{background:var(--or);color:var(--encre);box-shadow:0 3px 0 var(--or-fonce)}
.btn-plein:hover,.btn-or:hover{background:var(--or-clair);color:var(--encre);box-shadow:0 5px 0 var(--or-fonce)}
.btn-or{background:linear-gradient(135deg,#F7C948,#E8A80C)}
.btn-vert{background:var(--vert);color:#fff;box-shadow:0 3px 0 var(--vert-fonce)}
.btn-vert:hover{background:#21804a;color:#fff}
.btn-contour{background:transparent;color:var(--vert);border-color:currentColor}
.btn-contour:hover{background:var(--vert-pale);color:var(--vert-fonce)}
.btn-clair{color:#fff;border-color:rgba(255,255,255,.75)}
.btn-clair:hover{background:#fff;color:var(--vert-fonce)}
.btn-danger{background:var(--rouge);color:#fff;box-shadow:0 3px 0 #8e2a20}
.btn-danger:hover{background:#d24435;color:#fff}
.btn-lien{background:none;border:none;box-shadow:none;color:var(--vert);padding:6px 4px;text-decoration:underline;text-underline-offset:3px}
.btn-lien:hover{transform:none;color:var(--vert-fonce)}
.btn-petit{padding:6px 14px;font-size:.82rem}
.btn-large{width:100%;padding:14px 22px;font-size:1.02rem}
.btn-bloc{display:flex;width:100%}
.btn:disabled,.btn.desactive{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none}
.btn-icone{background:none;border:none;cursor:pointer;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;transition:background .2s}
.btn-icone:hover{background:var(--creme-2)}
.btn-supprimer:hover{background:var(--rouge-pale);color:var(--rouge)}
.actions,.rangee-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rangee-actions{margin-top:14px}
.actions-entete{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ============================ CONTENU ============================ */
.contenu{max-width:1200px;margin:0 auto;padding:32px max(4vw,16px) 48px;animation:apparait .45s ease both}
@keyframes apparait{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- Héros ---- */
.heros{border-radius:calc(var(--rayon)*1.5);position:relative;overflow:hidden;margin-bottom:40px;padding:clamp(36px,6vw,72px) clamp(22px,6%,64px);color:#fff;
  background:radial-gradient(900px 320px at 90% -10%,rgba(247,201,72,.42),transparent 60%),radial-gradient(600px 300px at -10% 120%,rgba(143,209,79,.25),transparent 60%),linear-gradient(125deg,var(--vert-fonce) 0%,var(--vert) 62%,#2c8a4f 100%);box-shadow:var(--ombre-forte)}
.heros::after{content:'';position:absolute;right:-60px;bottom:-60px;width:260px;height:260px;border-radius:50%;border:28px solid rgba(247,201,72,.16);pointer-events:none}
.heros-texte{position:relative;z-index:1;max-width:640px}
.heros h1{color:#fff;font-size:clamp(1.9rem,4.6vw,3.3rem);margin-bottom:14px}
.heros h1 span{color:var(--or-clair)}
.heros p{color:#EAF6E5;font-size:1.06rem;max-width:560px}
.heros-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---- Comment ça marche ---- */
.comment-ca-marche{margin:44px 0 12px}
.etapes-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.etape-accueil{text-align:center;background:#fff;border-radius:var(--rayon);padding:24px 18px 26px;box-shadow:var(--ombre);border-top:4px solid var(--or);transition:transform .3s,box-shadow .3s}
.etape-accueil:hover{transform:translateY(-5px);box-shadow:var(--ombre-forte)}
.etape-accueil img{width:100px;height:100px;object-fit:contain;margin:0 auto 12px;display:block}
.etape-accueil h3{font-family:var(--police);font-size:1.02rem;margin-bottom:6px}
.etape-accueil p{font-size:.88rem;color:var(--gris)}

/* ---- Recherche / filtres ---- */
.section-plats{margin-top:44px}
.barre-recherche-magasin{position:relative;margin:10px auto 4px;max-width:640px}
.barre-recherche-magasin input,.champ-recherche{width:100%;padding:13px 16px 13px 44px;border:2px solid var(--bord);border-radius:999px;font:inherit;background:#fff;transition:border-color .2s,box-shadow .2s}
.champ-recherche{padding-left:16px;border-radius:12px}
.barre-recherche-magasin input:focus,.champ-recherche:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 4px rgba(27,110,60,.12)}
.barre-recherche-magasin .icone-recherche{position:absolute;left:17px;top:50%;transform:translateY(-50%);opacity:.55;pointer-events:none}
.resultats-magasin{display:none;position:absolute;top:100%;left:0;right:0;z-index:40;background:#fff;border-radius:14px;box-shadow:var(--ombre-forte);margin-top:6px;max-height:340px;overflow-y:auto}
.resultats-magasin.ouvert{display:block}
.resultat-magasin{display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;color:var(--encre);border-bottom:1px solid #f1ede0}
.resultat-magasin:last-child{border-bottom:none}
.resultat-magasin:hover{background:var(--creme)}
.resultat-magasin img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0}
.filtres{display:flex;gap:10px;margin:22px 0 28px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.ligne-icone{display:flex;align-items:center;gap:8px}
.icone-inline{width:22px;height:22px;object-fit:contain;flex-shrink:0}
.puce{flex-shrink:0;border:2px solid var(--bord);background:#fff;color:var(--vert-fonce);padding:7px 16px;border-radius:999px;cursor:pointer;font:600 .9rem var(--police);transition:all .2s;white-space:nowrap}
.puce:hover{border-color:var(--vert)}
.puce.active{background:var(--vert);color:#fff;border-color:var(--vert);box-shadow:0 4px 12px rgba(27,110,60,.25)}

/* ---- Grille des plats ---- */
.grille-plats{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px}
.carte-plat{background:#fff;border-radius:var(--rayon);overflow:hidden;cursor:pointer;box-shadow:var(--ombre);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;animation:apparait .45s ease both}
.carte-plat:hover{transform:translateY(-6px);box-shadow:var(--ombre-forte)}
.carte-plat:focus-visible{outline-offset:4px}
.carte-image{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--creme-2)}
.carte-image img,.carte-image .sans-photo,.carte-image .sans-photo-logo{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.carte-plat:hover .carte-image img{transform:scale(1.05)}
.carte-plat>img,.carte-plat>.sans-photo{width:100%;height:180px;object-fit:cover;display:block}
.sans-photo{background:linear-gradient(135deg,var(--or-pale),var(--or-clair));display:flex;align-items:center;justify-content:center;font-size:3rem}
.sans-photo-logo{background:var(--creme-2);display:flex;align-items:center;justify-content:center;padding:18%}
.sans-photo-logo img{width:100%;height:100%;object-fit:contain;opacity:.8}
.carte-corps{padding:14px 16px 18px;display:flex;flex-direction:column;flex:1}
.carte-corps h3{font-family:var(--police);font-size:1.04rem;font-weight:700;color:var(--encre);margin-bottom:4px}
.description-plat{font-size:.86rem;color:var(--gris);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:4px 0}
.etiquette-pays{align-self:flex-start;display:inline-block;background:var(--vert-pale);color:var(--vert-fonce);font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:999px;margin-bottom:8px}
.ligne-carte,.ligne-achat{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:10px}
.prix{font-weight:800;color:var(--terre);font-size:1.08rem;white-space:nowrap}
.prix-grand{font-size:1.5rem;font-weight:800;color:var(--terre)}
.temps{font-size:.82rem;color:var(--gris)}
.magasin-mini{font-size:.8rem;color:var(--gris);margin-top:2px}
.badge-verifie{display:inline-flex;align-items:center;gap:3px;background:#e6f4ea;color:#1e7e34;border:1px solid #b7e3c4;border-radius:20px;padding:1px 8px;font-size:.72rem;font-weight:700;vertical-align:middle}
.vide,.etat-vide{text-align:center;color:var(--gris);padding:40px 16px}
.etat-vide h2,.etat-vide h3{margin-bottom:8px}
.squelette{pointer-events:none;cursor:default}
.squelette-img{aspect-ratio:4/3;background:linear-gradient(90deg,#f1ead9 25%,#faf5ea 50%,#f1ead9 75%);background-size:200% 100%;animation:chatoie 1.3s infinite}
.squelette .carte-corps span{display:block;height:12px;border-radius:6px;margin:6px 0;background:linear-gradient(90deg,#f1ead9 25%,#faf5ea 50%,#f1ead9 75%);background-size:200% 100%;animation:chatoie 1.3s infinite}
.squelette .carte-corps span:last-child{width:60%}
@keyframes chatoie{to{background-position:-200% 0}}

/* ---- Page magasin ---- */
.entete-magasin{display:flex;gap:20px;align-items:center;flex-wrap:wrap;background:#fff;border-radius:var(--rayon);padding:20px;box-shadow:var(--ombre);margin-bottom:26px}
.entete-magasin img{width:96px;height:96px;border-radius:18px;object-fit:cover}
.titre-magasin{font-size:1.05rem;margin:18px 0 8px;display:flex;align-items:center;gap:8px}
.note-magasin{display:flex;align-items:center;gap:6px;color:var(--gris);font-size:.9rem}
.etoiles{color:var(--or);letter-spacing:2px}

/* ============================ POP-UP / MODALES ============================ */
.popup-fond{position:fixed;inset:0;z-index:100;background:rgba(14,40,24,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;animation:fondu .2s}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.popup-boite{background:var(--creme);border-radius:var(--rayon);max-width:560px;width:100%;max-height:min(88vh,900px);overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:popEntree .3s cubic-bezier(.34,1.4,.64,1) both;overscroll-behavior:contain}
.popup-large{max-width:820px}
@keyframes popEntree{from{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:none}}
.popup-entete{position:sticky;top:0;z-index:2;padding:16px 20px;background:var(--vert);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:4px solid var(--or)}
.popup-entete h2,.popup-entete h3{color:#fff;font-size:1.15rem}
.popup-corps{padding:22px}
.popup-message{font-size:1rem;margin-bottom:16px}
.popup-media{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--creme-2)}
.popup-media.statique,.statique{object-fit:contain}
.fermer-popup{background:none;border:none;color:inherit;font-size:1.5rem;cursor:pointer;line-height:1;width:36px;height:36px;border-radius:50%;flex-shrink:0}
.popup-entete .fermer-popup{color:#fff}
.popup-entete .fermer-popup:hover{background:rgba(255,255,255,.15)}
.btn.fermer-popup{width:100%;height:auto;border-radius:999px;font-size:1rem}
.popup-urgent .popup-entete{background:var(--rouge);border-bottom-color:#fff;animation:clignote 1s infinite}
@keyframes clignote{50%{background:#e74c3c}}

/* ---- Toasts ---- */
#zone-toasts{position:fixed;top:calc(var(--nav-h) + 12px);right:16px;z-index:120;display:flex;flex-direction:column;gap:10px;max-width:calc(100vw - 32px)}
.toast{background:var(--vert-fonce);color:#fff;padding:13px 16px;border-radius:12px;border-left:6px solid var(--or);box-shadow:var(--ombre-forte);max-width:360px;font-size:.92rem;animation:toastIn .35s cubic-bezier(.34,1.56,.64,1) both}
.toast.or{background:#fff;color:var(--encre);border-left-color:var(--or)}
.toast.rouge{background:var(--rouge);border-left-color:#fff}
@keyframes toastIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
.toast.sortie{animation:toastOut .3s both}
@keyframes toastOut{to{opacity:0;transform:translateX(60px)}}

/* ---- Chargement ---- */
.chargement{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--gris);padding:24px}
.spinner{display:inline-block;width:22px;height:22px;border-radius:50%;border:3px solid var(--bord);border-top-color:var(--vert);animation:tourne .8s linear infinite;vertical-align:middle}
@keyframes tourne{to{transform:rotate(360deg)}}

/* ============================ FORMULAIRES ============================ */
.carte-formulaire{background:#fff;border-radius:var(--rayon);box-shadow:var(--ombre);max-width:520px;margin:16px auto;padding:clamp(22px,4vw,36px);border-top:6px solid var(--or)}
.carte-formulaire.large,.carte-large{max-width:760px}
.carte-formulaire h1{margin-bottom:6px}
.champ{margin-bottom:16px}
.champ label{display:block;font-weight:600;margin-bottom:6px;font-size:.9rem}
.champ input:not([type=checkbox]):not([type=radio]),.champ textarea,.champ select,.champ-date,select.champ-recherche{
  width:100%;padding:11px 14px;border:2px solid var(--bord);border-radius:12px;font:inherit;font-size:.95rem;background:var(--creme);color:var(--encre);transition:border .2s,box-shadow .2s,background .2s}
.champ textarea{min-height:110px;resize:vertical}
.champ input:focus,.champ textarea:focus,.champ select:focus,.champ-date:focus{outline:none;border-color:var(--or);background:#fff;box-shadow:0 0 0 4px rgba(232,168,12,.18)}
.champ input[aria-invalid=true]{border-color:var(--rouge)}
.champ-date{width:auto;padding:8px 10px;background:#fff}
.champ-piege{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.deux-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.case,.cgu-case{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;margin:10px 0;cursor:pointer}
.case input,.cgu-case input{width:18px;height:18px;margin-top:3px;flex-shrink:0;accent-color:var(--vert)}
.msg-erreur,.msg-succes,.msg-info{padding:11px 14px;border-radius:10px;margin-bottom:14px;display:none;font-size:.92rem;border-left:4px solid}
.msg-erreur{background:var(--rouge-pale);color:#8e2a20;border-color:var(--rouge)}
.msg-succes{background:#e9f7ec;color:var(--vert-fonce);border-color:var(--vert)}
.msg-info{background:var(--bleu-pale);color:var(--bleu);border-color:var(--bleu)}
.msg-erreur.visible,.msg-succes.visible,.msg-info.visible{display:block}
.msg-erreur a{color:inherit;font-weight:700}
.bandeau-alerte,.bandeau-info,.bandeau-succes{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;padding:14px 16px;border-radius:12px;margin-bottom:18px;border:1px solid;font-size:.93rem}
.bandeau-alerte{background:#FFF6E0;border-color:#F3D38A;color:#6b4a00}
.bandeau-info{background:var(--bleu-pale);border-color:#b8d6f2;color:var(--bleu)}
.bandeau-succes{background:#e9f7ec;border-color:#b7e3c4;color:var(--vert-fonce)}
.bandeau-alerte>:first-child,.bandeau-info>:first-child,.bandeau-succes>:first-child{flex:1 1 240px}
.iti{width:100%}

/* ============================ TABLEAUX ============================ */
.tableau{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre);font-size:.92rem}
.tableau th{background:var(--vert);color:#fff;text-align:left;padding:12px 14px;font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.tableau td{padding:11px 14px;border-bottom:1px solid #f0e9d8;vertical-align:middle}
.tableau tr:last-child td{border-bottom:none}
.tableau tbody tr:hover td{background:#FFFAEB}
.tableau-compact{font-size:.84rem}
.tableau-compact th{padding:9px 10px;font-size:.74rem}
.tableau-compact td{padding:8px 10px}
.cellule-longue{max-width:280px;overflow-wrap:anywhere;white-space:normal}
.ligne-nouvelle td{background:#FFF7DA!important;box-shadow:inset 0 0 0 0 transparent}
.ligne-nouvelle td:first-child{box-shadow:inset 4px 0 0 var(--or)}
.barre-filtres{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:#fff;padding:14px;border-radius:var(--rayon);box-shadow:var(--ombre);margin-bottom:16px}
.barre-filtres label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;font-weight:600;color:var(--gris)}
.barre-filtres select,.barre-filtres input{padding:8px 10px;border:2px solid var(--bord);border-radius:10px;font:inherit;font-size:.88rem;background:var(--creme)}
.barre-filtres .champ-recherche{flex:1 1 220px;min-width:180px;padding:8px 12px}
.pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0;flex-wrap:wrap;color:var(--gris);font-size:.9rem}

.pastille{display:inline-flex;align-items:center;gap:4px;padding:3px 11px;border-radius:999px;font-size:.76rem;font-weight:700;white-space:nowrap;background:#eee;color:#555}
.pastille.attente{background:#fff3cd;color:#7a5f00}
.pastille.preparation{background:var(--bleu-pale);color:var(--bleu)}
.pastille.pret{background:#e3f5e8;color:var(--vert-fonce)}
.pastille.livraison{background:#EDE7FB;color:#5B3DB3}
.pastille.livre{background:var(--vert);color:#fff}
.pastille.rejete,.pastille.inactif{background:var(--rouge-pale);color:var(--rouge)}
.pastille.inactif{background:#eeeae2;color:#6e6555}
.pastille.approuve{background:var(--or-pale);color:var(--terre)}

/* ============================ PANIER / COMMANDE ============================ */
.zone-panier{max-width:1100px;margin:0 auto}
.panier-grille{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.panier-grille .total-boite{position:sticky;top:calc(var(--nav-h) + 16px);margin-top:0}
.ligne-panier{display:flex;gap:14px;align-items:center;background:#fff;border-radius:14px;padding:12px;box-shadow:var(--ombre);margin-bottom:12px;animation:apparait .35s both}
.ligne-panier img,.ligne-panier .sans-photo,.ligne-panier .sans-photo-logo{width:72px;height:72px;border-radius:12px;object-fit:cover;font-size:1.8rem;flex:none;padding:8px}
.ligne-panier img{padding:0}
.ligne-panier-infos{flex:1;min-width:0}
.ligne-panier-infos h3{font-family:var(--police);font-size:1rem;color:var(--encre)}
.qte{display:flex;align-items:center;gap:8px}
.qte button{width:32px;height:32px;border-radius:50%;border:2px solid var(--vert);background:#fff;color:var(--vert);font-weight:800;cursor:pointer;transition:all .2s}
.qte button:hover{background:var(--vert);color:#fff}
.total-boite{background:linear-gradient(135deg,var(--vert-fonce),var(--vert));color:#fff;border-radius:var(--rayon);padding:22px;margin-top:20px;box-shadow:var(--ombre-forte)}
.total-boite h2,.total-boite h3{color:#fff;margin-bottom:12px}
.total-boite .ligne{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}
.total-final{font-size:1.35rem;font-weight:800;color:var(--or-clair);border-top:1px dashed rgba(255,255,255,.3);padding-top:10px;margin-top:6px}

.etapes{display:flex;gap:8px;margin-bottom:26px;list-style:none;counter-reset:none}
.etapes .etape{flex:1;text-align:center;padding:10px 8px;border-radius:12px;background:#fff;border:2px dashed var(--bord);color:var(--gris-clair);font-weight:600;font-size:.9rem;transition:all .3s}
.etapes .etape.active{background:var(--vert);color:#fff;border-style:solid;border-color:var(--vert);box-shadow:0 6px 16px rgba(27,110,60,.25)}
.etapes .etape.faite{background:var(--or-pale);color:var(--terre);border-style:solid;border-color:var(--or)}
.grille-choix{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.choix-carte{border:2px solid var(--bord);border-radius:var(--rayon);padding:18px;cursor:pointer;background:#fff;transition:all .2s;position:relative;text-align:left;font:inherit;color:inherit;display:flex;flex-direction:column;gap:4px}
.choix-carte:hover:not(.indisponible):not(:disabled){border-color:var(--or);transform:translateY(-2px)}
.choix-carte.choisi{border-color:var(--vert);background:#F2FBF4;box-shadow:0 0 0 4px rgba(27,110,60,.13)}
.choix-carte.choisi::after{content:'✓';position:absolute;top:12px;right:14px;width:24px;height:24px;border-radius:50%;background:var(--vert);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800}
.choix-carte.indisponible,.choix-carte:disabled{opacity:.55;cursor:not-allowed;background:#faf7ef}
.choix-icone{font-size:1.8rem;line-height:1}
.ruban{position:absolute;top:12px;right:-6px;background:var(--rouge);color:#fff;font-size:.7rem;font-weight:800;padding:3px 10px;border-radius:6px 0 0 6px;text-transform:uppercase;letter-spacing:.04em}
.mode-remise{display:inline-block;font-size:.88rem;font-weight:600;color:var(--vert-fonce);background:var(--vert-pale);padding:4px 12px;border-radius:999px;margin:6px 0}
.bloc-livraison,.bloc-livraison-client{background:#fff;border:1px solid var(--bord);border-radius:var(--rayon);padding:16px;margin:14px 0}
.carte-livraison{height:300px;border-radius:12px;overflow:hidden;border:2px solid var(--bord);margin:10px 0;background:var(--creme-2);z-index:0}
.info-livraison{font-size:.9rem;color:var(--vert-fonce);font-weight:600;min-height:1.2em}
.recap-frais{background:#fff;border:1px solid var(--bord);border-radius:var(--rayon);padding:14px 16px;margin:16px 0}
.ligne-frais{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:.93rem}
.ligne-frais small{color:var(--gris)}
.ligne-total{border-top:2px dashed var(--bord);margin-top:6px;padding-top:10px;font-size:1.08rem}
.ligne-total b{color:var(--terre);font-size:1.2rem}
#element-paiement,#stripe-element{background:#fff;border:2px solid var(--bord);border-radius:12px;padding:14px;margin:12px 0}

/* ---- Codes de remise / QR ---- */
.code-livraison,.code-retrait{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--or-pale);border:2px dashed var(--or);border-radius:var(--rayon);padding:16px;margin:12px 0;text-align:center}
.code-livraison b,.code-retrait b,.ligne-code b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(1.6rem,6vw,2.2rem);letter-spacing:.3em;color:var(--vert-fonce);padding-left:.3em}
.ligne-code{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.grille-qr{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;align-items:start;margin:12px 0}
.qr,.boite-qr{background:#fff;border-radius:14px;padding:14px;text-align:center;display:inline-block;box-shadow:var(--ombre);border:3px solid var(--vert)}
.qr img,.qr canvas,.boite-qr img,.boite-qr canvas{display:block;margin:0 auto;max-width:200px}
#lecteur-qr{max-width:420px;margin:0 auto;border-radius:14px;overflow:hidden;border:4px solid var(--or)}
.form-code{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.form-code input{flex:1 1 160px;padding:10px 14px;border:2px solid var(--bord);border-radius:12px;font:700 1.1rem ui-monospace,monospace;letter-spacing:.2em;text-align:center}
.form-code input:focus{outline:none;border-color:var(--or)}
.suivi{display:flex;margin:14px 0 6px;list-style:none;counter-reset:etape}
.suivi li{flex:1 1 0;min-width:0;position:relative;text-align:center;font-size:.74rem;font-weight:600;color:var(--gris-clair);padding-top:26px;line-height:1.25;overflow-wrap:break-word;hyphens:auto}
.suivi li span{position:absolute;top:0;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--bord);z-index:1}
.suivi li::before{content:'';position:absolute;top:8px;left:-50%;width:100%;height:4px;background:var(--bord)}
.suivi li:first-child::before{display:none}
.suivi li.fait,.suivi li.actuel{color:var(--vert-fonce)}
.suivi li.fait span{background:var(--vert);border-color:var(--vert)}
.suivi li.fait::before,.suivi li.actuel::before{background:var(--vert)}
.suivi li.actuel span{border-color:var(--or);background:var(--or-clair);box-shadow:0 0 0 4px rgba(232,168,12,.25)}

/* ============================ MES COMMANDES ============================ */
.entete-commande{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.pied-commande{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--bord)}

/* ============================ ESPACES CUISINIER / ADMIN / LIVREUR ============================ */
.entete-espace{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:24px}
.onglets{display:flex;gap:6px;margin-bottom:22px;overflow-x:auto;border-bottom:2px solid var(--bord);scrollbar-width:thin}
.onglet{flex-shrink:0;padding:10px 18px;border:none;background:none;cursor:pointer;font:600 .92rem var(--police);color:var(--gris);border-bottom:3px solid transparent;margin-bottom:-2px;display:inline-flex;align-items:center;gap:6px;transition:color .2s,border-color .2s;white-space:nowrap}
.onglet:hover{color:var(--vert-fonce)}
.onglet.actif{color:var(--vert-fonce);border-bottom-color:var(--or)}
.panneau{display:none;animation:apparait .3s both}
.panneau.actif{display:block}
.stat-grille,.stats-livreur,.stats-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.stat{background:#fff;border-radius:14px;padding:16px 18px;box-shadow:var(--ombre);border-left:5px solid var(--or);font-size:.88rem;color:var(--gris)}
.stat b{font-size:1.6rem;color:var(--vert-fonce);display:block;font-family:var(--police-titre);line-height:1.2}
.carte-commande{background:#fff;border-radius:var(--rayon);box-shadow:var(--ombre);padding:18px;margin-bottom:16px;border-left:6px solid var(--or);animation:apparait .35s both}
.carte-commande.nouvelle{border-left-color:var(--rouge);animation:vibre .5s 3}
@keyframes vibre{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.carte-commande h3{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;font-family:var(--police)}
.item-cmd{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed #eadfc6;gap:10px;flex-wrap:wrap}
.item-cmd:last-child{border-bottom:none}
.groupe-parametres{background:#fff;border-radius:var(--rayon);box-shadow:var(--ombre);padding:18px;margin-bottom:18px}
.groupe-parametres>h3,.groupe-parametres>legend{font-size:1.02rem;margin-bottom:12px}
.grille-parametres{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.grille-parametres .champ{margin-bottom:0}

/* ---- Livreur ---- */
.carte-statut-livreur{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;background:#fff;border-radius:var(--rayon);padding:18px 20px;box-shadow:var(--ombre);margin-bottom:20px;border-left:6px solid var(--vert)}
.statut-entete{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.statut-attente{background:#FFF6E0;border:1px solid #F3D38A;border-radius:var(--rayon);padding:22px;text-align:center}
.interrupteur{display:inline-flex;align-items:center;gap:12px;cursor:pointer;user-select:none;font-weight:600}
.interrupteur input{position:absolute;opacity:0;width:1px;height:1px}
.glissiere{width:52px;height:28px;border-radius:999px;background:#ddd3bd;position:relative;transition:.25s;flex:none}
.glissiere::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.25s;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.interrupteur input:checked+.glissiere{background:var(--vert)}
.interrupteur input:checked+.glissiere::after{left:27px;background:var(--or-clair)}
.interrupteur input:focus-visible+.glissiere{outline:3px solid var(--or);outline-offset:2px}
.interrupteur-grand .glissiere{width:64px;height:34px}
.interrupteur-grand .glissiere::after{width:28px;height:28px}
.interrupteur-grand input:checked+.glissiere::after{left:33px}
.badge-compte{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--or);color:var(--encre);font-size:.74rem;font-weight:800}
.badge-premium{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#F7C948,#E8A80C);color:var(--encre);font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 2px 8px rgba(232,168,12,.35)}
.badge-premium.grand{font-size:.9rem;padding:6px 16px}
.lien-premium{font-weight:700;color:var(--terre)}
.carte-livraison-dispo,.carte-ma-livraison{background:#fff;border-radius:var(--rayon);box-shadow:var(--ombre);padding:16px 18px;margin-bottom:14px;border-left:6px solid var(--vert);animation:apparait .3s both}
.carte-livraison-dispo.pas-prete{border-left-color:var(--or);background:#FFFDF6}
.carte-ma-livraison.statut-recuperee,.carte-ma-livraison.statut-en_livraison{border-left-color:#5B3DB3}
.carte-ma-livraison.statut-livree{border-left-color:var(--gris-clair);opacity:.85}
.carte-livraison-dispo h3,.carte-ma-livraison h3{font-family:var(--police);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.gain{font-weight:800;color:var(--vert);font-size:1.1rem;white-space:nowrap}
.liste-restos{list-style:none;margin:8px 0;display:flex;flex-direction:column;gap:6px}
.liste-restos li{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 10px;background:var(--creme);border-radius:10px;font-size:.9rem}
.etape-retrait,.etape-livraison{padding:10px 12px;border-radius:10px;border:1px solid var(--bord);margin:8px 0;background:#fff}
.etape-retrait.fait{background:#e9f7ec;border-color:#b7e3c4}
.tableau-livreur td:last-child{text-align:right}
.livreur-hero{background:linear-gradient(125deg,var(--vert-fonce),var(--vert));color:#fff;border-radius:var(--rayon);padding:28px;margin-bottom:22px}
.livreur-hero h1,.livreur-hero h2{color:#fff}
.liste-avantages{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:14px 0}
.liste-avantages li{background:rgba(255,255,255,.1);border-radius:12px;padding:10px 12px;font-size:.92rem}

/* ---- Portefeuille ---- */
.grille-portefeuille{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:22px}
.carte-solde{background:#fff;border-radius:var(--rayon);padding:18px;box-shadow:var(--ombre);border-top:4px solid var(--or);color:var(--gris);font-size:.88rem}
.carte-solde:first-child{background:linear-gradient(135deg,var(--vert-fonce),var(--vert));color:#EAF6E5;border-top-color:var(--or-clair)}
.carte-solde .valeur,.valeur{display:block;font-family:var(--police-titre);font-size:1.7rem;font-weight:700;color:var(--vert-fonce);line-height:1.2;margin-top:4px}
.carte-solde:first-child .valeur{color:var(--or-clair)}
.carte-retrait{background:#fff;border-radius:var(--rayon);padding:20px;box-shadow:var(--ombre);margin-bottom:20px}

/* ---- Offres premium / plans ---- */
.offre-premium{background:linear-gradient(135deg,#FFF8E1,#FFF1C2);border:2px solid var(--or-clair);border-radius:var(--rayon);padding:18px 20px;margin:16px 0}
.grille-offres,.grille-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:20px 0;align-items:stretch}
.carte-offre,.plan-carte{position:relative;background:#fff;border:2px solid var(--bord);border-radius:calc(var(--rayon) + 4px);padding:26px 22px;box-shadow:var(--ombre);display:flex;flex-direction:column;gap:12px;overflow:hidden}
.carte-offre ul,.plan-carte ul{list-style:none;display:flex;flex-direction:column;gap:8px;flex:1;font-size:.93rem}
.carte-offre li::before,.plan-carte li::before{content:'✓';color:var(--vert);font-weight:800;margin-right:8px}
.carte-offre li.non{color:var(--gris-clair)}
.carte-offre li.non::before{content:'—';color:var(--gris-clair)}
.carte-offre-premium,.plan-carte.recommande{border-color:var(--or);box-shadow:0 18px 44px rgba(232,168,12,.25);background:linear-gradient(180deg,#FFFCF2,#fff)}
.offre-entete{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.offre-entete h2,.offre-entete h3{font-size:1.25rem}
.prix-offre,.plan-prix{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;font-family:var(--police-titre);font-size:2.2rem;font-weight:700;color:var(--vert-fonce);line-height:1.1}
.prix-offre small,.plan-prix small{font-family:var(--police);font-size:.9rem;font-weight:500;color:var(--gris)}
.prix-barre{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--rouge);color:var(--gris-clair);font-size:.6em;font-weight:600}

/* ---- Choix du type de compte (sect.php) ---- */
.choix-container{max-width:1000px;margin:0 auto}
.cartes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:26px}
.carte-choix{background:#fff;border-radius:calc(var(--rayon) + 4px);padding:28px 24px;box-shadow:var(--ombre);display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;border-top:5px solid var(--or);transition:transform .25s,box-shadow .25s}
.carte-choix:hover{transform:translateY(-5px);box-shadow:var(--ombre-forte)}
.carte-icon{font-size:2.8rem;line-height:1}
.carte-icon img{width:90px;height:90px;object-fit:contain}
.carte-titre{font-size:1.25rem}
.carte-description{color:var(--gris);font-size:.93rem;flex:1}

/* ============================ MESSAGERIE / SUPPORT ============================ */
.messagerie{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;min-height:520px}
.messagerie-liste{background:#fff;border-radius:var(--rayon);box-shadow:var(--ombre);overflow-y:auto;max-height:70vh;padding:8px}
.ticket-item{display:block;width:100%;text-align:left;background:none;border:none;border-radius:12px;padding:12px;cursor:pointer;font:inherit;color:inherit;border-left:4px solid transparent;transition:background .2s}
.ticket-item:hover{background:var(--creme)}
.ticket-item.actif{background:var(--or-pale);border-left-color:var(--or)}
.ticket-item.non-lu,.non-lu{font-weight:700}
.ticket-item.non-lu::after,tr.non-lu td:first-child::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rouge);margin-left:6px;vertical-align:middle}
tr.non-lu td:first-child::before{margin:0 6px 0 0}
.messagerie-panneau{background:#fff;border-radius:var(--rayon);box-shadow:var(--ombre);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.panneau-entete{padding:14px 18px;border-bottom:1px solid var(--bord);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--creme)}
.panneau-actif{display:flex;flex-direction:column;flex:1;min-height:0}
.panneau-vide{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gris);padding:40px;text-align:center}
.chat-messages{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:#FDFBF5;max-height:60vh;min-height:240px}
.bulle{max-width:78%;padding:10px 14px;border-radius:16px;font-size:.93rem;box-shadow:0 1px 2px rgba(0,0,0,.06);overflow-wrap:anywhere;white-space:pre-wrap}
.bulle.moi{align-self:flex-end;background:var(--vert);color:#fff;border-bottom-right-radius:4px}
.bulle.eux{align-self:flex-start;background:#fff;border:1px solid var(--bord);border-bottom-left-radius:4px}
.bulle.ia{align-self:flex-start;background:var(--bleu-pale);color:#123;border-bottom-left-radius:4px}
.bulle-auteur{font-size:.72rem;font-weight:700;opacity:.75;margin-bottom:2px;white-space:normal}
.bulle img{border-radius:10px;max-width:220px;display:block;margin-top:6px}
.chat-photos{display:flex;gap:6px;flex-wrap:wrap}
.form-chat{display:flex;gap:10px;padding:12px;border-top:1px solid var(--bord);align-items:flex-end;flex-wrap:wrap}
.form-chat textarea,.form-chat input[type=text]{flex:1 1 200px;min-height:44px;max-height:160px;padding:10px 14px;border:2px solid var(--bord);border-radius:14px;font:inherit;resize:vertical;background:var(--creme)}
.form-chat textarea:focus{outline:none;border-color:var(--or)}
.contact-item{background:#fff;border-radius:var(--rayon);box-shadow:var(--ombre);padding:16px 18px;margin-bottom:12px;border-left:5px solid var(--bord)}
.contact-item.non-lu{border-left-color:var(--rouge)}
.corps-message{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--creme);border-radius:10px;padding:12px;margin:10px 0;font-size:.93rem}
.infos-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--bord);font-size:.92rem}

/* ============================ PAGES LÉGALES / CGU ============================ */
.legal{max-width:860px;margin:0 auto;background:#fff;border-radius:var(--rayon);box-shadow:var(--ombre);padding:clamp(22px,5vw,48px);line-height:1.75}
.legal h1{margin-bottom:8px}
.legal h2{font-size:1.25rem;margin:28px 0 10px}
.legal h3{font-size:1.05rem;margin:18px 0 8px;font-family:var(--police)}
.legal p,.legal ul,.legal ol{margin-bottom:12px}
.legal ul,.legal ol{padding-left:22px}
.legal table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.9rem}
.legal th,.legal td{border:1px solid var(--bord);padding:8px 10px;text-align:left;vertical-align:top}
.legal th{background:var(--creme-2)}
.encadre{background:var(--or-pale);border-left:4px solid var(--or);border-radius:10px;padding:14px 16px;margin:16px 0}
.cgu-texte-scroll{max-height:50vh;overflow-y:auto;padding:16px;background:#fff;border:1px solid var(--bord);border-radius:12px;font-size:.9rem;line-height:1.7}
.cgu-texte-scroll h2,.cgu-texte-scroll h3{font-size:1.02rem;margin:14px 0 6px}
.cgu-fin{text-align:center;color:var(--gris);font-size:.8rem;padding-top:8px}
.cgu-pied{display:flex;flex-direction:column;gap:12px;margin-top:14px}

/* ============================ PIED DE PAGE ============================ */
.pied{flex-shrink:0;margin-top:40px;background:var(--vert-fonce);color:#cfe8cf;position:relative}
.pied-frise{height:10px;background:repeating-linear-gradient(90deg,var(--or) 0 22px,var(--vert-clair) 22px 34px,var(--terre) 34px 46px,var(--or-clair) 46px 58px)}
.pied-interieur{max-width:1200px;margin:0 auto;padding:32px max(4vw,16px) 18px;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.pied-marque{display:flex;align-items:center;gap:14px;max-width:420px}
.pied-marque img{background:#fff;border-radius:10px;padding:3px;height:56px;width:auto}
.pied-marque p{font-size:.92rem;color:#cfe8cf}
.pied-liens{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.9rem}
.pied-liens a{color:#e2f2e2;text-decoration:none}
.pied-liens a:hover{color:var(--or-clair);text-decoration:underline}
.pied-copyright{text-align:center;font-size:.8rem;color:#9fc4a6;padding:14px 16px 20px;border-top:1px solid rgba(255,255,255,.08)}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1180px){
  .nav-toggle{display:flex}
  .nav{flex-wrap:wrap;gap:12px}
  .logo-img{height:46px}
  .nav-collapse{display:none;flex-direction:column;align-items:stretch;width:100%;order:5;gap:14px;padding:12px 0 6px;border-top:1px solid rgba(255,255,255,.2);max-height:calc(100vh - var(--nav-h));overflow-y:auto}
  .nav-collapse.ouvert{display:flex}
  .nav-liens{flex-direction:column;align-items:stretch;gap:2px}
  .nav-liens a{padding:11px 14px;border-radius:10px;font-size:1rem}
  .nav-actions{flex-wrap:wrap;justify-content:center;gap:10px}
  .salut{width:100%;text-align:center}
}
@media (max-width:900px){
  .etapes-grille{grid-template-columns:repeat(2,1fr)}
  .panier-grille{grid-template-columns:1fr}
  .panier-grille .total-boite{position:static}
  .messagerie{grid-template-columns:1fr}
  .messagerie-liste{max-height:280px}
}
@media (max-width:640px){
  body{font-size:15px}
  .contenu{padding:20px 14px 36px}
  .deux-colonnes,.grille-choix,.grille-2{grid-template-columns:1fr}
  .etapes{gap:4px}
  .etapes .etape{font-size:.76rem;padding:8px 4px}
  .heros{border-radius:var(--rayon)}
  .heros-actions .btn{flex:1 1 auto}
  .grille-plats{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .carte-corps{padding:10px 12px 14px}
  .tableau th,.tableau td{padding:9px 10px}
  .popup-fond{padding:0;align-items:flex-end}
  .popup-boite{max-height:92vh;border-radius:var(--rayon) var(--rayon) 0 0}
  .bulle{max-width:90%}
  .pied-interieur{flex-direction:column;align-items:center;text-align:center}
  .pied-marque{flex-direction:column}
  .pied-liens{justify-content:center}
  #zone-toasts{left:16px;right:16px}
  .toast{max-width:none}
  .barre-filtres>*{flex:1 1 140px}
}
@media (max-width:420px){
  .etapes-grille{grid-template-columns:1fr}
  .grille-plats{grid-template-columns:1fr 1fr}
  .carte-corps h3{font-size:.94rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-pret .revele:not(.visible){opacity:1;transform:none}
}
@media print{
  .nav,.pied,#zone-toasts,.btn{display:none!important}
  body{background:#fff}
  .contenu{padding:0}
}

/* ---- Ajustements après revue visuelle ---- */
.stats-livreur{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:0;flex:1 1 360px;max-width:640px}
.stats-livreur>div{background:var(--creme);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.stats-livreur span{font-size:.76rem;color:var(--gris);font-weight:600}
.stats-livreur b{font-size:1.15rem;color:var(--vert-fonce)}
.stats-livreur b a{color:inherit}
.barre-filtres input[type=search]{flex:1 1 240px;min-width:180px}
label.champ-date{display:flex;flex-direction:column;gap:4px;width:auto;border:none;padding:0;background:none;box-shadow:none}
.barre-filtres .btn{align-self:flex-end}
.table-scroll>.tableau-compact{min-width:1080px}
.tableau-compact .cellule-longue{min-width:200px}
.liste-restos li>:nth-child(2){flex:1;text-align:left}
@media (min-width:1181px) and (max-width:1420px){
  .nav{gap:14px}
  .nav-liens a{padding:7px 9px;font-size:.86rem}
  .salut{display:none}
  .logo-img{height:48px}
}
@media (max-width:420px){.suivi li{font-size:.64rem;letter-spacing:-.01em}}

/* ============ ACCUEIL MOBILE (téléphones ≤ 600px, y compris l'app Android WebView) ============
 * Héros compact : les plats et la recherche apparaissent dès le premier écran.
 * « Comment ça marche » : carrousel horizontal à glisser + points indicateurs.
 * Le bureau (> 600px) n'est pas modifié. */
.etapes-points{display:none}
@media (max-width:600px){
  .heros{padding:18px 18px 16px;margin-bottom:20px;border-radius:var(--rayon);box-shadow:var(--ombre)}
  .heros::after{right:-46px;bottom:-56px;width:150px;height:150px;border-width:16px}
  .heros .surtitre{font-size:.66rem;letter-spacing:.14em;margin-bottom:6px}
  .heros h1{font-size:1.34rem;line-height:1.22;margin-bottom:0;letter-spacing:-.005em}
  .heros h1 br{display:none}
  .heros-texte>p:not(.surtitre){display:none}
  .heros-actions{flex-wrap:nowrap;gap:8px;margin-top:14px}
  .heros-actions .btn{flex:1 1 0;min-width:0;padding:9px 10px;font-size:.84rem;line-height:1.2;min-height:40px}

  .comment-ca-marche{margin:0 0 6px}
  .comment-ca-marche .titre-section{font-size:1.2rem;margin-bottom:12px;padding-bottom:8px}
  .comment-ca-marche .titre-section::after{width:40px;height:3px}
  .etapes-grille{display:flex;grid-template-columns:none;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -14px;padding:4px 14px 10px;scroll-padding:0 14px}
  .etapes-grille::-webkit-scrollbar{display:none}
  .etape-accueil{flex:0 0 80%;scroll-snap-align:start;display:grid;grid-template-columns:58px 1fr;grid-template-rows:auto 1fr;column-gap:12px;
    align-items:start;text-align:left;padding:12px 14px;border-top-width:3px}
  .etape-accueil:hover{transform:none}
  .etape-accueil img{grid-row:1/3;width:58px;height:58px;margin:0}
  .etape-accueil h3{font-size:.95rem;margin:2px 0 3px}
  .etape-accueil p{font-size:.8rem;line-height:1.4}
  .js-pret .etapes-grille .revele:not(.visible){opacity:1;transform:none}
  .etapes-points{display:flex;justify-content:center;gap:6px;margin-top:2px}
  .etapes-points button{width:8px;height:8px;padding:0;border:none;border-radius:999px;background:var(--bord);cursor:pointer;transition:width .25s,background .25s}
  .etapes-points button.actif{width:22px;background:var(--or)}
  .popup-media{max-height:34vh;overflow:hidden}
  .popup-media>img{width:100%;height:100%;max-height:34vh;object-fit:cover;display:block}
  .section-plats{margin-top:22px}
  .section-plats .titre-section{margin-bottom:14px}
}
@media (max-width:360px){
  .heros h1{font-size:1.22rem}
  .heros-actions .btn{font-size:.8rem;padding:8px 8px}
}

/* ===== SEO : liens réels dans les cartes, bloc texte, fil d'Ariane, fiche plat, bandeau cookies ===== */
.carte-plat h3 a,.lien-plat{color:inherit;text-decoration:none}
.carte-plat h3 a:hover{color:var(--vert)}
.magasin-mini a{color:inherit;text-decoration:none}
.magasin-mini a:hover{color:var(--vert);text-decoration:underline;text-underline-offset:2px}
.bloc-seo{margin:56px auto 8px;max-width:900px}
.bloc-seo-texte p{color:var(--gris);line-height:1.75;margin-bottom:12px;font-size:.98rem}
.bloc-seo-sous-titre{font-family:var(--police);font-size:1.02rem;color:var(--vert-fonce);margin:22px 0 10px}
.liste-magasins{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.liste-magasins li{background:#fff;border:1px solid var(--bord);border-radius:var(--rayon-petit);padding:10px 14px;min-width:0}
.liste-magasins li a{text-decoration:none}
.liste-magasins .aide{display:block;overflow-wrap:anywhere}
.bloc-seo-cta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;font-weight:600;font-size:.92rem}
.bloc-seo-cta a{text-underline-offset:3px}
.fil-ariane{font-size:.85rem;color:var(--gris);margin:0 0 16px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.fil-ariane a{color:var(--vert);text-decoration:none}
.fil-ariane a:hover{text-decoration:underline}
.fil-ariane [aria-current]{color:var(--encre);font-weight:600;overflow-wrap:anywhere}
.fiche-plat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:#fff;border-radius:var(--rayon);box-shadow:var(--ombre);overflow:hidden;margin-bottom:36px}
.fiche-plat-media{background:var(--creme-2);aspect-ratio:4/3;min-height:100%}
.fiche-plat-media img,.fiche-plat-media .sans-photo-logo{width:100%;height:100%;object-fit:cover;display:block}
.fiche-plat-corps{padding:clamp(20px,3vw,34px);display:flex;flex-direction:column;gap:8px;min-width:0}
.fiche-plat-corps h1{font-size:clamp(1.5rem,3vw,2.2rem);overflow-wrap:anywhere}
.fiche-plat-description{color:var(--gris);line-height:1.7}
.fiche-plat .ligne-achat{margin-top:10px}
@media (max-width:760px){.fiche-plat{grid-template-columns:1fr}.fiche-plat-media{min-height:0}}
.bandeau-cookies{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:150;width:min(760px,calc(100% - 24px));background:#fff;border-radius:var(--rayon);box-shadow:var(--ombre-forte);border-top:5px solid var(--or);padding:16px 18px;display:flex;gap:14px 20px;align-items:center;flex-wrap:wrap;font-size:.9rem}
.bandeau-cookies[hidden]{display:none}
.bandeau-cookies p{flex:1 1 300px;margin:0;color:var(--encre);line-height:1.5}
.bandeau-cookies-actions{display:flex;gap:10px;flex-wrap:wrap}
.bandeau-cookies .btn{padding:9px 18px}

/* ===== Menu mobile/tablette (≤ 1180px) : tiroir latéral pleine hauteur =====
 * En-tête compact : logo · panier · bouton menu. Le tiroir glisse depuis la droite (100dvh, repli 100vh),
 * fond assombri cliquable, page bloquée derrière, zones sûres Android. Le bureau (> 1180px) n'est pas modifié. */
.nav-panier-mobile{display:none}
@media (max-width:1180px){
  .nav{flex-wrap:nowrap;gap:10px}
  .nav-panier-mobile{display:inline-flex;margin-left:auto;flex-shrink:0}
  .nav-panier-mobile~.nav-toggle{margin-left:4px}
  .nav-actions .btn-panier{display:none}
  .nav-toggle{position:relative;z-index:3;width:46px;height:44px;align-items:center;justify-content:center;padding:0}
  .nav::before{content:'';position:fixed;inset:0;z-index:1;background:rgba(8,28,16,.55);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s linear .25s}
  html.menu-ouvert .nav::before{opacity:1;visibility:visible;transition:opacity .25s,visibility 0s}
  html.menu-ouvert{overflow:hidden}
  /* body{overflow-x:hidden} devient un conteneur de défilement quand <html> est bloqué : l'en-tête « sticky » partait alors
     hors écran (page défilée). clip ne crée pas de conteneur → l'en-tête et le bouton × restent en place. */
  html.menu-ouvert body{overflow-x:clip}
  .nav-collapse,.nav-collapse.ouvert{display:flex}
  .nav-collapse{position:fixed;top:0;right:0;bottom:0;z-index:2;width:min(86vw,360px);height:100vh;height:100dvh;max-height:none;order:0;flex:none;
    flex-direction:column;align-items:stretch;gap:16px;margin:0;padding:calc(var(--nav-h) + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom));
    border:0;border-left:4px solid var(--or);background:linear-gradient(180deg,var(--vert-fonce),var(--vert));box-shadow:-18px 0 40px rgba(0,0,0,.3);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;transform:translateX(105%);visibility:hidden;
    transition:transform .3s cubic-bezier(.22,.9,.3,1),visibility 0s linear .3s}
  .nav-collapse.ouvert{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.22,.9,.3,1),visibility 0s}
  .nav-collapse::before{content:attr(data-titre);position:absolute;top:calc(env(safe-area-inset-top) + 22px);left:20px;font-family:var(--police-titre);font-size:1.25rem;font-weight:700;color:#fff;line-height:1.2}
  .nav-liens{flex:none;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:2px;padding-top:10px;border-top:1px solid rgba(255,255,255,.18)}
  .nav-liens a{display:flex;min-height:48px;padding:12px 14px;border-radius:12px;font-size:1rem;white-space:normal;line-height:1.3}
  .nav-liens a .pastille-compteur{margin-left:auto}
  .nav-actions{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}
  .selecteur-langue{display:flex}
  .selecteur-langue a{flex:1;text-align:center;padding:9px 0;font-size:.85rem}
  .salut{width:auto;text-align:left;white-space:normal}
  .nav-actions .btn-nav{width:100%;justify-content:center;text-align:center;padding:12px 16px;font-size:.95rem}
}
@media (max-width:1180px) and (max-height:700px){
  .nav-collapse{gap:10px;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .nav-liens a{min-height:44px;padding:10px 14px}
  .nav-actions{gap:8px;padding-top:12px}
  .nav-actions .btn-nav{padding:10px 16px}
}

/* ===== Fiche plat (fenêtre ouverte depuis une carte) =====
 * Bureau : rendu inchangé (le pied reprend les marges de .popup-corps).
 * Téléphone (≤ 600px) et paysage bas : « bottom sheet » — en-tête fixe avec ×, contenu défilant,
 * pied fixe prix + quantité + « Ajouter au panier » toujours visible, 92dvh max (repli vh), zones sûres Android. */
.popup-plat .popup-corps{padding-bottom:0}
.popup-plat .popup-pied{padding:0 22px 22px}
@keyframes feuilleMonte{from{transform:translateY(100%)}to{transform:none}}
@keyframes feuilleDescend{from{transform:none}to{transform:translateY(100%)}}
@keyframes fonduSortie{to{opacity:0}}
@media (max-width:600px),(max-height:500px) and (orientation:landscape){
  .popup-fond{padding:env(safe-area-inset-top) 0 0;align-items:flex-end}
  html.modale-ouverte body,html:has(.popup-fond:not(.cache)) body{overflow-x:clip}
  .popup-boite{max-height:92vh;max-height:92dvh;border-radius:var(--rayon) var(--rayon) 0 0}
  .popup-fond.sortie{animation:fonduSortie .2s ease-in both}
  .popup-plat{display:flex;flex-direction:column;overflow:hidden;max-width:600px;margin:0 auto;border-radius:22px 22px 0 0;
    box-shadow:0 -12px 40px rgba(0,0,0,.28);animation:feuilleMonte .32s cubic-bezier(.22,.9,.3,1) both}
  .popup-fond.sortie .popup-plat{animation:feuilleDescend .2s ease-in both}
  .popup-plat .popup-entete{position:relative;flex:none;padding:18px 10px 12px 18px;border-bottom-width:3px}
  .popup-plat .popup-entete::before{content:'';position:absolute;top:7px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:rgba(255,255,255,.45)}
  .popup-plat .popup-entete h3{min-width:0;font-size:1.05rem;line-height:1.25;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .popup-plat .fermer-popup{width:44px;height:44px;font-size:1.6rem;background:rgba(255,255,255,.14)}
  .popup-plat .popup-defile{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .popup-plat .popup-media{position:relative;width:100%;aspect-ratio:16/10;max-height:30vh;max-height:30dvh;overflow:hidden}
  .popup-plat .popup-media>img,.popup-plat .popup-media>.sans-photo-logo{position:absolute;inset:0;width:100%;height:100%!important;max-height:none;object-fit:cover}
  .popup-plat .popup-media>.sans-photo-logo{padding:6% 30%}
  .popup-plat .popup-media>.sans-photo-logo img{object-fit:contain}
  .popup-plat .popup-corps{padding:14px 18px 18px}
  .popup-plat .description-plat{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:.9rem;line-height:1.55;margin:6px 0 10px}
  .popup-plat .ligne-icone{display:block;margin:6px 0;line-height:1.45;font-size:.95rem}
  .popup-plat .ligne-icone .icone-inline{display:inline-block;vertical-align:-5px;margin-right:4px}
  .popup-plat .popup-pied{flex:none;padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:var(--creme);border-top:1px solid var(--bord);box-shadow:0 -6px 18px rgba(14,40,24,.08)}
  .popup-plat .ligne-achat{margin:0 0 10px;padding-top:0}
  .popup-plat .prix-grand{font-size:1.35rem;line-height:1.2}
  .popup-plat .qte{gap:12px}
  .popup-plat .qte button{width:40px;height:40px;font-size:1.1rem}
  .popup-plat .qte b{min-width:22px;text-align:center;font-size:1.05rem}
  .popup-plat .popup-pied .btn-large{padding:13px 18px}
}
@media (max-height:500px) and (orientation:landscape){
  .popup-plat .popup-entete{padding-top:14px;padding-bottom:8px}
  .popup-plat .popup-entete::before{top:5px}
  .popup-plat .popup-pied{display:flex;align-items:center;gap:16px;padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .popup-plat .ligne-achat{flex:none;gap:18px;margin:0}
  .popup-plat .popup-pied .btn-large{flex:1 1 auto;width:auto;padding:11px 18px}
}

/* ===== Fiche plat mobile : fenêtre remontée (carte flottante, plus centrée) =====
 * Au lieu d'être collée en bas de l'écran, la fiche flotte au-dessus du bas avec une marge
 * (≈ 5 % de la hauteur + zone sûre) et se centre verticalement si elle est plus courte que l'écran.
 * En-tête × et pied « Ajouter au panier » restent fixes ; le bouton Retour Android la ferme toujours. */
@keyframes feuilleFlotte{from{opacity:0;transform:translateY(48px) scale(.98)}to{opacity:1;transform:none}}
@keyframes feuilleFlotteSortie{to{opacity:0;transform:translateY(40px) scale(.98)}}
@media (max-width:600px){
  .popup-fond.fond-plat{align-items:center;padding:calc(env(safe-area-inset-top) + 12px) 10px calc(env(safe-area-inset-bottom) + max(22px, 6dvh))}
  .popup-fond>.popup-plat{max-height:84vh;max-height:min(84dvh, calc(100dvh - 12px - max(22px, 6dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    border-radius:22px;box-shadow:0 18px 50px rgba(0,0,0,.32);animation:feuilleFlotte .34s cubic-bezier(.22,.9,.3,1) both}
  .popup-fond.sortie>.popup-plat{animation:feuilleFlotteSortie .2s ease-in both}
  .popup-fond>.popup-plat .popup-pied{padding-bottom:12px;border-radius:0 0 22px 22px}
}

/* ===== Flux restaurant : code de retrait livreur, soldes, retraits, CGU ===== */
@keyframes secoue{0%,100%{transform:none}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.secoue{animation:secoue .42s ease}
@keyframes apparitionDouce{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.apparition{animation:apparitionDouce .3s cubic-bezier(.22,.9,.3,1) both}
.carte-solde>span{display:block;font-weight:600;letter-spacing:.02em}
.carte-solde>b{display:block;font-family:var(--police-titre);font-size:2rem;line-height:1.15;margin:6px 0 12px;color:var(--or-clair);transition:color .3s}
.carte-solde .stats-mini{grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px;margin:0}
.carte-solde .stats-mini>div{background:rgba(255,255,255,.1);border-radius:12px;padding:8px 10px}
.carte-solde .stats-mini span{display:block;font-size:.75rem;opacity:.85}
.carte-solde .stats-mini b{font-size:1.02rem;color:#fff}
.grille-portefeuille:has(.carte-retrait){grid-template-columns:minmax(220px,1fr) minmax(280px,1.6fr);align-items:start}
@media (max-width:760px){.grille-portefeuille:has(.carte-retrait){grid-template-columns:1fr}}
.carte-retrait h2{margin-bottom:4px}
.delai-retrait{display:inline-flex;align-items:center;gap:6px;background:var(--vert-pale);color:var(--vert-fonce);border-radius:999px;padding:6px 12px;font-size:.85rem;font-weight:600;margin:4px 0 14px}
.bloc-carte-retrait{border:2px solid var(--bord);border-radius:14px;padding:12px 14px 6px;margin:6px 0 14px;transition:border-color .2s}
.bloc-carte-retrait:focus-within{border-color:var(--or)}
.bloc-carte-retrait legend{padding:0 6px;font-weight:700;font-size:.9rem;color:var(--vert-fonce)}
.champ-last4{display:flex;align-items:center;gap:8px}
.champ-last4 span{font-family:ui-monospace,monospace;color:var(--gris-clair);white-space:nowrap;font-size:.9rem}
.champ-last4 input{font:700 1.1rem ui-monospace,monospace;letter-spacing:.25em;text-align:center;max-width:110px}
.geo-retrait{display:flex;align-items:flex-start;gap:10px;border-radius:12px;padding:10px 12px;margin:0 0 14px;font-size:.86rem;background:var(--bleu-pale);color:var(--bleu);transition:background .3s,color .3s}
.geo-retrait .geo-icone{font-size:1.1rem;line-height:1.2}
.geo-retrait[data-etat=lecture] .geo-icone{animation:pulseGeo 1s ease-in-out infinite}
.geo-retrait[data-etat=ok]{background:var(--vert-pale);color:var(--vert-fonce)}
.geo-retrait[data-etat=refuse]{background:var(--rouge-pale);color:var(--rouge)}
.geo-retrait[data-etat=indisponible]{background:var(--or-pale);color:var(--terre)}
@keyframes pulseGeo{50%{transform:scale(1.25)}}
.anciens-versements{margin:18px 0;background:#fff;border-radius:var(--rayon);padding:12px 16px;box-shadow:var(--ombre)}
.anciens-versements summary{cursor:pointer;font-weight:600;color:var(--vert-fonce)}
.lien-solde b{font-family:var(--police-titre);color:var(--vert-fonce)}
/* Remise restaurant : code à 5 chiffres du livreur */
.grille-remise{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;align-items:start}
.grille-remise .carte-formulaire{margin:0;max-width:none}
.carte-code-livreur{border-top:5px solid var(--or)}
.form-code-retrait{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px}
.saisie-code{width:100%;max-width:260px;padding:12px 14px;border:2px solid var(--bord);border-radius:14px;background:var(--creme);font:700 1.7rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.45em;text-align:center;color:var(--vert-fonce);transition:border-color .2s,box-shadow .2s}
.saisie-code:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 4px rgba(232,168,12,.18)}
.form-code-retrait.en-ligne{flex-direction:column;align-items:stretch;gap:6px;margin:0;padding:10px 12px;background:var(--or-pale);border:2px dashed var(--or);border-radius:14px;animation:apparitionDouce .3s both}
.form-code-retrait.en-ligne label{font-weight:700;font-size:.86rem;color:var(--vert-fonce)}
.form-code-retrait.en-ligne .ligne-code{flex-wrap:nowrap}
.form-code-retrait.en-ligne .saisie-code{flex:1 1 auto;min-width:0;font-size:1.25rem;padding:8px 10px;max-width:200px;letter-spacing:.35em}
.saisie-code::placeholder{color:var(--vert-fonce);opacity:.35}
/* Livreur : code de retrait affiché en gros */
.code-retrait-chiffres .chiffres-code{display:flex;gap:6px;letter-spacing:0;padding:0}
.code-retrait-chiffres .chiffres-code i{font-style:normal;display:inline-grid;place-items:center;width:1.55em;height:1.9em;background:#fff;border:2px solid var(--or);border-radius:10px;box-shadow:0 3px 0 var(--or-fonce);animation:apparitionDouce .35s both}
.code-retrait-chiffres .chiffres-code i:nth-child(2){animation-delay:.04s}.code-retrait-chiffres .chiffres-code i:nth-child(3){animation-delay:.08s}
.code-retrait-chiffres .chiffres-code i:nth-child(4){animation-delay:.12s}.code-retrait-chiffres .chiffres-code i:nth-child(5){animation-delay:.16s}
/* Case CGU obligatoire */
.case-cgu{margin:14px 0 18px;padding:12px 14px;border:2px solid var(--bord);border-radius:14px;background:var(--creme);transition:border-color .2s,background .2s}
.case-cgu:focus-within{border-color:var(--or)}
.case-cgu.invalide{border-color:var(--rouge);background:var(--rouge-pale)}
.case-cgu-label{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;cursor:pointer;line-height:1.45}
.case-cgu-label input{width:20px;height:20px;margin-top:2px;flex-shrink:0;accent-color:var(--vert)}
.case-cgu-label a{font-weight:700}
.case-cgu-lire{font-size:.85rem;padding:0 4px}
.case-cgu-erreur{margin:8px 0 0 30px;color:var(--rouge);font-size:.85rem;font-weight:600}
/* Admin : retraits */
.stat-alerte{border-left-color:var(--rouge)}.stat-alerte b{color:var(--rouge)}
a.stat{text-decoration:none;transition:transform .2s}a.stat:hover{transform:translateY(-2px)}
.ligne-retard td{background:var(--rouge-pale)!important}.ligne-retard td:first-child{box-shadow:inset 4px 0 0 var(--rouge)}
main.contenu:has(.tableau-retraits){max-width:1480px}
.tableau-retraits{overflow:visible}.table-scroll:has(>.tableau-retraits){border-radius:var(--rayon);box-shadow:var(--ombre)}
.tableau-retraits td{vertical-align:top;font-size:.86rem}
.tableau-retraits th:last-child,.tableau-retraits td:last-child{position:sticky;right:0;z-index:1}
.tableau-retraits td:last-child{background:#fff;box-shadow:-8px 0 12px -10px rgba(0,0,0,.25)}
.tableau-retraits td:last-child{min-width:150px;white-space:normal}
.tableau-retraits td:last-child .btn{display:block;width:100%;margin:0 0 6px;text-align:center;white-space:normal}
.tableau-retraits .coord-retrait{display:block;max-width:150px;overflow-wrap:anywhere}
.grille-soldes{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:18px;align-items:start}
.grille-soldes:has(#detail-solde[hidden]){grid-template-columns:1fr}
@media (max-width:900px){.grille-soldes{grid-template-columns:1fr}}
.carte-detail-solde{background:#fff;border-radius:var(--rayon);box-shadow:var(--ombre);padding:16px 18px;border-top:5px solid var(--vert);position:sticky;top:90px}
.carte-detail-solde .detail-entete{display:flex;justify-content:space-between;align-items:center;gap:10px}
.carte-detail-solde .fermer-popup{color:var(--gris)}
.carte-detail-solde h4{margin:14px 0 8px;color:var(--vert-fonce)}
.soldes-mini{display:flex;gap:10px;margin-top:10px}
.soldes-mini>div{flex:1;background:var(--vert-pale);border-radius:12px;padding:10px 12px}
.soldes-mini span{display:block;font-size:.78rem;color:var(--gris)}
.soldes-mini b{font-family:var(--police-titre);font-size:1.3rem;color:var(--vert-fonce)}
.liste-operations{list-style:none;display:flex;flex-direction:column;gap:8px;padding:0}
.liste-operations li{border:1px solid var(--bord);border-radius:12px;padding:10px 12px;font-size:.86rem;display:flex;flex-direction:column;gap:4px;transition:box-shadow .2s}
.liste-operations li:hover{box-shadow:0 4px 14px rgba(14,40,24,.08)}
.liste-operations .op-ligne{display:flex;justify-content:space-between;align-items:center}
.liste-mouvements-mini{list-style:none;padding:0;font-size:.84rem}
.liste-mouvements-mini li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--bord)}
.montant-positif{color:var(--vert)}.montant-negatif{color:var(--rouge)}
.legal h4{font-size:1.02rem;margin:20px 0 8px;color:var(--vert-fonce)}