/* ═══════════════════════════════════════════════════════════════
   BASE.CSS — Fondations partagées par toutes les pages du site
   Direction : lumineuse, éditoriale, chaleureuse — crème + encre
   foncée + un seul accent orange franc. Référence donnée par le
   client : Etsy (fond quasi-blanc, une seule famille de caractère
   nette, cartes produit sobres, badge de prix en pastille sur la
   photo). Le vert reste, mais seulement pour le sens fonctionnel
   (en stock, succès) — plus la couleur dominante de la marque.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Palette — noms historiques conservés (teal-*) pour ne pas modifier
     tout le CSS existant, mais les valeurs pointent maintenant vers
     l'identité claire+orange plutôt que le vert forêt. */
  --teal-900:#312B24; --teal-800:#FFFFFF; --teal-700:#3D3529; --teal-600:#5C5344; --teal-100:#F3EEE4;
  --gold-700:#B24A0F; --gold-600:#D96A2B; --gold-100:#FCEEE3;
  --clay-600:#E8590C; --clay-700:#C24A09; --clay-100:#FBE4D3;
  --vert-700:#3F7D5C; --vert-100:#E9F2EC; /* succès / en stock uniquement */
  --crimson-600:#C7402F; --crimson-100:#FBE7E2;
  --bg:#FAF8F5; --surface:#FFFFFF; --border:#EAE3D8;
  --ink:#2B2620; --ink-muted:#6B6255; --ink-faint:#948A7A;
  --creme:#F3ECDD;

  /* Échelle — rayons modérés, ombres très douces et diffuses */
  --radius:14px;
  --radius-pill:999px;
  --shadow-card:0 1px 3px rgba(43,38,32,.06);
  --shadow-card-hover:0 18px 38px rgba(43,38,32,.12);
  --ease:cubic-bezier(.22,.9,.32,1);

  /* Typographie — une seule famille nette, comme la référence :
     le caractère vient de la couleur et de la mise en page, pas
     d'une display expressive. */
  --font-display:'Inter',sans-serif;
  --font-voice:'Inter',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'Inter',sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;letter-spacing:-.01em;}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.1;}
em{font-style:normal;font-weight:700;color:var(--clay-600);}
p{margin:0;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
img{display:block;max-width:100%;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.eyebrow{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px;font-weight:600;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

/* ─────────────────────────────────────────────────────────────
   RÉVÉLATION AU DÉFILEMENT — un seul mécanisme partagé, activé
   par js/motion.js (IntersectionObserver). Respecte reduced-motion
   ci-dessus. Non bloquant : sans JS, le contenu reste visible.
   ───────────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal-group.in .reveal-child{opacity:1;transform:none;}
.reveal-child{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.reveal-child:nth-child(1){transition-delay:0s;}
.reveal-child:nth-child(2){transition-delay:.08s;}
.reveal-child:nth-child(3){transition-delay:.16s;}
.reveal-child:nth-child(4){transition-delay:.24s;}
.reveal-child:nth-child(5){transition-delay:.32s;}
.reveal-child:nth-child(6){transition-delay:.4s;}

/* ─────────────────────────────────────────────────────────────
   BARRE SUPÉRIEURE — fine, discrète, gris clair
   ───────────────────────────────────────────────────────────── */
.topbar{background:var(--teal-900);color:#D4D1CA;font-size:12.5px;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:9px 24px;}
.topbar .social{display:flex;gap:16px;font-size:14px;}
.topbar .social a{transition:color .2s;color:#D4D1CA;}
.topbar .social a:hover{color:var(--gold-600);}

/* ─────────────────────────────────────────────────────────────
   EN-TÊTE — blanc, minimal, une simple ligne de séparation
   ───────────────────────────────────────────────────────────── */
header.site{background:var(--teal-800);color:var(--ink);position:sticky;top:0;z-index:15;border-bottom:1px solid var(--border);}
.header-row{display:flex;align-items:center;gap:24px;padding:16px 24px;}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--gold-600),var(--gold-700));color:#1B1305;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:16px;}
.brand-name{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--ink);}
.brand-tag{font-size:10.5px;color:var(--ink-faint);}
.search-bar{flex:1;display:flex;align-items:center;background:var(--teal-100);border:1px solid transparent;border-radius:var(--radius-pill);padding:0 16px;height:42px;max-width:520px;transition:border-color .2s;}
.search-bar:focus-within{border-color:var(--teal-700);}
.search-bar i{color:var(--ink-faint);font-size:15px;}
.search-bar input{flex:1;background:none;border:none;outline:none;color:var(--ink);font-size:14px;padding:0 10px;font-family:inherit;}
.search-bar input::placeholder{color:var(--ink-faint);}
.header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.icon-btn{position:relative;display:flex;align-items:center;gap:7px;background:transparent;border:none;color:var(--ink);padding:9px 14px;border-radius:var(--radius-pill);font-size:13.5px;font-weight:500;transition:background .2s;}
.icon-btn:hover{background:var(--teal-100);}
.cart-badge{position:absolute;top:-2px;right:2px;background:var(--gold-600);color:#1B1305;font-size:10.5px;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

.catbar{background:var(--teal-800);border-bottom:1px solid var(--border);}
.catbar .wrap{display:flex;gap:4px;overflow-x:auto;padding:0 24px;}
.catlink{white-space:nowrap;display:flex;align-items:center;gap:6px;color:var(--ink-muted);font-size:13.5px;font-weight:500;padding:13px 14px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;}
.catlink-img{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.catlink:hover,.catlink.active{color:var(--teal-700);border-color:var(--teal-700);}

/* ─────────────────────────────────────────────────────────────
   PIED DE PAGE — gris très clair, texte sombre, plus de bloc noir
   ───────────────────────────────────────────────────────────── */
footer.site{background:var(--teal-100);color:var(--ink-muted);margin-top:60px;border-top:1px solid var(--border);}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1.1fr;gap:26px;padding:48px 0 28px;}
footer.site h4{color:var(--ink);font-size:13.5px;font-weight:700;margin-bottom:14px;font-family:var(--font-body);}
footer.site .fcol p,footer.site .fcol a{display:block;font-size:12.5px;color:var(--ink-muted);line-height:2.1;transition:color .2s;}
footer.site .fcol a:hover{color:var(--ink);}
.fsocial{display:flex;gap:14px;margin-top:14px;font-size:16px;}
.fsocial a{color:var(--ink-muted);transition:color .2s;}
.fsocial a:hover{color:var(--ink);}
.foot-bottom{border-top:1px solid var(--border);padding:18px 0;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink-faint);flex-wrap:wrap;gap:10px;}
.pay-icons{display:flex;gap:8px;}
.pay-icons span{background:var(--surface);border:1px solid var(--border);padding:4px 10px;border-radius:var(--radius-pill);font-size:11px;color:var(--ink-muted);}

/* ─────────────────────────────────────────────────────────────
   BOUTONS — en pilule, comme Apple
   ───────────────────────────────────────────────────────────── */
.primary-btn{width:100%;background:var(--teal-700);color:#fff;border:none;border-radius:var(--radius-pill);padding:14px;font-size:14.5px;font-weight:600;transition:background .2s,transform .15s;}
.primary-btn:hover{background:var(--teal-600);}
.primary-btn:active{transform:scale(.98);}
.primary-btn:disabled{background:var(--border);color:var(--ink-faint);cursor:not-allowed;}
.ghost-btn{width:100%;background:none;border:1.5px solid var(--border);color:var(--ink);border-radius:var(--radius-pill);padding:13px;font-size:13.5px;font-weight:500;transition:border-color .2s;}
.ghost-btn:hover{border-color:var(--ink);}

/* ─────────────────────────────────────────────────────────────
   ÉTATS PARTAGÉS (chargement / erreur / vide)
   ───────────────────────────────────────────────────────────── */
.state-msg{text-align:center;padding:60px 20px;color:var(--ink-faint);font-size:13.5px;}
.state-msg.error{color:var(--crimson-600);}
.state-msg i{font-size:30px;display:block;margin-bottom:12px;}

/* ── Message de statut riche (confirmation + suivi de commande) ── */
.statut-message{display:flex;align-items:center;gap:16px;padding:20px;border-radius:var(--radius);background:var(--teal-100);margin-bottom:8px;}
.statut-message.annulee{background:var(--crimson-100);}
.statut-icon{width:46px;height:46px;border-radius:50%;background:var(--surface);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;box-shadow:var(--shadow-card);}
.statut-message.annulee .statut-icon{color:var(--crimson-600);}
.statut-titre{font-size:14px;font-weight:700;margin-bottom:3px;}
.statut-texte{font-size:12.5px;color:var(--ink-muted);line-height:1.55;}
.statut-message.anime .statut-icon{animation:statutPulse 1.8s ease-in-out infinite;}
@keyframes statutPulse{
  0%,100%{box-shadow:var(--shadow-card),0 0 0 0 rgba(207,160,67,.35);}
  50%{box-shadow:var(--shadow-card),0 0 0 9px rgba(207,160,67,0);}
}

.annuler-commande-btn{margin-top:14px;border-color:var(--crimson-600);color:var(--crimson-600);display:flex;align-items:center;justify-content:center;gap:6px;}
.annuler-commande-btn:hover{border-color:var(--crimson-600);background:var(--crimson-100);}

/* ── Bandeau "boutique fermée" (panier, confirmation) ── */
.banniere-fermeture{display:flex;align-items:center;gap:14px;background:var(--clay-100);border-radius:14px;padding:16px 20px;margin-bottom:22px;font-size:13px;color:var(--ink);}
.banniere-fermeture i{font-size:20px;color:var(--clay-600);flex-shrink:0;}
.banniere-fermeture b{font-weight:700;}

/* ── Carte du livreur assigné (confiance client — qui livre ma commande) ── */
.livreur-carte{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-top:14px;}
.livreur-carte-photo{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.livreur-carte-photo-vide{background:var(--teal-100);color:var(--ink-faint);display:flex;align-items:center;justify-content:center;font-size:18px;}
.livreur-carte-nom{font-size:13px;font-weight:700;}
.livreur-carte-meta{font-size:11.5px;color:var(--ink-faint);margin-top:2px;}
.livreur-carte-appel{margin-left:auto;width:36px;height:36px;border-radius:50%;background:var(--vert-100);color:var(--vert-700);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}

/* ── QR de livraison + carte de suivi en direct (confirmation, suivi, compte) ── */
.qr-block{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px dashed var(--clay-600);border-radius:var(--radius);padding:16px;margin-top:14px;}
.qr-block img{border-radius:8px;flex-shrink:0;}
.qr-titre{font-size:13px;font-weight:700;margin-bottom:4px;}
.qr-texte{font-size:12px;color:var(--ink-muted);line-height:1.55;}
.livraison-map-wrap{margin-top:14px;}
.livraison-map{height:220px;border-radius:var(--radius);overflow:hidden;background:var(--teal-100);}
.livraison-eta{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink);margin-top:10px;}
.livraison-eta i{color:var(--clay-600);}
.livraison-eta span{color:var(--ink-faint);font-size:12px;}
.livraison-map-legende{font-size:11.5px;color:var(--ink-faint);margin-top:8px;display:flex;align-items:center;gap:6px;}
.map-pin{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;box-shadow:0 3px 10px rgba(0,0,0,.3);}
.map-pin-livreur{background:var(--clay-600);animation:mapPulse 1.8s ease-in-out infinite;}
.map-pin-client{background:var(--teal-700);}
@keyframes mapPulse{0%,100%{box-shadow:0 3px 10px rgba(0,0,0,.3),0 0 0 0 rgba(193,89,46,.4);}50%{box-shadow:0 3px 10px rgba(0,0,0,.3),0 0 0 8px rgba(193,89,46,0);}}

/* Bouton loupe/menu injecté par js/utils.js (initNavMobile) — invisible en
   desktop, seule la version mobile ci-dessous l'active. */
.mobile-nav-toggle{display:none;}

@media (max-width:900px){
  .mobile-nav-toggle{display:flex;}
  .search-bar{display:none;position:absolute;left:0;right:0;top:100%;max-width:none;height:auto;margin:0;padding:12px 24px;border-radius:0;background:var(--surface);border-top:1px solid var(--border);box-shadow:var(--shadow-card-hover);z-index:20;}
  .search-bar.mobile-open{display:flex;}
  .footer-grid{grid-template-columns:1fr 1fr;}

  /* Favoris/Compte/Suivre/Panier en icône+texte tiennent large sur desktop
     mais débordent à 4-5 sur un téléphone (ça pousse toute la page en scroll
     horizontal). Sur mobile, icône seule : gain de place, geste universel. */
  .header-row{flex-wrap:nowrap;}
  .header-actions{gap:2px;}
  .icon-btn{font-size:0;padding:9px 8px;gap:0;}
  .icon-btn i{font-size:19px;}
  .brand-tag{display:none;}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
}

/* Espaces internes (gérant/livreur/propriétaire/partenaire) : le contenu reste
   invisible tant que role-guard.js n'a pas confirmé le rôle du compte connecté —
   évite un flash de contenu protégé avant une redirection éventuelle. */
body.chargement{visibility:hidden}