/* ============================================================
   AFRIFOOD — Thème africain : jaune or & vert
   Motif bogolan, soleil, animations fluides
   ============================================================ */
:root{
  --or:        #E8A80C;   /* jaune or */
  --or-clair:  #F7C948;
  --or-pale:   #FFF4D6;
  --vert:      #1B6E3C;   /* vert forêt */
  --vert-fonce:#0E4A26;
  --vert-clair:#8FD14F;
  --terre:     #7A4A1F;
  --creme:     #FFFBEF;
  --encre:     #2A2013;
  --rouge:     #C0392B;
  --rayon: 18px;
  --ombre: 0 10px 30px rgba(42,32,19,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Kanit',sans-serif;
  background:var(--creme);
  color:var(--encre);
  min-height:100vh;
  line-height:1.55;
}
h1,h2,h3,.logo{font-family:'Yeseva One',serif;letter-spacing:.5px}

/* ---- Motif bogolan en fond (triangles + points, très léger) ---- */


/* ============================ NAVIGATION ============================ */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:24px;
  padding:12px 4vw;
  background:linear-gradient(120deg,var(--vert-fonce),var(--vert));
  color:#fff;
  border-bottom:5px solid var(--or);
  box-shadow:var(--ombre);
}
.logo{color:#fff;text-decoration:none;font-size:1.6rem;display:flex;align-items:center;gap:10px}
.logo-img{height:70px;width:auto;display:block;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.nav-liens{display:flex;gap:20px;flex:1}
.nav-liens a{color:#EAF6E5;text-decoration:none;font-weight:600;position:relative;padding:4px 0}
.nav-liens a::after{content:'';position:absolute;left:0;bottom:-3px;width:0;height:3px;background:var(--or-clair);border-radius:2px;transition:width .3s}
.nav-liens a:hover::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:12px}
.btn-langue{border:1px solid #ddd;border-radius:20px;padding:5px 12px;font-size:.78rem;font-weight:600;color:#555;cursor:pointer;transition:border-color .2s}
.btn-langue:hover{border-color:var(--vert-fonce,#2e7d32);color:var(--vert-fonce,#2e7d32)}
.nav-collapse{display:contents}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto;flex-direction:column;gap:5px;flex-shrink:0}
.nav-toggle span{display:block;width:26px;height:3px;background:#fff;border-radius:2px;transition:transform .25s,opacity .25s}
.nav-toggle.ouvert span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle.ouvert span:nth-child(2){opacity:0}
.nav-toggle.ouvert span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.salut{color:var(--or-pale);font-weight:300}
.btn-panier{font-size:1.3rem;text-decoration:none;position:relative;transition:transform .2s}
.btn-panier:hover{transform:scale(1.15) rotate(-6deg)}
.badge{
  position:absolute;top:-8px;right:-12px;
  background:var(--or);color:var(--encre);
  font-size:.72rem;font-weight:700;font-family:'Kanit';
  border-radius:999px;padding:1px 7px;border:2px solid #fff;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.badge.saut{transform:scale(1.6)}

/* ============================ BOUTONS ============================ */
.btn{
  display:inline-block;border:none;cursor:pointer;text-decoration:none;text-align:center;
  font-family:'Kanit';font-weight:600;font-size:.95rem;
  padding:10px 22px;border-radius:999px;transition:all .25s;
}
.btn-plein{background:var(--or);color:var(--encre);box-shadow:0 4px 0 #b8830a}
.btn-plein:hover{transform:translateY(-2px);box-shadow:0 6px 0 #b8830a}
.btn-plein:active{transform:translateY(2px);box-shadow:0 1px 0 #b8830a}
.btn-vert{background:var(--vert);color:#fff;box-shadow:0 4px 0 var(--vert-fonce)}
.btn-vert:hover{transform:translateY(-2px)}
.btn-contour{background:transparent;color:inherit;border:2px solid currentColor}
.btn-contour:hover{background:rgba(255,255,255,.12)}
.btn-danger{background:var(--rouge);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
.btn-large{width:100%;padding:14px;font-size:1.05rem}

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

/* ---- Héros ---- */
.heros{
  border-radius:calc(var(--rayon)*1.4);
  background:
    radial-gradient(1000px 300px at 85% -20%, rgba(247,201,72,.45), transparent 60%),
    linear-gradient(125deg, var(--vert-fonce) 0%, var(--vert) 60%, #2c8a4f 100%);
  color:#fff;padding:56px 6%;margin-bottom:36px;overflow:hidden;position:relative;box-shadow: 4px 4px 17px 0px #7c7979;
}
.heros h1{font-size:clamp(1.8rem,4.5vw,3.2rem);margin-bottom:12px}
.heros h1 span{color:var(--or-clair)}
.heros p{max-width:560px;color:#EAF6E5;font-weight:300;font-size:1.08rem}

/* ---- Filtres par pays ---- */
/* ============================ COMMENT ÇA MARCHE ============================ */
.comment-ca-marche{margin:44px 0 8px}
.titre-section{text-align:center;color:var(--vert-fonce);margin-bottom:26px;font-size:1.7rem}
.etapes-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.etape{
  text-align:center;background:#fff;border-radius:var(--rayon);padding:22px 16px 26px;
  box-shadow:var(--ombre);border-top:5px solid var(--or);
  transition:transform .3s,box-shadow .3s;
}
.etape:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(42,32,19,.16)}
.etape img{width:110px;height:110px;object-fit:contain;margin:0 auto 12px;display:block}
.etape h3{color:var(--vert-fonce);font-size:1.05rem;margin-bottom:8px;font-family:'Kanit',sans-serif;font-weight:700}
.etape p{font-size:.86rem;color:#6b6252;line-height:1.5}
@media (max-width:900px){.etapes-grille{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.etapes-grille{grid-template-columns:1fr}.etape img{width:90px;height:90px}}

/* ============================ RECHERCHE DE MAGASINS ============================ */
.barre-recherche-magasin{position:relative;margin:26px 0 4px}
.barre-recherche-magasin input{
  width:100%;padding:13px 16px 13px 42px;border:2px solid #e8e0cf;border-radius:30px;
  font-family:'Kanit';font-size:1rem;background:#fff;transition:border-color .2s,box-shadow .2s;
}
.barre-recherche-magasin input:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 4px rgba(27,110,60,.12)}
.barre-recherche-magasin .icone-recherche{position:absolute;left:16px;top:23px;font-size:1rem;opacity:.55;pointer-events:none}
.resultats-magasin{
  display:none;position:absolute;top:100%;left:0;right:0;z-index:40;background:#fff;
  border-radius:14px;box-shadow:var(--ombre);margin-top:6px;max-height:340px;overflow-y:auto;
}
.resultats-magasin.ouvert{display:block}
.resultat-magasin{display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;color:var(--encre);border-bottom:1px solid #f1ede0}
.resultat-magasin:last-child{border-bottom:none}
.resultat-magasin:hover{background:var(--creme)}
.resultat-magasin img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0}

.filtres{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 30px}
.ligne-icone{display:flex;align-items:center;gap:8px}
.icone-inline{width:22px;height:22px;object-fit:contain;flex-shrink:0}
.puce{
  border:2px solid var(--vert);background:#fff;color:var(--vert);
  padding:7px 18px;border-radius:999px;cursor:pointer;font-family:'Kanit';font-weight:600;
  transition:all .22s;
      box-shadow: 2px 3px 6px 0px #7c7979;
}
.puce:hover{transform:translateY(-2px);box-shadow:var(--ombre)}
.puce.active{background:var(--vert);color:var(--or-clair);border-color:var(--vert)}

/* ---- Grille des plats ---- */
.grille-plats{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px}
.carte-plat{
  background:#fff;border-radius:var(--rayon);overflow:hidden;cursor:pointer;
  box-shadow:var(--ombre);transition:transform .3s, box-shadow .3s;
  animation:apparait .5s ease both;
  border-bottom:5px solid var(--or);
}
.carte-plat:hover{transform:translateY(-8px) rotate(-.4deg);box-shadow:0 20px 40px rgba(42,32,19,.2)}
.carte-plat img,.carte-plat .sans-photo{width:100%;height:170px;object-fit:cover;display:block}
.sans-photo{background:linear-gradient(135deg,var(--or-pale),var(--or-clair));display:flex;align-items:center;justify-content:center;font-size:3rem}
.sans-photo-logo{background:var(--creme);display:flex;align-items:center;justify-content:center;padding:18%}
.sans-photo-logo img{width:100%;height:100%;object-fit:contain;opacity:.85}
.carte-corps{padding:14px 16px 18px}
.carte-corps h3{font-size:1.08rem;margin-bottom:4px}
.etiquette-pays{
  display:inline-block;background:var(--vert);color:var(--or-clair);
  font-size:.72rem;font-weight:600;padding:2px 10px;border-radius:999px;margin-bottom:8px;
}
.ligne-carte{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.prix{font-weight:700;color:var(--terre);font-size:1.1rem}
.temps{font-size:.82rem;color:#7a6f5c}
.magasin-mini{font-size:.8rem;color:#7a6f5c;margin-top:2px}
.badge-verifie{display:inline-block;background:#e6f4ea;color:#1e7e34;border:1px solid #b7e3c4;border-radius:20px;padding:1px 8px;font-size:.72rem;font-weight:600;vertical-align:middle}

/* ============================ POP-UP / MODALES ============================ */
.popup-fond{
  position:fixed;inset:0;z-index:100;background:rgba(14,74,38,.55);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:apparait .25s;
}
.popup-fond.cache{display:none}
.popup-boite{
  background:var(--creme);border-radius:var(--rayon);max-width:560px;width:100%;
  max-height:88vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.4);
  border-top:8px solid var(--or);
  animation:popEntree .38s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes popEntree{from{opacity:0;transform:scale(.8) translateY(30px)}to{opacity:1;transform:none}}
.popup-entete{padding:18px 22px;background:var(--vert);color:#fff;display:flex;justify-content:space-between;align-items:center}
.popup-corps{padding:22px}
.fermer-popup{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer}

/* Pop-up commande urgente (côté cuisinier) */
.popup-urgent{border-top-color:var(--rouge)}
.popup-urgent .popup-entete{background:var(--rouge);animation:clignote 1s infinite}
@keyframes clignote{50%{background:#e74c3c}}

/* ---- Toasts ---- */
#zone-toasts{position:fixed;top:80px;right:18px;z-index:120;display:flex;flex-direction:column;gap:10px}
.toast{
  background:var(--vert-fonce);color:#fff;padding:14px 18px;border-radius:12px;
  border-left:6px solid var(--or);box-shadow:var(--ombre);max-width:340px;
  animation:toastIn .4s cubic-bezier(.34,1.56,.64,1) both;
}
.toast.or{background:var(--or);color:var(--encre);border-left-color:var(--vert)}
.toast.rouge{background:var(--rouge);border-left-color:#fff}
@keyframes toastIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
.toast.sortie{animation:toastOut .35s both}
@keyframes toastOut{to{opacity:0;transform:translateX(60px)}}

/* ============================ FORMULAIRES ============================ */
.carte-formulaire{
  background:#fff;border-radius:var(--rayon);box-shadow:var(--ombre);
  max-width:520px;margin:20px auto;padding:34px;border-top:8px solid var(--or);
}
.carte-formulaire.large{max-width:680px}
.carte-formulaire h1{color:var(--vert-fonce);margin-bottom:6px}
.sous-titre{color:#7a6f5c;margin-bottom:22px;font-weight:300}
.champ{margin-bottom:16px}
.champ label{display:block;font-weight:600;margin-bottom:5px;font-size:.92rem}
.champ input,.champ textarea,.champ select{
  width:100%;padding:11px 14px;border:2px solid #e8e0cf;border-radius:12px;
  font-family:'Kanit';font-size:.95rem;background:var(--creme);transition:border .2s, box-shadow .2s;
}
.champ input:focus,.champ textarea:focus,.champ select:focus{
  outline:none;border-color:var(--or);box-shadow:0 0 0 4px rgba(232,168,12,.18);
}
.deux-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.msg-erreur{background:#fdecea;color:var(--rouge);padding:10px 14px;border-radius:10px;margin-bottom:14px;display:none}
.msg-succes{background:#e9f7ec;color:var(--vert-fonce);padding:10px 14px;border-radius:10px;margin-bottom:14px;display:none}
.aide{font-size:.8rem;color:#8b8069;margin-top:4px}

/* ============================ TABLEAUX / LISTES ============================ */
.tableau{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre)}
.tableau th{background:var(--vert);color:var(--or-clair);text-align:left;padding:12px 14px;font-family:'Kanit'}
.tableau td{padding:12px 14px;border-bottom:1px solid #f0e9d8;vertical-align:middle}
.tableau tr:hover td{background:var(--or-pale)}

.pastille{display:inline-block;padding:3px 12px;border-radius:999px;font-size:.78rem;font-weight:700}
.pastille.attente{background:#fff3cd;color:#8a6d00}
.pastille.preparation{background:#dbeeff;color:#0b5394}
.pastille.pret{background:#e9f7ec;color:var(--vert-fonce)}
.pastille.livre{background:var(--vert);color:#fff}
.pastille.rejete,.pastille.inactif{background:#fdecea;color:var(--rouge)}
.pastille.approuve{background:var(--or-pale);color:var(--terre)}

/* ============================ PANIER / COMMANDE ============================ */
.etapes{display:flex;gap:8px;margin-bottom:28px}
.etape{
  flex:1;text-align:center;padding:10px;border-radius:12px;background:#fff;
  border:2px dashed #e0d6bf;color:#9c9077;font-weight:600;transition:all .3s;
}
.etape.active{background:var(--vert);color:var(--or-clair);border-style:solid;border-color:var(--vert);transform:scale(1.03)}
.etape.faite{background:var(--or-pale);color:var(--terre);border-color:var(--or)}
.ligne-panier{
  display:flex;gap:14px;align-items:center;background:#fff;border-radius:14px;
  padding:12px;box-shadow:var(--ombre);margin-bottom:12px;animation:apparait .4s both;
}
.ligne-panier img,.ligne-panier .sans-photo{width:74px;height:74px;border-radius:12px;object-fit:cover;font-size:1.8rem;flex:none}
.qte{display:flex;align-items:center;gap:8px}
.qte button{width:30px;height:30px;border-radius:50%;border:2px solid var(--vert);background:#fff;color:var(--vert);font-weight:700;cursor:pointer;transition:all .2s}
.qte button:hover{background:var(--vert);color:#fff}
.total-boite{
  background:linear-gradient(120deg,var(--vert-fonce),var(--vert));color:#fff;
  border-radius:var(--rayon);padding:22px;margin-top:20px;border-bottom:6px solid var(--or);
}
.total-boite .ligne{display:flex;justify-content:space-between;margin-bottom:6px}
.total-final{font-size:1.4rem;font-weight:700;color:var(--or-clair)}

.choix-carte{
  border:3px solid #e8e0cf;border-radius:var(--rayon);padding:18px;cursor:pointer;
  background:#fff;transition:all .25s;position:relative;
}
.choix-carte:hover:not(.indisponible){border-color:var(--or);transform:translateY(-3px)}
.choix-carte.choisi{border-color:var(--vert);background:#f2fbf4;box-shadow:0 0 0 4px rgba(27,110,60,.15)}
.choix-carte.indisponible{opacity:.55;cursor:not-allowed;background:#faf7ef}
.ruban{
  position:absolute;top:12px;right:-8px;background:var(--rouge);color:#fff;
  font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:6px 0 0 6px;
}
.grille-choix{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0}

.interrupteur{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.interrupteur input{display:none}
.glissiere{width:52px;height:28px;border-radius:999px;background:#ddd3bd;position:relative;transition:.3s;flex:none}
.glissiere::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.3s;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.interrupteur input:checked + .glissiere{background:var(--vert)}
.interrupteur input:checked + .glissiere::after{left:27px;background:var(--or-clair)}

/* ============================ ESPACE CUISINIER / ADMIN ============================ */
.entete-espace{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.onglets{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.onglet{padding:10px 22px;border-radius:12px 12px 0 0;background:#efe7d2;border:none;cursor:pointer;font-family:'Kanit';font-weight:600;color:#7a6f5c;transition:.2s}
.onglet.actif{background:var(--vert);color:var(--or-clair)}
.panneau{display:none;animation:apparait .35s both}
.panneau.actif{display:block}
.stat-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:26px}
.stat{background:#fff;border-radius:14px;padding:18px;box-shadow:var(--ombre);border-left:6px solid var(--or)}
.stat b{font-size:1.7rem;color:var(--vert-fonce);display:block;font-family:'Yeseva One'}
.carte-commande{
  background:#fff;border-radius:var(--rayon);box-shadow:var(--ombre);
  padding:18px;margin-bottom:16px;border-left:8px solid var(--or);animation:apparait .4s both;
}
.carte-commande.nouvelle{border-left-color:var(--rouge);animation:vibre .5s 3}
@keyframes vibre{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.carte-commande h3{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.item-cmd{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed #eadfc6;gap:10px;flex-wrap:wrap}

/* QR code */
.boite-qr{background:#fff;border-radius:14px;padding:16px;text-align:center;display:inline-block;box-shadow:var(--ombre);border:3px solid var(--vert)}
.boite-qr img,.boite-qr canvas{display:block;margin:0 auto}
#lecteur-qr{max-width:420px;margin:0 auto;border-radius:14px;overflow:hidden;border:4px solid var(--or)}

/* ============================ PIED ============================ */
.pied{margin-top:60px;background:var(--vert-fonce);color:#cfe8cf;text-align:center;padding:10px}

/* ============================ RESPONSIVE / ACCESSIBILITÉ ============================ */
@media (max-width:760px){
  .nav{flex-wrap:wrap;gap:12px;padding:10px 4vw}
  .logo-img{height:42px}
  .nav-toggle{display:flex}
  .nav-collapse{
    display:none;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    order:5;
    gap:16px;
    padding-top:14px;
    margin-top:4px;
    border-top:1px solid rgba(255,255,255,.25);
  }
  .nav-collapse.ouvert{display:flex}
  .nav-liens{flex-direction:column;gap:16px;width:100%}
  .nav-liens a{padding:6px 2px}
  .nav-actions{flex-direction:column;align-items:stretch;width:100%;gap:10px}
  .nav-actions .btn-langue{align-self:center}
  .nav-actions .btn-panier{align-self:center;font-size:1.6rem}
  .salut{display:block;text-align:center}
  .deux-colonnes,.grille-choix{grid-template-columns:1fr}
}
:focus-visible{outline:3px solid var(--or);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}