:root{
  --bg:#0f0f11; --card:#15161a; --muted:#a7b0ba; --text:#e9edf2;
  --primary:#79c167; --primary-700:#62a653; --accent:#f5c754; --danger:#ff6b6b;
  --ring:0 0 0 3px rgba(121,193,103,.35); --radius:16px; --shadow:0 8px 30px rgba(0,0,0,.35);
  --border:1px solid rgba(255,255,255,0.06); --container:1128px;
}
*{box-sizing:border-box} html,body{margin:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans";
  color:var(--text);
  background:radial-gradient(1200px 600px at 10% -10%, #182018 0%, transparent 60%),
             radial-gradient(900px 500px at 110% -20%, #1c1620 0%, transparent 60%), var(--bg);
  line-height:1.55
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.pill{padding:.4rem .8rem; border-radius:999px; border:var(--border); background:rgba(255,255,255,.04); color:var(--muted); display:inline-flex; gap:.5rem; align-items:center; font-weight:600}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer;
  border-radius:12px; padding:.9rem 1.1rem; font-weight:700; letter-spacing:.2px;
  background:var(--primary); color:#0c140c; border:none; box-shadow:var(--shadow);
  transition:transform .08s ease, filter .2s ease;
}
.btn:hover{ transform: translateY(-1px); filter:brightness(1.05); }
.btn.secondary{ background:#23262b; color:var(--text); border:var(--border); box-shadow:none }
.btn[hidden]{display:none !important}
.tag{font-size:.75rem; color:#0e140e; background:var(--accent); padding:.2rem .5rem; border-radius:999px; font-weight:700}
.grid{display:grid; gap:24px}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background:linear-gradient(180deg, rgba(15,15,17,.85), rgba(15,15,17,.6));
  border-bottom:var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.logo{display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.3px}
.logo .mark{
  width:34px; height:34px; border-radius:10px;
  background:conic-gradient(from 210deg,#76d36b,#a8e68d 35%,#f4d66a 70%,#76d36b);
  box-shadow:0 4px 16px rgba(118,211,107,.45);
  overflow:hidden; display:inline-flex;
}
.logo .mark img{width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit}
nav ul{display:flex; list-style:none; gap:20px; padding:0; margin:0}
nav a{color:var(--muted); font-weight:600}
nav a:hover{color:var(--text)}
.nav-cta{display:flex; gap:10px; align-items:center}

.bubble{
  margin-left:.45rem; min-width:22px; height:22px; padding:0 .4rem;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:#79c167; color:#0c140c;
  font-weight:800; font-size:.85rem;
}

.hero{ padding:56px 0 24px; }
.hero-card{
  display:grid; grid-template-columns: 1.3fr 1fr; gap:28px; align-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:var(--border); border-radius:calc(var(--radius) + 4px);
  padding:28px; box-shadow:var(--shadow);
}
.hero h1{ font-family: Marcellus, serif; font-size: clamp(32px, 4.2vw, 46px); line-height:1.1; margin:10px 0 12px; }
.hero p{color:var(--muted); margin:0 0 20px}
.hero .actions{display:flex; gap:12px; flex-wrap:wrap}
.hero-illustration{ position:relative; isolation:isolate; }
.hero-illustration .card{ background:var(--card); border:var(--border); border-radius:18px; padding:16px; transform:rotate(-2deg); }
.hero-illustration .stamp{
  position:absolute; right:-10px; bottom:-10px; transform:rotate(8deg);
  background:#1a1e23; border:var(--border); border-radius:14px; padding:10px 14px; display:flex; align-items:center; gap:8px
}
.categories{padding:24px 0 6px}
.cat-row{display:flex; gap:10px; overflow:auto; padding-bottom:6px; scrollbar-width:none}
.cat{white-space:nowrap; border:var(--border); background:#15181e; color:#cfe7d0; padding:.6rem .85rem; border-radius:999px; font-weight:700}
.cat:hover{background:#1b1f25}
.section-title{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:8px 0 12px }
.section-title h2{font-size: clamp(20px, 3.2vw, 28px); margin:0}
.products{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.card-prod{
  background:var(--card); border:var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; min-height:100%;
  transition: transform .18s ease;
}
.card-prod:hover{ transform: translateY(-3px) }

/* ✅ Uniformisation des images produits */
.card-prod .media{
  position: relative;              /* pour les badges en overlay */
  aspect-ratio: 4/3;               /* ratio commun */
  background: #0b0c0e;
  overflow: hidden;                /* recadrage propre */
  display:grid; place-items:center;
}
.card-prod .media img{
  width:100%;
  height:100%;
  object-fit:cover;                /* recadre sans déformer */
  object-position:center;
  display:block;
}

.card-prod .body{padding:14px; display:grid; gap:10px}
.card-prod h3{margin:0; font-size:1rem}
.price{display:flex; align-items:center; gap:10px}
.price strong{font-size:1.05rem}
.price .old{color:#8a929b; text-decoration: line-through}
.meta{display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:.9rem}
.actions-row{display:flex; gap:10px}
.add{flex:1; text-align:center}
.fav{ width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:#23262b; border:var(--border) }
.badge{ position:absolute; left:12px; top:12px; z-index:2; }
.benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.benefit{ background:#14161b; border:var(--border); padding:16px; border-radius:16px; display:grid; gap:8px }
.newsletter{ margin:28px auto; max-width:800px; text-align:center; display:grid; gap:12px; justify-items:center; }
.newsletter form{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.field{ background:#0f1216; border:1px solid rgba(255,255,255,.08); color:var(--text); border-radius:12px; padding:.9rem 1rem; min-width:260px; outline:none }
.field:focus{ box-shadow: var(--ring) }
footer{margin:26px 0 40px; color:var(--muted)}
.foot{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:20px }
.foot h4{margin:.2rem 0 .6rem}
.foot a{color:var(--muted)}
.legal{margin-top:12px; font-size:.9rem; color:#8e98a3}

/* Mini-cart */
.cart-wrap{ position:relative }
.cart-panel{
  position:absolute; top:calc(100% + 10px); right:0; width:min(380px,92vw);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:var(--border); border-radius:18px; box-shadow:var(--shadow);
  padding:14px; display:none; z-index:70;
}
.cart-panel[open]{ display:grid; gap:12px }
.cart-head{ display:flex; justify-content:space-between; align-items:center; font-weight:800 }
.cart-list{ max-height:52vh; overflow:auto; display:grid; gap:10px }
.empty{ text-align:center; color:var(--muted); padding:10px }
.cart-item{
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
  background:#0f1216; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px;
}
.name{ font-weight:700 }
.muted{ color:var(--muted) }
.qty{ display:flex; align-items:center; gap:6px }
.qty-btn{ width:28px; height:28px; border-radius:8px; background:#23262b; border:var(--border); color:var(--text); cursor:pointer }
.cart-foot{ display:grid; gap:10px }
.cart-total{ display:flex; justify-content:space-between; align-items:center }
.cart-actions{ display:flex; gap:10px; justify-content:space-between }
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:var(--border); border-radius:12px; padding:.7rem 1rem; box-shadow:var(--shadow);
  display:none; align-items:center; gap:.6rem; z-index:60;
}
.toast.show{display:flex}
@media (max-width:640px){ .nav{height:auto; padding:12px 0; gap:12px; flex-wrap:wrap} .hero-card{padding:18px} .products{grid-template-columns:repeat(2,minmax(0,1fr))} .benefits{grid-template-columns:1fr} }
.cart-panel{ background:#15161a; backdrop-filter:none; -webkit-backdrop-filter:none; }


/* --- merged extras from other pages --- */

:root{
  --bg:#0f0f11; --card:#15161a; --muted:#a7b0ba; --text:#e9edf2;
  --primary:#79c167; --primary-700:#62a653; --danger:#ff6b6b;
  --ring:0 0 0 3px rgba(121,193,103,.35); --radius:16px; --shadow:0 8px 30px rgba(0,0,0,.35);
  --border:1px solid rgba(255,255,255,0.06); --container:1128px;
}
*{box-sizing:border-box} html,body{margin:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans";
  color:var(--text);
  background:radial-gradient(1200px 600px at 10% -10%, #182018 0%, transparent 60%),
             radial-gradient(900px 500px at 110% -20%, #1c1620 0%, transparent 60%), var(--bg);
}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
header{position:sticky; top:0; z-index:10; background:linear-gradient(#0f0f11CC,#0f0f1100);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
.brand img{width:32px; height:32px; border-radius:8px}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:32px 0}
.card{background:var(--card); border:var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px}
h1{font-family:Marcellus,serif; font-weight:400; letter-spacing:.2px; margin:8px 0 0; font-size:clamp(26px,3vw,36px)}
h2{font-family:Marcellus,serif; font-weight:400; margin:0 0 8px; font-size:22px}
.muted{color:var(--muted)}
label{display:block; font-weight:700; margin:12px 0 6px}
input,select{width:100%; background:#0e1013; border:var(--border); color:var(--text); border-radius:12px; padding:12px; outline:none}
input:focus{box-shadow:var(--ring)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:12px; padding:.85rem 1.1rem; font-weight:700; letter-spacing:.2px; background:var(--primary); color:#0c140c; border:none; cursor:pointer}
.btn.secondary{background:#23262b; color:#fff; border:var(--border)}
.notice{margin-top:12px; padding:.7rem .9rem; border-radius:12px; border:1px solid rgba(121,193,103,.28); background:rgba(121,193,103,.12); display:none}
.error{margin-top:12px; padding:.7rem .9rem; border-radius:12px; border:1px solid rgba(255,107,107,.25); background:rgba(255,107,107,.12); display:none}
@media (max-width: 960px){ .grid{grid-template-columns:1fr} }

nav ul{display:flex; gap:24px; list-style:none; margin:0; padding:0}
.logo{display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:1.05rem}
.logo .mark{display:inline-flex; width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg, #b8e986, #79c167)}
.nav-cta{display:inline-flex; gap:12px; align-items:center}
.cart-wrap{position:relative}
.cart-panel{position:absolute; right:0; top:52px; width:320px; background:var(--card); border:var(--border); border-radius:12px; box-shadow:var(--shadow); padding:12px; display:none}
.cart-wrap[aria-expanded='true'] .cart-panel, #cartBtn[aria-expanded='true'] + .cart-panel{display:block}
a{color:inherit; text-decoration:none}



:root{
  --bg:#0f0f11; --card:#15161a; --muted:#a7b0ba; --text:#e9edf2;
  --primary:#79c167; --primary-700:#62a653; --accent:#f5c754; --danger:#ff6b6b;
  --ring:0 0 0 3px rgba(121,193,103,.35); --radius:16px; --shadow:0 8px 30px rgba(0,0,0,.35);
  --border:1px solid rgba(255,255,255,0.06); --container:1128px;
}
*{box-sizing:border-box} html,body{margin:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans";
  color:var(--text);
  background:radial-gradient(1200px 600px at 10% -10%, #182018 0%, transparent 60%),
             radial-gradient(900px 500px at 110% -20%, #1c1620 0%, transparent 60%), var(--bg);
  line-height:1.55
}
a{color:inherit; text-decoration:none}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}

header{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
  background:linear-gradient(180deg, rgba(15,15,17,.85), rgba(15,15,17,.6)); border-bottom:var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px}
.logo{display:flex; align-items:center; gap:.7rem; font-weight:800}
.logo .mark{
  width:34px; height:34px; border-radius:10px;
  background:conic-gradient(from 210deg,#76d36b,#a8e68d 35%,#f4d66a 70%,#76d36b);
  box-shadow:0 4px 16px rgba(118,211,107,.45);
  overflow:hidden; display:inline-grid; place-items:center;
}
.logo .mark img{width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer;
  border-radius:12px; padding:.85rem 1.1rem; font-weight:700; letter-spacing:.2px;
  background:var(--primary); color:#0c140c; border:none; box-shadow:var(--shadow);
  transition:transform .08s ease, filter .2s ease}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05)}
.btn.secondary{background:#23262b; color:var(--text); border:var(--border); box-shadow:none}
.btn.ghost{background:transparent; border:var(--border); color:var(--text)}
.pill{padding:.35rem .7rem; border-radius:999px; border:var(--border); background:rgba(255,255,255,.04); color:var(--muted); font-weight:600}

main{padding:28px 0}
.grid{display:grid; gap:24px; grid-template-columns:1.2fr .8fr}
.card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:var(--border); border-radius:calc(var(--radius) + 4px); box-shadow:var(--shadow); padding:18px}
h1{font-family:Marcellus,serif; font-size:clamp(24px,3.6vw,34px); margin:0 0 8px}
h2{font-size:1.1rem; margin:0 0 10px}
.muted{color:var(--muted)}
.row{display:grid; gap:10px; grid-template-columns:1fr 1fr}

.pay-tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.tab-btn{padding:.6rem .9rem; border-radius:10px; border:var(--border); background:#1a1e23; color:var(--text); font-weight:700; cursor:pointer}
.tab-btn.active{background:var(--primary); color:#0c140c; border-color:transparent}
.tab{display:none}
.tab.active{display:grid; gap:10px}

.sum-item{display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; background:#0f1216; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px}
.sum-name{font-weight:700}
.qty{display:flex; align-items:center; gap:6px}
.qty-btn{width:28px;height:28px;border-radius:8px;background:#23262b;border:var(--border);color:var(--text);cursor:pointer}
.tot-row{display:flex; justify-content:space-between; align-items:center}
.total{font-size:1.15rem; font-weight:800}
.empty{padding:14px; text-align:center; color:var(--muted)}

/* Stripe mounts */
#payment-element{background:#0f1216; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px}
#payment-request-button{margin:6px 0}

@media (max-width:900px){ .grid{grid-template-columns:1fr} }


:root{
  --bg:#0f0f11; --card:#15161a; --muted:#a7b0ba; --text:#e9edf2;
  --primary:#79c167; --primary-700:#62a653; --accent:#f5c754; --danger:#ff6b6b;
  --ring:0 0 0 3px rgba(121,193,103,0.35); --radius:16px; --shadow:0 8px 30px rgba(0,0,0,.35);
  --border:1px solid rgba(255,255,255,0.06); --container:1128px;
}
*{box-sizing:border-box} html,body{margin:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans";
  color:var(--text);
  background:radial-gradient(1200px 600px at 10% -10%, #182018 0%, transparent 60%),
             radial-gradient(900px 500px at 110% -20%, #1c1620 0%, transparent 60%), var(--bg);
  line-height:1.55
}
a{color:inherit; text-decoration:none}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
header{position:sticky; top:0; z-index:10; background:linear-gradient(#0f0f11CC,#0f0f1100);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
.brand img{width:32px; height:32px; border-radius:8px}
.nav a.btn{background:#1e2229; color:#e9edf2; border:var(--border);}
.hero{padding:44px 0 24px}
.card{background:var(--card); border:var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px}
h1{font-family:Marcellus, serif; letter-spacing:.2px; font-weight:400; margin:0 0 10px; font-size:36px}
p.lead{color:var(--muted); margin:0 0 24px}
label{display:block; font-weight:600; margin:14px 0 8px}
input[type=email]{
  width:100%; background:#0e1013; border:var(--border); color:var(--text); outline:none; font-size:16px;
  padding:14px 14px; border-radius:12px; transition:border .2s, box-shadow .2s;
}
input[type=email]:focus{ box-shadow:var(--ring); border-color:#2d3a2f }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:12px; padding:.9rem 1.1rem;
  font-weight:700; letter-spacing:.2px; background:var(--primary); color:#0c140c; border:none; box-shadow:var(--shadow);
  cursor:pointer;
}
.btn:hover{ background:var(--primary-700) }
.row{display:grid; grid-template-columns:1.2fr 1fr; gap:28px}
.muted{color:var(--muted)}
.msg{margin-top:14px}
@media (max-width: 920px){
  .row{grid-template-columns:1fr}
}


:root{
  --bg:#0f0f11; --card:#15161a; --muted:#a7b0ba; --text:#e9edf2;
  --primary:#79c167; --primary-700:#62a653; --accent:#f5c754; --danger:#ff6b6b;
  --ring:0 0 0 3px rgba(121,193,103,0.35); --radius:16px; --shadow:0 8px 30px rgba(0,0,0,.35);
  --border:1px solid rgba(255,255,255,0.06); --container:1128px;
}
*{box-sizing:border-box} html,body{margin:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans";
  color:var(--text);
  background:radial-gradient(1200px 600px at 10% -10%, #182018 0%, transparent 60%),
             radial-gradient(900px 500px at 110% -20%, #1c1620 0%, transparent 60%), var(--bg);
  line-height:1.55
}
a{color:inherit; text-decoration:none}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:12px; padding:.9rem 1.1rem;
  font-weight:700; letter-spacing:.2px; background:var(--primary); color:#0c140c; border:none; box-shadow:var(--shadow);
  transition:transform .08s ease, filter .2s ease; cursor:pointer
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05)}
.btn.secondary{background:#23262b; color:var(--text); border:var(--border); box-shadow:none}
.pill{padding:.35rem .7rem; border-radius:999px; border:var(--border); background:rgba(255,255,255,.04); color:var(--muted); display:inline-flex; gap:.5rem; align-items:center; font-weight:600}
header{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px); background:linear-gradient(180deg, rgba(15,15,17,.85), rgba(15,15,17,.6)); border-bottom:var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.logo{display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.3px}
.logo .mark{ width:34px; height:34px; border-radius:10px; overflow:hidden; display:inline-flex; }
.logo .mark img{ width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit; }
nav ul{display:flex; list-style:none; gap:20px; padding:0; margin:0}
nav a{color:var(--muted); font-weight:600} nav a:hover{color:var(--text)}
.nav-cta{display:flex; gap:10px}
.auth-wrap{min-height:calc(100dvh - 72px); display:grid; place-items:center; padding:40px 20px}
.auth-card{
  width:100%; max-width:520px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:var(--border); border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow); padding:26px; display:grid; gap:18px
}
.auth-card h1{font-family:Marcellus,serif; font-size:clamp(24px, 3.6vw, 32px); line-height:1.15; margin:0}
.auth-card p{margin:0; color:var(--muted)}
.field{display:grid; gap:8px}
.label{font-weight:700; color:#dfe7e1; display:flex; justify-content:space-between; align-items:center}
.input{background:#0f1216; border:1px solid rgba(255,255,255,.08); color:var(--text); border-radius:12px; padding:.9rem 1rem; outline:none; width:100%}
.input:focus{box-shadow:var(--ring)}
.row{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.muted{color:var(--muted)}
.error{color:var(--danger); font-size:.95rem}
.actions{display:grid; gap:12px}
.or{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; color:var(--muted)}
.or::before,.or::after{content:""; height:1px; background:rgba(255,255,255,.08)}
.sso{display:grid; gap:10px} .sso .btn{width:100%}
.small{font-size:.95rem} .helper{display:flex; gap:8px; flex-wrap:wrap}
.showpass{position:absolute; right:10px; top:50%; transform:translateY(-50%); background:#23262b; border:var(--border); border-radius:10px; padding:.35rem .6rem; cursor:pointer}
.relative{position:relative}
.checkbox{display:flex; align-items:center; gap:10px; background:#0f1216; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:.65rem .8rem}
.checkbox input{accent-color:var(--primary)}
footer{margin:26px 0 40px; color:var(--muted); text-align:center}
.link{color:#cfe7d0; font-weight:700} .link:hover{color:#fff}


/* ======= System dialog (remplace alert) ======= */
.overlay{position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); z-index:200; padding:16px}
.overlay[open]{display:flex}
.sys-modal{width:min(520px,92vw);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08); border-radius:20px; box-shadow:var(--shadow);
  color:var(--text); padding:22px; display:grid; gap:14px}
.sys-modal h2{font-family:Marcellus,serif; margin:0 0 4px 0; font-size:1.5rem}
.sys-actions{display:grid; grid-auto-flow:column; justify-content:end; gap:10px}
.sys-modal.is-success{border-color:rgba(121,193,103,.45); box-shadow:0 10px 40px rgba(121,193,103,.20)}
.sys-modal.is-error  {border-color:rgba(255,107,107,.45); box-shadow:0 10px 40px rgba(255,107,107,.15)}
.sys-modal.is-warning{border-color:rgba(245,199,84,.45);  box-shadow:0 10px 40px rgba(245,199,84,.15)}


/* ===== Smaller forms (profile/reset) ===== */
:root{ --bg:#0f0f11; --card:#15161a; --muted:#a7b0ba; --text:#e9edf2; --primary:#79c167; --border:1px solid rgba(255,255,255,.06); --radius:16px; --shadow:0 8px 30px rgba(0,0,0,.35); }
*{box-sizing:border-box} html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans"; color:var(--text); background:var(--bg)}
.container{max-width:960px; margin:0 auto; padding:22px}
.card{background:var(--card); border:var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px}
h1{font-family:Marcellus,serif; font-weight:400; letter-spacing:.2px; margin:0 0 8px; font-size:clamp(28px,3.4vw,40px)}
.lead{color:var(--muted); margin:0 0 20px}
label{display:block; font-weight:700; margin:12px 0 8px}
input{width:100%; background:#0e1013; border:var(--border); color:var(--text); border-radius:12px; padding:14px; outline:none}
.row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:.9rem 1.1rem; border-radius:12px; background:var(--primary); color:#0c140c; font-weight:700; border:none; cursor:pointer}
.btn.secondary{background:#23262b; color:#fff; border:var(--border)}
.actions{display:flex; gap:10px; margin-top:16px}
.msg{margin-top:14px; padding:.7rem .9rem; border-radius:12px; display:none}
.msg.ok{background:rgba(121,193,103,.12); border:1px solid rgba(121,193,103,.28)}
.msg.err{background:rgba(255,107,107,.12); border:1px solid rgba(255,107,107,.25)}


/* === Marketplace / Facebook-style === */
.market-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width: 900px){ .market-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width: 1200px){ .market-grid{ grid-template-columns:repeat(4,1fr); } }

.market-card{
  background:var(--card); border:var(--border); border-radius:18px;
  overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column; transition:transform .08s ease, filter .2s ease;
}
.market-card:hover{ transform:translateY(-2px); filter:brightness(1.03); }

.market-media{
  position:relative; background:#0e0f12; overflow:hidden;
  aspect-ratio: 16 / 9;
}
.market-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.market-badge{
  position:absolute; left:10px; top:10px; z-index:1;
  background:#fff; color:#121212; border-radius:999px; font-weight:700;
  font-size:.78rem; padding:.28rem .55rem; box-shadow:0 4px 14px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: dark){
  .market-badge{ background:#f3f5f7; color:#16181b; }
}
.market-body{ padding:14px 14px 16px 14px; display:flex; flex-direction:column; gap:6px; }
.market-price{ font-weight:800; font-size:1.05rem; letter-spacing:.2px; }
.market-title{ font-weight:700; line-height:1.35; }
.market-loc{ color:var(--muted); font-size:.92rem; }

/* === NAV CTA — taille uniforme des boutons quand connecté === */
.nav-cta{ display:flex; align-items:center; gap:12px; }

/* taille compacte commune */
.nav-cta .btn,
.cart-wrap > .btn{
  box-sizing:border-box;
  height:38px;
  padding:0 14px;
  line-height:1;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.95rem;
  border-width:1px;
}

/* version “secondary” (Mon compte / Se connecter / Se déconnecter) */
.nav-cta .btn.secondary{
  background:#1f2125;
  border:1px solid rgba(255,255,255,.08);
}

/* badge compteur dans le panier : centrage vertical fin */
#cartCount.bubble{
  line-height:1;
  transform: translateY(-1px);
}

/* compact mobile */
@media (max-width: 480px){
  .nav-cta .btn,
  .cart-wrap > .btn{
    height:36px;
    padding:0 12px;
    font-size:.9rem;
  }
}

/* === NAV CTA FIX — taille identique + pas de retour à la ligne === */
header .nav-cta{ display:flex; align-items:center; gap:12px; }

header .nav-cta .btn,
.lang-select{
  height:36px; padding:0 12px; border-radius:12px;
  background:#1f2125; color:var(--text); border:var(--border);
  font-weight:700; cursor:pointer; outline:none;
}
.lang-select:focus{ box-shadow:var(--ring); }
@media (max-width:480px){ .lang-select{ height:34px; } }
header .cart-wrap > .btn{
  box-sizing:border-box;
  height:36px;            /* même hauteur partout */
  padding:0 12px;         /* compacts */
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.95rem;
  border-width:1px;
  /* important: empêcher le shrink + la césure */
  white-space:nowrap !important;
  flex:0 0 auto;
  min-width:max-content;
}

/* ==========================================================
   PRODUITS — cadres + images STRICTEMENT uniformes (style Vinted)
   Surcharges finales
   ========================================================== */

/* Grille produits : colonnes et écart cohérents */
.grid.products {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 900px){ .grid.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px){ .grid.products { grid-template-columns: repeat(4, 1fr); } }

/* Cartes: hauteur fixe pour homogénéiser la grille */
.grid.products .card-prod{
  height: 460px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 900px){
  .grid.products .card-prod{ height: 420px; }
}

/* Fenêtre image carrée + recadrage cover */
.grid.products .card-prod .media{
  aspect-ratio: 1 / 1;           /* carré, comme Vinted */
  position: relative;
  width: 100%;
  overflow: hidden;
  background:#0b0c0e;
  flex: 0 0 auto;
}
.grid.products .card-prod .media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}

/* Corps: pousse le bouton en bas */
.grid.products .card-prod .body{
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

/* Titre limité à deux lignes (évite les hauteurs variables) */
.grid.products .card-prod h3{
  margin:0;
  font-size:1rem;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(1.3em * 2);
}

/* Ligne d’actions collée au bas de la carte */
.grid.products .card-prod .actions-row{ margin-top:auto; }

/* Badge au-dessus de l’image */
.grid.products .card-prod .badge{
  position:absolute; left:12px; top:12px; z-index:2;
}
/* ===== Login — uniformiser la taille des boutons ===== */
.auth-card .btn,
.auth-card .sso .btn,
.auth-card form button.btn[type="submit"]{
  height: 44px;          /* même hauteur que les autres */
  padding: 0 14px;       /* padding horizontal compact */
  line-height: 1;        /* pas d'étirement vertical */
  width: auto;           /* évite un bouton qui s'étale */
  min-width: 0;          /* supprime tout min-width hérité */
  border-radius: 12px;
}

/* Optionnel : aligne proprement la rangée d’actions autour du "ou" */
.auth-card .actions{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  gap: 12px;
}
/* ===== Consentement (register.html) : alignement propre ===== */
.consent-row{
  display:grid;
  grid-template-columns: 64px 1fr;   /* petit carré + texte */
  gap:12px;
  margin-top:14px;
}

.consent-box,
.consent-text{
  background:#0f1216;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
}

/* petit carré contenant la checkbox, centrée parfaitement */
.consent-box{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:64px;         /* même hauteur que le bloc texte */
  padding:0;
}
.consent-box input[type="checkbox"]{
  width:22px;
  height:22px;
  accent-color: var(--primary);
}

/* bloc texte à droite, centré verticalement */
.consent-text{
  display:flex;
  align-items:center;
  padding:14px 16px;
  line-height:1.4;
}
.consent-text a{ text-decoration:underline; color:#cfe7d0; font-weight:700; }

@media (max-width: 520px){
  .consent-row{ grid-template-columns:54px 1fr; }
  .consent-box{ min-height:54px; }
}