/* Marché Facile — styles */
:root{
  --vert:#1a5c3f;
  --vert-fonce:#12402c;
  --orange:#e8762b;
  --orange-fonce:#c85f1a;
  --ambre:#f5b942;
  --creme:#faf6ef;
  --blanc:#ffffff;
  --terre:#4a3728;
  --gris:#6b6b6b;
  --gris-clair:#e8e2d6;
  --rouge:#c0392b;
  --ombre:0 2px 12px rgba(0,0,0,.08);
  --rayon:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--creme);color:var(--terre);line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* En-tête */
header{background:var(--vert);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;max-width:1100px;margin:0 auto}
.logo{font-size:1.4rem;font-weight:800;display:flex;align-items:center;gap:8px}
.logo .panier-icone{font-size:1.6rem}
nav.liens{display:flex;gap:20px}
nav.liens a{font-weight:600;opacity:.92}
nav.liens a:hover{opacity:1;text-decoration:underline}
.panier-btn{background:var(--orange);color:#fff;border:none;border-radius:999px;padding:8px 16px;font-weight:700;cursor:pointer;font-size:1rem;display:flex;align-items:center;gap:8px}
.panier-btn:hover{background:var(--orange-fonce)}
#compte-panier{background:#fff;color:var(--orange-fonce);border-radius:999px;min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;padding:0 6px}

/* Hero */
.hero{background:linear-gradient(135deg,var(--vert-fonce) 0%,var(--vert) 55%,#2a7a52 100%);color:#fff;padding:56px 16px;text-align:center}
.hero h1{font-size:2.2rem;margin-bottom:12px;line-height:1.25}
.hero h1 .accent{color:var(--ambre)}
.hero p.sous-titre{font-size:1.15rem;opacity:.94;max-width:640px;margin:0 auto 24px}
.btn{display:inline-block;background:var(--orange);color:#fff;border:none;border-radius:999px;padding:13px 30px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:transform .1s}
.btn:hover{background:var(--orange-fonce);transform:translateY(-1px)}
.btn.secondaire{background:transparent;border:2px solid #fff}
.btn.secondaire:hover{background:rgba(255,255,255,.12)}
.btn.vert{background:var(--vert)}
.btn.vert:hover{background:var(--vert-fonce)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn.bloc{width:100%;text-align:center}

/* Sections */
section{padding:44px 0}
section h2{font-size:1.7rem;color:var(--vert-fonce);margin-bottom:8px;text-align:center}
section .intro{text-align:center;color:var(--gris);max-width:640px;margin:0 auto 28px}

/* Étapes */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.etape{background:var(--blanc);border-radius:var(--rayon);box-shadow:var(--ombre);padding:24px;text-align:center}
.etape .numero{background:var(--ambre);color:var(--vert-fonce);font-weight:800;font-size:1.3rem;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.etape h3{color:var(--vert);margin-bottom:8px;font-size:1.1rem}

/* Produits */
.grille-produits{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.carte{background:var(--blanc);border-radius:var(--rayon);box-shadow:var(--ombre);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s}
.carte:hover{transform:translateY(-3px)}
.carte img{width:100%;height:170px;object-fit:cover;background:var(--gris-clair)}
.carte .corps{padding:14px;display:flex;flex-direction:column;flex:1}
.carte .categorie{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;color:var(--orange-fonce);font-weight:700}
.carte h3{font-size:1.05rem;margin:4px 0;color:var(--terre)}
.carte .detail{font-size:.85rem;color:var(--gris);margin-bottom:8px}
.carte .prix{font-size:1.25rem;font-weight:800;color:var(--vert);margin-top:auto}
.carte .ajouter{margin-top:10px;background:var(--vert);color:#fff;border:none;border-radius:8px;padding:10px;font-weight:700;cursor:pointer;font-size:.95rem}
.carte .ajouter:hover{background:var(--vert-fonce)}

/* Filtres */
.filtres{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.filtres button{border:2px solid var(--vert);background:transparent;color:var(--vert);border-radius:999px;padding:7px 18px;font-weight:600;cursor:pointer}
.filtres button.actif,.filtres button:hover{background:var(--vert);color:#fff}

/* Panier */
.ligne-panier{display:flex;gap:14px;align-items:center;background:var(--blanc);border-radius:var(--rayon);box-shadow:var(--ombre);padding:12px;margin-bottom:12px}
.ligne-panier img{width:72px;height:72px;object-fit:cover;border-radius:8px}
.ligne-panier .info{flex:1}
.ligne-panier .info h4{font-size:1rem}
.ligne-panier .prix{font-weight:800;color:var(--vert)}
.qte{display:flex;align-items:center;gap:8px}
.qte button{width:30px;height:30px;border-radius:50%;border:1px solid var(--gris-clair);background:var(--creme);font-size:1.1rem;cursor:pointer;font-weight:700}
.qte button:hover{background:var(--gris-clair)}
.retirer{background:none;border:none;color:var(--rouge);cursor:pointer;font-size:.85rem;text-decoration:underline}
.total{background:var(--blanc);border-radius:var(--rayon);box-shadow:var(--ombre);padding:20px;margin-top:16px}
.total .ligne{display:flex;justify-content:space-between;margin-bottom:8px}
.total .grand{font-size:1.3rem;font-weight:800;color:var(--vert-fonce);border-top:1px solid var(--gris-clair);padding-top:12px}
.panier-vide{text-align:center;padding:40px 0;color:var(--gris)}

/* Formulaires */
form.commande{background:var(--blanc);border-radius:var(--rayon);box-shadow:var(--ombre);padding:24px;max-width:640px;margin:0 auto}
form.commande h3{color:var(--vert);margin:18px 0 12px}
form.commande h3:first-child{margin-top:0}
.champ{margin-bottom:14px}
.champ label{display:block;font-weight:600;margin-bottom:5px;font-size:.95rem}
.champ input,.champ select,.champ textarea{width:100%;padding:11px 12px;border:1px solid var(--gris-clair);border-radius:8px;font-size:1rem;font-family:inherit}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid var(--ambre);border-color:var(--ambre)}
.champ .aide{font-size:.82rem;color:var(--gris);margin-top:4px}
.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.deux-col{grid-template-columns:1fr}}

/* Récapitulatif */
.recap{background:var(--blanc);border-radius:var(--rayon);box-shadow:var(--ombre);padding:20px;margin-bottom:20px}
.recap h3{color:var(--vert);margin-bottom:12px}
.recap table{width:100%;border-collapse:collapse;font-size:.95rem}
.recap td{padding:6px 0;border-bottom:1px dashed var(--gris-clair)}
.recap td:last-child{text-align:right;font-weight:600}
.recap .total-ligne td{border-bottom:none;font-size:1.15rem;color:var(--vert-fonce);font-weight:800;padding-top:10px}

/* Paiement */
.carte-paiement{background:var(--blanc);border-radius:var(--rayon);box-shadow:var(--ombre);padding:28px;max-width:560px;margin:0 auto;text-align:center}
.carte-paiement .icone{font-size:3rem;margin-bottom:12px}
.alerte{background:#fef6e7;border:1px solid var(--ambre);border-radius:8px;padding:14px;margin:16px 0;font-size:.95rem;text-align:left}
.alerte strong{color:var(--orange-fonce)}
.securise{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--gris);font-size:.85rem;margin-top:14px}

/* Confirmation */
.confirmation{text-align:center;padding:30px 0}
.confirmation .coche{font-size:4rem;margin-bottom:12px}
.ref{background:var(--gris-clair);border-radius:8px;padding:10px 18px;display:inline-block;font-weight:700;margin:12px 0}

/* Pied de page */
footer{background:var(--vert-fonce);color:#fff;margin-top:40px}
footer .container{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;padding:36px 16px}
footer h4{color:var(--ambre);margin-bottom:10px}
footer p,footer li{font-size:.92rem;opacity:.9;list-style:none;margin-bottom:6px}
footer .bas{border-top:1px solid rgba(255,255,255,.15);text-align:center;padding:14px;font-size:.85rem;opacity:.75}

@media(max-width:640px){
  .hero h1{font-size:1.7rem}
  nav.liens{display:none}
}

/* Recherche permanente dans l'en-tête (visible à tout moment, header sticky) */
.recherche-nav{display:flex;align-items:center;background:rgba(255,255,255,.16);border-radius:999px;padding:3px 3px 3px 14px;flex:0 1 260px;margin:0 10px}
.recherche-nav input{flex:1;min-width:0;background:transparent;border:none;color:#fff;font-size:.95rem;padding:7px 4px}
.recherche-nav input::placeholder{color:rgba(255,255,255,.75)}
.recherche-nav input:focus{outline:none}
.recherche-nav button{background:var(--ambre);border:none;border-radius:999px;padding:7px 14px;font-weight:700;cursor:pointer;color:#12402c;white-space:nowrap}
.recherche-nav button:hover{background:#fff}
@media(max-width:640px){
  .nav{flex-wrap:wrap}
  .recherche-nav{flex:1 1 100%;order:3;margin:8px 0 0}
}

/* Emblème Marché Facile */
.logo-img{height:40px;width:40px;border-radius:50%;object-fit:cover;background:#fff}

/* Suivi de livraison */
.carte-suivi{background:var(--blanc);border-radius:var(--rayon);box-shadow:var(--ombre);padding:22px;margin-bottom:18px}
.badge-statut{display:inline-block;padding:6px 16px;border-radius:999px;font-weight:700;font-size:.9rem;color:#fff;background:var(--gris)}
.badge-statut.enregistree{background:#8a8a8a}
.badge-statut.en_preparation{background:var(--ambre);color:#12402c}
.badge-statut.en_transit{background:#2b7de8}
.badge-statut.en_cours_livraison{background:var(--orange)}
.badge-statut.livree{background:var(--vert)}
.badge-statut.echec{background:var(--rouge)}
.timeline{list-style:none;margin:16px 0 0;padding:0}
.timeline li{position:relative;padding:0 0 18px 30px;border-left:3px solid var(--gris-clair);margin-left:8px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-9px;top:2px;width:15px;height:15px;border-radius:50%;background:var(--gris-clair);border:2px solid #fff;box-shadow:0 0 0 2px var(--gris-clair)}
.timeline li.fait{border-color:var(--vert)}
.timeline li.fait::before{background:var(--vert);box-shadow:0 0 0 2px var(--vert)}
.timeline li.actuel::before{background:var(--orange);box-shadow:0 0 0 2px var(--orange)}
.timeline .t-date{font-size:.8rem;color:var(--gris)}
.timeline .t-statut{font-weight:700;color:var(--vert-fonce)}
.timeline .t-comment{font-size:.9rem;color:var(--gris)}
.form-suivi{max-width:560px;margin:0 auto}
.form-suivi .champ{margin-bottom:14px}
.form-suivi label{display:block;font-weight:700;margin-bottom:6px}
.form-suivi input{width:100%;padding:12px;border:2px solid var(--gris-clair);border-radius:10px;font-size:1rem}
.form-suivi input:focus{outline:none;border-color:var(--vert)}
.alerte-erreur{background:#fdecea;color:var(--rouge);border:1px solid var(--rouge);border-radius:10px;padding:12px 16px;margin-bottom:16px}
.alerte-succes{background:#e6f4ec;color:var(--vert-fonce);border:1px solid var(--vert);border-radius:10px;padding:12px 16px;margin-bottom:16px}
.btn-livreur{display:block;width:100%;padding:16px;font-size:1.1rem;margin-bottom:12px}
.preuve-img{max-width:100%;border-radius:10px;box-shadow:var(--ombre);margin:8px 0}
#pad-signature{border:2px dashed var(--vert);border-radius:10px;background:#fff;touch-action:none;width:100%;max-width:480px;height:200px}
.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.deux-col{grid-template-columns:1fr}}

/* --- Menu connexion (icône 👤 dans l'en-tête) --- */
.menu-connexion{position:relative}
.btn-connexion{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:8px 14px;font-weight:700;font-size:.95rem;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap}
.btn-connexion:hover{background:rgba(255,255,255,.25)}
.menu-deroulant{position:absolute;right:0;top:calc(100% + 8px);background:var(--blanc);color:var(--terre);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);min-width:230px;overflow:hidden;z-index:100}
.menu-deroulant .menu-titre{padding:10px 16px;font-weight:700;color:var(--vert-fonce);border-bottom:1px solid var(--gris-clair);font-size:.9rem}
.menu-deroulant a{display:block;padding:11px 16px;font-size:.95rem}
.menu-deroulant a:hover{background:var(--creme);color:var(--vert-fonce)}

/* --- Bandeau de consentement cookies --- */
.bandeau-cookies{position:fixed;left:0;right:0;bottom:0;z-index:200;background:#fffdf8;border-top:3px solid var(--vert);box-shadow:0 -4px 24px rgba(0,0,0,.15);padding:18px 16px}
.bandeau-cookies .bc-contenu{max-width:1100px;margin:0 auto}
.bandeau-cookies h3{color:var(--vert-fonce);margin-bottom:6px;font-size:1.05rem}
.bandeau-cookies p{font-size:.9rem;color:var(--gris);margin-bottom:12px}
.bandeau-cookies p a{color:var(--vert);text-decoration:underline}
.bc-boutons{display:flex;gap:10px;flex-wrap:wrap}
.bc-boutons .btn{padding:10px 22px;font-size:.95rem}
.btn-contour{background:#fff;color:var(--vert);border:2px solid var(--vert)}
.btn-contour:hover{background:#eef5f0}
.bc-personnaliser{margin-top:12px;border-top:1px solid var(--gris-clair);padding-top:12px}
.bc-categorie{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;font-size:.9rem}
.bc-categorie input{margin-top:4px}
.bc-categorie .bc-desc{color:var(--gris);font-size:.85rem}
@media(max-width:640px){.bc-boutons .btn{flex:1;text-align:center}}

/* --- CAPTCHA anti-robot --- */
.captcha-bloc{margin:18px 0}
.captcha-ligne{display:flex;align-items:center;gap:12px;margin:8px 0}
.captcha-img{border:1px solid var(--gris-clair);border-radius:8px;background:#fff;display:block}
.btn-captcha-regen{background:var(--vert);color:#fff;border:none;border-radius:50%;width:44px;height:44px;font-size:1.4rem;cursor:pointer;line-height:1;flex-shrink:0}
.btn-captcha-regen:hover{background:var(--vert-fonce)}
.captcha-input{max-width:220px;text-transform:uppercase;letter-spacing:.15em;font-weight:700}

/* ==================== Thème sombre ==================== */
[data-theme="dark"]{
  --vert:#46b07e;
  --vert-fonce:#0f1512;
  --orange:#f2913f;
  --orange-fonce:#f7ab63;
  --ambre:#f6c76c;
  --creme:#141118;
  --blanc:#211c2b;
  --terre:#ece7f6;
  --gris:#b0a6c2;
  --gris-clair:#37304a;
  --rouge:#e0705f;
  --ombre:0 2px 12px rgba(0,0,0,.4);
}
/* Transition douce entre les thèmes */
body{transition:background-color .3s ease,color .3s ease}
.carte,.etape,.total,.recap,.carte-paiement,.ligne-panier,.carte-suivi,form.commande,.faq details,.temoignage,.pack-carte,.pack-detail,.chemin-carte,.menu-deroulant,.bandeau-cookies{transition:background-color .3s ease,border-color .3s ease}
/* En-tête et hero : restent sombres avec bon contraste */
[data-theme="dark"] header{background:#16241d}
[data-theme="dark"] .hero{background:linear-gradient(135deg,#0f1512 0%,#16241d 55%,#1e3328 100%)}
[data-theme="dark"] footer{background:#0c0a10}
/* Titres et textes qui utilisaient le vert très foncé */
[data-theme="dark"] section h2{color:var(--ambre)}
[data-theme="dark"] .timeline .t-statut{color:var(--terre)}
[data-theme="dark"] .recap .total-ligne td{color:var(--ambre)}
[data-theme="dark"] .total .grand{color:var(--ambre)}
[data-theme="dark"] .menu-deroulant .menu-titre{color:var(--terre)}
[data-theme="dark"] .etape .numero{color:#141118}
/* Alertes et messages */
[data-theme="dark"] .alerte{background:#2a2415;border-color:var(--ambre);color:var(--terre)}
[data-theme="dark"] .alerte-erreur{background:#3a1d1d;color:#f2a49a;border-color:#a04a3f}
[data-theme="dark"] .alerte-succes{background:#16281e;color:#8fd6a8;border-color:#2c6b45}
[data-theme="dark"] .msg-ok{background:#16281e;color:#8fd6a8;border-color:#2c6b45}
[data-theme="dark"] .msg-erreur{background:#3a1d1d;color:#f2a49a;border-color:#a04a3f}
[data-theme="dark"] .bandeau-cookies{background:#211c2b;border-top-color:var(--vert)}
[data-theme="dark"] .bandeau-cookies p,[data-theme="dark"] .bandeau-cookies .bc-desc{color:var(--gris)}
[data-theme="dark"] .btn-contour{background:transparent;color:var(--vert)}
[data-theme="dark"] .btn-contour:hover{background:rgba(70,176,126,.15)}
[data-theme="dark"] .recherche-nav button{color:#141118}
/* Formulaires */
[data-theme="dark"] .champ input,[data-theme="dark"] .champ select,[data-theme="dark"] .champ textarea{background:#2a2438;color:var(--terre);border-color:var(--gris-clair)}
[data-theme="dark"] .form-suivi input{background:#2a2438;color:var(--terre)}
[data-theme="dark"] .qte button{background:var(--gris-clair);border-color:var(--gris-clair);color:var(--terre)}
[data-theme="dark"] .qte button:hover{background:#443b58}
[data-theme="dark"] .captcha-input{background:#2a2438;color:var(--terre)}
/* Pavé de signature et CAPTCHA : fond blanc conservé pour la lisibilité du tracé */
[data-theme="dark"] #pad-signature,[data-theme="dark"] .captcha-img{background:#fff}
/* Bouton de bascule du thème */
.btn-theme{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;width:42px;height:42px;font-size:1.25rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;padding:0}
.btn-theme:hover{background:rgba(255,255,255,.25)}
/* Sélecteur de langue FR/EN */
.selecteur-langue{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:4px;text-decoration:none;color:#fff;font-weight:700;font-size:.85rem}
.selecteur-langue:hover{background:rgba(255,255,255,.25);color:#fff}
.selecteur-langue [data-lang-btn]{background:transparent;border:none;color:#fff;font-weight:700;font-size:.85rem;padding:4px 10px;border-radius:999px;cursor:pointer;opacity:.65}
.selecteur-langue [data-lang-btn].actif,.selecteur-langue [data-lang-btn][aria-pressed="true"]{background:#fff;color:#12402c;opacity:1}
/* Contraste des boutons colorés en thème sombre : texte foncé */
[data-theme="dark"] .btn:not(.secondaire){color:#141118}
[data-theme="dark"] .panier-btn{color:#141118}
[data-theme="dark"] .btn.vert{color:#141118}
[data-theme="dark"] .btn-captcha-regen{color:#141118}
[data-theme="dark"] .badge-statut.en_preparation{color:#141118}

/* --- Sélecteur de devise (multi-devises) --- */
#selecteur-devise{display:inline-flex;align-items:center}
.selecteur-devise select{background:var(--blanc);color:var(--terre);border:2px solid var(--vert);border-radius:999px;padding:6px 10px;font-weight:700;font-size:.9rem;cursor:pointer}
.selecteur-devise select:focus{outline:3px solid #f5b942}
[data-theme="dark"] .selecteur-devise select{background:#241d2e;color:#f3ecdf;border-color:var(--vert)}

/* ==================== Accueil style Amazon : header 2 lignes ==================== */
.barre-principale{display:flex;align-items:center;gap:14px;max-width:1100px;margin:0 auto;padding:10px 16px;flex-wrap:wrap}
.barre-principale .logo{flex-shrink:0}
.barre-principale .recherche-dominante{flex:1 1 320px;margin:0;max-width:640px}
.barre-principale .recherche-dominante input{font-size:1.05rem;padding:11px 6px}
.barre-principale .recherche-dominante button{padding:11px 22px;font-size:1.05rem}
.outils{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.bouton-menu{display:none;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:10px;font-size:1.4rem;width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}
.bouton-menu:hover{background:rgba(255,255,255,.25)}
.barre-secondaire{background:var(--vert-fonce);border-top:1px solid rgba(255,255,255,.14)}
.liens-secondaires{max-width:1100px;margin:0 auto;padding:0 16px;display:flex;gap:2px;overflow-x:auto}
.liens-secondaires a{color:#fff;font-weight:600;font-size:.95rem;padding:10px 14px;white-space:nowrap;opacity:.92}
.liens-secondaires a:hover{background:rgba(255,255,255,.12);opacity:1;text-decoration:none}
[data-theme="dark"] .barre-secondaire{background:#0c1410}

/* Bandeau promo sobre sous l'en-tête */
.bandeau-promo{background:var(--ambre);color:#3a2c14;text-align:center;font-weight:700;font-size:.95rem;padding:9px 16px}
[data-theme="dark"] .bandeau-promo{background:#2a2415;color:var(--ambre)}

/* Hero allégé */
.hero-slim{padding:40px 16px}
.hero-slim p.sous-titre{margin-bottom:0}

/* Tuiles catégories */
.tuiles-categories{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.tuile-cat{background:var(--blanc);border-radius:var(--rayon);box-shadow:var(--ombre);overflow:hidden;text-align:center;transition:transform .15s;display:block}
.tuile-cat:hover{transform:translateY(-3px)}
.tuile-cat img{width:100%;height:110px;object-fit:cover;background:var(--gris-clair)}
.tuile-cat span{display:block;padding:10px 8px;font-weight:700;color:var(--vert-fonce);font-size:.9rem}
[data-theme="dark"] .tuile-cat span{color:var(--terre)}

/* Badge "Populaire" sobre sur les meilleures ventes (aucun faux rabais) */
.carte.carte-badge{position:relative}
.badge-populaire{position:absolute;top:10px;left:10px;z-index:2;background:var(--orange);color:#fff;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:5px 12px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.22)}

/* Responsive : recherche sous le logo, hamburger pour la navigation */
@media(max-width:860px){
  .bouton-menu{display:inline-flex;margin-left:auto}
  .barre-principale .recherche-dominante{flex:1 1 100%;order:3;max-width:none}
  .outils{order:4;flex:1 1 100%;margin-left:0;justify-content:flex-start;flex-wrap:wrap;row-gap:8px}
  .barre-secondaire{display:none}
  .barre-secondaire.ouvert{display:block}
  .liens-secondaires{flex-direction:column;align-items:stretch;padding:6px 16px 12px;overflow-x:visible}
  .liens-secondaires a{padding:12px 8px;border-bottom:1px solid rgba(255,255,255,.08)}
}


/* ============================================================
   DESIGN V3 — structure marketplace, palette ivoirienne
   (repris de la maquette validée, composants réels branchés)
   ============================================================ */
/* ============================================================
   MAQUETTE Marché Facile — structure et composants « Amazon »,
   couleurs du thème ivoirien Marché Facile (précision de Florent,
   14 oct. 2026, 23 h 17 : structure Amazon, couleurs ivoiriennes).
   ============================================================ */
:root{
  --entete:#00663F;        /* vert ivoirien soutenu (déclinaison foncée du #007A4D) — barre du haut */
  --sousnav:#0B3D2A;       /* vert plus foncé que l'en-tête — sous-navigation et pied */
  --bandeau:#0B3D2A;       /* bandeau « Livrer à » mobile */
  --legal:#06231A;         /* bande légale du pied, vert le plus foncé */
  --vert:#007A4D;          /* vert ivoirien principal — Commander, liens, succès */
  --dore:#F5B942;          /* doré — étoiles et accents seulement */
  --orange:#FF8200;        /* orange MF — Ajouter au panier, loupe, compteur */
  --orange-survol:#E67300;
  --orange-bord:#CC6A00;
  --promo:#B3402A;         /* terracotta — prix promo et offres */
  --lien:#007A4D;          /* liens et nombres d'avis */
  --texte:#0F1111;
  --secondaire:#565959;
  --fond:#FAF6EF;          /* blanc cassé chaud / ivoire */
  --sep:#D5D9D9;
  --succes:#007A4D;
  --blanc:#FFFFFF;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;color:var(--texte);background:var(--fond);font-size:14px;line-height:1.4}
a{color:var(--lien);text-decoration:none}
a:hover{text-decoration:underline;color:#005C3A}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}


/* ---------- En-tête ---------- */
header.entete{background:var(--entete);color:#fff;position:sticky;top:0;z-index:50}
.entete-ligne{display:flex;align-items:stretch;gap:4px;padding:6px 12px;max-width:1500px;margin:0 auto}
.entete .bloc{border:1px solid transparent;border-radius:3px;padding:6px 8px;color:#fff;display:flex;flex-direction:column;justify-content:center}
.entete .bloc:hover{border-color:#fff;text-decoration:none;color:#fff}
.logo{font-size:19.5px;font-weight:700;white-space:nowrap;line-height:1.05}
@media (max-width:1180px){ .logo small{display:none} }
.logo .mf-vert{color:#7BD88F}
.logo .mf-dore{color:var(--dore)}
.logo small{font-size:11px;font-weight:400;color:#D8E8DC}
.livrer-a .mini{font-size:12px;color:#D8E8DC;margin-left:17px}
.livrer-a .fort{font-size:14px;font-weight:700}
.livrer-a .fort::before{content:"📍";margin-left:-17px;margin-right:3px;font-size:13px}
.recherche{flex:1;display:flex;align-items:center;padding:4px 2px;min-width:200px}
.recherche form{display:flex;width:100%;height:42px;border-radius:5px;overflow:hidden;background:#fff}
.recherche form:focus-within{box-shadow:0 0 0 3px var(--orange)}
.recherche select{border:none;background:#F3F3F3;color:#333;font-size:12.5px;padding:0 6px;max-width:150px;border-right:1px solid #CDCDCD;outline:none}
.recherche input{flex:1;border:none;padding:0 12px;font-size:15px;outline:none;min-width:60px}
.recherche button{border:none;background:var(--orange);color:#fff;width:48px;font-size:19px}
.recherche button:hover{background:var(--orange-survol)}
.compte .mini,.commandes .mini{font-size:12px;color:#D8E8DC}
.compte .fort,.commandes .fort{font-size:14px;font-weight:700}
.panier-bloc{position:relative;align-items:center;text-align:center}
.panier-icone{font-size:27px;line-height:1}
.panier-compteur{position:absolute;top:0;left:50%;transform:translateX(-50%);color:var(--orange);font-weight:700;font-size:16.5px;text-shadow:0 0 3px rgba(0,0,0,.45)}
.panier-bloc .fort{font-size:13px;font-weight:700}

/* ---------- Sous-navigation ---------- */
nav.sousnav{background:var(--sousnav);color:#fff}
.sousnav ul{display:flex;flex-wrap:nowrap;overflow-x:auto;list-style:none;max-width:1500px;margin:0 auto;padding:0 8px;scrollbar-width:thin}
.sousnav li{white-space:nowrap}
.sousnav a{color:#fff;display:block;padding:8px 10px;font-size:14px;border:1px solid transparent;border-radius:3px}
.sousnav a:hover{border-color:#fff;text-decoration:none;color:#fff}
.sousnav a.toutes{font-weight:700}
.sousnav a.offres{color:var(--dore);font-weight:700;margin-left:auto}

/* ---------- Bandeau Livrer à (mobile) ---------- */
.bandeau-livrer{display:none;background:var(--bandeau);color:#fff;padding:8px 14px;font-size:13.5px}

/* ---------- Héros ---------- */
.hero{position:relative;max-width:1500px;margin:0 auto;overflow:hidden}
.hero-piste{display:flex;transition:transform .55s ease}
.hero-slide{min-width:100%;height:300px;position:relative;background-size:cover;background-position:center}
.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,39,27,.78) 0%,rgba(7,39,27,.35) 55%,rgba(7,39,27,0) 100%)}
.hero-texte{position:absolute;z-index:2;left:5%;top:50%;transform:translateY(-50%);color:#fff;max-width:520px}
.hero-texte h2{font-size:30px;line-height:1.15;margin-bottom:10px}
.hero-texte p{font-size:15.5px;margin-bottom:14px;color:#EAF4EC}
.hero-texte .cta{display:inline-block;background:var(--orange);color:#fff;font-weight:700;padding:10px 20px;border-radius:100px;font-size:14.5px}
.hero-texte .cta:hover{background:var(--orange-survol);text-decoration:none;color:#fff}
.hero-nav{position:absolute;top:38%;z-index:3;background:rgba(255,255,255,.92);border:1px solid var(--sep);width:42px;height:88px;font-size:22px;color:#333}
.hero-nav.prev{left:10px;border-radius:4px}.hero-nav.next{right:10px;border-radius:4px}
.hero-fondu{height:120px;background:linear-gradient(180deg,rgba(250,246,239,0) 0%,var(--fond) 100%);margin-top:-120px;position:relative;z-index:1;pointer-events:none}

/* ---------- Cartes blanches en chevauchement ---------- */
.cartes-chevauchement{max-width:1500px;margin:-58px auto 0;position:relative;z-index:4;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:0 18px}
.carte-blanche{background:#fff;padding:18px;border-radius:4px;box-shadow:0 1px 3px rgba(15,17,17,.12)}
.carte-blanche h3{font-size:19px;margin-bottom:12px}
.carte-blanche img{height:250px;width:100%;object-fit:cover;border-radius:3px;margin-bottom:10px}
.carte-blanche .lien-suite{font-size:13px}
.grille-rayons-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.grille-rayons-mini a{color:var(--texte)}
.grille-rayons-mini img{height:104px;margin-bottom:4px}
.grille-rayons-mini span{font-size:12.5px}

/* ---------- Sections et carrousels ---------- */
section.bloc-produits{max-width:1500px;margin:22px auto 0;background:#fff;padding:18px;border-radius:4px;box-shadow:0 1px 3px rgba(15,17,17,.08)}
section.bloc-produits h2{font-size:20px;margin-bottom:4px}
section.bloc-produits .sous-titre{color:var(--secondaire);font-size:13px;margin-bottom:12px}
.carrousel{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 12px;scrollbar-width:thin}
.carrousel .carte-produit{min-width:196px;max-width:196px}

/* ---------- Carte produit ---------- */
.carte-produit{background:#fff;border-radius:4px;padding:10px;display:flex;flex-direction:column}
.bloc-produits .carte-produit,.grille .carte-produit{border:1px solid #E7E4DC}
.carte-produit .img-wrap{background:#fff;height:190px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.carte-produit .img-wrap img{max-height:190px;object-fit:contain}
.carte-produit h3{font-size:14.5px;font-weight:400;line-height:1.35;height:2.7em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.carte-produit h3 a{color:var(--texte)}
.badge{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 7px;border-radius:3px;margin:5px 0 2px;color:#fff}
.badge-fraicheur{background:var(--succes)}
.badge-promo{background:var(--promo)}
.ligne-fraicheur{font-size:12px;color:var(--succes);font-weight:700;margin-top:2px}

/* Étoiles */
.etoiles{display:inline-flex;align-items:center;gap:6px;margin:3px 0}
.etoiles .coquille{position:relative;display:inline-block;font-size:16px;line-height:1;color:#D9C08A;letter-spacing:1px}
.etoiles .remplissage{position:absolute;left:0;top:0;overflow:hidden;color:var(--dore);white-space:nowrap;text-shadow:0 0 1px #B97F0E}
.etoiles .nb-avis{font-size:13px}

/* Prix façon Amazon : symbole et centimes en petit/exposant */
.prix{color:var(--texte);white-space:nowrap}
.prix .sym{font-size:13px;vertical-align:top;position:relative;top:5px}
.prix .ent{font-size:23px;font-weight:500}
.prix .cent{font-size:13px;vertical-align:top;position:relative;top:5px}
.prix .par{font-size:12.5px;color:var(--secondaire);font-weight:400}
.prix-barre{color:var(--secondaire);font-size:12.5px}
.prix-barre s{color:var(--secondaire)}
.economie{color:var(--promo);font-size:12.5px;font-weight:700}
.livraison{font-size:13px;color:var(--texte);margin-top:3px}
.livraison .date{font-weight:700}
.btn-ajouter{margin-top:auto;background:var(--orange);border:1px solid var(--orange-bord);border-radius:100px;padding:8px 12px;font-size:13.5px;width:100%;color:#3D2700;font-weight:700}
.btn-ajouter:hover{background:var(--orange-survol);color:#fff}
.btn-ajouter.ok{background:var(--succes);color:#fff;border-color:var(--succes)}

/* ---------- Catalogue ---------- */
.page-catalogue{max-width:1500px;margin:16px auto;display:flex;gap:18px;padding:0 14px;align-items:flex-start}
aside.filtres{width:230px;flex-shrink:0;background:#fff;border-radius:4px;padding:16px;box-shadow:0 1px 3px rgba(15,17,17,.08);position:sticky;top:120px}
aside.filtres h3{font-size:16px;margin-bottom:10px}
aside.filtres label{display:block;font-size:13.5px;padding:4px 0;cursor:pointer}
aside.filtres select{width:100%;padding:7px;margin:6px 0 12px;border:1px solid #A6A6A6;border-radius:4px;background:#F3F3F3}
.resultats{flex:1;background:#fff;border-radius:4px;padding:16px;box-shadow:0 1px 3px rgba(15,17,17,.08)}
.resultats .entete-res{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--sep);padding-bottom:10px;margin-bottom:14px}
.resultats h1{font-size:20px}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.aucun{padding:34px;text-align:center;color:var(--secondaire)}

/* ---------- Fiche produit ---------- */
.page-produit{max-width:1500px;margin:16px auto;background:#fff;border-radius:4px;padding:20px;box-shadow:0 1px 3px rgba(15,17,17,.08)}
.fil-ariane{font-size:13px;color:var(--secondaire);margin-bottom:14px}
.fiche{display:grid;grid-template-columns:400px 1fr 250px;gap:26px}
.galerie .vignettes{display:flex;gap:8px;margin-top:10px}
.galerie .vignettes img{width:64px;height:64px;object-fit:cover;border:1px solid var(--sep);border-radius:4px;cursor:pointer}
.galerie .vignettes img.actif{border:2px solid var(--orange);box-shadow:0 0 4px rgba(255,130,0,.6)}
.galerie .principale{border:1px solid #EFEDE8;border-radius:4px;height:400px;display:flex;align-items:center;justify-content:center}
.galerie .principale img{max-height:392px;object-fit:contain}
.details h1{font-size:23px;font-weight:500;line-height:1.3}
.details .marque{font-size:13.5px;margin:5px 0}
.details hr{border:none;border-top:1px solid var(--sep);margin:12px 0}
.details .prix{margin:6px 0}
.details .prix .ent{font-size:29px}
.details ul{margin:8px 0 8px 18px;font-size:14px}
.details ul li{margin-bottom:5px}
.variantes{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.variante{border:1px solid #A6A6A6;border-radius:6px;padding:8px 12px;background:#fff;font-size:13.5px;text-align:left}
.variante.sel{border:2px solid var(--orange);background:#FFF4E5;box-shadow:0 0 4px rgba(255,130,0,.5)}
.variante .vp{font-weight:700;display:block}
.buybox{border:1px solid var(--sep);border-radius:8px;padding:16px;height:fit-content}
.buybox .prix .ent{font-size:27px}
.buybox .stock{color:var(--succes);font-size:16.5px;margin:8px 0 2px}
.buybox .detail-ligne{font-size:13px;color:var(--secondaire);margin:5px 0}
.buybox .detail-ligne b{color:var(--texte)}
.buybox select{width:100%;padding:7px;border-radius:6px;border:1px solid #A6A6A6;background:#F3F3F3;margin:10px 0}
.btn-commander{background:var(--vert);border:1px solid #005C3A;border-radius:100px;padding:9px 12px;font-size:13.5px;width:100%;color:#fff;font-weight:700;margin-top:8px}
.btn-commander:hover{background:#00663F}
.buybox .btn-ajouter{margin-top:0}
.garantie{font-size:12.5px;color:var(--secondaire);margin-top:12px;border-top:1px solid var(--sep);padding-top:10px}

/* ---------- Pied de page (3 bandes) ---------- */
.retour-haut{display:block;background:var(--vert);color:#fff;text-align:center;padding:15px;font-size:13.5px;margin-top:30px}
.retour-haut:hover{background:var(--sousnav);color:#fff;text-decoration:none}
footer{background:var(--sousnav);color:#D8E8DC}
footer .colonnes{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:36px 18px}
footer h4{color:#fff;font-size:15.5px;margin-bottom:10px}
footer li{list-style:none;margin-bottom:7px;font-size:13.5px}
footer a{color:#D8E8DC}
footer a:hover{color:#fff}
footer .legal{background:var(--legal);text-align:center;padding:20px 12px;font-size:12.5px;color:#BFD8C6}
footer .legal .logo{font-size:18px;color:#fff;margin-bottom:6px;display:block}

/* ---------- Barre d'onglets mobile ---------- */
.onglets-bas{display:none}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .fiche{grid-template-columns:1fr 1fr}
  .buybox{grid-column:1/-1}
  .cartes-chevauchement{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .entete-ligne{flex-wrap:wrap}
  .recherche{order:3;flex-basis:100%}
  .entete .livrer-a,.entete .commandes{display:none}
  .bandeau-livrer{display:block}
  .hero-slide{height:255px}
  .hero-nav{display:none}
  .hero-texte{top:42%}
  .hero-texte h2{font-size:21px}
  .hero-texte p{font-size:13.5px}
  .cartes-chevauchement{grid-template-columns:1fr 1fr;margin-top:-16px;padding:0 10px;gap:10px}
  .carte-blanche img{height:150px}
  .page-catalogue{flex-direction:column}
  aside.filtres{width:100%;position:static}
  .grille{grid-template-columns:1fr 1fr;gap:10px}
  .carrousel .carte-produit{min-width:160px;max-width:160px}
  .fiche{grid-template-columns:1fr}
  .galerie .principale{height:300px}
  footer .colonnes{grid-template-columns:1fr 1fr}
  .onglets-bas{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--entete);color:#fff;z-index:60;justify-content:space-around;padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
  .onglets-bas a{color:#fff;font-size:12px;text-align:center;position:relative}
  .onglets-bas .pastille{position:absolute;top:-4px;right:8px;background:var(--orange);color:#fff;border-radius:50%;min-width:18px;height:18px;font-size:11.5px;font-weight:700;line-height:18px}
  body{padding-bottom:52px}
}

/* ============================================================
   V3 — adaptations pour la boutique réelle (fonctions conservées :
   i18n, devises, thème, menu compte, formulaires, espaces PHP).
   La palette officielle remplace les anciennes teintes du site.
   ============================================================ */
:root{--vert:#007A4D;--vert-fonce:#00663F;--orange:#FF8200;--orange-fonce:#E67300;--ambre:#F5B942;--creme:#FAF6EF}
section.bloc-produits{padding:18px}
.carrousel .carte-produit{border:1px solid #E7E4DC}
.entete .btn-connexion-v3{background:none;border:none;color:#fff;text-align:left;cursor:pointer;display:flex;flex-direction:column;justify-content:center;padding:0;font:inherit;width:100%}
.entete .menu-connexion{position:relative}
.entete .utilitaires{flex-direction:row;align-items:center;gap:10px}
.entete #selecteur-devise select{padding:4px 6px;border-radius:6px;border:1px solid #CDCDCD;font-size:12.5px;max-width:110px}
.pagination{display:flex;gap:8px;justify-content:center;align-items:center;margin:28px 0;flex-wrap:wrap}
.pagination button{border:2px solid var(--vert);background:#fff;color:var(--vert);border-radius:8px;padding:8px 14px;font-weight:700;cursor:pointer;font-family:inherit}
.pagination button.actif,.pagination button:hover:not(:disabled){background:var(--vert);color:#fff}
.pagination button:disabled{opacity:.4;cursor:default}
.pagination .info{color:#565959;font-size:.95rem}
.filtres input[type=search]{width:100%;padding:8px;border:1px solid #A6A6A6;border-radius:4px;margin:6px 0 12px;font-size:14px}

/* V3 — garde-fou thème sombre : les cartes blanches du nouveau design
   gardent un texte foncé lisible même quand le thème sombre est actif. */
[data-theme="dark"] .carte-produit,[data-theme="dark"] .carte-blanche,
[data-theme="dark"] .pack-carte,[data-theme="dark"] .resultats,
[data-theme="dark"] aside.filtres,[data-theme="dark"] .page-produit{color:#0F1111}
[data-theme="dark"] .pack-carte h3,[data-theme="dark"] .carte-blanche h3{color:#0F1111}
section.bloc-produits h2{text-align:left}
section.bloc-produits .sous-titre{text-align:left}
/* V3 — le héros carrousel ne doit pas hériter du fond/padding de l'ancien .hero */
.hero{background:none;padding:0}

/* ============================================================
   Correctif en-tête mobile — 15/10/2026 (retour de Florent) :
   le nom du site sur UNE seule ligne, en-tête compact pour
   laisser l'écran aux articles. Bureau : aucun changement
   (tout est cantonné à la fenêtre ≤ 760 px).
   Avant : en-tête mobile ≈ 290 px. Objectif : ≈ moitié.
   Disposition mobile en grille, deux rangées :
     rangée 1 : logo (1 ligne) | compte | panier
     rangée 2 : recherche (large) | utilitaires réduits
   ============================================================ */
@media (max-width:760px){
  .entete-ligne{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"logo compte panier" "rech rech util";align-items:center;gap:3px 6px;padding:4px 8px}
  .entete .bloc{padding:3px 5px}
  /* Logo : ses enfants s'empilaient (flex en colonne) — on le passe
     en rangée, sur une seule ligne, couleurs inchangées. */
  .entete .logo{grid-area:logo;flex-direction:row;align-items:baseline;gap:4px;font-size:15px;line-height:1.1;white-space:nowrap;padding:4px 5px}
  .entete .logo small{display:none}
  /* Compte : libellé court sur une ligne (la ligne « Bonjour… » est masquée) */
  .entete .compte{grid-area:compte}
  .entete .compte .mini{display:none}
  .entete .compte .fort{font-size:12px;white-space:nowrap}
  .entete .btn-connexion-v3{flex-direction:row;align-items:center;width:auto}
  /* Panier : icône, pastille compteur et libellé côte à côte */
  .entete .panier-bloc{grid-area:panier;flex-direction:row;align-items:center;gap:4px}
  .panier-icone{font-size:20px}
  .panier-compteur{position:static;transform:none}
  .entete #compte-panier{min-width:20px;height:20px;font-size:.78rem;padding:0 4px}
  .panier-bloc .fort{font-size:12px}
  /* Recherche : rangée 2, hauteur réduite */
  .recherche{grid-area:rech;min-width:0;padding:2px 0}
  .recherche form{height:34px}
  .recherche select{max-width:84px;font-size:12px}
  .recherche input{font-size:14px;padding:0 8px;min-width:40px}
  .recherche button{width:42px;font-size:17px}
  /* Utilitaires réduits : devise (si présente), FR/EN, thème — rangée 2 */
  .entete .utilitaires{grid-area:util;flex-direction:row;align-items:center;gap:5px;padding:2px 0}
  .entete #selecteur-devise select{max-width:64px;font-size:11px;padding:2px 3px}
  .selecteur-langue{padding:2px;font-size:.78rem}
  .selecteur-langue [data-lang-btn]{padding:2px 7px;font-size:.78rem}
  .btn-theme{width:29px;height:29px;font-size:.95rem}
  /* Nav des rayons : une ligne fine en défilement horizontal */
  .sousnav a{padding:5px 8px;font-size:13px}
  /* « Livrer à » : ligne fine juste au-dessus du contenu */
  .bandeau-livrer{padding:4px 12px;font-size:12.5px}
  /* Barre du bas : une seule ligne, hauteur minimale */
  .onglets-bas{padding:5px 0 calc(5px + env(safe-area-inset-bottom))}
  body{padding-bottom:47px}
}
/* Très petits écrans : on resserre encore la rangée principale
   pour que logo + compte + panier tiennent sur la même ligne. */
@media (max-width:400px){
  .entete .logo{font-size:14px}
  .entete .compte .fort{font-size:11.5px}
}

/* 2026-11-02 — Mobile : le logo devient l'icône seule (variante A, choix de Florent).
   Le nom reste affiché sur ordinateur ; sur téléphone, l'icône ronde suffit
   et la ligne d'en-tête respire (compte et panier ne sont plus tassés). */
@media (max-width:760px){
  .entete .logo{font-size:0}
  .entete .logo .logo-img{width:40px;height:40px}
}