/* ======================================================================
   Hadeej'Art — Feuille de styles
   ====================================================================== */

:root{
  --bg:#f6d7c4;
  --paper:#fff7f1;
  --brand:#d47a2c;
  --brand-700:#9e5317;
  --ink:#2b1e12;
  --terracotta:#C1440E;
  --safran:#F2B90C;
  --emerald:#146356;
  --noir:#1A1A1A;

  /* ====== Échelle de z-index (du plus bas au plus haut) ======
     Documentée ici pour éviter toute superposition accidentelle :
     contenu (auto) < header collant < menu Boutique/Collections/Infos <
     panier < menu mobile plein écran < modales (fiche détail, client) <
     visionneuse plein écran (ouverte depuis la fiche détail, doit donc
     toujours passer au-dessus). */
  --z-header: 60;
  --z-dropdown: 70;
  --z-panel: 80;
  --z-mobile-menu: 200;
  --z-modal: 300;
  --z-lightbox: 400;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--font-body)}
body{
  font-family: var(--font-body);
  background-image:
    radial-gradient(circle at 12px 12px, rgba(0,0,0,.05) 2px, transparent 3px),
    linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0,0,0,.03) 1px, transparent 1px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g opacity='0.06' stroke='%232b1e12' stroke-width='1.5' fill='none'><path d='M0 60h120M60 0v120'/><path d='M15 15l15 15-15 15-15-15zM90 90l15 15-15 15-15-15z'/><circle cx='30' cy='90' r='6'/><circle cx='90' cy='30' r='6'/></g></svg>");
  background-size: 24px 24px, 60px 60px, 60px 60px, 120px 120px;
}
img{max-width:100%;height:auto;display:block}
.container{
  max-width:1100px;margin:0 auto;
  padding:20px max(16px, env(safe-area-inset-right)) 20px max(16px, env(safe-area-inset-left));
}

/* ====== HEADER ======
   Deux états, franchement différents plutôt qu'un simple changement
   d'opacité : au repos, le header se fond dans le hero (grand, aéré,
   quasi transparent) ; dès le premier défilement, il se contracte en
   bandeau premium opaque avec sa propre lisière tissée en pied — comme un
   ourlet — et l'identité (logo, titre) se resserre avec lui. */
.header{
  display:flex;align-items:center;justify-content:space-between;gap:18px;position:sticky;top:0;
  background:linear-gradient(180deg,rgba(255,244,230,.72),rgba(246,215,196,.35));backdrop-filter:blur(2px);
  /* Au repos : un pointillé de couture sous le header, comme un ourlet
     piqué à la main — il devient lisière tissée une fois le bandeau contracté. */
  border-bottom:1.5px dashed rgba(122,75,33,.35);
  z-index:var(--z-header);
  padding-block:20px;
  /* Réserve l'encoche/île dynamique en haut : le header colle au tout
     haut de l'écran dès le défilement, y compris sous cette zone. */
  padding-top:calc(20px + env(safe-area-inset-top));
  transition:background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease,
             border-color .35s ease, padding .3s cubic-bezier(.22,.9,.32,1);
}
/* Trame de tissu discrète, visible seulement au repos (le bandeau
   contracté, lui, est uni et lisible avant tout). */
.header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(181,67,42,.07) 0 2px,transparent 2px 10px),
             repeating-linear-gradient(-45deg,rgba(232,163,23,.08) 0 2px,transparent 2px 10px);
  transition:opacity .3s ease;
}
.header.scrolled::before{ opacity:0; }
.header::after{
  /* Lisière tissée en pied de header, façon ourlet — n'apparaît qu'une
     fois le bandeau contracté, pour marquer nettement la transition. */
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px;
  background:repeating-linear-gradient(90deg,var(--brand-700) 0 14px,var(--brand) 14px 28px,#f1b37f 28px 42px);
  opacity:0; transition:opacity .3s ease;
  pointer-events:none;
}
.header.scrolled{
  background:rgba(250,232,213,.96);backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 12px 28px rgba(80,40,10,.24);
  border-bottom-color:transparent;
  padding-block:8px;
  padding-top:calc(8px + env(safe-area-inset-top));
}
.header.scrolled::after{ opacity:.9; }
/* La marque est un vrai lien vers l'accueil (fonctionne sans JavaScript). */
.brand{display:flex;align-items:center;gap:14px;color:inherit;text-decoration:none;border-radius:16px;min-width:44px;min-height:44px}
.brand:focus-visible{ outline:3px solid #ffcf9c; outline-offset:4px; }
.brand-text{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.brand .badge{ white-space:nowrap; max-width:100%; text-overflow:ellipsis; }
/* Entre 861 et 1100 px, nav + sélecteurs + panier occupent la barre : l'accroche
   cède la place plutôt que de passer sur plusieurs lignes et gonfler le header. */
@media (min-width:861px) and (max-width:1100px){ .brand .badge{ display:none; } }
.brand-name{ display:block; line-height:1.05; }
.brand .mark{
  width:58px;height:58px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 0 0 3px rgba(232,163,23,.55), 0 6px 14px rgba(80,40,10,.25);overflow:hidden;position:relative;flex:0 0 auto;
  transition:width .3s cubic-bezier(.22,.9,.32,1), height .3s cubic-bezier(.22,.9,.32,1), box-shadow .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.brand:hover .mark{ transform:rotate(-6deg) scale(1.05); }
.header.scrolled .brand .mark{ width:38px; height:38px; box-shadow:0 0 0 2px rgba(232,163,23,.5), 0 3px 8px rgba(80,40,10,.2); }
.brand .mark::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,var(--brand-700),var(--safran),var(--terracotta),var(--brand-700));
  opacity:.18;mix-blend-mode:multiply;pointer-events:none;
}
.brand .mark img{width:100%;height:100%;object-fit:cover;border-radius:50%;position:relative;z-index:1}
.brand-name{margin:0;font:800 30px var(--font-body);transition:font-size .3s cubic-bezier(.22,.9,.32,1);}
.header.scrolled .brand-name{ font-size:20px; }
.brand-name,
.hero h2{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .5px;
  text-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.badge{
  /* 80px, pas une valeur ajustée à 1-2 lignes : sur les largeurs moyennes
     (861-1024px), nav + pastilles langue/devise + panier compressent le
     bloc marque au point que l'accroche peut passer sur 3 lignes — une
     limite trop juste coupait alors le texte au repos, pas seulement au
     scroll (seul moment où elle doit vraiment disparaître, via la règle
     .scrolled ci-dessous). */
  font:600 12px var(--font-body);opacity:.75; position:relative; display:inline-block; padding-bottom:3px;
  max-height:80px; overflow:hidden; transition:max-height .3s ease, opacity .3s ease, margin .3s ease;
}
/* Petit fil discret sous l'accroche, comme une couture — s'efface quand
   le header se resserre, pour ne garder que l'essentiel. */
.badge::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:28px;
  background-image:repeating-linear-gradient(90deg,var(--brand-700) 0 3px,transparent 3px 6px);
  opacity:.6;
}
.header.scrolled .badge{ max-height:0; opacity:0; margin:0; }

.action{display:inline-flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;background-image:linear-gradient(180deg,var(--brand),var(--brand-700));color:#fff;padding:10px 16px;font-weight:800;box-shadow:0 8px 18px rgba(0,0,0,.18);cursor:pointer;text-decoration:none;transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;}
.btn:hover{ transform: translateY(-1px); box-shadow:0 14px 24px rgba(0,0,0,.22); filter: saturate(1.05); }
.btn span.bubble{display:inline-grid;place-items:center;background:#fff;color:var(--brand-700);min-width:20px;height:20px;border-radius:999px;font:800 12px var(--font-body);padding:0 5px}
.btn.ghost{background:#fff;color:var(--emerald);box-shadow:0 1px 2px rgba(0,0,0,.08);border:1px solid #0001}
.btn.ghost:hover{ background:#fff; color:#0F4F46; border-color:#0002; box-shadow:0 4px 12px rgba(0,0,0,.12); }

/* ====== HERO ====== */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;margin:18px 0 28px}
@media(max-width:860px){.hero{grid-template-columns:1fr;}}
.hero-card{background:var(--paper);border-radius:20px;padding:22px 24px;box-shadow:0 18px 36px rgba(0,0,0,.18)}

.hero-frame{
  position:relative;
  background:#f4cdb7;
  border:1px solid #0001;
  box-shadow:0 18px 46px rgba(0,0,0,.18),0 0 0 6px rgba(212,122,44,.08) inset;
  min-height:320px;
  display:grid;
  place-items:center;
  padding:0;
}
.hero-frame .logo-hero{
  display:block;margin:0 auto;
  width: min(78%, 420px);
  height: auto; object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.hero-inline{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.logo-inline{width:66px;height:52px;border-radius:12px;border:2px solid var(--brand-700);background:#fff;overflow:hidden}
.logo-inline img{width:100%;height:100%;object-fit:cover}
.hero h2{margin:0;font:800 42px/1.08 var(--font-display);color:var(--brand-700);letter-spacing:.5px}
@media(max-width:520px){.hero h2{font-size:34px}}
@media(max-width:380px){.hero h2{font-size:28px}}
.hero-sub{margin:.6rem 0 .2rem;color:#3a2a1c}
.note{font-size:13px;opacity:.7;margin-top:.4rem}
.ribbon{height:10px;border-radius:8px;margin-bottom:12px;background:repeating-linear-gradient(90deg,var(--brand-700) 0 14px,var(--brand) 14px 28px,#f1b37f 28px 42px);opacity:.9}
.beads{margin:12px 0 6px;height:10px;background:radial-gradient(var(--brand-700) 1.6px,transparent 2.8px) 0 0/18px 10px repeat-x;opacity:.85}
.cta-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem}
.cta-hero{display:inline-flex}
.cta-hero-2{display:inline-flex}
.cta-hint{margin:0; color:#7a624f; font-size:.95rem; line-height:1.3; white-space:normal;}
@media (max-width:720px){
  .cta-row{flex-direction:column; align-items:flex-start; gap:.6rem;}
  .cta-hint{font-size:.9rem;}
}

/* CTA collant mobile */
.mobile-sticky-cta{display:none}
@media(max-width:760px){
  .mobile-sticky-cta{
    position:sticky;bottom:12px;display:flex;justify-content:center;margin-top:8px;z-index:45
  }
  .mobile-sticky-cta .btn{box-shadow:0 10px 22px rgba(0,0,0,.25)}
}

/* ====== Bandes motifs africains ====== */
.motif-bar{
  height: 22px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #0001;
  box-shadow: 0 8px 18px rgba(0,0,0,.15) inset, 0 6px 16px rgba(0,0,0,.12);
  background: #f4cdb7;
  position: relative;
}
.motif-bar::before{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(90deg,var(--brand-700) 0 16px,var(--brand) 16px 32px,#f1b37f 32px 48px);
  animation: slidePattern 12s linear infinite;
}
/* Bande de motif : uniquement le fil de couleurs qui défile (les chevrons ont été retirés). */
.motif-top{ margin: 10px 0 18px; }
.motif-bottom{ margin: 26px 0 12px; }
@keyframes slidePattern { from{ background-position:0 0, 0 0 } to{ background-position:120px 0, 120px 0 } }

/* ====== CATALOGUE ====== */
.section-title{display:flex;align-items:center;gap:10px;margin:6px 0 14px;color:var(--noir);text-transform:uppercase;letter-spacing:.6px}
.section-title:before{content:"";width:62px;height:10px;border-radius:6px;background:repeating-linear-gradient(90deg,var(--safran) 0 12px, var(--brand) 12px 24px);opacity:.7}

/* Filtres de catégories */
.category-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.chip{
  border:1.5px solid #e6d7c8;background:#fff6ee;color:#5a3b25;
  font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;cursor:pointer;
  transition:transform .08s ease, background .15s, border-color .15s, box-shadow .15s;
}
.chip:hover{ transform:translateY(-1px); background:#ffeede; }
.chip.active{ background:var(--brand-700); color:#fff; border-color:var(--brand-700); box-shadow:0 6px 18px rgba(196,109,32,.25); }

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1020px){.grid{grid-template-columns:repeat(3,1fr)}}
/* En dessous de 760px, la grille reste impérativement à 2 colonnes (y
   compris sur les très petits téléphones, ex: 320px) : voir les
   ajustements de densité de carte plus bas plutôt qu'un repli à 1 colonne. */
@media(max-width:760px){.grid{grid-template-columns:repeat(2,1fr); gap:10px;}}
@media(max-width:400px){.grid{gap:8px}}
.card{background:#fff;border:1px solid #0001;border-radius:16px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.12);position:relative;transition: transform .18s ease, box-shadow .2s ease; display:flex; flex-direction:column;}
.card:hover{ transform: translateY(-4px); box-shadow:0 16px 30px rgba(0,0,0,.18); }
.card:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(90deg,var(--brand-700) 0 12px,var(--brand) 12px 24px);opacity:.45}
.card img{display:block;width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;background:#f4cdb7;transition: transform .35s ease;}
.card:hover img{ transform: scale(1.03); }
.card .cap{padding:12px 14px 14px; display:flex; flex-direction:column; flex:1;}
.card h3,
#dName {
  margin:2px 0 2px;font:800 18px var(--font-body);
  font-family: var(--font-display);
  letter-spacing: .3px;
}
.card h3{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.price {
  font:800 16px var(--font-body);margin:4px 0 10px;
  letter-spacing: .2px;
  font-weight:700;
}
.row{display:flex;gap:10px;flex-wrap:wrap; margin-top:auto;}
.btn.sm{padding:8px 12px;border-radius:12px;font-weight:700}
.btn.icon{gap:6px}

/* ====== Densité réduite des cartes sur mobile (grille 2 colonnes) ====== */
@media(max-width:760px){
  .card .cap{padding:9px 10px 11px}
  .card h3{font-size:15px; line-height:1.25; margin:0 0 3px;}
  .price{font-size:14px; margin:2px 0 8px;}
  .card .row{flex-direction:column; gap:6px;}
  .card .row .btn{width:100%; justify-content:center; padding:9px 8px; font-size:12.5px; white-space:nowrap;}
}
@media(max-width:360px){
  .card h3{font-size:14px}
  .price{font-size:13px}
}

/* ====== MODALS ======
   position:fixed + overflow-y:auto sur .modal (plutôt que sur .sheet ou
   sa seule .body) : si la fiche est plus haute que l'écran (beaucoup de
   champs + clavier virtuel ouvert), c'est la modale entière qui défile,
   jamais coupée en haut — le bouton fermer reste donc toujours atteignable
   par un simple scroll, et au-dessus du header du site grâce au z-index. */
.modal{
  position:fixed;inset:0;background:rgba(43,30,18,.5);
  display:flex;align-items:flex-start;justify-content:center;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  z-index:var(--z-modal);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility 0s linear .22s;
}
.modal.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s ease}
@media(min-height:640px){ .modal{ padding-top:max(48px, env(safe-area-inset-top)); } }
.sheet{background:#fff;border-radius:18px;max-width:860px;width:100%;margin:auto;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.sheet header{
  display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;background:#fff7f1;border-bottom:1px solid #0001;
  position:sticky;top:0;z-index:2; /* toujours visible : le bouton fermer ne se fait jamais scroller hors champ */
}
.sheet header .btn.ghost{ flex:0 0 auto; }
.sheet .body{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px}
@media(max-width:780px){.sheet .body{grid-template-columns:1fr}}
.sheet .media{position:relative;background:#00000008;border-radius:14px;padding:8px;margin-bottom:12px}
.sheet .media img{width:100%;height:auto;max-height:70vh;object-fit:contain;display:block;border-radius:10px}
@media (max-width: 820px){ .sheet .body{ max-height: 82vh; overflow:auto; } .sheet .media img{ max-height: 40vh !important; } }
@media (max-width: 480px){ .sheet .media img{ max-height: 35vh !important; } }
.sheet .media .img-expand{
  position: absolute; right: 12px; top: 12px;
  min-width:40px; min-height:40px;
  background: rgba(255,255,255,.9); border: 0; border-radius: 10px; padding: 8px;
  cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.sheet .media .img-expand:hover{ background:#fff; }
.sheet .media .img-expand:focus-visible{ outline:3px solid #ffcf9c; outline-offset:2px; }
.sheet .media .img-expand svg{ width: 18px; height: 18px; stroke:#5b3b1f; fill:none; }
.sheet .media img#dImg{ cursor:zoom-in; }

/* --- Galerie de vignettes (fiche détail) --- */
.thumbs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.thumbs .thumb{
  width:56px; height:56px; padding:0; border-radius:10px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; background:#f4cdb7; flex:0 0 auto;
  transition:border-color .15s, transform .1s ease;
}
.thumbs .thumb img{ width:100%; height:100%; object-fit:cover; }
.thumbs .thumb:hover{ transform:translateY(-2px); }
.thumbs .thumb:focus-visible{ outline:3px solid #ffcf9c; outline-offset:1px; }
.thumbs .thumb.active{ border-color:var(--brand-700); box-shadow:0 4px 10px rgba(0,0,0,.15); }

/* --- Étiquettes catégorie/collection + disponibilité (fiche détail) --- */
.detail-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 10px; }
.tag{
  display:inline-flex; align-items:center; font:700 12px var(--font-body); padding:5px 11px; border-radius:999px;
  background:#fff1e4; color:var(--brand-700); border:1px solid #f0d9bd;
}
.tag-collection{ background:#eaf3ef; color:var(--emerald); border-color:#cfe6dc; }
.detail-availability{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; font:600 13px var(--font-body); color:#4a6b52; margin:0 0 14px;
}
.detail-availability .avail-dot{ width:9px; height:9px; border-radius:50%; background:#2AA06A; flex:0 0 auto; box-shadow:0 0 0 3px rgba(42,160,106,.18); }
.detail-availability .sep-dot{ opacity:.4; }

.field{margin:10px 0}
.field label{display:block;font-weight:800;margin-bottom:6px;font-size:13px;letter-spacing:.3px;color:#5a3b25}
/* Champs texte + listes déroulantes natives : même habillage "tissu" que
   les pastilles langue/devise et les chips (fond crème, liseré brandé),
   pour que TOUTE liste déroulante du site (taille, sexe, variantes, pays,
   ville, quartier, tissu, couleur...) partage une seule identité visuelle
   forte plutôt que le style de formulaire générique du navigateur. */
.input,select,textarea{
  width:100%;border:1.5px solid #e6d7c8;border-radius:12px;padding:10px 12px;
  font:600 14px var(--font-body);color:var(--ink);background:#fff9f4;
  box-shadow:0 1px 0 rgba(0,0,0,.03) inset;
  transition:border-color .15s ease, box-shadow .2s ease, background-color .15s ease, transform .08s ease;
}
.input:hover,select:hover,textarea:hover{ border-color:var(--brand); background:#fffdfb; }
.input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--brand-700); background:#fff;
  box-shadow:0 0 0 4px rgba(212,122,44,.2), 0 8px 18px rgba(0,0,0,.08);
}
/* Zones tactiles confortables (>=44px) sur les champs de formulaire
   uniquement — pas sur les pastilles compactes langue/devise du header,
   qui doivent rester fines. */
.field select, .field .input, .field textarea{ min-height:44px; }
.field .epic-select{ display:block; width:100%; }
/* Flèche brandée cohérente sur TOUTES les listes déroulantes natives du
   site (taille, sexe, variantes...), pas seulement les pastilles
   langue/devise — comportement 100% natif (clavier, tactile, lecteurs
   d'écran) conservé, seul l'habillage change. La flèche change de teinte
   et s'anime légèrement au survol/focus pour rester vivante. */
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="%239e5317" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  padding-right:38px; cursor:pointer; font-weight:700;
  transition:border-color .15s, box-shadow .15s, transform .08s ease, background-color .15s ease;
}
select:hover{ border-color:var(--brand); }
/* :not(.select-pill) : les pastilles langue/devise gèrent leur propre
   flèche (taille/position différentes) plus bas — éviter que cette règle,
   plus spécifique qu'une simple classe à cause du pseudo-état, ne l'écrase. */
select:not(.select-pill):hover{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="%23d47a2c" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
select:not(.select-pill):focus{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 15l-6-6-6 6" stroke="%239e5317" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
select:active{ transform:translateY(1px); }
/* Champs à suggestions libres (pays, ville, quartier, tissu, couleur) :
   même famille visuelle que les selects, avec la même flèche brandée (qui
   s'inverse quand le panneau est ouvert) — texte libre toujours possible,
   voir .epic-autocomplete dans ui.js pour le panneau. */
.epic-autocomplete{ position:relative; display:block; width:100%; }
.field .epic-autocomplete{ display:block; width:100%; }
.epic-autocomplete input{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="%239e5317" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  padding-right:38px; transition:border-color .15s ease, box-shadow .2s ease, background-color .15s ease, background-image .1s ease;
}
.epic-autocomplete input:hover{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="%23d47a2c" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.epic-autocomplete input:focus, .epic-autocomplete input[aria-expanded="true"]{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 15l-6-6-6 6" stroke="%239e5317" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
/* Une seule flèche, à droite : les règles :hover/:focus de .input utilisent le
   raccourci « background », qui remet répétition et taille par défaut et
   faisait répéter la flèche sur toute la largeur du champ. */
.epic-autocomplete input,
.epic-autocomplete input:hover,
.epic-autocomplete input:focus,
.epic-autocomplete input[aria-expanded="true"]{
  background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:16px 16px !important;
}

/* Lightbox plein écran (au-dessus de tout, y compris la modale fiche
   détail : elle peut s'ouvrir depuis celle-ci). */
.lightbox{
  position: fixed; inset: 0; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; z-index: var(--z-lightbox);
  padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  visibility:hidden; opacity:0; pointer-events:none; transition:opacity 0s linear .18s,visibility 0s linear .18s;
}
.lightbox.show{ visibility:visible; opacity:1; pointer-events:auto; transition:opacity .18s ease; }
.lightbox img{max-width: 95vw; max-height: 92vh; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.55); cursor:zoom-out;}
.lightbox .close{
  position: fixed; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right));
  min-width:44px; min-height:44px; padding:10px 16px; font-weight:800;
  background: rgba(255,255,255,.92); border:0; border-radius: 12px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.lightbox .close:hover{ background:#fff; }
.lightbox .close:focus-visible{ outline:3px solid #ffcf9c; outline-offset:2px; }

/* ====== PANIER ====== */
.cart{display:inline-flex}
.line{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin:6px 0;gap:8px}
.small{font-size:12px;opacity:.75}
.sep{height:1px;background:#0001;margin:10px 0}

.trash{ background: transparent; border: 0; padding: 6px; border-radius: 8px; cursor: pointer; min-width:36px; min-height:36px; display:grid; place-items:center; }
.trash:hover{ background: #0000000d; }
.trash:focus-visible{ outline:3px solid #ffcf9c; outline-offset:1px; }
.trash svg{ width: 18px; height: 18px; stroke: #B43D2A; fill: none; }

/* ====== FACTURE (canvas hors écran) ====== */
#inv{display:none}

/* ====== Fiche client ====== */
#client .sheet{
  border: 1px solid #0001;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  background:
    radial-gradient(1200px 400px at -10% -20%, rgba(244,205,183,.35), transparent 60%),
    radial-gradient(900px 300px at 120% 120%, rgba(212,122,44,.15), transparent 60%),
    #ffffff;
}
#client .sheet header b{ font-family: var(--font-display); font-size: 26px; letter-spacing: .5px; color: var(--brand-700); }
#client .sheet .body{ background: #fff7f1; border-radius: 14px; margin: 14px; padding: 16px; box-shadow: inset 0 0 0 1px #00000008; }
#client .field label{ color: #2b1e12; font-weight: 800; font-size: 13px; letter-spacing: .2px; }
#client .input, #client select, #client textarea{
  border: 1px solid var(--brand); background-color: #fff; border-radius: 12px;
  padding: 12px 14px; font-weight: 600; transition: border .2s, box-shadow .2s, background .2s;
}
#client .input:focus, #client select:focus, #client textarea:focus{
  border-color: var(--brand-700); box-shadow: 0 0 0 3px rgba(212,122,44,.22); background: #fffefd; outline:none;
}
#client label.checkbox{ display:flex; align-items:center; gap:8px; font-weight:600; cursor:pointer; }
#client #cRemember{ accent-color: var(--brand-700); width:auto; }

#client .sheet .body .btn{
  width:100%; justify-content:center; border-radius: 14px; padding: 14px 18px; font-size: 16px;
  background-image: linear-gradient(135deg,var(--brand),var(--brand-700));
  box-shadow: 0 12px 22px rgba(0,0,0,.18);
}

@media (max-width: 780px){
  #client .sheet .body{ grid-template-columns: 1fr !important; margin: 10px; padding: 14px; }
}
@media (max-width: 420px){
  #client .sheet header b{ font-size: 24px; }
  #client .sheet .body .btn{ padding: 12px 16px; font-size: 15px; }
}

/* Moyens de paiement */
.pay-grid{ display:flex; gap:.6rem; flex-wrap:wrap; }
.pay-card{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; border-radius:999px;
  border:1.5px solid #e6d7c8; background:#fff6ee;
  color:#5a3b25; font-weight:600; line-height:1;
  box-shadow:0 1px 0 rgba(0,0,0,.03) inset; cursor:pointer;
  transition:transform .08s ease, background .15s, border-color .15s, box-shadow .15s;
}
.pay-card img{ width:18px; height:18px; display:block; }
.pay-card:hover{ transform:translateY(-1px); background:#ffeede; }
.pay-card:focus-visible{ outline:3px solid #ffcf9c; outline-offset:2px; }
.pay-card[aria-pressed="true"]{
  background:#c46d20; color:#fff; border-color:#b45f15;
  box-shadow:0 6px 18px rgba(196,109,32,.25);
}
@media (max-width:480px){ .pay-card{ padding:.5rem .8rem; font-weight:700; } }

/* ====== Responsive / mobile ====== */
@media (max-width: 820px){
  /* Un seul élément (body) reçoit overflow-x:hidden : le mettre aussi sur
     html créerait deux contextes de défilement imbriqués et casserait le
     header "sticky" (bug constaté sur mobile). */
  body { overflow-x: hidden; max-width: 100%; touch-action: pan-y; overscroll-behavior-x: none; }
  .hero, .grid { max-width: 100%; }
  img, video, canvas, svg { max-width: 100%; }

  .cart .btn{ width:46px; height:46px; padding:0; border-radius:14px; position:relative; display:grid; place-items:center; }
  .cart .btn span:first-child{ display:none; }
  .cart .btn::before{
    content:'';
    width:22px; height:22px;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 6h15l-2 9H8L6 6z"/><circle cx="9" cy="20" r="1.8"/><circle cx="17" cy="20" r="1.8"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 6h15l-2 9H8L6 6z"/><circle cx="9" cy="20" r="1.8"/><circle cx="17" cy="20" r="1.8"/></svg>') no-repeat center / contain;
  }
  .cart .btn span.bubble{ position:absolute; right:-6px; top:-6px; min-width:20px; height:20px; font-size:12px; padding:0 6px; }
}

/* ====== Sélecteurs langue / devise ====== */
.select-pill{
  width:auto; min-width:76px; flex:0 0 auto;
  border:1.5px solid #e6d7c8; background:#fff6ee; color:#5a3b25;
  font-weight:700; font-size:13px; padding:8px 26px 8px 12px; border-radius:999px; cursor:pointer;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="%235a3b25" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat; background-position:right 8px center; background-size:14px;
  transition:transform .08s ease, background-color .15s, border-color .15s, box-shadow .15s;
}
.select-pill:hover{ background-color:#ffeede; border-color:var(--brand); transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.1); }
.select-pill:focus-visible{ outline:3px solid #ffcf9c; outline-offset:2px; border-color:var(--brand-700); }
.select-pill:active{ transform:translateY(0) scale(.97); }

/* ====== Listes déroulantes "épiques" (langue / devise) ======
   Le rendu OUVERT d'un <select> natif (liste système grise, surlignage
   bleu du navigateur) n'est pas stylable en CSS, quel que soit l'habillage
   donné à l'état fermé. On remplace donc ce popup par un vrai bouton +
   liste ARIA (role="listbox"), dans le même langage visuel que le menu
   Boutique/Collections/Infos (liseré tissé, lisière qui se déploie,
   coche pour l'option active). Le <select> d'origine reste cependant dans
   le DOM : valeur, événement "change" et logique JS existante (setLang,
   setCurrency...) ne changent pas d'un octet. */
.epic-select{ position:relative; display:inline-flex; }
.epic-select-native{ display:none; }
.epic-select-trigger{
  display:inline-flex; align-items:center; justify-content:space-between; gap:6px;
  font-family:var(--font-body); cursor:pointer;
  /* Look "champ de formulaire" par défaut (taille, sexe, variantes dans la
     fiche détail) — .select-pill ci-dessous prend le dessus pour les
     pastilles langue/devise du header et du menu mobile. */
  width:100%; border:1.5px solid #e6d7c8; border-radius:12px; padding:10px 12px;
  font-weight:600; font-size:14px; color:var(--ink); background:#fff9f4; min-height:44px;
  box-shadow:0 1px 0 rgba(0,0,0,.03) inset;
  transition:border-color .15s ease, box-shadow .2s ease, background-color .15s ease;
}
.epic-select-trigger:hover{ border-color:var(--brand); background:#fffdfb; transform:translateY(-1px); box-shadow:0 6px 14px rgba(43,30,18,.08); }
.epic-select.open .epic-select-trigger, .epic-select-trigger:focus-visible{
  outline:none; border-color:var(--brand-700); background:#fff; transform:none;
  box-shadow:0 0 0 4px rgba(212,122,44,.2), 0 10px 22px rgba(43,30,18,.12);
}
.epic-select-trigger.select-pill{
  /* min-height 44px : c'est ce bouton, et non plus le <select> natif, qui
     reçoit désormais le clic/toucher — la pastille doit donc respecter la
     même zone tactile que le panier/hamburger du header, même si elle
     reste visuellement fine (voir .select-pill:hover/:focus-visible). */
  width:auto; min-height:44px; box-shadow:none; background-image:none; padding:8px 10px 8px 12px;
}
.epic-select-trigger.select-pill:hover{ box-shadow:0 6px 14px rgba(0,0,0,.1); }
.epic-select.open .epic-select-trigger.select-pill{ box-shadow:none; outline:3px solid #ffcf9c; outline-offset:2px; }
.epic-select-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.epic-select-trigger .chev{
  width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.4; flex:0 0 auto;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);
}
.epic-select-trigger:hover .chev{ transform:translateY(1px); }
.epic-select.open .epic-select-trigger .chev{ transform:rotate(180deg); }
.epic-select.open .epic-select-trigger:hover .chev{ transform:rotate(180deg); }
/* Portail : la liste est déplacée en fin de <body> et positionnée en
   "fixed" (coordonnées calculées en JS depuis le bouton) plutôt qu'en
   absolute sous son déclencheur — indispensable pour qu'elle ne soit
   jamais rognée par l'overflow:hidden de la fiche détail/modale client.
   z-index au niveau de la visionneuse plein écran : une liste ouverte
   doit toujours dominer, y compris par-dessus une modale. */
.epic-select-list{
  position:fixed; z-index:var(--z-lightbox);
  max-height:280px; overflow-y:auto; overflow-x:hidden;
  background:
    radial-gradient(120% 60px at 50% 0%, rgba(212,122,44,.07), transparent 70%),
    linear-gradient(180deg, #fffefc, #fff9f2);
  border:1px solid #f0d9bd; border-radius:18px; padding:12px 8px 8px;
  box-shadow:0 24px 48px -12px rgba(43,30,18,.35), 0 2px 6px rgba(43,30,18,.08), 0 0 0 1px rgba(255,255,255,.6) inset;
  opacity:0; visibility:hidden; transform:translateY(-10px) scale(.96); pointer-events:none;
  transition:opacity .2s ease, transform .22s cubic-bezier(.22,.9,.32,1), visibility 0s linear .2s;
}
/* Fine trame tissée en filigrane, à peine perceptible, pour que même le
   fond du panneau porte la signature textile Hadeej'Art. */
.epic-select-list::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  opacity:.5;
  background-image:repeating-linear-gradient(45deg, rgba(212,122,44,.05) 0 5px, transparent 5px 11px);
}
.epic-select-list::before{
  content:""; display:block; position:sticky; top:0; height:4px; margin:0 2px 10px; border-radius:4px;
  background:repeating-linear-gradient(90deg,var(--brand-700) 0 8px,var(--brand) 8px 16px,#f1b37f 16px 24px);
  opacity:.85; z-index:1;
}
.epic-select-list.open-up{ transform:translateY(10px) scale(.96); }
.epic-select-list.show{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .2s ease, transform .22s cubic-bezier(.22,.9,.32,1);
}
.epic-select-list::-webkit-scrollbar{ width:8px; }
.epic-select-list::-webkit-scrollbar-track{ background:transparent; }
.epic-select-list::-webkit-scrollbar-thumb{ background:#e6d7c8; border-radius:8px; border:2px solid #fffefc; }
.epic-select-list::-webkit-scrollbar-thumb:hover{ background:var(--brand); }

.epic-select-option{
  display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative;
  min-height:44px; box-sizing:border-box;
  padding:9px 12px 9px 16px; margin:2px 0; border-radius:12px; font:600 14px var(--font-body); color:var(--ink); cursor:pointer;
  transition:background .16s ease, color .16s ease, transform .12s ease;
}
.epic-select-option::before{
  content:""; position:absolute; left:2px; top:7px; bottom:7px; width:3px; border-radius:3px;
  background:linear-gradient(180deg,var(--safran),var(--brand-700)); transform:scaleY(0); transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.epic-select-option .swatch-dot{
  width:15px; height:15px; border-radius:50%; flex:0 0 auto; margin-right:2px;
  box-shadow:0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.06);
}
.epic-select-option > span{ display:flex; align-items:center; gap:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.epic-select-option:hover, .epic-select-option.focus{
  background:linear-gradient(135deg,#fff1e4,#ffe6cf); color:var(--brand-700); transform:translateX(3px);
}
.epic-select-option:hover::before, .epic-select-option.focus::before{ transform:scaleY(1); }
.epic-select-option.active{
  font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-700));
  box-shadow:0 6px 16px rgba(196,109,32,.35);
}
.epic-select-option.active:hover, .epic-select-option.active.focus{ transform:translateX(3px); filter:brightness(1.04); }
.epic-select-option.active::before{ transform:scaleY(1); background:#fff; opacity:.85; }
.epic-select-option .chk{ width:16px; height:16px; flex:0 0 auto; stroke:var(--brand-700); stroke-width:3; fill:none; opacity:0; transform:scale(.5); transition:opacity .15s ease, transform .2s cubic-bezier(.34,1.56,.64,1); }
.epic-select-option.active .chk{ opacity:1; transform:scale(1); stroke:#fff; }

/* Entrée en cascade des options à l'ouverture — une seule identité
   d'animation avec les cartes produit et le menu Boutique/Collections. */
@media (prefers-reduced-motion: no-preference){
  .epic-select-list.show .epic-select-option{
    animation: epicOptionIn .22s cubic-bezier(.22,.9,.32,1) both;
    animation-delay: calc(var(--i, 0) * 22ms);
  }
  @keyframes epicOptionIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
}

/* ====== Navigation principale (Boutique / Collections) ====== */
.main-nav{ display:flex; align-items:center; gap:2px; }
.nav-link{
  display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; cursor:pointer;
  font:700 15px var(--font-body); color:var(--ink); padding:10px 14px; min-height:44px; border-radius:10px; position:relative;
  transition:background .15s, color .15s;
}
/* Petit fil qui se déroule sous l'item au survol/ouverture, comme un point
   de couture qu'on tire — plus vivant qu'un simple fond qui change. */
.nav-link::after{
  content:""; position:absolute; left:14px; right:14px; bottom:5px; height:3px; border-radius:2px;
  /* Fil piqué : tirets réguliers, comme un point avant. */
  background:repeating-linear-gradient(90deg,var(--brand-700) 0 6px,transparent 6px 10px);
  transform:scaleX(0); transform-origin:left center; transition:transform .3s cubic-bezier(.22,.9,.32,1);
}
/* Page active : le fil est tiré en continu, en safran, et un petit nœud
   marque la fin — indicateur permanent, sans dépendre du survol. */
.nav-item.is-current > .nav-link{ color:var(--brand-700); }
.nav-item.is-current > .nav-link::after{
  transform:scaleX(1); height:3px;
  background:linear-gradient(90deg,var(--safran),var(--brand-700));
}
.nav-item.is-current > .nav-link::before{
  content:""; position:absolute; right:12px; bottom:2px; width:8px; height:8px; border-radius:50%;
  background:var(--safran); box-shadow:0 0 0 2px #fff6ea;
}
@media (prefers-reduced-motion: no-preference){
  .nav-item.is-current > .nav-link::after{ animation:navThread .7s cubic-bezier(.22,.9,.32,1) both; }
  @keyframes navThread{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
}
.nav-link:hover, .nav-link:focus-visible{ background:rgba(255,255,255,.55); color:var(--brand-700); }
.nav-link:hover::after, .nav-link:focus-visible::after, .nav-item.open .nav-link::after{ transform:scaleX(1); }
.nav-item.open .nav-link{ background:rgba(255,255,255,.75); color:var(--brand-700); }
.nav-link .chev{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.4; transition:transform .28s cubic-bezier(.34,1.56,.64,1); }
.nav-item.open .nav-link .chev{ transform:rotate(180deg); }

.nav-item{ position:relative; }
.dropdown{
  position:absolute; top:calc(100% + 8px); left:0; min-width:230px; z-index:var(--z-dropdown);
  max-height:min(420px, 70vh); overflow-y:auto; overflow-x:hidden;
  background:
    radial-gradient(120% 60px at 50% 0%, rgba(212,122,44,.07), transparent 70%),
    linear-gradient(180deg, #fffefc, #fff9f2);
  border:1px solid #f0d9bd; border-radius:18px; padding:14px 10px 10px;
  box-shadow:0 24px 48px -12px rgba(43,30,18,.32), 0 2px 6px rgba(43,30,18,.08), 0 0 0 1px rgba(255,255,255,.6) inset;
  opacity:0; visibility:hidden; transform:translateY(-10px) scale(.96); pointer-events:none;
  transition:opacity .2s ease, transform .22s cubic-bezier(.22,.9,.32,1), visibility 0s linear .2s;
}
.nav-item.open .dropdown{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .2s ease, transform .22s cubic-bezier(.22,.9,.32,1);
}
/* Trame tissée en filigrane + liseré en tête, même identité que les
   listes "épiques" (langue/devise/taille) — un seul et même système
   visuel de liste déroulante sur tout le site. */
.dropdown::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; opacity:.5;
  background-image:repeating-linear-gradient(45deg, rgba(212,122,44,.05) 0 5px, transparent 5px 11px);
}
.dropdown::before{
  content:""; display:block; position:sticky; top:0; height:5px; margin:0 2px 10px; border-radius:4px;
  background:repeating-linear-gradient(90deg,var(--brand-700) 0 10px,var(--brand) 10px 20px,#f1b37f 20px 30px);
  opacity:.85; z-index:1;
}
.dropdown::-webkit-scrollbar{ width:8px; }
.dropdown::-webkit-scrollbar-track{ background:transparent; }
.dropdown::-webkit-scrollbar-thumb{ background:#e6d7c8; border-radius:8px; border:2px solid #fffefc; }
.dropdown::-webkit-scrollbar-thumb:hover{ background:var(--brand); }
.nav-drop-item{
  display:flex; align-items:center; gap:10px; width:100%; border:0; background:transparent; cursor:pointer;
  text-align:left; padding:8px 10px 8px 12px; margin:2px 0; border-radius:12px; font:600 14px var(--font-body); color:var(--ink);
  text-decoration:none; position:relative; transition:background .16s ease, color .16s ease, transform .12s ease;
}
/* Accent de gauche qui se déploie au survol/focus, comme une lisière de
   tissu qu'on tire — plus vivant qu'un simple changement de fond. */
.nav-drop-item::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:3px;
  background:linear-gradient(180deg,var(--safran),var(--brand-700)); transform:scaleY(0); transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.nav-drop-item:hover, .nav-drop-item:focus-visible{
  background:linear-gradient(135deg,#fff1e4,#ffe6cf); color:var(--brand-700); transform:translateX(3px);
}
.nav-drop-item:hover::before, .nav-drop-item:focus-visible::before{ transform:scaleY(1); }
.nav-drop-item.current{
  font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-700));
  box-shadow:0 6px 16px rgba(196,109,32,.35);
}
.nav-drop-item.current::before{ transform:scaleY(1); background:#fff; opacity:.85; }
.nav-drop-item.current .swatch{ box-shadow:0 0 0 2px rgba(255,255,255,.7) inset; }
@media (prefers-reduced-motion: no-preference){
  .nav-item.open .nav-drop-item{ animation: epicOptionIn .22s cubic-bezier(.22,.9,.32,1) both; animation-delay: calc(var(--i, 0) * 25ms); }
}
.nav-drop-item .swatch{
  width:32px; height:32px; border-radius:9px; flex:0 0 auto; background-size:cover; background-position:center;
  background-color:#f4cdb7;
  background-image:
    radial-gradient(circle at 8px 8px, rgba(0,0,0,.12) 1.5px, transparent 2.4px),
    repeating-linear-gradient(45deg, rgba(43,30,18,.12) 0 4px, transparent 4px 10px);
  filter:hue-rotate(calc(var(--i, 0) * 28deg));
  box-shadow:0 1px 2px rgba(0,0,0,.15) inset;
}
.nav-drop-item .swatch-all{ background:linear-gradient(135deg,var(--brand),var(--brand-700)); filter:none; }
.nav-drop-item .swatch-generic{ background:linear-gradient(135deg,#f4cdb7,#e6a97a); }
.nav-drop-empty{ margin:6px; padding:10px; font:600 13px var(--font-body); color:#7a624f; text-align:center; }

/* Bandeau collection active au-dessus de la grille */
.active-collection-banner{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:#fff6ee; border:1px solid #e6d7c8; border-radius:14px; padding:10px 14px; margin:0 0 16px;
  font:600 14px var(--font-body); color:#5a3b25;
}
.active-collection-banner[hidden]{ display:none; }

/* ====== Bouton menu mobile (hamburger) + menu plein écran ====== */
.hamburger{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:44px; height:44px; border:0; border-radius:12px; background:#fff6ee; cursor:pointer;
  border:1.5px solid #e6d7c8; flex:0 0 auto; position:relative;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.hamburger:hover{ background:#ffeede; border-color:var(--brand); }
.hamburger:active{ transform:scale(.94); }
.hamburger:focus-visible{ outline:3px solid #ffcf9c; outline-offset:2px; }
.hamburger span{
  display:block; height:2px; width:20px; background:#5a3b25; border-radius:2px;
  transition:transform .28s cubic-bezier(.22,.9,.32,1), opacity .2s ease, width .2s ease;
}
/* Morph en croix quand le menu est ouvert — reflète l'état ARIA réel du
   bouton (aria-expanded), sans JS supplémentaire. */
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; width:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Langue et devise restent dans la barre du header sur mobile (voir la fin de la feuille). */

.mobile-menu{
  position:fixed; inset:0; z-index:var(--z-mobile-menu);
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(212,122,44,.1), transparent 65%),
    var(--paper);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(-12px); pointer-events:none;
  transition:opacity .26s ease, transform .26s cubic-bezier(.22,.9,.32,1), visibility 0s linear .26s;
}
.mobile-menu.show{ opacity:1; visibility:visible; transform:none; pointer-events:auto; transition:opacity .26s ease, transform .26s cubic-bezier(.22,.9,.32,1); }
.mobile-menu-head{
  display:flex; align-items:center; justify-content:space-between; padding:16px; position:relative;
  padding-top:max(16px, env(safe-area-inset-top)); padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right));
  flex:0 0 auto;
}
/* Lisière tissée sous l'en-tête du menu — l'entrée dans l'univers
   Hadeej'Art commence dès l'ouverture, pas seulement dans le contenu. */
.mobile-menu-head::after{
  content:""; position:absolute; left:16px; right:16px; bottom:0; height:3px; border-radius:3px;
  background:repeating-linear-gradient(90deg,var(--brand-700) 0 12px,var(--brand) 12px 24px,#f1b37f 24px 36px);
  opacity:.85;
}
.mobile-menu-head .brand{ display:flex; align-items:center; gap:10px; }
.mobile-menu-head .brand .mark{ width:36px; height:36px; }
.mobile-menu-head .brand-name{ margin:0; font-size:22px; }
.mobile-menu-close{ width:44px; height:44px; border-radius:12px; border:0; background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.12); cursor:pointer; display:grid; place-items:center; transition:transform .15s ease, background .15s ease; }
.mobile-menu-close:hover{ background:#fff1e4; }
.mobile-menu-close:active{ transform:scale(.92); }
.mobile-menu-close svg{ width:18px; height:18px; stroke:#5a3b25; stroke-width:2.4; fill:none; }
.mobile-menu-close:focus-visible{ outline:3px solid #ffcf9c; outline-offset:2px; }
.mobile-menu-body{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:20px 18px; padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right));
  padding-bottom:max(18px, env(safe-area-inset-bottom));
}
.mobile-menu-body section{ margin-bottom:24px; }
.mobile-menu-body h3{
  margin:0 0 10px; text-transform:uppercase; font-size:12px; letter-spacing:1px; color:var(--brand-700);
  display:inline-flex; align-items:center; gap:8px;
}
/* Petite puce façon bouton-pression de tissu devant chaque titre de
   section — un repère artisanal discret plutôt qu'un simple texte nu. */
.mobile-menu-body h3::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:linear-gradient(135deg,var(--safran),var(--brand-700));
}
.mobile-menu-list{ display:flex; flex-direction:column; gap:2px; }
.mobile-menu-list .nav-drop-item{ font-size:16px; padding:13px 10px; min-height:44px; }
.mobile-menu-cta{
  width:100%; justify-content:center; text-decoration:none; min-height:48px;
  font-size:15px; gap:10px;
}
.mobile-menu-cta::before{
  content:"💬"; font-size:16px; line-height:1;
}
body.scroll-locked{ overflow:hidden; }

@media (prefers-reduced-motion: no-preference){
  /* Les sections du menu entrent en cascade légère, comme les cartes du
     catalogue — perceptible seulement à l'ouverture (pas à chaque re-rendu
     de langue), grâce à l'animation liée au conteneur .show. */
  .mobile-menu.show .mobile-menu-body > section,
  .mobile-menu.show .mobile-menu-cta{
    animation: epicOptionIn .32s cubic-bezier(.22,.9,.32,1) both;
  }
  .mobile-menu.show .mobile-menu-body > section:nth-child(1){ animation-delay:.03s; }
  .mobile-menu.show .mobile-menu-body > section:nth-child(2){ animation-delay:.08s; }
  .mobile-menu.show .mobile-menu-body > section:nth-child(3){ animation-delay:.13s; }
  .mobile-menu.show .mobile-menu-body > section:nth-child(4){ animation-delay:.18s; }
  .mobile-menu.show .mobile-menu-cta{ animation-delay:.22s; }
}

@media (max-width:860px){
  .main-nav{ display:none; }
  .hamburger{ display:flex; }
  /* Barre mobile compacte : la marque et le panier passent avant tout. */
  .header{ padding-block:12px; padding-top:calc(12px + env(safe-area-inset-top)); gap:10px; }
  .header.scrolled{ padding-block:6px; padding-top:calc(6px + env(safe-area-inset-top)); }
  .brand{ gap:10px; }
  .brand .mark{ width:46px; height:46px; }
  .header.scrolled .brand .mark{ width:34px; height:34px; }
  .brand-name{ font-size:24px; }
  .header.scrolled .brand-name{ font-size:19px; }
}
/* Sur les petits écrans, l'accroche cède la place : seul le logo et le nom
   restent, pour une barre lisible d'un coup d'œil. */
@media (max-width:640px){
  .brand .badge{ display:none; }
  .brand-name{ font-size:22px; }
}
@media (max-width:360px){
  .brand-name{ font-size:20px; }
  .brand .mark{ width:40px; height:40px; }
}
@media (min-width:861px){
  .mobile-menu{ display:none; }
}

/* ====== Carte de livraison ====== */
.map-tools{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.map-tools .input{ flex:1; min-width:140px; }
#deliveryMap{ height:220px; border-radius:14px; overflow:hidden; border:1px solid var(--brand); }


#detail.gendered .sexe-field{display:none !important}
@media(max-width:768px){#detailOptions{display:block !important}}

/* ====== PIED DE PAGE — signature de marque ======
   Rupture volontaire avec le reste du site, clair : un grand pan sombre et
   chaud, comme l'envers d'un tissu wax richement teint, avec une seule
   étiquette de vêtement (claire sur fond sombre) cousue en haut — plutôt
   qu'une accumulation de cartes et de motifs. Quatre zones au maximum :
   signature de marque, navigation essentielle, univers boutique,
   contact/action — voir le HTML pour le découpage exact. */
.site-footer{
  --f-ink:#f5e8d8; --f-ink-dim:rgba(245,232,216,.68); --f-line:rgba(245,232,216,.14);
  --f-accent:var(--safran);
  position:relative; margin:36px 0 0; padding:40px 28px 12px; display:grid; grid-template-columns:1fr auto; column-gap:24px;
  background:linear-gradient(165deg,#2b1c10 0%,#20140a 55%,#170e06 100%);
  border-radius:32px 32px 0 0; box-shadow:0 -20px 48px rgba(0,0,0,.28);
  font-size:13px; color:var(--f-ink-dim); overflow:hidden;
}
/* Trame tissée en filigrane, très discrète — la seule texture de fond,
   pour ne pas alourdir un pan par ailleurs volontairement sobre. */
.site-footer::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:repeating-linear-gradient(45deg, var(--f-ink) 0 6px, transparent 6px 14px);
}
/* Étiquette de vêtement cousue en haut du pied de page : claire sur fond
   sombre, comme une vraie étiquette de marque sur l'envers d'un tissu —
   l'élément visuel signature de ce footer, unique et non générique. */
.site-footer::after{
  content:"Hadeej’Art"; position:absolute; top:0; left:50%; transform:translateX(-50%);
  background:var(--paper); color:var(--brand-700);
  font:800 11px var(--font-display); letter-spacing:1.5px; text-transform:uppercase;
  padding:4px 22px 6px; border-radius:0 0 10px 10px; box-shadow:0 10px 20px rgba(0,0,0,.3);
}
.site-footer a{ color:var(--f-ink); font-weight:700; text-decoration:none; }
.site-footer .footer-list a,
.site-footer .footer-wa{ color:var(--f-ink-dim); }

.footer-grid{
  position:relative; grid-column:1 / -1; display:grid; grid-template-columns:1.25fr 1fr 1.15fr 1.05fr; gap:14px 24px; padding-bottom:16px;
  border-bottom:1px solid var(--f-line);
}
@media(max-width:1020px){
  /* Deux colonnes : marque | contact en haut, navigation | boutique dessous. */
  .footer-grid{ grid-template-columns:1fr 1fr; row-gap:16px; }
  .footer-brand{ grid-column:1; grid-row:1; }
  .footer-contact{ grid-column:2; grid-row:1; }
}
@media(max-width:640px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-brand, .footer-contact{ grid-column:auto; grid-row:auto; }
}
/* Tablettes tactiles : en-têtes d'accordéon à hauteur de doigt. */
@media(max-width:1020px){
  .footer-accordion > summary{ min-height:44px; box-sizing:border-box; padding-block:0 4px; }
}

/* ---- Zone 1 : signature de marque ---- */
.footer-brand{ position:relative; grid-column:1 / 2; display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; align-content:start; }

.footer-logo{ width:46px; height:46px; border-radius:50%; overflow:hidden; border:2px solid var(--f-accent); background:var(--paper); margin:0; box-shadow:0 6px 14px rgba(0,0,0,.3); }
.footer-logo img{ width:100%; height:100%; object-fit:cover; }
.footer-tagline{
  position:relative; display:inline-block; justify-self:start; margin:0 0 6px; font-family:var(--font-display);
  font-size:25px; line-height:1.1; font-weight:800; color:var(--f-accent); letter-spacing:.3px;
}
/* Trait manuscrit sous la signature — la "griffe" de la maison, seul
   ornement de cette zone. */
.footer-tagline::after{
  content:""; position:absolute; left:1px; right:-6px; bottom:-7px; height:6px;
  background:radial-gradient(var(--f-accent) 1.5px,transparent 2.3px) 0 0/12px 6px repeat-x;
  opacity:.6;
}
/* Grand guillemet en filigrane : la phrase émotionnelle devient une
   citation de maison, pas juste un paragraphe de description. */
.footer-about{
  position:relative; grid-column:1 / -1; margin:10px 0 0; padding-left:20px; line-height:1.5; max-width:330px; font-size:12.5px; font-style:italic; color:var(--f-ink-dim);
}
.footer-about::before{
  content:"“"; position:absolute; left:-4px; top:-10px; font:800 38px var(--font-display); color:var(--f-accent); opacity:.35; font-style:normal;
}

/* ---- En-têtes de zone : sobres, une seule fois le même traitement pour
   les 4 zones (accordéons compris) — pas de pastille ni de fond coloré,
   juste une majuscule espacée et un trait qui la souligne. ---- */
.footer-col > h4,
.footer-accordion > summary{
  margin:0 0 9px; font-size:12px; text-transform:uppercase; letter-spacing:1.6px; color:#fff; font-weight:800;
  padding-bottom:6px; border-bottom:1px solid var(--f-line);
}
.footer-sublabel{
  margin:10px 0 6px; font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:var(--f-accent); font-weight:800;
}
.footer-accordion > summary + .footer-sublabel{ margin-top:4px; }

.footer-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 14px; }
.footer-list + .footer-list{ margin-top:5px; }
.footer-list + .footer-sublabel{ margin-top:10px; }
.footer-list li a{
  position:relative; font-weight:600; padding-left:0; transition:padding-left .18s ease, color .15s ease;
}
.footer-list li a::before{
  content:"–"; position:absolute; left:-16px; opacity:0; transition:opacity .18s ease, left .18s ease; color:var(--f-accent);
}
.footer-list li a:hover, .footer-list li a:focus-visible{ color:#fff; padding-left:16px; }
.footer-list li a:hover::before, .footer-list li a:focus-visible::before{ opacity:1; left:0; }
.footer-list li a[aria-current="page"]{ color:var(--f-accent); }
.footer-list:empty::after{ grid-column:1 / -1; content:attr(data-empty); opacity:.55; font-weight:500; font-style:italic; }

/* ---- Zones 2 et 3 en accordéon natif (<details>/<summary>) : ouvertes
   par défaut (rien ne change visuellement sur ordinateur), mais
   réductibles d'un tapotement sur mobile — clavier et lecteurs d'écran
   gérés nativement, sans JavaScript ni second système de navigation. ---- */
.footer-accordion{ border:0; }
.footer-accordion > summary{
  display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; list-style:none;
  transition:color .15s ease;
}
.footer-accordion > summary::-webkit-details-marker{ display:none; }
.footer-accordion > summary:hover{ color:var(--f-accent); }
.footer-accordion > summary:focus-visible{ outline:2px solid var(--f-accent); outline-offset:4px; border-radius:2px; }
/* Flèche : seul indice qu'il s'agit d'un accordéon (le bouton hamburger
   du header a déjà ce langage visuel de "chevron qui se retourne"). */
.footer-accordion > summary::after{
  content:""; width:9px; height:9px; flex:0 0 auto; margin-left:auto;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg);
  transition:transform .25s cubic-bezier(.22,.9,.32,1);
}
.footer-accordion[open] > summary::after{ transform:rotate(-135deg); }
@media (prefers-reduced-motion: no-preference){
  .footer-accordion[open] .footer-list,
  .footer-accordion[open] .footer-sublabel{
    animation: epicOptionIn .22s ease both;
  }
}

/* ---- Zone 4 : contact et action ---- */
.footer-contact{ display:flex; flex-direction:column; }
.footer-wa{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; margin:0 0 12px;
  background:linear-gradient(135deg,var(--brand),var(--brand-700)); color:#fff !important; font-weight:800;
  padding:9px 16px; border-radius:999px; min-height:44px; box-shadow:0 10px 24px rgba(0,0,0,.3);
  transition:transform .15s ease, box-shadow .15s ease;
}
.footer-wa::before{ content:"💬"; font-size:15px; line-height:1; }
.footer-wa:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.35); }
.footer-prefs{ display:flex; gap:8px 16px; flex-wrap:wrap; }
.footer-prefs .footer-sublabel{ display:block; margin:0 0 4px; }

.footer-pill-row{ display:flex; gap:7px; flex-wrap:wrap; }
.footer-pill{
  border:1.5px solid var(--f-line); background:rgba(255,255,255,.06); color:var(--f-ink); font-weight:700; font-size:12px;
  padding:5px 11px; min-height:30px; border-radius:999px; cursor:pointer; transition:background .15s, transform .08s ease, color .15s, border-color .15s, box-shadow .15s;
}
.footer-pill:hover{ background:rgba(255,255,255,.14); transform:translateY(-1px); }
.footer-pill:focus-visible{ outline:2px solid var(--f-accent); outline-offset:2px; }
.footer-pill.active{ background:linear-gradient(135deg,var(--brand),var(--brand-700)); color:#fff; border-color:transparent; box-shadow:0 4px 12px rgba(0,0,0,.3); }
@media(max-width:760px){ .footer-pill{ padding:11px 16px; font-size:13px; min-height:44px; } }

.footer-payments{
  position:relative; display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; padding:12px 0 8px;
}
.footer-payments-title{ font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--f-accent); }
.footer-payments-row{ display:flex; gap:8px; flex-wrap:wrap; }
.footer-pay-badge{
  display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.06); border:1px solid var(--f-line); border-radius:999px;
  padding:4px 11px; font-weight:700; font-size:12px; color:var(--f-ink);
  transition:transform .15s ease, background .15s ease;
}
.footer-pay-badge:hover{ transform:translateY(-2px); background:rgba(255,255,255,.1); }

.footer-legal{
  position:relative; display:flex; gap:6px 16px; flex-wrap:wrap; align-items:center; justify-content:flex-end; padding:12px 0 8px; font-size:12px;
}
.footer-legal > span:first-child{ font-weight:800; text-transform:uppercase; letter-spacing:1px; opacity:.55; color:var(--f-ink); }
.footer-legal a{ color:var(--f-ink-dim); font-weight:600; }
.footer-legal a:hover{ color:#fff; }

/* Petit fil de couture avant le copyright — dernier détail cousu main. */
.footer-copyright::before{
  content:""; display:block; width:40px; height:2px; margin:0 auto 6px; border-radius:2px;
  background:var(--f-accent); opacity:.5;
}
.footer-copyright{ grid-column:1 / -1; margin:2px 0 0; text-align:center; opacity:.5; color:var(--f-ink); font-size:12px; }

@media(max-width:900px){
  .site-footer{ grid-template-columns:1fr; }
  .footer-legal{ justify-content:flex-start; padding-top:4px; }
}
@media(max-width:640px){
  .site-footer{ padding:34px 16px 10px; margin-top:28px; border-radius:22px 22px 0 0; }
  .footer-grid{ gap:0; padding-bottom:6px; }
  .footer-brand{ padding-bottom:12px; }
  .footer-tagline{ font-size:23px; }
  .footer-about{ max-width:none; }
  /* Accordéons compacts : la zone entière est la cible tactile (44 px). */
  .footer-accordion > summary{ margin:0; padding:12px 0; min-height:44px; box-sizing:border-box; }
  .footer-accordion[open] > summary{ margin-bottom:8px; }
  .footer-accordion{ border-bottom:1px solid var(--f-line); padding-bottom:0; }
  .footer-accordion[open]{ padding-bottom:10px; }
  .footer-accordion > summary{ border-bottom:0; }
  .footer-contact{ padding-top:14px; }
  .footer-contact > h4{ display:none; }
  .footer-list li a{ display:inline-flex; align-items:center; min-height:32px; }
  .footer-payments{ padding:10px 0 6px; }
  .footer-payments-title{ width:100%; }
  .footer-pay-badge{ padding:3px 9px; }
  .footer-legal{ padding:2px 0 6px; }
}

/* ======================================================================
   ====== MISE EN SCÈNE ÉDITORIALE — mouvement, couture, ambiance Dakar
   Tout ce bloc est désactivé pour les visiteurs qui préfèrent moins
   d'animation (accessibilité), et n'anime que transform/opacity (léger,
   fluide, sans jank sur mobile).
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* --- Cartes produit : entrée en cascade façon défilé de tissus --- */
  @keyframes cardReveal {
    from { opacity:0; transform: translateY(18px) scale(.97); }
    to   { opacity:1; transform: translateY(0) scale(1); }
  }
  .card{ animation: cardReveal .5s cubic-bezier(.22,.9,.32,1) both; animation-delay: calc(var(--i, 0) * 45ms); }

  /* --- Modale : entrée "couture" (léger scale + montée) --- */
  .sheet{
    transform: translateY(14px) scale(.97); opacity:0;
    transition: transform .32s cubic-bezier(.22,.9,.32,1), opacity .28s ease;
  }
  .modal.show .sheet{ transform:none; opacity:1; }

  /* --- Lightbox : léger zoom d'entrée sur l'image --- */
  .lightbox img{ transform: scale(.96); transition: transform .25s cubic-bezier(.22,.9,.32,1); }
  .lightbox.show img{ transform: scale(1); }

  /* --- Panier déroulant : glissé + fondu --- */

  /* --- Puces catégorie : bascule vivante --- */
  .chip{ transition: transform .08s ease, background .18s, border-color .18s, box-shadow .18s, color .18s; }
  .chip.active{ animation: chipPop .28s cubic-bezier(.34,1.56,.64,1); }
  @keyframes chipPop { 0%{ transform:scale(.92) } 60%{ transform:scale(1.05) } 100%{ transform:scale(1) } }

  /* --- Motif du hero : léger effet "tissu qui respire" --- */
  .hero-frame{ animation: frameGlow 6s ease-in-out infinite; }
  @keyframes frameGlow {
    0%,100%{ box-shadow:0 18px 46px rgba(0,0,0,.18), 0 0 0 6px rgba(212,122,44,.08) inset; }
    50%{ box-shadow:0 22px 52px rgba(0,0,0,.20), 0 0 0 9px rgba(212,122,44,.14) inset; }
  }
  .logo-hero{ animation: logoDrift 7s ease-in-out infinite; }
  @keyframes logoDrift { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }

  /* --- Boutons : appui plus tactile --- */
  .btn:active{ transform: translateY(0) scale(.96); }
  .chip:active, .pay-card:active{ transform: scale(.95); }

  /* --- Panier : petit "rebond" quand un article est ajouté --- */
  .cart .btn.bump{ animation: cartBump .45s cubic-bezier(.34,1.56,.64,1); }
  @keyframes cartBump {
    0%{ transform:scale(1) } 30%{ transform:scale(1.18) rotate(-4deg) } 60%{ transform:scale(.94) rotate(3deg) } 100%{ transform:scale(1) rotate(0) }
  }
  .btn span.bubble{ transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
  .cart .btn.bump span.bubble{ transform:scale(1.25); }

  /* --- Titres de section : petit trait qui se déroule --- */
  .section-title:before{
    animation: threadUnroll .7s cubic-bezier(.22,.9,.32,1) both;
    transform-origin:left center;
  }
  @keyframes threadUnroll { from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

  /* --- Galerie fiche détail : image principale douce au changement de
     vignette (classe relancée en JS, comme le rebond du panier) --- */
  .sheet .media img#dImg.switching{ animation: galleryFade .25s ease both; }
  @keyframes galleryFade { from{ opacity:.35 } to{ opacity:1 } }

  /* --- Pastille "disponible" : léger battement --- */
  .detail-availability .avail-dot{ animation: availPulse 2.4s ease-in-out infinite; }
  @keyframes availPulse { 0%,100%{ box-shadow:0 0 0 3px rgba(42,160,106,.18) } 50%{ box-shadow:0 0 0 6px rgba(42,160,106,.1) } }
}

/* --- État de chargement du catalogue : trame "wax" qui patiente --- */
.catalogue-skeleton{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media(max-width:1020px){ .catalogue-skeleton{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:760px){ .catalogue-skeleton{ grid-template-columns:repeat(2,1fr); gap:10px; } }
.skeleton-card{
  height:310px; border-radius:16px; background:#fff;
  background-image: linear-gradient(100deg, #fff 30%, #fbe9dc 50%, #fff 70%);
  background-size: 200% 100%;
  border:1px solid #0001; box-shadow:0 10px 24px rgba(0,0,0,.08);
}
@media(max-width:760px){ .skeleton-card{ height:240px; } }
@media (prefers-reduced-motion: no-preference){
  .skeleton-card{ animation: shimmer 1.4s ease-in-out infinite; }
}
@keyframes shimmer { from{ background-position:200% 0 } to{ background-position:-200% 0 } }

/* --- Petit détail "cousu main" sur les cartes produit --- */
.card{ position:relative; }
.card .cap{ position:relative; }
.card .cap:before{
  content:""; position:absolute; left:14px; right:14px; top:0; height:1px;
  background-image: repeating-linear-gradient(90deg, var(--brand) 0 6px, transparent 6px 12px);
  opacity:.5;
}

/* ======================================================================
   ====== PAGES DE CONTENU (Collections, Contact,
   Contact, FAQ, pages légales) — mêmes textures/cadres que le reste du
   site, réutilisés tels quels.
   ====================================================================== */

/* Petit bandeau/hero réutilisé sur chaque page de contenu */
.page-hero{
  background:var(--paper); border-radius:20px; padding:clamp(22px,4vw,36px); margin:18px 0 22px;
  box-shadow:0 18px 36px rgba(0,0,0,.14); position:relative; overflow:hidden;
}
.page-hero .ribbon{ height:8px; border-radius:8px; margin-bottom:14px; background:repeating-linear-gradient(90deg,var(--brand-700) 0 14px,var(--brand) 14px 28px,#f1b37f 28px 42px); opacity:.9; }
.page-hero h1{ margin:0 0 8px; font:800 36px/1.1 var(--font-display); color:var(--brand-700); letter-spacing:.4px; }
@media(max-width:520px){ .page-hero h1{ font-size:28px; } }
.page-hero .lead{ margin:0; max-width:640px; color:#3a2a1c; font-size:1.05rem; line-height:1.6; }

/* Carte de contenu générique (texte courant, sections légales...) */
.content-card{
  background:var(--paper); border-radius:20px; padding:clamp(20px,4vw,36px); margin:0 0 22px;
  box-shadow:0 14px 30px rgba(0,0,0,.1);
}
.content-card + .content-card{ margin-top:18px; }
.content-card h2{ margin:26px 0 10px; color:var(--brand-700); font:800 20px var(--font-body); }
.content-card h2:first-child{ margin-top:0; }
.content-card p{ line-height:1.7; margin:0 0 12px; }
.content-card ul{ padding-left:20px; margin:0 0 12px; }
.content-card li{ margin:6px 0; line-height:1.6; }
.content-card a{ color:var(--brand-700); font-weight:700; }
.page-updated{ font-size:13px; opacity:.65; margin:0 0 18px; }
.back-link{ display:inline-flex; align-items:center; gap:6px; margin-bottom:16px; font-weight:700; color:var(--brand-700); text-decoration:none; }
.back-link:hover{ text-decoration:underline; }


/* --- État vide générique (Collections sans résultat...) --- */
.empty-state{
  text-align:center; padding:clamp(36px,8vw,64px) 20px; background:var(--paper); border-radius:20px;
  box-shadow:0 14px 30px rgba(0,0,0,.1);
}
.empty-state .motif-dot{
  width:64px; height:64px; margin:0 auto 16px; border-radius:50%;
  background:conic-gradient(from 0deg,var(--brand-700),var(--safran),var(--terracotta),var(--brand-700));
  opacity:.85; box-shadow:0 8px 18px rgba(0,0,0,.15);
}
.empty-state h2{ margin:0 0 8px; font:800 22px var(--font-body); color:var(--brand-700); }
.empty-state p{ margin:0 auto 18px; max-width:440px; color:#5a4634; line-height:1.6; }

/* --- Grille des collections --- */
.collections-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:900px){ .collections-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .collections-grid{ grid-template-columns:1fr; } }
.collection-card{
  background:#fff; border:1px solid #0001; border-radius:18px; overflow:hidden; text-decoration:none; color:var(--ink);
  box-shadow:0 12px 26px rgba(0,0,0,.12); display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .2s ease;
}
.collection-card:hover{ transform:translateY(-4px); box-shadow:0 18px 34px rgba(0,0,0,.18); }
.collection-card .cover{
  height:180px; background-size:cover; background-position:center; background-color:#f4cdb7;
  background-image:
    radial-gradient(circle at 20px 20px, rgba(0,0,0,.1) 3px, transparent 4px),
    repeating-linear-gradient(45deg, rgba(43,30,18,.1) 0 8px, transparent 8px 20px);
}
.collection-card .body{ padding:16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.collection-card h3{ margin:0; font:800 19px var(--font-display); color:var(--brand-700); }
.collection-card .btn{ align-self:flex-start; margin-top:auto; }

/* --- FAQ (accordéon natif <details>, fonctionne sans JS) --- */
.faq-list{ display:flex; flex-direction:column; gap:10px; max-width:760px; margin:0 auto; }
.faq-list details{
  background:#fff; border:1px solid #e6d7c8; border-radius:14px; padding:4px 16px; box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.faq-list summary{
  cursor:pointer; list-style:none; padding:14px 28px 14px 0; font-weight:800; color:var(--ink); position:relative;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary:after{
  content:""; position:absolute; right:2px; top:50%; width:12px; height:12px; margin-top:-8px;
  border-right:2.4px solid var(--brand-700); border-bottom:2.4px solid var(--brand-700);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq-list details[open] summary:after{ transform:rotate(-135deg); margin-top:-4px; }
.faq-list .faq-answer{ margin:0 0 16px; line-height:1.7; color:#3a2a1c; }

/* --- Contact --- */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:start; }
@media(max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{ background:#fff; border-radius:18px; padding:26px; box-shadow:0 14px 30px rgba(0,0,0,.1); }
.contact-card .btn{ margin-top:10px; }
.contact-notes{ margin-top:16px; display:flex; flex-direction:column; gap:8px; font-size:.92rem; color:#5a4634; }
.contact-notes a{ color:var(--brand-700); font-weight:700; }

@media (prefers-reduced-motion: no-preference){
  .page-hero{ animation: cardReveal .5s cubic-bezier(.22,.9,.32,1) both; }
  .collection-card{ animation: cardReveal .5s cubic-bezier(.22,.9,.32,1) both; animation-delay: calc(var(--i,0) * 60ms); }
}

/* ======================================================================
   ====== TYPOGRAPHIE — trois voix, chacune à sa place
   1. AFFICHAGE  (Kenia)     : la signature de la maison. Réservée aux
      grands moments — nom de marque, accroche du hero, titres de page,
      slogan, citation. Jamais en petit : à moins de 24 px, Kenia perd sa
      lisibilité, on passe donc à la voix suivante.
   2. ÉDITORIALE (Fraunces)  : une sérif chaleureuse, aux courbes douces,
      pour tout ce qui se lit comme du texte de magazine — noms de pièces,
      titres de sections, questions, chapeaux, citations.
   3. TEXTE / INTERFACE (DM Sans) : nette et sobre, pour la navigation, les
      boutons, formulaires, prix et paragraphes courants.
   Les trois couvrent l'intégralité des accents français et des lettres du
   wolof (ŋ, ñ, ë, ó…) ; seul Kenia n'a pas « ŋ » ni l'apostrophe courbe :
   la pile de repli passe alors à Fraunces, plutôt qu'à une police système. */
:root{
  --font-display:"Kenia","Fraunces",Georgia,serif;
  --font-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
html{ -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; }
body{
  font-family:var(--font-body); font-size:16px; line-height:1.6; font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-kerning:normal;
}
/* Les contrôles de formulaire n'héritent pas de la police par défaut : sans
   cette règle, boutons et champs s'affichaient en police système. */
button, input, select, textarea{ font-family:inherit; letter-spacing:inherit; }
.btn{ font-size:14px; letter-spacing:.01em; }
.btn.sm{ font-size:13px; }

/* Rythme du texte courant */
p, li, dd{ text-wrap:pretty; }
h1, h2, h3, h4, .lead, summary{ text-wrap:balance; }
.content-card p, .content-card li, .faq-answer{ max-width:68ch; }

/* Voix 2 — éditoriale */
.section-title{
  font-family:var(--font-serif); font-weight:700; font-size:clamp(26px,3.2vw,34px); line-height:1.1;
  text-transform:none; letter-spacing:-.01em; color:var(--brand-700);
}
.card h3, .collection-card h3, .content-card h2, .empty-state h2{
  font-family:var(--font-serif); font-weight:650; letter-spacing:-.005em; font-optical-sizing:auto;
}
.card h3{ font-size:17px; line-height:1.25; color:var(--ink); }
.collection-card h3{ font-size:20px; line-height:1.2; }
.content-card h2{ font-size:22px; line-height:1.25; }
.empty-state h2{ font-size:24px; line-height:1.2; }
.page-hero .lead, .hero-sub{
  font-family:var(--font-serif); font-weight:400; font-size:clamp(17px,2.2vw,20px); line-height:1.55; color:#4a3423;
}
.faq-list summary{ font-family:var(--font-serif); font-weight:600; font-size:17px; line-height:1.35; }
.footer-about{ font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:13.5px; line-height:1.55; }
.dropdown .nav-drop-item, .mobile-menu-list .nav-drop-item{ font-family:var(--font-body); }
.sheet header b{ font-family:var(--font-serif); font-weight:700; font-size:20px; letter-spacing:-.005em; }
#client .sheet header b{ font-family:var(--font-display); font-weight:400; font-synthesis-weight:none; }
#dName{ font-family:var(--font-serif); font-weight:700; font-size:22px; line-height:1.2; letter-spacing:-.005em; }
@media(max-width:480px){ #dName{ font-size:19px; } }

/* Voix 3 — texte et interface */
.nav-link{ font-weight:600; letter-spacing:.01em; }
.price, .bubble, .line b, #cartTotal, #cartSubtotal{ font-variant-numeric:lining-nums tabular-nums; }
.price{ font-weight:700; font-size:16px; letter-spacing:0; }
.chip{ font-weight:600; letter-spacing:.01em; }
.small{ font-size:12.5px; }

/* Micro-titres en capitales : un seul traitement partout (approche « étiquette
   de vêtement ») — même graisse, même approche, même espacement. */
.footer-col > h4, .footer-accordion > summary, .footer-sublabel, .footer-payments-title,
.footer-legal > span:first-child, .mobile-menu-body h3{
  font-family:var(--font-body); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.footer-col > h4, .footer-accordion > summary{ font-size:12px; }
.footer-sublabel, .footer-payments-title, .footer-legal > span:first-child{ font-size:10.5px; }

/* Voix 1 — affichage : seulement où la taille le permet */
.brand-name, .hero h2, .page-hero h1, .footer-tagline, .cart-head h4{
  font-family:var(--font-display);
  /* Kenia n'existe qu'en une graisse : on interdit le faux gras du navigateur
     (contours baveux), le tracé d'origine est déjà volontairement épais. */
  font-weight:400; font-synthesis-weight:none; letter-spacing:.01em;
}

/* ======================================================================
   ====== PANIER — tiroir latéral (bas de page sur mobile)
   Un vrai moment de la commande : voile flouté, tiroir qui glisse, lignes
   avec vignette, pastilles de variante, quantité modifiable, total collé
   en bas, et un état vide illustré. Tout est piloté par cart.js. */
.cart-overlay{
  position:fixed; inset:0; z-index:var(--z-panel); background:rgba(43,30,18,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .28s ease, visibility 0s linear .28s;
}
.cart-overlay.show{ opacity:1; visibility:visible; transition:opacity .28s ease; }

.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(440px,100vw); z-index:calc(var(--z-panel) + 1);
  display:flex; flex-direction:column; color:var(--ink);
  background:radial-gradient(130% 240px at 100% 0%, rgba(242,185,12,.2), transparent 70%), var(--paper);
  border-radius:28px 0 0 28px; box-shadow:-24px 0 60px rgba(43,30,18,.38);
  padding-top:env(safe-area-inset-top); padding-right:env(safe-area-inset-right);
  transform:translateX(104%); visibility:hidden;
  transition:transform .38s cubic-bezier(.22,.9,.32,1), visibility 0s linear .38s;
}
.cart-drawer.show{ transform:none; visibility:visible; transition:transform .38s cubic-bezier(.22,.9,.32,1); }
.cart-grab{ display:none; }

.cart-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 18px 12px 24px; flex:0 0 auto; }
.cart-head-title{ display:flex; align-items:center; gap:12px; min-width:0; flex-wrap:wrap; }
.cart-head h4{ margin:0; font-size:30px; line-height:1.05; color:var(--brand-700); }
.cart-count-chip{
  font:700 12px var(--font-body); letter-spacing:.02em; color:#fff; padding:5px 11px; border-radius:999px;
  background:linear-gradient(135deg,var(--brand),var(--brand-700)); white-space:nowrap;
}
.cart-count-chip[hidden]{ display:none; }
.cart-close{
  flex:0 0 auto; width:44px; height:44px; border-radius:14px; border:1.5px solid #e6d7c8; background:#fff; cursor:pointer;
  display:grid; place-items:center; transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.cart-close svg{ width:18px; height:18px; stroke:#5a3b25; stroke-width:2.4; fill:none; stroke-linecap:round; }
.cart-close:hover{ background:#fff1e4; border-color:var(--brand); }
.cart-close:active{ transform:scale(.92); }
.cart-close:focus-visible, .qty-btn:focus-visible, .cart-remove:focus-visible, .cart-continue:focus-visible{ outline:3px solid #ffcf9c; outline-offset:2px; }
.cart-stitch{
  height:6px; margin:0 24px; border-radius:6px; flex:0 0 auto; opacity:.85;
  background:repeating-linear-gradient(90deg,var(--brand-700) 0 12px,var(--brand) 12px 24px,#f1b37f 24px 36px);
}

.cart-lines{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:12px; padding:16px 20px;
}
.cart-line{
  position:relative; display:grid; grid-template-columns:76px minmax(0,1fr); gap:14px; padding:12px;
  background:#fff; border:1px solid rgba(43,30,18,.07); border-radius:18px; box-shadow:0 6px 18px rgba(80,40,10,.1);
  transition:opacity .2s ease, transform .2s ease;
}
.cart-line.is-leaving{ opacity:0; transform:translateX(28px); }
.cart-thumb{ width:76px; aspect-ratio:3/4; border-radius:12px; overflow:hidden; background:#f4cdb7; }
.cart-thumb img{ width:100%; height:100%; object-fit:cover; }
.cart-thumb-ph{ display:grid; place-items:center; width:100%; height:100%; font:400 32px var(--font-display); color:var(--brand-700); }
.cart-info{ min-width:0; display:flex; flex-direction:column; }
.cart-name{ margin:0 40px 6px 0; font:650 16px/1.25 var(--font-serif); color:var(--ink); }
.cart-chips{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-wrap:wrap; gap:5px; }
.cart-chips li{
  font:600 11.5px/1 var(--font-body); padding:5px 9px; border-radius:999px; background:#fff1e4; color:#7a4b21; border:1px solid #f0d4bd;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cart-line-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; }
.qty{ display:inline-flex; align-items:center; background:#fff6ee; border:1.5px solid #e6d7c8; border-radius:999px; }
.qty-btn{
  width:44px; height:44px; border:0; background:transparent; border-radius:999px; cursor:pointer;
  font:600 22px/1 var(--font-body); color:var(--brand-700); display:grid; place-items:center;
  transition:background .15s ease, transform .1s ease;
}
.qty-btn:hover{ background:#ffe6d0; }
.qty-btn:active{ transform:scale(.9); }
.qty-val{ min-width:26px; text-align:center; font:700 15px var(--font-body); font-variant-numeric:tabular-nums; }
.cart-price{ display:flex; flex-direction:column; align-items:flex-end; margin-left:auto; }
.cart-price b{ font:700 16px var(--font-body); font-variant-numeric:lining-nums tabular-nums; white-space:nowrap; }
.cart-unit{ font:500 11.5px var(--font-body); opacity:.65; white-space:nowrap; }
.cart-remove{
  position:absolute; top:2px; right:2px; width:44px; height:44px; border:0; background:transparent; border-radius:14px; cursor:pointer;
  display:grid; place-items:center; transition:background .15s ease;
}
.cart-remove svg{ width:18px; height:18px; stroke:#a5764c; stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:stroke .15s ease; }
.cart-remove:hover{ background:#fdeae4; }
.cart-remove:hover svg{ stroke:var(--terracotta); }

.cart-foot{
  flex:0 0 auto; padding:14px 20px calc(18px + env(safe-area-inset-bottom));
  border-top:1.5px dashed rgba(122,75,33,.35); background:linear-gradient(180deg,rgba(255,255,255,.65),var(--paper));
}
.cart-sum{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0 0 4px; font:500 14px var(--font-body); color:#5a3b25; }
.cart-sum b{ font:700 15px var(--font-body); color:var(--ink); font-variant-numeric:lining-nums tabular-nums; }
.cart-sum-total{ margin:6px 0 4px; padding-top:8px; border-top:1px solid rgba(43,30,18,.08); font:700 15px var(--font-body); color:var(--ink); }
.cart-sum-total b{ font:700 26px/1 var(--font-serif); color:var(--brand-700); }
.cart-note{ margin:6px 0 14px; font-size:12px; line-height:1.4; opacity:.7; }
.cart-checkout{
  width:100%; justify-content:center; min-height:54px; font-size:16px; letter-spacing:.02em; border-radius:16px;
  background-image:linear-gradient(135deg,var(--terracotta),#8F2F0A); box-shadow:0 12px 26px rgba(143,47,10,.35);
}
.cart-continue{
  display:block; margin:6px auto 0; min-height:44px; padding:0 14px; border:0; background:none; cursor:pointer;
  font:700 14px var(--font-body); color:var(--brand-700); text-decoration:underline; text-underline-offset:4px; text-decoration-style:dotted;
}
.cart-continue:hover{ color:var(--terracotta); }

.cart-drawer.is-empty .cart-foot{ display:none; }
.cart-drawer.is-empty .cart-lines{ justify-content:center; }
.cart-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:10px 8px 24px; }
.cart-empty-art{ width:min(190px,58%); height:auto; margin-bottom:6px; }
.cart-empty h5{ margin:0; font:700 24px/1.15 var(--font-serif); color:var(--ink); }
.cart-empty p{ margin:0 0 10px; max-width:28ch; opacity:.8; line-height:1.5; }

/* Mobile : le tiroir devient une feuille qui monte du bas de l'écran. */
@media (max-width:640px){
  .cart-drawer{
    top:auto; left:0; right:0; width:100%; height:auto; max-height:92vh; max-height:92dvh;
    border-radius:26px 26px 0 0; box-shadow:0 -18px 50px rgba(43,30,18,.4);
    padding-top:0; padding-right:0; transform:translateY(104%);
  }
  .cart-drawer.show{ transform:none; }
  .cart-drawer.is-empty{ min-height:56vh; min-height:56dvh; }
  .cart-grab{ display:block; width:44px; height:5px; margin:10px auto 0; border-radius:5px; background:#d9c3ad; flex:0 0 auto; }
  .cart-head{ padding:8px 12px 10px 20px; }
  .cart-head h4{ font-size:26px; }
  .cart-stitch{ margin:0 20px; }
  .cart-lines{ padding:12px 16px; }
  .cart-foot{ padding:12px 16px calc(14px + env(safe-area-inset-bottom)); }
  .cart-line{ grid-template-columns:68px minmax(0,1fr); gap:12px; }
  .cart-thumb{ width:68px; }
}

@media (prefers-reduced-motion: no-preference){
  /* Les lignes entrent en cascade à l'ouverture seulement (classe .opening
     posée par cart.js), pour ne pas rejouer l'animation à chaque « + ». */
  .cart-drawer.opening .cart-line, .cart-drawer.opening .cart-empty{ animation:cartLineIn .45s cubic-bezier(.22,.9,.32,1) both; animation-delay:calc(var(--i, 0) * 60ms + 160ms); }
  @keyframes cartLineIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
  .cart-line.is-new{ animation:cartLineFlash 1.3s ease; }
  @keyframes cartLineFlash{ 0%{ box-shadow:0 0 0 0 rgba(242,185,12,.9); } 40%{ box-shadow:0 0 0 6px rgba(242,185,12,.45); } 100%{ box-shadow:0 6px 18px rgba(80,40,10,.1); } }
}
@media (prefers-reduced-motion: reduce){
  .cart-overlay, .cart-drawer, .cart-drawer.show, .cart-line{ transition-duration:0s !important; }
}

/* ====== Header : Contact et FAQ en liens simples ====== */
a.nav-link{ text-decoration:none; }
.nav-plain.is-current{ color:var(--brand-700); }
.nav-plain.is-current::after{ transform:scaleX(1); background:linear-gradient(90deg,var(--safran),var(--brand-700)); }
.nav-plain.is-current::before{
  content:""; position:absolute; right:12px; bottom:2px; width:8px; height:8px; border-radius:50%;
  background:var(--safran); box-shadow:0 0 0 2px #fff6ea;
}

/* ====== Menu mobile : quatre pages, en grand ====== */
.mobile-links{
  display:flex; flex-direction:column; justify-content:center; gap:2px; padding:12px 24px 28px;
  padding-left:max(24px, env(safe-area-inset-left)); padding-right:max(24px, env(safe-area-inset-right));
}
.mobile-link{
  position:relative; display:flex; align-items:baseline; gap:18px; min-height:72px; padding:18px 4px;
  text-decoration:none; color:var(--ink); border-bottom:1.5px dashed rgba(122,75,33,.3);
  transition:transform .2s cubic-bezier(.22,.9,.32,1), color .15s ease;
}
.mobile-link:last-child{ border-bottom:0; }
.mobile-link-num{ font:700 12px var(--font-body); letter-spacing:.14em; color:var(--brand); min-width:24px; }
.mobile-link-label{ font-family:var(--font-display); font-size:clamp(34px,10vw,48px); line-height:1.05; color:var(--brand-700); }
.mobile-link:hover, .mobile-link:focus-visible{ transform:translateX(6px); outline:none; }
.mobile-link:focus-visible .mobile-link-label{ text-decoration:underline; text-decoration-color:var(--safran); text-decoration-thickness:4px; text-underline-offset:6px; }
.mobile-link[aria-current="page"] .mobile-link-label{ color:var(--ink); }
.mobile-link[aria-current="page"]::after{
  content:""; position:absolute; right:6px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%;
  background:var(--safran); box-shadow:0 0 0 4px rgba(242,185,12,.28);
}
@media (prefers-reduced-motion: no-preference){
  .mobile-menu.show .mobile-link{ animation:epicOptionIn .4s cubic-bezier(.22,.9,.32,1) both; }
  .mobile-menu.show .mobile-link:nth-child(1){ animation-delay:.05s; }
  .mobile-menu.show .mobile-link:nth-child(2){ animation-delay:.11s; }
  .mobile-menu.show .mobile-link:nth-child(3){ animation-delay:.17s; }
  .mobile-menu.show .mobile-link:nth-child(4){ animation-delay:.23s; }
}

/* ====== Header mobile : langue et devise toujours à portée ====== */
@media (max-width:860px){
  .action{ gap:6px; }
  .action > .epic-select{ display:inline-flex; }
  .action .epic-select-trigger.select-pill{ min-width:0; padding:6px 8px 6px 10px; font-size:12px; gap:3px; }
}
@media (max-width:400px){
  .action{ gap:4px; }
  .action .epic-select-trigger.select-pill{ padding:6px 6px 6px 8px; }
  .brand-name{ font-size:19px; }
  .header{ gap:6px; }
}
@media (max-width:359px){ .brand .brand-text{ display:none; } }

.cart .btn{ min-height:44px; }

/* ====== Header mobile : langue et devise réduites à une icône ======
   Le texte (« 🇫🇷 FR », « FCFA ») et la flèche laissent la place à un
   globe et à une pièce : deux boutons de 44 px, la valeur courante restant
   annoncée par le libellé accessible et cochée dans la liste. */
@media (max-width:860px){
  .action .epic-select-trigger.select-pill.is-lang,
  .action .epic-select-trigger.select-pill.is-currency{
    width:44px; min-width:44px; height:44px; padding:0; justify-content:center; border-radius:14px; gap:0;
  }
  .action .epic-select-trigger.is-lang .epic-select-label,
  .action .epic-select-trigger.is-currency .epic-select-label,
  .action .epic-select-trigger.is-lang .chev,
  .action .epic-select-trigger.is-currency .chev{ display:none; }
  .action .epic-select-trigger.is-lang::before,
  .action .epic-select-trigger.is-currency::before{
    content:""; width:22px; height:22px; background:currentColor;
    -webkit-mask:var(--ico) no-repeat center / contain; mask:var(--ico) no-repeat center / contain;
  }
  .action .epic-select-trigger.is-lang{
    --ico:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.9" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3c3.4 3.2 3.4 14.8 0 18M12 3c-3.4 3.2-3.4 14.8 0 18"/></svg>');
  }
  .action .epic-select-trigger.is-currency{
    --ico:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M14.6 9.3c-.6-.8-1.6-1.3-2.6-1.3-1.5 0-2.6.8-2.6 2s1.1 1.7 2.6 2 2.6.8 2.6 2-1.1 2-2.6 2c-1 0-2-.5-2.6-1.3"/><path d="M12 6.4V8M12 16v1.6"/></svg>');
  }
}

/* ====== Carte de livraison : liste de résultats de recherche ====== */
.map-results{
  list-style:none; margin:0 0 8px; padding:4px; max-height:220px; overflow-y:auto; overscroll-behavior:contain;
  background:#fff; border:1.5px solid #e6d7c8; border-radius:14px; box-shadow:0 8px 20px rgba(43,30,18,.1);
}
.map-results[hidden]{ display:none; }
.map-result{
  display:flex; flex-direction:column; gap:2px; min-height:44px; padding:8px 12px; border-radius:10px; cursor:pointer;
  transition:background .12s ease;
}
.map-result strong{ font:700 14px var(--font-body); color:var(--ink); }
.map-result span{ font:500 12px var(--font-body); color:#7a624f; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.map-result:hover, .map-result:focus-visible{ background:#fff1e4; outline:none; }
.map-result[aria-selected="true"]{ background:#ffe9d3; box-shadow:inset 3px 0 0 var(--brand); }
#btnLocateMe[aria-busy="true"]{ opacity:.7; cursor:progress; }

/* ======================================================================
   ====== PAS DE ZOOM INVOLONTAIRE (téléphone)
   Safari iOS zoome sur tout champ dont le texte fait moins de 16 px au
   moment où l'on le sélectionne (pays, ville, quartier, recherche…), puis
   ne rezoome pas : la page reste décalée. On impose donc 16 px minimum aux
   champs, et on neutralise le double-tap. (Le zoom par pincement est aussi
   désactivé dans la balise viewport.) */
html, body{ touch-action:pan-x pan-y; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.modal, .sheet, .cart-drawer, .mobile-menu, .lightbox{ touch-action:pan-y; }
.leaflet-container{ touch-action:none; }
input, select, textarea, button{ touch-action:pan-x pan-y; }
@media (max-width:900px){
  input, select, textarea, .input, .epic-autocomplete input, #mapSearch, .epic-select-trigger{ font-size:16px; }
  input::placeholder, textarea::placeholder{ font-size:16px; }
  .modal{ overscroll-behavior:contain; }
}

/* ====== Confirmation de commande ====== */
.order-done{
  max-width:460px; padding:30px 24px 24px; text-align:center;
  background:radial-gradient(120% 200px at 50% 0%, rgba(242,185,12,.22), transparent 70%), #fff;
}
.od-badge{
  width:72px; height:72px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,#2AA06A,#1b7a50); box-shadow:0 10px 24px rgba(27,122,80,.35);
}
.od-badge svg{ width:38px; height:38px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.order-done h3{ margin:0 0 14px; font:700 26px/1.15 var(--font-serif); color:var(--ink); }
.od-label{ margin:0 0 6px; font:700 11px var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--brand-700); }
.od-ref-row{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin:0 auto 14px; padding:10px 12px;
  border:2px dashed var(--brand); border-radius:16px; background:#fff7f1;
}
.od-ref{ font:800 24px var(--font-body); letter-spacing:.06em; color:var(--brand-700); user-select:all; -webkit-user-select:all; }
.od-copy{
  min-height:44px; padding:0 16px; border:1.5px solid #e6d7c8; border-radius:12px; background:#fff; cursor:pointer;
  font:700 13px var(--font-body); color:var(--brand-700);
}
.od-copy:hover{ background:#fff1e4; border-color:var(--brand); }
.od-text{ margin:0 0 14px; line-height:1.5; color:#4a3423; }
.od-preview{ width:min(180px,50%); height:auto; margin:0 auto 16px; border-radius:10px; box-shadow:0 10px 26px rgba(43,30,18,.25); border:1px solid #0001; }
.od-preview[hidden]{ display:none; }
.od-wa{
  width:100%; justify-content:center; min-height:54px; font-size:16px; border-radius:16px; text-decoration:none;
  background-image:linear-gradient(135deg,#25b866,#128c4e); box-shadow:0 12px 26px rgba(18,140,78,.35);
}
.od-actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.od-actions .btn{ flex:1 1 150px; justify-content:center; min-height:46px; }