/* ═══════════ PaKego — habillage ═══════════ */
:root{
  --ink:#0C1411; --ink-2:#141F1B;
  --paper:#F1F3EF; --paper-2:#E7EBE5; --paper-3:#DBE1D9; --blanc:#fff;
  --lat:#D2542B; --lat-2:#F0764A; --lat-ink:#7E2B12;
  --vert:#0E5C4A; --vert-2:#14806A;
  --soleil:#F5B72E;
  --t1:#13201C; --t2:#4E5D57; --t3:#7C8A84;
  --ok:#1F8A5B; --warn:#C9861A; --crit:#8E2340; --info:#2C6E9B;
  --line:rgba(19,32,28,.11); --line-2:rgba(19,32,28,.2);
  --r:14px; --r-l:20px;
  --sh:0 1px 2px rgba(12,20,17,.06),0 6px 18px rgba(12,20,17,.05);
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.4,.5,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--t1);
  font-family:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
h1,h2,h3{font-family:"Bricolage Grotesque","Schibsted Grotesk",system-ui,sans-serif;
  font-weight:800;letter-spacing:-.025em;margin:0;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--lat);outline-offset:2px;border-radius:8px}

/* ── structure ── */
#ecran{min-height:100%;display:flex;flex-direction:column}
.vue{flex:1;display:none;flex-direction:column;animation:apparait .32s var(--ease)}
.vue.on{display:flex}
@keyframes apparait{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.corps{flex:1;padding:0 18px 100px;max-width:520px;width:100%;margin:0 auto}
.corps.large{max-width:1100px}

/* ── barre du haut ──────────────────────────────────────────────────

   CE QU'EMMANUEL A SIGNALÉ : « sur iPhone c'est compliqué de cliquer sur
   retour, le bouton est trop en haut et des fois ça reste caché. »

   Il avait raison, et la cause était dans le fichier index.html :
   viewport-fit=cover fait passer la page SOUS l'encoche et sous la barre
   d'état. Le bas de l'écran était protégé — env(safe-area-inset-bottom)
   est utilisé trois fois plus bas — mais pas le haut. Sur un iPhone à
   encoche, le bouton retour se retrouvait donc à moitié dessous.

   env(safe-area-inset-top) vaut 47 px sur un iPhone à encoche, 20 px sur
   les anciens, et 0 partout ailleurs : la barre descend exactement de ce
   qu'il faut, sans gaspiller de place sur les téléphones qui n'en ont
   pas besoin. On ajoute 22 px au lieu de 14 : un peu plus bas, comme
   demandé, y compris sur Android.

   Et le bouton passe de 36 à 44 px. Quarante-quatre, ce n'est pas un
   chiffre en l'air : c'est la taille minimale qu'Apple donne pour qu'un
   doigt atteigne une cible sans viser. */
.barre{display:flex;align-items:center;gap:12px;
  padding:calc(22px + env(safe-area-inset-top)) 18px 10px;
  max-width:520px;width:100%;margin:0 auto}
.barre.large{max-width:1100px}
.barre h2{font-size:21px;flex:1;min-width:0}
.retour{width:44px;height:44px;border-radius:14px;background:var(--paper-2);display:grid;place-items:center;flex:0 0 auto}
.retour:active{background:var(--paper-3)}

/* ── blocs ── */
.bloc{background:var(--blanc);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:16px;margin-bottom:12px}
.rang{display:flex;align-items:center;gap:12px}
.pousse{flex:1;min-width:0}
.pile{display:flex;flex-direction:column;gap:12px}
.mini{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--t3)}
.pt{font-size:13.5px;color:var(--t2)}
.sep{height:1px;background:var(--line);margin:14px 0}

/* ── lien discret ─────────────────────────────────────────────────
   « Mot de passe oublié ? » ne doit pas ressembler à un bouton : sinon
   il rivalise avec « Se connecter », et on clique dessus par erreur.
   Un lien souligné, centré, à sa place — visible quand on le cherche,
   invisible quand on ne le cherche pas. */
.lien-discret{
  display:block; width:100%; margin:14px 0 0; padding:10px;
  background:none; border:0; color:var(--t3);
  font-family:inherit; font-size:14px; text-decoration:underline;
  text-underline-offset:3px; cursor:pointer;
}
.lien-discret:active{ color:var(--lat) }

/* ── choisir un lieu ──────────────────────────────────────────────
   La recherche d'adresse passe devant, le quartier passe derrière.
   Raison : le centre d'un quartier ne dit rien de la distance réelle.
   Owendo fait des kilomètres de long — deux clients du même quartier
   peuvent être à 8 km ou à 22 km de Nzeng-Ayong. */
.cherche-boite{position:relative}
.cherche-res{position:relative}
.cherche-ligne{
  display:block;width:100%;text-align:left;padding:11px 13px;
  background:var(--blanc);border:1px solid var(--line);border-top:0;
}
.cherche-ligne:first-child{border-top:1px solid var(--line);border-radius:12px 12px 0 0;margin-top:6px}
.cherche-ligne:last-child{border-radius:0 0 12px 12px}
.cherche-ligne:only-child{border-radius:12px}
.cherche-ligne:active{background:var(--paper-2)}
.cherche-ligne b{display:block;font-size:14.5px}
.cherche-ligne .pt{display:block;font-size:12.5px}

/* Le point retenu : vert, nommé, avec sa croix pour le retirer. */
.lieu-pose{
  background:rgba(31,138,91,.07);border:1px solid rgba(31,138,91,.3);
  border-radius:13px;padding:12px 13px;
}

/* Le quartier, replié : présent pour les endroits qu'aucune carte ne
   connaît, mais jamais mis en avant. */
.repli{margin-top:10px}
.repli summary{cursor:pointer;padding:6px 0;list-style:none;text-decoration:underline;
  text-underline-offset:3px}
.repli summary::-webkit-details-marker{display:none}

/* ── boutons ── */
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:16px 20px;
  border-radius:14px;font-weight:700;font-size:16px;background:var(--t1);color:#fff;
  transition:transform .16s var(--spring),filter .2s}
.btn:active{transform:scale(.985)}
.btn.pri{background:linear-gradient(160deg,var(--lat-2),var(--lat));box-shadow:0 8px 22px rgba(210,84,43,.3)}
.btn.vert{background:linear-gradient(160deg,var(--vert-2),var(--vert));box-shadow:0 8px 22px rgba(14,92,74,.28)}
.btn.doux{background:var(--paper-2);color:var(--t1);box-shadow:none}
.btn.trait{background:transparent;border:1.5px solid var(--line-2);color:var(--t1);box-shadow:none}
/* Le rouge est réservé aux gestes qu'on ne défait pas : annuler la
   course d'un client, suspendre un compte. Il doit se distinguer du
   bouton neutre au premier coup d'œil. */
.btn.ko{background:linear-gradient(160deg,#A8324C,var(--crit));box-shadow:0 8px 22px rgba(142,35,64,.28)}
.btn.pt{padding:11px 16px;font-size:14px;border-radius:11px;width:auto}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn .tourne{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:99px;animation:tourne .7s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

/* ── champs ── */
.champ{display:block;margin-bottom:14px}
.champ .lab{display:block;font-size:13px;font-weight:600;color:var(--t2);margin-bottom:6px}
.saisie{width:100%;padding:14px;border-radius:13px;border:1.5px solid var(--line-2);background:var(--blanc);font-size:16px}
.saisie:focus{outline:none;border-color:var(--lat);box-shadow:0 0 0 4px rgba(210,84,43,.11)}
textarea.saisie{resize:none;min-height:80px}
.duo{display:flex;gap:12px}
.duo>*{flex:1;min-width:0}

/* ── portrait ── */
.avatar{border-radius:99px;object-fit:cover;display:grid;place-items:center;flex:0 0 auto;
  background:var(--paper-2);border:2px solid var(--blanc);box-shadow:var(--sh)}
.avatar-init{background:linear-gradient(150deg,var(--lat-2),var(--lat));color:#fff;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800}
.portrait{padding:0;border-radius:99px;flex:0 0 auto}
.photo-plus{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:99px;
  background:var(--t1);color:#fff;display:grid;place-items:center;cursor:pointer;
  border:2px solid var(--blanc)}

/* ── étoiles de notation ── */
.etoiles{display:flex;gap:4px;justify-content:center}
.etoile{color:var(--paper-3);padding:4px;transition:transform .15s var(--spring),color .2s}
.etoile.on{color:var(--soleil)}
.etoile.on svg path{fill:currentColor}
.etoile:active{transform:scale(.88)}

/* ── annonces ── */
.annonce{display:flex;align-items:center;gap:12px;padding:15px;border-radius:var(--r);
  margin-bottom:10px;text-decoration:none;color:var(--t1);
  background:linear-gradient(150deg,#13201C,#1E3A31);box-shadow:var(--sh)}
.annonce,.annonce b,.annonce span{color:#fff}
.annonce b{display:block;font-size:15px;margin-bottom:2px}
.annonce>.pousse>span:last-child{font-size:13px;color:#A8B5AF}
.annonce-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:var(--lat);color:#fff;padding:3px 8px;border-radius:99px;
  margin-bottom:6px}

/* ── champ de mot de passe avec son œil ── */
.mdp-boite{position:relative;display:block}
.mdp-boite .saisie{padding-right:52px}
.mdp-oeil{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:grid;place-items:center;color:var(--t3);border-radius:11px}
.mdp-oeil:active{background:var(--paper-2)}
.mdp-oeil:hover{color:var(--t2)}

/* ── pastilles ── */
.puce{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
  font-size:12.5px;font-weight:600;background:var(--paper-2);color:var(--t2)}
.puce.ok{background:rgba(31,138,91,.13);color:var(--ok)}
.puce.att{background:rgba(201,134,26,.15);color:var(--warn)}
.puce.ko{background:rgba(142,35,64,.11);color:var(--crit)}
.puce.lat{background:rgba(210,84,43,.13);color:var(--lat-ink)}
.puce.sombre{background:var(--t1);color:#fff}

/* ── choix (cartes cliquables) ── */
.choix{width:100%;text-align:left;background:var(--blanc);border:1px solid var(--line);border-radius:var(--r);
  padding:15px;box-shadow:var(--sh);transition:.18s var(--ease);margin-bottom:10px;display:block}
.choix:active{transform:scale(.99)}
.choix.actif{border-color:var(--lat);box-shadow:0 0 0 3px rgba(210,84,43,.12)}
.icone{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--paper-2);color:var(--t2)}
.icone.plein{background:var(--lat);color:#fff}

/* ── segments ── */
.seg{display:flex;gap:6px;background:var(--paper-2);padding:4px;border-radius:13px}
.seg button{flex:1;padding:11px 6px;border-radius:10px;font-size:14px;font-weight:600;color:var(--t2);transition:.22s}
.seg button.on{background:var(--blanc);color:var(--t1);box-shadow:var(--sh)}

/* ── messages ── */
.note{border-radius:13px;padding:14px;font-size:14px;margin-bottom:12px}
.note.ok{background:rgba(31,138,91,.1);color:#12603D;border:1px solid rgba(31,138,91,.3)}
.note.ko{background:rgba(142,35,64,.07);color:var(--crit);border:1px solid rgba(142,35,64,.28)}
.note.att{background:#FFF6EC;color:#7A5209;border:1px solid rgba(201,138,18,.3)}
.note.info{background:rgba(44,110,155,.07);color:#1F5477;border:1px solid rgba(44,110,155,.22)}
/* ton posé : un avertissement que l'on lit, pas un panneau d'interdiction */
.note.tenue{background:var(--blanc);color:var(--t2);border:1px solid var(--line);
  border-left:3px solid var(--vert);border-radius:6px 13px 13px 6px;line-height:1.6}
.note.tenue b{color:var(--t1);font-weight:700}
.note b{display:block;margin-bottom:3px}
.note strong{font-weight:700;color:var(--t1)}   /* accent au fil du texte, sans passer à la ligne */

/* ── conditions de livraison (lues et acceptées avant commande) ── */
.cond{background:#FDF6F7;border:1px solid rgba(142,35,64,.32);border-left:4px solid var(--crit);
  border-radius:6px 14px 14px 6px;padding:15px 16px;margin-bottom:12px}
.cond-titre{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--crit);
  font-family:"Bricolage Grotesque","Schibsted Grotesk",sans-serif;letter-spacing:-.015em;margin-bottom:10px}
.cond-liste{margin:0;padding-left:18px;font-size:13px;line-height:1.62;color:#5B2233}
.cond-liste li{margin-bottom:6px}
.cond-liste li::marker{color:rgba(142,35,64,.5)}
.cond-case{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;margin-top:13px;
  padding:12px 13px;border-radius:12px;background:var(--blanc);border:1.5px solid rgba(142,35,64,.28);
  font-size:13.5px;font-weight:600;color:#5B2233;line-height:1.45;transition:.18s var(--ease)}
.cond-case:active{transform:scale(.99)}
.cond-case.on{border-color:var(--ok);color:#12603D;background:rgba(31,138,91,.06)}
.cond-case .coche{width:21px;height:21px;flex:0 0 auto;border-radius:6px;display:grid;place-items:center;
  border:1.5px solid rgba(142,35,64,.4);background:var(--blanc);margin-top:1px}
.cond-case.on .coche{background:var(--ok);border-color:var(--ok);color:#fff}

/* ── interrupteur en ligne / hors ligne ── */
.bascule{width:52px;height:30px;border-radius:99px;background:var(--paper-3);flex:0 0 auto;
  padding:3px;display:flex;transition:background .24s var(--ease)}
.bascule .pastille{width:24px;height:24px;border-radius:99px;background:var(--blanc);
  box-shadow:0 2px 6px rgba(12,20,17,.25);transition:transform .24s var(--spring)}
.bascule.on{background:var(--ok)}
.bascule.on .pastille{transform:translateX(22px)}

/* ── fil des étapes d'une course ── */
.fil{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.fil-etape{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--t3);padding:3px 0}
.fil-etape .fil-point{width:18px;height:18px;flex:0 0 auto;border-radius:99px;display:grid;place-items:center;
  border:2px solid var(--paper-3);background:var(--blanc);color:#fff}
.fil-etape.faite{color:var(--t2)}
.fil-etape.faite .fil-point{background:var(--ok);border-color:var(--ok)}
.fil-etape.ici{color:var(--lat-ink);font-weight:700}
.fil-etape.ici .fil-point{border-color:var(--lat);box-shadow:0 0 0 4px rgba(210,84,43,.15)}

/* ── tableau des comptes ── */
.compte{width:100%;border-collapse:collapse;font-size:13.5px}
.compte th{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;
  color:var(--t3);text-align:right;padding:0 0 8px;font-family:"Schibsted Grotesk",sans-serif}
.compte th:first-child{text-align:left}
.compte td{padding:7px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}

/* ── pièces d'un dossier ── */
.piece{width:100%;border-radius:11px;display:block;background:var(--paper-2);
  border:1px solid var(--line);max-height:420px;object-fit:contain}

/* ── palmarès ── */
.rang-num{width:26px;height:26px;flex:0 0 auto;border-radius:99px;display:grid;place-items:center;
  background:var(--paper-2);color:var(--t2);font-size:12.5px;font-weight:800;
  font-family:"Bricolage Grotesque",sans-serif}
.point-vert{display:inline-block;width:8px;height:8px;border-radius:99px;background:var(--ok);
  margin-left:5px;vertical-align:1px}

/* ── la semaine en barres ── */
.semaine{display:flex;align-items:flex-end;gap:6px;height:120px}
.semaine-jour{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:100%;gap:5px;min-width:0}
.semaine-val{font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;color:var(--t3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.semaine-barre{width:100%;border-radius:5px 5px 2px 2px;background:var(--paper-3);
  transition:height .4s var(--ease)}
.semaine-nom{font-size:11px;color:var(--t3);font-weight:600}
.semaine-jour.auj .semaine-barre{background:linear-gradient(180deg,var(--lat-2),var(--lat))}
.semaine-jour.auj .semaine-nom{color:var(--lat);font-weight:700}
.semaine-jour.auj .semaine-val{color:var(--lat-ink)}

/* ── sceau de certification ── */
.sceau{display:inline-flex;align-items:center;color:var(--vert-2);vertical-align:-3px;flex:0 0 auto}
.bandeau-certif{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:12px;
  border-radius:13px;background:rgba(20,128,106,.09);border:1px solid rgba(20,128,106,.26);color:var(--vert)}
.bandeau-certif>span{display:flex;flex-direction:column;line-height:1.35}
.bandeau-certif b{font-size:14.5px}
.bandeau-certif span span{font-size:12.5px;color:var(--t2)}

/* ── trois boutons de contact côte à côte ── */
.trio{display:flex;gap:8px}
.trio>*{flex:1;min-width:0;padding:11px 8px;font-size:13.5px;border-radius:11px;width:auto}

/* ── code de réception ── */
.code-bloc{text-align:center;padding:6px 0 2px}
.code-valeur{font-size:44px;font-weight:600;letter-spacing:.34em;text-indent:.34em;color:var(--lat-ink);
  background:rgba(210,84,43,.08);border:1px dashed rgba(210,84,43,.4);border-radius:12px;
  padding:12px 8px;margin:7px 0 8px}

/* ── bandeau bas ── */
/* Même oubli qu'en haut : sur iPhone, la barre de navigation du bas
   mangeait le bas des onglets. Le trait horizontal du téléphone passe
   par-dessus, et « Mon compte » devenait difficile à atteindre. */
.onglets{position:fixed;bottom:0;left:0;right:0;
  height:calc(72px + env(safe-area-inset-bottom));display:flex;
  padding:8px 8px calc(14px + env(safe-area-inset-bottom));z-index:30;
  background:linear-gradient(to top,var(--paper) 62%,rgba(241,243,239,0));backdrop-filter:blur(10px)}
.onglets .in{display:flex;max-width:520px;width:100%;margin:0 auto}
.onglets button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10.5px;font-weight:600;color:var(--t3)}
.onglets button.on{color:var(--lat)}

/* ── bas de page collé ── */
.socle{position:fixed;bottom:0;left:0;right:0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--paper) 70%,rgba(241,243,239,0));z-index:20}
.socle .in{max-width:520px;margin:0 auto}

/* ── accueil sombre ── */
.heros{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  padding:30px 22px calc(28px + env(safe-area-inset-bottom));color:#fff;min-height:100dvh;
  background:linear-gradient(165deg,#13201C 0%,#0E2A22 52%,#3A1A0E 100%)}
.heros:before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(600px 400px at 80% 15%,rgba(210,84,43,.25),transparent 60%)}
.heros>*{position:relative}
.heros h1{font-size:clamp(28px,8vw,36px);line-height:1.08;color:#fff}
.heros p{color:#A8B5AF;font-size:15px;margin:12px 0 22px;max-width:32ch}
.marque{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(150deg,var(--lat-2),#A83A16);box-shadow:0 8px 24px rgba(210,84,43,.35)}
.porte{width:100%;text-align:left;padding:15px;border-radius:17px;margin-bottom:10px;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px)}
.porte:active{background:rgba(255,255,255,.12)}
/* Le bouton d'installation : c'est un lien, pas un bouton, donc il faut
   lui rendre la forme d'un bloc et lui retirer le soulignement. Teinte
   orange pour qu'il se détache des trois portes sans les écraser. */
a.porte{display:block;text-decoration:none}
.porte.installe{background:linear-gradient(150deg,rgba(240,118,74,.20),rgba(210,84,43,.12));
  border-color:rgba(240,118,74,.42)}
.porte.installe:active{background:rgba(240,118,74,.26)}
.sep-ou{display:flex;align-items:center;gap:11px;margin:4px 0 12px;
  color:#7E8D87;font-size:12px;letter-spacing:.02em}
.sep-ou:before,.sep-ou:after{content:"";flex:1;height:1px;background:rgba(255,255,255,.13)}

/* ── divers ── */
.charge{padding:50px 20px;text-align:center;color:var(--t3);font-size:14px}
.vide{padding:36px 20px;text-align:center;color:var(--t3);font-size:14px}
.prix{font-family:"Bricolage Grotesque";font-weight:800;letter-spacing:-.03em}
.toast{position:fixed;left:14px;right:14px;bottom:88px;z-index:60;background:var(--t1);color:#fff;
  border-radius:14px;padding:14px 16px;font-size:14.5px;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.3);
  transform:translateY(18px);opacity:0;pointer-events:none;transition:.3s var(--spring);max-width:490px;margin:0 auto}
.toast.on{transform:none;opacity:1}
.jauge{height:4px;background:var(--paper-3);border-radius:9px;overflow:hidden}
.jauge i{display:block;height:100%;background:var(--lat);transition:width .35s var(--ease)}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── Jauge de force du mot de passe ──────────────────────────────── */
.jauge-mdp{
  flex:1; height:5px; border-radius:99px; background:var(--paper-2);
  display:block; overflow:hidden;
}
.jauge-mdp > i{
  display:block; height:100%; width:0; border-radius:99px;
  transition:width .18s ease, background .18s ease;
}

/* ── La carte ────────────────────────────────────────────────────
   La carte occupe tout ce qui reste entre la barre du haut et le
   socle du bas : sur un téléphone, une carte trop petite ne sert
   à rien. La mire est fixe au centre ; c'est le fond qui glisse. */
.carte-recherche{
  display:flex; gap:8px; padding:10px 16px 6px; align-items:stretch;
}
.carte-recherche .saisie{ flex:1; margin:0 }
.carte-recherche .btn{ width:auto; padding:0 16px; white-space:nowrap }

.carte-resultats{ padding:0 16px; max-height:190px; overflow-y:auto }
.carte-res{
  display:block; width:100%; text-align:left; background:var(--paper-2);
  border:1px solid var(--trait); border-radius:12px;
  padding:9px 12px; margin-bottom:6px; color:inherit; font:inherit; cursor:pointer;
}
.carte-res:active{ background:var(--trait) }
.carte-res b{ display:block; font-size:14px }
.carte-res .pt{ display:block }

.carte-boite{ position:relative; flex:1; margin:8px 0 0; min-height:280px }
.carte-zone{ position:absolute; inset:0; background:var(--paper-2) }
.carte-mire{
  position:absolute; left:50%; top:50%; margin-left:-17px; margin-top:-46px;
  pointer-events:none; z-index:500;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));
}
.carte-moi{
  position:absolute; right:14px; bottom:14px; z-index:500;
  width:44px; height:44px; border-radius:50%;
  background:var(--paper); border:1px solid var(--trait); color:var(--encre);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.28);
}
.carte-socle{
  padding:12px 16px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--trait); background:var(--paper);
}
.carte-socle .pt{ margin-bottom:10px }

/* L'écran carte est une colonne pleine hauteur, sans défilement. */
#ecran .vue:has(.carte-boite){ display:flex; flex-direction:column; height:100dvh }
#ecran .vue:has(.carte-boite) .carte-resultats{ flex:0 0 auto }

/* Leaflet pose ses propres couleurs ; on les ramène à celles de PaKego. */
.leaflet-control-attribution{
  font-size:10px !important; background:rgba(255,255,255,.78) !important;
}
.leaflet-bar a{ color:#1a1a1a !important }

/* ── Annonces avec image ─────────────────────────────────────────
   Ici la bannière, c'est l'image. Elle prend toute la largeur de la
   carte, en format horizontal 2,1:1 — le format des bannières qu'on
   voit partout. Le texte descend en dessous, en petit : il explique,
   il ne domine plus. Et s'il n'y a pas de texte du tout, l'image
   seule fait la bannière.

   aspect-ratio tient la hauteur quelle que soit la photo envoyée :
   une image carrée ou verticale est recadrée au centre plutôt que
   de déformer la page. */
.annonce.avec-image{
  display:block; padding:0; overflow:hidden; position:relative;
}
/* L'étiquette (« Nouveau », « Promo ») se pose SUR l'image, dans le
   coin, comme sur les vraies bannières. Elle ne mange donc pas une
   ligne sous l'image. Si l'image ne charge pas, la classe avec-image
   tombe et l'étiquette reprend sa place normale dans le texte. */
.annonce.avec-image .annonce-tag{
  position:absolute; top:10px; left:10px; margin:0; z-index:1;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.annonce-img{
  display:block; width:100%; aspect-ratio:21 / 10; height:auto;
  object-fit:cover; object-position:center;
  background:rgba(255,255,255,.08);
}
.annonce-bas{
  display:block; padding:11px 14px 13px;
}
.annonce-bas .annonce-tag{ margin-bottom:5px }
.annonce-bas b{ display:block; font-size:14.5px; margin-bottom:2px }
/* Deux lignes au maximum sous l'image : au-delà, le texte reprend le
   dessus sur la bannière, ce qui est exactement ce qu'on corrige ici. */
.annonce-bas>span:last-child:not(.annonce-tag){
  font-size:12.5px; line-height:1.35; color:#A8B5AF;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
/* Repli quand l'image n'a pas chargé : la carte redevient une carte
   texte, donc son propre rembourrage suffit. */
.annonce:not(.avec-image) .annonce-bas{ padding:0 }

/* ── le défilement des annonces ──────────────────────────────────────
   Deux pistes identiques bout à bout ; le rail glisse de sa moitié puis
   repart à zéro. Comme les deux moitiés sont les mêmes, l'œil ne voit
   aucune coupure : le défilement paraît sans fin.

   overflow:hidden sur la zone, et rien d'autre : pas de barre de
   défilement, pas de balayage à apprendre. Ça bouge tout seul. */
.annonce-zone{
  overflow:hidden;
  /* Une diapositive, et le pas d'un cran. Les deux servent à la fois à
     la largeur des cartes et aux images-clés fabriquées dans app.js :
     une seule définition, donc impossible qu'elles se contredisent. */
  --diapo:min(calc(100vw - 64px), 460px);
  --pas:calc(var(--diapo) + 12px);
}

.annonce-rail{
  display:flex; width:max-content;
  animation-duration:var(--duree,15s);
  animation-timing-function:cubic-bezier(.65,0,.35,1);
  animation-iteration-count:infinite;
}
.annonce-piste{ display:flex; flex:0 0 auto }

/* Chaque diapositive fait la largeur de la zone moins un souffle : on
   aperçoit le bord de la suivante, ce qui dit sans un mot qu'il y en a
   d'autres derrière. */
.diapo{ flex:0 0 auto; width:var(--diapo); margin-right:12px }
.diapo>.annonce{ margin:0; width:100% }

/* Un doigt posé dessus arrête tout : sans ça, impossible d'appuyer sur
   une annonce qui bouge. */
.annonce-rail:hover, .annonce-rail:active,
.annonce-zone:focus-within .annonce-rail{ animation-play-state:paused }

/* Certains téléphones sont réglés pour ne rien animer — souvent parce
   que le mouvement donne la nausée à leur propriétaire. On respecte ce
   réglage : les annonces deviennent une bande qu'on fait glisser du
   doigt, ce qui marche tout aussi bien. */
@media (prefers-reduced-motion:reduce){
  .annonce-zone{ overflow-x:auto; scroll-snap-type:x mandatory;
                 -webkit-overflow-scrolling:touch }
  .annonce-rail{ animation:none }
  .annonce-piste[aria-hidden="true"]{ display:none }
  .diapo{ scroll-snap-align:center }
}

/* ── la jauge d'envoi ────────────────────────────────────────────────
   Une photo de pièce d'identité met parfois quarante secondes à partir
   sur une connexion de Libreville. Sans cette barre, l'écran affiche
   « Envoi… » sans bouger, et la moitié des gens réappuient — ce qui
   fait tout recommencer depuis zéro. */
.jauge-envoi{
  height:8px; border-radius:99px; background:var(--paper-3); overflow:hidden;
}
.jauge-envoi>span{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, #F0764A, #C24A22);
  transition:width .25s var(--ease);
}
/* Quand le serveur ne donne pas la taille du fichier, on ne peut pas
   compter : la barre balaie au lieu de mentir avec un pourcentage
   inventé. */
.jauge-envoi>span.indecise{
  background:linear-gradient(90deg, var(--paper-3) 25%, #F0764A 50%, var(--paper-3) 75%);
  background-size:200% 100%;
  animation:balayage 1.1s linear infinite;
}
@keyframes balayage{ from{ background-position:200% 0 } to{ background-position:-200% 0 } }

/* ── le prix négocié ─────────────────────────────────────────────────
   Le tarif barré n'est pas décoratif : c'est lui qui permet au livreur
   de juger en une seconde. Sans lui, 3 500 F peut être une petite course
   ou une grosse course au rabais. Il reste donc lisible — gris, plus
   petit, mais pas effacé. */
.barre-prix{
  display:block; font-size:12.5px; color:var(--t3);
  text-decoration:line-through; text-decoration-thickness:1.5px;
  line-height:1.2;
}

/* ── deux courses à la fois ──────────────────────────────────────────
   Le livreur peut en porter deux. L'écran n'en montre qu'une — celle
   qu'il fait — et ces deux onglets disent clairement laquelle, parce
   qu'un code de remise tapé sur la mauvaise course est une erreur qu'on
   ne rattrape pas. */
.deux-courses{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px;
  position:sticky; top:0; z-index:30; padding:8px 0; background:var(--paper) }
/* 042 — informations supplémentaires */
.info-ligne{ padding:10px 12px; border-radius:12px; background:var(--paper-2,#F4EFEA); margin-bottom:8px }
.info-txt{ white-space:pre-wrap; word-break:break-word; font-size:14.5px; line-height:1.4; color:var(--t1); margin-bottom:2px }
.infos-livreur{ margin:0 0 12px; padding:12px; border-radius:16px; background:#FFF6F0; border:1.5px solid #F3D3C2 }
.infos-livreur.nouveau{ border-color:var(--lat); box-shadow:0 0 0 3px rgba(238,90,31,.14) }
.infos-livreur .info-ligne{ background:#fff }
.info-ligne.non-lue{ border-left:4px solid var(--lat) }
.info-pastille{ position:absolute; top:-7px; right:-4px; background:var(--lat); color:#fff; font-size:10.5px;
  font-weight:800; padding:2px 7px; border-radius:99px; box-shadow:0 2px 6px rgba(0,0,0,.15) }
.onglet-course .oc-num{ display:block; font-size:16px; font-weight:800; color:var(--t2) }
.onglet-course.on .oc-num{ color:var(--lat) }
.onglet-course{
  position:relative; flex:1; min-width:0; text-align:left; padding:10px 12px;
  background:var(--blanc); border:1px solid var(--line); border-radius:14px;
}
.onglet-course b{
  display:block; font-size:13.5px; margin:2px 0 1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.onglet-course .pt{ font-size:11.5px }
.onglet-course.on{
  border-color:var(--lat); background:var(--paper-2);
  box-shadow:0 0 0 3px rgba(210,84,43,.12);
}
.onglet-course.on .mini{ color:var(--lat) }

/* Back-office : la vignette dans la liste, l'aperçu dans le formulaire. */
.annonce-vignette{
  width:74px; height:35px; flex:0 0 74px; border-radius:9px;
  object-fit:cover; border:1px solid var(--trait); background:var(--paper-2);
}
/* L'aperçu du back-office montre EXACTEMENT le cadrage que verra le
   client : même format 2,1:1, même recadrage au centre. Sans ça on
   choisit une belle photo verticale et on découvre le désastre une
   fois l'annonce en ligne. */
.annonce-apercu{
  display:block; width:100%; aspect-ratio:21 / 10; height:auto;
  object-fit:cover; object-position:center;
  border-radius:var(--r); border:1px solid var(--trait);
  background:var(--paper-2); margin-bottom:10px;
}

/* ── LA VIGNETTE D'UNE PIÈCE DU DOSSIER ──────────────────────────────
   Le livreur doit VOIR la photo qu'il vient de prendre : sans image, il
   ne sait pas si elle est partie, il recommence, il finit par envoyer un
   dossier vide. Hauteur bornée pour qu'une photo verticale ne pousse pas
   le bouton d'envoi hors de l'écran. */
.vignette{position:relative;margin-bottom:10px;border-radius:14px;overflow:hidden;
  background:var(--paper-2);border:1px solid var(--line)}
.vignette img{display:block;width:100%;max-height:230px;object-fit:cover}
.vignette-attente{padding:26px 14px;text-align:center;color:var(--t3);font-size:13px}
.vignette-coche{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;
  gap:5px;padding:5px 10px;border-radius:99px;font-size:12px;font-weight:600;
  color:#fff;background:rgba(14,92,74,.92)}
.vignette-coche svg{flex:0 0 auto}

/* ── L'AVERTISSEMENT ─────────────────────────────────────────────────
   Noir sur blanc, le titre en rouge : il doit se lire comme un panneau,
   pas comme une remarque de plus. */
.avert{background:var(--blanc);border:1px solid rgba(142,35,64,.35);border-left:4px solid var(--crit);
  border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.5;color:var(--t1);margin-top:4px}
.avert>b{display:flex;align-items:center;gap:6px;color:var(--crit);font-size:14px;margin-bottom:4px;
  letter-spacing:.01em;text-transform:uppercase}
.avert svg{color:var(--crit)}

/* ── LA MARQUE EN TÊTE DE L'ACCUEIL ──────────────────────────────── */
.entete-marque{display:flex;align-items:center;justify-content:center;gap:9px;padding:16px 20px 2px}
.marque-mini{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(150deg,var(--lat-2),#A83A16);box-shadow:0 4px 12px rgba(210,84,43,.28)}
.marque-nom{font-family:"Bricolage Grotesque","Schibsted Grotesk",system-ui,sans-serif;font-weight:800;
  font-size:30px;letter-spacing:-.03em;line-height:1;color:var(--lat)}

/* ── « NOUVELLE VERSION DISPONIBLE » ─────────────────────────────── */
.bandeau-maj{display:flex;align-items:center;gap:11px;margin:10px 20px 0;padding:12px 14px;
  border-radius:14px;text-decoration:none;color:#fff;font-size:13px;line-height:1.4;
  background:linear-gradient(150deg,var(--lat-2),var(--lat));box-shadow:0 8px 20px rgba(210,84,43,.25)}
.bandeau-maj b{display:block;font-size:14px}
.bandeau-maj svg{flex:0 0 auto}
.corps .bandeau-maj{margin:0 0 12px}

/* ═══════════════════════════════════════════════════════════════════
   REFONTE « DERNIÈRE GÉNÉRATION »
   Moins de traits, plus d'air. Des cartes blanches qui flottent sur un
   fond clair, des coins bien arrondis, des ombres douces et longues au
   lieu de bordures. Une seule couleur d'action : l'orange PaKego.
   Ces règles viennent APRÈS les anciennes et les remplacent.
   ═══════════════════════════════════════════════════════════════════ */
:root{ --r:20px; --r-l:26px;
  --sh:0 1px 2px rgba(12,20,17,.04),0 10px 30px rgba(12,20,17,.07);
  --sh-fort:0 16px 40px rgba(12,20,17,.12); }
body{background:#F4F5F1}
.bloc{border:0;border-radius:var(--r);box-shadow:var(--sh);padding:18px}
.choix{border:0;border-radius:18px;box-shadow:var(--sh)}
.choix.actif{box-shadow:0 0 0 2px var(--lat),var(--sh)}
.btn{border-radius:16px;font-weight:700;letter-spacing:.005em}
.btn.pt{border-radius:13px}
.saisie{border-radius:14px}
.seg{border-radius:15px;padding:5px}
.seg button{border-radius:11px}
.barre h2{font-size:22px;letter-spacing:-.01em}
.mini{letter-spacing:.06em}
.note{border-radius:16px}

/* ── titres de section ── */
.titre-section{font-family:"Bricolage Grotesque","Schibsted Grotesk",system-ui,sans-serif;
  font-weight:800;font-size:18px;letter-spacing:-.015em;color:var(--t1);margin:24px 0 12px}

/* ── accueil ── */
.accueil2{padding-top:6px}
.salut{margin:6px 0 16px}
.salut h2{font-size:24px;letter-spacing:-.02em;margin-top:2px}
.salut .pt{text-transform:capitalize}

.heros2{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:190px;
  border-radius:var(--r-l);padding:22px 20px;color:#fff;
  background:radial-gradient(420px 260px at 100% 0%,rgba(240,118,74,.45),transparent 60%),
             linear-gradient(155deg,#16302A 0%,#0E2A22 55%,#1B3A31 100%);
  box-shadow:0 18px 40px rgba(14,42,34,.28)}
.heros2-txt{position:relative;z-index:1;max-width:62%}
.heros2 h1{font-size:25px;line-height:1.08;letter-spacing:-.025em;color:#fff;margin:0 0 8px}
.heros2 p{font-size:12.5px;line-height:1.45;color:#B9CAC3;margin:0 0 16px}
.heros2-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:99px;
  font-weight:800;font-size:15px;color:#fff;background:linear-gradient(160deg,var(--lat-2),var(--lat));
  box-shadow:0 10px 24px rgba(210,84,43,.45)}
.heros2-btn:active{transform:scale(.97)}
.heros2-illu{position:absolute;right:-8px;bottom:6px;z-index:0;filter:drop-shadow(0 14px 18px rgba(0,0,0,.25))}
.heros2-illu svg{display:block}

.vehicules{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vcarte{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;
  padding:12px 12px 13px;border-radius:20px;background:var(--blanc);box-shadow:var(--sh);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.vcarte:active{transform:scale(.97);box-shadow:var(--sh-fort)}
.vcarte-illu{display:grid;place-items:center;width:100%;height:66px;margin-bottom:6px;border-radius:14px}
.vcarte-illu svg{max-width:100%;height:auto}
.v-moto .vcarte-illu{background:#FDEDE6}
.v-voiture .vcarte-illu{background:#E3F2EC}
.v-pickup .vcarte-illu{background:#FDF1DD}
.vcarte b{font-size:15px;color:var(--t1)}
.vcarte-quoi{font-size:11px;line-height:1.3;color:var(--t3)}
.vcarte-prix{margin-top:6px;font-size:11.5px;font-weight:800;color:var(--lat);
  background:#FDEDE6;padding:3px 8px;border-radius:99px}

.etapes3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.etape3{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  background:var(--blanc);border-radius:18px;box-shadow:var(--sh);padding:14px 12px}
.etape3 b{font-size:14px}
.etape3>span:last-child{font-size:11.5px;color:var(--t3);line-height:1.3}
.etape3-num{position:absolute;top:10px;right:12px;font-size:11px;font-weight:800;color:var(--t3)}

.puce-compte{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-top:18px;
  padding:14px;border-radius:18px;background:var(--blanc);box-shadow:var(--sh)}
.puce-compte b{display:block;font-size:14.5px}
.puce-compte .pousse>span{font-size:12.5px;color:var(--t3)}

.lien-install{display:flex;align-items:center;justify-content:center;gap:8px;margin:22px 0 4px;
  font-size:13px;font-weight:600;color:var(--t2);text-decoration:none}
.lien-install svg{color:var(--lat)}

/* ── la barre du bas, avec le bouton central ── */
.onglets{height:calc(78px + env(safe-area-inset-bottom));padding:0 10px calc(10px + env(safe-area-inset-bottom));
  background:transparent;backdrop-filter:none}
.onglets .in{align-items:center;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border-radius:24px;box-shadow:0 10px 34px rgba(12,20,17,.14);height:64px;padding:0 6px}
.onglets button{font-size:10.5px}
.onglets .onglet-plus{flex:0 0 58px;height:58px;margin-top:-30px;border-radius:99px;color:#fff;
  display:grid;place-items:center;background:linear-gradient(160deg,var(--lat-2),var(--lat));
  box-shadow:0 12px 26px rgba(210,84,43,.45),0 0 0 6px #F4F5F1}
.onglets .onglet-plus:active{transform:scale(.94)}

/* ── la commande : points d'étape au lieu d'une barre ── */
.etapes-points{display:flex;gap:6px;margin:2px 0 18px}
.etapes-points i{flex:1;height:5px;border-radius:9px;background:var(--paper-3);transition:background .3s}
.etapes-points i.fait{background:var(--lat-2)}
.etapes-points i.ici{background:var(--lat)}
.seg-veh button{display:flex;flex-direction:column;gap:1px;padding:9px 4px}
.seg-veh small{font-size:11px;font-weight:700;color:var(--lat)}
.repli{margin:4px 0 14px}
.repli>summary{cursor:pointer;padding:6px 0;font-weight:600;color:var(--t2)}

/* ── aide ── */
.faq{background:var(--blanc);border-radius:16px;box-shadow:var(--sh);padding:14px 16px;margin-bottom:8px}
.faq summary{cursor:pointer;font-weight:700;font-size:14.5px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--lat);font-weight:800}
.faq[open] summary::after{content:"–"}
.faq p{margin:8px 0 0;font-size:13.5px;color:var(--t2);line-height:1.5}

/* ── le suivi : une feuille qui remonte sur la carte ── */
.carte-socle{border-radius:26px 26px 0 0 !important;box-shadow:0 -12px 34px rgba(12,20,17,.14) !important;
  padding-top:22px !important;position:relative}
.carte-socle::before{content:"";position:absolute;top:9px;left:50%;width:44px;height:5px;
  margin-left:-22px;border-radius:9px;background:var(--paper-3)}

/* ── petits écrans (moins de 360 px) : on garde tout lisible ── */
@media (max-width:359px){
  .heros2-txt{max-width:70%}
  .heros2 h1{font-size:22px}
  .heros2-illu svg{width:118px}
  .vcarte-quoi{display:none}
}
/* retouches après premier rendu */
.heros2-txt{max-width:68%}
.heros2 h1{font-size:23px}
.vcarte-prix{white-space:nowrap;font-size:10.5px}
.vcarte b{font-size:14.5px}
.etape3 b{font-size:13.5px}
.accueil2 .annonces-bloc{margin-top:24px}

/* ═══════════════════════════════════════════════════════════════════
   D'APRÈS LES MAQUETTES D'EMMANUEL (septembre 2026)
   Fond crème très clair, cartes blanches, orange PaKego vif, pastilles
   orange sur fond pêche pour chaque section, images 3D des véhicules.
   Ces règles viennent en dernier et priment sur tout ce qui précède.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --lat:#EE5A1F; --lat-2:#FF7A3A; --lat-ink:#A33A0E;
  --peche:#FFF1E8; --peche-2:#FFE3D2;
  --paper:#FBF8F5; --paper-2:#F4EFEA; --paper-3:#E7E0D9;
  --trait:var(--line); --encre:var(--t1);
  --r:18px; --r-l:24px;
  --sh:0 1px 2px rgba(60,30,10,.04),0 8px 24px rgba(60,30,10,.06);
}
body{background:var(--paper)}
.onglets{background:transparent}
.socle{background:linear-gradient(to top,var(--paper) 72%,rgba(251,248,245,0))}

/* boutons */
.btn.pri{background:var(--lat);box-shadow:0 10px 22px rgba(238,90,31,.28)}
.btn.pri:active{background:#D94E16}
.btn.trait-lat{background:var(--blanc);border:1.5px solid var(--lat);color:var(--lat);box-shadow:none}
.btn.doux{background:var(--paper-2)}
.lien-lat{display:block;width:100%;padding:14px;margin-top:4px;font-weight:700;color:var(--lat);text-align:center}
.lien-voir{display:inline-flex;align-items:center;gap:3px;font-size:13.5px;font-weight:700;color:var(--lat);font-family:"Schibsted Grotesk",system-ui,sans-serif;letter-spacing:0}
.puce{gap:5px}
.puce.att{background:#FFF1DC;color:#9A5B06}
.puce svg{flex:0 0 auto}

/* barre du haut : bouton retour rond et blanc */
.retour{background:var(--blanc);border-radius:99px;box-shadow:var(--sh)}
.barre .marque-mini{border-radius:10px}

/* ── en-tête de l'application ── */
.entete-app{display:flex;align-items:center;justify-content:space-between;
  padding:calc(16px + env(safe-area-inset-top)) 18px 4px;max-width:520px;width:100%;margin:0 auto}
.entete-app .marque-nom{font-size:25px}
.marque-mini{background:var(--lat);box-shadow:0 4px 12px rgba(238,90,31,.28)}
.marque-nom{color:var(--lat)}
.entete-rond{width:42px;height:42px;border-radius:99px;display:grid;place-items:center;background:var(--blanc);
  box-shadow:var(--sh);color:var(--t1)}

/* ── accueil ── */
.accueil3{padding-top:8px}
.salut3{font-size:16px;color:var(--t2);font-weight:500}
.titre-accueil{align-items:flex-start;margin:2px 0 16px}
.titre-accueil h1{font-size:30px;line-height:1.08;letter-spacing:-.03em}
.puce-ville{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;margin-top:6px;padding:7px 12px;
  border-radius:99px;background:var(--peche);color:var(--lat-ink);font-size:13px;font-weight:700}
.puce-ville svg{color:var(--lat)}

.carte-trajet{background:var(--blanc);border-radius:var(--r-l);box-shadow:var(--sh);padding:8px 14px 14px}
.ct-ligne{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 0}
.ct-ligne b{display:block;font-size:15.5px}
.ct-ligne .pousse>span{display:block;font-size:13px;color:var(--t3)}
.ct-icone{width:40px;height:40px;border-radius:99px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--peche);color:var(--lat)}
.ct-trait{display:block;height:1px;background:var(--line);margin-left:52px}
.ct-btn{margin-top:8px}

.vehicules{gap:10px}
.vcarte{padding:10px 10px 12px;border-radius:20px;align-items:center;text-align:center}
.vcarte-illu{height:82px;background:linear-gradient(180deg,var(--peche),#FFF8F3) !important;border-radius:15px;overflow:hidden}
.vcarte-illu .illu{max-width:92%;max-height:74px;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(80,30,5,.18))}
.vcarte-illu .illu-moto{max-height:78px}
.vcarte b{font-size:15px}
.vcarte-quoi{font-size:11.5px}
.vcarte-prix{background:var(--peche);color:var(--lat)}

.banniere-prog{position:relative;display:flex;align-items:center;gap:6px;margin-top:18px;overflow:hidden;
  padding:18px 16px;border-radius:var(--r-l);
  background:linear-gradient(135deg,#FFE3D0 0%,#FFD2B6 100%);box-shadow:var(--sh)}
.bp-txt{flex:1;min-width:0;position:relative;z-index:1}
.bp-txt b{display:block;font-family:"Bricolage Grotesque","Schibsted Grotesk",sans-serif;font-size:22px;
  line-height:1.05;letter-spacing:-.02em;color:#C2400C;margin-bottom:6px}
.bp-txt span{display:block;font-size:13px;color:#6B3A1E;line-height:1.4;margin-bottom:12px;max-width:24ch}
.bp-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:99px;
  background:var(--lat);color:#fff;font-weight:700;font-size:14px;box-shadow:0 8px 18px rgba(238,90,31,.3)}
.bp-img{width:104px;height:auto;flex:0 0 auto;filter:drop-shadow(0 10px 12px rgba(120,50,10,.25));transform:rotate(-6deg)}

.titre-section{font-size:19px;margin:24px 0 12px}
.puce-compte{margin-top:18px;padding:16px;background:var(--peche);box-shadow:none;border:1px solid var(--peche-2);align-items:flex-start}
.puce-compte b{color:#8A2E07;font-size:15.5px}
.puce-compte .pousse>span{display:block;font-size:13px;color:#7A4A30;margin:2px 0 6px}
.puce-compte em{font-style:normal;font-weight:700;color:var(--lat);font-size:14px}
.pc-icone{width:44px;height:44px;border-radius:99px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--blanc);color:var(--lat)}
.pc-fleche{color:var(--lat);align-self:center}

/* ── la carte d'une course (accueil, courses) ── */
.carte-course{padding:16px}
.cc-haut{margin-bottom:12px}
.cc-veh{width:54px;height:42px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--peche);overflow:hidden}
.cc-veh .illu{max-width:48px;max-height:38px;object-fit:contain}
.cc-montant{padding:12px 0 2px;margin-top:12px;border-top:1px solid var(--line)}
.cc-montant .prix{font-size:21px}
.cc-delai{display:flex;align-items:center;gap:8px;margin:12px 0 10px;padding:10px 12px;border-radius:12px;
  background:var(--peche);color:#7A3A14;font-size:13.5px}
.cc-delai svg{color:var(--lat);flex:0 0 auto}

/* le trajet, en deux points reliés par un pointillé */
.tr{position:relative}
.tr-pt{display:flex;align-items:flex-start;gap:12px}
.tr-pt b{display:block;font-size:15px;line-height:1.3}
.tr-pt .pousse>span{display:block;font-size:12.5px;color:var(--t3)}
.tr-ico{width:22px;height:22px;display:grid;place-items:center;flex:0 0 auto;color:var(--lat);margin-top:0}
.tr-fil{display:block;width:0;height:16px;margin:3px 0 3px 10px;border-left:2px dotted rgba(238,90,31,.55)}

/* ── la commande ── */
.commande{padding-top:2px}
.etapes-ligne{gap:12px;margin:0 0 12px}
.etapes-ligne .pt{flex:0 0 auto;font-size:13px}
.etapes-ligne .etapes-points{margin:0}
.etapes-points i.fait,.etapes-points i.ici{background:var(--lat)}
.accroche{margin-bottom:14px;gap:10px}
.accroche h1{font-size:26px;line-height:1.1;letter-spacing:-.03em}
.accroche img{filter:drop-shadow(0 8px 10px rgba(120,50,10,.2))}

.section{background:var(--blanc);border-radius:var(--r);box-shadow:var(--sh);padding:14px 14px 16px;margin-bottom:12px}
.section-titre{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;margin-bottom:12px;
  font-family:"Bricolage Grotesque","Schibsted Grotesk",sans-serif;letter-spacing:-.01em}
.section-titre small{font-family:"Schibsted Grotesk",sans-serif;font-weight:500;font-size:13px;color:var(--t3)}
.badge{width:36px;height:36px;border-radius:99px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--peche);color:var(--lat)}
.section .lab{font-size:13px}

.inverser{display:flex;justify-content:center;margin:-4px 0 8px}
.inverser button{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px;
  background:var(--blanc);box-shadow:var(--sh);font-size:13px;font-weight:700;color:var(--t2)}
.inverser svg{color:var(--lat)}

.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts3{grid-template-columns:repeat(3,1fr)}
.opt{position:relative;display:flex;align-items:center;gap:10px;min-height:58px;padding:10px 38px 10px 12px;
  border-radius:14px;border:1.5px solid var(--paper-3);background:var(--blanc);text-align:left;
  transition:border-color .18s,background .18s}
.opt.on{border-color:var(--lat);background:var(--peche)}
.opt-nom{font-weight:700;font-size:14.5px;line-height:1.2}
.opt-nom small{display:block;font-size:11.5px;font-weight:700;color:var(--lat);margin-top:2px}
.opt-ico{color:var(--lat);display:grid;place-items:center}
.opt .radio{position:absolute;right:10px;top:50%;margin-top:-11px}
.opt-colis{width:44px;height:auto;flex:0 0 auto}
.opt-colis.petit{width:34px}
.opts3 .opt{flex-direction:column;align-items:flex-start;gap:4px;padding:8px 8px 10px}
.opts3 .opt .radio{top:8px;right:8px;margin:0}
.opt-img{width:100%;height:40px;display:grid;place-items:center}
.opt-img .illu{max-height:40px;max-width:100%;object-fit:contain}
.opt-note{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--peche);font-size:13px;color:#5A3420;line-height:1.45}
.opt-note b{color:var(--t1)}
.opt-note span{display:block;color:var(--t3)}

.radio{width:22px;height:22px;border-radius:99px;flex:0 0 auto;display:grid;place-items:center;
  border:1.8px solid var(--paper-3);background:var(--blanc);color:#fff}
.radio.on{background:var(--lat);border-color:var(--lat)}

.ligne-champ{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ligne-champ>span{flex:0 0 86px;font-size:13.5px;font-weight:700;color:var(--t2)}
.ligne-champ>span i{font-style:normal;color:var(--lat)}
.ligne-champ .saisie{flex:1;min-width:0}
.saisie{border:1.5px solid var(--paper-3);padding:13px 14px}
.saisie.ko{border-color:var(--crit)}

.vchoix{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-bottom:10px;
  padding:12px;border-radius:var(--r);background:var(--blanc);border:1.5px solid transparent;box-shadow:var(--sh)}
.vchoix.actif{border-color:var(--lat);background:#FFFBF8}
.vchoix-img{width:108px;height:78px;flex:0 0 auto;display:grid;place-items:center;border-radius:14px;
  background:linear-gradient(180deg,var(--peche),#FFF8F3)}
.vchoix-img .illu{max-width:100px;max-height:72px;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(80,30,5,.16))}
.vchoix b{display:block;font-size:16.5px}
.vchoix-quoi{display:block;font-size:13px;font-weight:600;color:var(--t2)}
.vchoix-txt{display:block;font-size:12px;color:var(--t3);line-height:1.35;margin-top:3px}
.vchoix-cap{display:block;font-size:11.5px;color:var(--t3)}
.vchoix-prix{display:block;margin-top:5px;font-size:12.5px;color:var(--t2)}
.vchoix-prix b{display:inline;font-size:14.5px;color:var(--lat)}
.vchoix .radio{position:absolute;top:12px;right:12px}

.recap-veh{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.bascule-moment{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bascule-moment button{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border-radius:14px;
  font-weight:700;font-size:14.5px;background:var(--paper-2);color:var(--t2)}
.bascule-moment button.on{background:var(--lat);color:#fff;box-shadow:0 8px 18px rgba(238,90,31,.28)}

/* ── course enregistrée ── */
.confirmee{text-align:left;padding-top:4px}
.conf-illu{position:relative;width:170px;height:112px;margin:4px auto 10px;display:grid;place-items:center;
  border-radius:99px;background:radial-gradient(closest-side,#E7F5EC,rgba(231,245,236,0))}
.conf-illu img{margin-left:40px;filter:drop-shadow(0 10px 12px rgba(120,50,10,.22));animation:apparait .5s var(--spring)}
.conf-ok{position:absolute;left:22px;top:34px;width:46px;height:46px;border-radius:99px;display:grid;place-items:center;
  background:#2E8B57;color:#fff;box-shadow:0 8px 18px rgba(46,139,87,.35);z-index:1}
.confirmee h1{text-align:center;font-size:28px;letter-spacing:-.03em}
.conf-num{text-align:center;margin:4px 0 12px}
.carte-info,.carte-code,.carte-compte{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--r);
  margin-bottom:12px;font-size:13.5px;line-height:1.5;color:#5A3420}
.carte-info{background:var(--peche)}
.carte-info b,.carte-compte b{display:block;color:var(--t1);font-size:15px;margin-bottom:2px}
.carte-code{background:var(--paper-2);color:var(--t2)}
.carte-compte{background:var(--blanc);box-shadow:var(--sh);color:var(--t2)}
.carte-compte .btn{width:100%;margin-top:10px}
.ci-ico{width:36px;height:36px;border-radius:99px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--blanc);color:var(--lat)}
.ci-ico.plein{background:var(--lat);color:#fff}
.carte-info .ci-ico{background:var(--lat);color:#fff}

/* ── le suivi ── */
.carte-socle{max-height:62dvh;overflow-y:auto}
.suivi-titre{font-size:21px;margin:0 0 2px}
.suivi-eta{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--t2);margin-bottom:12px}
.suivi-eta b{color:#1F8A5B;font-size:17px}
.suivi-eta svg{color:#1F8A5B}
.suivi-livreur{gap:10px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:14px}
.suivi-act{display:flex;flex-direction:column;align-items:center;gap:3px;width:64px;padding:8px 4px;border-radius:14px;
  background:var(--blanc);box-shadow:var(--sh);font-size:11.5px;font-weight:700;color:var(--t1);text-decoration:none}
.suivi-act svg{color:var(--t1)}
.suivi-etapes{display:flex;align-items:flex-start;margin:4px 0 16px}
.se{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto;width:62px;font-size:12.5px;color:var(--t3);font-weight:600}
.se-rond{width:30px;height:30px;border-radius:99px;display:grid;place-items:center;border:2px solid var(--paper-3);background:var(--blanc);color:#fff}
.se-rond svg{width:16px;height:16px}
.se.fait{color:var(--t2)}
.se.fait .se-rond{background:var(--lat);border-color:var(--lat)}
.se.ici{color:var(--t1)}
.se.ici .se-rond{background:var(--lat);border-color:var(--lat);box-shadow:0 0 0 5px rgba(238,90,31,.16)}
.se-trait{flex:1;height:3px;border-radius:9px;background:var(--paper-3);margin-top:14px}
.se.fait + .se-trait{background:var(--lat)}
.suivi-code{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r);margin-bottom:10px;
  background:var(--peche);border:1px solid var(--peche-2)}
.suivi-code b{display:block;color:#A33A0E;font-size:14.5px;margin-bottom:6px}
.suivi-code .ci-ico{background:var(--lat);color:#fff}
.suivi-code-val{display:inline-block;font-size:28px;font-weight:600;letter-spacing:.3em;color:var(--t1);
  background:var(--blanc);border-radius:10px;padding:4px 12px;margin-bottom:4px}
.suivi-code .btn{margin-bottom:6px}
.suivi-aide{margin:0}

/* ── la barre du bas : quatre onglets, fond blanc ── */
.onglets{height:calc(70px + env(safe-area-inset-bottom));padding:0 0 env(safe-area-inset-bottom);
  background:var(--blanc);box-shadow:0 -6px 24px rgba(60,30,10,.07);backdrop-filter:none}
.onglets .in{background:transparent;box-shadow:none;border-radius:0;height:70px;padding:0 4px;backdrop-filter:none}
.onglets button{font-size:11.5px;gap:4px;color:#8B8F8D}
.onglets button.on{color:var(--lat)}
.onglets button.on span{font-weight:800}

/* ── petits écrans ── */
@media (max-width:370px){
  .titre-accueil h1{font-size:26px}
  .vchoix-img{width:86px;height:66px}
  .vchoix-img .illu{max-width:80px;max-height:60px}
  .bp-img{width:82px}
  .ligne-champ>span{flex-basis:72px}
  .opt{padding-right:34px}
}
/* retouches après captures */
.ligne-champ>span{flex:0 0 98px;white-space:nowrap}
.opt{padding-right:34px;gap:8px}
.opt-nom{white-space:nowrap;font-size:14px}
.opt-colis{width:36px}.opt-colis.petit{width:28px}
.cc-haut .mono{white-space:nowrap}
.cc-haut .puce{font-size:11.5px;max-width:52%;line-height:1.25;padding:5px 9px}
.vcarte{justify-content:flex-start}
.vcarte-prix{margin-top:auto;padding-top:3px}
.vcarte-quoi{margin-bottom:6px}
.note.info{background:var(--peche);color:#6B3A1E;border:1px solid var(--peche-2)}
.note.info b{color:#8A2E07}
.icone.plein{background:var(--lat)}
.suivi-eta{flex-wrap:wrap}
.suivi-eta small{flex-basis:100%;font-size:12px;color:var(--t3)}
.accueil3 .annonces-bloc{margin:0 0 16px}
.accueil3 .annonces-bloc:empty{display:none}
.annonce{background:linear-gradient(150deg,#2B1B13,#55250F)}
.annonce>.pousse>span:last-child,.annonce-bas>span:last-child:not(.annonce-tag){color:#E7C9B5}
.opt-nom{white-space:normal;text-wrap:balance;min-width:0}
.opts3 .opt-nom{white-space:nowrap}
.opt{min-width:0;overflow:hidden}
/* ── « Couper la sonnerie », par-dessus tous les écrans ── */
.sonnerie-flottante{position:fixed;left:12px;right:12px;top:calc(10px + env(safe-area-inset-top));z-index:80;
  display:flex;align-items:center;gap:12px;max-width:496px;margin:0 auto;padding:14px 16px;border-radius:18px;
  background:var(--lat);color:#fff;text-align:left;box-shadow:0 14px 34px rgba(238,90,31,.45);
  animation:pulse-sonnerie 1.2s ease-in-out infinite}
.sonnerie-flottante b{display:block;font-size:16px}
.sonnerie-flottante span{font-size:12.5px;line-height:1.3;opacity:.95}
@keyframes pulse-sonnerie{50%{transform:scale(1.02)}}

/* ═══ Accueil allégé + icônes 3D (demande d'Emmanuel, 26 sept. soir) ═══ */
.i3d{display:block;height:auto;max-width:100%}
.bienvenue{align-items:center;margin:8px 0 16px}
.bienvenue h1{font-size:30px;line-height:1.1;letter-spacing:-.03em}
.bienvenue .puce-ville{margin-top:0}
.accueil3 .annonces-bloc{margin:0 0 6px}
.accueil3 .annonces-bloc:not(:empty)+.titre-section{margin-top:18px}
.accueil3 .titre-section:first-of-type{margin-top:8px}
.entete-rond{background:none;box-shadow:none;width:44px;height:44px;padding:0}
.entete-rond .i3d{width:44px;filter:drop-shadow(0 4px 8px rgba(120,50,10,.18))}
.pc-icone{background:none;width:46px;height:46px}
.pc-icone .i3d{width:46px;filter:drop-shadow(0 3px 6px rgba(120,50,10,.15))}
.i3d-boite{background:none !important;padding:0;overflow:visible}
.i3d-boite .i3d{filter:drop-shadow(0 3px 6px rgba(120,50,10,.15))}
.ci-ico.i3d-boite{width:38px;height:38px}
.badge-3d{background:none;width:38px;height:38px}
.badge-3d .i3d{width:38px;filter:drop-shadow(0 3px 5px rgba(120,50,10,.16))}
.banniere-prog .bp-img{width:112px;transform:none;filter:drop-shadow(0 10px 12px rgba(120,50,10,.22))}
.accroche .i3d{width:74px;filter:drop-shadow(0 8px 10px rgba(120,50,10,.2))}
.opt-colis{width:38px}.opt-colis.petit{width:30px}
.conf-illu{width:auto;height:auto;background:none;margin:0 auto 10px;display:flex;justify-content:center}
.conf-illu .i3d{width:230px;animation:apparait .5s var(--spring)}
/* Comment ça marche ? */
.comment{margin-top:22px;background:var(--blanc);border-radius:var(--r-l);box-shadow:var(--sh);padding:20px 18px 18px}
.comment-titre{font-size:22px;letter-spacing:-.02em;margin:0 0 8px}
.comment-img{width:100%;max-width:330px;margin:4px auto 12px;filter:drop-shadow(0 12px 14px rgba(60,30,10,.18))}
.comment-intro{font-size:14.5px;line-height:1.55;color:var(--t2);margin:0 0 14px}
.comment-intro b{color:var(--t1)}
.comment-etapes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.comment-etapes li{display:flex;gap:12px;align-items:flex-start}
.comment-etapes li>span:last-child{font-size:13.5px;line-height:1.5;color:var(--t2)}
.comment-etapes b{display:block;font-size:15px;color:var(--t1);margin-bottom:1px}
.comment-num{flex:0 0 28px;height:28px;border-radius:99px;display:grid;place-items:center;
  background:var(--lat);color:#fff;font-weight:800;font-size:13.5px}
.comment-note{margin:14px 0 0;padding:10px 12px;border-radius:12px;background:var(--peche);
  font-size:12.5px;line-height:1.45;color:#6B3A1E}

/* ── le bouton « Actualiser » ── */
.bouton-actualiser{width:40px;height:40px;border-radius:99px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--blanc);box-shadow:var(--sh);color:var(--t1);margin-left:auto}
.entete-app .bouton-actualiser{margin:0 10px 0 auto}
.barre .bouton-actualiser{margin-left:8px}
.bouton-actualiser:active{transform:scale(.94)}
.bouton-actualiser.tourne svg{animation:tourne .8s linear infinite}

/* La personne à prévenir en cas d'accident (back-office) */
.bloc.urgence{ border:1.5px solid rgba(142,35,64,.35); background:#FBF3F5; margin-top:12px }

/* L'écran bloquant « Cette course est-elle terminée ? » (038) */
.blocage-course{ position:fixed; inset:0; z-index:9000; background:rgba(20,16,12,.62);
  display:flex; align-items:flex-end; justify-content:center; padding:16px;
  backdrop-filter:blur(2px) }
.blocage-boite{ width:100%; max-width:440px; background:var(--blanc,#fff); border-radius:22px;
  padding:22px 18px 18px; box-shadow:0 18px 50px rgba(0,0,0,.35); text-align:center;
  max-height:92vh; overflow:auto }
.blocage-boite h3{ margin:10px 0 8px; font-size:20px }
.blocage-boite p{ margin:0 0 16px; text-align:left }
.blocage-ico{ width:58px; height:58px; margin:0 auto; border-radius:18px; display:grid; place-items:center;
  background:rgba(210,84,43,.12); color:var(--lat) }
@media (min-height:700px){ .blocage-course{ align-items:center } }

/* ═══ 043 — LA COURSE À L'HEURE ═══ */
.carte-heure{display:flex;align-items:center;gap:10px;width:100%;margin-top:14px;padding:16px;text-align:left;
  border-radius:var(--r-l);background:linear-gradient(135deg,#1E2024 0%,#33363C 100%);color:#fff;box-shadow:var(--sh)}
.carte-heure:active{transform:scale(.98)}
.ch-txt{flex:1;min-width:0}
.ch-txt b{display:block;font-family:"Bricolage Grotesque","Schibsted Grotesk",sans-serif;font-size:20px;line-height:1.1;margin-bottom:4px}
.ch-txt span{display:block;font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.78);margin-bottom:8px}
.ch-txt em{display:inline-block;font-style:normal;font-weight:800;font-size:12.5px;padding:5px 11px;border-radius:99px;background:var(--lat);color:#fff}
.carte-heure .illu{flex:0 0 auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.gammes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}
.gamme-carte{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 9px 11px;text-align:left;
  border-radius:16px;background:var(--blanc,#fff);border:1.5px solid var(--line);box-shadow:var(--sh)}
.gamme-carte.on{border-color:var(--lat);box-shadow:0 0 0 3px rgba(238,90,31,.14)}
.gc-illu{display:grid;place-items:center;width:100%;height:52px;margin-bottom:4px;border-radius:12px;background:#F4EFEA}
.gc-illu .illu{max-width:100%;max-height:48px;width:auto}
.gamme-carte b{font-size:14px;color:var(--t1)}
.gc-quoi{font-size:10.5px;line-height:1.25;color:var(--t3);min-height:2.5em}
.gc-prix{margin-top:4px;font-weight:800;font-size:12.5px;color:var(--lat);white-space:nowrap}
.heures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.heure-puce{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 2px;border-radius:14px;
  background:var(--blanc,#fff);border:1.5px solid var(--line)}
.heure-puce b{font-size:15px;color:var(--t1)}
.heure-puce small{font-size:10px;font-weight:700;color:var(--t3);white-space:nowrap}
.heure-puce.on{border-color:var(--lat);background:#FFF1E8}
.heure-puce.on b,.heure-puce.on small{color:var(--lat)}
.chrono-heure{margin:4px 0 12px;padding:14px;border-radius:16px;background:#FFF6F0;border:1.5px solid #F3D3C2;text-align:center}
.chrono-heure .ch-temps{font-family:"Bricolage Grotesque","Schibsted Grotesk",sans-serif;font-size:34px;font-weight:800;line-height:1;color:var(--t1)}
.chrono-heure.depasse{background:#FBF0F2;border-color:var(--crit)}
.chrono-heure.depasse .ch-temps{color:var(--crit)}
.gamme-choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gamme-choix button{padding:10px 8px;border-radius:12px;border:1.5px solid var(--line);background:var(--blanc,#fff);font-weight:700}
.gamme-choix button.on{border-color:var(--lat);background:#FFF1E8;color:var(--lat)}

/* ═══ 045 ═══ */
/* L'écran course du livreur : rien d'autre que la course. */
.en-course .hors-course{display:none !important}
.bouton-offres{display:block;width:100%;text-align:left;margin:14px 0 12px;padding:14px 16px;border-radius:16px;
  border:1.5px dashed var(--lat);background:#FFF8F3;cursor:pointer;font:inherit;color:var(--t1)}
.bouton-offres .oc-num{display:block;font-size:13px;font-weight:800;color:var(--lat);text-transform:uppercase;letter-spacing:.04em}
.bouton-offres b{display:block;font-size:17px;margin:2px 0}
.bouton-offres .pt{font-size:12px}
.bouton-offres.on{border-style:solid;background:#FFF1E8}
/* Le client sur l'offre. */
.client-ligne{display:flex;align-items:center;gap:6px;margin-bottom:10px;color:var(--t1)}
.client-ligne svg{color:var(--lat)}
.client-ligne b{font-size:15px}
/* La carte du chauffeur, côté client. */
.chauffeur{display:flex;flex-direction:column;gap:12px}
.vehicule-chauffeur{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:var(--paper-2,#F4EFEA)}
/* Une photo qui ne charge pas disparaît : on voit ce qu'il y a dessous (initiale, image du véhicule). */
.media-repli{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.media-repli > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.media-repli > img.avatar{border-radius:50%}
.vc-media{width:92px;height:66px;border-radius:10px;overflow:hidden}
.vc-photo{background:#fff}
.vc-illu{width:92px;flex:0 0 auto;display:flex;justify-content:center}
.vc-illu .illu{width:80px;height:auto}
.plaque{display:inline-block;font-size:20px;font-weight:800;letter-spacing:.06em;padding:3px 10px;border-radius:8px;
  border:2px solid var(--t1);background:#fff;color:var(--t1)}
.vc-quoi{display:block;margin-top:6px;font-size:14px;font-weight:600;color:var(--t2)}
/* La note de fin d'une course à l'heure. */
.note-fin{display:flex;flex-direction:column;gap:6px}
.note-fin .mono{font-weight:700}
.gamme-photo{display:block;width:100%;max-height:240px;object-fit:cover;border-radius:12px;margin-bottom:12px}

/* ═══ 048 — FAIRE RÉCUPÉRER UN COLIS ═══ */
.carte-recup{display:flex;align-items:center;gap:8px;width:100%;margin:4px 0 6px;padding:16px 14px 16px 18px;text-align:left;
  border-radius:var(--r-l);color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#EE5A1F 0%,#FF7A3A 100%);
  box-shadow:0 12px 28px rgba(238,90,31,.32),0 2px 4px rgba(238,90,31,.2)}
.carte-recup:active{transform:scale(.98)}
.carte-recup::after{content:"";position:absolute;right:-30px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:rgba(255,255,255,.12);pointer-events:none}
.cr-txt{flex:1;min-width:0;position:relative;z-index:1}
.cr-txt b{display:block;font-family:"Bricolage Grotesque","Schibsted Grotesk",sans-serif;font-size:21px;line-height:1.1;margin-bottom:4px}
.cr-txt span{display:block;font-size:13px;line-height:1.35;color:rgba(255,255,255,.9);margin-bottom:10px}
.cr-txt em{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-weight:800;font-size:13px;
  padding:6px 13px;border-radius:99px;background:#fff;color:#C2410C}
.carte-recup .cr-img{flex:0 0 auto;position:relative;z-index:1;filter:drop-shadow(0 8px 10px rgba(120,40,10,.35))}
.puce-recup{display:flex;align-items:center;gap:7px;margin:0 0 12px;padding:9px 12px;border-radius:12px;
  background:rgba(238,90,31,.1);color:#B8430F;font-size:13.5px;font-weight:700}

/* ═══ 048 — BLOQUER UN LIVREUR ═══ */
.btn-bloquer{display:block;width:100%;margin-top:10px;padding:8px;font-size:13px;font-weight:600;color:var(--crit);
  text-align:center;border-radius:12px}
.btn-bloquer:active{background:rgba(142,35,64,.06)}
.cc-bloque{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 12px;border-radius:12px;
  background:rgba(142,35,64,.07);color:var(--crit);font-size:13px;font-weight:700}
.cc-bloque button{font-weight:800;color:var(--t1);text-decoration:underline}
.ligne-bloque{gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.ligne-bloque:last-child{border-bottom:0}
.cc-veh.petit .illu{width:44px}
.cherche-ligne.lieu-enr{border-left:3px solid #EE5A1F;background:rgba(238,90,31,.06)}
.cherche-ligne.lieu-enr b::after{content:"  ✓";color:#EE5A1F}

/* ── Lancer l'itinéraire (course en cours) : le gros bouton de l'étape ──
   orange pour aller chercher le colis, vert pour aller livrer. */
.itin{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px 16px;min-height:72px;
  border-radius:18px;color:#fff;text-decoration:none;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--lat) 0%,var(--lat-2) 100%);
  box-shadow:0 10px 24px -8px rgba(210,84,43,.65),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.itin.livraison{background:linear-gradient(135deg,var(--vert) 0%,var(--vert-2) 100%);
  box-shadow:0 10px 24px -8px rgba(14,92,74,.65),inset 0 1px 0 rgba(255,255,255,.22)}
.itin:active{transform:scale(.98)}
.itin::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 100% 0%,rgba(255,255,255,.18),transparent 55%)}
.itin-ico{flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--lat);
  display:grid;place-items:center;position:relative;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.itin.livraison .itin-ico{color:var(--vert)}
.itin-ico svg{transform:rotate(45deg) translate(-1px,1px)}
.itin-ico::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(255,255,255,.55);
  animation:itinOnde 1.8s var(--ease) infinite}
@keyframes itinOnde{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.25);opacity:0}}
.itin-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.itin-txt b{font-size:17px;font-weight:800;letter-spacing:-.01em}
.itin-txt small{font-size:13px;opacity:.92;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.itin-go{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center}
@media (prefers-reduced-motion:reduce){.itin-ico::before{animation:none;opacity:0}}

/* ── 049 : la fenêtre de 5 minutes pour annuler une course acceptée ── */
.annul-fenetre{margin-top:12px;padding:12px;border-radius:14px;background:rgba(201,134,26,.08);border:1px solid rgba(201,134,26,.25)}
.annul-compte{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--t2);margin-bottom:10px}
.annul-compte b{color:var(--warn);font-size:15px;margin-left:4px}

/* ── bouton WhatsApp flottant (aide) ── */
.aide-wa{position:fixed;right:14px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:40;
  pointer-events:none; /* seul le rond capte le doigt : la bulle effacée ne bloque rien */
  display:flex;align-items:center;gap:8px;text-decoration:none;-webkit-tap-highlight-color:transparent}
.aide-wa-rond{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  pointer-events:auto;
  background:#25D366;box-shadow:0 8px 22px rgba(18,140,70,.38),0 2px 6px rgba(0,0,0,.18);
  border:2px solid #fff;transition:transform .2s var(--spring)}
.aide-wa:active .aide-wa-rond{transform:scale(.92)}
.aide-wa-bulle{background:#fff;color:var(--t1);font-size:13.5px;font-weight:700;padding:9px 12px;
  border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.16);white-space:nowrap;
  opacity:0;transform:translateX(10px);pointer-events:none;transition:.3s var(--spring)}
.aide-wa.avec-bulle .aide-wa-bulle{opacity:1;transform:none}
.aide-wa.cache,.aide-wa.saisie-en-cours{display:none}
@media print{.aide-wa{display:none}}

/* ── 052 : livraison groupée ── */
.grp-bouton{margin-top:10px;padding:16px}
.grp-bouton .icone{color:var(--lat)}
.grp-num{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:50%;
  background:rgba(210,84,43,.12);color:var(--lat);font-weight:800;font-size:13px;flex:0 0 auto}
.section-titre .badge.grp-num{width:28px;height:28px}
.grp-vehicules{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.grp-vehicules .choix{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;text-align:center}
.grp-vehicules .choix img{width:100%;max-width:84px;height:auto}
.grp-vehicules .choix b{font-size:13.5px}
.grp-ligne{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.grp-ligne:last-child{border-bottom:0}
.grp-ligne .pousse{min-width:0}
.grp-ligne .pousse b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px}
.grp-code{font-size:17px;letter-spacing:.08em;flex:0 0 auto}
.grp-wa{width:auto;padding:0 12px;height:34px;display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.grp-ligne .btn.doux{width:auto;padding:0 12px;height:34px}
.carte-groupe .grp-liste{margin-top:6px}
.tournee-arrets{display:flex;gap:8px;overflow-x:auto;margin-bottom:12px;padding-bottom:4px;scrollbar-width:none}
.tournee-arrets::-webkit-scrollbar{display:none}
.tournee-arrets .onglet-course{flex:0 0 auto;min-width:104px}
.onglet-course.livre{opacity:.5}

/* ── 053 : historique en lignes compactes ── */
.histo{padding:4px 14px}
.histo-item{border-bottom:1px solid var(--line)}
.histo-item:last-child{border-bottom:0}
.histo-ligne{display:flex;align-items:center;gap:10px;width:100%;padding:12px 0;text-align:left;background:none;border:0;color:inherit;font:inherit}
.histo-ligne .pousse{min-width:0}
.histo-ligne .pousse b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.histo-ligne .pt{display:block;margin-top:2px}
.histo-veh{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(210,84,43,.09);color:var(--lat);flex:0 0 auto}
.histo-prix{flex:0 0 auto;font-size:14.5px}
.histo-fleche{opacity:.4;flex:0 0 auto;transition:transform .2s}
.histo-ligne[aria-expanded="true"] .histo-fleche{transform:rotate(90deg)}
.histo-etat.ok{color:var(--ok)} .histo-etat.ko{color:var(--crit,#B4233C)} .histo-etat.att{color:var(--warn)}
.histo-detail{padding:0 0 12px}
.histo-detail .carte-course{margin:0;box-shadow:none;border:1px solid var(--line)}
.dernier-retrait{margin-bottom:10px;padding:12px 14px;border-color:rgba(210,84,43,.35);background:rgba(210,84,43,.05)}
.dernier-retrait .icone{color:var(--lat)}

/* ── 053 : fenêtre « Communauté PaKego » ── */
.communaute{position:fixed;left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:70;
  transform:translateY(30px);opacity:0;transition:.35s var(--spring);pointer-events:none}
.communaute.on{transform:none;opacity:1;pointer-events:auto}
.communaute-boite{max-width:480px;margin:0 auto;background:var(--blanc,#fff);border-radius:20px;padding:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.22);display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center}
.communaute-logo{width:44px;height:44px;border-radius:50%;background:#25D366;display:grid;place-items:center}
.communaute-logo svg{width:26px;height:26px}
.communaute-boite b{font-size:16px;line-height:1.25}
.communaute-boutons{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.communaute-boutons .btn{width:100%;text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center}
.communaute-ok{background:#25D366!important;box-shadow:0 8px 20px rgba(37,211,102,.3)!important}

/* ── 053 : alerte back-office ── */
.alerte-admin{margin:4px 0 14px;padding:14px 15px;border-radius:16px;background:#B4233C;color:#fff;
  box-shadow:0 12px 30px rgba(180,35,60,.3);animation:aa-entree .35s var(--spring)}
@keyframes aa-entree{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
.aa-tete{display:flex;align-items:center;gap:8px;font-size:15.5px}
.aa-tete b{flex:1}
.aa-plus{background:rgba(255,255,255,.22);border-radius:999px;padding:2px 9px;font-weight:700;font-size:13px}
.aa-trajet{font-weight:700;font-size:15px;margin-top:8px}
.aa-info{font-size:13.5px;opacity:.92;margin-top:3px}
.aa-boutons{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px;margin-top:12px}
.aa-boutons .btn{width:100%;height:40px;display:flex;align-items:center;justify-content:center;text-decoration:none;
  border-radius:12px;font-weight:700;background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.aa-boutons .aa-appeler{background:#fff;color:#B4233C}
.avec-communaute .aide-wa{display:none}

/* ═══════ 058 : la commande en étapes courtes ═══════ */
.commande .accroche h1{font-size:28px}
.barre .etapes-points{max-width:180px;margin:0 auto}
.lieu-court .cherche-boite .saisie{font-size:17px;padding:16px}
.plus-options{margin-top:14px}
.puces-choix{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.puce-choix{flex:1;min-width:90px;padding:11px 10px;border-radius:12px;border:1.5px solid var(--line-2);
  background:var(--blanc);font-weight:600;font-size:14px;color:var(--t1)}
.puce-choix.on{border-color:var(--lat);color:var(--lat);background:rgba(238,90,31,.06)}
.prix-ecran{padding:16px}
.prix-geant{font-size:44px;font-weight:800;text-align:center;letter-spacing:-.03em;margin:18px 0 4px;color:var(--t1)}
.nego-pas{display:flex;align-items:center;gap:8px;margin-top:6px}
.nego-pas .saisie{flex:1;font-size:28px;font-weight:800;text-align:center;padding:12px 6px}
.nego-moins,.nego-plus{flex:0 0 auto;width:66px;height:58px;border-radius:14px;font-weight:800;font-size:16px;
  background:var(--paper-2);color:var(--t1);border:0}
.nego-plus{background:rgba(238,90,31,.1);color:var(--lat)}
.lien-retour,.lien-lire{background:none;border:0;padding:6px 0;color:var(--t2);text-decoration:underline;font-size:13.5px}
.lien-retour{display:block;margin:10px auto 0}
.lien-lire{display:inline;padding:0 0 0 2px;font-size:inherit}
.cond-ligne{text-align:center;margin-top:8px;font-size:12.5px}
.cond-mini{margin-top:10px;padding:10px 12px;font-size:14px}
.cond-courte{max-height:30vh;overflow:auto;font-size:12.5px;text-align:left;margin-top:6px}
.moment-court{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.moment-court button{display:flex;gap:8px;align-items:flex-start;text-align:left;padding:12px;border-radius:14px;
  border:1.5px solid var(--line-2);background:var(--blanc);color:var(--t1)}
.moment-court button.on{border-color:var(--lat);background:var(--lat);color:#fff}
.moment-court button.on small{color:rgba(255,255,255,.88)}
.moment-court b{display:block;font-size:14.5px}
.moment-court small{display:block;font-size:12px;color:var(--t2);margin-top:2px;line-height:1.25}
.cond-rang{gap:10px;margin-top:10px;align-items:center}
.cond-rang .cond-case{margin-top:0;flex:1}