:root{
  --nuit:#0f1111; --bleu:#131921; --bleu2:#232f3e; --bleu3:#37475a;
  --or:#febd69; --or2:#f3a847; --orange:#ff7a00; --ambre:#ffa41c;
  --fond:#f3f3f3; --blanc:#fff; --gris:#565959; --gris2:#888; --bord:#e3e6e6;
  --ok:#067d62; --err:#b12704; --prix:#b12704; --texte:#0f1111;
  --ombre:0 2px 10px rgba(15,17,17,.08); --ombre2:0 8px 28px rgba(15,17,17,.16);
  --rayon:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",system-ui,Arial,sans-serif;background:var(--fond);color:var(--texte);line-height:1.4}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0}

/* ---- Barres du haut ---- */
.promobar{background:linear-gradient(90deg,var(--orange),var(--or2));color:#3a1d00;font-size:13px;font-weight:600;text-align:center;padding:7px 12px}
.topbar{display:flex;align-items:center;gap:18px;background:var(--bleu);padding:12px 22px;position:sticky;top:0;z-index:120}
.logo{font-size:28px;font-weight:900;letter-spacing:-1.5px;color:#fff}
.logo-dot{color:var(--or)}
.recherche{flex:1;display:flex;max-width:720px;border-radius:10px;box-shadow:0 1px 0 rgba(0,0,0,.2)}
.recherche-wrap{position:relative;flex:1}
.recherche-wrap input{width:100%;border:none;padding:12px 16px;font-size:15px;outline:none;border-radius:10px 0 0 10px}
.recherche input{flex:1;border:none;padding:12px 16px;font-size:15px;outline:none}
.recherche button{border:none;background:var(--or);padding:0 20px;cursor:pointer;font-size:18px;transition:.15s}
.recherche button:hover{background:var(--or2)}
.liens{display:flex;gap:20px;align-items:center;color:#fff}
.lien-compte{display:flex;flex-direction:column;line-height:1.15;font-size:13px}
.lien-petit{color:#cfd6dd;font-size:12px}
.lien-gros{font-weight:700;font-size:15px}
.langpicker{position:relative}
.lang-btn{background:none;border:1px solid #37475a;color:#fff;border-radius:8px;padding:6px 10px;cursor:pointer;font-size:13px;font-weight:600}
.langpicker:hover .lang-menu,.langpicker:focus-within .lang-menu{display:block}
.lang-menu{display:none;position:absolute;top:100%;right:0;background:#fff;color:var(--texte);min-width:150px;border-radius:0 0 10px 10px;box-shadow:var(--ombre2);padding:6px;z-index:300}
.lang-menu a{display:block;color:var(--texte);padding:8px 12px;border-radius:6px;font-size:14px}
.lang-menu a:hover{background:var(--fond)}
.lang-menu a.actif{background:var(--bleu2);color:#fff}
.panier-lien{position:relative;display:flex;align-items:center;gap:6px;font-weight:700}
.panier-ico{font-size:24px}
.panier-txt{font-size:14px}
.badge{position:absolute;top:-6px;left:14px;background:var(--orange);color:#fff;border-radius:50%;min-width:20px;height:20px;display:grid;place-items:center;font-size:12px;font-weight:800;padding:0 4px}
.catnav{display:flex;flex-wrap:wrap;gap:6px;background:var(--bleu2);padding:8px 22px;position:sticky;top:60px;z-index:60}
.catnav a{color:#eaeded;font-size:14px;padding:5px 12px;border-radius:8px;white-space:nowrap;transition:.15s}
.catnav a:hover{background:var(--bleu3)}
.catnav-tout{font-weight:700}

main{max-width:1280px;margin:0 auto;padding:22px}

/* ---- Flash ---- */
.flash-zone{max-width:1280px;margin:14px auto 0;padding:0 22px}
.flash{padding:12px 16px;border-radius:10px;margin-bottom:8px;font-size:14px;font-weight:500}
.flash-ok{background:#e6f4ea;color:var(--ok);border:1px solid #b8e0c9}
.flash-err{background:#fbeaea;color:var(--err);border:1px solid #f0c4c0}

/* ---- Hero ---- */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:26px;background:linear-gradient(120deg,#131921,#37475a);border-radius:18px;padding:44px;color:#fff;margin-bottom:26px;overflow:hidden}
.hero-kicker{display:inline-block;background:var(--or);color:#3a1d00;font-weight:800;font-size:12px;padding:4px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:1px}
.hero-txt h1{font-size:38px;line-height:1.15;margin:14px 0}
.hero-txt p{color:#d3dae1;font-size:16px;margin-bottom:22px}
.hero-vignettes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero-vignette{background:#fff;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px;color:var(--texte);transition:.18s}
.hero-vignette:hover{transform:translateY(-4px)}
.hero-vignette img{aspect-ratio:1;object-fit:contain}
.hero-vignette span{font-size:12px;font-weight:600;color:var(--gris)}

/* ---- Barre départements (accueil) ---- */
.dept-row{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 14px;margin-bottom:8px}
.dept-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:1px solid var(--bord);border-radius:12px;padding:12px 16px;min-width:110px;transition:.15s}
.dept-chip:hover{border-color:var(--or);box-shadow:var(--ombre);transform:translateY(-3px)}
.dept-emo{font-size:26px}
.dept-nom{font-size:12px;font-weight:700;text-align:center;line-height:1.15}
.dept-n{font-size:11px;color:var(--gris2)}
.rm-n{color:var(--gris2);font-size:12px;font-weight:400}
.sous-cats{margin-bottom:8px}
.genre-chips{margin-bottom:8px}
.genre-chips .chip{background:var(--bleu2);color:#fff;border-color:var(--bleu2);font-weight:700}
.genre-chips .chip.actif{background:var(--or);color:#3a1d00;border-color:var(--or2)}

/* ---- Cartes rayons style Amazon (4 photos réelles) ---- */
.rayons-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-bottom:30px}
.rayon-card{background:#fff;border-radius:10px;padding:18px;box-shadow:var(--ombre);display:flex;flex-direction:column}
.rayon-card h3{font-size:18px;margin-bottom:12px;line-height:1.2}
.rayon-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1}
.rayon-cell{aspect-ratio:1;background:#f5f5f5;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.rayon-cell img{width:100%;height:100%;object-fit:cover;transition:.2s}
.rayon-cell:hover img{transform:scale(1.06)}
.rayon-more{margin-top:12px;color:var(--bleu3);font-weight:700;font-size:14px}
.rayon-more:hover{color:var(--orange);text-decoration:underline}

/* ---- Tuiles catégories (legacy) ---- */
.cat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-bottom:30px}
.cat-tile{background:#fff;border-radius:14px;padding:20px 12px;text-align:center;box-shadow:var(--ombre);transition:.18s;border:1px solid transparent}
.cat-tile:hover{transform:translateY(-4px);border-color:var(--or);box-shadow:var(--ombre2)}
.cat-tile-emoji{font-size:38px;display:block}
.cat-tile-nom{display:block;font-weight:700;margin-top:8px}
.cat-tile-n{display:block;font-size:12px;color:var(--gris2)}

/* ---- Rangées / carrousels ---- */
.rangee{margin-bottom:34px}
.rangee-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.rangee-tete h2{font-size:24px}
.voir-tout{color:var(--bleu3);font-weight:700;font-size:14px}
.carrousel{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 16px;scroll-snap-type:x mandatory}
.carrousel::-webkit-scrollbar{height:8px}
.carrousel::-webkit-scrollbar-thumb{background:#ccc;border-radius:8px}
.carrousel .carte{min-width:210px;max-width:210px;scroll-snap-align:start}

/* ---- Grille ---- */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}

/* ---- Carte produit ---- */
.carte{background:#fff;border-radius:var(--rayon);overflow:hidden;display:flex;flex-direction:column;transition:.18s;border:1px solid var(--bord);position:relative}
.carte:hover{box-shadow:var(--ombre2);transform:translateY(-4px);border-color:#d5d9d9}
.carte-img{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#fff;padding:14px}
.carte-img img{max-height:100%;object-fit:contain}
.no-img{width:100%;height:100%;background:linear-gradient(135deg,#eef1f4,#dfe4ea);display:flex;align-items:center;justify-content:center;text-align:center;padding:14px}
.no-img span{font-size:13px;font-weight:700;color:#8a94a0;line-height:1.3}
.no-img.grand span{font-size:20px}
.badge-remise{position:absolute;top:10px;left:10px;background:var(--prix);color:#fff;font-weight:800;font-size:13px;padding:3px 9px;border-radius:8px;z-index:2}
.grand-badge{font-size:18px;padding:6px 12px}
.badge-best{position:absolute;top:10px;right:10px;z-index:3;background:linear-gradient(90deg,#111,#37475a);color:var(--or);font-weight:800;font-size:11px;padding:3px 9px;border-radius:8px;letter-spacing:.4px;box-shadow:var(--ombre)}
.bestseller-note{background:#fff8ec;border:1px solid #ffe0ad;color:#7a3d00;padding:10px 14px;border-radius:10px;margin-bottom:14px;font-size:14px}
.carte-corps{padding:12px 14px 16px;border-top:1px solid #f2f2f2;display:flex;flex-direction:column;gap:6px}
.carte-nom{margin:0;font-size:14px;line-height:1.35;height:38px;overflow:hidden;font-weight:500}
.carte-note{display:flex;align-items:center;gap:6px;font-size:12px}
.etoiles{--pct:calc(var(--n)/5*100%);background:linear-gradient(90deg,var(--ambre) var(--pct),#d5d9d9 var(--pct));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:2px;font-size:14px}
.avis{color:var(--bleu3)}
.carte-prix-ligne{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.carte-prix{font-size:20px;font-weight:800;color:var(--prix)}
.carte-prix-ref{font-size:13px;color:var(--gris2);text-decoration:line-through}
.carte-livraison{font-size:12px;color:var(--ok);font-weight:600}

/* ---- Bandeau promo ---- */
.bandeau-promo{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(90deg,#fff3e0,#ffe0c2);border:1px solid #ffd7ad;border-radius:16px;padding:26px 30px;margin-bottom:34px;flex-wrap:wrap}
.bandeau-promo h3{font-size:22px;color:#7a3d00}
.bandeau-promo p{color:#9a5a1e;margin-top:4px}

.center{text-align:center;margin-top:18px}

/* ---- Page liste / recherche ---- */
.liste-tete{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.liste-tete h1{font-size:26px}
.liste-count{color:var(--gris)}
.filtres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.chip{background:#fff;border:1px solid var(--bord);padding:7px 15px;border-radius:20px;font-size:14px;transition:.15s}
.chip:hover{border-color:var(--bleu3)}
.chip.actif{background:var(--bleu2);color:#fff;border-color:var(--bleu2)}
.vide{text-align:center;padding:70px 20px;color:var(--gris)}
/* ---- Layout Amazon : filtres à gauche + résultats à droite ---- */
.listing{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:start}
.sidebar{position:sticky;top:118px;display:flex;flex-direction:column;gap:16px}
.fbloc{background:#fff;border:1px solid var(--bord);border-radius:12px;padding:14px 16px;box-shadow:var(--ombre)}
.fbloc h4{font-size:14px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #eee}
.fliste{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.fliste.scroll{max-height:280px;overflow-y:auto}
.fliste a{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:7px;font-size:13px;color:#232f3e}
.fliste a:hover{background:var(--fond)}
.fliste a.actif{background:var(--bleu2);color:#fff;font-weight:700}
.fliste a span{color:var(--gris2);font-size:12px}
.fliste a.actif span{color:#cfd6dd}
.fprix{display:flex;flex-direction:column;gap:8px}
.fprix-row{display:flex;align-items:center;gap:6px}
.fprix input{width:100%;padding:7px;border:1px solid var(--bord);border-radius:7px}
.listing-main{min-width:0}
.sortbar{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--ombre);margin-bottom:16px;flex-wrap:wrap}
.sortbar-titre{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sortbar-titre h1{font-size:22px}
.sortform select{padding:7px 10px;border:1px solid var(--bord);border-radius:8px}
@media(max-width:820px){.listing{grid-template-columns:1fr}.sidebar{position:static;flex-direction:row;flex-wrap:wrap}.fbloc{flex:1;min-width:150px}.fliste.scroll{max-height:180px}}

.search-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;background:#fff;padding:14px 16px;border-radius:12px;box-shadow:var(--ombre);margin-bottom:16px}
.search-bar label{margin:0;font-size:12px;font-weight:700;color:var(--gris)}
.search-bar select,.search-bar input{margin-top:4px;padding:8px 10px;border:1px solid var(--bord);border-radius:8px;font-weight:400}
.search-bar input{width:120px}
.pagination{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:26px}
.page-info{font-weight:700;color:var(--gris)}
.suggest-box{position:absolute;top:100%;left:0;right:0;background:#fff;color:var(--texte);border-radius:0 0 10px 10px;box-shadow:var(--ombre2);z-index:80;overflow:hidden;display:none}
.suggest-box a{display:flex;gap:10px;align-items:center;padding:9px 14px;font-size:14px}
.suggest-box a:hover,.suggest-box a.actif{background:var(--fond)}
.suggest-box img{width:34px;height:34px;object-fit:contain;border-radius:4px}
.suggest-box .sg-prix{margin-left:auto;color:var(--prix);font-weight:700}

/* ---- Fil d'ariane + fiche produit ---- */
.fil{font-size:13px;color:var(--gris);margin-bottom:16px}
.fil a:hover{color:var(--orange);text-decoration:underline}
.fiche{display:grid;grid-template-columns:1fr 1fr;gap:40px;background:#fff;padding:32px;border-radius:16px;box-shadow:var(--ombre)}
.fiche-img{position:relative;display:flex;align-items:center;justify-content:center;background:#fafafa;border-radius:12px;padding:20px;min-height:360px}
.fiche h1{font-size:26px;margin:10px 0}
.gros-note{font-size:14px;margin-bottom:14px}
.prix-bloc{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:14px 0;border-top:1px solid #eee;border-bottom:1px solid #eee}
.fiche-prix{font-size:34px;font-weight:900;color:var(--prix)}
.eco{background:#e6f4ea;color:var(--ok);font-weight:700;font-size:13px;padding:3px 10px;border-radius:8px}
.atouts{list-style:none;padding:0;margin:18px 0;display:grid;gap:8px}
.atouts li{font-size:14px}
.ajout-form{display:flex;gap:14px;align-items:flex-end;margin:22px 0}
.qte-label{font-size:13px;font-weight:600}
.ajout-form input{display:block;width:72px;padding:10px;border:1px solid var(--bord);border-radius:8px;margin-top:5px}
.rupture{color:var(--err);font-weight:800;font-size:18px}
.fiche-desc{margin-top:24px}
.fiche-desc h3{margin-bottom:8px}
.fiche-desc p{color:var(--gris);line-height:1.7}

/* ---- Boutons ---- */
.btn{display:inline-block;background:#fff;border:1px solid var(--bord);padding:11px 20px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;transition:.15s}
.btn:hover{background:#f7f7f7}
.btn-primaire{background:linear-gradient(180deg,var(--or),var(--or2));border-color:var(--or2);color:#3a1d00}
.btn-primaire:hover{filter:brightness(1.03)}
.btn-clair{background:#fff;border-color:#e0b892;color:#7a3d00}
.gros{font-size:16px;padding:14px 26px}
.btn-mini{background:#fff;border:1px solid var(--bord);padding:5px 11px;border-radius:6px;cursor:pointer;font-size:13px}
.btn-mini.danger,.danger{color:var(--err);border-color:#f0c4c0}
label{display:block;margin:10px 0;font-size:14px;font-weight:600}
label input,label select,label textarea{display:block;width:100%;padding:10px;margin-top:5px;border:1px solid var(--bord);border-radius:8px;font-weight:400;font-family:inherit}
label.checkbox{display:flex;gap:8px;align-items:center}
label.checkbox input{width:auto}
.inline{display:inline-flex;gap:6px;align-items:center;margin:0}
.inline input,.inline select{width:auto;margin:0}

/* ---- Panier / checkout / tables ---- */
.table-panier,.table-admin{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--ombre)}
.table-panier th,.table-panier td,.table-admin th,.table-admin td{padding:12px;border-bottom:1px solid #eee;text-align:left;font-size:14px}
.table-panier th,.table-admin th{background:var(--bleu2);color:#fff}
.panier-bas{margin-top:20px;text-align:right}
.total{font-size:22px}
.note{color:var(--gris);font-size:13px}
.actions{display:flex;gap:12px;justify-content:flex-end;margin-top:12px}
.checkout{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.checkout-form,.recap{background:#fff;padding:24px;border-radius:12px;box-shadow:var(--ombre)}
.checkout h2{font-size:17px;border-bottom:1px solid #eee;padding-bottom:8px}
.recap ul{list-style:none;padding:0}
.recap li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f2f2f2;font-size:14px}
.recap-lignes{border-top:1px solid #eee;margin-top:10px;padding-top:8px}
.recap-lignes p{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#333;margin:5px 0}
.recap-total{display:flex;justify-content:space-between;font-size:18px;margin-top:10px;border-top:2px solid #333;padding-top:8px}
.recap-koli{margin-top:16px;background:#fff8ec;border:1px solid #ffe0ad;border-radius:10px;padding:14px}
.recap-koli h3{font-size:15px;color:#7a3d00;margin-bottom:8px}
.recap-koli p{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#5a4630;margin:5px 0}
.recap-koli .koli-total{border-top:1px solid #ffd7ad;padding-top:6px;font-size:15px;color:#7a3d00}
.recap-koli .note{display:block}
.confirm{background:#fff;padding:32px;border-radius:16px;max-width:640px;margin:0 auto;text-align:center;box-shadow:var(--ombre)}
.ok-titre{color:var(--ok)}
.ticket{text-align:left;border:1px dashed var(--bord);border-radius:12px;padding:18px;margin:20px 0}
.ticket ul{list-style:none;padding:0}
.ticket li{display:flex;justify-content:space-between;padding:4px 0}
.ticket-total{font-size:20px;border-top:2px solid #333;padding-top:8px;margin-top:8px}

/* ---- Admin ---- */
.admin-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.admin-nav{display:flex;gap:10px;flex-wrap:wrap}
.cockpit{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:18px 0}
.coq{background:#fff;border-radius:14px;padding:20px;box-shadow:var(--ombre);display:flex;flex-direction:column;gap:4px}
.coq-lbl{font-size:13px;color:var(--gris);font-weight:600}
.coq-val{font-size:26px;font-weight:900;color:var(--bleu2)}
.coq-sub{font-size:12px;color:var(--gris2)}
.coq-benef{background:linear-gradient(135deg,#067d62,#0a9a78);color:#fff}
.coq-benef .coq-lbl,.coq-benef .coq-sub{color:#d6f5ec}
.coq-benef .coq-val{color:#fff;font-size:30px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:20px 0}
.stat{background:#fff;padding:18px;border-radius:12px;text-align:center;display:flex;flex-direction:column;gap:4px;box-shadow:var(--ombre)}
.stat-val{font-size:24px;font-weight:800;color:var(--bleu2)}
.stat span:last-child{color:var(--gris);font-size:13px}
.mini-img img{width:40px;height:40px;object-fit:contain}
.marge{color:var(--ok);font-weight:700}
.actions-cell{display:flex;gap:6px;align-items:center}
.statut{padding:3px 10px;border-radius:12px;font-size:12px;font-weight:600}
.statut-en_attente{background:#fff3cd;color:#856404}
.statut-paye{background:#d4edda;color:#155724}
.statut-expedie{background:#cce5ff;color:#004085}
.statut-livre{background:#d1ecf1;color:#0c5460}
.statut-annule{background:#f8d7da;color:#721c24}
.login-box,.form-produit{background:#fff;padding:26px;border-radius:12px;max-width:520px;margin:0 auto;box-shadow:var(--ombre)}
.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.apercu{width:100px;margin-top:8px;border:1px solid var(--bord);border-radius:8px}
.src{padding:1px 7px;border-radius:8px;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.src-demo{background:#e6f4ea;color:#067d62}
.src-cj{background:#e0ecff;color:#1f4a8f}
.src-temu{background:#ffe6d6;color:#c05a1f}
.src-manuel{background:#eee;color:#555}
.hint{display:block;color:var(--gris);font-weight:400;margin-top:4px}
.deux-blocs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:10px}
.note-cell{max-width:280px}
.notifs{max-height:520px;overflow:auto}
.notif-item{background:#fff;border:1px solid var(--bord);border-radius:10px;padding:12px;margin-bottom:10px}
.notif-item pre{white-space:pre-wrap;font-size:12px;color:var(--gris);margin:6px 0;font-family:inherit}

/* ---- Menu Rayons (dropdown) ---- */
.rayons{position:relative}
.catnav-tout{font-weight:700;background:none;border:none;color:#fff;font-size:14px;padding:5px 12px;border-radius:8px;cursor:pointer}
.rayons:hover .rayons-menu,.rayons:focus-within .rayons-menu{display:grid}
.rayons-menu{display:none;position:absolute;top:calc(100% + 4px);left:0;background:#fff;color:var(--texte);min-width:520px;max-width:90vw;border-radius:12px;box-shadow:var(--ombre2);padding:10px;z-index:200;grid-template-columns:1fr 1fr;gap:2px}
.rayons:hover .rayons-menu,.rayons:focus-within .rayons-menu{display:grid}
.rayons-menu a{color:var(--texte);padding:10px 14px;border-radius:8px;font-size:14px}
.rayons-menu a:hover{background:var(--fond)}
.catnav-promo{color:#ffd7ad !important;font-weight:700}

/* ---- Fiche produit 3 colonnes (style Amazon) ---- */
.produit-3col{display:grid;grid-template-columns:1fr 1.3fr 320px;gap:26px;background:#fff;padding:26px;border-radius:16px;box-shadow:var(--ombre)}
.pcol-img{position:relative;display:flex;align-items:flex-start;justify-content:center;background:#fafafa;border-radius:12px;padding:20px;min-height:340px}
.pcol-img img{max-height:420px;object-fit:contain;position:sticky;top:80px}
.pcol-centre h1{font-size:24px;margin:8px 0}
.lien-note{display:inline-flex;gap:8px;align-items:center;font-size:13px;margin-bottom:8px}
.lien-note:hover .avis{color:var(--orange);text-decoration:underline}
.pcol-centre hr{border:none;border-top:1px solid #eee;margin:12px 0}
.mini-remise{background:var(--prix);color:#fff;font-weight:800;font-size:15px;padding:3px 9px;border-radius:8px}
.apropos-titre{font-weight:700;margin:16px 0 6px}
.apropos{margin:0;padding-left:20px;color:#333}
.apropos li{margin:6px 0;line-height:1.5}

/* Souvent achetés ensemble */
.ensemble{margin-top:24px;border-top:1px solid #eee;padding-top:16px}
.ensemble h3{margin-bottom:12px}
.ensemble-ligne{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ens-item{width:80px;height:80px;background:#fafafa;border:1px solid var(--bord);border-radius:10px;display:grid;place-items:center;overflow:hidden}
.ens-item img{max-width:100%;max-height:100%;object-fit:contain}
.ens-plus{font-size:22px;color:var(--gris2)}
.ens-total{margin-left:auto;display:flex;flex-direction:column;gap:8px}

/* Buy box */
.buybox{border:1px solid var(--bord);border-radius:14px;padding:20px;height:fit-content;position:sticky;top:80px;box-shadow:var(--ombre)}
.bb-prix{font-size:28px;font-weight:900;color:var(--prix)}
.bb-livraison,.bb-date{font-size:13px;color:#333;margin:6px 0}
.bb-stock{color:var(--ok);font-weight:700;font-size:16px;margin:10px 0}
.bb-form{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.bb-qte{font-size:13px;font-weight:600}
.bb-qte select{width:100%;padding:8px;border:1px solid var(--bord);border-radius:20px;margin-top:4px}
.bb-btn{width:100%;border-radius:20px}
.bb-acheter{background:linear-gradient(180deg,#ffa41c,#ff8f00);border-color:#ff8f00;color:#3a1d00;font-weight:700}
.bb-secure{font-size:12px;color:var(--gris);text-align:center;margin-top:10px}

/* Avis */
.avis-section{background:#fff;border-radius:16px;padding:26px;margin-top:26px;box-shadow:var(--ombre)}
.avis-grid{display:grid;grid-template-columns:220px 1fr;gap:30px;margin-top:16px}
.avis-resume{text-align:center}
.avis-gros{font-size:46px;font-weight:900;line-height:1}
.avis-gros span{font-size:20px;color:var(--gris2)}
.avis-resume p{color:var(--gris);margin-top:6px}
.avis-barres{display:flex;flex-direction:column;gap:8px;justify-content:center}
.avis-barre{display:flex;align-items:center;gap:12px}
.ab-label{width:34px;font-size:13px;color:var(--bleu3)}
.ab-track{flex:1;height:16px;background:#eee;border-radius:8px;overflow:hidden}
.ab-fill{height:100%;background:linear-gradient(90deg,var(--ambre),var(--or2))}
.ab-pct{width:40px;font-size:13px;color:var(--gris);text-align:right}

/* Promos + suivi */
.promos-hero{background:linear-gradient(90deg,#b12704,#ff7a00);color:#fff;border-radius:16px;padding:30px;margin-bottom:22px}
.promos-hero h1{font-size:30px}
.suivi-box{max-width:720px;margin:0 auto;background:#fff;padding:28px;border-radius:16px;box-shadow:var(--ombre)}
.suivi-form{display:flex;gap:10px;margin:16px 0}
.suivi-form input{flex:1;padding:12px;border:1px solid var(--bord);border-radius:10px}
.suivi-res{margin-top:20px;border-top:1px solid #eee;padding-top:18px}
.suivi-tete{display:flex;justify-content:space-between;align-items:center}
.suivi-ref{font-size:20px;font-weight:800}
.stepper{display:flex;gap:8px;margin:22px 0}
.step{flex:1;text-align:center;position:relative;color:var(--gris2)}
.step-dot{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#eee;margin:0 auto 6px;font-weight:800}
.step-lib{font-size:13px}
.step-ok{color:var(--ok)}
.step-ok .step-dot{background:var(--ok);color:#fff}

/* ---- Vendez sur AMAJON ---- */
.vendre-hero{background:linear-gradient(120deg,#0f3d3e,#37475a);color:#fff;border-radius:16px;padding:34px;margin-bottom:24px}
.vendre-hero h1{font-size:30px}
.vendre-hero p{color:#d3dae1;margin-top:8px;max-width:680px}
.vendre-wrap{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.vendre-form,.vendre-aside{background:#fff;padding:24px;border-radius:14px;box-shadow:var(--ombre)}
.prereq{background:#fff8ec;border:1px solid #ffe0ad;border-radius:10px;padding:14px 16px;margin:12px 0 18px}
.prereq ul{margin:8px 0 0;padding-left:18px}
.vendre-aside h3{margin-bottom:10px}
.vendre-aside ol{padding-left:18px;display:flex;flex-direction:column;gap:8px}
.vendre-aside li{font-size:14px}

/* ---- Pages légales ---- */
.legal{background:#fff;padding:32px;border-radius:14px;max-width:860px;margin:0 auto;box-shadow:var(--ombre);line-height:1.65}
.legal h1{font-size:28px;margin-bottom:6px}
.legal h2{font-size:19px;margin:22px 0 8px;color:var(--bleu2)}
.legal-maj{color:var(--gris2);font-size:13px}
.legal-avert{background:#fbeaea;border:1px solid #f0c4c0;color:#7a1f16;border-radius:10px;padding:14px 16px;margin:16px 0}
.legal ul{padding-left:20px}
.legal-liens{margin-top:24px;font-weight:700}

/* ---- FAQ ---- */
.faq-hero{background:linear-gradient(120deg,#131921,#37475a);color:#fff;border-radius:16px;padding:32px;margin-bottom:20px}
.faq-hero h1{font-size:28px}
.faq-hero p{color:#d3dae1;margin:6px 0 16px}
.faq-search{display:flex;gap:10px;max-width:640px}
.faq-search input{flex:1;padding:12px 14px;border:none;border-radius:10px;font-size:15px}
.faq-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}

/* ---- Espace client ---- */
.compte-page{max-width:920px;margin:0 auto;padding:8px 4px 40px}
.compte-page h1{font-size:26px;margin:8px 0 14px}
.compte-page h2{font-size:19px;margin:26px 0 12px}
.compte-nav{display:flex;flex-wrap:wrap;gap:6px;border-bottom:2px solid #eaeef1;margin-bottom:22px}
.compte-nav a{padding:10px 14px;border-radius:8px 8px 0 0;color:#37475a;font-weight:600;font-size:14px}
.compte-nav a.on{background:#131921;color:#fff}
.compte-nav a.deco{margin-left:auto;color:#c0392b}
.compte-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:10px}
.ccard{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px;background:#fff;border:1px solid #e7ebee;border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.05);font-weight:600;color:#232f3e}
.ccard-n{font-size:30px;font-weight:800;color:#131921}
.ccard-ico{font-size:28px}
.ccard:hover{border-color:#febd69;box-shadow:0 3px 10px rgba(0,0,0,.09)}
/* Liste commandes */
.cmd-liste{display:flex;flex-direction:column;gap:10px}
.cmd-row{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;border:1px solid #e7ebee;border-radius:12px}
.cmd-row:hover{border-color:#febd69}
.cmd-main{display:flex;flex-direction:column}
.cmd-ref{font-weight:700;color:#131921}
.cmd-date{font-size:12px;color:#788}
.cmd-total{margin-left:auto;font-weight:700}
.statut{padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.s-en_attente{background:#fef3c7;color:#92600a}
.s-paye{background:#dcfce7;color:#166534}
.s-expedie{background:#dbeafe;color:#1e40af}
.s-livre{background:#dcfce7;color:#166534}
.s-annule{background:#fee2e2;color:#991b1b}
/* Détail commande : timeline */
.retour{display:inline-block;margin-bottom:6px;color:#37475a;font-weight:600}
.cmd-sub{color:#667;margin-bottom:16px}
.cmd-alerte{background:#fef3c7;color:#92600a;padding:12px 14px;border-radius:10px;margin-bottom:18px;font-weight:600}
.cmd-alerte.err{background:#fee2e2;color:#991b1b}
.timeline{list-style:none;padding:0;margin:0 0 10px;border-left:2px solid #e2e8ee}
.timeline li{position:relative;padding:0 0 22px 22px}
.timeline li::before{content:"";position:absolute;left:-8px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #cbd5e1}
.timeline li.done::before{background:#22c55e;border-color:#22c55e}
.timeline li b{display:block;color:#94a3b8}
.timeline li.done b{color:#131921}
.timeline li span{font-size:13px;color:#788}
.cmd-articles{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.cmd-art{display:flex;justify-content:space-between;padding:10px 14px;background:#fff;border:1px solid #eef1f3;border-radius:10px}
.cmd-recap{background:#f7f9fa;border:1px solid #e7ebee;border-radius:12px;padding:16px;max-width:460px}
.cmd-recap div{display:flex;justify-content:space-between;padding:4px 0;font-size:14px}
.cmd-recap .tt{border-top:1px solid #dde3e7;margin-top:6px;padding-top:10px;font-weight:800;font-size:16px}
.cmd-recap .knote{display:block;margin-top:10px;font-size:12.5px;color:#667;background:#fff;padding:10px;border-radius:8px}
/* Auth */
.auth-wrap{display:flex;justify-content:center;padding:24px 12px 50px}
.auth-card{width:100%;max-width:400px;background:#fff;border:1px solid #e7ebee;border-radius:16px;padding:28px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.auth-card h1{font-size:24px;margin-bottom:6px}
.auth-intro{color:#667;font-size:14px;margin-bottom:14px}
.auth-card label{display:block;font-weight:600;font-size:14px;margin-bottom:12px}
.auth-card input{width:100%;padding:11px 12px;border:1px solid #cdd6dc;border-radius:9px;font-size:15px;margin-top:5px}
.auth-alt{margin-top:16px;text-align:center;font-size:14px;color:#556}
.auth-alt a{color:#c45500;font-weight:700}
/* Favoris */
.fav-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.fav-carte{background:#fff;border:1px solid #e7ebee;border-radius:12px;padding:12px;text-align:center}
.fav-img img{width:100%;height:130px;object-fit:contain}
.fav-nom{display:block;font-size:13px;color:#232f3e;margin:8px 0 4px;max-height:36px;overflow:hidden}
.fav-prix{font-weight:800;margin-bottom:8px}
.btn-mini{padding:6px 12px;font-size:13px}
.bb-fav{background:#fff;border:1px solid #cdd6dc;width:100%;margin-top:8px}
.bb-fav.on{background:#fff0f3;border-color:#f9a8c0;color:#be123c}
.vide{color:#667;padding:20px 0}
.center{text-align:center;margin-top:16px}

/* ---- Marketplace : boutique vendeur & fiches ---- */
.bv-hero{display:flex;gap:20px;align-items:center;background:linear-gradient(120deg,#131921,#37475a);color:#fff;border-radius:16px;padding:26px;margin-bottom:20px}
.bv-logo{width:88px;height:88px;object-fit:cover;border-radius:14px;background:#fff}
.bv-hero h1{font-size:26px;margin-bottom:4px}
.bv-meta{color:#c8d2dc;font-size:14px}
.bv-desc{color:#e6ebf0;margin-top:8px;max-width:640px}
.bv-titre{margin:16px 0 12px;font-size:19px}
.vendu-par{margin:10px 0;font-size:14.5px;color:#445}
.vendu-par a{color:#c45500;font-weight:700}
.vp-ville{color:#788}
.vp-badge{background:#dcfce7;color:#166534;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:700;margin-left:6px}
.galerie-mini{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.galerie-mini img{width:56px;height:56px;object-fit:contain;border:1px solid #dde3e8;border-radius:8px;cursor:pointer;background:#fff}
.galerie-mini img:hover{border-color:#febd69}
/* Devanture vendeur façon profil FB */
.devanture{width:100%;background:#fff;border:1px solid #e7ebee;border-radius:16px;overflow:hidden;margin-bottom:22px}
/* Aperçu dans l'espace pro : pleine largeur (annule le .apercu générique 100px). */
.devanture.apercu{width:100%;max-width:100%;margin-bottom:16px}
.dv-cover{width:100%;height:230px;background:linear-gradient(120deg,#131921,#37475a);background-size:cover;background-position:center}
.dv-head{display:flex;align-items:flex-end;gap:18px;padding:0 24px;margin-top:-58px}
.dv-logo{width:128px;height:128px;border-radius:50%;border:5px solid #fff;background:#eef1f3;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.dv-logo img{width:100%;height:100%;object-fit:cover}
.dv-logo-txt{font-size:42px;font-weight:800;color:#37475a}
.dv-titre{padding-bottom:10px}
.dv-titre h1{font-size:25px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dv-meta{color:#556;font-size:14px;margin-top:2px}
.dv-desc{padding:14px 24px 4px;color:#333;max-width:820px}
.dv-onglets{display:flex;gap:6px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid #eef1f3;margin-top:10px}
.dv-onglets a{padding:7px 13px;border-radius:999px;background:#f0f2f4;color:#37475a;font-weight:600;font-size:13.5px}
.dv-onglets a.on{background:#131921;color:#fff}
@media(max-width:600px){.dv-cover{height:150px}.dv-logo{width:92px;height:92px}.dv-head{margin-top:-46px;gap:12px}.dv-titre h1{font-size:21px}}
/* Barre de bascule de rôle (admin) */
.switchbar{display:flex;align-items:center;gap:8px;background:#111a24;color:#fff;padding:7px 14px;font-size:13px;position:sticky;top:0;z-index:400}
.switchbar .sw-lbl{opacity:.8;font-weight:700}
.switchbar a,.switchbar button{color:#cdd6dc;background:transparent;border:1px solid #33414d;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;cursor:pointer}
.switchbar a.on,.switchbar button.on{background:#febd69;color:#131921;border-color:#febd69}
.switchbar a:hover,.switchbar button:hover{border-color:#febd69}
.sw-vendeur{position:relative}
.sw-menu{display:none;position:absolute;top:110%;left:0;background:#fff;border:1px solid #dde3e8;border-radius:10px;min-width:200px;box-shadow:0 8px 24px rgba(0,0,0,.2);overflow:hidden;z-index:401}
.sw-vendeur:hover .sw-menu{display:block}
.sw-menu a{display:block;color:#232f3e;border:none;border-radius:0;padding:9px 14px;font-weight:500}
.sw-menu a:hover{background:#f0f2f4}
.switchbar .sw-demo{margin-left:auto;border-color:#8b5cf6;color:#c4b5fd}
/* Sélecteur de rôle sur le tableau de bord admin */
.role-test{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#f3f0ff;border:1px solid #ddd6fe;border-radius:12px;padding:12px 16px;margin-bottom:16px}
.role-test .rt-lbl{font-weight:700;color:#5b21b6}
.role-test .rt-info{color:#7c6f9c;font-size:12.5px;margin-left:auto}
.rt-vendeur{position:relative}
.rt-menu{display:none;position:absolute;top:105%;left:0;background:#fff;border:1px solid #dde3e8;border-radius:10px;min-width:210px;box-shadow:0 8px 24px rgba(0,0,0,.18);overflow:hidden;z-index:60}
.rt-vendeur:hover .rt-menu{display:block}
.rt-menu a{display:block;padding:9px 14px;color:#232f3e;font-weight:500}
.rt-menu a:hover{background:#f0f2f4}
.pastille{background:#e11d48;color:#fff;border-radius:999px;padding:1px 7px;font-size:11px;font-weight:800;margin-left:4px}
/* Produit : couleurs + sous-catégorie + souvent vendus avec (form) */
.couleurs-bloc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0}
.couleurs-lbl{font-weight:700;color:#445;font-size:14px}
.couleur-chip{background:#f0f2f4;border:1px solid #dde3e8;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600;color:#232f3e}
.ss-cat{color:#788;font-size:13px;margin:2px 0 8px}
.souvent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;margin:6px 0 12px}
.souvent-item{display:flex;align-items:center;gap:7px;background:#f7f9fa;border:1px solid #eef1f3;border-radius:8px;padding:7px 10px;font-size:13px;font-weight:500}
.souvent-item input{width:auto}
/* Messagerie client <-> vendeur */
.chat{display:flex;flex-direction:column;gap:8px;max-width:640px;margin:10px 0;padding:12px;background:#f7f9fa;border:1px solid #e7ebee;border-radius:12px;max-height:420px;overflow-y:auto}
.msg{display:flex;flex-direction:column;max-width:78%}
.msg-moi{align-self:flex-end;align-items:flex-end}
.msg-autre{align-self:flex-start;align-items:flex-start}
.msg-bulle{padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.35;word-break:break-word}
.msg-moi .msg-bulle{background:#131921;color:#fff;border-bottom-right-radius:4px}
.msg-autre .msg-bulle{background:#fff;border:1px solid #dde3e8;color:#232f3e;border-bottom-left-radius:4px}
.msg-meta{font-size:11px;color:#8a97a3;margin-top:2px}
.chat-form{display:flex;gap:8px;max-width:640px;margin-top:8px}
.chat-form input{flex:1;padding:11px 13px;border:1px solid #cdd6dc;border-radius:10px;font-size:14px}
/* Ticket de commande vendeur (imprimable) */
.ticket-pro{max-width:420px;background:#fff;border:2px dashed #37475a;border-radius:12px;padding:22px;font-size:14.5px}
.ticket-pro h1{font-size:19px;margin-bottom:2px}
.tk-head{color:#667;font-size:13px}
.tk-table{width:100%;border-collapse:collapse;margin:8px 0}
.tk-table th,.tk-table td{text-align:left;padding:5px 4px;border-bottom:1px solid #eef1f3;font-size:13.5px}
.tk-tot{font-size:16px}
.tk-cash{background:#fef3c7;border:1px dashed #d97706;border-radius:8px;padding:10px;font-size:15px}
@media print{
  header,footer,nav,.promobar,.catnav,.compte-nav,.no-print,.flash-zone{display:none !important}
  .ticket-pro{border:1px solid #000;max-width:none}
  body{background:#fff}
}
.faq-count{color:var(--gris);font-size:14px;margin-bottom:12px}
.faq-list{display:flex;flex-direction:column;gap:10px;max-width:900px}
.faq-item{background:#fff;border:1px solid var(--bord);border-radius:10px;padding:4px 16px;box-shadow:var(--ombre)}
.faq-item summary{cursor:pointer;padding:14px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";font-size:22px;color:var(--gris2)}
.faq-item[open] summary:after{content:"–"}
.faq-tag{font-size:11px;background:#eef;color:#556;padding:2px 8px;border-radius:8px;font-weight:600;white-space:nowrap}
.faq-item p{padding:0 0 16px;color:#333;line-height:1.6;margin:0}

/* ---- Footer ---- */
.pied{background:var(--bleu);color:#cfd6dd;margin-top:50px}
.pied-cols{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;padding:40px 22px}
.pied-cols h4{color:#fff;margin-bottom:10px}
.pied-cols p{font-size:14px;margin:5px 0}
.pied-bas{background:#0b0f14;text-align:center;padding:16px;font-size:13px;color:#9aa5b1}

/* ---- Responsive ---- */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding:30px}
  .hero-txt h1{font-size:28px}
  .fiche,.checkout,.deux-blocs{grid-template-columns:1fr}
}
@media(max-width:640px){
  .recherche{order:3;flex-basis:100%;max-width:none}
  .topbar{flex-wrap:wrap;gap:12px}
  .catnav{top:0;position:static}
  .panier-txt,.lien-petit{display:none}
}