/* Chez Manda — « l'appli rose » */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --rose:#FE64C2;       /* le fond du logo */
  --rose-f:#D93E9C;
  --rose-p:#FFE3F3;
  --blush:#FFF6FB;
  --or:linear-gradient(135deg,#7A5404 0%,#C9A43C 40%,#8E6510 70%,#D9B95A 100%);
  --or-t:#8A6410;
  --encre:#2A1A24;
  --gris:#8E7F88;
  --filet:rgba(42,26,36,.1);
  --titre:"Libre Bodoni","Bodoni 72",Didot,Georgia,serif;
  --texte:"Readex Pro","Helvetica Neue",Arial,sans-serif;
  --gout:16px;
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:light;
}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{background:var(--blush);color:var(--encre);font:300 15px/1.6 var(--texte);-webkit-font-smoothing:antialiased;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;cursor:pointer}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
body.fige{position:fixed;left:0;right:0;overflow:hidden}
:focus-visible{outline:2px solid var(--rose-f);outline-offset:2px}

.bandeau-maquette{background:var(--encre);color:rgba(255,246,251,.75);font:300 11px/1.5 var(--texte);text-align:center;padding:7px var(--gout)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:99px;font:500 13.5px/1 var(--texte);letter-spacing:.02em;transition:background .3s,transform .3s var(--ease)}
.btn svg{width:20px;height:20px}
.btn-rose{background:var(--rose);color:#fff}
.btn-rose:hover{background:var(--rose-f)}
.btn-rose:active{transform:scale(.97)}
.btn-gris{background:#F1E6EC;color:var(--gris);cursor:not-allowed}
.btn-large{width:100%}
.compteur{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--encre);color:#fff;font:500 10px/1 var(--texte)}

/* ---------- barre d'appli : toujours visible ---------- */
.appbar{position:sticky;top:0;z-index:40;background:var(--rose);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.appbar-in{max-width:1400px;margin:0 auto;height:68px;padding:0 var(--gout);display:flex;align-items:center;gap:12px}
.marque{display:block;height:54px;margin-right:auto;border-radius:10px;overflow:hidden}
.marque img{height:100%;width:auto}
.onglets-haut{display:none}
.recherche{display:none}
.app-panier{position:relative;width:44px;height:44px;display:grid;place-items:center;color:#fff;margin-right:-8px}
.app-panier svg{width:25px;height:25px}
.app-panier .compteur{position:absolute;right:2px;top:4px;background:#fff;color:var(--rose-f)}
.puces{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;max-width:1400px;margin:0 auto;padding:0 var(--gout) 12px}
.puces::-webkit-scrollbar{display:none}
.puces button{flex:none;height:34px;padding:0 15px;border-radius:99px;background:rgba(255,255,255,.22);color:#fff;font:500 12.5px/1 var(--texte);transition:background .3s,color .3s}
.puces button[aria-selected="true"]{background:#fff;color:var(--rose-f)}

.page{max-width:1400px;margin:0 auto}

/* ---------- vitrine ---------- */
.vitrine{padding:18px var(--gout) 6px}
.vitrine-in{position:relative;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:20px 18px;border-radius:22px;background:#fff;box-shadow:0 1px 0 var(--filet);overflow:hidden}
.vitrine-in::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--or)}
.vitrine-sur{font:500 10.5px/1.3 var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--or-t)}
.vitrine-titre{font:500 clamp(26px,7vw,52px)/1.02 var(--titre);letter-spacing:-.01em;margin:8px 0 10px}
.vitrine-titre em{font-style:italic;font-weight:400;color:var(--rose-f)}
.vitrine-sous{font-size:12.5px;color:var(--gris)}
.vitrine-photos{display:flex}
.vitrine-photos img{width:clamp(44px,13vw,120px);aspect-ratio:3/4.4;object-fit:cover;object-position:50% 20%;border-radius:999px;border:3px solid #fff;margin-left:calc(clamp(44px,13vw,120px) * -.38);box-shadow:0 6px 14px rgba(42,26,36,.12);animation:flotte 5s ease-in-out infinite}
.vitrine-photos img:first-child{margin-left:0}
.vitrine-photos img:nth-child(2){animation-delay:-1.6s;transform:translateY(-6px)}
.vitrine-photos img:nth-child(3){animation-delay:-3.2s}
@keyframes flotte{50%{translate:0 -6px}}

/* ---------- stories ---------- */
.stories-sec{padding:14px 0 4px}
.stories{list-style:none;display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding:4px var(--gout) 8px}
.stories::-webkit-scrollbar{display:none}
.story button{display:grid;justify-items:center;gap:7px;width:70px}
.story .rond{position:relative;width:66px;height:66px;border-radius:50%;padding:3px;background:var(--or)}
.story .rond img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 18%;border:2.5px solid var(--blush)}
.story .rond i{position:absolute;right:-2px;bottom:-2px;min-width:22px;height:22px;padding:0 5px;border-radius:99px;background:var(--rose);color:#fff;border:2px solid var(--blush);font:600 10px/18px var(--texte);font-style:normal;text-align:center}
.story span{font-size:11px;line-height:1.2;text-align:center;color:var(--encre);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.story.actif .rond{background:var(--rose)}

/* ---------- grille ---------- */
.grille-cadre{padding:10px var(--gout) 40px}
.grille-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:8px 0 16px}
.grille-titre{font:500 24px/1.1 var(--titre)}
.grille-n{font-size:12.5px;color:var(--gris)}
.recherche-m{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;margin-bottom:16px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px var(--filet)}
.recherche-m svg{width:18px;height:18px;color:var(--gris)}
.recherche-m input{flex:1;min-width:0;border:0;outline:0;background:none;font:300 16px/1 var(--texte);color:var(--encre)}
.grille{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}
.carte{display:grid;gap:9px;align-content:start;animation:entre .6s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
@keyframes entre{from{opacity:0;transform:translateY(14px)}}
.carte-media{position:relative}
.carte-photo{position:relative;display:block;width:100%;aspect-ratio:3/4.1;overflow:hidden;border-radius:18px;background:#F1E6EC}
.carte-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;transition:transform 1s var(--ease),opacity .35s}
.carte-photo img.change{opacity:0}
.carte:hover .carte-photo img{transform:scale(1.035)}
.carte-badge{position:absolute;left:8px;top:8px;padding:5px 9px;border-radius:99px;background:rgba(255,255,255,.92);font:500 10.5px/1 var(--texte);color:var(--encre);z-index:1}
.carte-fav{position:absolute;right:8px;top:8px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--rose-f);z-index:1;transition:transform .3s var(--ease)}
.carte-fav svg{width:18px;height:18px}
.carte-plus{position:absolute;right:8px;bottom:8px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--rose);color:#fff;z-index:1;box-shadow:0 6px 14px rgba(217,62,156,.35);transition:transform .3s var(--ease)}
.carte-plus svg{width:19px;height:19px}
.carte-fav:active,.carte-plus:active{transform:scale(.86)}
.carte-plus.ok{animation:ok .6s var(--ease)}
@keyframes ok{40%{transform:scale(1.2)}}
.carte-nom{font:400 14px/1.3 var(--texte)}
.carte-ligne{display:grid;gap:7px}
.carte-prix{font-size:11.5px;color:var(--gris)}
.pastilles{display:flex;flex-wrap:wrap;gap:6px}
.pastilles button{position:relative;width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.pastilles button::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--rose-f);opacity:0;transform:scale(.8);transition:opacity .25s,transform .3s var(--ease)}
.pastilles button[aria-pressed="true"]::after{opacity:1;transform:none}
.pastilles.grandes{gap:10px}
.pastilles.grandes button{width:30px;height:30px}
.vide{color:var(--gris);padding:30px 0;text-align:center}

/* ---------- infos ---------- */
.infos{padding:10px var(--gout) 30px}
.infos-in{display:grid;gap:22px;justify-items:center;text-align:center;padding:30px 20px;border-radius:22px;background:#fff}
.infos-logo{width:150px;border-radius:14px}
.gestes{list-style:none;display:grid;gap:10px;width:100%;max-width:420px;text-align:left}
.gestes li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--blush)}
.gestes b{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--rose);color:#fff;font:600 13px/1 var(--texte)}
.gestes strong{font-weight:500}
.coord{display:grid;width:100%;max-width:420px;text-align:left;border-top:1px solid var(--filet)}
.coord div{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--filet)}
.coord dt{font:500 11px/1.8 var(--texte);letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.pied-petit{font-size:11.5px;color:var(--gris)}

/* ---------- barre d'onglets ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 -1px 0 var(--filet);padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{position:relative;display:grid;justify-items:center;gap:4px;padding:10px 0 9px;font:400 10.5px/1 var(--texte);color:var(--gris)}
.tabbar svg{width:23px;height:23px}
.tabbar .actif{color:var(--rose-f)}
.tabbar .actif::before{content:"";position:absolute;top:0;left:30%;right:30%;height:2.5px;border-radius:0 0 3px 3px;background:var(--rose)}
.tabbar .compteur,.tabbar .pastille-n{position:absolute;top:5px;left:calc(50% + 6px);min-width:17px;height:17px;font-size:9.5px;border-radius:99px;display:grid;place-items:center;padding:0 4px;background:var(--rose);color:#fff;font-weight:600}

/* ---------- feuilles ---------- */
.voile{position:fixed;inset:0;z-index:80;background:rgba(42,26,36,.4);opacity:0;transition:opacity .35s}
.voile.on{opacity:1}
.feuille{position:fixed;left:0;right:0;bottom:0;z-index:90;max-height:93svh;overflow-y:auto;background:#fff;border-radius:24px 24px 0 0;transform:translateY(100%);transition:transform .5s var(--ease);padding-bottom:env(safe-area-inset-bottom);overscroll-behavior:contain}
.feuille.on{transform:translateY(var(--drag,0px))}
.feuille.glisse{transition:none}
.poignee{display:block;width:44px;height:5px;border-radius:5px;background:#EAD9E2;margin:10px auto 0}
.f-fermer{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.f-fermer svg{width:20px;height:20px}
.fiche-in{display:grid}
.fiche-photo{margin:12px 14px 0;aspect-ratio:3/3.6;overflow:hidden;border-radius:20px;background:#F1E6EC}
.fiche-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;transition:opacity .3s}
.fiche-txt{padding:18px 18px 26px;display:grid;gap:13px}
.fiche-fam{font:500 10.5px/1 var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--or-t)}
.fiche-nom{font:500 clamp(24px,3vw,34px)/1.1 var(--titre)}
.fiche-desc{color:#5C4A55;font-size:14px}
.fiche-coloris{display:grid;gap:10px}
.fiche-coloris p{font-size:13px;color:var(--gris)}
.fiche-coloris b{font-weight:500;color:var(--encre)}
.fiche-prix{font-size:12px;color:var(--gris)}
.fiche-actions{display:flex;gap:10px}
.fiche-actions .btn{flex:1}
.qte{display:inline-flex;align-items:center;border-radius:99px;background:var(--blush)}
.qte button{width:42px;height:42px;display:grid;place-items:center}
.qte button svg{width:15px;height:15px}
.qte output{min-width:22px;text-align:center;font-weight:500}
.fiche-actions .qte button{height:50px}
.fiche-fav{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--gris);padding:8px}
.fiche-fav svg{width:18px;height:18px}
.fiche-fav.on{color:var(--rose-f)}
.fiche-nav{display:flex;justify-content:space-between;border-top:1px solid var(--filet);padding-top:12px}
.fiche-nav button{display:inline-flex;align-items:center;gap:8px;font-size:13px;padding:8px 0}
.fiche-nav svg{width:16px;height:16px}
.panier-in{padding:22px 18px 26px;display:grid;gap:13px}
.panier-titre{font:500 30px/1 var(--titre);padding-right:44px}
.lignes{list-style:none;display:grid}
.ligne{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--filet)}
.ligne img{width:58px;aspect-ratio:3/4;object-fit:cover;object-position:50% 15%;border-radius:12px}
.ligne b{display:block;font-weight:400;font-size:14px;line-height:1.3}
.ligne small{display:flex;align-items:center;gap:6px;color:var(--gris);font-size:12px}
.ligne small i{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.ligne .qte button{width:32px;height:32px}
.ligne-retirer{display:block;margin-top:4px;font-size:11.5px;color:var(--gris);text-decoration:underline;text-underline-offset:3px}
.panier-note{color:var(--gris);font-size:12.5px;text-align:center}
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));z-index:120;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--encre);color:#fff;padding:12px 18px;border-radius:99px;font:400 13px/1.3 var(--texte);text-align:center;max-width:calc(100vw - 32px);transition:opacity .3s,transform .4s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* =================== tablette =================== */
@media (min-width:720px){
  :root{--gout:28px}
  .grille{grid-template-columns:repeat(3,1fr);gap:26px 16px}
  .story button{width:84px}
  .story .rond{width:78px;height:78px}
  .feuille{left:50%;right:auto;width:min(560px,94vw);transform:translate(-50%,100%)}
  .feuille.on{transform:translate(-50%,var(--drag,0px))}
}

/* =================== bureau : onglets en haut, plus de barre du bas =================== */
@media (min-width:1080px){
  :root{--gout:40px}
  body{padding-bottom:0}
  .tabbar{display:none}
  .appbar-in{height:76px;gap:30px}
  .marque{height:62px;margin-right:0}
  .onglets-haut{display:flex;gap:6px;margin-right:auto}
  .onglets-haut button{height:38px;padding:0 16px;border-radius:99px;color:#fff;font-weight:400}
  .onglets-haut .actif{background:rgba(255,255,255,.22)}
  .recherche{display:flex;align-items:center;gap:10px;height:42px;width:320px;padding:0 16px;border-radius:99px;background:#fff}
  .recherche svg{width:18px;height:18px;color:var(--gris)}
  .recherche input{flex:1;min-width:0;border:0;outline:0;background:none;font:300 14px/1 var(--texte);color:var(--encre)}
  .vitrine-in{padding:34px 40px}
  .grille{grid-template-columns:repeat(4,1fr);gap:34px 20px}
  .carte-nom{font-size:15px}
  .infos-in{grid-template-columns:auto 1fr 1fr;justify-items:start;text-align:left;align-items:center;gap:40px;padding:36px 40px}
  .infos-in .pied-petit{grid-column:1/-1}
  .fiche{left:50%;right:auto;top:50%;bottom:auto;width:min(980px,92vw);max-height:90vh;border-radius:24px;transform:translate(-50%,-46%) scale(.97);opacity:0;transition:transform .5s var(--ease),opacity .35s}
  .fiche.on{transform:translate(-50%,-50%);opacity:1}
  .fiche .poignee{display:none}
  .fiche-in{grid-template-columns:1fr 1fr}
  .fiche-photo{margin:14px;aspect-ratio:auto;height:calc(90vh - 28px)}
  .fiche-txt{padding:50px 40px 34px 20px;align-content:center}
  .panier{left:auto;right:0;top:0;bottom:0;width:440px;max-height:none;border-radius:24px 0 0 24px;transform:translateX(100%)}
  .panier.on{transform:none}
  .panier .poignee{display:none}
}
@media (min-width:1400px){.grille{grid-template-columns:repeat(5,1fr)}}

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