@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,500;1,400;1,500&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --cream:#F6F1E8;
  --ink:#211E19;
  --green:#25402F;
  --green-light:#4C6B57;
  --clay:#B5693F;
  --border:#E2DAC9;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Work Sans',sans-serif;color:var(--ink);background:var(--cream);}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:'Newsreader',serif;font-weight:500;margin:0;}
.container{max-width:1200px;margin:0 auto;padding:0 32px;}

/* NAV */
.nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:24px 32px;background:var(--cream);border-bottom:1px solid transparent;transition:border-color .25s ease;
}
.nav.solid{border-bottom-color:var(--border);}
.nav-logo{font-family:'Newsreader',serif;font-style:italic;font-weight:500;font-size:25px;}
.nav-links{display:flex;align-items:center;gap:30px;font-size:13px;font-weight:500;letter-spacing:0.02em;}
.nav-links a:not(.cart-link):hover{color:var(--green);}
.cart-link{position:relative;display:flex;align-items:center;gap:6px;}
.cart-badge{
  display:none;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:50%;
  background:var(--green);color:var(--cream);font-size:10.5px;font-weight:600;padding:0 4px;
}

/* BRAND MARQUEE */
.marquee{overflow:hidden;background:var(--green);color:var(--cream);padding:12px 0;white-space:nowrap;}
.marquee-track{display:inline-flex;gap:44px;animation:scrollLeft 24s linear infinite;font-family:'Newsreader',serif;font-style:italic;font-size:16px;}
.marquee-track span{display:inline-flex;align-items:center;gap:44px;}
.marquee-track i{color:var(--clay);font-style:italic;}
@keyframes scrollLeft{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* HERO — masthead texte plein cadre + bandeau photo avec plaque */
.hero-masthead{max-width:900px;margin:0 auto;padding:76px 32px 46px;text-align:center;}
.hero-kicker{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--green);margin-bottom:18px;}
.hero-title{font-size:clamp(34px,5.4vw,64px);line-height:1.12;font-style:italic;}
.hero-sub{margin:22px auto 0;font-size:15.5px;color:#5C5648;max-width:480px;line-height:1.7;}
.hero-band{position:relative;max-width:1200px;margin:0 auto 90px;padding:0 32px;}
.hero-band-photo{aspect-ratio:21/8;border-radius:8px;overflow:hidden;}
.hero-band-photo img{width:100%;height:100%;object-fit:cover;}
.hero-plaque{
  position:absolute;left:56px;bottom:-38px;background:var(--cream);border-radius:8px;padding:22px 28px;
  box-shadow:0 14px 34px rgba(37,64,47,0.16);display:flex;gap:32px;
}
.hero-facts{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:#5C5648;}
.hero-facts strong{color:var(--ink);}
.hero-plaque .btn{white-space:nowrap;align-self:center;}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:10px;background:var(--green);color:var(--cream);
  padding:15px 30px;border-radius:999px;font-size:13.5px;font-weight:500;border:none;cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
.btn:hover{background:#1B3024;transform:translateY(-1px);}
.btn-clay{background:var(--clay);}
.btn-clay:hover{background:#9C572F;}
.btn-outline{
  display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--ink);
  border:1.5px solid var(--ink);padding:13.5px 28px;border-radius:999px;font-size:13.5px;font-weight:500;cursor:pointer;
}
.btn-outline:hover{background:var(--ink);color:var(--cream);}

/* BRAND FILTER */
.catalog-head{padding:80px 32px 26px;text-align:center;}
.catalog-head h2{font-size:clamp(30px,4vw,44px);font-style:italic;}
.catalog-head p{color:#5C5648;margin-top:12px;}
.brand-filter{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:0 32px 40px;}
.brand-pill{
  border:1.5px solid var(--border);background:var(--cream);border-radius:999px;padding:9px 20px;font-size:13px;
  font-weight:500;cursor:pointer;font-family:'Work Sans',sans-serif;
}
.brand-pill.active{background:var(--green);color:var(--cream);border-color:var(--green);}

/* CATALOG — masonry éditoriale (colonnes CSS, hauteurs variables) */
.catalog-grid{max-width:1200px;margin:0 auto;padding:0 32px 90px;column-count:3;column-gap:26px;}
.product-card{position:relative;display:inline-block;width:100%;break-inside:avoid;margin-bottom:26px;}
.product-photo{position:relative;aspect-ratio:var(--ar,3/4);border-radius:6px;overflow:hidden;background:#EDE6D8;}
.product-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s ease;}
.product-photo img.hover-img{opacity:0;}
.product-card:hover .product-photo img.hover-img{opacity:1;}
.store-badge{
  position:absolute;left:10px;top:10px;background:var(--cream);color:var(--green);font-size:11px;font-weight:600;
  padding:5px 11px;border-radius:999px;
}
.product-info{padding:14px 2px 0;}
.product-info .p-brand{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--clay);font-weight:600;margin-bottom:3px;}
.product-info .p-name-row{display:flex;justify-content:space-between;align-items:baseline;}
.product-info .p-name{font-size:14.5px;font-family:'Newsreader',serif;font-style:italic;}
.product-info .p-price{font-size:14px;font-weight:500;}

/* VISITEZ-NOUS */
.visit-section{padding:80px 32px;background:#EFE8D9;}
.visit-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.visit-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.visit-gallery img{border-radius:6px;aspect-ratio:4/5;object-fit:cover;}
.visit-gallery img:first-child{grid-row:1/3;aspect-ratio:auto;height:100%;}
.visit-copy h2{font-size:clamp(28px,3.6vw,38px);font-style:italic;margin-bottom:18px;}
.hours-table{width:100%;border-collapse:collapse;margin:22px 0 26px;font-size:14px;}
.hours-table td{padding:7px 0;border-bottom:1px solid var(--border);}
.hours-table td:last-child{text-align:right;color:#5C5648;}
.visit-address{font-size:14.5px;line-height:1.7;color:#5C5648;margin-bottom:22px;}
.visit-address strong{color:var(--ink);}

/* FOOTER */
footer{display:flex;justify-content:space-between;padding:34px 32px;font-size:13px;color:#5C5648;border-top:1px solid var(--border);}

/* PRODUCT PAGE */
.product-page{padding:48px 32px 90px;}
.product-page-grid{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;}
.gallery-main{aspect-ratio:3/4;border-radius:6px;overflow:hidden;background:#EDE6D8;margin-bottom:12px;}
.gallery-main img{width:100%;height:100%;object-fit:cover;}
.gallery-thumbs{display:flex;gap:10px;}
.gallery-thumbs img{width:64px;height:80px;object-fit:cover;border-radius:4px;cursor:pointer;border:1.5px solid transparent;}
.gallery-thumbs img.active{border-color:var(--green);}
.pd-brand{font-size:12.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--clay);font-weight:600;margin-bottom:10px;display:block;}
.pd-name{font-size:clamp(28px,3.2vw,38px);font-style:italic;}
.pd-price{font-size:19px;font-weight:500;margin:16px 0 10px;}
.pd-store{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--green);font-weight:600;background:#E4EEE8;padding:6px 12px;border-radius:999px;margin-bottom:18px;}
.pd-desc{color:#5C5648;line-height:1.75;font-size:15px;margin-bottom:28px;}
.pd-size-label{font-size:13px;font-weight:600;margin-bottom:10px;}
.size-pills{display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap;}
.size-pill{
  border:1.5px solid var(--border);background:transparent;border-radius:999px;padding:9px 18px;font-size:13.5px;
  font-weight:500;cursor:pointer;font-family:'Work Sans',sans-serif;
}
.size-pill.active{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.pd-actions{display:flex;align-items:center;gap:14px;margin-bottom:36px;}
.qty-stepper{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:999px;}
.qty-stepper button{width:38px;height:44px;background:none;border:none;font-size:16px;cursor:pointer;font-family:inherit;}
.qty-stepper span{width:28px;text-align:center;font-size:14px;font-weight:600;}
.pd-note{font-size:12.5px;color:#5C5648;}
.pd-added{display:none;margin-top:14px;font-size:13px;font-weight:600;color:var(--green);}
.pd-added.show{display:block;}

/* TOAST */
.toast{
  position:fixed;top:24px;right:24px;background:var(--ink);color:var(--cream);padding:16px 22px;border-radius:10px;
  font-size:13.5px;font-weight:500;transform:translateY(-12px);opacity:0;pointer-events:none;transition:all .25s ease;z-index:99;
}
.toast.show{transform:translateY(0);opacity:1;}

/* CHECKOUT / PANIER */
.cart-page{padding:56px 32px 90px;max-width:960px;margin:0 auto;}
.cart-page h1{font-size:clamp(28px,4vw,40px);font-style:italic;margin-bottom:12px;}

.checkout-steps{display:flex;gap:10px;margin-bottom:40px;font-size:12.5px;font-weight:600;color:#9A9382;flex-wrap:wrap;}
.checkout-steps .step{display:flex;align-items:center;gap:8px;}
.checkout-steps .step .num{width:22px;height:22px;border-radius:50%;border:1.5px solid #9A9382;display:flex;align-items:center;justify-content:center;font-size:11px;}
.checkout-steps .step.active{color:var(--ink);}
.checkout-steps .step.active .num{border-color:var(--green);background:var(--green);color:var(--cream);}
.checkout-steps .step.done .num{border-color:var(--ink);background:var(--ink);color:var(--cream);}
.checkout-steps .sep{color:var(--border);}

.cart-empty{padding:60px 0;text-align:center;color:#5C5648;}
.cart-row{display:grid;grid-template-columns:90px 1fr auto auto auto;gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid var(--border);}
.cart-row img{width:90px;height:112px;object-fit:cover;border-radius:4px;}
.cart-row .cr-name{font-family:'Newsreader',serif;font-style:italic;font-size:15px;}
.cart-row .cr-brand{font-size:11.5px;text-transform:uppercase;color:var(--clay);font-weight:600;letter-spacing:0.04em;}
.cart-row .cr-size{font-size:12.5px;color:#5C5648;margin-top:4px;}
.cart-row .cr-price{font-weight:600;font-size:14.5px;}
.cart-row .cr-remove{background:none;border:none;color:#5C5648;font-size:13px;cursor:pointer;text-decoration:underline;}
.cart-summary{margin-top:32px;padding-top:24px;border-top:2px solid var(--ink);display:flex;flex-direction:column;gap:10px;align-items:flex-end;}
.cart-summary .row{display:flex;justify-content:space-between;width:280px;font-size:14px;color:#5C5648;}
.cart-summary .row.total{color:var(--ink);font-weight:600;font-size:17px;}
.cart-summary .btn{margin-top:12px;width:280px;justify-content:center;}

.delivery-options{display:flex;flex-direction:column;gap:14px;max-width:520px;margin-bottom:8px;}
.delivery-option{
  border:1.5px solid var(--border);border-radius:12px;padding:18px 20px;cursor:pointer;display:flex;gap:14px;align-items:flex-start;
}
.delivery-option.active{border-color:var(--green);background:#EFF5F1;}
.delivery-option input{margin-top:3px;}
.delivery-option .do-title{font-weight:600;font-size:14.5px;}
.delivery-option .do-sub{font-size:13px;color:#5C5648;margin-top:3px;}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:560px;margin-bottom:8px;}
.form-field{display:flex;flex-direction:column;gap:7px;}
.form-field.full{grid-column:1 / -1;}
.form-field label{font-size:12px;font-weight:600;}
.form-field input{
  border:1.5px solid var(--border);border-radius:8px;padding:13px 14px;font-size:14.5px;font-family:inherit;background:#fff;
}
.form-field input:focus{outline:none;border-color:var(--green);}
.form-actions{max-width:560px;display:flex;justify-content:space-between;align-items:center;margin-top:26px;}
.form-error{font-size:12.5px;color:#B3261E;min-height:16px;margin-top:2px;}

.order-summary-mini{max-width:560px;background:#EFE8D9;border-radius:12px;padding:18px 20px;margin-bottom:28px;}
.order-summary-mini .row{display:flex;justify-content:space-between;font-size:13.5px;padding:5px 0;}
.order-summary-mini .row.total{font-weight:600;border-top:1px solid var(--border);margin-top:8px;padding-top:10px;font-size:15px;}

.secure-note{display:flex;align-items:center;gap:8px;font-size:12px;color:#5C5648;margin-top:14px;}

.checkout-success{text-align:center;padding:80px 0;}
.checkout-success h2{font-size:clamp(26px,4vw,38px);font-style:italic;margin-bottom:16px;}
.checkout-success p{color:#5C5648;}

@media (max-width:860px){
  .catalog-grid{column-count:2;}
  .hero-plaque{position:static;margin-top:16px;flex-direction:column;align-items:flex-start;gap:14px;}
  .hero-band{margin-bottom:26px;}
  .visit-grid{grid-template-columns:1fr;}
  .product-page-grid{grid-template-columns:1fr;}
  .cart-row{grid-template-columns:70px 1fr auto;}
  .form-grid{grid-template-columns:1fr;}
}
