:root{
  --principal:#1d2a2e; --fond:#f2f3ef; --blanc:#fff; --accent:#a67a2b; --sauge:#5d7b66;
  --gris:#6a7477; --ligne:#dcdfd8; --wa:#1c9d55; --wa-dark:#157a42;
  --titre:"Bricolage Grotesque",system-ui,sans-serif; --texte:"Figtree",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--texte);color:var(--principal);background:var(--fond);line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--titre);line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3vw,2rem)}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
.narrow{max-width:680px}
.section{padding:3rem 0}
.muted{color:var(--gris)}

.site-header{background:var(--principal);color:var(--fond);position:sticky;top:0;z-index:10}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;flex-wrap:wrap}
.logo{font-family:var(--titre);font-weight:700;font-size:1.35rem;text-decoration:none}
.nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.nav a{text-decoration:none;opacity:.85}
.nav a:hover,.nav a:focus-visible{opacity:1;text-decoration:underline}
.badge{background:var(--accent);color:#fff;border-radius:999px;padding:0 .5em;font-size:.8rem}

.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center;padding:4rem 0}
.hero-text p{font-size:1.15rem;max-width:48ch}
.hero-mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:200px 200px;gap:.8rem}
.hero-mosaic a:first-child{grid-row:span 2}
.hero-mosaic img{width:100%;height:100%;object-fit:cover}
.placeholder{grid-column:span 2;grid-row:span 2;border:2px dashed var(--ligne);display:grid;place-items:center;text-align:center;padding:1rem;color:var(--gris)}

.btn{display:inline-block;background:var(--principal);color:#fff;padding:.8em 1.4em;border:2px solid var(--principal);border-radius:4px;font:600 1rem var(--texte);text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(1.25)}
.btn.ghost{background:transparent;color:var(--principal)}
.btn.ghost:hover{background:var(--principal);color:#fff}
.btn.wa{background:var(--wa);border-color:var(--wa)}
.btn.wa:hover{background:var(--wa-dark);border-color:var(--wa-dark)}
.btn.small{padding:.45em .9em;font-size:.9rem}
.link-btn{background:none;border:0;color:var(--gris);text-decoration:underline;cursor:pointer;font:inherit}
.actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:1.5rem}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.4rem}
.tile{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;background:var(--ligne)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tile:hover img{transform:scale(1.04)}
.tile span{position:absolute;inset:auto 0 0 0;padding:1.5rem 1rem .8rem;color:#fff;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.card{background:var(--blanc);border:1px solid var(--ligne)}
.card img{width:100%;aspect-ratio:1;object-fit:cover}
.card-body{padding:1rem}
.card h3{font-size:1.1rem;margin:0}
.card h3 a{text-decoration:none}
.card .muted{margin:.2rem 0}
.prix{font-weight:600;color:var(--accent);margin:.4rem 0 0}
.prix.big{font-size:1.6rem}

.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 1.8rem}
.chips a{padding:.35em 1em;border:1px solid var(--ligne);background:var(--blanc);border-radius:999px;text-decoration:none}
.chips a.on{background:var(--principal);color:#fff;border-color:var(--principal)}
.search{display:flex;gap:.6rem;max-width:420px}
.search input{flex:1}
.pager{display:flex;justify-content:center;gap:1.5rem;margin-top:2rem}

.detail{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.detail-media img#main-img{width:100%;aspect-ratio:1;object-fit:cover}
.thumbs{display:flex;gap:.5rem;margin-top:.6rem}
.thumbs img{width:72px;height:72px;object-fit:cover;cursor:pointer;border:1px solid var(--ligne)}
.specs{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.2rem}
.specs dt{color:var(--gris)}.specs dd{margin:0}
.cover{width:100%;max-height:560px;object-fit:cover;margin:1rem 0}
.prose{max-width:70ch}
.gimg{width:100%;aspect-ratio:4/3;object-fit:cover}

.cta{background:var(--principal);color:var(--fond);padding:3rem 2rem;margin-top:2rem;text-align:center}
.cta .btn{background:var(--accent);border-color:var(--accent)}

.form{display:grid;gap:1.1rem}
.field label{display:block;font-weight:600;margin-bottom:.25rem}
input,select,textarea{width:100%;padding:.7em .8em;border:1px solid #b9beb5;border-radius:4px;font:inherit;background:#fff;color:inherit}
input.qty{width:5rem}
.has-error input,.has-error textarea,.has-error select{border-color:#b3261e}
.err{color:#b3261e}
.inline{display:flex;gap:.6rem;align-items:center}
.flash{padding:.8rem 1rem;background:#e6efe8;border-left:4px solid var(--sauge);margin:1rem 0}
.flash.error{background:#f7e3e1;border-color:#b3261e}

.two-col{display:grid;grid-template-columns:1.3fr 1fr;gap:3rem}
.summary{background:var(--blanc);border:1px solid var(--ligne);padding:1.5rem;align-self:start}
.summary ul{list-style:none;padding:0;margin:0}
.summary li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--ligne)}
.total{display:flex;justify-content:space-between;font-size:1.1rem}
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;background:var(--blanc)}
.table th,.table td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--ligne)}

.site-footer{background:var(--principal);color:var(--fond);padding:2rem 0;margin-top:3rem}
.foot{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.wa-float{position:fixed;right:1rem;bottom:1rem;background:var(--wa);color:#fff;padding:.8em 1.2em;border-radius:999px;font-weight:600;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:20}

@media (max-width:800px){
  .hero,.detail,.two-col{grid-template-columns:1fr}
  .hero-mosaic{grid-template-rows:150px 150px}
}
@media (prefers-reduced-motion:reduce){.tile img{transition:none}}


input[type=checkbox]{width:auto}
input[type=color]{width:5rem;height:2.6rem;padding:.2em}
.logo img{height:38px;width:auto}
.socials{display:flex;gap:1rem;flex-wrap:wrap;margin:.4rem 0 0}
.field small{display:block}