/* Yaka, on livre ! — mobile d'abord */
:root {
  --orange: #F26B1D;
  --orange-fonce: #C9500B;
  --orange-pale: #FFE7D6;
  --vert: #0B6E4F;
  --vert-pale: #DDF3EA;
  --rouge: #C62828;
  --rouge-pale: #FDE3E3;
  --jaune: #F4B400;
  --encre: #1F1A17;
  --gris: #6F665F;
  --trait: #EFE3D8;
  --fond: #FFF8F2;
  --carte: #FFFFFF;
  --rayon: 16px;
  --ombre: 0 2px 10px rgba(80, 40, 10, .08);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font-family: var(--police); font-size: 16px; line-height: 1.45;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
a { color: var(--orange-fonce); }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
[hidden] { display: none !important; }
.ic { width: 1.1em; height: 1.1em; vertical-align: -.18em; flex: none; }
.meta .ic, .puce .ic { color: var(--orange-fonce); }
.bloc h2 .ic { color: var(--orange); }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 20; background: var(--fond); padding: 10px 16px 8px; padding-top: calc(10px + env(safe-area-inset-top)); border-bottom: 1px solid var(--trait); }
.entete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 760px; margin: 0 auto; min-height: 40px; }
.entete-droite { display: flex; gap: 6px; align-items: center; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--encre); min-width: 0; }
.logo-pastille { width: 36px; height: 36px; border-radius: 11px; background: var(--orange); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 22px; flex: none; transform: rotate(-6deg); }
.logo-texte { font-weight: 900; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-sous { font-weight: 700; color: var(--orange); font-size: 15px; }
.retour { font-size: 30px; text-decoration: none; color: var(--encre); padding: 0 8px 0 0; line-height: 1; }
.entete-titre { font-weight: 800; font-size: 18px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entete-ligne:has(.retour) { justify-content: flex-start; }
.pilule { border: 1px solid var(--trait); background: var(--carte); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; font-weight: 700; color: var(--encre); text-decoration: none; cursor: pointer; white-space: nowrap; }

.recherche { display: flex; max-width: 760px; margin: 8px auto 0; background: var(--carte); border: 1px solid var(--trait); border-radius: 999px; overflow: hidden; }
.recherche input { flex: 1; border: 0; padding: 11px 16px; font: inherit; background: transparent; min-width: 0; }
.recherche input:focus { outline: none; }
.recherche button { border: 0; background: var(--orange); color: #fff; padding: 0 16px; cursor: pointer; display: grid; place-items: center; }
.recherche button .ic { width: 20px; height: 20px; }

.page { max-width: 760px; margin: 0 auto; padding: 14px 16px 24px; }

/* Messages */
.messages { max-width: 760px; margin: 10px auto 0; padding: 0 16px; }
.message { background: var(--vert-pale); color: var(--vert); padding: 10px 14px; border-radius: 12px; margin-bottom: 6px; font-weight: 700; }
.message-error { background: var(--rouge-pale); color: var(--rouge); }
.message-info { background: var(--orange-pale); color: var(--orange-fonce); }

/* Navigation du bas */
.nav-bas { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex; background: var(--carte); border-top: 1px solid var(--trait); padding-bottom: env(safe-area-inset-bottom); }
.nav-bas a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 9px; font-size: 12px; font-weight: 700; color: var(--gris); text-decoration: none; }
.nav-bas a.actif { color: var(--orange); }
.nav-bas .ic { width: 23px; height: 23px; vertical-align: 0; }
.nav-bas .ico { position: relative; line-height: 0; }
.nav-bas a.actif .ic { stroke-width: 2.4; }
.badge { position: absolute; top: -4px; right: -12px; background: var(--orange); color: #fff; border-radius: 999px; font-size: 11px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; border: 2px solid var(--carte); }

/* Accueil */
.accroche { padding: 6px 0 2px; }
.accroche h1 { font-size: 26px; font-weight: 900; }
.accroche p { color: var(--gris); margin: 0; }
.categories { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 10px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.categories::-webkit-scrollbar { display: none; }
.categorie { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; padding: 10px 4px; border-radius: var(--rayon); background: var(--carte); border: 2px solid transparent; box-shadow: var(--ombre); text-decoration: none; color: var(--encre); font-size: 12.5px; font-weight: 700; text-align: center; }
.cat-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--fond); display: grid; place-items: center; color: var(--encre); }
.cat-ico .ic { width: 22px; height: 22px; }
.categorie.actif .cat-ico { background: var(--orange); color: #fff; }
.categorie.actif { border-color: var(--orange); background: var(--orange-pale); }

.bandeau-encours { display: flex; align-items: center; gap: 10px; background: var(--vert); color: #fff; border-radius: var(--rayon); padding: 12px 14px; text-decoration: none; margin-bottom: 10px; }
.bandeau-encours .fleche { margin-left: auto; font-size: 22px; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: #7CFFB2; flex: none; animation: pulse 1.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(124,255,178,.7); } 70% { box-shadow: 0 0 0 10px rgba(124,255,178,0); } 100% { box-shadow: 0 0 0 0 rgba(124,255,178,0); } }

.liste-commerces { display: grid; gap: 14px; }
@media (min-width: 620px) { .liste-commerces { grid-template-columns: 1fr 1fr; } }
.carte-commerce { background: var(--carte); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); text-decoration: none; color: var(--encre); display: block; }
.carte-commerce.ferme { opacity: .6; }
.carte-infos { padding: 10px 14px 12px; }
.carte-infos h2 { font-size: 18px; font-weight: 800; margin: 0 0 2px; }
.desc { color: var(--gris); margin: 0 0 4px; font-size: 14px; }
.meta { margin: 0; font-size: 13px; color: var(--gris); font-weight: 600; }

.visuel { position: relative; height: 130px; display: grid; place-items: center; overflow: hidden; }
.visuel img { width: 100%; height: 100%; object-fit: cover; }
.visuel.grand { height: 150px; border-radius: var(--rayon); margin-bottom: 12px; }
.visuel-restaurant { --teinte: #B4472B; }
.visuel-supermarche { --teinte: #2E6A4A; }
.visuel-pharmacie { --teinte: #1F5A85; }
.visuel-boulangerie { --teinte: #B07A1E; }
.visuel-autre { --teinte: #5E4787; }
/* Aplat de couleur + motif discret de cercles, en attendant la vraie photo du commerce */
.visuel:not(:has(img)), .mini-visuel {
  background-color: var(--teinte, var(--orange));
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 1.5px, transparent 0);
  background-size: 14px 14px;
  color: #fff;
}
.visuel-initiales { font-size: 54px; font-weight: 900; letter-spacing: -.02em; color: #FFF4EA; line-height: 1; }
.visuel.grand .visuel-initiales { font-size: 64px; }
.visuel-cat { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; }
.visuel-cat .ic { width: 18px; height: 18px; }
.etiquette-ferme { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.7); color: #fff; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; }

/* Page commerce */
.fiche-commerce h1 { font-size: 26px; font-weight: 900; }
.fiche-commerce > p { color: var(--gris); margin: 0 0 8px; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.puce { background: var(--carte); border: 1px solid var(--trait); border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 700; }
.puce-ok { background: var(--vert-pale); color: var(--vert); border-color: transparent; }
.puce-ko { background: var(--rouge-pale); color: var(--rouge); border-color: transparent; }
.info { background: var(--orange-pale); color: #7A3608; border-radius: 12px; padding: 10px 14px; font-size: 14px; margin: 10px 0; }
.info-alerte { background: var(--rouge-pale); color: var(--rouge); }

.onglets-rubriques { position: sticky; top: 61px; z-index: 10; background: var(--fond); display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; margin: 6px -16px 0; scrollbar-width: none; }
.onglets-rubriques a { flex: none; padding: 6px 14px; border-radius: 999px; background: var(--carte); border: 1px solid var(--trait); color: var(--encre); text-decoration: none; font-weight: 700; font-size: 14px; }
.onglets-rubriques a.actif { background: var(--encre); color: #fff; border-color: var(--encre); }
.rubrique { scroll-margin-top: 120px; }
.rubrique h2 { font-size: 20px; font-weight: 900; margin: 18px 0 8px; }
.produit { display: flex; gap: 12px; justify-content: space-between; background: var(--carte); border-radius: var(--rayon); padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--ombre); }
.produit h3 { font-size: 16px; font-weight: 800; margin: 0 0 2px; }
.produit p { margin: 0 0 6px; color: var(--gris); font-size: 14px; }
.prix { color: var(--encre); }
.produit-droite { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; flex: none; }
.produit-photo { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; }

.compteur { display: flex; align-items: center; background: var(--fond); border-radius: 999px; border: 1px solid var(--trait); }
.compteur button { width: 36px; height: 36px; border: 0; border-radius: 50%; font-size: 22px; font-weight: 800; cursor: pointer; background: transparent; color: var(--encre); line-height: 1; }
.compteur .compteur-plus { background: var(--orange); color: #fff; }
.compteur-qte { min-width: 22px; text-align: center; font-weight: 800; }
.compteur:has(.compteur-qte:empty) .compteur-moins, .compteur .compteur-qte:empty { display: none; }

.barre-panier { position: fixed; left: 16px; right: 16px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 25; max-width: 728px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--orange); color: #fff; text-decoration: none; font-weight: 800; padding: 13px 16px; border-radius: 14px; box-shadow: 0 6px 18px rgba(242,107,29,.4); }
.barre-nb { background: rgba(255,255,255,.25); border-radius: 8px; padding: 1px 9px; }

/* Blocs, formulaires */
.titre-page { font-size: 24px; font-weight: 900; margin: 4px 0 12px; }
.titre-page.petit { font-size: 19px; margin-top: 20px; }
.titre-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bloc { background: var(--carte); border-radius: var(--rayon); padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--ombre); }
.bloc h2 { font-size: 17px; font-weight: 900; }
.discret { color: var(--gris); font-size: 14px; }
.centre { text-align: center; }
.aide { display: block; color: var(--gris); font-size: 13px; margin-top: 3px; }
.erreur { display: block; color: var(--rouge); font-size: 13px; font-weight: 700; margin-top: 3px; }

.champ { margin-bottom: 14px; }
.champ label { display: block; font-weight: 800; margin-bottom: 5px; font-size: 15px; }
.champ input:not([type=checkbox]):not([type=radio]), .champ select, .champ textarea, .refus input {
  width: 100%; font: inherit; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--trait); background: #fff; color: var(--encre);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-pale); }
.champ-erreur input, .champ-erreur select, .champ-erreur textarea { border-color: var(--rouge); }
.champ-case label { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.champ-case input { width: 22px; height: 22px; accent-color: var(--orange); }

.bouton { display: inline-flex; justify-content: center; align-items: center; gap: 6px; background: var(--orange); color: #fff; border: 0; border-radius: 14px; padding: 13px 20px; font: inherit; font-weight: 800; font-size: 16px; text-decoration: none; cursor: pointer; }
.bouton:active { transform: scale(.98); }
.bouton-secondaire { background: var(--orange-pale); color: var(--orange-fonce); }
.bouton-danger { background: var(--rouge); }
.bouton-large { width: 100%; margin: 6px 0 10px; }
.boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.lien-discret { background: none; border: 0; color: var(--gris); text-decoration: underline; font: inherit; font-size: 14px; cursor: pointer; padding: 10px; }

.vide { text-align: center; padding: 40px 10px; color: var(--gris); }
.vide-ico { margin: 0 auto 8px; width: 64px; height: 64px; border-radius: 50%; background: var(--orange-pale); color: var(--orange-fonce); display: grid; place-items: center; }
.vide-ico .ic { width: 30px; height: 30px; }
.vide .bouton { margin-top: 10px; }

/* Panier, totaux */
.ligne-commerce, .ligne-commande { display: flex; align-items: center; gap: 12px; background: var(--carte); border-radius: var(--rayon); padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--ombre); text-decoration: none; color: var(--encre); }
.ligne-commerce .fleche { margin-left: auto; font-size: 24px; color: var(--gris); }
.mini-visuel { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.mini-visuel .ic { width: 22px; height: 22px; }
.ligne-commande-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ligne-commande-texte small { color: var(--gris); }
.ligne-panier { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--trait); }
.ligne-panier:last-child { border-bottom: 0; }
.ligne-panier-nom { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ligne-panier-nom small { color: var(--gris); }
.ligne-panier-total { min-width: 86px; text-align: right; }
.totaux p { display: flex; justify-content: space-between; gap: 10px; margin: 4px 0; }
.totaux p.discret { display: block; }
.totaux .total { font-weight: 900; font-size: 18px; border-top: 1px dashed var(--trait); padding-top: 8px; margin-top: 8px; }

.carte { height: 240px; border-radius: 12px; margin: 8px 0; border: 1.5px solid var(--trait); z-index: 1; }

/* Suivi */
.statut-bloc { text-align: center; }
.statut-ico { margin: 4px auto 10px; width: 72px; height: 72px; border-radius: 50%; background: var(--orange-pale); color: var(--orange-fonce); display: grid; place-items: center; }
.statut-ico .ic { width: 34px; height: 34px; }
.statut-livree .statut-ico { background: var(--vert-pale); color: var(--vert); }
.statut-refusee .statut-ico, .statut-annulee .statut-ico { background: var(--rouge-pale); color: var(--rouge); }
.formulaire-compte { max-width: 440px; margin: 10px auto; }
.formulaire-compte h1, .formulaire-compte > p { text-align: center; }
.frise { list-style: none; padding: 0; margin: 16px 0 4px; display: flex; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--gris); }
.frise li { flex: 1; position: relative; padding-top: 22px; }
.frise li::before { content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--trait); z-index: 1; }
.frise li::after { content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 4px; background: var(--trait); }
.frise li:first-child::after { display: none; }
.frise li.fait { color: var(--vert); }
.frise li.fait::before, .frise li.fait::after { background: var(--vert); }
.frise li.courant::before { box-shadow: 0 0 0 5px var(--vert-pale); }

.statut-pastille { flex: none; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--trait); color: var(--encre); white-space: nowrap; }
.statut-pastille.statut-nouvelle { background: var(--jaune); color: #4A3500; }
.statut-pastille.statut-acceptee, .statut-pastille.statut-prete { background: var(--orange-pale); color: var(--orange-fonce); }
.statut-pastille.statut-en_livraison { background: #DCEBFF; color: #1C4F8F; }
.statut-pastille.statut-livree { background: var(--vert-pale); color: var(--vert); }
.statut-pastille.statut-refusee, .statut-pastille.statut-annulee { background: var(--rouge-pale); color: var(--rouge); }

/* Espace commerce & gestion */
body.espace .logo-pastille, body.gestion .logo-pastille { background: var(--vert); }
.interrupteur { border: 0; border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 900; background: var(--rouge-pale); color: var(--rouge); cursor: pointer; }
.interrupteur.on { background: var(--vert); color: #fff; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 8px; }
.stat { background: var(--carte); border-radius: var(--rayon); padding: 12px 14px; box-shadow: var(--ombre); }
.stat small { display: block; color: var(--gris); font-weight: 700; font-size: 12.5px; }
.stat strong { font-size: 20px; font-weight: 900; }
.stat-fort { background: var(--vert); color: #fff; }
.stat-fort small { color: #CDEFE2; }

.commande-carte { background: var(--carte); border-radius: var(--rayon); padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--ombre); border-left: 6px solid var(--trait); }
.commande-carte.statut-nouvelle { border-left-color: var(--jaune); animation: attention 2s ease-in-out 3; }
.commande-carte.statut-acceptee, .commande-carte.statut-prete { border-left-color: var(--orange); }
.commande-carte.statut-en_livraison { border-left-color: #1C6FB8; }
@keyframes attention { 50% { box-shadow: 0 0 0 4px rgba(244,180,0,.45); } }
.commande-carte header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.commande-lignes { padding-left: 0; list-style: none; margin: 10px 0; font-size: 17px; }
.commande-lignes li { padding: 3px 0; }
.note { background: var(--orange-pale); padding: 8px 12px; border-radius: 10px; margin: 6px 0; }
.commande-total { font-size: 14px; margin: 6px 0; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-top: 10px; }
.actions .bouton { min-width: 160px; }
.choix-livreur { border: 1.5px solid var(--trait); border-radius: 12px; padding: 8px 12px; margin: 0 0 8px; display: flex; gap: 14px; flex-wrap: wrap; }
.choix-livreur legend { font-weight: 800; font-size: 14px; padding: 0 4px; }
.choix-livreur label { display: flex; gap: 6px; align-items: center; font-weight: 700; }
.refus summary { cursor: pointer; color: var(--rouge); font-weight: 700; padding: 12px 4px; }
.refus form { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ligne-simple { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; padding: 7px 0; border-bottom: 1px solid var(--trait); font-size: 14px; }
.ligne-simple:last-child { border-bottom: 0; }

.ligne-catalogue { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--trait); }
.ligne-catalogue:last-child { border-bottom: 0; }
.ligne-catalogue.indispo .ligne-catalogue-nom { opacity: .5; }
.ligne-catalogue-nom { flex: 1; display: flex; flex-direction: column; text-decoration: none; color: var(--encre); min-width: 0; }
.ligne-catalogue-nom small { color: var(--gris); }
.bascule { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; cursor: pointer; }
.bascule input { width: 22px; height: 22px; accent-color: var(--vert); }

.tableau-defile { overflow-x: auto; padding: 4px 8px; }
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th { text-align: left; color: var(--gris); font-size: 12.5px; padding: 8px; border-bottom: 2px solid var(--trait); white-space: nowrap; }
.tableau td { padding: 8px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau tr:last-child td { border-bottom: 0; }

/* Livreur */
body.livreur .logo-pastille { background: var(--encre); }
.livreur-info { background: #DCEBFF; color: #1C4F8F; padding: 8px 12px; border-radius: 10px; margin: 6px 0; font-size: 14px; }
.livreur-info.attente { background: var(--orange-pale); color: var(--orange-fonce); }
.trajet { list-style: none; padding: 0 0 0 22px; margin: 12px 0; position: relative; }
.trajet::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 30px; width: 2px; background: var(--trait); }
.trajet li { position: relative; display: flex; flex-direction: column; gap: 1px; padding-bottom: 14px; }
.trajet li::before { content: ""; position: absolute; left: -22px; top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--orange); background: var(--carte); }
.trajet li:last-child::before { border-color: var(--vert); background: var(--vert); }
.trajet li.fait::before { background: var(--orange); }
.trajet small { color: var(--gris); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.trajet .liens { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; font-weight: 700; font-size: 14px; }
.trajet .liens a { text-decoration: none; }
.commande-lignes.petit { font-size: 14px; color: var(--gris); }
.a-encaisser { background: var(--vert-pale); color: var(--vert); padding: 10px 12px; border-radius: 10px; margin: 8px 0; }
.course-dispo .gain { color: var(--vert); font-size: 18px; white-space: nowrap; }
.marqueur { display: block; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.35); }
.marqueur-livreur { background: var(--orange); }
.marqueur-maison { background: var(--vert); }

/* ===== Couleur de chaque application ===== */
body.app-pro .logo-pastille { background: var(--vert); }
body.app-livreur .logo-pastille { background: var(--encre); }
body.app-pro .nav-bas a.actif { color: var(--vert); }
body.app-livreur .nav-bas a.actif { color: var(--encre); }

/* ===== Éléments ajoutés ===== */
.info-attente { background: #FFF4D6; color: #6B4B00; display: block; }
.info-attente .ic { color: #B07A1E; }
a.lien-bloc { text-decoration: none; }
.etiquette-priorite { background: var(--encre); color: #fff; border-radius: 10px; padding: 6px 10px; font-size: 13px; font-weight: 800; margin: 6px 0; display: inline-flex; gap: 6px; align-items: center; }
.course-dispo.prioritaire { border-left-color: var(--encre); box-shadow: 0 0 0 2px var(--encre) inset, var(--ombre); }
.livreurs-autour { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--vert); }
.barre-position { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; font-size: 14px; color: var(--gris); font-weight: 600; }
.choix-livraison { display: grid; gap: 8px; }
.option-livraison { display: flex; gap: 10px; align-items: flex-start; border: 2px solid var(--trait); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.option-livraison:has(input:checked) { border-color: var(--orange); background: var(--orange-pale); }
.option-livraison input { margin-top: 4px; accent-color: var(--orange); width: 18px; height: 18px; }
.option-livraison span { display: flex; flex-direction: column; }
.option-livraison small { color: var(--gris); font-size: 13px; }
.accueil-app { display: grid; gap: 16px; }
.accueil-app-texte h1 { font-size: 30px; font-weight: 900; margin-top: 8px; }
.liste-atouts { list-style: none; padding: 0; display: grid; gap: 8px; font-weight: 700; }
.liste-atouts li { display: flex; gap: 8px; align-items: center; }
.liste-atouts .ic { color: var(--orange); }
body.app-pro .liste-atouts .ic { color: var(--vert); }
.formulaire-compte h2 { text-align: center; }
.validation .actions { margin-top: 6px; }
.validation-livreur { display: flex; gap: 14px; justify-content: space-between; flex-wrap: wrap; }
.vignette-piece { display: block; width: 220px; max-width: 100%; text-decoration: none; text-align: center; font-size: 13px; }
.vignette-piece img { width: 100%; height: 140px; object-fit: cover; border-radius: 10px; border: 1px solid var(--trait); }
.kanban { display: grid; gap: 14px; }
.kanban-colonne h2 { font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; }
.kanban-colonne .compte { background: var(--trait); color: var(--encre); border-radius: 999px; padding: 0 8px; font-size: 13px; }
.kanban-vide { color: var(--gris); margin: 0 0 6px; }
.deux-colonnes { display: grid; gap: 12px; }
.deux-colonnes > * { min-width: 0; }

/* Pied de page et documents légaux */
.pied { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; padding: 24px 0 8px; font-size: 13px; color: var(--gris); }
.pied a { color: var(--gris); }
.pied-apps { flex-basis: 100%; text-align: center; }
.nav-legale { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; scrollbar-width: none; }
.nav-legale a { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--carte); border: 1px solid var(--trait); color: var(--encre); text-decoration: none; font-size: 13px; font-weight: 700; }
.nav-legale a.actif { background: var(--encre); color: #fff; }
body.page-legale { padding-bottom: 0; }
.legal { background: var(--carte); border-radius: var(--rayon); padding: 20px 18px; box-shadow: var(--ombre); line-height: 1.6; }
.legal h1 { font-size: 24px; font-weight: 900; }
.legal h2 { font-size: 18px; font-weight: 900; margin-top: 24px; }
.legal-version { color: var(--gris); font-size: 13px; }
.legal-contact { margin-top: 24px; color: var(--gris); font-size: 14px; }
.legal .tableau th { white-space: normal; text-align: left; vertical-align: top; width: 32%; color: var(--encre); font-size: 14px; }

/* ===== Version ordinateur ===== */
@media (min-width: 960px) {
  body { padding-bottom: 0; }
  .entete-ligne, .recherche, .messages { max-width: 1240px; }
  .recherche { max-width: 620px; margin-left: auto; margin-right: auto; }
  .cadre { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
  .cadre:not(:has(> nav)) { display: block; max-width: 1240px; }
  .page { max-width: none; margin: 0; padding: 20px 0 32px; }
  .cadre:not(:has(> nav)) .page { max-width: 1040px; margin: 0 auto; }
  .messages { padding: 0; margin: 0 0 12px; }

  /* La barre du bas devient un menu latéral */
  .nav-bas { position: sticky; top: 84px; align-self: start; flex-direction: column; gap: 4px; background: transparent; border: 0; padding: 20px 0 0; }
  .nav-bas a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 11px 14px; border-radius: 12px; font-size: 15px; }
  .nav-bas a:hover { background: var(--carte); }
  .nav-bas a.actif { background: var(--carte); box-shadow: var(--ombre); }
  .nav-bas .ico { line-height: 1; }
  .nav-bas .badge { top: -6px; right: -10px; }
  .nav-legale { flex-direction: column; overflow: visible; padding: 20px 0 0; position: sticky; top: 84px; align-self: start; }
  .nav-legale a { white-space: normal; border-radius: 10px; }

  .accroche h1 { font-size: 34px; }
  .categories { margin: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; }
  .liste-commerces { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .carte-commerce { transition: transform .15s, box-shadow .15s; }
  .carte-commerce:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(80,40,10,.12); }

  .fiche-commerce { display: grid; grid-template-columns: 340px 1fr; gap: 0 24px; align-items: start; }
  .fiche-commerce .visuel.grand { grid-row: span 8; height: 220px; margin: 0; }
  .onglets-rubriques { top: 70px; margin: 12px 0 0; padding-left: 0; }
  .rubrique { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; max-width: calc(100% - 360px); }
  .rubrique h2 { grid-column: 1 / -1; }
  .barre-panier { left: auto; right: max(24px, calc((100vw - 1240px) / 2 + 24px)); bottom: 24px; width: 340px; margin: 0; }

  .deux-colonnes { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .colonne-collante { position: sticky; top: 84px; }
  .accueil-app { grid-template-columns: 1fr 420px; gap: 40px; align-items: center; min-height: 60vh; }
  .formulaire-compte { margin: 10px auto; }

  .kanban { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
  .kanban .commande-carte { padding: 12px; }
  .kanban .actions .bouton { min-width: 0; width: 100%; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .legal { padding: 32px 40px; }
}
@media (min-width: 960px) and (max-width: 1180px) {
  .liste-commerces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rubrique { max-width: none; grid-template-columns: 1fr; }
}
.page .messages { padding: 0; margin: 0 0 10px; }
/* Dans les colonnes, le titre de colonne donne déjà le statut */
.kanban .commande-carte header .statut-pastille { display: none; }
.kanban .commande-carte header { display: block; }

/* ===== Paiement Mobile Money ===== */
.pastille-paiement { flex: none; display: inline-grid; place-items: center; min-width: 54px; height: 32px; padding: 0 8px; border-radius: 8px; font-weight: 900; font-size: 13px; background: var(--trait); color: var(--encre); }
.pastille-paiement.pastille-mtn { background: #FFCC00; color: #1F1A17; }
.pastille-paiement.pastille-airtel { background: #E40000; color: #fff; }
.pastille-paiement.pastille-especes { background: var(--vert-pale); color: var(--vert); }
.pastille-paiement.grande { min-width: 96px; height: 52px; font-size: 20px; border-radius: 14px; margin: 0 auto 8px; display: grid; width: fit-content; }
.option-livraison .pastille-paiement { margin-top: 0; }
.paiement-bloc { text-align: center; }
.paiement-bloc h1 { font-size: 34px; margin: 4px 0; }
.etapes-paiement { text-align: left; padding-left: 20px; display: grid; gap: 8px; margin: 16px 0; }
.numero-marchand { font-size: 18px; background: var(--orange-pale); padding: 1px 8px; border-radius: 6px; white-space: nowrap; }
.attente-paiement { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--vert); margin: 10px 0; }
.attente-paiement .pulse { background: var(--vert); }
.paiement-autres { margin-top: 16px; border-top: 1px dashed var(--trait); padding-top: 12px; }
.paiement-bloc form .champ { text-align: left; }
.paiement-etat { border-radius: 10px; padding: 8px 12px; margin: 8px 0; font-size: 14px; }
.paiement-etat.paye { background: var(--vert-pale); color: var(--vert); }
.paiement-etat.verification { background: #FFF4D6; color: #6B4B00; }
.paiement-etat.especes { background: var(--orange-pale); color: #7A3608; }
.ligne-formulaire { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ligne-formulaire input { flex: 1; min-width: 160px; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--trait); }
.montant-a-verser { font-size: 20px; color: var(--vert); white-space: nowrap; }

.eta-livraison { background: var(--vert-pale); color: var(--vert); border-radius: 10px; padding: 8px 12px; font-weight: 700; margin: 8px 0; }

/* ===== Codes de remise, problèmes ===== */
.code-retrait, .code-livraison { background: var(--encre); color: #fff; border-radius: 12px; padding: 10px 14px; margin: 8px 0; display: flex; flex-direction: column; gap: 2px; }
.code-retrait strong, .code-livraison strong { font-size: 30px; letter-spacing: 8px; }
.code-retrait small, .code-livraison small { color: #E8DED6; font-size: 12.5px; }
.code-livraison { text-align: center; align-items: center; background: var(--vert); }
.code-livraison p { margin: 0; font-weight: 700; }
.form-code { display: grid; gap: 8px; width: 100%; }
.form-code label { font-weight: 800; display: grid; gap: 4px; }
.form-code label small { font-weight: 600; color: var(--gris); }
.form-code input { font: inherit; font-size: 26px; letter-spacing: 10px; text-align: center; padding: 10px; border-radius: 12px; border: 2px solid var(--trait); }
.form-code input:focus { outline: none; border-color: var(--orange); }
.champ-ligne { width: 100%; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--trait); margin: 6px 0; }
.probleme { border-left: 6px solid var(--rouge); }
.ligne-formulaire select { font: inherit; padding: 10px; border-radius: 10px; border: 1.5px solid var(--trait); max-width: 100%; }
details.bloc textarea { width: 100%; font: inherit; padding: 10px; border-radius: 10px; border: 1.5px solid var(--trait); margin: 6px 0; }

/* ===== Photos des produits ===== */
.jauge { height: 10px; background: var(--trait); border-radius: 999px; overflow: hidden; margin: 8px 0; }
.jauge span { display: block; height: 100%; background: var(--vert); border-radius: 999px; }
.jauge-photos.incomplete .jauge span { background: var(--orange); }
.vignette-produit { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; }
.vignette-produit.sans-photo { display: grid; place-items: center; border: 2px dashed var(--orange); color: var(--orange); text-decoration: none; }
.sans-photo-texte { color: var(--orange-fonce); font-weight: 700; }

/* ===== Service client (Aide, Yaka Support) ===== */
body.app-support .logo-pastille { background: #5E4787; }
body.app-support .nav-bas a.actif { color: #5E4787; }
.bouton-support { background: #5E4787; }
.form-aide { display: grid; gap: 10px; }
.form-aide label { display: grid; gap: 4px; font-weight: 700; }
.form-aide select, .form-aide textarea { width: 100%; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--trait); }
.fil-messages { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding: 4px; }
.bulle { max-width: 82%; padding: 10px 12px; border-radius: 14px; background: var(--fond); border: 1px solid var(--trait); }
.bulle p { margin: 4px 0 0; white-space: normal; }
.bulle small { color: var(--gris); font-size: 12px; font-weight: 700; }
.bulle img { max-width: 220px; border-radius: 10px; margin-top: 6px; }
.bulle.moi { align-self: flex-end; background: var(--orange-pale); border-color: transparent; }
.bulle.equipe { background: #F1ECF8; border-color: transparent; }
.bulle.moi.equipe { background: #E3D9F2; }
.liste-support { padding: 4px 12px; }
.ligne-support { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--trait); color: var(--encre); text-decoration: none; }
.ligne-support:last-child { border-bottom: 0; }
.ligne-support.non-lue .ligne-support-texte strong::before { content: "● "; color: #5E4787; }
.ligne-support-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ligne-support-texte small { color: var(--gris); }
.pastille-app { flex: none; font-size: 11.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; color: #fff; background: var(--orange); }
.pastille-app.app-pro { background: var(--vert); }
.pastille-app.app-livreur { background: var(--encre); }
.support-conversation { display: grid; gap: 14px; }
.reponses-rapides summary { cursor: pointer; font-weight: 800; color: #5E4787; }
.reponses-rapides > div { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.reponses-rapides .pilule { font-size: 12.5px; font-weight: 600; }
.actions-support form { margin-bottom: 6px; }
@media (min-width: 960px) {
  .support-conversation { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); align-items: start; }
  .cache-mobile { display: inline; }
}
@media (max-width: 959px) { .cache-mobile { display: none; } }
.form-aide label:has(input[type=checkbox]) { display: flex; gap: 8px; align-items: center; }

/* Délai d'acceptation des commandes (Yaka Pro) */
.delai-acceptation { background: #FFF4D6; border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; font-weight: 600; }
.delai-acceptation small { display: block; font-weight: 400; color: var(--gris); }
.delai-acceptation.urgent { background: #FFE1D6; color: #B3261E; }
.delai-acceptation.depasse { background: #F3E8E6; color: var(--gris); }

/* Gestion › Configuration */
.config-ligne { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--trait); }
.config-ligne:last-of-type { border-bottom: 0; }
.config-ligne small { display: block; color: var(--gris); font-weight: 400; }
.config-ligne input { width: 130px; flex: none; font: inherit; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--trait); text-align: right; }
.pastille-argent { display: inline-block; font-size: 11px; font-weight: 800; color: #B26A00; background: #FFF3D6; border-radius: 999px; padding: 0 6px; }

/* Yaka v2 (spec §3.2) : fond blanc pur et bordures grises froides sur l'app client */
body.app-client { --fond: #FFFFFF; --trait: #E2E2E2; --gris: #545454; }
body.app-client .entete { background: #FFFFFF; }

/* ===== Yaka v2 · Phase 1a : navigation client (spec §3.7) ===== */
.ui-onglets { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; background: #fff; border-top: 1px solid var(--gray-200); padding-bottom: env(safe-area-inset-bottom); }
.ui-onglets a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 56px; justify-content: center; font: 600 .6875rem/1 var(--police); color: var(--gray-500); text-decoration: none; }
.ui-onglets a .ic { width: 24px; height: 24px; }
.ui-onglets a.est-actif { color: var(--gray-900); }
.ui-onglets a.est-actif .ic { stroke-width: 2.5; }
.ui-onglets__ico { position: relative; line-height: 0; }
.ui-pastille-nb { position: absolute; top: -5px; right: -9px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--yaka-orange-500); color: #fff; font: 700 .6875rem/18px var(--police); text-align: center; }
.ui-pastille-nb--en-ligne { position: static; display: inline-block; vertical-align: 1px; }
.ui-panier-flottant { position: fixed; z-index: 29; left: 16px; right: 16px; bottom: calc(68px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 0 auto;
  min-height: 52px; padding: 0 18px; border-radius: var(--r-pill); background: var(--yaka-orange-500); color: #fff; text-decoration: none; font: 600 1rem/1 var(--police); box-shadow: var(--shadow-2); animation: ui-monte var(--t-in) var(--ease); }
.ui-panier-flottant:hover { background: var(--yaka-orange-600); }
.ui-panier-flottant > span:first-child { margin-right: auto; }
.ui-panier-flottant__nb { min-width: 24px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, .25); display: grid; place-items: center; font-size: .8125rem; padding: 0 6px; }
body.app-client:has(.ui-panier-flottant:not([hidden])) .page { padding-bottom: 80px; }
.ui-hamburger, .ui-entete-recherche, .ui-entete-panier, .ui-entete-compte { display: none; }
.ui-tiroir { position: fixed; z-index: 91; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); overflow-y: auto; background: #fff; box-shadow: var(--shadow-3); padding: 12px 20px 24px;
  transform: translateX(-100%); transition: transform var(--t-sheet) var(--ease); }
.ui-tiroir.est-ouvert { transform: none; }
.ui-tiroir[hidden] { display: none; }
.ui-tiroir__tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ui-tiroir__bonjour { font: 700 1.125rem/1.4 var(--police); margin: 8px 0; }
.ui-tiroir__connexion { display: grid; gap: 8px; margin: 12px 0; }
.ui-tiroir__autres { margin-top: 20px; font: 500 .875rem/1.6 var(--police); color: var(--gray-600); }
.ui-tiroir__autres a { color: var(--gray-900); font-weight: 700; }
.ui-menu-compte { padding-top: 4px; padding-bottom: 4px; }
.ui-menu-compte .ui-liste-ligne:last-child { border-bottom: 0; }
.ui-page-recherche { max-width: 720px; margin: 0 auto; }
.ui-page-recherche .ui-recherche { height: 48px; }
.ui-chips-ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-recentes { display: flex; flex-direction: column; }
.ui-recente { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gray-200); }
.ui-recente a { flex: 1; padding: 12px 0; color: var(--gray-900); text-decoration: none; font: 500 1rem/1.3 var(--police); }
.ui-recente button { width: 40px; height: 40px; border: 0; background: none; font-size: 1.25rem; color: var(--gray-500); cursor: pointer; }
.ui-grille-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 16px 8px; justify-items: center; }
@media (min-width: 960px) {
  body.app-client { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.app-client .cadre { display: block; max-width: 1240px; }
  body.app-client .page { padding: 20px 0 32px; }
}
@media (min-width: 1024px) {
  body.app-client { padding-bottom: 0; }
  .ui-onglets { display: none; }
  .ui-panier-flottant { left: auto; right: max(24px, calc((100vw - 1240px) / 2 + 24px)); bottom: 24px; width: 360px; }
  body.app-client .entete-ligne { gap: 16px; }
  body.app-client .entete-droite { flex: 1; justify-content: flex-end; gap: 12px; }
  .ui-hamburger { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; cursor: pointer; flex: none; }
  .ui-hamburger:hover { background: var(--gray-100); }
  .ui-hamburger span, .ui-hamburger span::before, .ui-hamburger span::after { display: block; width: 20px; height: 2px; background: var(--gray-900); border-radius: 2px; position: relative; content: ""; }
  .ui-hamburger span::before { position: absolute; top: -6px; }
  .ui-hamburger span::after { position: absolute; top: 6px; }
  .ui-entete-recherche { display: flex; flex: 1; max-width: 560px; margin-right: auto; margin-left: 24px; }
  .ui-entete-panier, .ui-entete-compte { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: var(--r-pill); background: var(--gray-100); color: var(--gray-900); text-decoration: none; font: 700 .9375rem/1 var(--police); }
  .ui-entete-panier { background: var(--gray-900); color: #fff; }
  .ui-entete-panier .ic, .ui-entete-compte .ic { width: 20px; height: 20px; }
  body.app-client .entete .recherche { display: none; }
}

/* ===== Yaka v2 · Phase 1b : accueil en sections ===== */
.ui-accueil { max-width: 1240px; margin: 0 auto; }
.ui-accueil > .ui-banner { margin-bottom: 10px; }
.ui-accueil__titre { font: 700 1.75rem/2.25rem var(--police); margin: 8px 0 4px; }
.ui-accueil__sous-titre { color: var(--gray-600); margin: 0 0 12px; font: 400 .9375rem/1.4 var(--police); }
.ui-accueil__position { margin: 4px 0 12px; font-weight: 500; }
.ui-accueil__position span { flex: 1; }
.ui-accueil__categories { gap: 4px; padding-top: 4px; padding-bottom: 8px; }
.ui-accueil__filtres { gap: 8px; padding-bottom: 4px; }
.ui-accueil__section .ui-section-titre { margin-top: 20px; }
.ui-grille-commerces { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 16px; }
.ui-grille-commerces > .ui-vide { grid-column: 1 / -1; }
.ui-store__initiales { position: absolute; inset: 0; display: grid; place-items: center; font: 800 2rem/1 var(--police); color: var(--gray-500); }
.ui-store__fav .ic { width: 18px; height: 18px; }
.ui-store__fav[aria-pressed="true"] .ic { fill: var(--danger-600); stroke: var(--danger-600); }
.ui-note .ic-etoile { width: 11px; height: 11px; fill: currentColor; stroke: none; vertical-align: -1px; }
.ui-recherche-mobile { margin: 8px auto 0; max-width: 760px; }
.centre { text-align: center; }
@media (min-width: 640px) { .ui-grille-commerces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .ui-recherche-mobile { display: none; }
  .ui-grille-commerces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ui-accueil__titre { font-size: 2rem; line-height: 2.5rem; }
}
@media (min-width: 1280px) { .ui-grille-commerces { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ===== Yaka v2 · Phase 1c : page commerce, fiche article, panier ===== */
.ui-rond--blanc { background: #fff; box-shadow: var(--shadow-1); }
.ui-lien { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--gray-900); text-decoration: underline; cursor: pointer; }
.ui-commerce { max-width: 1040px; margin: 0 auto; }
body.app-client:has(.ui-commerce) .entete { display: none; }
.ui-commerce__hero { position: relative; aspect-ratio: 16 / 9; max-height: 340px; width: 100%; margin: -16px 0 0; background: var(--gray-100); }
.ui-commerce__hero > img { width: 100%; height: 100%; object-fit: cover; }
.ui-commerce__boutons { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; }
.ui-commerce__boutons span { display: flex; gap: 8px; }
.ui-commerce__boutons .ui-rond[aria-pressed="true"] .ic { fill: var(--danger-600); stroke: var(--danger-600); }
.ui-commerce__logo { position: absolute; left: 16px; bottom: -32px; width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff; background: var(--gray-900); color: #fff; display: grid; place-items: center; font: 800 1.25rem/1 var(--police); overflow: hidden; box-shadow: var(--shadow-1); }
.ui-commerce__logo img { width: 100%; height: 100%; object-fit: cover; }
.ui-commerce__logo--petit { position: static; width: 44px; height: 44px; border-width: 0; font-size: .875rem; flex: none; }
.ui-commerce__infos { padding: 40px 0 8px; }
.ui-commerce__infos .ui-h1 { margin: 0 0 4px; }
.ui-commerce__ligne { margin: 2px 0; color: var(--gray-600); font: 500 .875rem/1.5 var(--police); }
.ui-commerce__ligne strong { color: var(--gray-900); }
.ui-commerce__desc { color: var(--gray-600); margin: 8px 0; }
.ui-commerce__livraison { display: flex; gap: 8px; margin: 12px 0 6px; }
.ui-commerce__livraison > div { flex: 1; border: 1px solid var(--gray-200); border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font: 400 .8125rem/1.3 var(--police); color: var(--gray-600); }
.ui-commerce__livraison strong { color: var(--gray-900); font-size: .9375rem; }
.ui-commerce__infos .ui-banner { margin-top: 10px; font-weight: 500; }
.ui-commerce__recherche { margin: 8px 0; }
.ui-onglets-rubriques { position: sticky; top: 0; z-index: 15; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; background: #fff; padding: 10px 16px; margin: 8px -16px 0; border-bottom: 1px solid var(--gray-200); }
.ui-onglets-rubriques::-webkit-scrollbar { display: none; }
.ui-onglets-rubriques .ui-chip { flex: none; }
.ui-commerce__section { scroll-margin-top: 64px; padding-top: 12px; }
.ui-commerce__section > .ui-h2 { margin: 12px 0 4px; }
.ui-commerce__pied { text-align: center; margin: 24px 0; }
.ui-item__texte { color: var(--gray-900); text-decoration: none; }
.ui-item__visuel form { margin: 0; }
.ui-item--sans-photo .ui-item__visuel { width: auto; height: auto; align-self: center; }
.ui-item--sans-photo .ui-item__plus { position: static; }
.ui-item__plus:empty::before { content: "+"; font-size: 1.25rem; }
.ui-item__badge { margin-right: 4px; }
.ui-item__badge--epice { background: var(--danger-100); color: var(--danger-600); }
.ui-item__badge--alerte { background: var(--warning-100); color: var(--warning-600); }
.ui-item-carte { width: 150px; display: flex; flex-direction: column; gap: 4px; color: var(--gray-900); text-decoration: none; font: 400 .875rem/1.3 var(--police); }
.ui-item-carte__image { position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--gray-100); }
.ui-item-carte__image img { width: 100%; height: 100%; object-fit: cover; }
.ui-item-carte strong { font-weight: 600; }
.ui-barre-note { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; font: 600 .8125rem/1 var(--police); margin: 6px 0; }
.ui-barre-note__fond { height: 6px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
.ui-barre-note__fond span { display: block; height: 100%; background: var(--gray-900); }
.ui-avis { margin: 10px 0; padding: 10px 12px; background: var(--gray-50); border-radius: var(--r-sm); font: 400 .875rem/1.4 var(--police); }
.ui-avis small { display: block; color: var(--gray-600); margin-top: 4px; }
.ui-liste-ligne--simple::after { content: none; }
.ui-liste-ligne--simple { margin: 0; }
/* Fiche article */
.ui-fiche { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ui-sheet .ui-fiche { max-height: calc(92vh - 16px); }
.ui-fiche__corps { flex: 1; overflow-y: auto; }
.ui-fiche__image { position: relative; margin: 0 -16px 12px; aspect-ratio: 16 / 9; background: var(--gray-100); }
.ui-fiche__image:not(:has(img)) { aspect-ratio: auto; height: 56px; background: none; }
.ui-fiche__image img { width: 100%; height: 100%; object-fit: cover; }
.ui-fiche__fermer { position: absolute; top: 12px; right: 12px; font-size: 1.25rem; }
.ui-fiche__prix { font: 600 1.0625rem/1.4 var(--police); margin: 0; }
.ui-fiche__desc { color: var(--gray-600); }
.ui-fiche .ui-options { border: 0; margin: 0; padding: 16px 0; border-bottom: 8px solid var(--gray-50); }
.ui-fiche .ui-options legend { width: 100%; padding: 0; }
.ui-option--indispo { opacity: .5; }
.ui-fiche__instructions { display: grid; gap: 6px; padding: 16px 0; }
.ui-fiche__instructions textarea { width: 100%; font: inherit; padding: 10px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--gray-200); }
.ui-fiche__cta { display: flex; gap: 12px; align-items: center; background: #fff; }
.ui-fiche__cta .ui-btn { flex: 1; }
.ui-fiche-page { max-width: 560px; margin: 0 auto; }
.ui-fiche-page .ui-fiche__fermer { display: none; }
/* Panier */
.ui-panier { max-width: 640px; margin: 0 auto; }
.ui-panier__commerce { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--gray-900); text-decoration: none; border-bottom: 1px solid var(--gray-200); }
.ui-panier__commerce span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.ui-panier__commerce small { color: var(--gray-600); }
.ui-panier__lignes { margin: 8px 0 16px; }
.ui-panier__ligne { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "texte prix" "texte stepper"; gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--gray-200); }
.ui-panier__ligne.est-indispo { opacity: .6; }
.ui-panier__texte { grid-area: texte; display: flex; flex-direction: column; gap: 2px; color: var(--gray-900); text-decoration: none; }
.ui-panier__texte small { color: var(--gray-600); }
.ui-panier__texte em { color: var(--gray-600); font-size: .875rem; }
.ui-panier__prix { grid-area: prix; text-align: right; font-weight: 600; }
.ui-stepper--panier { grid-area: stepper; height: 36px; justify-self: end; }
.ui-stepper--panier button { width: 36px; height: 36px; }
.ui-stepper--panier .ic { width: 16px; height: 16px; }
.ui-panier__recap { margin: 16px 0 8px; }
.ui-panier .ui-banner { margin: 8px 0; }
.ui-entete-panier.rebond { animation: ui-rebond .35s var(--ease); }
@keyframes ui-rebond { 50% { transform: scale(1.2); } }
@media (min-width: 1024px) {
  body.app-client:has(.ui-commerce) .entete { display: block; }
  .ui-commerce__hero { margin-top: 0; border-radius: var(--r-lg); overflow: hidden; }
  .ui-commerce__boutons .ui-rond:first-child { visibility: hidden; }
  .ui-onglets-rubriques { top: 64px; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .ui-commerce__section .ui-item { padding: 18px 0; }
}

/* Yaka Pro · options d'articles */
.ligne-groupe { display: flex; align-items: center; gap: 12px; color: var(--encre); text-decoration: none; }
.ligne-groupe > span:first-child { flex: 1; }
.tableau-options input[type=text], .tableau-options input[type=number] { width: 100%; font: inherit; padding: 8px; border-radius: 8px; border: 1.5px solid var(--trait); }
.cases-articles ul, .cases-articles > div { list-style: none; padding: 0; columns: 2; }
.cases-articles label, .champ ul label { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.champ ul { list-style: none; padding: 0; margin: 4px 0; columns: 2; }
.lien-options { margin: 0 0 12px; }
.ic-etoile { fill: currentColor; stroke: none; }

/* ===== Yaka v2 · adresses ===== */
.ui-entete-adresse { margin-left: 4px; min-width: 0; max-width: 46vw; }
.ui-entete-adresse strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-size: .9375rem; }
@media (max-width: 1023px) { body.app-client .logo-sous { display: none; } }
.ui-radio-carte--bouton { width: 100%; background: #fff; text-align: left; font: inherit; color: var(--gray-900); }
.ui-radio-carte--bouton.est-choisie { border: 2px solid var(--gray-900); }
.ui-radio-carte--bouton .ui-rond { width: 40px; height: 40px; flex: none; }
.ui-liste-ligne--bouton { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--gray-200); font: inherit; text-align: left; cursor: pointer; }
.ui-carte-epingle { position: relative; height: 260px; margin: 0 -16px; }
.ui-carte-epingle__carte { position: absolute; inset: 0; background: var(--gray-100); }
.ui-carte-epingle__epingle { position: absolute; z-index: 500; left: 50%; top: 50%; transform: translate(-50%, -100%); color: var(--yaka-orange-500); pointer-events: none; }
.ui-carte-epingle__epingle .ic { width: 40px; height: 40px; fill: var(--yaka-orange-500); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.ui-carte-epingle__position { position: absolute; z-index: 500; right: 12px; bottom: 12px; }
.ui-form-adresse { display: grid; gap: 12px; }
.ui-champ { display: grid; gap: 6px; font: 600 .875rem/1.3 var(--police); border: 0; padding: 0; margin: 0; }
.ui-champ small { color: var(--gray-500); font-weight: 400; }
.ui-champ input, .ui-champ select { width: 100%; height: 48px; padding: 0 14px; border-radius: var(--r-sm); border: 1.5px solid var(--gray-200); font: 500 1rem/1 var(--police); background: #fff; color: var(--gray-900); }
.ui-champ input:focus, .ui-champ select:focus { outline: none; border-color: var(--gray-900); }
.ui-libelles { display: flex; gap: 8px; flex-wrap: wrap; }
.ui-libelles legend { margin-bottom: 6px; }
.ui-libelles label { position: relative; }
.ui-libelles input { position: absolute; opacity: 0; }
.ui-libelles span { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: var(--r-pill); background: var(--gray-100); font-weight: 600; cursor: pointer; }
.ui-libelles input:checked + span { background: var(--gray-900); color: #fff; }
.ui-case { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.ui-adresse-ligne { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--gray-200); }
.ui-adresse-ligne__texte { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ui-adresse-ligne__texte small { color: var(--gray-600); }
.ui-adresse-ligne form { margin: 0; }
.ui-nouvelle-adresse-page .ui-carte-epingle { margin: 0; border-radius: var(--r-md); overflow: hidden; }

/* ===== Yaka v2 · checkout une page ===== */
.ui-checkout { max-width: 1040px; margin: 0 auto; }
.ui-checkout__colonnes { display: grid; gap: 12px; }
.ui-checkout__carte { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-md); padding: 16px; margin-bottom: 12px; display: grid; gap: 10px; }
.ui-checkout__carte .ui-h3 { margin: 0; }
.ui-checkout__carte .ui-radio-carte { margin: 0; }
.ui-checkout__carte textarea { width: 100%; font: inherit; padding: 10px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--gray-200); }
.ui-checkout__adresse { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1.5px solid var(--gray-200); border-radius: var(--r-md); background: #fff; text-align: left; font: inherit; color: var(--gray-900); cursor: pointer; }
.ui-checkout__adresse > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ui-checkout__adresse small { color: var(--gray-600); }
.ui-checkout__articles summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.ui-checkout__articles small { color: var(--gray-600); }
.ui-checkout__cta .ui-btn { width: 100%; }
.ui-checkout .pastille-paiement { flex: none; }
@media (min-width: 1024px) {
  .ui-checkout__colonnes { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); align-items: start; gap: 20px; }
  .ui-checkout__recap { position: sticky; top: 84px; }
  .ui-checkout__cta { max-width: 1040px; margin: 0 auto; }
}

/* ===== Yaka v2 · attente de paiement ===== */
.ui-paiement { max-width: 480px; margin: 0 auto; padding: 24px 0; text-align: center; display: grid; gap: 12px; }
.ui-paiement p { margin: 0; color: var(--gray-700); }
.ui-paiement__ico { width: 88px; height: 88px; border-radius: 50%; background: var(--yaka-orange-100); color: var(--yaka-orange-600); display: grid; place-items: center; margin: 0 auto 8px; animation: ui-vibre 1.6s ease-in-out infinite; }
.ui-paiement__ico .ic { width: 40px; height: 40px; }
.ui-paiement__ico--attente { background: var(--warning-100); color: var(--warning-600); animation: none; }
.ui-paiement__ico--erreur { background: var(--danger-100); color: var(--danger-600); animation: none; }
.ui-paiement__compte { font: 600 1rem/1.4 var(--police); font-variant-numeric: tabular-nums; color: var(--gray-900) !important; }
.ui-paiement__aide { text-align: left; background: var(--gray-50); border-radius: var(--r-md); padding: 12px 14px; }
.ui-paiement__aide summary { cursor: pointer; font-weight: 600; }
.ui-paiement__aide p { margin-top: 8px; }
.ui-paiement__etapes { text-align: left; padding-left: 20px; display: grid; gap: 8px; margin: 0; }
.ui-paiement__declaration { text-align: left; display: grid; gap: 8px; }
.ui-paiement__ref { margin-top: 8px !important; }
.ui-paiement__actions { display: flex; flex-direction: column; align-items: center; gap: 0; }
.ui-paiement__actions form { margin: 0; }
@keyframes ui-vibre { 0%, 60%, 100% { transform: rotate(0); } 65% { transform: rotate(-8deg); } 70% { transform: rotate(8deg); } 75% { transform: rotate(-6deg); } 80% { transform: rotate(6deg); } }
.ui-checkout__recap { gap: 4px; }
.ui-checkout__recap .ui-prix-ligne, .ui-checkout__recap p { margin: 0; }

/* ===== Yaka v2 · suivi plein écran, notation, aide ===== */
.ui-suivi { max-width: 1240px; margin: 0 auto; }
.ui-suivi__panneau { display: grid; gap: 12px; }
.ui-suivi__tete { display: grid; gap: 6px; }
.ui-suivi__tete .ui-display { margin: 0; font-size: 1.75rem; line-height: 2.25rem; }
.ui-suivi__sous { margin: 0; color: var(--gray-700); font: 500 1rem/1.4 var(--police); }
.ui-suivi__details { display: grid; gap: 6px; border-top: 8px solid var(--gray-50); margin: 4px -16px 0; padding: 12px 16px 0; }
.ui-suivi__details .ui-h3 { margin: 10px 0 2px; }
.ui-suivi__details .ui-prix-ligne { margin: 0; }
.ui-suivi__details .ui-prix-ligne small { color: var(--gray-600); }
.ui-suivi__actions { display: grid; gap: 8px; margin: 12px 0 24px; }
.ui-suivi__actions form { margin: 0; }
.ui-chrono { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--gray-200); }
.ui-chrono li { position: relative; padding: 4px 0 4px 16px; font: 400 .875rem/1.4 var(--police); }
.ui-chrono li::before { content: ""; position: absolute; left: -6px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--gray-900); }
.ui-chrono li span { display: inline-block; width: 48px; font-weight: 600; }
.ui-marqueur { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; box-shadow: var(--shadow-2); border: 2px solid #fff; }
.ui-marqueur svg { width: 55%; height: 55%; }
.ui-marqueur--commerce { background: #fff; color: var(--gray-900); border-color: var(--gray-200); }
.ui-marqueur--client { background: var(--yaka-orange-500); color: #fff; }
.ui-marqueur--livreur { background: var(--gray-900); color: #fff; }
/* Mobile : carte plein écran + panneau glissant à 3 crans */
@media (max-width: 1023px) {
  body.page-suivi:has(.ui-suivi--carte) .entete, body.page-suivi:has(.ui-suivi--carte) .ui-onglets { display: none; }
  body.page-suivi:has(.ui-suivi--carte) { padding-bottom: 0; }
  body.page-suivi:has(.ui-suivi--carte) .page { padding: 0; }
  .ui-suivi--carte .ui-suivi__carte { position: fixed; inset: 0; z-index: 1; }
  .ui-suivi--carte .ui-suivi__panneau { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; background: #fff; border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-3);
    padding: 4px 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; transition: height var(--t-sheet) var(--ease); }
  .ui-suivi__panneau.cran-bas { height: 42vh; } .ui-suivi__panneau.cran-milieu { height: 70vh; } .ui-suivi__panneau.cran-haut { height: 94vh; }
  .ui-suivi__retour { position: absolute; z-index: 500; top: calc(12px + env(safe-area-inset-top)); left: 12px; }
}
.ui-suivi__poignee { display: block; width: 100%; height: 22px; border: 0; background: none; cursor: grab; padding: 0; position: sticky; top: 0; }
.ui-suivi__poignee span { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--gray-300); margin: 8px auto; }
.ui-suivi__carte { background: var(--gray-100); }
@media (min-width: 1024px) {
  .ui-suivi--carte { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(360px, 1fr); gap: 20px; align-items: start; }
  .ui-suivi--carte .ui-suivi__carte { position: sticky; top: 84px; height: calc(100vh - 110px); border-radius: var(--r-lg); overflow: hidden; }
  .ui-suivi__poignee, .ui-suivi__retour { display: none; }
  .ui-suivi__details { margin: 4px 0 0; padding: 12px 0 0; }
}
.ui-suivi:not(.ui-suivi--carte) .ui-suivi__panneau { max-width: 640px; margin: 0 auto; }
/* Notation */
.ui-notation { display: grid; gap: 20px; }
.ui-notation section { display: grid; gap: 10px; }
.ui-notation textarea { width: 100%; font: inherit; padding: 10px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--gray-200); }
.ui-etoiles { display: flex; gap: 6px; }
.ui-etoiles label { position: relative; cursor: pointer; }
.ui-etoiles input { position: absolute; opacity: 0; }
.ui-etoiles .ic { width: 40px; height: 40px; color: var(--gray-300); fill: currentColor; stroke: none; }
.ui-etoiles label.est-allumee .ic { color: var(--gray-900); }
.ui-etoiles input:focus-visible + span { outline: 3px solid var(--yaka-orange-100); border-radius: 50%; }
.ui-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-tags label { position: relative; }
.ui-tags input { position: absolute; opacity: 0; }
.ui-tags span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--gray-100); font: 600 .875rem/1 var(--police); cursor: pointer; }
.ui-tags input:checked + span { background: var(--gray-900); color: #fff; }
.ui-pouces-ligne { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--gray-200); }
.ui-pouces-ligne > span { flex: 1; }
.ui-pouces-ligne label { position: relative; }
.ui-pouces-ligne input { position: absolute; opacity: 0; }
.ui-pouces-ligne label span { width: 44px; height: 44px; border-radius: 50%; background: var(--gray-100); display: grid; place-items: center; cursor: pointer; }
.ui-pouces-ligne input:checked + span { background: var(--gray-900); color: #fff; }
/* Aide par commande */
.ui-ligne-probleme { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gray-200); font-weight: 500; }
.ui-ligne-probleme span { display: flex; flex-direction: column; }
.ui-ligne-probleme small { color: var(--gray-600); font-weight: 400; }
.ui-ligne-probleme select { width: 72px; height: 40px; border-radius: var(--r-sm); border: 1.5px solid var(--gray-200); font: inherit; }
.ui-form-adresse textarea { width: 100%; font: inherit; padding: 10px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--gray-200); }

/* ===== Yaka v2 · recherche instantanée ===== */
.ui-suggestions { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px); max-height: 70vh; overflow-y: auto; background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 6px 0; }
.ui-suggestions__titre { margin: 8px 16px 4px; font: 700 .75rem/1 var(--police); text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); }
.ui-suggestions a { display: flex; align-items: center; gap: 12px; padding: 8px 16px; color: var(--gray-900); text-decoration: none; }
.ui-suggestions a:hover, .ui-suggestions a:focus { background: var(--gray-50); }
.ui-suggestions img { width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.ui-suggestions span { display: flex; flex-direction: column; min-width: 0; }
.ui-suggestions small { color: var(--gray-600); }
.ui-suggestions__vide { padding: 12px 16px; margin: 0; color: var(--gray-600); }
.ui-recherche-bloc { margin-bottom: 8px; }
.ui-onglets-resultats { display: flex; gap: 8px; margin: 8px 0 16px; }
.ui-page-recherche .ui-item { color: var(--gray-900); text-decoration: none; }

/* ===== Yaka v2 · notifications ===== */
.ui-cloche { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--gray-900); flex: none; }
.ui-cloche:hover { background: var(--gray-100); }
.ui-cloche .ic { width: 22px; height: 22px; }
.ui-cloche .ui-pastille-nb { top: 4px; right: 2px; }
.ui-notif.est-nouvelle strong, .ui-notif.est-nouvelle { font-weight: 700; }
.ui-notif small { font-weight: 400; }
.ui-activer-push { margin: 8px 0; }
.ui-activer-push span { flex: 1; font-weight: 500; }

/* ===== Yaka v2 · Phase 2 : Yaka Pro ===== */
.pilule-alerte { background: #FFF3D6; color: #B26A00; border-color: transparent; }
.form-occupe .ui-chips-ligne form { margin: 0; }
.form-occupe { display: grid; gap: 10px; padding-bottom: 20px; }
.choix-preparation { border: 0; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.choix-preparation legend { font-weight: 700; margin-bottom: 4px; width: 100%; }
.choix-preparation label { position: relative; }
.choix-preparation input { position: absolute; opacity: 0; }
.choix-preparation span { display: inline-flex; height: 34px; align-items: center; padding: 0 12px; border-radius: 999px; background: #EEEEEE; font-weight: 700; font-size: 14px; cursor: pointer; }
.choix-preparation input:checked + span { background: #141414; color: #fff; }
.commande-carte.statut-nouvelle { animation: clignote-bord 1.2s ease-in-out infinite; }
@keyframes clignote-bord { 50% { box-shadow: 0 0 0 3px #F26B1D; } }
@media (prefers-reduced-motion: reduce) { .commande-carte.statut-nouvelle { animation: none; box-shadow: 0 0 0 3px #F26B1D; } }
.refus select, .refus input[name=motif] { width: 100%; margin: 4px 0; font: inherit; padding: 8px; border-radius: 8px; border: 1.5px solid var(--trait); }
.fleches { display: inline-flex; gap: 2px; }
.fleches form { margin: 0; }
.fleches button { font-size: 18px; padding: 2px 6px; }
.choix-rupture { display: flex; align-items: center; gap: 6px; margin: 0; }
.choix-rupture select { font: inherit; font-size: 13px; padding: 6px; border-radius: 8px; border: 1.5px solid var(--trait); max-width: 170px; }
.bouton-petit { padding: 6px 10px; font-size: 13px; }
.tableau-horaires td.creneau { white-space: nowrap; }
.tableau-horaires input[type=time] { font: inherit; padding: 6px; border-radius: 8px; border: 1.5px solid var(--trait); }
@media (max-width: 700px) { .tableau-horaires thead { display: none; } .tableau-horaires tr { display: grid; gap: 4px; padding: 8px 0; } }

/* ===== Yaka v2 · Phase 2c/2d : livreur ===== */
.bouton-noir { background: #141414 !important; color: #fff !important; }
.etapes-livreur { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; list-style: none; padding: 0; margin: 8px 0; font: 600 12px/1.2 var(--police); color: #757575; }
.etapes-livreur li { border-top: 4px solid #E2E2E2; padding-top: 4px; }
.etapes-livreur li.fait { border-color: #141414; color: #141414; }
.etapes-livreur li.courant { border-color: #F26B1D; color: #141414; }
.etape-panneau { display: grid; gap: 6px; }
.etape-panneau small { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #757575; }
.etape-lieu { font-size: 22px; }
.etape-panneau .liens { display: flex; gap: 8px; flex-wrap: wrap; }
.etape-panneau .bouton-large, .course-guidee .form-code .bouton-large { min-height: 56px; font-size: 18px; }
.course-guidee select, .course-guidee input[name=note] { width: 100%; margin: 4px 0; font: inherit; padding: 10px; border-radius: 10px; border: 1.5px solid var(--trait); }
.offre-course { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.6); display: grid; place-items: end center; padding: 16px; }
.offre-course[hidden] { display: none; }
.offre-course__carte { width: 100%; max-width: 480px; background: #141414; color: #fff; border-radius: 20px; padding: 24px 20px; display: grid; gap: 10px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,.4); animation: ui-monte .2s ease-out; }
.offre-course__badge { justify-self: center; background: #F26B1D; border-radius: 999px; padding: 4px 12px; font-weight: 800; margin: 0; }
.offre-course__gain { font: 800 44px/1.1 var(--police); margin: 0; font-variant-numeric: tabular-nums; }
.offre-course__trajet { display: grid; gap: 6px; margin: 0; text-align: left; }
.offre-course__trajet small { color: #BBB; }
.offre-course__distance, .offre-course__paye { margin: 0; color: #CBCBCB; }
.offre-course__anneau { --progres: 1; width: 160px; height: 160px; margin: 8px auto 0; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#F26B1D calc(var(--progres) * 360deg), #3D3D3D 0); }
.offre-course__accepter { width: 136px; height: 136px; border-radius: 50%; border: 0; background: #fff; color: #141414; font: 800 22px/1 var(--police); cursor: pointer; }
.offre-course__refuser { color: #CBCBCB !important; font-size: 16px; padding: 12px; }

/* ===== Yaka v2 · Phase 2e : gains du livreur ===== */
.gains-semaine .titre-ligne { align-items: center; text-align: center; }
.gains-total { font: 800 28px/1.2 var(--police); text-align: center; margin: 8px 0; }
.gains-total small { font-size: 15px; font-weight: 500; color: var(--gris); }
.graphique-barres { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 140px; padding-top: 8px; }
.graphique-barres .barre { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.graphique-barres .barre-valeur { width: 100%; max-width: 32px; min-height: 3px; border-radius: 6px 6px 2px 2px; background: #141414; }
.graphique-barres .barre.futur .barre-valeur { background: #E2E2E2; }
.graphique-barres small { font-size: 12px; color: var(--gris); text-transform: capitalize; }
.jour-gains summary { display: flex; justify-content: space-between; gap: 8px; cursor: pointer; font-weight: 600; }
.course-gain { border-top: 1px solid var(--trait); padding-top: 8px; margin-top: 8px; }
.course-gain p { margin: 0; }

/* ===== Yaka v2 · Phase 2f : Gestion ===== */
.carte-live { display: grid; gap: 12px; }
#carte-live { height: 65vh; min-height: 380px; border-radius: 16px; overflow: hidden; background: #EEE; }
@media (min-width: 960px) { .carte-live { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.carte-live__panneau select, .carte-live__panneau input { width: 100%; font: inherit; padding: 8px; border-radius: 8px; border: 1.5px solid var(--trait); margin: 4px 0 8px; }
.legende-carte { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 14px; color: var(--gris); }
.pastille-etat { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 2px; }
.pastille-etat.libre, .marqueur-gestion.libre { background: #0E7A4F; }
.pastille-etat.commerce, .marqueur-gestion.commerce { background: #F26B1D; }
.pastille-etat.client, .marqueur-gestion.client { background: #1F5FBF; }
.pastille-etat.perdu, .marqueur-gestion.perdu { background: #D3302F; }
.pastille-etat.cmd { background: #fff; border: 2px solid #141414; }
.marqueur-gestion { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; color: #fff; font: 800 13px/1 var(--police); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.marqueur-gestion.cmd { background: #fff; border: 3px solid #141414; border-radius: 6px; width: 70%; height: 70%; margin: 15%; }
.marqueur-gestion.cmd.alerte { border-color: #D3302F; animation: clignote-bord 1.2s infinite; }
.bandeau-alerte-gestion { position: fixed; z-index: 80; right: 16px; bottom: 16px; background: #D3302F; color: #fff; font-weight: 800; padding: 12px 16px; border-radius: 12px; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.25); }

/* ===== Yaka v2 · Phase 2g : Support ===== */
.bulle.interne { background: #FFF6C7 !important; color: #141414 !important; border: 1px dashed #C9A400; }
.evenement-systeme { text-align: center; font-size: 14px; color: #555; background: #F3F3F3; border-radius: 10px; padding: 6px 10px; margin: 8px auto; max-width: 90%; }
.etiquettes-conv { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.etiquette { display: inline-block; font: 600 12px/1 var(--police); padding: 5px 9px; border-radius: 999px; background: #EEE; color: #333; }
.etiquette.haute { background: #FDE3E3; color: #A31F1F; }
.etiquette.sla { background: #D3302F; color: #fff; }
.form-note-interne { background: #FFFBE6; }
.form-note-interne textarea, .actions-commande input, .actions-commande select { width: 100%; font: inherit; padding: 8px; border-radius: 8px; border: 1.5px solid var(--trait); margin: 4px 0; }
.actions-commande details { border-top: 1px solid var(--trait); padding: 8px 0; }
.actions-commande summary { cursor: pointer; font-weight: 600; }
.actions-commande form { display: grid; gap: 4px; margin-top: 6px; }
.lignes-remboursement { display: grid; gap: 4px; padding-left: 20px; }
.lignes-remboursement input { width: 80px !important; }
.form-etiquettes div { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chronologie-support { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 4px; font-size: 14px; }

/* Gestion › Accueil */
.ligne-banniere { display: grid; gap: 12px; align-items: center; }
@media (min-width: 720px) { .ligne-banniere { grid-template-columns: 240px 1fr; } }
.ligne-banniere .apercu { width: 100%; }
.ligne-banniere p { margin: 0 0 4px; }

/* Gestion : exports, rôles */
.form-exports { display: grid; gap: 10px; }
@media (min-width: 720px) { .form-exports { grid-template-columns: 200px 200px 1fr; align-items: end; } }
.boutons-exports { display: flex; flex-wrap: wrap; gap: 8px; }
.ligne-membre { display: grid; gap: 8px; align-items: center; }
@media (min-width: 900px) { .ligne-membre { grid-template-columns: 220px 1fr auto; } }
.ligne-membre small { display: block; color: var(--gris); }
.roles-membre { display: flex; flex-wrap: wrap; gap: 6px; }