/* Boutique flash — chéchias. Styles repris de la maquette Claude Design. */

*{box-sizing:border-box}
body{margin:0;background:#fdfdfc;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#1a1a1a;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
[hidden]{display:none!important}
body.fiche-ouverte{overflow:hidden}

@keyframes sheetUp{from{transform:translateY(40px);opacity:.4}to{transform:translateY(0);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{to{opacity:0;visibility:hidden}}

.ref{font:11px ui-monospace,Menlo,monospace;color:#6b6b6b}

/* ---------- En-têtes ---------- */

.entete{position:sticky;top:0;z-index:10;background:rgba(253,253,252,0.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(0,0,0,0.07)}
.entete-catalogue{padding:12px 14px 10px}
.entete-ligne{display:flex;align-items:center;justify-content:space-between;gap:10px}
.entete-simple{padding:10px 14px;display:flex;align-items:center;gap:6px}
.entete-partage{padding:12px 16px}
.entete-titre{font:600 16px 'Helvetica Neue',sans-serif}
.entete-sous-titre{font:12px 'Helvetica Neue',sans-serif;color:#6b6b6b}
.entete-partage .entete-sous-titre{margin-top:2px}
.bandeau-lecture{font:12px 'Helvetica Neue',sans-serif;color:#555;background:#f2f1ed;text-align:center;padding:7px 12px}

.logo{width:40px;height:40px;border-radius:999px;background:#1a1a1a;display:flex;align-items:center;justify-content:center;color:#fff;font:22px/40px Pacifico,'Brush Script MT',cursive}
.logo span{display:block}

.entete-prix{flex:1;min-width:0}
.entete-prix-montant{font:600 15px 'Helvetica Neue',sans-serif;white-space:nowrap}
.entete-prix-detail{font:12px 'Helvetica Neue',sans-serif;color:#6b6b6b;margin-top:1px}

.btn-retour{width:44px;height:44px;display:flex;align-items:center;font:300 24px 'Helvetica Neue',sans-serif;color:#1a1a1a}

/* ---------- Filtres ---------- */

.btn-filtres{flex:none;display:flex;align-items:center;gap:8px;font:600 13px 'Helvetica Neue',sans-serif;color:#1a1a1a;padding:9px 15px;border-radius:999px;border:1px solid rgba(0,0,0,0.18);background:#fdfdfc;min-height:40px}
.btn-filtres.est-actif{color:#fff;border-color:#1a1a1a;background:#1a1a1a}
.icone-filtres{display:flex;flex-direction:column;gap:3px;width:14px}
.icone-filtres span{height:2px;border-radius:2px;background:currentColor;width:14px}
.icone-filtres span:nth-child(2){width:10px}
.icone-filtres span:nth-child(3){width:6px}
.pastille{min-width:18px;height:18px;border-radius:999px;background:#fdfdfc;color:#1a1a1a;font:600 11px/18px 'Helvetica Neue',sans-serif;text-align:center;padding:0 4px}

.panneau-filtres{position:absolute;top:100%;left:12px;right:12px;margin-top:6px;background:#fdfdfc;border:1px solid rgba(0,0,0,0.1);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.14);padding:14px;animation:fadeIn .15s ease}
.panneau-titre{font:600 13px 'Helvetica Neue',sans-serif}
.puces + .panneau-titre{margin-top:14px}
.puces{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.puce{flex:none;display:flex;align-items:center;justify-content:center;font:13px 'Helvetica Neue',sans-serif;padding:7px 15px;border-radius:999px;border:1px solid rgba(0,0,0,0.15);background:#fdfdfc;color:#1a1a1a;min-height:36px}
.puce.est-active{background:#1a1a1a;color:#fff;border-color:#1a1a1a}
.puce-couleur{flex:none;display:flex;align-items:center;gap:7px;font:12px 'Helvetica Neue',sans-serif;color:#1a1a1a;padding:6px 11px 6px 6px;border-radius:999px;border:1px solid rgba(0,0,0,0.12);background:#fdfdfc;min-height:36px}
.puce-couleur.est-active{background:#f2f1ed;border-color:#1a1a1a}
.pastille-couleur{width:22px;height:22px;border-radius:999px;border:1px solid rgba(0,0,0,0.18);display:block}
.puce-couleur.est-active .pastille-couleur{box-shadow:0 0 0 2px #1a1a1a}
.panneau-pied{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.lien-effacer{background:none;border:none;font:13px 'Helvetica Neue',sans-serif;color:#555;padding:8px 4px;text-decoration:underline}
.btn-ok{border:none;display:flex;align-items:center;font:600 13px 'Helvetica Neue',sans-serif;background:#1a1a1a;color:#fff;border-radius:999px;padding:10px 20px;margin-left:auto;min-height:40px}

/* ---------- États vides ---------- */

.vide{text-align:center}
.vide-catalogue{padding:70px 30px}
.vide-selection{padding:80px 30px}
.vide-forme{width:52px;height:52px;border-radius:999px;border:1px dashed rgba(0,0,0,0.25);margin:0 auto 16px}
.vide-selection .vide-forme{border-radius:14px}
.vide-titre{font:600 15px 'Helvetica Neue',sans-serif}
.vide-texte{font:13px/1.5 'Helvetica Neue',sans-serif;color:#6b6b6b;margin-top:6px}
.btn-pilule{border:none;display:inline-flex;align-items:center;justify-content:center;margin-top:18px;font:600 14px 'Helvetica Neue',sans-serif;padding:12px 20px;border-radius:999px;min-height:44px}
.btn-pilule-clair{border:1px solid rgba(0,0,0,0.2);background:#fff;color:#1a1a1a}
.btn-pilule-noir{background:#1a1a1a;color:#fff}

/* ---------- Grille du catalogue ---------- */

.grille{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 10px;padding:12px 14px 110px}
@media (min-width:768px){.grille{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1280px){.grille{grid-template-columns:repeat(6,1fr)}}

.vignette{display:block;scroll-margin-top:90px}
.vignette-media{position:relative}
.vignette-photo{position:relative;width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background-color:#eee;background-size:cover;background-position:center;outline-offset:-2px}
.vignette.est-selectionnee .vignette-photo{outline:2px solid #1a1a1a}
.vignette.est-epuisee .vignette-photo{filter:grayscale(1) opacity(0.45)}
.vignette-survol{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .25s ease}
.vignette-survol:hover{opacity:1}
.badge-epuisee{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:600 11px 'Helvetica Neue',sans-serif;letter-spacing:.4px;background:rgba(253,253,252,0.92);color:#555;padding:5px 10px;border-radius:999px}
.vignette-bouton{position:absolute;top:8px;right:8px;width:40px;height:40px;border-radius:999px;background:rgba(253,253,252,0.94);color:#1a1a1a;box-shadow:0 1px 6px rgba(0,0,0,0.18);font:300 22px/1 'Helvetica Neue',sans-serif;display:flex;align-items:center;justify-content:center}
.vignette.est-selectionnee .vignette-bouton{background:#1a1a1a;color:#fff}
.vignette-infos{padding:7px 2px 0}
.vignette-ligne{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.vignette-tailles{font:600 11px 'Helvetica Neue',sans-serif;color:#1a1a1a;white-space:nowrap}
.vignette-nom{font:13px 'Helvetica Neue',sans-serif;color:#1a1a1a;margin-top:1px}
.vignette.est-epuisee .vignette-tailles,
.vignette.est-epuisee .vignette-nom{color:#9a9a9a}

/* ---------- Barres collées en bas ---------- */

.barre-bas{position:sticky;bottom:0;z-index:11}
.barre-bas-catalogue{padding:10px 12px 14px;background:linear-gradient(to top,rgba(253,253,252,1) 60%,rgba(253,253,252,0))}
.barre-bas-actions{padding:12px 14px 16px;background:linear-gradient(to top,rgba(253,253,252,1) 70%,rgba(253,253,252,0))}

.barre-apercu{max-width:480px;margin:0 auto;background:#1a1a1a;border-radius:16px;padding:10px 10px 10px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 18px rgba(0,0,0,0.22);animation:fadeIn .2s ease}
.miniatures{display:flex}
.miniature{width:32px;height:32px;border-radius:8px;background-color:#333;background-size:cover;background-position:center;border:2px solid #1a1a1a}
.miniature + .miniature{margin-left:-10px}
.barre-texte{flex:1;min-width:0}
.barre-compte{font:600 13px 'Helvetica Neue',sans-serif;color:#fff}
.barre-refs{font:11px ui-monospace,Menlo,monospace;color:rgba(255,255,255,0.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barre-partager{flex:none;display:flex;align-items:center;font:600 13px 'Helvetica Neue',sans-serif;background:#fdfdfc;color:#1a1a1a;border-radius:999px;padding:11px 16px;min-height:44px}

.btn-large{width:100%;max-width:480px;display:flex;align-items:center;justify-content:center;margin:0 auto;border-radius:14px}
.btn-large-noir{gap:9px;font:600 15px 'Helvetica Neue',sans-serif;background:#1a1a1a;color:#fff;border:none;padding:15px;min-height:50px}
.btn-large-clair{margin-top:8px;font:600 14px 'Helvetica Neue',sans-serif;background:#fdfdfc;color:#1a1a1a;border:1px solid rgba(0,0,0,0.18);padding:13px;min-height:46px}
.icone-whatsapp{flex:none;display:block}
.legende{font:12px 'Helvetica Neue',sans-serif;color:#6b6b6b;text-align:center;margin-top:8px}

/* ---------- Listes (sélection, sélection reçue) ---------- */

.liste{display:flex;flex-direction:column;padding:6px 14px 130px}
.liste-partage{padding-bottom:150px}
.ligne{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(0,0,0,0.06)}
.ligne.est-vendue{opacity:.55}
.ligne-photo{flex:none;width:60px;height:60px;border-radius:10px;background-color:#eee;background-size:cover;background-position:center}
.ligne.est-vendue .ligne-photo{filter:grayscale(1)}
.ligne-infos{flex:1;min-width:0}
.ligne-nom{font:14px 'Helvetica Neue',sans-serif;margin-top:2px}
.ligne form{flex:none}
.btn-retirer{font:13px 'Helvetica Neue',sans-serif;color:#555;background:none;border:1px solid rgba(0,0,0,0.15);border-radius:999px;padding:9px 14px;min-height:40px}
.badge-vendue{flex:none;font:600 11px 'Helvetica Neue',sans-serif;color:#8a4b3a;background:#f5e9e4;padding:5px 10px;border-radius:999px}
.bandeau-vendues{margin:12px 14px 0;padding:11px 14px;border:1px solid rgba(0,0,0,0.12);border-radius:12px;background:#f7f5f0;font:13px/1.5 'Helvetica Neue',sans-serif;color:#1a1a1a}

/* ---------- Fiche produit (panneau du bas) ---------- */

.fiche{position:fixed;inset:0;z-index:20}
.fiche-fond{position:absolute;inset:0;background:rgba(20,18,15,0.4);animation:fadeIn .18s ease}
.fiche-panneau{position:absolute;left:0;right:0;bottom:0;max-width:480px;max-height:100%;overflow-y:auto;margin:0 auto;background:#fdfdfc;border-radius:20px 20px 0 0;padding:10px 16px 18px;animation:sheetUp .24s ease;box-shadow:0 -6px 30px rgba(0,0,0,0.18)}
.fiche-poignee{width:36px;height:4px;border-radius:99px;background:rgba(0,0,0,0.15);margin:0 auto 10px}
.fiche-fermer{border:none;padding:0;position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:999px;background:rgba(0,0,0,0.06);font:300 18px/1 'Helvetica Neue',sans-serif;color:#1a1a1a;z-index:1;display:flex;align-items:center;justify-content:center}
.fiche-media{position:relative}
.fiche-photo{width:100%;aspect-ratio:1/1;border-radius:14px;background-color:#eee;background-size:cover;background-position:center}
.fiche.est-epuisee .fiche-photo{filter:grayscale(1) opacity(0.6)}
.fiche-nav{border:none;position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;background:rgba(253,253,252,0.92);box-shadow:0 1px 8px rgba(0,0,0,0.18);font:300 24px/1 'Helvetica Neue',sans-serif;color:#1a1a1a;display:flex;align-items:center;justify-content:center;padding:0 0 3px}
.fiche-nav-precedent{left:8px}
.fiche-nav-suivant{right:8px}
.fiche-titre{display:flex;align-items:baseline;justify-content:space-between;margin-top:14px}
.fiche-nom{font:600 18px 'Helvetica Neue',sans-serif}
.fiche-ref{font:12px ui-monospace,Menlo,monospace;color:#6b6b6b}
.fiche-epuisee{margin-top:14px;padding:13px;text-align:center;font:600 14px 'Helvetica Neue',sans-serif;color:#555;background:#f2f1ed;border-radius:14px}
.fiche-consigne{font:13px 'Helvetica Neue',sans-serif;color:#555;margin-top:12px}
.fiche-tailles{display:flex;gap:8px;margin-top:8px}
.fiche-taille{flex:1;position:relative;display:flex;align-items:center;justify-content:center;font:600 14px 'Helvetica Neue',sans-serif;padding:12px 0;border-radius:12px;border:1px solid rgba(0,0,0,0.2);background:#fdfdfc;color:#1a1a1a;min-height:46px}
.fiche-taille.est-active{background:#1a1a1a;color:#fff;border-color:#1a1a1a}
.fiche-taille.est-indisponible{color:#b5b5b5;border-color:rgba(0,0,0,0.08);text-decoration:line-through;cursor:default}
.coche{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:999px;background:#1a1a1a;color:#fff;font:600 11px/18px 'Helvetica Neue',sans-serif;text-align:center}
.btn-fiche{width:100%;margin-top:14px;font:600 15px 'Helvetica Neue',sans-serif;background:#1a1a1a;color:#fff;border:1px solid #1a1a1a;border-radius:14px;padding:15px;min-height:50px}
.btn-fiche.est-dans-selection{background:#fdfdfc;color:#1a1a1a}

/* ---------- Toast ---------- */

.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:30;background:#1a1a1a;color:#fff;font:13px 'Helvetica Neue',sans-serif;padding:11px 18px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,0.25);pointer-events:none;animation:fadeIn .15s ease,fadeOut .2s ease 2.6s forwards}