@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");

/* =========================
   THEME — Maison Acanthe
   Sellerie équestre — Tradition & Luxe
   Noir / Olive / Doré
   ========================= */

:root{
  --bg:#0f0e0c;
  --bg-2:#131210;
  --panel:rgba(255,255,255,.04);
  --panel-2:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.10);
  --stroke-2:rgba(255,255,255,.14);

  --olive:#2a3b2a;
  --olive-2:#3f5b40;

  --gold:#c2a24d;
  --gold-2:#e0c77b;

  --text:#f2f2f2;
  --muted:rgba(242,242,242,.72);
  --muted-2:rgba(242,242,242,.55);

  --shadow: 0 30px 90px -70px rgba(0,0,0,.85);
  --radius: 22px;
  --radius-2: 28px;

  --container: 1180px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --display: ui-serif, Georgia, "Times New Roman", Times, serif;

  --grid-gap: 18px;

  --focus: 0 0 0 3px rgba(194,162,77,.25);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: radial-gradient(900px 500px at 20% -10%, rgba(42,59,42,.25), transparent 60%),
              radial-gradient(700px 480px at 90% 25%, rgba(194,162,77,.12), transparent 55%),
              radial-gradient(700px 520px at 10% 110%, rgba(255,255,255,.06), transparent 55%),
              linear-gradient(180deg, var(--bg) 0%, #050505 100%);
}

/* Subtle grid texture */
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0);
  background-size: 28px 28px;
  mix-blend-mode: screen;
}

/* =========================
   Layout
   ========================= */
.container{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
}

.section{
  padding: 72px 0;
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 24px;
}

.kicker{
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:700;
  color: var(--gold);
}

.h2{
  margin:8px 0 0;
  font-family: var(--display);
  font-weight:600;
  font-size: clamp(22px, 2.5vw, 34px);
}

.p{
  margin: 10px 0 0;
  color: var(--muted);
  line-height:1.6;
}

hr.sep{
  border:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  margin: 0;
}

/* =========================
   Header / Nav
   ========================= */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stroke);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color: var(--text);
}

.brand-badge{
  width:42px; height:42px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--stroke);
  display:grid;
  place-items:center;
  box-shadow: var(--shadow);
}

.brand-title{
  font-weight:700;
  letter-spacing:.02em;
}
.brand-sub{
  font-size:12px;
  color: var(--muted-2);
  margin-top:2px;
}

.menu{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.menu a{
  text-decoration:none;
  color: rgba(242,242,242,.82);
  font-size:14px;
  padding: 10px 14px;
  border-radius:999px;
  border:1px solid transparent;
  transition: .2s ease;
}

.menu a:hover{
  background: rgba(255,255,255,.04);
  border-color: var(--stroke);
  color: var(--text);
}

.menu a.active{
  background: rgba(194,162,77,.10);
  border-color: rgba(194,162,77,.38);
  color: var(--text);
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* =========================
   Buttons
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 18px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  text-decoration:none;
  font-weight:650;
  font-size:14px;
  transition: .2s ease;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  cursor:pointer;
}

.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); }
.btn:focus{ outline:none; box-shadow: var(--focus); }

.btn--gold{
  background: var(--gold);
  border-color: rgba(194,162,77,.55);
  color:#0b0b0b;
}
.btn--gold:hover{ filter: brightness(1.04); }

.btn--olive{
  background: rgba(42,59,42,.85);
  border-color: rgba(42,59,42,.95);
}
.btn--ghost{
  background: transparent;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding: 8px 12px;
  font-size:12px;
  color: rgba(242,242,242,.86);
  background: rgba(255,255,255,.04);
  border:1px solid var(--stroke);
}

.chip--gold{ background: rgba(194,162,77,.10); border-color: rgba(194,162,77,.26); color: var(--gold-2); }
.chip--olive{ background: rgba(42,59,42,.18); border-color: rgba(42,59,42,.35); }

/* =========================
   Cards / Panels
   ========================= */
.card{
  background: var(--panel);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card.pad{ padding: 22px; }
.card.pad-lg{ padding: 28px; }

.grid{
  display:grid;
  gap: var(--grid-gap);
}

.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-12{ grid-template-columns: repeat(12, minmax(0,1fr)); }

@media (max-width: 980px){
  .grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3{ grid-template-columns: repeat(1, minmax(0,1fr)); }
  .grid-2{ grid-template-columns: repeat(1, minmax(0,1fr)); }
}

@media (max-width: 520px){
  .grid-4{ grid-template-columns: repeat(1, minmax(0,1fr)); }
}

/* =========================
   Hero
   ========================= */
.hero{
  padding: 28px 0 12px;
}

.hero-wrap{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: center;
}
@media (max-width: 980px){
  .hero-wrap{ grid-template-columns: 1fr; }
}

.h1{
  margin: 14px 0 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: clamp(34px, 4.1vw, 56px);
  line-height: 1.05;
}
.h1 .gold{ color: var(--gold); }

.hero-lead{
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height:1.7;
  max-width: 60ch;
}

.hero-stats{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 520px){
  .hero-stats{ grid-template-columns: 1fr; }
}

.stat{
  padding: 16px;
  border-radius: 18px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
}
.stat .label{ font-size:12px; color: var(--muted-2); }
.stat .value{ margin-top:6px; font-weight:700; }

.video-card{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius-2);
  border:1px solid var(--stroke);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(42,59,42,.18));
  box-shadow: var(--shadow);
}

.video-card video{
  width:100%;
  height:100%;
  display:block;
  aspect-ratio: 16/11;
  object-fit: cover;
  filter: contrast(1.02) saturate(1.05) brightness(.92);
}

.video-overlay{
  position:absolute;
  inset:0;
  background: radial-gradient(900px 400px at 10% 15%, rgba(0,0,0,.0), rgba(0,0,0,.55)),
              linear-gradient(120deg, rgba(0,0,0,.55), rgba(0,0,0,.12), rgba(42,59,42,.20));
}

.video-badge{
  position:absolute;
  left: 14px;
  top: 14px;
  display:flex;
  gap:10px;
  align-items:center;
}

.video-badge .dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(194,162,77,.18);
}

.video-cta{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 14px;
  border-radius: 18px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
}
.video-cta .title{ font-weight:700; }
.video-cta .sub{ font-size:12px; color: var(--muted); margin-top:3px; }

/* =========================
   Product cards
   ========================= */
.product{
  overflow:hidden;
}

.product-media{
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(42,59,42,.18), rgba(194,162,77,.08));
  border-bottom: 1px solid var(--stroke);
  position:relative;
  overflow:hidden;
}
.product-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:.9;
  filter: contrast(1.02) saturate(1.04) brightness(.92);
}

/* Placeholder — media vide */
.product-media:not(:has(img)):not(:has(a))::after,
.product-media:has(> :empty)::after{
  content:"✦";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  color:rgba(194,162,77,.18);
  pointer-events:none;
}

/* Fallback simple pour navigateurs sans :has() */
.product-media:empty::after{
  content:"✦";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  color:rgba(194,162,77,.18);
  pointer-events:none;
}

/* Texture subtile sur les placeholders vides */
.product-media:empty{
  background:
    radial-gradient(circle at 30% 40%, rgba(42,59,42,.22), transparent 55%),
    radial-gradient(circle at 75% 65%, rgba(194,162,77,.10), transparent 50%),
    linear-gradient(160deg, rgba(255,255,255,.04), rgba(15,14,12,.7));
}

.product-body{ padding: 18px; }
.product-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.product-title{ margin: 12px 0 0; font-weight:750; }
.product-title-link{ text-decoration:none; color: var(--text); display:block; transition:.15s ease; }
.product-title-link:hover{ color: var(--gold-2); }
.product-desc{ margin: 8px 0 0; font-size:13px; line-height:1.55; color: var(--muted); }
.product-bottom{ margin-top: 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.price{ font-weight:800; }
.cat{ font-size:12px; color: var(--muted-2); }

/* =========================
   Forms
   ========================= */
.form{
  display:grid;
  gap: 14px;
}

.field{
  display:grid;
  gap: 8px;
}

label{
  font-size:12px;
  color: rgba(242,242,242,.78);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
}

input, textarea, select{
  width:100%;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font: inherit;
  outline:none;
  transition: .15s ease;
}

textarea{ min-height: 140px; resize: vertical; }

input:focus, textarea:focus, select:focus{
  border-color: rgba(194,162,77,.45);
  box-shadow: var(--focus);
}

.form-hint{
  font-size:12px;
  color: var(--muted-2);
  line-height:1.5;
}

fieldset{
  border:1px solid var(--stroke);
  border-radius: 18px;
  padding: 16px;
  margin: 0;
  background: rgba(255,255,255,.02);
}
legend{
  padding: 0 8px;
  color: var(--gold-2);
  font-size: 12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:800;
}

/* =========================
   About / Contact blocks
   ========================= */
.media{
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  overflow:hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(42,59,42,.18));
}
.media img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.9; filter: brightness(.9) contrast(1.02); }

.list{
  display:grid;
  gap: 10px;
  margin: 14px 0 0;
  padding:0;
  list-style:none;
}
.list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: var(--muted);
  line-height:1.55;
}
.bullet{
  width:9px; height:9px;
  border-radius:999px;
  margin-top: 6px;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(194,162,77,.16);
}

/* =========================
   Footer
   ========================= */
.footer{
  border-top: 1px solid var(--stroke);
  padding: 42px 0 22px;
  margin-top: 40px;
  background: rgba(0,0,0,.35);
}

.footer-grid{
  display:grid;
  gap: 22px;
  grid-template-columns: 1.4fr .8fr 1fr;
}
@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr; }
}

.footer a{
  color: rgba(242,242,242,.75);
  text-decoration:none;
}
.footer a:hover{ color: var(--text); }

.small{
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--stroke);
  color: var(--muted-2);
  font-size: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:space-between;
}

/* =========================
   Nav separator
   ========================= */
.nav-sep{
  width:1px;
  height:18px;
  background: var(--stroke-2);
  flex-shrink:0;
  margin: 0 4px;
}

/* =========================
   Mobile navigation burger
   ========================= */

/* Hidden checkbox toggle */
.nav-toggle-input{
  position:absolute;
  opacity:0;
  width:0; height:0;
  pointer-events:none;
}

/* Burger icon — hidden on desktop */
.nav-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px; height:40px;
  flex-shrink:0;
  border:1px solid var(--stroke);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:.2s ease;
  order:3;
  margin-left:auto;
}

.nav-burger:hover{
  background:rgba(255,255,255,.08);
  border-color:var(--stroke-2);
}

.nav-burger span{
  display:block;
  width:18px; height:1.5px;
  background:var(--text);
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
  transform-origin:center;
}

/* Mobile breakpoint */
@media (max-width: 768px){

  /* Section padding */
  .section{ padding:48px 0; }

  /* Nav */
  .nav{
    flex-wrap:wrap;
    gap:0;
    padding:12px 0;
  }

  .brand{ order:1; flex:1; }

  .nav-burger{ display:flex; order:2; }

  .menu{
    display:none;
    order:3;
    width:100%;
    flex-direction:column;
    gap:2px;
    padding:10px 0 6px;
    margin-top:10px;
    border-top:1px solid var(--stroke);
  }

  .menu a{
    padding:12px 14px;
    border-radius:12px;
    font-size:15px;
  }

  .nav-sep{ display:none; }

  .nav-actions{
    display:none;
    order:4;
    width:100%;
    padding:8px 0 6px;
    border-top:1px solid var(--stroke);
    margin-top:4px;
  }

  .nav-actions .btn{
    width:100%;
    justify-content:center;
  }

  /* Open state — checkbox drives siblings inside .header */
  .nav-toggle-input:checked ~ .header .menu{ display:flex; }
  .nav-toggle-input:checked ~ .header .nav-actions{ display:flex; }

  /* Burger → X animation */
  .nav-toggle-input:checked ~ .header .nav-burger span:nth-child(1){
    transform:rotate(45deg) translate(4.5px, 4.5px);
  }
  .nav-toggle-input:checked ~ .header .nav-burger span:nth-child(2){
    opacity:0;
    transform:scaleX(0);
  }
  .nav-toggle-input:checked ~ .header .nav-burger span:nth-child(3){
    transform:rotate(-45deg) translate(4.5px, -4.5px);
  }

  /* Devis layout */
  .devis-stepper{ gap:8px; }
  .devis-step-label{ display:none; }

  /* Confirmation layout */
  .confirm-hero{ padding:48px 0 32px; }

  /* Mentions légales */
  .legal-layout{ padding:32px 0; gap:24px; }
  .legal-section{ padding-bottom:36px; margin-bottom:36px; }

  /* Stats band */
  .stats-band-inner{
    grid-template-columns: 1fr;
    gap:0;
  }
  .stats-band-inner .stat{
    border-right:none;
    border-bottom:1px solid var(--stroke);
  }
  .stats-band-inner .stat:last-child{ border-bottom:none; }

  /* About values */
  .about-values-inner{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================
   Hero — full background
   ========================= */
.hero--fullbg{
  position:relative;
  padding:0;
  min-height: 88vh;
  display:flex;
  align-items:center;
}

.hero-video-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter: brightness(.58) saturate(1.08);
}

.hero-overlay-full{
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(15,14,12,.18) 0%,
    rgba(15,14,12,.42) 55%,
    rgba(15,14,12,.88) 100%
  );
}

.hero-content{
  position:relative;
  z-index:1;
  padding: 110px 0 90px;
}

.hero-content-inner{
  max-width: 660px;
}

/* =========================
   Manifeste
   ========================= */
.manifeste{
  padding: 64px 0;
  text-align:center;
  border-top:1px solid var(--stroke);
}

.manifeste-deco{
  display:block;
  color: var(--gold);
  font-size:16px;
  letter-spacing:10px;
  opacity:.55;
  margin-bottom:22px;
}

.manifeste-text{
  font-family: var(--display);
  font-size: clamp(18px, 2.2vw, 26px);
  font-style:italic;
  color: var(--muted);
  max-width:680px;
  margin:0 auto;
  line-height:1.65;
}

/* =========================
   Stats band
   ========================= */
.stats-band{
  border-top:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
}

.stats-band-inner{
  display:flex;
  justify-content:center;
  align-items:stretch;
  flex-wrap:wrap;
}

.stats-band .stat{
  flex:1;
  min-width:160px;
  text-align:center;
  padding:24px 28px;
  border:none;
  background:transparent;
  border-radius:0;
  position:relative;
}

.stats-band .stat + .stat::before{
  content:"";
  position:absolute;
  left:0; top:20%; height:60%;
  width:1px;
  background: var(--stroke);
}

/* =========================
   Portes d'entrée
   ========================= */
.porte{
  min-height:400px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  position:relative;
  background-size:cover;
  background-position:center;
  transition: transform .35s ease, box-shadow .35s ease;
  padding:0;
}

.porte:hover{
  transform:translateY(-4px);
  box-shadow:0 48px 100px -40px rgba(0,0,0,.9);
}

.porte-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(10,9,8,.94) 0%,
    rgba(10,9,8,.55) 45%,
    rgba(10,9,8,.18) 100%
  );
}

.porte--atelier .porte-overlay{
  background: linear-gradient(
    to top,
    rgba(10,9,8,.94) 0%,
    rgba(15,22,14,.62) 50%,
    rgba(42,59,42,.22) 100%
  );
}

.porte--boutique .porte-overlay{
  background: linear-gradient(
    to top,
    rgba(10,9,8,.94) 0%,
    rgba(20,16,8,.62) 50%,
    rgba(194,162,77,.12) 100%
  );
}

.porte-body{
  position:relative;
  z-index:1;
  padding:32px;
}

.porte-kicker{
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color: var(--gold);
  font-weight:700;
  margin-bottom:10px;
}

.porte-title{
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight:600;
  margin:0 0 12px;
  line-height:1.1;
}

.porte-desc{
  color: var(--muted);
  font-size:15px;
  line-height:1.65;
  max-width:38ch;
  margin:0 0 24px;
}

.porte-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: var(--text);
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  letter-spacing:.03em;
  transition: gap .2s ease;
}
.porte-link::after{ content:"→"; }
.porte-link:hover{ gap:14px; color: var(--gold-2); }

/* =========================
   CTA atelier
   ========================= */
.cta-atelier{
  background: linear-gradient(100deg, rgba(42,59,42,.22), transparent 55%, rgba(194,162,77,.08));
}

.cta-atelier-inner{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}

@media (max-width: 980px){
  .porte{ min-height:320px; }
  .hero-content{ padding:80px 0 64px; }
}

@media (max-width: 520px){
  .porte-body{ padding:24px; }
  .hero-content-inner{ max-width:100%; }
}

/* =========================
   Page hero (pages intérieures)
   ========================= */
.page-hero{
  position:relative;
  height:68vh;
  min-height:440px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}

.page-hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter: brightness(.50) saturate(1.06);
}

.page-hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(15,14,12,.08) 0%,
    rgba(15,14,12,.62) 60%,
    rgba(15,14,12,.98) 100%
  );
}

.page-hero-content{
  position:relative;
  z-index:1;
  padding-bottom:72px;
}

.page-hero-title{
  font-family: var(--display);
  font-size: clamp(42px, 6.5vw, 78px);
  font-weight:600;
  line-height:1.04;
  margin:14px 0 0;
  letter-spacing:-0.02em;
}

/* =========================
   About — intro déclaration
   ========================= */
.about-intro{
  padding:80px 0;
  text-align:center;
  border-bottom:1px solid var(--stroke);
}

.about-intro-text{
  font-family: var(--display);
  font-size: clamp(17px, 2vw, 24px);
  color: var(--muted);
  line-height:1.78;
  max-width:680px;
  margin:0 auto;
  font-style:italic;
}

/* =========================
   About — sections alternées
   ========================= */
.about-section{
  padding:96px 0;
  border-bottom:1px solid var(--stroke);
}

.about-section-inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:72px;
  align-items:center;
}

.about-section-inner--reverse{
  grid-template-columns: .95fr 1.05fr;
}

.about-section-inner--reverse .about-media{ order:2; }
.about-section-inner--reverse .about-text{ order:1; }

.about-media{
  aspect-ratio:4/5;
  border-radius: var(--radius-2);
  overflow:hidden;
  border:1px solid var(--stroke);
}

.about-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: brightness(.9) contrast(1.03) saturate(1.05);
}

.about-section-label{
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color: var(--gold);
  font-weight:700;
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
}

.about-section-label::after{
  content:"";
  flex: 0 0 36px;
  height:1px;
  background: rgba(194,162,77,.4);
}

.about-section-title{
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight:600;
  line-height:1.1;
  margin:0 0 20px;
}

/* =========================
   About — bande chiffres
   ========================= */
.about-values{
  border-bottom:1px solid var(--stroke);
}

.about-values-inner{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--stroke);
  gap:1px;
}

.about-value{
  background: var(--bg);
  padding:48px 24px;
  text-align:center;
}

.about-value-num{
  font-family: var(--display);
  font-size: clamp(44px, 5.5vw, 64px);
  font-weight:600;
  color: var(--gold);
  line-height:1;
}

.about-value-label{
  font-size:13px;
  color: var(--muted);
  margin-top:10px;
  line-height:1.45;
}

/* =========================
   About — 3 piliers
   ========================= */
.about-pillars{
  padding:80px 0;
  border-bottom:1px solid var(--stroke);
}

.pillar-card{
  padding:40px 32px;
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--panel);
}

.pillar-icon{
  font-size:16px;
  color: var(--gold);
  opacity:.6;
  margin-bottom:20px;
  display:block;
}

.pillar-title{
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight:600;
  margin:0 0 12px;
}

/* =========================
   About — CTA final
   ========================= */
.about-cta{
  padding:96px 0;
}

.about-cta-inner{
  background: linear-gradient(145deg, rgba(42,59,42,.22) 0%, rgba(15,14,12,.7) 50%, rgba(194,162,77,.07) 100%);
  border:1px solid var(--stroke-2);
  border-radius: var(--radius-2);
  padding:72px 48px;
  text-align:center;
}

.about-cta-deco{
  display:block;
  color: var(--gold);
  font-size:18px;
  letter-spacing:8px;
  opacity:.55;
  margin-bottom:24px;
}

.about-cta-title{
  font-family: var(--display);
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight:600;
  margin:0 0 16px;
  line-height:1.1;
}

.about-cta-sub{
  color: var(--muted);
  font-size:16px;
  line-height:1.65;
  max-width:500px;
  margin:0 auto 32px;
}

@media (max-width: 980px){
  .page-hero{ height:55vh; }
  .page-hero-content{ padding-bottom:48px; }
  .about-section{ padding:64px 0; }
  .about-section-inner,
  .about-section-inner--reverse{
    grid-template-columns:1fr;
    gap:36px;
  }
  .about-section-inner--reverse .about-media{ order:0; }
  .about-section-inner--reverse .about-text{ order:0; }
  .about-media{ aspect-ratio:16/9; }
  .about-values-inner{ grid-template-columns: repeat(2, 1fr); }
  .about-cta-inner{ padding:48px 28px; }
}

@media (max-width: 520px){
  .page-hero{ height:48vh; min-height:320px; }
  .about-intro{ padding:52px 0; }
  .about-values-inner{ grid-template-columns: repeat(2, 1fr); }
  .about-cta{ padding:56px 0; }
}

/* =========================
   Boutique — sidebar layout
   ========================= */
.boutique-layout{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:36px;
  align-items:start;
}

.boutique-sidebar{
  position:sticky;
  top:82px;
}

.sidebar-section{
  padding: 0;
}

.sidebar-title{
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color: var(--gold);
  font-weight:700;
  margin-bottom:12px;
}

.sidebar-filters{
  display:grid;
  gap:3px;
}

.filter-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-size:14px;
  color: var(--muted);
  border:1px solid transparent;
  transition:.15s ease;
  user-select:none;
}

.filter-item:hover{
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-color: var(--stroke);
}

.filter-item--active{
  background: rgba(194,162,77,.08);
  border-color: rgba(194,162,77,.22);
  color: var(--text);
}

.filter-count{
  font-size:12px;
  color: var(--muted-2);
  background: rgba(255,255,255,.05);
  padding:2px 8px;
  border-radius:999px;
}

.sidebar-sep{
  height:1px;
  background: var(--stroke);
  margin:20px 0;
}

.boutique-main .grid-3{
  grid-template-columns: repeat(3, minmax(0,1fr));
}

@media (max-width: 980px){
  .boutique-layout{
    grid-template-columns: 1fr;
  }
  .boutique-sidebar{
    position:static;
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    align-items:center;
  }
  .boutique-sidebar .sidebar-sep{ display:none; }
  .boutique-sidebar .sidebar-section:last-child{ display:none; }
  .sidebar-filters{
    display:flex;
    flex-direction:row;
    gap:6px;
  }
  .boutique-main .grid-3{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 520px){
  .boutique-main .grid-3{
    grid-template-columns: 1fr;
  }
}

/* =========================
   Devis — reassurance band
   ========================= */
.reassurance-band{
  background: rgba(255,255,255,.02);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  padding:14px 20px;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:32px;
}

.reassurance-item{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  color: var(--muted);
}

.reassurance-dot{
  width:7px; height:7px;
  border-radius:999px;
  background: var(--gold);
  flex-shrink:0;
}

/* =========================
   Devis — stepper
   ========================= */
.devis-stepper{
  display:flex;
  align-items:center;
  margin-bottom:32px;
}

.devis-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  flex-shrink:0;
}

.devis-step-num{
  width:36px; height:36px;
  border-radius:999px;
  border:1px solid var(--stroke-2);
  background: rgba(255,255,255,.03);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  color: var(--muted-2);
}

.devis-step--active .devis-step-num{
  background: var(--gold);
  border-color: var(--gold);
  color: #0f0e0c;
}

.devis-step-label{
  font-size:12px;
  color: var(--muted-2);
  white-space:nowrap;
}

.devis-step--active .devis-step-label{
  color: var(--text);
  font-weight:600;
}

.devis-step-line{
  flex:1;
  height:1px;
  background: var(--stroke);
  margin:0 12px;
  margin-bottom:20px;
}

/* =========================
   Devis — form sections
   ========================= */
.form-section{
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  overflow:hidden;
  background: var(--panel);
}

.form-section-header{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 20px;
  border-bottom:1px solid var(--stroke);
  background: rgba(255,255,255,.02);
}

.form-section-num{
  width:28px; height:28px;
  border-radius:999px;
  background: rgba(194,162,77,.12);
  border:1px solid rgba(194,162,77,.28);
  color: var(--gold-2);
  font-size:13px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.form-section-body{
  padding:20px;
  display:grid;
  gap:14px;
}

/* =========================
   Fil d'ariane
   ========================= */
.breadcrumb{
  border-bottom:1px solid var(--stroke);
  padding:14px 0;
}

.breadcrumb-nav{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color: var(--muted-2);
  flex-wrap:wrap;
}

.breadcrumb-nav a{
  color: var(--muted);
  text-decoration:none;
  transition:.15s ease;
}

.breadcrumb-nav a:hover{ color: var(--text); }

.breadcrumb-sep{
  color: var(--muted-2);
  font-size:11px;
}

/* =========================
   Fiche produit
   ========================= */
.product-page{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:56px;
  align-items:start;
}

/* Galerie */
.product-gallery{
  position:sticky;
  top:82px;
  display:grid;
  gap:12px;
}

.product-gallery-main{
  aspect-ratio:4/3;
  border-radius: var(--radius-2);
  overflow:hidden;
  border:1px solid var(--stroke);
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(42,59,42,.14));
}

.product-gallery-main img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: contrast(1.02) saturate(1.04) brightness(.92);
}

.product-gallery-thumbs{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:8px;
}

.product-thumb{
  aspect-ratio:1;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--stroke);
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(42,59,42,.10));
  cursor:pointer;
  transition:.15s ease;
}

.product-thumb--active{
  border-color: rgba(194,162,77,.5);
  box-shadow: 0 0 0 2px rgba(194,162,77,.15);
}

.product-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:.85;
}

/* Infos produit */
.product-info{
  display:grid;
  gap:28px;
}

.product-info-header{
  display:grid;
  gap:6px;
}

.product-cat-label{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--gold);
  font-weight:700;
}

.product-info-title{
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight:600;
  margin:0;
  line-height:1.1;
}

.product-info-sub{
  font-size:12px;
  color: var(--muted-2);
}

.product-info-price-block{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.product-info-price{
  font-family: var(--display);
  font-size:34px;
  font-weight:600;
  color: var(--text);
}

.product-info-stock{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color: var(--muted);
}

.stock-dot{
  width:8px; height:8px;
  border-radius:999px;
  background: #4caf50;
  box-shadow: 0 0 0 3px rgba(76,175,80,.18);
  flex-shrink:0;
}

.product-info-desc{
  color: var(--muted);
  line-height:1.7;
  font-size:15px;
  padding-bottom:28px;
  border-bottom:1px solid var(--stroke);
}

.product-info-attrs{
  display:grid;
  gap:12px;
}

.product-attr{
  display:flex;
  gap:16px;
  font-size:14px;
  line-height:1.5;
}

.product-attr-label{
  flex-shrink:0;
  width:110px;
  color: var(--muted-2);
  font-size:12px;
  letter-spacing:.05em;
  padding-top:2px;
}

.product-attr-value{
  color: var(--muted);
}

.product-info-qty{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.qty-field{
  display:flex;
  align-items:center;
  gap:0;
  border:1px solid var(--stroke);
  border-radius:14px;
  overflow:hidden;
}

.qty-btn{
  background: rgba(255,255,255,.04);
  border:none;
  color: var(--text);
  width:40px; height:44px;
  cursor:pointer;
  font-size:18px;
  font-weight:300;
  transition:.15s ease;
}

.qty-btn:hover{ background: rgba(255,255,255,.08); }

.qty-value{
  width:40px;
  text-align:center;
  font-weight:700;
  font-size:15px;
  border-left:1px solid var(--stroke);
  border-right:1px solid var(--stroke);
  line-height:44px;
}

.product-add-btn{
  flex:1;
  min-width:180px;
  padding:14px 22px;
  font-size:15px;
}

.product-info-reassurance{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  padding-top:20px;
  border-top:1px solid var(--stroke);
}

/* Onglets détails */
.product-details-tabs{
  display:flex;
  gap:0;
  border-bottom:1px solid var(--stroke);
  margin-bottom:36px;
}

.product-tab{
  padding:14px 20px;
  font-size:14px;
  color: var(--muted);
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:.15s ease;
}

.product-tab:hover{ color: var(--text); }

.product-tab--active{
  color: var(--text);
  border-bottom-color: var(--gold);
  font-weight:600;
}

/* Usage steps */
.usage-steps{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:16px;
}

.usage-steps li{
  display:flex;
  gap:14px;
  align-items:flex-start;
  color: var(--muted);
  line-height:1.6;
  font-size:14px;
}

.usage-num{
  flex-shrink:0;
  width:26px; height:26px;
  border-radius:999px;
  background: rgba(194,162,77,.10);
  border:1px solid rgba(194,162,77,.25);
  color: var(--gold-2);
  font-size:12px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:1px;
}

@media (max-width: 980px){
  .product-page{
    grid-template-columns:1fr;
  }
  .product-gallery{
    position:static;
  }
}

@media (max-width: 520px){
  .product-info-qty{ flex-direction:column; align-items:stretch; }
  .product-add-btn{ width:100%; }
}

/* =========================
   Page hero — variant compact
   ========================= */
.page-hero--sm{
  height:42vh;
  min-height:300px;
}

/* =========================
   Contact — layout
   ========================= */
.contact-layout{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:36px;
  align-items:start;
}

.contact-infos{
  display:grid;
  gap:18px;
  position:sticky;
  top:82px;
}

.contact-info-card{
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--panel);
  padding:24px;
}

.contact-info-name{
  font-family: var(--display);
  font-size:22px;
  font-weight:600;
  margin:10px 0 20px;
}

.contact-info-list{
  display:grid;
  gap:14px;
}

.contact-info-row{
  display:grid;
  gap:3px;
}

.contact-info-label{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--muted-2);
  font-weight:700;
}

.contact-info-value{
  font-size:14px;
  color: var(--muted);
  text-decoration:none;
  line-height:1.5;
}

a.contact-info-value:hover{ color: var(--text); }

.contact-map{
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(42,59,42,.12), rgba(15,14,12,.8));
  padding:24px;
  min-height:160px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}

.contact-map::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 0);
  background-size:20px 20px;
  opacity:.5;
}

.contact-map-label{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  color: var(--text);
  letter-spacing:.05em;
}

.contact-map-dot{
  width:8px; height:8px;
  border-radius:999px;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(194,162,77,.2);
  flex-shrink:0;
}

.contact-map-address{
  position:relative;
  font-family: var(--display);
  font-size:15px;
  color: var(--muted);
  line-height:1.6;
}

.contact-map-note{
  position:relative;
  font-size:11px;
  color: var(--muted-2);
  letter-spacing:.05em;
}

.contact-devis-cta{
  background: linear-gradient(135deg, rgba(42,59,42,.18), rgba(15,14,12,.7));
}

@media (max-width: 980px){
  .contact-layout{
    grid-template-columns:1fr;
  }
  .contact-infos{
    position:static;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px){
  .contact-infos{ grid-template-columns:1fr; }
}

/* =========================
   Panier — layout
   ========================= */
.cart-layout{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:28px;
  align-items:start;
}

.cart-items{
  display:grid;
  gap:0;
}

.cart-item{
  display:grid;
  grid-template-columns: 80px 1fr auto auto auto;
  gap:20px;
  align-items:center;
  padding:22px 0;
  border-bottom:1px solid var(--stroke);
}

.cart-item-img{
  width:80px;
  aspect-ratio:1;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--stroke);
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(42,59,42,.12));
  display:block;
  flex-shrink:0;
}

.cart-item-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:.9;
}

.cart-item-info{
  display:grid;
  gap:4px;
}

.cart-item-title{
  font-weight:700;
  font-size:15px;
  color: var(--text);
  text-decoration:none;
  transition:.15s ease;
}

.cart-item-title:hover{ color: var(--gold-2); }

.cart-item-ref{
  font-size:12px;
  color: var(--muted-2);
}

.cart-item-price{
  font-weight:700;
  font-size:15px;
  white-space:nowrap;
}

.cart-item-remove{
  background:none;
  border:none;
  color: var(--muted-2);
  font-size:20px;
  cursor:pointer;
  padding:4px 8px;
  border-radius:8px;
  transition:.15s ease;
  line-height:1;
}

.cart-item-remove:hover{
  background: rgba(255,255,255,.05);
  color: var(--text);
}

.cart-promo{
  padding:20px 0;
  border-bottom:1px solid var(--stroke);
}

.cart-promo-form{
  display:flex;
  gap:10px;
  align-items:flex-end;
}

.cart-note{
  padding:20px;
  margin-top:16px;
  border-radius: var(--radius);
  background: rgba(42,59,42,.10);
  border:1px solid rgba(42,59,42,.3);
}

/* Summary */
.cart-summary-col{
  position:sticky;
  top:82px;
  display:grid;
  gap:14px;
}

.cart-summary-card{
  background: var(--panel);
}

.cart-summary-rows{
  display:grid;
  gap:10px;
  margin:4px 0 18px;
}

.cart-summary-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  color: var(--muted);
}

.cart-summary-row--total{
  font-size:17px;
  font-weight:700;
  color: var(--text);
}

.cart-summary-sep{
  height:1px;
  background: var(--stroke);
  margin:4px 0;
}

.cart-summary-reassurance{
  display:grid;
  gap:8px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--stroke);
}

.cart-summary-devis{
  background: var(--panel);
}

.btn--cart-active{
  background: rgba(194,162,77,.12);
  border-color: rgba(194,162,77,.3);
  color: var(--gold-2);
}

@media (max-width: 980px){
  .cart-layout{
    grid-template-columns:1fr;
  }
  .cart-summary-col{
    position:static;
  }
}

@media (max-width: 520px){
  .cart-item{
    grid-template-columns: 64px 1fr auto;
    grid-template-rows: auto auto;
  }
  .cart-item-qty{ grid-column:2; }
  .cart-item-price{ grid-column:3; grid-row:2; }
}

/* =========================
   Confirmation commande
   ========================= */
.confirm-hero{
  text-align:center;
  padding:72px 0 48px;
}

.confirm-icon{
  width:80px; height:80px;
  border-radius:999px;
  background: rgba(42,59,42,.18);
  border:1px solid rgba(42,59,42,.5);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 28px;
  font-size:32px;
  color: var(--gold);
}

.confirm-title{
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight:600;
  margin:0 0 12px;
}

.confirm-subtitle{
  font-size:16px;
  color: var(--muted);
  max-width:480px;
  margin:0 auto 24px;
  line-height:1.6;
}

.confirm-order-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:10px 20px;
  font-size:13px;
  color: var(--muted-2);
}

.confirm-order-num{
  font-family: var(--display);
  font-size:15px;
  font-weight:700;
  color: var(--gold-2);
  letter-spacing:.05em;
}

.confirm-layout{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:28px;
  align-items:start;
}

/* Timeline étapes */
.confirm-timeline{
  display:grid;
  gap:0;
}

.confirm-step{
  display:grid;
  grid-template-columns: 48px 1fr;
  gap:0 18px;
  padding-bottom:32px;
  position:relative;
}

.confirm-step:last-child{ padding-bottom:0; }

.confirm-step-track{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}

.confirm-step-num{
  width:36px; height:36px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  flex-shrink:0;
}

.confirm-step-num--done{
  background: rgba(42,59,42,.22);
  border:1px solid rgba(42,59,42,.5);
  color: var(--gold-2);
}

.confirm-step-num--pending{
  background: rgba(255,255,255,.04);
  border:1px solid var(--stroke);
  color: var(--muted-2);
}

.confirm-step-line{
  width:1px;
  flex:1;
  background: var(--stroke);
  margin-top:6px;
}

.confirm-step-body{
  padding-top:6px;
  padding-bottom:0;
}

.confirm-step-label{
  font-weight:700;
  font-size:15px;
  margin:0 0 4px;
}

.confirm-step-desc{
  font-size:14px;
  color: var(--muted);
  line-height:1.55;
}

/* Récap commande */
.confirm-recap-items{
  display:grid;
  gap:0;
}

.confirm-recap-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--stroke);
}

.confirm-recap-img{
  width:52px; height:52px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--stroke);
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(42,59,42,.12));
  flex-shrink:0;
}

.confirm-recap-img img{
  width:100%; height:100%; object-fit:cover; display:block; opacity:.9;
}

.confirm-recap-info{
  flex:1;
}

.confirm-recap-name{
  font-weight:700;
  font-size:14px;
}

.confirm-recap-ref{
  font-size:12px;
  color: var(--muted-2);
  margin-top:2px;
}

.confirm-recap-price{
  font-weight:700;
  font-size:15px;
  white-space:nowrap;
}

.confirm-recap-totals{
  display:grid;
  gap:10px;
  padding:16px 0 0;
}

.confirm-recap-row{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  color: var(--muted);
}

.confirm-recap-row--total{
  font-size:17px;
  font-weight:700;
  color: var(--text);
  padding-top:10px;
  border-top:1px solid var(--stroke);
  margin-top:4px;
}

@media (max-width: 980px){
  .confirm-layout{ grid-template-columns:1fr; }
}

/* =========================
   Mentions légales / CGV
   ========================= */
.legal-hero{
  padding:52px 0 40px;
  border-bottom:1px solid var(--stroke);
  margin-bottom:0;
}

.legal-nav{
  display:flex;
  gap:0;
  border-bottom:1px solid var(--stroke);
  overflow-x:auto;
}

.legal-tab{
  padding:14px 24px;
  font-size:14px;
  font-weight:600;
  color: var(--muted-2);
  cursor:pointer;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:.15s ease;
  text-decoration:none;
}

.legal-tab--active{
  color: var(--text);
  border-bottom-color: var(--gold);
}

.legal-layout{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:48px;
  align-items:start;
  padding:48px 0;
}

.legal-sidebar{
  position:sticky;
  top:82px;
  display:grid;
  gap:8px;
}

.legal-sidebar-label{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  color: var(--muted-2);
  margin-bottom:4px;
}

.legal-sidebar-link{
  font-size:13px;
  color: var(--muted);
  text-decoration:none;
  padding:6px 0 6px 14px;
  border-left:2px solid var(--stroke);
  display:block;
  transition:.15s ease;
  line-height:1.4;
}

.legal-sidebar-link:hover{ color: var(--text); border-left-color: var(--gold); }
.legal-sidebar-link--active{ color: var(--gold-2); border-left-color: var(--gold); }

.legal-body{
  min-width:0;
}

.legal-section{
  padding-bottom:52px;
  border-bottom:1px solid var(--stroke);
  margin-bottom:52px;
}

.legal-section:last-child{
  border-bottom:none;
  margin-bottom:0;
}

.legal-section-kicker{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  color: var(--muted-2);
  margin-bottom:12px;
}

.legal-section-title{
  font-family: var(--display);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight:600;
  margin:0 0 28px;
  line-height:1.2;
}

.legal-body h3{
  font-family: var(--display);
  font-size:17px;
  font-weight:600;
  margin:28px 0 10px;
  color: var(--text);
}

.legal-body p{
  font-size:14px;
  color: var(--muted);
  line-height:1.75;
  margin:0 0 14px;
}

.legal-body ul{
  list-style:none;
  padding:0;
  margin:0 0 14px;
  display:grid;
  gap:8px;
}

.legal-body ul li{
  font-size:14px;
  color: var(--muted);
  line-height:1.6;
  padding-left:16px;
  position:relative;
}

.legal-body ul li::before{
  content:"–";
  position:absolute;
  left:0;
  color: var(--gold);
}

.legal-body table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  margin:0 0 16px;
}

.legal-body table th{
  text-align:left;
  padding:10px 14px;
  background: rgba(255,255,255,.03);
  border:1px solid var(--stroke);
  font-weight:700;
  color: var(--muted);
  font-size:12px;
  letter-spacing:.04em;
}

.legal-body table td{
  padding:10px 14px;
  border:1px solid var(--stroke);
  color: var(--muted);
  vertical-align:top;
  line-height:1.5;
}

@media (max-width: 980px){
  .legal-layout{ grid-template-columns:1fr; }
  .legal-sidebar{ position:static; flex-direction:row; display:flex; flex-wrap:wrap; gap:4px; }
  .legal-sidebar-label{ display:none; }
  .legal-sidebar-link{ border-left:none; border-bottom:2px solid var(--stroke); padding:6px 12px; }
}

/* =========================
   Devis — améliorations
   ========================= */
.devis-finitions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}

.devis-finition-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border:1px solid var(--stroke);
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  color: var(--muted);
  cursor:pointer;
  transition:.15s ease;
  background:none;
}

.devis-finition-chip:hover{
  border-color: rgba(194,162,77,.4);
  color: var(--gold-2);
}

.devis-finition-chip--active{
  border-color: var(--gold);
  color: var(--gold-2);
  background: rgba(194,162,77,.08);
}

.devis-finition-dot{
  width:10px; height:10px;
  border-radius:999px;
  flex-shrink:0;
}

.devis-finition-dot--noir{ background:#1a1915; border:1px solid rgba(255,255,255,.2); }
.devis-finition-dot--olive{ background:#2a3b2a; }
.devis-finition-dot--dore{ background: var(--gold); }

.devis-portfolio{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--stroke);
  background: linear-gradient(135deg, rgba(42,59,42,.15), rgba(15,14,12,.8));
  min-height:180px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:20px;
  position:relative;
}

.devis-portfolio img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.35;
}

.devis-portfolio-body{
  position:relative;
}

.devis-portfolio-quote{
  font-family: var(--display);
  font-size:17px;
  font-weight:600;
  line-height:1.4;
  margin-bottom:8px;
}

.devis-portfolio-attr{
  font-size:12px;
  color: var(--muted-2);
  letter-spacing:.05em;
}

/* =========================
   Utility
   ========================= */
.mt-6{ margin-top: 24px; }
.mt-8{ margin-top: 32px; }
.m0{ margin:0; }
.right{ text-align:right; }

/* =========================
   Refresh 2026
   ========================= */
:root{
  --bg:#0d0d0d;
  --bg-2:#142607;
  --panel:rgba(239,230,223,.06);
  --panel-2:rgba(239,230,223,.09);
  --stroke:rgba(239,230,223,.14);
  --stroke-2:rgba(239,230,223,.22);

  --olive:#142607;
  --olive-2:#736a51;

  --gold:#d99b84;
  --gold-2:#ecc5b7;
  --rose:#a66363;
  --sand:#f6eee7;

  --text:#f8f2ec;
  --muted:rgba(248,242,236,.74);
  --muted-2:rgba(248,242,236,.56);

  --shadow:0 32px 90px -56px rgba(0,0,0,.92);
  --radius:24px;
  --radius-2:34px;

  --font:"Manrope","Segoe UI",sans-serif;
  --display:"Cormorant Garamond",Georgia,serif;

  --focus:0 0 0 3px rgba(217,155,132,.24);
}

html{
  scroll-behavior:smooth;
}

body{
  background:
    radial-gradient(1100px 760px at 8% -12%, rgba(20,38,7,.68), transparent 64%),
    radial-gradient(720px 540px at 96% 12%, rgba(166,99,99,.26), transparent 56%),
    radial-gradient(760px 560px at 50% 112%, rgba(217,155,132,.12), transparent 60%),
    linear-gradient(180deg, #121110 0%, #0d0d0d 28%, #13210b 100%);
  letter-spacing:.01em;
}

body::before{
  opacity:.08;
  background-size:32px 32px;
}

body.homepage::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:120;
  pointer-events:none;
  transform-origin:top;
  background:
    linear-gradient(180deg, rgba(13,13,13,.98), rgba(20,38,7,.96)),
    radial-gradient(circle at 80% 20%, rgba(217,155,132,.18), transparent 30%);
  animation:homepageCurtain 1.25s cubic-bezier(.7,0,.2,1) forwards;
}

::selection{
  background:rgba(217,155,132,.3);
  color:var(--text);
}

a{
  color:inherit;
}

img{
  max-width:100%;
}

.h1,
.h2,
.page-hero-title,
.about-section-title,
.confirm-title,
.legal-section-title{
  text-wrap:balance;
}

.section-head{
  margin-bottom:32px;
}

.section-head--stack{
  display:grid;
  justify-content:flex-start;
  align-items:flex-start;
}

.header{
  background:rgba(13,13,13,.6);
  border-bottom:1px solid rgba(239,230,223,.1);
  box-shadow:0 18px 48px -40px rgba(0,0,0,.95);
}

.nav{
  padding:16px 0;
}

.brand-badge{
  border-radius:18px;
  color:var(--gold);
  background:linear-gradient(180deg, rgba(217,155,132,.18), rgba(217,155,132,.03));
  border-color:rgba(217,155,132,.24);
}

.brand-title{
  font-family:var(--display);
  font-size:30px;
  font-weight:600;
  line-height:.95;
}

.brand-sub{
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:10px;
}

.menu a{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
}

.menu a:hover{
  background:rgba(239,230,223,.06);
  border-color:rgba(239,230,223,.14);
}

.menu a.active{
  background:rgba(217,155,132,.14);
  border-color:rgba(217,155,132,.3);
}

.btn{
  padding:13px 18px;
  border-radius:999px;
  background:rgba(239,230,223,.05);
  border-color:rgba(239,230,223,.16);
  font-size:13px;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.btn:hover{
  background:rgba(239,230,223,.08);
}

.btn--gold{
  background:linear-gradient(135deg, var(--gold), #c98a77);
  border-color:rgba(217,155,132,.72);
  color:#1b130f;
  box-shadow:0 24px 48px -32px rgba(217,155,132,.9);
}

.btn--gold:hover{
  background:linear-gradient(135deg, #e1aa95, #cb8a77);
  filter:none;
}

.btn--olive{
  background:rgba(20,38,7,.78);
  border-color:rgba(115,106,81,.45);
}

.btn--ghost{
  background:rgba(239,230,223,.03);
}

.chip{
  background:rgba(239,230,223,.06);
  border-color:rgba(239,230,223,.12);
  color:var(--muted);
}

.chip--gold{
  background:rgba(217,155,132,.12);
  border-color:rgba(217,155,132,.24);
  color:#f9d6c8;
}

.chip--olive{
  background:rgba(115,106,81,.22);
  border-color:rgba(115,106,81,.32);
  color:#e8dece;
}

.card{
  background:linear-gradient(180deg, rgba(239,230,223,.07), rgba(239,230,223,.03));
  border-color:rgba(239,230,223,.12);
  backdrop-filter:blur(14px);
}

input,
textarea,
select,
fieldset{
  background:rgba(239,230,223,.04);
  border-color:rgba(239,230,223,.14);
}

input:focus,
textarea:focus,
select:focus{
  border-color:rgba(217,155,132,.45);
}

.hero--fullbg{
  min-height:100vh;
  isolation:isolate;
}

.hero-video-bg{
  filter:brightness(.4) saturate(.9) contrast(1.02);
  transform:scale(1.03);
  animation:heroZoom 8s ease-out both;
}

.hero-overlay-full{
  background:
    linear-gradient(180deg, rgba(13,13,13,.2) 0%, rgba(13,13,13,.42) 38%, rgba(13,13,13,.92) 100%),
    radial-gradient(circle at 15% 18%, rgba(20,38,7,.34), transparent 36%),
    radial-gradient(circle at 84% 20%, rgba(166,99,99,.2), transparent 30%);
}

.hero-content{
  padding:148px 0 96px;
}

.hero-home-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(320px, .85fr);
  gap:28px;
  align-items:end;
}

.hero-topline{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:28px;
}

.hero-topline span{
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(239,230,223,.12);
  background:rgba(13,13,13,.3);
  backdrop-filter:blur(12px);
  color:var(--text);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.hero-content-inner{
  max-width:760px;
}

.h1{
  max-width:11ch;
  font-size:clamp(48px, 6vw, 88px);
  line-height:.94;
  letter-spacing:-.03em;
  margin-top:0;
}

.hero-lead{
  max-width:58ch;
  font-size:17px;
  line-height:1.82;
}

.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:32px;
}

.hero-panel{
  padding:28px;
  border-radius:32px;
  border:1px solid rgba(239,230,223,.12);
  background:linear-gradient(180deg, rgba(13,13,13,.36), rgba(13,13,13,.7));
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}

.hero-panel-label{
  color:var(--gold-2);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin-bottom:14px;
}

.hero-panel p{
  margin:0;
  color:var(--muted);
  line-height:1.8;
}

.hero-metrics{
  display:grid;
  gap:14px;
  margin-top:24px;
}

.hero-metric{
  padding-top:14px;
  border-top:1px solid rgba(239,230,223,.12);
}

.hero-metric span{
  display:block;
  margin-bottom:6px;
  color:var(--muted-2);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.hero-metric strong{
  display:block;
  font-family:var(--display);
  font-size:24px;
  font-weight:600;
  line-height:1.15;
}

.hero-animate{
  opacity:0;
  transform:translateY(24px);
  animation:heroFadeUp .85s cubic-bezier(.2,.8,.2,1) forwards;
}

.hero-animate--1{ animation-delay:.2s; }
.hero-animate--2{ animation-delay:.35s; }
.hero-animate--3{ animation-delay:.48s; }
.hero-animate--4{ animation-delay:.62s; }
.hero-animate--5{ animation-delay:.78s; }
.hero-animate--6{ animation-delay:.94s; }

.manifeste{
  background:linear-gradient(180deg, rgba(239,230,223,.02), rgba(239,230,223,.04));
}

.manifeste-text{
  max-width:760px;
}

.section--editorial{
  padding-top:88px;
}

.editorial-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  gap:24px;
  align-items:stretch;
}

.editorial-card{
  position:relative;
  overflow:hidden;
  padding:34px;
  border-radius:var(--radius-2);
  border:1px solid rgba(239,230,223,.12);
  background:linear-gradient(180deg, rgba(239,230,223,.07), rgba(239,230,223,.03));
}

.editorial-card--image{
  padding:0;
  min-height:540px;
}

.editorial-card--image img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.82) saturate(.88) contrast(1.04);
}

.editorial-card-caption{
  position:absolute;
  left:24px;
  right:24px;
  bottom:24px;
  padding:20px 22px;
  border-radius:24px;
  border:1px solid rgba(239,230,223,.14);
  background:rgba(13,13,13,.62);
  backdrop-filter:blur(18px);
}

.editorial-card-caption strong{
  display:block;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-2);
  margin-bottom:8px;
}

.editorial-card-caption p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.editorial-points{
  display:grid;
  gap:14px;
  margin-top:28px;
}

.editorial-point{
  padding-top:16px;
  border-top:1px solid rgba(239,230,223,.12);
}

.editorial-point h3{
  margin:0 0 8px;
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.editorial-point p{
  margin:0;
  color:var(--muted);
  line-height:1.72;
  font-size:14px;
}

.section--tight{
  padding-top:0;
}

.process-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}

.process-step{
  padding:28px;
  border-radius:var(--radius);
  border:1px solid rgba(239,230,223,.12);
  background:linear-gradient(180deg, rgba(115,106,81,.16), rgba(13,13,13,.34));
}

.process-step-num{
  display:block;
  font-family:var(--display);
  font-size:36px;
  font-weight:600;
  color:var(--gold);
  line-height:1;
}

.process-step h3{
  margin:16px 0 10px;
  font-family:var(--display);
  font-size:34px;
  font-weight:600;
  line-height:1;
}

.process-step p{
  margin:0;
  color:var(--muted);
  line-height:1.72;
}

.stats-band{
  background:rgba(239,230,223,.02);
}

.porte{
  min-height:440px;
  border-color:rgba(239,230,223,.12);
}

.porte-overlay{
  background:
    linear-gradient(to top, rgba(13,13,13,.96) 0%, rgba(13,13,13,.56) 46%, rgba(13,13,13,.14) 100%),
    radial-gradient(circle at 20% 12%, rgba(20,38,7,.24), transparent 32%);
}

.porte--atelier .porte-overlay{
  background:
    linear-gradient(to top, rgba(13,13,13,.96) 0%, rgba(20,38,7,.58) 48%, rgba(20,38,7,.18) 100%),
    radial-gradient(circle at 18% 16%, rgba(20,38,7,.28), transparent 34%);
}

.porte--renovation .porte-overlay{
  background:
    linear-gradient(to top, rgba(13,13,13,.96) 0%, rgba(115,106,81,.56) 48%, rgba(166,99,99,.18) 100%),
    radial-gradient(circle at 78% 16%, rgba(217,155,132,.18), transparent 32%);
}

.porte--boutique .porte-overlay{
  background:
    linear-gradient(to top, rgba(13,13,13,.96) 0%, rgba(166,99,99,.52) 48%, rgba(217,155,132,.14) 100%),
    radial-gradient(circle at 74% 18%, rgba(217,155,132,.18), transparent 34%);
}

.porte-kicker{
  color:var(--gold-2);
}

.porte-link{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
}

.porte-link::after{
  content:"↗";
}

.palette-section{
  padding-top:0;
}

.palette-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:14px;
}

.swatch{
  padding:16px;
  border-radius:24px;
  border:1px solid rgba(239,230,223,.12);
  background:rgba(239,230,223,.05);
}

.swatch-sample{
  display:block;
  aspect-ratio:1 / 1.25;
  border-radius:18px;
  margin-bottom:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

.swatch-name{
  font-weight:700;
  margin-bottom:4px;
}

.swatch-value{
  color:var(--muted-2);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.swatch-note{
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
}

.home-cta{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(20,38,7,.8), rgba(115,106,81,.44) 56%, rgba(166,99,99,.5));
}

.home-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 16% 22%, rgba(255,255,255,.12), transparent 24%),
    radial-gradient(circle at 84% 18%, rgba(217,155,132,.24), transparent 26%);
  pointer-events:none;
}

.home-cta-inner{
  position:relative;
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.home-cta-copy{
  max-width:620px;
}

.home-cta-title{
  margin:12px 0 0;
  font-family:var(--display);
  font-size:clamp(30px, 3vw, 48px);
  font-weight:600;
  line-height:1.04;
}

.home-cta-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.cta-atelier{
  background:linear-gradient(100deg, rgba(20,38,7,.28), transparent 55%, rgba(217,155,132,.12));
}

.page-hero-bg{
  filter:brightness(.46) saturate(.9) contrast(1.04);
}

.page-hero-overlay{
  background:
    linear-gradient(to bottom, rgba(13,13,13,.08) 0%, rgba(13,13,13,.62) 60%, rgba(13,13,13,.98) 100%),
    radial-gradient(circle at 86% 14%, rgba(217,155,132,.2), transparent 28%),
    radial-gradient(circle at 12% 12%, rgba(20,38,7,.26), transparent 34%);
}

.footer{
  background:linear-gradient(180deg, rgba(13,13,13,.62), rgba(13,13,13,.9));
}

.product-media img,
.media img,
.about-media img,
.product-gallery-main img{
  filter:brightness(.9) saturate(.92) contrast(1.04);
}

.product-title-link:hover,
.cart-item-title:hover,
.porte-link:hover{
  color:var(--gold-2);
}

.devis-finition-dot--noir{
  background:#0d0d0d;
  border:1px solid rgba(239,230,223,.22);
}

.devis-finition-dot--olive{
  background:#736a51;
}

.devis-finition-dot--dore{
  background:var(--gold);
}

@keyframes homepageCurtain{
  0%, 62%{ transform:scaleY(1); }
  100%{ transform:scaleY(0); }
}

@keyframes heroFadeUp{
  to{
    opacity:1;
    transform:none;
  }
}

@keyframes heroZoom{
  from{ transform:scale(1.08); }
  to{ transform:scale(1.03); }
}

@media (max-width: 980px){
  .hero-content{
    padding:128px 0 82px;
  }

  .hero-home-grid,
  .editorial-grid,
  .process-grid{
    grid-template-columns:1fr;
  }

  .palette-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .brand-title{
    font-size:26px;
  }

  .hero-panel{
    max-width:620px;
  }
}

@media (max-width: 640px){
  .hero-topline{
    gap:8px;
    margin-bottom:22px;
  }

  .hero-topline span{
    font-size:10px;
    letter-spacing:.14em;
  }

  .hero-content{
    padding:118px 0 72px;
  }

  .h1{
    max-width:100%;
    font-size:clamp(42px, 13vw, 66px);
  }

  .hero-panel,
  .editorial-card{
    padding:24px;
    border-radius:24px;
  }

  .editorial-card--image{
    min-height:420px;
    padding:0;
  }

  .editorial-card-caption{
    left:16px;
    right:16px;
    bottom:16px;
    padding:16px 18px;
    border-radius:20px;
  }

  .palette-grid{
    grid-template-columns:1fr;
  }

  .home-cta-actions{
    width:100%;
  }

  .home-cta-actions .btn{
    flex:1 1 100%;
    justify-content:center;
  }
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }

  body.homepage::after,
  .hero-video-bg,
  .hero-animate{
    animation:none;
    transform:none;
    opacity:1;
  }
}