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

:root{
  --sage:#7C9070;
  --sage-dark:#586A4E;
  --blush:#F3DCD4;
  --cream:#FBF7F0;
  --ink:#3A382F;
  --grey:#847F72;
  --border:#E9E1D3;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Nunito 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:'Lora',serif;font-weight:500;margin:0;}
.script{font-family:'Caveat',cursive;font-weight:700;}
.container{max-width:1180px;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:22px 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:'Caveat',cursive;font-weight:700;font-size:32px;color:var(--sage-dark);}
.nav-links{display:flex;align-items:center;gap:30px;font-size:13.5px;font-weight:600;}
.nav-links a:not(.cart-link):hover{color:var(--sage-dark);}
.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(--sage-dark);color:var(--cream);font-size:10.5px;font-weight:700;padding:0 4px;
}

/* HERO — collage de photos inclinées façon pêle-mêle */
.hero-collage{max-width:900px;margin:0 auto;padding:64px 32px 10px;text-align:center;}
.collage-photos{position:relative;height:230px;max-width:520px;margin:0 auto;}
.collage-photos img{
  position:absolute;width:150px;height:186px;object-fit:cover;border:7px solid #fff;border-radius:4px;
  box-shadow:0 10px 26px rgba(58,56,47,0.18);
}
.collage-photos img.c1{left:0;top:14px;transform:rotate(-9deg);z-index:1;}
.collage-photos img.c2{left:185px;top:-8px;transform:rotate(4deg);z-index:2;}
.collage-photos img.c3{left:370px;top:20px;transform:rotate(10deg);z-index:1;}
.hero-kicker{font-family:'Caveat',cursive;font-weight:700;font-size:26px;color:var(--sage-dark);margin:26px 0 6px;}
.hero-title{font-size:clamp(28px,4vw,42px);line-height:1.2;font-style:italic;max-width:640px;margin:0 auto;}
.hero-sub{margin:18px auto 26px;font-size:14.5px;color:var(--grey);max-width:440px;line-height:1.7;}

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

/* OCCASION FILTER */
.catalog-head{padding:76px 32px 26px;text-align:center;}
.catalog-head h2{font-size:clamp(28px,3.6vw,40px);font-style:italic;}
.catalog-head p{color:var(--grey);margin-top:12px;}
.occasion-filter{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:0 32px 40px;}
.occasion-pill{
  border:1.5px solid var(--border);background:#fff;border-radius:999px;padding:9px 20px;font-size:13px;
  font-weight:600;cursor:pointer;font-family:'Nunito Sans',sans-serif;
}
.occasion-pill.active{background:var(--sage);color:#fff;border-color:var(--sage);}

/* CATALOG — collage pêle-mêle, cartes polaroid inclinées */
.catalog-grid{max-width:1100px;margin:0 auto;padding:10px 32px 100px;column-count:3;column-gap:34px;}
.product-card{
  position:relative;display:inline-block;width:100%;break-inside:avoid;margin-bottom:44px;
  background:#fff;padding:10px 10px 18px;border-radius:4px;box-shadow:0 10px 22px rgba(58,56,47,0.14);
  transition:transform .2s ease, box-shadow .2s ease;
}
.product-card:nth-child(4n+1){transform:rotate(-2.5deg);}
.product-card:nth-child(4n+2){transform:rotate(1.8deg);}
.product-card:nth-child(4n+3){transform:rotate(-1.2deg);}
.product-card:nth-child(4n+4){transform:rotate(2.4deg);}
.product-card:hover{transform:rotate(0deg) scale(1.03);box-shadow:0 16px 32px rgba(58,56,47,0.22);z-index:3;}
.product-photo{position:relative;aspect-ratio:var(--ar,4/5);overflow:hidden;background:var(--blush);border-radius:2px;}
.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;}
.occ-badge{position:absolute;left:8px;top:8px;background:#fff;color:var(--sage-dark);font-size:10.5px;font-weight:700;padding:4px 11px;border-radius:999px;z-index:2;}
.product-info{padding:12px 4px 0;text-align:center;}
.product-info .p-name{font-family:'Caveat',cursive;font-weight:700;font-size:20px;}
.product-info .p-price{font-size:12.5px;color:var(--grey);margin-top:2px;}

/* ATELIER */
.atelier-section{padding:80px 32px;background:var(--blush);}
.atelier-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.atelier-grid img{border-radius:16px;aspect-ratio:1/1;object-fit:cover;}
.atelier-copy{grid-column:1/3;text-align:center;margin-bottom:8px;}
.atelier-copy h2{font-size:clamp(28px,3.6vw,38px);font-style:italic;margin-bottom:14px;}
.atelier-copy p{color:var(--grey);max-width:520px;margin:0 auto 18px;font-size:14.5px;line-height:1.7;}

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

/* PRODUCT PAGE */
.product-page{padding:48px 32px 90px;}
.product-page-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:52px;}
.gallery-main{aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--blush);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:8px;cursor:pointer;border:1.5px solid transparent;}
.gallery-thumbs img.active{border-color:var(--sage-dark);}
.pd-occ{font-size:12.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--sage-dark);margin-bottom:10px;display:block;font-weight:700;}
.pd-name{font-size:clamp(28px,3.2vw,38px);font-style:italic;}
.pd-price{font-size:19px;font-weight:700;margin:16px 0 20px;}
.pd-desc{color:var(--grey);line-height:1.75;font-size:14.5px;margin-bottom:26px;}
.pd-size-label{font-size:13px;font-weight:700;margin-bottom:10px;}
.size-pills{display:flex;gap:10px;margin-bottom:26px;flex-wrap:wrap;}
.size-pill{
  border:1.5px solid var(--border);background:#fff;border-radius:999px;padding:10px 20px;font-size:13.5px;
  font-weight:600;cursor:pointer;font-family:'Nunito Sans',sans-serif;
}
.size-pill.active{background:var(--sage-dark);color:#fff;border-color:var(--sage-dark);}
.pd-message-label{font-size:13px;font-weight:700;margin-bottom:10px;}
.pd-message textarea{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;font-family:'Nunito Sans',sans-serif;font-size:14px;margin-bottom:26px;resize:vertical;}
.pd-message textarea:focus{outline:none;border-color:var(--sage-dark);}
.pd-actions{display:flex;align-items:center;gap:14px;margin-bottom:32px;}
.qty-stepper{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:999px;background:#fff;}
.qty-stepper button{width:38px;height:44px;background:none;border:none;font-size:16px;cursor:pointer;font-family:inherit;}
.qty-stepper span{width:26px;text-align:center;font-size:14px;font-weight:700;}
.pd-note{font-size:12.5px;color:var(--grey);}
.pd-added{display:none;margin-top:14px;font-size:13px;font-weight:700;color:var(--sage-dark);}
.pd-added.show{display:block;}

/* TOAST */
.toast{
  position:fixed;top:24px;right:24px;background:var(--sage-dark);color:var(--cream);padding:16px 22px;border-radius:12px;
  font-size:13.5px;font-weight:600;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,42px);font-style:italic;margin-bottom:12px;}

.checkout-steps{display:flex;gap:10px;margin-bottom:40px;font-size:12.5px;font-weight:700;color:#B7AF9E;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 #B7AF9E;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(--sage-dark);background:var(--sage-dark);color:#fff;}
.checkout-steps .step.done .num{border-color:var(--ink);background:var(--ink);color:#fff;}
.checkout-steps .sep{color:var(--border);}

.cart-empty{padding:60px 0;text-align:center;color:var(--grey);}
.cart-row{display:grid;grid-template-columns:80px 1fr auto auto auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--border);}
.cart-row img{width:80px;height:96px;object-fit:cover;border-radius:8px;}
.cart-row .cr-name{font-family:'Lora',serif;font-style:italic;font-size:15px;}
.cart-row .cr-size{font-size:12.5px;color:var(--grey);margin-top:4px;}
.cart-row .cr-msg{font-size:11.5px;color:var(--grey);margin-top:2px;font-style:italic;}
.cart-row .cr-price{font-weight:700;font-size:14.5px;}
.cart-row .cr-remove{background:none;border:none;color:var(--grey);font-size:13px;cursor:pointer;text-decoration:underline;}
.cart-summary{margin-top:32px;padding-top:24px;border-top:2px solid var(--sage-dark);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:var(--grey);}
.cart-summary .row.total{color:var(--ink);font-weight:700;font-size:17px;}
.cart-summary .btn{margin-top:12px;width:280px;justify-content:center;}

.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:700;}
.form-field input{
  border:1.5px solid var(--border);border-radius:10px;padding:13px 14px;font-size:14px;font-family:'Nunito Sans',sans-serif;background:#fff;
}
.form-field input:focus{outline:none;border-color:var(--sage-dark);}
.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:#fff;border-radius:14px;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:700;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:var(--grey);margin-top:14px;}

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

@media (max-width:860px){
  .catalog-grid{column-count:2;}
  .collage-photos{transform:scale(0.75);height:180px;}
  .atelier-grid{grid-template-columns:1fr 1fr;}
  .product-page-grid{grid-template-columns:1fr;}
  .cart-row{grid-template-columns:60px 1fr auto;}
  .form-grid{grid-template-columns:1fr;}
}