/* ==========================================================================
   TALABI — Design system
   Mobile-first • Premium • Léger (aucune dépendance)
   ========================================================================== */

:root{
  --brand:#FF4D2D;
  --brand-dark:#E03A1B;
  --brand-soft:#FFF1ED;
  --brand-grad:linear-gradient(135deg,#FF6A3D 0%,#FF3D2E 55%,#E62E5C 100%);

  --ink:#12141A;
  --ink-2:#3A404D;
  --muted:#7A8291;
  /* Teintes relevées directement sur la maquette : le fond n'est pas un blanc
     cassé mais un crème chaud, franchement rosé. */
  --line:#EBE3D9;
  --bg:#F7EDE4;
  --card:#FFFFFF;

  /* Palette crème des grands fonds (héro, inscription) */
  --cream:#F8F0E7;
  --cream-2:#F0E2D4;
  --cream-line:#E7DACB;

  --ok:#12B76A; --ok-soft:#E7F8F0;
  --warn:#F79009; --warn-soft:#FFF6E6;
  --info:#3B82F6; --info-soft:#EAF2FF;
  --danger:#F04438; --danger-soft:#FEECEB;

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px;
  --sh-1:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.06);
  --sh-2:0 4px 14px rgba(16,24,40,.08);
  --sh-3:0 18px 45px -12px rgba(16,24,40,.22);
  --nav-h:64px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

/* Le voile gris-blanc que les navigateurs mobiles posent sur tout élément
   touché. Sur les écrans sombres de l'espace administrateur, il éclaircissait
   toute la ligne au moindre effleurement pendant le défilement. Nos boutons
   ont déjà leur propre retour visuel. */
*{-webkit-tap-highlight-color:transparent}

body{
  font-family:var(--font);
  background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
/* icônes au trait : alignées sur le texte, elles prennent sa couleur */
.ico{display:inline-block;vertical-align:-.18em;flex:none}
.pin-ic{display:inline-flex;align-items:center;color:var(--brand);line-height:0;vertical-align:-.2em}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.2;letter-spacing:-.02em}
p{margin:0}
::selection{background:var(--brand);color:#fff}

/* --------------------------------------------------------------- layout */
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}
.wrap-sm{width:100%;max-width:720px;margin:0 auto;padding:0 16px}
/* padding-top / padding-bottom séparés, et surtout PAS la forme raccourcie :
   `padding:18px 0 …` écrasait le `padding:0 16px` de .wrap, avec lequel cette
   classe est toujours combinée. Sur grand écran la largeur maximale de 1200 px
   masquait le problème ; sur téléphone le contenu touchait les deux bords. */
.page{padding-top:18px;padding-bottom:calc(var(--nav-h) + 32px)}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;align-items:center;gap:10px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.grow{flex:1;min-width:0}
.hide{display:none !important}
.center{text-align:center}
.mt-auto{margin-top:auto}

.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.grid-stats{grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){
  .grid-stats{grid-template-columns:repeat(4,1fr)}
}

/* ------------------------------------------------------------ typography */
.h1{font-size:26px;font-weight:800}
.h2{font-size:20px;font-weight:750}
.h3{font-size:17px;font-weight:700}
.sub{color:var(--muted);font-size:13.5px}
.tiny{font-size:12px;color:var(--muted)}
.strong{font-weight:700}
.price{font-weight:800;color:var(--brand);white-space:nowrap}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:22px 0 12px}
.section-head .link{color:var(--brand);font-weight:650;font-size:13.5px}

/* ---------------------------------------------------------------- header */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex;align-items:center;gap:12px;height:60px}
.brand{display:flex;align-items:center;gap:9px;font-weight:850;font-size:19px;letter-spacing:-.03em}
.brand-mark{
  width:34px;height:34px;border-radius:11px;background:var(--brand-grad);
  display:grid;place-items:center;color:#fff;font-size:17px;
  box-shadow:0 6px 16px -4px rgba(255,77,45,.6);
}
.topbar .zone-pick{
  display:flex;align-items:center;gap:6px;background:var(--bg);
  border:1px solid var(--line);border-radius:999px;padding:7px 12px;
  font-size:13px;font-weight:600;cursor:pointer;max-width:170px;
}
.topbar .zone-pick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}

.icon-btn{
  position:relative;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);
  background:#fff;display:grid;place-items:center;cursor:pointer;font-size:17px;
  transition:.16s;
}
.icon-btn:hover{background:var(--bg);transform:translateY(-1px)}
.badge-dot{
  position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;
  display:grid;place-items:center;border:2px solid #fff;
}

/* ---------------------------------------------------------------- bottom nav */
.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:70;height:var(--nav-h);
  background:rgba(255,255,255,.94);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  display:flex;align-items:stretch;
  padding-bottom:env(safe-area-inset-bottom);
}
.bottomnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10.5px;font-weight:600;color:var(--muted);position:relative;transition:.15s;
}
/* display:flex, sinon le SVG repose sur la ligne de base et laisse un blanc
   sous l'icône : le libellé descendrait sous la barre */
.bottomnav a i{font-style:normal;font-size:20px;line-height:1;display:flex}
.bottomnav a.on{color:var(--brand)}
.bottomnav a.on::before{
  content:'';position:absolute;top:0;width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--brand);
}
@media(min-width:1000px){ .bottomnav{display:none} :root{--nav-h:0px} }

.deskmenu{display:none;gap:4px;margin-left:14px}
.deskmenu a{padding:8px 13px;border-radius:10px;font-weight:600;font-size:14px;color:var(--ink-2);transition:.15s}
.deskmenu a:hover{background:var(--bg)}
.deskmenu a.on{background:var(--brand-soft);color:var(--brand)}
@media(min-width:1000px){ .deskmenu{display:flex} }

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border-radius:var(--r);border:1px solid transparent;
  font-weight:650;font-size:14.5px;cursor:pointer;transition:.16s;
  background:var(--bg);color:var(--ink);white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary{background:var(--brand-grad);color:#fff;box-shadow:0 8px 20px -8px rgba(255,77,45,.75)}
.btn-dark{background:var(--ink);color:#fff}
.btn-ghost{background:#fff;border-color:var(--line)}
.btn-ghost:hover{background:var(--bg)}
.btn-soft{background:var(--brand-soft);color:var(--brand)}
.btn-ok{background:var(--ok);color:#fff}
.btn-danger{background:var(--danger-soft);color:var(--danger)}
.btn-block{width:100%}
.btn-sm{padding:8px 13px;font-size:13px;border-radius:10px}
.btn-lg{padding:15px 24px;font-size:16px;border-radius:16px}
.btn-google{background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:650}
.btn-google:hover{background:#FAFBFF;box-shadow:var(--sh-1)}

/* ---------------------------------------------------------------- cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.card-p{padding:16px}
.card-hover{transition:.2s;cursor:pointer}
.card-hover:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:#DFE3EC}

.stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px;
  box-shadow:var(--sh-1);position:relative;overflow:hidden;
}
.stat .k{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.stat .v{font-size:24px;font-weight:850;margin-top:6px;letter-spacing:-.03em}
.stat .ic{position:absolute;right:12px;top:12px;font-size:22px;opacity:.22}

/* ---------------------------------------------------------------- forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:650;color:var(--ink-2)}
.input,select.input,textarea.input{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r);
  background:#fff;outline:none;transition:.16s;font-size:15px;
}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(255,77,45,.12)}
textarea.input{min-height:88px;resize:vertical}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A8291' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.field-err{color:var(--danger);font-size:12.5px;font-weight:600}
.hint{font-size:12.5px;color:var(--muted)}

.search{position:relative}
.search input{padding-left:42px}
.search::before{content:'🔍';position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:15px;opacity:.6}

.switch{position:relative;width:46px;height:26px;flex:none;cursor:pointer}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .track{position:absolute;inset:0;background:#D5D9E2;border-radius:999px;transition:.2s}
.switch .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.2s;box-shadow:var(--sh-1)}
.switch input:checked + .track{background:var(--ok)}
.switch input:checked + .track .knob{transform:translateX(20px)}

/* ---------------------------------------------------------------- chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;padding:9px 15px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-size:13.5px;font-weight:600;cursor:pointer;transition:.16s;white-space:nowrap;
}
.chip:hover{border-color:#D3D9E4}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.tag{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.01em}
.tag-ok{background:var(--ok-soft);color:#067647}
.tag-warn{background:var(--warn-soft);color:#B54708}
.tag-info{background:var(--info-soft);color:#1849A9}
.tag-danger{background:var(--danger-soft);color:#B42318}
.tag-muted{background:var(--bg);color:var(--muted)}

/* ---------------------------------------------------------- restaurant card */
.resto-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);transition:.2s;cursor:pointer;position:relative}
.resto-card:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.resto-cover{aspect-ratio:16/9;background:#F2EDE5 center/cover no-repeat;position:relative}
.resto-cover .closed-ov{position:absolute;inset:0;background:rgba(10,12,18,.6);display:grid;place-items:center;color:#fff;font-weight:750;font-size:13px;letter-spacing:.02em}
.resto-logo{
  position:absolute;left:14px;bottom:-22px;width:52px;height:52px;border-radius:15px;
  background:#fff center/cover no-repeat;border:3px solid #fff;box-shadow:var(--sh-2);
  display:grid;place-items:center;font-size:22px;
}
.resto-body{padding:30px 14px 14px}
.resto-meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12.5px;margin-top:6px;flex-wrap:wrap}
.dot-sep::before{content:'•';margin-right:8px;opacity:.5}

/* ---------------------------------------------------------- menu item */
/* onglets du menu d'un restaurant : une catégorie à la fois, barre collante
   sous l'en-tête (60px) pour rester atteignable dans une longue carte */
.menu-tabs{
  position:sticky;top:60px;z-index:20;scroll-margin-top:60px;
  margin:18px -16px 0;padding:10px 16px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.chip-n{
  margin-left:7px;padding:1px 7px;border-radius:999px;font-size:11.5px;
  background:var(--bg);color:var(--muted);font-weight:700;
}
.chip.on .chip-n{background:rgba(255,255,255,.22);color:#fff}

/* pastille de catégorie dans les onglets et les titres du menu */
.g-ic{
  width:22px;height:22px;border-radius:50%;flex:none;display:inline-block;
  background:#fff center/cover no-repeat;border:1px solid var(--line);
  vertical-align:-6px;margin-right:7px;
}
.g-ic.big{width:30px;height:30px;vertical-align:-9px;margin-right:9px}
.g-ic.emoji{border:none;background:none;text-align:center;font-size:15px;line-height:22px}
.g-ic.emoji.big{font-size:21px;line-height:30px}
.chip.on .g-ic{border-color:rgba(255,255,255,.5)}

.dish{display:flex;gap:12px;padding:13px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);transition:.16s;cursor:pointer}
.dish:hover{box-shadow:var(--sh-2);border-color:#DFE3EC}
.dish-img{width:88px;height:88px;flex:none;border-radius:var(--r);background:#F2EDE5 center/cover no-repeat;display:grid;place-items:center;font-size:28px}
.dish-body{flex:1;min-width:0;display:flex;flex-direction:column}
.dish-name{font-weight:700;font-size:15px}
.dish-desc{color:var(--muted);font-size:13px;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dish.off{opacity:.55}
.add-btn{
  width:34px;height:34px;border-radius:11px;background:var(--brand-soft);color:var(--brand);
  border:none;font-size:19px;font-weight:700;display:grid;place-items:center;cursor:pointer;transition:.16s;flex:none;
}
.add-btn:hover{background:var(--brand);color:#fff;transform:scale(1.07)}

/* ---------------------------------------------------------- categories */
.cat-scroll{display:flex;gap:10px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none}
.cat-scroll::-webkit-scrollbar{display:none}
.cat-item{
  flex:none;width:78px;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;
}
.cat-item .bubble{
  width:66px;height:66px;border-radius:50%;background:#fff;border:2px solid var(--line);
  display:grid;place-items:center;font-size:27px;transition:.18s;box-shadow:var(--sh-1);
  overflow:hidden;
}
/* pastille illustrée : l'image est carrée, elle remplit le cercle sans déformation */
.cat-item .bubble.has-img{background-position:center;background-size:cover;background-repeat:no-repeat}
.cat-item .bubble-all{
  font-size:13px;font-weight:800;letter-spacing:-.01em;
  background:var(--ink);color:#fff;border-color:var(--ink);
}
.cat-item:hover .bubble{transform:translateY(-3px) scale(1.05)}
.cat-item.on .bubble{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(255,77,45,.18), 0 10px 22px -8px rgba(255,77,45,.55);
}
.cat-item.on .bubble-all{background:var(--brand-grad);border-color:transparent}
.cat-item span{font-size:11.5px;font-weight:650;text-align:center;line-height:1.25}
.cat-item.on span{color:var(--brand)}

/* ---------------------------------------------------------------- hero */
/* Héro crème : le fond rouge plein est remplacé par une surface claire et la
   photographie culinaire à droite. Le centre reste vide et lumineux. */
.hero{
  position:relative;overflow:hidden;color:var(--ink);
  background:
    radial-gradient(680px 340px at 88% 8%,  rgba(255,138,90,.13), transparent 62%),
    radial-gradient(520px 420px at 4% 96%, rgba(255,138,90,.10), transparent 60%),
    linear-gradient(150deg, #FFFAF4 0%, var(--cream) 46%, var(--cream-2) 100%);
  border-bottom:1px solid rgba(0,0,0,.05);
  border-radius:0 0 32px 32px;padding:26px 0 34px;
}
/* photo de plats, en pleine hauteur à droite */
.hero::after{
  content:'';position:absolute;inset:0 0 0 auto;width:0;
  background:url('../img/bg/hero-food.jpg') center right/cover no-repeat;
  /* fondu vers la gauche : la photo se dissout dans le crème, jamais de bord net */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 34%);
  mask-image:linear-gradient(90deg, transparent, #000 34%);
}
/* pointillés discrets, comme sur la maquette */
.hero::before{
  content:'';position:absolute;width:120px;height:74px;top:44px;right:34%;
  background-image:radial-gradient(rgba(255,109,71,.5) 1.6px, transparent 1.7px);
  background-size:15px 15px;opacity:.55;display:none;
}
.hero-in{position:relative;z-index:2}
.hero h1{font-size:30px;font-weight:850;letter-spacing:-.035em;line-height:1.12}
.hero h1 .accent{color:var(--brand);display:block}
.hero p{color:var(--muted);margin-top:9px;font-size:15px;max-width:520px}
.hero-search{margin-top:20px;display:flex;gap:8px;background:#fff;border-radius:16px;padding:7px;box-shadow:var(--sh-3)}
.hero-search input{flex:1;border:none;outline:none;padding:11px 13px;font-size:15px;background:transparent;min-width:0}
.hero-cta{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.hero-cta .btn{background:#fff;color:var(--ink);box-shadow:var(--sh-2);border:1px solid rgba(0,0,0,.05)}
.hero-cta .btn.primary{color:var(--brand)}
.hero-stats{display:flex;gap:22px;margin-top:22px;flex-wrap:wrap}
.hero-stats div b{display:block;font-size:21px;font-weight:850;color:var(--brand)}
.hero-stats div span{font-size:12px;color:var(--muted)}

@media(min-width:800px){
  .hero{padding:52px 0 60px}
  .hero h1{font-size:46px}
  /* la photo n'apparaît qu'à partir du moment où elle ne gêne pas le texte */
  .hero::after{width:46%}
  .hero::before{display:block}
  /* le contenu occupe une colonne à gauche : on borne chaque bloc, sans
     réduire .hero-in lui-même, qui est centré par .wrap */
  .hero-in > *{max-width:660px}
}
@media(min-width:1100px){ .hero::after{width:42%} .hero-in > *{max-width:700px} }

/* ------------------------------------------------------ pages de compte
   Thème blanc-orangé : formes organiques en fond, titre et formulaire à
   gauche, livreur à scooter en haut à droite. */
.auth-page{
  position:relative;overflow:hidden;
  min-height:calc(100vh - 60px);
  background:linear-gradient(160deg, #FFFFFF 0%, #FFF8F4 44%, #FFEFE7 100%);
  padding:26px 0 calc(var(--nav-h) + 34px);
}
/* Taches orange de la maquette. Bords très flous : nettes, elles feraient
   justement tache. */
.auth-blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.auth-blob.a{
  width:330px;height:460px;left:-190px;top:32%;
  background:linear-gradient(140deg,#FF8A5B,#FF6A3D);opacity:.5;filter:blur(38px);
}
.auth-blob.b{
  width:430px;height:300px;right:-160px;top:-130px;
  background:linear-gradient(200deg,#FFB169,#FF7A45);opacity:.42;filter:blur(44px);
}
.auth-blob.c{
  width:520px;height:340px;left:-130px;bottom:-170px;
  background:linear-gradient(30deg,#FFD9C4,#FFB79A);opacity:.55;filter:blur(46px);
}

/* Pas de z-index ici : il créerait un contexte d'empilement, et le fondu
   « multiply » du logo et du livreur ne verrait plus le fond de la page —
   on retrouverait un rectangle blanc. Sans z-index, le contenu passe quand
   même au-dessus des taches, qui le précèdent dans le document. */
.auth-in{position:relative;width:100%;max-width:900px;margin:0 auto;padding:0 16px}
.auth-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:20px}
.auth-headtext{flex:1;min-width:0}
.auth-head .h1{font-size:29px;letter-spacing:-.03em}
.auth-head .h1 .accent{color:var(--brand)}
.auth-head .sub{font-size:15px;max-width:430px}
/* le visuel est sur fond quasi blanc : « multiply » le fond dans la page au
   lieu de laisser un rectangle */
/* Le fondu des bords est cuit dans le PNG (canal alpha), pas fait en CSS :
   un masque CSS crée un contexte d'empilement et un « multiply » suffisant
   pour effacer le fond ne l'est pas pour les bords. Le PNG transparent se
   pose proprement sur n'importe quel fond. */
.auth-rider{display:none;width:340px;flex:none;margin-top:-4px}

.auth-col{width:100%}
/* la carte reprend le gabarit de la maquette : large, très arrondie,
   ombre orangée diffuse */
.auth-col > .card{border-radius:26px;border-color:#F7E8DF;box-shadow:0 24px 60px -28px rgba(226,101,53,.4)}
.auth-col > .card.card-p{padding:24px}

@media(min-width:900px){
  .auth-rider{display:block}
  .auth-head .h1{font-size:36px}
  .auth-col > .card.card-p{padding:30px}
}
@media(min-width:1100px){ .auth-rider{width:400px} }

/* ------------------------------------------------- décor de la page d'accueil
   Des plats en bordure, le centre laissé libre et lumineux pour les cartes.
   Purement décoratif : rien d'utile ne dépend de ces images. */
.home-decor{
  position:relative;overflow:hidden;
  /* la maquette n'est pas d'un crème uniforme : elle s'éclaircit en haut à
     gauche et se réchauffe vers le bas à droite */
  background:
    radial-gradient(900px 520px at 100% 100%, rgba(233,213,193,.55), transparent 62%),
    radial-gradient(760px 420px at 0% 0%, rgba(255,255,255,.55), transparent 58%);
}
.home-decor > .wrap{position:relative;z-index:1}
/* Pointillés en bas à gauche. Ils ont leur propre élément : posés en fond de
   .home-decor, « no-repeat » n'aurait dessiné qu'un point, et « repeat »
   aurait couvert toute la page. */
.decor-dots{
  position:absolute;left:10px;bottom:120px;width:112px;height:84px;z-index:0;
  background-image:radial-gradient(rgba(255,109,71,.42) 1.6px, transparent 1.7px);
  background-size:16px 16px;
  opacity:.75;pointer-events:none;display:none;
}
/* Les masques partent d'un noyau opaque très petit : au-delà, l'image se
   dissout. Un noyau large laisserait des bords francs bien visibles. */
.home-decor::before,
.home-decor::after{content:'';position:absolute;right:0;z-index:0;pointer-events:none;display:none;opacity:.88}
/* salade, sauce et citronnade, juste sous le héro */
.home-decor::before{
  top:0;width:340px;height:158px;
  background:url('../img/bg/decor-top.jpg') top right/cover no-repeat;
  -webkit-mask-image:radial-gradient(125% 145% at 100% 0%, #000 16%, transparent 70%);
  mask-image:radial-gradient(125% 145% at 100% 0%, #000 16%, transparent 70%);
}
/* tomate et pâtes, à mi-hauteur */
.home-decor::after{
  top:46%;width:220px;height:156px;
  background:url('../img/bg/decor-side.jpg') center right/cover no-repeat;
  -webkit-mask-image:radial-gradient(120% 140% at 100% 50%, #000 8%, transparent 64%);
  mask-image:radial-gradient(120% 140% at 100% 50%, #000 8%, transparent 64%);
}
/* le décor n'apparaît que s'il reste de la marge autour du contenu :
   sur un écran étroit il passerait sous les cartes */
@media(min-width:1280px){ .home-decor::before, .home-decor::after, .decor-dots{display:block} }
@media(min-width:1500px){
  .home-decor::before{width:420px;height:190px}
  .home-decor::after{width:290px;height:204px}
}

/* ---------------------------------------------------------------- steps / timeline */
.timeline{display:flex;flex-direction:column;gap:0;position:relative}
.tl-step{display:flex;gap:14px;position:relative;padding-bottom:22px}
.tl-step:last-child{padding-bottom:0}
.tl-step::before{content:'';position:absolute;left:15px;top:32px;bottom:0;width:2px;background:var(--line)}
.tl-step:last-child::before{display:none}
.tl-step.done::before{background:var(--ok)}
.tl-dot{
  width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--bg);color:var(--muted);border:2px solid var(--line);font-size:14px;z-index:2;
}
.tl-step.done .tl-dot{background:var(--ok);border-color:var(--ok);color:#fff}
.tl-step.active .tl-dot{background:var(--brand);border-color:var(--brand);color:#fff;animation:pulse 1.8s infinite}
.tl-txt b{font-size:14.5px;font-weight:700}
.tl-txt span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,77,45,.55)}70%{box-shadow:0 0 0 12px rgba(255,77,45,0)}100%{box-shadow:0 0 0 0 rgba(255,77,45,0)}}

/* ---------------------------------------------------------------- order card */
.order-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:15px;box-shadow:var(--sh-1)}
.order-card + .order-card{margin-top:12px}
.ocode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:13px;background:var(--bg);padding:3px 8px;border-radius:7px}
.oline{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:3px 0}
.oline .l{color:var(--muted)}
.divider{height:1px;background:var(--line);margin:12px 0}

/* ---------------------------------------------------------------- cart */
.cart-row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.cart-row:last-child{border-bottom:none}
.qty{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:999px;padding:4px}
.qty button{width:28px;height:28px;border-radius:50%;border:none;background:#fff;cursor:pointer;font-weight:700;font-size:16px;box-shadow:var(--sh-1);display:grid;place-items:center}
.qty button:hover{background:var(--brand);color:#fff}
.qty b{min-width:20px;text-align:center;font-size:14px}

.sticky-bar{
  position:fixed;left:0;right:0;bottom:var(--nav-h);z-index:65;
  background:#fff;border-top:1px solid var(--line);padding:12px 16px;
  box-shadow:0 -6px 24px rgba(16,24,40,.08);
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
}
.sticky-bar .wrap{display:flex;align-items:center;gap:12px}

/* ---------------------------------------------------------------- modal / sheet */
.overlay{position:fixed;inset:0;background:rgba(12,15,22,.55);backdrop-filter:blur(3px);z-index:200;display:flex;align-items:flex-end;justify-content:center;animation:fade .18s ease}
@media(min-width:700px){ .overlay{align-items:center} }
.sheet{
  background:#fff;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;
  border-radius:24px 24px 0 0;animation:slideUp .26s cubic-bezier(.22,1,.36,1);
  padding-bottom:env(safe-area-inset-bottom);
}
@media(min-width:700px){ .sheet{border-radius:22px;animation:pop .2s ease} }
.sheet-head{position:sticky;top:0;background:#fff;padding:16px 18px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:3}
.sheet-ic{
  width:44px;height:44px;border-radius:14px;flex:none;
  background:var(--brand-soft);display:grid;place-items:center;font-size:21px;
}

/* ------------------------------------------------ sélecteur de quartier */
.zone-list{display:flex;flex-direction:column;gap:10px}
.zone-row{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 14px;border-radius:16px;border:1.5px solid var(--line);
  background:#fff;cursor:pointer;transition:.16s;font:inherit;color:inherit;
}
.zone-row:hover{border-color:#E3D5C6;transform:translateY(-1px)}
.zone-row.on{border-color:var(--brand);background:var(--brand-soft)}
.zone-row .radio{
  width:20px;height:20px;border-radius:50%;flex:none;
  border:2px solid #D8D2C8;position:relative;
}
.zone-row.on .radio{border-color:var(--brand)}
.zone-row.on .radio::after{
  content:'';position:absolute;inset:3px;border-radius:50%;background:var(--brand);
}
.zone-row .ic{
  width:38px;height:38px;border-radius:12px;flex:none;
  background:var(--brand-soft);display:grid;place-items:center;font-size:17px;
}
.zone-row.on .ic{background:#fff}
.zone-row .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.zone-row b{font-size:15px;font-weight:750}
.zone-row .mark{color:var(--brand);font-weight:800;font-size:17px;flex:none}
.zone-row:not(.on) .mark{color:#C9C2B7}

.zone-foot{
  display:flex;align-items:center;gap:12px;margin-top:14px;
  padding:14px;border-radius:16px;background:var(--brand-soft);
}
.zone-foot .art{font-size:30px;flex:none}
.zone-foot .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.zone-foot b{font-size:14.5px}
.zone-foot .chip-round{
  width:42px;height:42px;border-radius:50%;flex:none;
  background:#fff;display:grid;place-items:center;font-size:19px;
}
.sheet-body{padding:18px}
.sheet-foot{position:sticky;bottom:0;background:#fff;padding:14px 18px;border-top:1px solid var(--line)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(40px);opacity:.6}to{transform:translateY(0);opacity:1}}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------------------------------------------------------------- toasts */
.toasts{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;width:calc(100% - 28px);max-width:400px;pointer-events:none}
.toast{
  background:var(--ink);color:#fff;padding:13px 15px;border-radius:14px;
  box-shadow:var(--sh-3);font-size:14px;font-weight:600;display:flex;gap:10px;align-items:flex-start;
  animation:drop .24s cubic-bezier(.22,1,.36,1);
}
.toast.ok{background:#0B7A4B}
.toast.err{background:#B42318}
.toast .t-body{flex:1;min-width:0}
.toast .t-body small{display:block;font-weight:500;opacity:.85;margin-top:2px}
@keyframes drop{from{transform:translateY(-16px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ---------------------------------------------------------------- misc */
.empty{text-align:center;padding:46px 20px;color:var(--muted)}
.empty .ic{font-size:44px;margin-bottom:12px;opacity:.65}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:5px}

.skel{background:linear-gradient(90deg,#EEF0F5 25%,#F7F8FB 50%,#EEF0F5 75%);background-size:200% 100%;animation:shim 1.3s infinite;border-radius:var(--r)}
@keyframes shim{from{background-position:200% 0}to{background-position:-200% 0}}

.avatar{width:42px;height:42px;border-radius:50%;background:var(--brand-grad) center/cover no-repeat;display:grid;place-items:center;color:#fff;font-weight:750;flex:none}

.tabs{display:flex;gap:4px;background:var(--bg);padding:4px;border-radius:14px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:1;min-width:max-content;padding:9px 14px;border:none;background:transparent;border-radius:11px;font-weight:650;font-size:13.5px;color:var(--muted);cursor:pointer;transition:.16s;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.tabs button.on{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
/* variante « pilules » : onglets posés sur la page, sans bandeau gris */
.tabs.pill{background:transparent;padding:0;gap:8px;border-bottom:1px solid var(--line);border-radius:0}
.tabs.pill button{flex:0 0 auto;padding:10px 18px;border-radius:999px;margin-bottom:-1px}
.tabs.pill button.on{background:#fff;color:var(--brand);border:1px solid var(--line);box-shadow:var(--sh-2)}

/* ------------------------------------------------------------ mon compte */
/* Palette redéfinie localement : les variables du design system sont
   surchargées sur cette page, donc boutons, badges et champs suivent sans
   qu'aucune règle existante ait besoin d'être touchée — et le reste du site
   garde sa teinte actuelle. */
.account-page{
  --brand:#FF6B35;
  --brand-light:#FF8A3D;
  --brand-dark:#F45D22;
  --brand-soft:#FFF1E8;
  --brand-grad:linear-gradient(135deg,#FF8A3D 0%,#FF6B35 100%);
  --line:#F3E9E0;
  --ring:rgba(255,107,53,.16);

  position:relative;overflow:hidden;
  background:
    radial-gradient(600px 340px at 98% 2%, rgba(255,138,61,.10), transparent 60%),
    radial-gradient(520px 320px at 0% 100%, rgba(255,107,53,.07), transparent 58%),
    #FFF8F2;
  min-height:calc(100vh - 60px);
}

/* ---- cartes : coins larges, ombre très douce, bord discret ---- */
.account-page .card{
  border-radius:24px;
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(196,120,74,.05), 0 10px 30px -18px rgba(196,120,74,.35);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
  animation:accFade .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes accFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* apparition décalée : le regard descend la page au lieu de tout recevoir d'un coup */
.account-page .card:nth-of-type(1){animation-delay:.02s}
.account-page .card:nth-of-type(2){animation-delay:.06s}
.account-page .card:nth-of-type(3){animation-delay:.10s}
.account-page .card:nth-of-type(4){animation-delay:.14s}

/* Le survol soulève les cartes cliquables. Les cartes de formulaire ne
   bougent pas : une carte qui grandit sous le curseur pendant qu'on remplit
   un champ est désagréable. */
.account-page .card:not(.card-hover):hover{
  box-shadow:0 2px 4px rgba(196,120,74,.06), 0 18px 40px -20px rgba(196,120,74,.42);
}
.account-page .card-hover:hover{
  transform:translateY(-3px) scale(1.02);
  border-color:#FFD9C2;
  box-shadow:0 8px 18px -6px rgba(255,107,53,.18), 0 22px 46px -22px rgba(255,107,53,.4);
}
.account-page .card-hover:active{transform:translateY(-1px) scale(1.005)}
/* pointillés en haut à gauche et en bas à droite, dégradé flou en bas à
   gauche, brindille en bas à droite — repris de la maquette */
.acc-dots{
  position:absolute;width:120px;height:90px;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,109,71,.4) 1.6px, transparent 1.7px);
  background-size:16px 16px;opacity:.6;
}
.acc-dots.a{left:14px;top:18px}
.acc-dots.b{right:26px;bottom:120px}
.acc-leaf{
  position:absolute;right:18px;bottom:70px;font-size:34px;z-index:0;
  opacity:.35;pointer-events:none;transform:rotate(18deg);
}
.account-page::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  width:260px;height:260px;left:-90px;bottom:60px;border-radius:50%;
  background:linear-gradient(140deg,#FF8A5B,#FF6A3D);opacity:.16;filter:blur(38px);
}
.account-page > .wrap-sm{position:relative;z-index:1}
.acc-head .acc-chev{align-self:center}
.acc-chev{color:#D6C9BC;flex:none;line-height:0;transition:transform .3s ease, color .3s ease}
.account-page a:hover .acc-chev,
.account-page .acc-head:hover .acc-chev{transform:translateX(3px);color:var(--brand)}

/* avatar : plus grand, dégradé orange, ombre douce, réaction au survol */
.account-page .acc-head .avatar{
  background:var(--brand-grad);
  box-shadow:0 8px 20px -8px rgba(255,107,53,.55);
  border:3px solid #fff;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.account-page .acc-head:hover .avatar{
  transform:scale(1.06) rotate(-2deg);
  box-shadow:0 12px 28px -8px rgba(255,107,53,.65);
}

/* pastille + titre, en tête de chaque bloc */
.acc-title{display:flex;align-items:center;gap:11px}
.acc-title .ic{
  width:40px;height:40px;border-radius:13px;flex:none;
  background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;line-height:0;
}
.acc-block{border-radius:24px}

/* raccourcis : icône, titre, sous-titre, chevron */
.acc-quick{display:flex;align-items:center;gap:13px;text-align:left}
.acc-quick .ic{
  width:46px;height:46px;border-radius:15px;flex:none;
  background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-size:21px;line-height:0;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.acc-quick:hover .ic{background:var(--brand-grad);color:#fff;transform:scale(1.05)}
.acc-quick .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.acc-quick b{font-size:15px;font-weight:750}

/* deux colonnes dès qu'il y a la place */
.acc-grid{display:grid;gap:14px}
@media(min-width:640px){
  .acc-grid{grid-template-columns:1fr 1fr}
  .acc-grid .acc-full,
  .acc-grid > [data-imgfield]{grid-column:1 / -1}
}

/* champ avec pictogramme à gauche — hauteur uniforme, bord fin, halo orange */
.input-ic{position:relative;display:flex;align-items:center}
.input-ic > span{
  position:absolute;left:12px;width:30px;height:30px;border-radius:10px;
  background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;line-height:0;
  pointer-events:none;transition:background .3s ease, color .3s ease;
}
.input-ic .input{padding-left:52px;width:100%}
.account-page .input,
.account-page select.input{
  height:54px;border-width:1px;border-radius:15px;font-size:15px;
  transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.account-page .input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}
.account-page .input-ic:focus-within > span{background:var(--brand-grad);color:#fff}
.account-page .input:disabled{background:#FDF7F2;color:var(--muted)}
.account-page .field label{font-size:13.5px;font-weight:700;color:var(--ink-2)}

/* bouton principal : dégradé orange, coins larges, ombre colorée */
.account-page .btn-primary{
  border-radius:16px;
  box-shadow:0 8px 20px -8px rgba(255,107,53,.6);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, filter .3s ease;
}
.account-page .btn-primary:hover{
  transform:translateY(-2px) scale(1.015);
  box-shadow:0 14px 30px -10px rgba(255,107,53,.7);
  filter:brightness(1.04);
}
.account-page .btn-primary:active{transform:translateY(0) scale(.985);box-shadow:0 5px 14px -6px rgba(255,107,53,.55)}
.account-page .btn-soft{border-radius:999px;transition:.3s}
.account-page .btn-soft:hover{background:var(--brand-grad);color:#fff;transform:translateY(-1px)}
.account-page .btn .ico{margin-right:2px}

.acc-link{
  display:flex;align-items:center;gap:13px;padding:14px 15px;
  border:1px solid var(--line);border-radius:16px;background:#fff;
  transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
}
.acc-link:hover{
  transform:scale(1.02);border-color:#FFD9C2;
  box-shadow:0 10px 24px -14px rgba(255,107,53,.5);
}
.acc-link .ic{
  width:38px;height:38px;border-radius:12px;flex:none;
  background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;line-height:0;transition:.3s;
}
.acc-link:hover .ic{background:var(--brand-grad);color:#fff}
.acc-link .grow{display:flex;flex-direction:column;gap:1px;min-width:0}
.acc-link b{font-size:14.5px;font-weight:700}

/* adresses : pastille, badge vert, actions en boutons ronds */
.account-page .addr-row{
  padding:16px;border-radius:18px;border-color:var(--line);
  transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
}
.account-page .addr-row:hover{
  transform:scale(1.01);border-color:#FFD9C2;
  box-shadow:0 10px 26px -16px rgba(255,107,53,.5);
}
.account-page .addr-row .ic{
  width:46px;height:46px;border-radius:15px;
  background:var(--brand-soft);color:var(--brand);line-height:0;
}
.account-page .addr-row b{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:15px}
.account-page .addr-row .tiny{margin-top:3px}
.account-page .tag{display:inline-flex;align-items:center;gap:4px;border-radius:999px}
.account-page .tag-ok{background:#E7F8F0;color:#0E9F6E;font-weight:700}
.addr-map{color:var(--brand);font-weight:700;display:inline-flex;align-items:center;gap:3px}

.icon-round{
  width:40px;height:40px;border-radius:50%;flex:none;
  border:1px solid var(--line);background:#fff;color:var(--brand);
  display:grid;place-items:center;cursor:pointer;line-height:0;
  transition:transform .3s cubic-bezier(.22,1,.36,1), background .3s ease, color .3s ease, box-shadow .3s ease;
}
.icon-round:hover{
  background:var(--brand-grad);color:#fff;transform:scale(1.08);
  box-shadow:0 8px 18px -8px rgba(255,107,53,.6);
}
.icon-round:active{transform:scale(.96)}
.icon-round.danger{color:#E5484D}
.icon-round.danger:hover{background:linear-gradient(135deg,#F87171,#E5484D);box-shadow:0 8px 18px -8px rgba(229,72,77,.6)}

/* déconnexion : contour orange, se remplit au survol */
.acc-logout .btn{
  background:#fff;border:1.5px solid var(--brand);color:var(--brand);
  font-weight:750;border-radius:16px;
  transition:background .3s ease, color .3s ease, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.acc-logout .btn:hover{
  background:var(--brand-grad);color:#fff;transform:translateY(-2px);
  box-shadow:0 12px 26px -10px rgba(255,107,53,.6);
}
.acc-logout .btn:active{transform:translateY(0) scale(.99)}

.tag-soft{background:var(--brand-soft);color:var(--brand);display:inline-flex;align-items:center;gap:5px}

/* -------------------------------------------------------- compte à rebours */
.cdown{
  display:flex;align-items:center;gap:8px;margin-top:11px;
  padding:9px 13px;border-radius:13px;
  background:var(--brand-soft);color:var(--brand);
  font-size:13px;font-weight:650;
  transition:background .3s ease,color .3s ease;
}
.cdown .l{opacity:.85}
.cdown .t{margin-left:auto;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
/* tabular-nums : sans cela le « 1 » est plus étroit que les autres chiffres et
   le chrono se dandine à chaque seconde */
.cdown.urgent{background:#FDECEC;color:var(--danger)}
.cdown.urgent .t{animation:battement 1s ease-in-out infinite}
.cdown.fini{background:var(--bg);color:var(--muted)}
.cdown.fini .t{animation:none}
.cdown.libre{background:var(--bg);color:var(--muted);font-weight:600}
@keyframes battement{50%{transform:scale(1.09)}}
/* dans un bandeau déjà coloré (suivi client), le chrono se pose en transparence */
.card[style*="brand-grad"] .cdown{background:rgba(255,255,255,.18);color:#fff}
.card[style*="brand-grad"] .cdown.urgent{background:rgba(255,255,255,.3);color:#fff}

/* la course qui vous est nommément proposée se distingue des autres */
.order-card.offerte{border-color:var(--brand);box-shadow:0 10px 26px -14px rgba(255,77,45,.6)}

/* ============================================================ ESPACE RESTAURANT
   Barre latérale sombre + pages sur fond crème, d'après les maquettes. */
.sidenav{display:none}
/* Colonne étroite : pictogramme au-dessus du libellé. À 110 px, un libellé
   posé à côté de l'icône ne tiendrait pas — « Commandes » et « Déconnexion »
   seraient coupés. */
@media(min-width:1000px){
  /* `body.has-side` et non `.sidenav` seul : le JS pose bien l'attribut hidden
     hors espace restaurant, mais une règle de classe l'emporte sur le
     [hidden]{display:none} du navigateur — la colonne noire réapparaissait,
     vide, chez le client et le livreur. */
  body.has-side .sidenav{
    display:flex;flex-direction:column;
    position:fixed;left:0;top:0;bottom:0;width:110px;z-index:80;
    background:#14161A;color:#fff;padding:14px 8px;
  }
  /* le contenu se décale, la barre du haut aussi */
  body.has-side #view,
  body.has-side .topbar{margin-left:110px}
  /* le menu horizontal ferait double emploi avec la colonne */
  body.has-side .deskmenu,
  body.has-side .brand{display:none}
}
.side-brand{display:block;margin:2px auto 16px;width:60px}
.side-brand img{width:100%;border-radius:14px;background:#fff}
.side-nav{display:flex;flex-direction:column;gap:4px;flex:1}
.sidenav a, .sidenav button{
  display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;
  padding:11px 4px;border-radius:14px;border:none;background:transparent;
  color:rgba(255,255,255,.66);font:inherit;font-size:11px;font-weight:650;
  line-height:1.15;text-align:center;cursor:pointer;transition:.22s;
}
.sidenav a:hover, .sidenav button:hover{background:rgba(255,255,255,.08);color:#fff}
.sidenav a.on{
  background:var(--brand-grad);color:#fff;
  box-shadow:0 8px 18px -8px rgba(255,107,53,.8);
}
.sidenav .ic{line-height:0;flex:none}
.side-foot{border-top:1px solid rgba(255,255,255,.1);padding-top:10px;display:flex;flex-direction:column;gap:4px}

/* ---- gabarit commun aux quatre pages ---- */
.resto-page{
  --brand:#FF6B35;
  --brand-light:#FF8A3D;
  --brand-soft:#FFF1E8;
  --brand-grad:linear-gradient(135deg,#FF8A3D 0%,#FF6B35 100%);
  --line:#F3E9E0;

  position:relative;min-height:calc(100vh - 60px);
  background:
    radial-gradient(680px 380px at 100% 0%, rgba(255,138,61,.18), transparent 62%),
    radial-gradient(520px 320px at 0% 100%, rgba(255,107,53,.07), transparent 58%),
    #FFF8F2;
}
.resto-page .card{
  border-radius:20px;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(196,120,74,.05), 0 10px 28px -18px rgba(196,120,74,.35);
}
.resto-page .btn-primary{
  border-radius:14px;box-shadow:0 8px 20px -8px rgba(255,107,53,.6);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.resto-page .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(255,107,53,.7)}
.resto-page .btn-primary:active{transform:translateY(0) scale(.985)}

/* en-tête de page : pastille orange, titre, fil d'ariane */
.rs-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.rs-head .ic{
  width:48px;height:48px;border-radius:15px;flex:none;
  background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;line-height:0;
}
.rs-head .h1{font-size:27px}
.rs-crumb{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);margin-top:3px}
.rs-crumb b{color:var(--ink-2);font-weight:650}
.rs-crumb .sep{color:#CFC4B8;line-height:0}
.rs-head .grow{min-width:0}
.rs-head-side{display:flex;align-items:center;gap:12px;margin-left:auto}
.rs-open{
  display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);
  padding:9px 14px;border-radius:999px;font-weight:700;font-size:13.5px;box-shadow:var(--sh-1);
}

/* vignettes de statistique */
.rs-stats{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:1000px){ .rs-stats{grid-template-columns:repeat(4,1fr)} }
.rs-stat{padding:18px;display:flex;flex-direction:column;gap:2px;background:#fff}
.rs-stat .top{display:flex;align-items:center;gap:12px}
.rs-stat .ic{
  width:46px;height:46px;border-radius:50%;flex:none;
  display:grid;place-items:center;line-height:0;color:#fff;
  background:var(--brand-grad);box-shadow:0 8px 18px -8px rgba(255,107,53,.6);
}
.rs-stat .ic.ok{background:linear-gradient(135deg,#34D399,#12B76A);box-shadow:0 8px 18px -8px rgba(18,183,106,.6)}
.rs-stat .ic.info{background:linear-gradient(135deg,#93C5FD,#3B82F6);box-shadow:0 8px 18px -8px rgba(59,130,246,.55)}
.rs-stat .ic.gold{background:linear-gradient(135deg,#FCD34D,#F59E0B);box-shadow:0 8px 18px -8px rgba(245,158,11,.55)}
.rs-stat .k{font-size:13px;color:var(--muted);font-weight:650}
.rs-stat .v{font-size:27px;font-weight:850;letter-spacing:-.02em;margin-top:2px}
.rs-stat .s{font-size:12.5px;font-weight:650;margin-top:2px}
.rs-stat .s.up{color:#0E9F6E}
.rs-stat .spark{margin-top:10px;display:block;width:100%;height:34px}

/* deux colonnes sur grand écran : commandes à gauche, indicateurs à droite */
.rs-cols{display:grid;gap:16px;margin-top:16px}
@media(min-width:1200px){ .rs-cols{grid-template-columns:1.55fr 1fr;align-items:start} }

.rs-big{font-size:26px;font-weight:850;letter-spacing:-.02em;margin:6px 0 14px}
/* histogramme du chiffre d'affaires, en CSS pur */
.rs-bars{display:flex;align-items:flex-end;gap:10px;height:130px}
.rs-bars .b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:8px}
.rs-bars .b span{
  width:100%;max-width:26px;border-radius:8px 8px 3px 3px;
  background:var(--brand-grad);transition:height .4s cubic-bezier(.22,1,.36,1);
}
.rs-bars .b i{font-style:normal;font-size:11.5px;color:var(--muted);font-weight:650}

.rs-prod b{font-size:14px}
.rs-prod .bar{display:block;height:7px;border-radius:99px;background:var(--brand-soft);margin-top:7px;overflow:hidden}
.rs-prod .bar i{display:block;height:100%;border-radius:99px;background:var(--brand-grad)}

/* onglets des commandes : pilules jointives au-dessus de la carte */
.rs-tabs{display:flex;gap:6px;margin:18px 0 0;overflow-x:auto;scrollbar-width:none}
.rs-tabs::-webkit-scrollbar{display:none}
.rs-tabs button{
  display:flex;align-items:center;gap:9px;flex:none;
  padding:14px 20px;border:1px solid var(--line);border-bottom:none;
  background:rgba(255,255,255,.6);color:var(--muted);
  border-radius:16px 16px 0 0;font:inherit;font-size:14px;font-weight:700;
  cursor:pointer;transition:.22s;line-height:1;
}
.rs-tabs button:hover{background:#fff;color:var(--ink)}
.rs-tabs button.on{background:var(--brand-grad);color:#fff;border-color:transparent}
.rs-tabs b{
  min-width:22px;padding:2px 7px;border-radius:999px;font-size:12px;
  background:var(--brand-soft);color:var(--brand);
}
.rs-tabs button.on b{background:rgba(255,255,255,.25);color:#fff}

/* barre du menu : onglets de catégories + bouton d'ajout */
.rs-menubar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rs-menubar .menu-tabs{flex:1;min-width:0;margin:0;padding:10px 0;background:transparent;border:none;position:static}
.rs-menubar .btn{flex:none}

/* --------------------------------------------- tableau de bord du livreur */
.driver-page{
  --brand:#FF6B35;
  --brand-light:#FF8A3D;
  --brand-soft:#FFF1E8;
  --brand-grad:linear-gradient(135deg,#FF8A3D 0%,#FF6B35 100%);
  --line:#F3E9E0;

  position:relative;overflow:hidden;min-height:calc(100vh - 60px);
  background:
    radial-gradient(560px 320px at 98% 0%, rgba(255,138,61,.12), transparent 60%),
    radial-gradient(460px 300px at 0% 100%, rgba(255,107,53,.08), transparent 58%),
    #FFF8F2;
}
.driver-page .card{
  border-radius:22px;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(196,120,74,.05), 0 10px 28px -18px rgba(196,120,74,.35);
}

/* en-tête : avatar cerclé, pastille verte quand le livreur est disponible */
.drv-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.drv-ava{position:relative;flex:none;display:inline-flex;padding:3px;border-radius:50%;background:var(--brand-grad)}
.drv-ava .avatar{border:3px solid #FFF8F2}
.drv-ava.online::after{
  content:'';position:absolute;right:2px;bottom:2px;width:16px;height:16px;
  border-radius:50%;background:#12B76A;border:3px solid #FFF8F2;
}
.drv-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.drv-meta .dot{color:#CFC4B8}

/* carte de statut : verte quand disponible, bleutée en course */
.drv-status{transition:background .3s ease, border-color .3s ease}
.drv-status .drv-badge{
  width:46px;height:46px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:#D8D2C8;color:#fff;line-height:0;
}
.drv-status .drv-pill{
  padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap;
}
.drv-status .drv-state{margin-top:2px}
.drv-status.available{background:#F1FBF5;border-color:#CDEFDC}
.drv-status.available .drv-badge{background:#12B76A;box-shadow:0 8px 18px -8px rgba(18,183,106,.6)}
.drv-status.available .drv-state{color:#0E9F6E}
.drv-status.available .drv-pill{color:#0E9F6E;border-color:#CDEFDC}
.drv-status.busy{background:#EFF5FF;border-color:#D5E4FB}
.drv-status.busy .drv-badge{background:#3B82F6}
.drv-status.busy .drv-state{color:#1D4ED8}

/* statistiques : pastille à gauche, intitulé, valeur, légende */
.drv-stats{gap:12px}
.drv-stat{
  display:flex;align-items:center;gap:13px;padding:16px;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.drv-stat:hover{transform:translateY(-2px);box-shadow:0 14px 32px -20px rgba(196,120,74,.5)}
.drv-stat .ic{
  width:52px;height:52px;border-radius:16px;flex:none;
  background:var(--brand-soft);display:grid;place-items:center;font-size:24px;
}
.drv-stat .k{
  font-size:11px;font-weight:750;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em;
}
.drv-stat .v{font-size:24px;font-weight:850;color:var(--brand);margin:2px 0 1px;letter-spacing:-.02em}
.drv-stat .s{font-size:12px;color:var(--muted)}

.drv-panel .link{color:var(--brand);font-weight:700}

/* en-tête de page : pastille orange, titre, sous-titre */
.drv-title{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.drv-title .ic{
  width:52px;height:52px;border-radius:17px;flex:none;
  background:var(--brand-soft);display:grid;place-items:center;font-size:24px;
}
.drv-title .h1{font-size:26px}
.drv-title .sub{margin-top:2px}

/* pastille de titre des écrans vides (« Aucune course disponible ») */
.drv-chip{
  display:inline-flex;align-items:center;gap:10px;margin-top:2px;
  padding:12px 22px;border-radius:999px;background:#fff;
  border:1px solid var(--line);box-shadow:0 8px 22px -14px rgba(196,120,74,.5);
  font-size:17px;font-weight:800;letter-spacing:-.01em;
}

/* rappel « Restez disponible » sous l'illustration */
.drv-note{
  display:flex;align-items:center;gap:13px;margin:20px auto 0;max-width:520px;
  padding:15px 16px;border-radius:18px;text-align:left;
  background:var(--brand-soft);border:1px solid #F7DECF;
}
.drv-note .art{font-size:26px;flex:none}
.drv-note .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.drv-note b{color:var(--brand);font-size:14.5px}

/* bandeau des gains cumulés */
.drv-earn{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;
  padding:20px 22px;border-radius:22px;color:#fff;
  background:linear-gradient(100deg,#FF8A3D 0%,#FF6B35 48%,#F0355C 100%);
  box-shadow:0 16px 34px -18px rgba(255,107,53,.75);
}
.drv-earn .k{font-size:11.5px;font-weight:750;letter-spacing:.06em;opacity:.9}
.drv-earn .v{font-size:32px;font-weight:850;margin-top:4px;letter-spacing:-.02em}
.drv-earn .art{
  font-size:34px;flex:none;width:74px;height:74px;border-radius:50%;
  background:rgba(255,255,255,.16);display:grid;place-items:center;
}

/* ligne d'historique */
.drv-hist{transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease}
.drv-hist:hover{transform:translateY(-2px);box-shadow:0 16px 34px -20px rgba(196,120,74,.5)}
.drv-hist .ocode{
  background:var(--brand-soft);color:var(--brand);font-weight:800;
  padding:5px 12px;border-radius:999px;font-size:12.5px;
}
.drv-go{
  width:36px;height:36px;border-radius:12px;flex:none;
  background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;line-height:0;
}
.driver-page .btn-primary{
  border-radius:16px;box-shadow:0 8px 20px -8px rgba(255,107,53,.6);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.driver-page .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(255,107,53,.7)}
.driver-page .btn-primary:active{transform:translateY(0) scale(.985)}

/* ------------------------------------------------ écrans vides illustrés */
.empty-scene{text-align:center;padding:26px 0 40px}
.empty-scene.compact{padding:14px 0 26px}
.empty-scene .scene-art{
  width:100%;max-width:440px;height:auto;margin:0 auto 6px;display:block;
  /* le visuel est sur fond quasi blanc : « multiply » le fond dans la page,
     sinon on voit un rectangle plus clair que le crème alentour */
  mix-blend-mode:multiply;
}
.empty-scene.compact .scene-art{max-width:330px}
.empty-scene .scene-title{margin-top:4px}
.empty-scene .scene-sub{
  color:var(--muted);font-size:15px;margin:10px auto 0;max-width:430px;line-height:1.55;
}
.empty-scene .scene-cta{
  display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:22px;
}
.empty-scene .scene-cta .btn{min-width:270px}
.empty-scene .scene-cta .btn-ghost{border:1px solid var(--line)}

/* le panier vide occupe toute la page, sur un fond doux */
.empty-scene:not(.compact){
  min-height:calc(100vh - 60px - var(--nav-h));
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(620px 340px at 50% 26%, rgba(255,138,90,.10), transparent 62%),
    linear-gradient(160deg,#FFFDFB 0%, var(--bg) 100%);
}
.orders-page{
  background:
    radial-gradient(560px 320px at 96% 4%, rgba(255,138,90,.10), transparent 60%),
    radial-gradient(480px 300px at 2% 98%, rgba(255,138,90,.08), transparent 58%);
  min-height:calc(100vh - 60px);
}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
th{text-align:left;padding:12px 14px;background:var(--bg);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;white-space:nowrap}
td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:middle}
/* Survol d'une ligne, thème clair uniquement.
   Deux précautions apprises à la dure :
   — la règle vise td, pas tr : elle recouvrait donc le fond sombre posé sur
     la ligne dans l'espace administrateur, qui virait au blanc au passage de
     la souris. Elle s'arrête maintenant au thème clair.
   — @media(hover:hover) : sur un téléphone, le survol se déclenche au toucher
     et RESTE collé jusqu'au tap suivant. Un doigt qui fait défiler laissait
     derrière lui une ligne blanche. */
@media(hover:hover){
  body:not(.role-admin) tr:hover td{background:#FCFDFF}
}

.notif-item{display:flex;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:.14s}
.notif-item:hover{background:var(--bg)}
.notif-item.unread{background:var(--brand-soft)}
.notif-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:17px;flex:none;background:#fff;border:1px solid var(--line)}

.fade-in{animation:fadeUp .3s cubic-bezier(.22,1,.36,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.role-card{
  border:2px solid var(--line);border-radius:var(--r-lg);padding:16px;cursor:pointer;transition:.18s;
  display:flex;gap:13px;align-items:center;background:#fff;
}
.role-card:hover{border-color:#D3D9E4}
.role-card.on{border-color:var(--brand);background:var(--brand-soft)}
.role-card .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:24px;background:var(--bg);flex:none}
.role-card.on .ic{background:#fff}
/* logo du rôle : fond blanc, image entière (les logos portent leur propre texte) */
.role-card .ic.has-img{background:#fff center/86% no-repeat;border:1px solid var(--line)}
.role-card.on .ic.has-img{border-color:var(--brand)}

.banner{padding:13px 15px;border-radius:var(--r);font-size:13.5px;font-weight:600;display:flex;gap:10px;align-items:flex-start}
.banner-warn{background:var(--warn-soft);color:#B54708}
.banner-info{background:var(--info-soft);color:#1849A9}
.banner-danger{background:var(--danger-soft);color:#B42318}
.banner-ok{background:var(--ok-soft);color:#067647}

.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.spinner.dark{border-color:rgba(0,0,0,.15);border-top-color:var(--brand)}
@keyframes spin{to{transform:rotate(360deg)}}

/* champ de code de confirmation : des chiffres larges et espacés, lisibles
   d'un coup d'œil pendant qu'on recopie depuis sa boîte mail */
/* La longueur du code varie (6 à 10 chiffres selon le réglage Supabase) :
   la taille du texte suit la largeur disponible plutôt que de déborder. */
.input-code{
  text-align:center;font-size:clamp(20px,6.5vw,30px);font-weight:800;
  letter-spacing:.3em;text-indent:.3em;padding-top:14px;padding-bottom:14px;
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------- écran d'ouverture (5 s)
   Le logo naît d'un fondu, respire pendant que l'application se charge, puis
   l'écran entier s'efface en glissant vers le spectateur. Rien ne clignote :
   chaque étape enchaîne la suivante sans à-coup, même quand le chargement est
   déjà terminé depuis longtemps — c'est le JS qui retient la sortie. */
.splash{
  position:fixed;inset:0;background:var(--brand-grad);display:grid;place-items:center;
  z-index:500;color:#fff;
  transition:opacity .65s ease, transform .65s ease;
}
.splash.sortie{opacity:0;transform:scale(1.07);pointer-events:none}
.splash .brand-mark{width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.2);font-size:32px;margin:0 auto 14px;box-shadow:none}
.splash-logo{
  width:min(230px,62vw);border-radius:26px;background:#fff;padding:14px;
  box-shadow:0 22px 50px -14px rgba(0,0,0,.45);
  animation:logoIn 1.15s cubic-bezier(.22,1,.36,1) both,
            logoSouffle 3.2s 1.15s ease-in-out infinite;
}
.splash-sub{
  opacity:.9;font-size:13px;margin-top:14px;
  animation:splashSub .9s .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes logoIn{
  from{opacity:0;transform:scale(.78) translateY(18px)}
  to  {opacity:1;transform:none}
}
/* respiration très légère : le logo est vivant, pas figé sur une image morte */
@keyframes logoSouffle{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.035)}
}
@keyframes splashSub{
  from{opacity:0;transform:translateY(10px)}
  to  {opacity:.9;transform:none}
}
/* certains utilisateurs demandent explicitement moins d'animation au système :
   on garde le fondu, on retire le mouvement */
@media(prefers-reduced-motion:reduce){
  .splash-logo{animation:logoIn .6s ease both}
  .splash.sortie{transform:none}
}

/* logo dans la barre du haut */
.brand-logo{height:34px;width:auto;border-radius:9px;display:block}
@media(min-width:700px){ .brand-logo{height:38px} }

/* ------------------------------------------ bouton du panneau de test */
.tp-btn{
  position:fixed;right:14px;bottom:calc(var(--nav-h) + 16px);z-index:90;
  width:50px;height:50px;border-radius:16px;border:none;cursor:pointer;
  background:var(--ink);color:#fff;font-size:22px;
  box-shadow:0 10px 26px -8px rgba(16,24,40,.7);
  display:grid;place-items:center;transition:.18s;
  margin-bottom:env(safe-area-inset-bottom);
}
.tp-btn:hover{transform:translateY(-3px) scale(1.05);background:var(--brand)}
.tp-btn::after{
  content:'TEST';position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);
  background:var(--brand);color:#fff;font-size:8px;font-weight:800;
  padding:2px 6px;border-radius:999px;letter-spacing:.06em;
}

/* ---------------------------------------------------- sélecteur de carte */
.mp-search{margin-bottom:8px}
.mp-results{max-height:170px;overflow-y:auto}
.mp-results:not(:empty){border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;background:#fff}
.mp-item{padding:11px 13px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line);line-height:1.35}
.mp-item:last-child{border-bottom:none}
.mp-item:hover{background:var(--brand-soft)}

.mp-map{position:relative;height:300px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.mp-map #mpmap{position:absolute;inset:0}
/* le repère reste fixe au centre : c'est la carte qui bouge sous lui */
.mp-pin{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);
  z-index:500;pointer-events:none;line-height:0;
  /* l'icône au trait n'a pas de couleur propre, contrairement à l'emoji :
     on la remplit en orange et on l'entoure de blanc pour qu'elle reste
     lisible au-dessus de n'importe quelle carte */
  color:var(--brand);
  filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 4px 5px rgba(0,0,0,.35));
  transition:transform .16s ease;
}
.mp-pin .ico{stroke-width:2.4}
.mp-pin.moving{transform:translate(-50%,-118%) scale(1.06)}
.mp-pin::after{
  content:'';position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  width:12px;height:5px;border-radius:50%;background:rgba(0,0,0,.28);
}
.mp-loc{
  position:absolute;right:12px;bottom:12px;z-index:500;
  width:44px;height:44px;border-radius:14px;border:1px solid var(--line);
  background:#fff;font-size:19px;cursor:pointer;box-shadow:var(--sh-2);
  display:grid;place-items:center;
}
.mp-loc:hover{background:var(--brand-soft)}
.mp-hint{font-size:12px;color:var(--muted);text-align:center;margin:9px 0}
.mp-addr{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;font-size:13.5px;min-height:46px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}

/* aperçu de position (lecture seule) */
.map-preview{height:150px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#F2EDE5}
.leaflet-container{font:inherit}

/* ---------------------------------------------------------------------------
   La carte doit passer SOUS la barre du bas et sous l'en-tête.

   Leaflet empile ses couches très haut : la couche principale est à 400, le
   repère du sélecteur à 500. Le cadre qui les contient, lui, n'avait pas de
   z-index : il ne formait donc aucun contexte d'empilement, et ces 400 et 500
   se comparaient directement à la barre de navigation (70) et à l'en-tête (60).
   Résultat : en défilant, la carte se dessinait par-dessus « Accueil /
   Restaurants / Panier / Commandes / Compte ».

   `z-index:0` sur le cadre suffit : tout Leaflet reste enfermé à l'intérieur,
   et le cadre entier se range derrière la barre. À l'intérieur, l'ordre entre
   les tuiles, les marqueurs et le repère ne change pas.
   --------------------------------------------------------------------------- */
.map-preview,
.live-map,
.mp-map,
.leaflet-container{position:relative;z-index:0}

/* ------------------------------------------------ carte de suivi en direct */
.live-map{height:240px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#F2EDE5}
.lm-pin{
  width:38px;height:38px;border-radius:50%;background:#fff;
  display:grid;place-items:center;font-size:19px;
  border:2.5px solid var(--line);box-shadow:0 4px 10px rgba(16,24,40,.28);
}
.lm-resto{border-color:var(--brand)}
.lm-client{border-color:var(--info)}
.lm-driver{
  border-color:var(--ok);background:var(--ok-soft);
  animation:lmPulse 2s infinite;
}
@keyframes lmPulse{
  0%{box-shadow:0 0 0 0 rgba(18,183,106,.55), 0 4px 10px rgba(16,24,40,.28)}
  70%{box-shadow:0 0 0 14px rgba(18,183,106,0), 0 4px 10px rgba(16,24,40,.28)}
  100%{box-shadow:0 0 0 0 rgba(18,183,106,0), 0 4px 10px rgba(16,24,40,.28)}
}

.footer{background:var(--ink);color:#fff;padding:34px 0;margin-top:40px}
.footer a{opacity:.75;font-size:13.5px}
.footer a:hover{opacity:1}

/* ============================================================== ESPACE ADMIN
   Console sombre, d'après les maquettes. Le reste du site garde sa teinte
   claire : seule la classe posée sur <body> par Shell fait basculer la barre
   du haut et la barre du bas, qui vivent en dehors de #view. */
body.role-admin{background:#0A0B0D}

body.role-admin .topbar{
  background:rgba(12,13,16,.94);border-bottom:1px solid #1E2025;
}
body.role-admin .topbar .brand{color:#fff}
body.role-admin .deskmenu a{
  display:inline-flex;align-items:center;gap:7px;
  color:#9BA1AC;border-radius:12px;padding:9px 14px;
}
body.role-admin .deskmenu a:hover{background:#1A1C21;color:#fff}
body.role-admin .deskmenu a.on{
  background:linear-gradient(135deg,rgba(255,122,45,.22),rgba(255,77,45,.14));
  color:#FF8A3D;box-shadow:inset 0 0 0 1px rgba(255,122,45,.35);
}
body.role-admin .icon-btn{background:#16181D;border-color:#252830;color:#C9CED8}
body.role-admin .icon-btn:hover{background:#1F222A}
body.role-admin .bottomnav{background:rgba(12,13,16,.96);border-top-color:#1E2025}
body.role-admin .bottomnav a{color:#8C93A0}
body.role-admin .bottomnav a.on{color:#FF8A3D}

/* Sur fond sombre, le surlignage de sélection du navigateur est un bloc
   blanc : il recouvrait une ligne entière du tableau dès qu'on faisait
   glisser la souris ou le doigt en la traversant. On lui impose une teinte
   sourde, lisible, à la place. */
.admin-page ::selection{background:rgba(255,122,45,.38);color:#fff}
.admin-page ::-moz-selection{background:rgba(255,122,45,.38);color:#fff}

.admin-page{
  /* palette redéfinie ici : les règles existantes (cartes, champs, boutons,
     étiquettes) suivent sans qu'aucune d'elles ait besoin d'être touchée */
  --ink:#F2F4F8;
  --ink-2:#C2C8D2;
  --muted:#8C93A0;
  --line:#242730;
  --card:#141619;
  --bg:#0A0B0D;
  --brand:#FF7A2D;
  --brand-soft:rgba(255,122,45,.14);
  --brand-grad:linear-gradient(135deg,#FF8A3D 0%,#F2601F 100%);
  --ok-soft:rgba(18,183,106,.14);
  --warn-soft:rgba(247,144,9,.15);
  --info-soft:rgba(59,130,246,.15);
  --danger-soft:rgba(240,68,56,.14);
  --sh-1:none;
  --sh-2:0 10px 26px -18px rgba(0,0,0,.9);

  min-height:calc(100vh - 60px);background:var(--bg);color:var(--ink);
}
.admin-page .card{background:var(--card);border-color:var(--line)}
.admin-page .input,.admin-page select.input,.admin-page textarea.input{
  background:#101216;border-color:#282C35;color:#EDEFF3;
}
.admin-page .input::placeholder{color:#6B7280}
.admin-page label{color:#B7BDC8}
.admin-page .hint{color:#7B828E}
.admin-page .tag-ok{color:#4ADE80}
.admin-page .tag-warn{color:#FBBF24}
.admin-page .tag-info{color:#7DAAFF}
.admin-page .tag-danger{color:#FF7A6E}
.admin-page .btn-ghost{background:#171A1F;border-color:#2A2E38;color:#DDE1E8}
.admin-page .btn-ghost:hover{background:#20242B}
.admin-page .btn-danger{background:transparent;border:1px solid rgba(240,68,56,.5);color:#FF7A6E}
.admin-page .btn-danger:hover{background:rgba(240,68,56,.12)}
.admin-page .btn-ok{background:transparent;border:1px solid rgba(18,183,106,.5);color:#4ADE80}
.admin-page .btn-ok:hover{background:rgba(18,183,106,.12)}
.admin-page .btn-soft{background:var(--brand-soft);color:#FF8A3D}
.admin-page .chip{background:#171A1F;border:1px solid #2A2E38;color:#DDE1E8}
.admin-page .link{color:#FF8A3D}
.admin-page .divider{background:var(--line)}
.admin-page .empty{color:#6F7684}
.admin-page .empty b{color:#E6E9EF}
.admin-page .skel{background:linear-gradient(90deg,#15171B 25%,#1D2026 50%,#15171B 75%);background-size:200% 100%}

.adm-head{margin-bottom:20px}
.adm-head .h1{font-size:31px;font-weight:800;color:#fff}
.adm-head .sub{color:#8C93A0;font-size:14px;margin-top:5px}

/* ---- vignettes de chiffres ---- */
.adm-stats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.adm-stat{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:17px 18px;
  transition:border-color .25s ease,transform .25s ease;
}
.adm-stat:hover{transform:translateY(-2px);border-color:#33373F}
/* la vignette « chaude » réclame une action : elle se voit de loin */
.adm-stat.hot{border-color:rgba(255,122,45,.55);box-shadow:0 0 0 1px rgba(255,122,45,.12) inset}
.adm-stat .k{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8C93A0}
.adm-stat .ic{line-height:0;color:#8C93A0}
.adm-stat .ic.orange{color:#FF8A3D}
.adm-stat .ic.vert{color:#4ADE80}
.adm-stat .ic.or{color:#FBBF24}
.adm-stat .ic.bleu{color:#7DAAFF}
.adm-stat .v{font-size:31px;font-weight:800;color:#fff;margin-top:11px;letter-spacing:-.02em}
.adm-stat .s{font-size:12.5px;color:#767D8A;margin-top:4px}

.adm-alert{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:18px;
  background:rgba(247,144,9,.09);border:1px solid rgba(247,144,9,.3);
  border-radius:16px;padding:15px 18px;
}
.adm-alert .ic{color:#FBBF24;line-height:0}
.adm-alert b{color:#fff}
.adm-alert .tiny{color:#9BA1AC}

.adm-section{display:flex;align-items:baseline;justify-content:space-between;margin:26px 0 13px}
.adm-section .h2{font-size:21px;font-weight:800;color:#fff}

/* ---- barre de filtres ---- */
.adm-filters{
  display:flex;gap:8px;margin-bottom:18px;overflow-x:auto;scrollbar-width:none;
  background:#111317;border:1px solid var(--line);border-radius:15px;padding:6px;
}
.adm-filters::-webkit-scrollbar{display:none}
.adm-filters button{
  flex:1;min-width:max-content;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border:none;background:transparent;border-radius:11px;
  font-weight:650;font-size:13.5px;color:#8C93A0;cursor:pointer;transition:.18s;
}
.adm-filters button:hover{color:#DDE1E8;background:#181B20}
.adm-filters button.on{background:var(--brand-grad);color:#fff}
.adm-filters .n{
  background:rgba(255,255,255,.12);border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:700;
}
.adm-filters button.on .n{background:rgba(255,255,255,.24)}

/* ---- fiches ---- */
.adm-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;
  transition:border-color .25s ease;
  /* comme les tableaux : on fait défiler ces listes au doigt, et chaque
     glissement surlignait le texte au passage */
  -webkit-user-select:none; user-select:none;
}
.adm-card:hover{border-color:#33373F}
/* liseré de statut sur les livreurs, comme dans la maquette */
.adm-card.drv{border-left:3px solid #2A2E38}
.adm-card.drv.approved{border-left-color:#FF7A2D}
.adm-card.drv.pending{border-left-color:#FBBF24}
.adm-card.drv.rejected{border-left-color:#F04438}
.adm-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.adm-name{font-size:17px;font-weight:750;color:#fff}
.adm-verif{color:#FF8A3D;line-height:0}
.adm-line{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:13px;color:#98A0AC;margin-top:7px;
}
.adm-line .sep{color:#3A3F49;margin:0 4px}
.adm-line .warn{color:#FBBF24;font-weight:650;display:inline-flex;align-items:center;gap:6px}
.adm-line .danger{color:#FF7A6E;font-weight:650}
.adm-line.danger{color:#FF7A6E}
.adm-line .lien{color:#FF8A3D;font-weight:650}
.adm-logo{
  width:88px;height:88px;border-radius:14px;flex:none;overflow:hidden;
  background:#0E1013;border:1px solid #24272F;display:grid;place-items:center;
  color:#6F7684;font-weight:800;font-size:20px;
}
.adm-logo img{width:100%;height:100%;object-fit:cover}
.adm-acts{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-left:auto}
@media(max-width:700px){ .adm-acts{margin-left:0;width:100%} }

/* ---- tableaux ---- */
.adm-table{
  overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--card);
  /* On fait défiler ces listes au doigt : sans cela, chaque glissement
     sélectionnait le texte survolé et le surlignait. Les valeurs restent
     copiables depuis la fiche qui s'ouvre au clic sur « Modifier ». */
  -webkit-user-select:none; user-select:none;
}
.adm-table table{width:100%;border-collapse:collapse;font-size:13.5px}
.adm-table th{
  text-align:left;padding:14px 16px;background:#101216;color:#8C93A0;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.adm-table td{padding:14px 16px;border-bottom:1px solid #1C1F25;color:#C6CCD6;vertical-align:middle}
.adm-table tbody tr:last-child td{border-bottom:none}
.adm-table tbody tr{transition:background .18s ease}

/* Le survol n'existe qu'à la souris. Sur un téléphone, un doigt qui touche une
   ligne laissait le fond de survol collé dessus jusqu'au tap suivant. */
/* On peint sur les td, et non sur le tr : c'est le seul moyen de l'emporter
   sur une règle qui vise elle-même les td. */
@media(hover:hover){
  .adm-table tbody tr:hover td{background:#16191E}
}

/* Compte bloqué : la ligne est teintée de rouge, mais le texte garde sa
   couleur claire. Un fond rouge plein rendait les noms illisibles. */
.adm-table tbody tr.bloque{background:rgba(240,68,56,.12);box-shadow:inset 3px 0 0 #F04438}
.adm-table tbody tr.bloque td{color:#E6C3C0}
.adm-table tbody tr.bloque .adm-user b{color:#fff}
.adm-table .ic-cell{white-space:nowrap}
.adm-table .ic-cell .ico{color:#6F7684;margin-right:2px}
.adm-table .vide{color:#4E545E}
.adm-table .montant{color:#FF8A3D;font-weight:750}
.adm-table .ocode{
  background:rgba(255,122,45,.14);color:#FF8A3D;border:none;
  padding:5px 10px;border-radius:8px;font-weight:750;font-size:12.5px;
}
.adm-user{display:flex;align-items:center;gap:11px}
.adm-user b{color:#fff;font-size:14px}
.adm-user .tiny{color:#767D8A}

/* pastille de rôle : une couleur par rôle, plus rapide à lire qu'un mot seul */
.adm-role{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  font-size:12px;font-weight:700;border:1px solid transparent;
}
.adm-role.client{background:rgba(59,130,246,.13);color:#7DAAFF;border-color:rgba(59,130,246,.28)}
.adm-role.admin{background:rgba(167,139,250,.13);color:#B9A2FF;border-color:rgba(167,139,250,.3)}
.adm-role.driver{background:rgba(18,183,106,.13);color:#4ADE80;border-color:rgba(18,183,106,.3)}
.adm-role.restaurant{background:rgba(255,122,45,.13);color:#FF9457;border-color:rgba(255,122,45,.3)}

.adm-search{position:relative;margin-bottom:14px;color:#6F7684}
.adm-search .ico{position:absolute;left:15px;top:50%;transform:translateY(-50%)}
.adm-search .input{padding-left:44px}

/* =============================================================== TÉLÉPHONE
   Le site est construit mobile-first, mais « ça rentre » ne suffit pas : sur
   un téléphone on vise avec le pouce, on lit au soleil, et on tient l'appareil
   d'une main. Ce bloc corrige ce qui ne se voit qu'à la main :

   • une cible tactile fait au moins 44 px — en dessous, on rate le bouton ;
   • aucun texte utile en dessous de 12 px ;
   • les tableaux deviennent des fiches : un tableau qui défile latéralement
     cache la moitié de ses colonnes ;
   • rien ne dépasse jamais la largeur de l'écran.
   ========================================================================== */
@media(max-width:700px){

  /* ---- rien ne déborde, jamais ---- */
  .wrap,.wrap-sm{max-width:100%}
  /* les rangées pleine largeur défilent dans leur propre boîte */
  .chips,.adm-filters,.tabs,.adm-table,.table-wrap{max-width:100%}

  /* ---- cibles tactiles ---- */
  .btn{min-height:46px;padding:12px 18px}
  .btn-sm{min-height:44px;padding:10px 15px;font-size:13.5px}
  .btn-lg{min-height:52px}
  .icon-btn{width:44px;height:44px}
  .add-btn{width:44px;height:44px;border-radius:14px;font-size:22px}
  .qty button{min-width:40px;min-height:40px}
  .chip,.chips .chip{padding:11px 16px}
  .tabs button,.adm-filters button{min-height:44px}
  .zone-pick{min-height:44px}

  /* ---- lisibilité ---- */
  .tiny{font-size:12.5px}
  .bottomnav a{font-size:10px}
  .adm-stat .k,.adm-table th{font-size:12px}
  .drv-stat .s,.rs-stat .s,.adm-stat .s{font-size:12.5px}
  .chip-n{font-size:12px}
  .hint{font-size:12.5px}
  /* pastilles et intitulés de vignettes : 11 px passe sur un écran de
     bureau regardé de près, pas sur un téléphone tenu à bout de bras */
  .tag{font-size:12px;padding:5px 11px}
  .adm-stat .k,.drv-stat .k,.rs-stat .k{font-size:12px}
  .stat .k,.drv-stat .s,.rs-stat .s,.adm-stat .s{font-size:12.5px}
  .hero-note,.scene-sub,.drv-note{font-size:13px}
  .adm-filters .n,.cat-item span,.drv-earn .k,.rs-bars .b i{font-size:12.5px}

  /* ---- barre du bas : six rubriques tiennent mal en toutes lettres ---- */
  .bottomnav a{padding:0 2px;gap:2px}
  .bottomnav a span{
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }

  /* ---- titres : moins hauts, la place est comptée ---- */
  .adm-head .h1{font-size:25px}
  .adm-head .sub{font-size:13.5px}
  .h1{font-size:26px}

  /* ---- vignettes de chiffres : deux par ligne plutôt qu'une ---- */
  /* min-width:0 : un enfant de grille refuse par défaut de descendre sous sa
     largeur minimale de contenu, et pousse alors toute la page */
  .adm-stat,.rs-stat,.drv-stat,.stat,.grid > *{min-width:0}
  .adm-stats{grid-template-columns:1fr 1fr;gap:10px}
  .adm-stat{padding:13px 14px}
  .adm-stat .v{font-size:23px;margin-top:8px}
  .adm-stat .k{letter-spacing:.04em}
  .grid-stats{grid-template-columns:1fr 1fr}

  /* ---- fiches admin : tout en colonne, actions pleine largeur ---- */
  .adm-row{gap:12px}
  .adm-logo{width:64px;height:64px}
  .adm-acts{width:100%;margin-left:0}
  .adm-acts .btn{flex:1 1 46%}
  .adm-card{padding:15px}
  .adm-name{font-size:16px}

  /* ---- filtres : on garde le défilement, mais chaque bouton reste lisible ---- */
  .adm-filters{padding:5px;gap:5px}
  .adm-filters button{flex:0 0 auto;padding:11px 14px;font-size:13px}

  /* =====================================================================
     TABLEAUX → FICHES
     Un tableau de huit colonnes sur 390 px n'est pas consultable : on en
     voit trois, et les cinq autres sont derrière un défilement horizontal
     que rien n'annonce. Chaque ligne devient donc une fiche, et l'intitulé
     de colonne réapparaît devant chaque valeur (attribut data-l).
     ===================================================================== */
  .adm-table{border:none;background:transparent;overflow:visible}
  /* min-width:560px est posé sur tous les <table> pour garder les colonnes
     lisibles ; il empêchait ici la mise en fiches et repoussait toutes les
     valeurs hors de l écran */
  .adm-table table,.adm-table tbody,.adm-table tr,.adm-table td{
    display:block;width:100%;min-width:0;
  }
  .adm-table thead{display:none}
  .adm-table tr{
    background:var(--card);border:1px solid var(--line);border-radius:16px;
    padding:14px 16px;margin-bottom:12px;
  }
  .adm-table td{
    border:none;padding:7px 0;display:flex;align-items:center;gap:10px;
    justify-content:space-between;text-align:right;
  }
  .adm-table td::before{
    content:attr(data-l);flex:none;text-align:left;
    font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:#7B828E;
  }
  /* la première cellule fait office de titre de fiche : pas d'intitulé */
  .adm-table td.tete{
    justify-content:flex-start;text-align:left;padding-bottom:12px;
    border-bottom:1px solid var(--line);margin-bottom:6px;
  }
  .adm-table td.tete::before{content:none}
  .adm-table td.actions{
    display:flex;gap:8px;padding-top:12px;margin-top:6px;
    border-top:1px solid var(--line);
  }
  .adm-table td.actions::before{content:none}
  .adm-table td.actions .row{width:100%;gap:8px}
  .adm-table td.actions .btn{flex:1}
  /* sur téléphone chaque ligne devient une fiche : aucun effet de survol,
     et surtout aucun fond qui resterait collé après le passage du doigt */
  .adm-table tbody tr:hover td{background:transparent}
  .adm-table .ic-cell{white-space:normal}
  /* le pictogramme de tête flotterait entre l intitulé et la valeur ;
     l intitulé dit déjà de quoi il s agit */
  .adm-table td[data-l] > .ico:first-child{display:none}

  /* ---- fiche de plat : la vignette laisse 160 px au texte sur un petit
     écran, et la rangée prix + boutons n y tient pas d une seule ligne ---- */
  .dish{gap:10px}
  .dish-img{width:74px;height:74px}
  .dish-body{min-width:0}
  .dish .row-between{flex-wrap:wrap;gap:8px}

  /* ---- espace restaurant ---- */
  /* le bouton Ouvert/Fermé passe sous le titre : côte à côte, il écrase le
     fil d ariane qui se casse alors sur deux lignes */
  .rs-head{gap:10px}
  .rs-head .h1{font-size:24px}
  .rs-head-side{margin-left:0;width:100%}
  .rs-crumb{font-size:13px}
  .rs-tabs{gap:6px}
  .rs-menubar{flex-direction:column;align-items:stretch;gap:10px}
  .rs-menubar .btn{width:100%}

  /* ---- espace livreur ---- */
  .drv-head{gap:12px}
  .drv-stats{grid-template-columns:1fr 1fr}

  /* ---- compte client ---- */
  .acc-grid{grid-template-columns:1fr}

  /* ---- accueil : la recherche sur deux lignes, sinon le champ est réduit
     à trois mots et le bouton mange la moitié de la largeur ---- */
  .hero-search{flex-direction:column;gap:6px;padding:8px}
  .hero-search input{padding:12px 10px}
  .hero-search .btn{width:100%}
  /* les trois raccourcis prennent toute la largeur : alignés, ils se lisent
     comme une liste plutôt que comme un escalier ---- */
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%;justify-content:flex-start}

  /* ---- comptes à rebours : le chrono reste bien visible ---- */
  .cdown{padding:11px 14px}
  .cdown .t{font-size:17px}
}

/* Très petits écrans (iPhone SE, 320–375 px) : on resserre encore. */
@media(max-width:380px){
  .adm-stats,.grid-stats,.drv-stats,.rs-stats{grid-template-columns:1fr}
  .bottomnav a{font-size:9.5px}
  .adm-acts .btn{flex:1 1 100%}
  .h1{font-size:23px}
  .adm-head .h1{font-size:22px}
}

/* ====================================================== INSTALLER L'APPLI */
.auth-brandrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
/* mix-blend-mode : le logo est sur fond blanc, il se fond dans le fond crème */
.auth-logo{width:104px;display:block;mix-blend-mode:multiply}

.btn-install{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 17px;border-radius:999px;cursor:pointer;
  background:var(--brand-grad);color:#fff;border:none;
  font:inherit;font-size:13.5px;font-weight:700;letter-spacing:-.01em;
  box-shadow:0 10px 22px -10px rgba(255,77,45,.85);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.btn-install:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(255,77,45,.9)}
.btn-install:active{transform:translateY(0)}
.btn-install .ico{flex:none}
/* un léger battement les premières secondes : sans cela le bouton se fond
   dans la page et personne ne le remarque */
.btn-install{animation:installPop 2.6s ease 1.2s 2}
@keyframes installPop{
  0%,100%{box-shadow:0 10px 22px -10px rgba(255,77,45,.85)}
  50%{box-shadow:0 10px 30px -6px rgba(255,77,45,.95)}
}
@media(prefers-reduced-motion:reduce){ .btn-install{animation:none} }

/* ---- mode d'emploi ---- */
.ins-logo{width:38px;height:38px;border-radius:11px;display:block}
.ins-body{display:flex;flex-direction:column;gap:10px}
.ins-intro{color:var(--muted);font-size:14px;margin-bottom:4px}
.ins-etape{
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;border-radius:15px;
  background:var(--bg);border:1px solid var(--line);
}
.ins-etape .n{
  width:27px;height:27px;border-radius:50%;flex:none;
  background:var(--brand-grad);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800;
}
.ins-etape .grow{font-size:14px;line-height:1.45}
.ins-etape .ic{color:var(--brand);line-height:0;flex:none}
.ins-note{
  display:flex;align-items:flex-start;gap:10px;margin-top:4px;
  padding:12px 14px;border-radius:14px;
  background:var(--warn-soft);color:#8A5A00;font-size:13px;line-height:1.45;
}
.ins-note .ico{flex:none;margin-top:1px}

@media(max-width:700px){
  .auth-brandrow{gap:10px}
  .auth-logo{width:84px}
  .btn-install{min-height:46px;font-size:14px;padding:12px 18px}
  .ins-etape .grow{font-size:14.5px}
}