/* =========================================================================
   MAISON SILLAGE — Design system partagé
   Reconstitution fidèle de la DA de la landing page d'origine.
   ========================================================================= */

:root{
  /* Couleurs */
  --ink:      #0d0d0d;   /* fond sombre header / footer */
  --paper:    #ffffff;   /* fond de page */
  --cream:    #f4f2ef;   /* panneaux clairs / bandeau */
  --stone:    #efece7;   /* fond visuel produit */
  --stone-2:  #e7e3dc;
  --text:     #1a1a1a;
  --text-2:   #2a2a2a;
  --text-3:   #4a4a4a;
  --muted:    #6b6b6b;
  --line:     #e2ddd4;   /* filet clair */
  --line-2:   #d8d2c8;

  /* Sur fond sombre */
  --on-dark:      #f2efe9;
  --on-dark-dim:  #cbc7c0;
  --on-dark-dim2: #9a968f;
  --on-dark-dim3: #8a867f;
  --dark-line:    #262626;
  --dark-line-2:  #3a3a3a;

  /* Typo */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Helvetica Neue', Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --pad: 48px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:500; }

/* ---------- Utilitaires ---------- */
.wrap{ max-width:var(--wrap); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.serif{ font-family:var(--serif); }
.eyebrow{ font-size:11.5px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.center{ text-align:center; }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-size:11.5px; letter-spacing:2px; text-transform:uppercase;
  padding:17px 30px; cursor:pointer; border:none; transition:.35s var(--ease);
  font-family:var(--sans);
}
.btn-primary{ background:var(--ink); color:var(--on-dark); }
.btn-primary:hover{ background:#000; transform:translateY(-1px); }
.btn-outline{ background:transparent; color:var(--text); border:1px solid var(--text); }
.btn-outline:hover{ background:var(--ink); color:var(--on-dark); border-color:var(--ink); }
.btn-light{ background:var(--on-dark); color:var(--ink); }
.btn-light:hover{ background:#fff; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }

.link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12.5px; letter-spacing:.5px; position:relative;
}
.link-arrow span{ transition:transform .3s var(--ease); }
.link-arrow:hover span{ transform:translateX(5px); }

.underline-link{ position:relative; display:inline-block; }
.underline-link::after{
  content:''; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.underline-link:hover::after{ transform:scaleX(1); }

/* ============================ HEADER ============================ */
.top-bar{
  background:var(--cream); color:var(--text-2);
  display:flex; align-items:center; justify-content:center;
  position:relative; min-height:40px; font-size:12.5px; letter-spacing:.3px;
  text-align:center; padding:8px 44px;
}
.top-bar__close{
  position:absolute; right:22px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--text-2); font-size:16px; cursor:pointer; line-height:1;
}

.site-header{ background:var(--ink); color:var(--on-dark); position:relative; z-index:50; }
.ms-top{ display:flex; align-items:center; justify-content:space-between; padding:26px 48px 20px; }
.ms-top__side{ display:flex; align-items:center; gap:16px; font-size:13px; letter-spacing:.5px; flex:1; }
.ms-top__side--right{ justify-content:flex-end; gap:24px; }
.ms-top__side .sep{ opacity:.35; }
.ms-logo{ text-align:center; font-family:var(--serif); line-height:.92; }
.ms-logo a{ display:block; }
.ms-logo .l1{ font-size:16px; letter-spacing:6px; font-weight:500; }
.ms-logo .l2{ font-size:40px; letter-spacing:8px; font-weight:600; }
.ms-logo .l3{ font-size:11px; letter-spacing:9px; font-weight:400; margin-top:2px; }
.icon-btn{ background:none; border:none; color:var(--on-dark); cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:0; }
.icon-btn svg{ display:block; }
.cart-count{ font-size:13px; }

.ms-nav{
  display:flex; align-items:center; justify-content:center; gap:44px;
  padding-bottom:22px; font-size:12.5px; letter-spacing:1.5px;
}
.ms-nav a{ position:relative; padding:4px 0; opacity:.92; transition:opacity .25s; }
.ms-nav a:hover{ opacity:1; }
.ms-nav a::after{
  content:''; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:center; transition:transform .35s var(--ease);
}
.ms-nav a:hover::after, .ms-nav a[aria-current="page"]::after{ transform:scaleX(1); }

/* Burger + menu mobile */
.burger{ display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:9px; background:transparent; border:0; color:inherit; cursor:pointer; }
.burger span{ display:block; height:1.5px; width:100%; background:currentColor; border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease); }
.mobile-menu{ display:none; }

/* ============================ FOOTER ============================ */
.site-footer{ background:var(--ink); color:var(--on-dark-dim); margin-top:0; }
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.4fr; gap:40px;
  padding-top:64px; padding-bottom:40px;
}
.footer-brand .fb-logo{ font-family:var(--serif); font-size:16px; letter-spacing:3px; color:var(--on-dark); margin-bottom:20px; }
.footer-brand p{ font-size:12.5px; line-height:1.7; max-width:230px; margin:0 0 24px; }
.socials{ display:flex; gap:20px; }
.socials a{ opacity:.85; transition:opacity .25s; }
.socials a:hover{ opacity:1; }
.footer-col h4{ font-size:11.5px; letter-spacing:1.5px; color:var(--on-dark); margin-bottom:20px; font-weight:400; text-transform:uppercase; }
.footer-col .links{ display:flex; flex-direction:column; gap:13px; font-size:12.5px; }
.footer-col .links a{ opacity:.9; transition:opacity .25s; }
.footer-col .links a:hover{ opacity:1; }
.news-field{ display:flex; align-items:center; border:1px solid var(--dark-line-2); padding:0 4px 0 16px; height:48px; margin-bottom:18px; }
.news-field input{ flex:1; background:none; border:none; outline:none; color:#e9e6e1; font-size:12.5px; font-family:inherit; }
.news-field button{ background:none; border:none; color:#e9e6e1; font-size:16px; cursor:pointer; padding:0 12px; }
.news-consent{ display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--on-dark-dim2); }
.news-consent input{ width:14px; height:14px; accent-color:#8a867f; }
.footer-bottom{ border-top:1px solid var(--dark-line); }
.footer-bottom__inner{ display:flex; align-items:center; justify-content:space-between; padding-top:22px; padding-bottom:22px; font-size:11.5px; color:var(--on-dark-dim3); }
.footer-links{ display:flex; align-items:center; gap:32px; }
.footer-links a{ transition:color .25s; }
.footer-links a:hover{ color:var(--on-dark-dim); }

/* ============================ PRODUIT (carte) ============================ */
.product-card{ text-align:center; }
.product-card .pc-media{
  display:block; position:relative; background:var(--stone); aspect-ratio:5/6; margin-bottom:24px; overflow:hidden;
}
.product-card .pc-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.product-card:hover .pc-media img{ transform:scale(1.05); }
.pc-badge{
  position:absolute; top:14px; left:14px; z-index:2; background:var(--ink); color:var(--on-dark);
  font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; padding:6px 10px;
}
.pc-name{ font-family:var(--serif); font-size:19px; letter-spacing:1.5px; margin-bottom:6px; }
.pc-author{ font-size:12px; color:var(--text-3); margin-bottom:12px; }
.pc-notes{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--muted); margin-bottom:14px; }
.pc-price{ font-size:13px; color:var(--text-2); margin-bottom:18px; }
.pc-quick{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:18px;
  opacity:0; transition:opacity .35s var(--ease); }
.product-card:hover .pc-quick{ opacity:1; }

/* Placeholder flacon (produits étendus, à la manière des image-slots d'origine) */
.flacon-ph{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, #efece7 0%, #e6e1d8 100%); }
.flacon-ph svg{ width:46%; height:auto; opacity:.9; }
.flacon-ph .fph-name{ position:absolute; bottom:20px; left:0; right:0; text-align:center;
  font-family:var(--serif); font-size:15px; letter-spacing:3px; color:#8a7f70; }

/* ---------- Grilles ---------- */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0; }

/* ---------- Sections communes ---------- */
.section{ padding-top:64px; padding-bottom:64px; }
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:34px; }
.section-head h2{ font-size:13px; letter-spacing:2px; font-weight:600; text-transform:uppercase; }

/* ---------- Fil d'ariane ---------- */
.breadcrumb{ font-size:11.5px; letter-spacing:.5px; color:var(--muted); padding-top:26px; }
.breadcrumb a:hover{ color:var(--text); }
.breadcrumb .sep{ margin:0 9px; opacity:.5; }

/* ---------- Bannière de page ---------- */
.page-hero{ background:var(--cream); text-align:center; padding:76px 20px 70px; }
.page-hero h1{ font-family:var(--serif); font-weight:500; font-size:52px; line-height:1.05; margin:14px 0 0; }
.page-hero p{ max-width:520px; margin:20px auto 0; color:var(--text-3); font-size:14px; line-height:1.7; }

/* ---------- Formulaires clairs ---------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; background:#fff; border:1px solid var(--line-2); padding:14px 16px;
  font-family:inherit; font-size:13.5px; color:var(--text); outline:none; transition:border-color .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--ink); }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ---------- Quantité ---------- */
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line-2); }
.qty button{ width:38px; height:42px; background:none; border:none; cursor:pointer; font-size:16px; color:var(--text); }
.qty input{ width:44px; height:42px; text-align:center; border:none; border-left:1px solid var(--line-2); border-right:1px solid var(--line-2);
  font-family:inherit; font-size:13px; outline:none; -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ============================ PANIER (drawer) ============================ */
.drawer-overlay{ position:fixed; inset:0; background:rgba(13,13,13,.5); opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease); z-index:9998; }
.drawer{ position:fixed; top:0; right:0; height:100%; width:420px; max-width:92vw; background:var(--paper);
  transform:translateX(100%); transition:transform .4s var(--ease); z-index:9999; display:flex; flex-direction:column; }
body.drawer-open .drawer-overlay{ opacity:1; visibility:visible; }
body.drawer-open .drawer{ transform:translateX(0); }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:24px 28px; border-bottom:1px solid var(--line); }
.drawer__head h3{ font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:600; }
.drawer__close{ background:none; border:none; font-size:20px; cursor:pointer; line-height:1; }
.drawer__body{ flex:1; overflow-y:auto; padding:8px 28px; }
.drawer__foot{ border-top:1px solid var(--line); padding:22px 28px; }
.mini-line{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
.mini-line img{ width:74px; height:90px; object-fit:cover; background:var(--stone); }
.mini-line .ml-name{ font-family:var(--serif); font-size:16px; letter-spacing:1px; }
.mini-line .ml-meta{ font-size:11.5px; color:var(--muted); margin:3px 0 10px; }
.mini-line .ml-remove{ background:none; border:none; color:var(--muted); font-size:11px; cursor:pointer; text-decoration:underline; padding:0; }
.mini-empty{ text-align:center; color:var(--muted); padding:60px 0; font-family:var(--serif); font-style:italic; font-size:18px; }

/* ---------- Animations d'apparition ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Toast ---------- */
.toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink);
  color:var(--on-dark); font-size:12px; letter-spacing:1px; padding:15px 26px; opacity:0; visibility:hidden;
  transition:.35s var(--ease); z-index:10001; }
.toast.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* ============================ RESPONSIVE ============================ */
@media (max-width:960px){
  :root{ --pad:32px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); row-gap:44px; }
  .grid-3{ grid-template-columns:repeat(2,1fr); row-gap:36px; }
  .footer-grid{ grid-template-columns:1fr 1fr; row-gap:40px; }
  .page-hero h1{ font-size:42px; }
}
@media (max-width:600px){
  :root{ --pad:20px; }
  .ms-top{ flex-wrap:wrap; gap:16px; padding:16px 20px 14px; position:relative; justify-content:space-between; align-items:center; }
  .ms-top__side{ display:none; }
  .ms-logo{ order:-1; }
  .ms-logo .l2{ font-size:34px; }
  .ms-nav{ display:none; }
  .burger{ display:inline-flex; order:-1; }
  .ms-top__mobile-icons{ display:flex; align-items:center; gap:18px; }
  .grid-4{ grid-template-columns:1fr 1fr; gap:16px 14px; }
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .row-2{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom__inner{ flex-direction:column; align-items:flex-start; gap:16px; }
  .footer-links{ flex-wrap:wrap; gap:10px 22px; }
  .page-hero{ padding:52px 20px 48px; }
  .page-hero h1{ font-size:34px; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:14px; }

  /* Hero accueil : montrer le flacon (côté droit de l'image) et poser le texte en bas */
  .ms-hero{ height:600px !important; }
  .ms-hero-bg{ background-position:78% center !important; }
  .ms-hero-scrim{ background:linear-gradient(0deg, rgba(28,22,17,.78) 0%, rgba(28,22,17,.34) 42%, rgba(28,22,17,0) 74%) !important; }
  .ms-hero-text{ left:20px !important; right:20px !important; top:auto !important; bottom:40px !important; transform:none !important; max-width:none !important; }
  .ms-h1{ font-size:40px !important; }

  /* Menu mobile plein écran */
  .mobile-menu{ display:block; position:fixed; inset:0; z-index:99998; background:rgba(13,13,13,.985); color:var(--on-dark);
    opacity:0; visibility:hidden; transition:opacity .3s var(--ease); }
  html.menu-open{ overflow:hidden; }
  html.menu-open .mobile-menu{ opacity:1; visibility:visible; }
  .mobile-menu__inner{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; height:100%; padding:40px; }
  .mobile-menu__inner a{ color:var(--on-dark); font-family:var(--serif); font-size:26px; letter-spacing:.14em; text-transform:uppercase; opacity:.92; }
  .mobile-menu__close{ position:absolute; top:20px; right:20px; width:44px; height:44px; background:transparent; border:0; color:var(--on-dark); font-size:30px; line-height:1; cursor:pointer; }
  html.menu-open .burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  html.menu-open .burger span:nth-child(2){ opacity:0; }
  html.menu-open .burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  .drawer{ width:100%; }
}