/* ════════════════════════════════════════════════════════════
   ATELIER M TEAM
   Editorial menuiserie · stand · agencement
   ════════════════════════════════════════════════════════════ */

:root{
  /* Wood-tone palette extracted from logo + extended */
  --paper:        #F5EFE3;
  --paper-2:      #EFE6D4;
  --sand:         #E4D6BC;
  --bronze:       #B5854E;   /* logo bronze */
  --bronze-dark:  #8C6234;
  --rust:         #B2542A;
  --walnut:       #2A1E14;
  --ink:          #161210;
  --ink-soft:     #2C241E;
  --line:         #1612101a;
  --line-strong:  #1612102a;
  --paper-line:   #F5EFE336;

  /* Typography */
  --f-display: "DM Sans", system-ui, sans-serif;
  --f-body:    "Manrope", system-ui, sans-serif;
  --f-italic:  "Cormorant Garamond", Georgia, serif;

  --max: 1440px;
  --pad: clamp(20px, 4vw, 56px);
  --radius: 14px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; }

::selection{ background:var(--bronze); color:var(--paper); }

h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.05;
  margin:0;
}
em{
  font-family:var(--f-italic);
  font-style:italic;
  font-weight:500;
  letter-spacing:-0.005em;
  color:var(--bronze-dark);
}

/* ════════════════════════════════  PRELOADER  */
.preloader{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
.preloader.is-out{ opacity:0; visibility:hidden; pointer-events:none; }
.pre-logo{
  width:auto;
  height:clamp(110px, 22vw, 200px);
  filter:brightness(0) invert(1);
  opacity:0;
  animation:pre-fade 1.4s ease forwards;
}
@keyframes pre-fade{
  0%{ opacity:0; transform:scale(.94); }
  60%{ opacity:1; transform:scale(1); }
  100%{ opacity:1; transform:scale(1); }
}

/* ════════════════════════════════  NAV  */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:grid; grid-template-columns:auto 1fr auto auto;
  align-items:center; gap:28px;
  padding:18px var(--pad);
  background:color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, padding .3s ease, background .3s ease;
}
.nav.is-scrolled{
  border-bottom-color:var(--line);
  padding-top:12px; padding-bottom:12px;
}

.nav-brand{
  display:flex; align-items:center;
  flex-shrink:0;
  transition:opacity .25s ease;
}
.nav-brand:hover{ opacity:.78; }
.nav-brand img{ height:84px; width:auto; }

.nav-links{
  display:flex; gap:34px; justify-content:center;
}
.nav-links a{
  font-size:13.5px; letter-spacing:.02em;
  position:relative; padding:6px 0;
  transition:color .25s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:right;
  transition:transform .35s cubic-bezier(.7,0,.2,1);
}
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav-cta{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-display); font-weight:500;
  font-size:13px; letter-spacing:.02em;
  padding:10px 16px;
  background:var(--ink); color:var(--paper);
  border-radius:999px;
  transition:transform .25s ease, background .25s ease;
}
.nav-cta:hover{ background:var(--bronze-dark); transform:translateY(-1px); }
.nav-cta .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--bronze);
  box-shadow:0 0 0 0 var(--bronze);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 #B5854E80; }
  70%{ box-shadow:0 0 0 10px #B5854E00; }
  100%{ box-shadow:0 0 0 0 #B5854E00; }
}

.nav-burger{
  display:none;
  width:38px; height:38px;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  border-radius:50%; border:1px solid var(--line-strong);
  justify-self:end;
}
.nav-burger span{
  display:block; width:16px; height:1.4px; background:var(--ink);
  transition:transform .3s ease, opacity .3s ease;
}
.nav-burger.is-open span:first-child{ transform:translateY(3px) rotate(45deg); }
.nav-burger.is-open span:last-child{ transform:translateY(-3px) rotate(-45deg); }

.mobile-menu{
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:var(--ink); color:var(--paper);
  z-index:70;
  display:flex; flex-direction:column; gap:18px;
  padding:120px var(--pad) 60px;
  transform:translateY(-100%); transition:transform .55s cubic-bezier(.7,0,.2,1);
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu a{
  font-family:var(--f-display); font-weight:500;
  font-size:34px; letter-spacing:-0.02em;
  border-bottom:1px solid #ffffff14; padding:14px 0;
}
.mobile-menu a em{ color:var(--bronze); }
.mobile-call{ color:var(--bronze)!important; }

/* ════════════════════════════════  HERO  */
.hero{
  position:relative;
  min-height:100vh;
  padding:140px var(--pad) 80px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:64px;
  align-items:center;
  background:var(--paper);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(800px 500px at 0% 0%, #B5854E14, transparent 60%),
    radial-gradient(700px 400px at 100% 100%, #2A1E1410, transparent 60%);
  pointer-events:none;
}

.hero-frame{ position:relative; z-index:2; max-width:680px; }

.hero-meta{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
  padding:8px 14px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  margin-bottom:28px;
}
.meta-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--bronze);
  animation:pulse 1.8s infinite;
}

.hero-title{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(44px, 8vw, 112px);
  letter-spacing:-0.04em;
  line-height:.96;
  margin:0 0 28px;
}
.hero-title .line{
  display:block;
  overflow:hidden;
}
.hero-title em{
  font-family:var(--f-italic); font-style:italic; font-weight:500;
  color:var(--bronze-dark); letter-spacing:-0.01em;
}

.hero-sub{
  max-width:520px;
  font-size:clamp(15px, 1.2vw, 17px);
  color:var(--ink-soft);
  margin:0 0 36px;
  line-height:1.6;
}

.hero-actions{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-bottom:60px;
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-display); font-weight:500;
  font-size:14px; letter-spacing:.01em;
  padding:14px 22px;
  border-radius:999px;
  transition:transform .3s cubic-bezier(.7,0,.2,1), background .3s ease, color .3s ease, box-shadow .3s ease;
}
.btn svg{ transition:transform .3s ease; }
.btn:hover svg{ transform:translateX(4px); }
.btn-dark{
  background:var(--ink); color:var(--paper) !important;
  box-shadow:0 12px 30px -16px var(--ink);
}
.btn-dark span{ color:var(--paper); }
.btn-dark:hover{ background:var(--walnut); }
.btn-ghost{
  background:transparent; color:var(--ink);
  border:1px solid var(--line-strong);
}
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.btn-bronze{
  background:var(--bronze); color:var(--paper);
}
.btn-bronze:hover{ background:var(--bronze-dark); }

.hero-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; max-width:480px;
  padding-top:28px;
  border-top:1px solid var(--line-strong);
}
.hero-stats > div{ display:flex; flex-direction:column; gap:4px; }
.hero-stats strong{
  font-family:var(--f-display); font-weight:600;
  font-size:28px; letter-spacing:-0.03em; color:var(--ink);
}
.hero-stats span{
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft);
}

.hero-visual{
  position:relative; margin:0;
  aspect-ratio: 4/5;
  border-radius:18px; overflow:hidden;
  z-index:1;
  box-shadow:
    0 60px 80px -40px rgba(42,30,20,.4),
    0 0 0 1px rgba(42,30,20,.08);
  transform:translateY(0);
  animation:hero-float 8s ease-in-out infinite alternate;
}
@keyframes hero-float{
  from{ transform:translateY(0) rotate(0deg); }
  to{ transform:translateY(-10px) rotate(-.3deg); }
}
.hero-visual img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:opacity 1.2s ease;
}
.hero-visual img.is-active{ opacity:1; }

.hero-corner{
  position:absolute; bottom:36px; right:var(--pad);
  display:flex; align-items:center; gap:12px;
  font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-soft);
  z-index:3;
}
.hero-corner .line{
  width:60px; height:1px; background:currentColor;
  position:relative; overflow:hidden;
}
.hero-corner .line::after{
  content:""; position:absolute; inset:0;
  background:var(--bronze);
  transform:translateX(-100%);
  animation:hero-scroll 2s ease-in-out infinite;
}
@keyframes hero-scroll{
  0%{ transform:translateX(-100%); }
  60%,100%{ transform:translateX(100%); }
}

/* ════════════════════════════════  MARQUEE  */
.marquee{
  background:var(--ink); color:var(--paper);
  padding:24px 0;
  overflow:hidden;
  border-block:1px solid var(--ink);
}
.marquee .track{
  display:flex; gap:36px;
  white-space:nowrap;
  animation:marquee 38s linear infinite;
  font-family:var(--f-display);
  font-weight:500; font-size:clamp(28px, 4vw, 56px);
  letter-spacing:-0.02em;
}
.marquee .track span:nth-child(odd){ color:var(--paper); }
.marquee .track span:nth-child(even){ color:var(--bronze); }
@keyframes marquee{
  to{ transform:translateX(-50%); }
}

/* ════════════════════════════════  SECTION HEAD  */
.section-head{
  max-width:760px;
  margin:0 0 56px;
}
.section-head .num,
.atelier-text .num,
.contact-head .num{
  display:inline-block;
  font-family:var(--f-display); font-weight:500;
  font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--bronze-dark);
  margin-bottom:20px;
}
.section-head h2,
.atelier-text h2,
.contact-head h2{
  font-size:clamp(36px, 5vw, 72px);
  letter-spacing:-0.035em;
  margin-bottom:18px;
}
.section-head p,
.atelier-text p,
.contact-head p{
  font-size:clamp(15px, 1.1vw, 17px);
  color:var(--ink-soft);
  max-width:580px;
  margin:0;
}

/* ════════════════════════════════  SAVOIR-FAIRE  */
.savoir{
  padding:120px var(--pad);
  background:var(--paper);
}
.craft-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.craft{
  position:relative;
  background:var(--paper-2);
  border-radius:var(--radius);
  padding:24px;
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:transform .4s ease, box-shadow .4s ease;
}
.craft:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px -30px rgba(42,30,20,.35);
}
.craft-img{
  aspect-ratio: 4/3;
  border-radius:10px; overflow:hidden;
  margin-bottom:24px;
}
.craft-img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s cubic-bezier(.2,0,.2,1);
}
.craft:hover .craft-img img{ transform:scale(1.06); }
.craft header{
  display:flex; align-items:baseline; gap:14px;
  margin-bottom:14px;
}
.craft .num{
  font-family:var(--f-display); font-weight:500;
  font-size:12px; letter-spacing:.3em; color:var(--bronze-dark);
}
.craft h3{
  font-size:32px; letter-spacing:-0.03em;
}
.craft p{
  font-size:14.5px; line-height:1.6;
  color:var(--ink-soft); margin:0 0 16px;
}
.craft ul{
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:6px;
  border-top:1px solid #1612101a;
  padding-top:16px;
  margin-top:auto;
}
.craft li{
  font-size:13px; color:var(--ink);
  display:flex; align-items:center; gap:10px;
}
.craft li::before{
  content:""; width:5px; height:5px;
  background:var(--bronze); border-radius:50%;
}

/* ════════════════════════════════  WORKS  */
.works{
  padding:120px var(--pad);
  background:var(--ink);
  color:var(--paper);
}
.works .section-head h2{ color:var(--paper); }
.works .section-head p{ color:#F5EFE3dd; }
.works .num{ color:var(--bronze); }

.works-head{ margin-bottom:36px; }

.filter{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom:36px;
}
.chip{
  font-family:var(--f-display); font-weight:500;
  font-size:13px; letter-spacing:.02em;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid #ffffff55;
  color:var(--paper);
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.chip:hover{ border-color:var(--bronze); color:var(--bronze); }
.chip.is-active{
  background:var(--bronze);
  color:var(--ink) !important;
  border-color:var(--bronze);
}

.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:300px;
  gap:16px;
}
.card{
  position:relative;
  border-radius:12px; overflow:hidden;
  background:#ffffff08;
  cursor:zoom-in;
  transition:transform .5s cubic-bezier(.2,0,.2,1), opacity .4s ease;
}
.card.is-hidden{
  display:none;
}
.card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,0,.2,1), filter .5s ease;
}
.card:hover img{ transform:scale(1.06); }
.card::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, #16121088 0%, transparent 55%);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.card:hover::after{ opacity:1; }

/* ════════════════════════════════  METHODE  */
.method{
  padding:120px var(--pad);
  background:var(--paper);
}
.steps{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:18px;
}
.steps li{
  position:relative;
  background:var(--paper-2);
  border-radius:18px;
  padding:42px 36px;
  min-height:240px;
  overflow:hidden;
  display:flex; align-items:center;
  transition:transform .4s cubic-bezier(.2,0,.2,1), box-shadow .4s ease;
}
.steps li:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 60px -30px rgba(42,30,20,.35);
}
.step-bg{
  position:absolute;
  top:50%; right:-22px;
  transform:translateY(-50%);
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(150px, 18vw, 260px);
  line-height:.82;
  letter-spacing:-0.07em;
  color:var(--bronze);
  opacity:.16;
  pointer-events:none;
  user-select:none;
  transition:opacity .4s ease, transform .4s cubic-bezier(.2,0,.2,1);
}
.steps li:hover .step-bg{
  opacity:.26;
  transform:translateY(-50%) translateX(-4px);
}
.step-body{
  position:relative; z-index:1;
  max-width:62%;
}
.step-tag{
  display:inline-block;
  font-family:var(--f-display); font-weight:600;
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--bronze-dark);
  margin-bottom:18px;
}
.steps h3{
  font-size:30px; letter-spacing:-0.03em;
  margin-bottom:12px;
}
.steps p{
  margin:0; color:var(--ink-soft);
  font-size:14.5px; line-height:1.6;
}

/* ════════════════════════════════  ATELIER  */
.atelier{
  padding:120px var(--pad);
  background:var(--walnut);
  color:var(--paper);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:64px;
  align-items:center;
}
.atelier-img{
  margin:0; aspect-ratio:4/5;
  border-radius:18px; overflow:hidden;
  position:relative;
}
.atelier-img img{
  width:100%; height:100%; object-fit:cover;
}
.atelier-text .num{ color:var(--bronze); }
.atelier-text h2{ color:var(--paper); }
.atelier-text p{ color:#F5EFE3cc; }

.atelier-points{
  list-style:none; padding:0; margin:32px 0;
  display:flex; flex-direction:column;
}
.atelier-points li{
  display:flex; flex-direction:column; gap:4px;
  padding:18px 0;
  border-top:1px solid #ffffff18;
}
.atelier-points li:last-child{ border-bottom:1px solid #ffffff18; }
.atelier-points strong{
  font-family:var(--f-display); font-weight:500;
  font-size:18px; letter-spacing:-0.01em;
  color:var(--paper);
}
.atelier-points span{
  font-size:13px;
  color:#F5EFE399;
}

/* ════════════════════════════════  CONTACT  */
.contact{
  padding:120px var(--pad);
  background:var(--paper);
}
.contact-shell{
  max-width:1200px;
  margin:0 auto;
}
.contact-head{ max-width:760px; margin-bottom:48px; }

.contact-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin-bottom:48px;
}
.ccard{
  position:relative;
  background:var(--ink); color:var(--paper);
  padding:28px 24px 24px;
  border-radius:14px;
  display:flex; flex-direction:column; gap:10px;
  min-height:160px;
  transition:transform .4s ease, background .4s ease;
  overflow:hidden;
}
.ccard:hover{ transform:translateY(-4px); background:var(--walnut); }
.ccard.ccard-static{
  background:var(--bronze);
  color:var(--ink);
  cursor:default;
}
.ccard.ccard-static:hover{ transform:none; background:var(--bronze); }
.ccard-label{
  font-family:var(--f-display); font-weight:600;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--bronze);
}
.ccard.ccard-static .ccard-label{
  color:var(--ink);
  opacity:.75;
}
.ccard-value{
  font-family:var(--f-display); font-weight:500;
  font-size:22px; letter-spacing:-0.02em;
  color:var(--paper);
  margin-top:auto;
}
.ccard.ccard-static .ccard-value{ color:var(--ink); }
.ccard-arrow{
  position:absolute; top:24px; right:24px;
  font-size:20px;
  color:var(--paper);
  opacity:.85;
  transition:transform .3s ease, opacity .3s ease, color .3s ease;
}
.ccard.ccard-static .ccard-arrow{ color:var(--ink); }
.ccard:hover .ccard-arrow{ opacity:1; transform:translate(2px,-2px); }

.contact-form{
  display:grid; gap:14px;
  background:var(--paper-2);
  padding:32px;
  border-radius:14px;
}
.contact-form .row{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.contact-form label{
  display:flex; flex-direction:column; gap:6px;
}
.contact-form .full{ width:100%; }
.contact-form span{
  font-family:var(--f-display); font-weight:500;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  font:inherit;
  background:var(--paper);
  border:1px solid var(--line-strong);
  border-radius:10px;
  padding:14px 16px;
  color:var(--ink);
  outline:none;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color:var(--bronze);
  box-shadow:0 0 0 3px #B5854E22;
}
.contact-form textarea{ resize:vertical; min-height:110px; }
.contact-form button{ justify-self:start; margin-top:6px; color:var(--paper) !important; }
.contact-form button span{ color:var(--paper); }

/* ════════════════════════════════  FOOTER  */
.foot{
  background:var(--ink); color:var(--paper);
  padding:80px var(--pad) 30px;
  display:grid; gap:48px;
}
.foot-mark{
  display:flex; align-items:center; gap:18px;
  flex-wrap:wrap;
}
.foot-logo{
  height:96px; width:auto;
  filter:brightness(0) invert(1);
}
.foot-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:48px;
  padding-top:48px;
  border-top:1px solid #ffffff24;
}
.foot-grid h5{
  font-family:var(--f-display); font-weight:600;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--bronze);
  margin-bottom:18px;
}
.foot-grid div{ display:flex; flex-direction:column; gap:10px; }
.foot-grid a, .foot-grid span{
  font-size:14.5px; color:var(--paper);
  transition:color .25s ease;
}
.foot-grid a:hover{ color:var(--bronze); }

.foot-bottom{
  display:flex; justify-content:space-between; gap:20px;
  flex-wrap:wrap;
  padding-top:30px;
  border-top:1px solid #ffffff24;
  font-size:12px; color:#F5EFE3cc;
}

/* ════════════════════════════════  WHATSAPP FAB  */
.wa-fab{
  position:fixed; bottom:24px; right:24px;
  z-index:90;
  display:inline-flex; align-items:center; gap:0;
  background:#25D366; color:#fff;
  padding:14px;
  border-radius:999px;
  box-shadow:0 14px 30px -8px #25D36680, 0 0 0 0 #25D36633;
  animation:wa-pulse 2.4s infinite;
  transition:transform .3s ease, padding .35s ease, box-shadow .3s ease;
}
.wa-fab:hover{
  transform:translateY(-3px) scale(1.02);
  padding-right:22px;
}
.wa-fab:hover .wa-label{
  max-width:120px; opacity:1; margin-left:10px;
}
.wa-label{
  display:inline-block;
  font-family:var(--f-display); font-weight:600;
  font-size:14px; letter-spacing:.02em;
  max-width:0; opacity:0; overflow:hidden;
  white-space:nowrap;
  transition:max-width .35s ease, opacity .25s ease, margin .35s ease;
}
@keyframes wa-pulse{
  0%{ box-shadow:0 14px 30px -8px #25D36680, 0 0 0 0 #25D36655; }
  60%{ box-shadow:0 14px 30px -8px #25D36680, 0 0 0 18px #25D36600; }
  100%{ box-shadow:0 14px 30px -8px #25D36680, 0 0 0 0 #25D36600; }
}

/* ════════════════════════════════  REVEAL  */
[data-reveal]{
  opacity:0; transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.2,0,.2,1), transform .9s cubic-bezier(.2,0,.2,1);
}
[data-reveal].is-in{ opacity:1; transform:translateY(0); }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }

/* ════════════════════════════════  LIGHTBOX  */
.lightbox{
  position:fixed; inset:0; z-index:120;
  background:#161210ee;
  backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  padding:40px;
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{
  max-width:90vw; max-height:84vh;
  border-radius:14px;
  box-shadow:0 60px 100px -30px #000;
  transform:scale(.96);
  transition:transform .4s ease;
}
.lightbox.is-open img{ transform:scale(1); }
.lightbox-close{
  position:absolute; top:24px; right:24px;
  width:42px; height:42px; border-radius:50%;
  background:var(--paper); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  transition:transform .3s ease, background .3s ease;
}
.lightbox-close:hover{ transform:rotate(90deg); background:var(--bronze); color:var(--paper); }

/* ════════════════════════════════  RESPONSIVE  */
@media (max-width: 1100px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .nav{ grid-template-columns:auto 1fr auto auto; }
  .hero{ grid-template-columns:1fr; gap:40px; padding-top:120px; }
  .hero-visual{ aspect-ratio:5/4; max-height:480px; }
  .craft-grid{ grid-template-columns:repeat(2, 1fr); }
  .grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:260px; }
  .steps{ grid-template-columns:repeat(2, 1fr); }
  .atelier{ grid-template-columns:1fr; gap:40px; }
  .contact-grid{ grid-template-columns:repeat(2, 1fr); }
  .foot-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 700px){
  :root{ --pad: 18px; }
  .nav{ padding:14px 18px; gap:12px; grid-template-columns:auto 1fr auto; }
  .nav-cta{ display:none; }
  .nav-brand img{ height:64px; }

  .hero{ padding:110px 18px 60px; min-height:auto; }
  .hero-title{
    font-size:clamp(40px, 12vw, 60px);
    line-height:1.06;
    letter-spacing:-0.025em;
    margin-bottom:22px;
  }
  .hero-title .line{ overflow:visible; }
  .hero-stats{ grid-template-columns:repeat(3,1fr); gap:14px; }
  .hero-stats strong{ font-size:22px; }
  .hero-stats span{ font-size:10px; }
  .hero-corner{ display:none; }

  .marquee{ padding:18px 0; }
  .marquee .track{
    font-size:30px; gap:22px;
    animation-duration:14s;
  }

  .savoir, .works, .method, .atelier, .contact{ padding:80px 18px; }
  .craft-grid{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr; grid-auto-rows:300px; }

  .steps{ grid-template-columns:1fr; }
  .steps li{ padding:36px 28px; min-height:200px; }
  .step-body{ max-width:65%; }
  .step-bg{ font-size:clamp(140px, 42vw, 200px); right:-12px; }

  .contact-grid{ grid-template-columns:1fr; }
  .contact-form .row{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:32px; }
  .foot-bottom{ flex-direction:column; }

  .wa-fab{ bottom:18px; right:18px; padding:12px; }
  .wa-fab:hover .wa-label{ max-width:0; opacity:0; margin-left:0; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ════════════════════════════════  CONTACT STATUS  */
.contact-status{
  margin:14px 0 0;
  font-size:14px;
  line-height:1.55;
  color:var(--ink-soft);
  min-height:1.4em;
}
.contact-status[data-kind="ok"]{
  color:#1f6b3a;
  background:#e6f3ec;
  border:1px solid #c1e0ce;
  padding:12px 14px;
  border-radius:10px;
}
.contact-status[data-kind="err"]{
  color:#8a2424;
  background:#fbe8e8;
  border:1px solid #f0c1c1;
  padding:12px 14px;
  border-radius:10px;
}
.contact-form button[disabled]{ opacity:.6; pointer-events:none; }

/* ════════════════════════════════  LEGAL PAGES  */
.legal-body .preloader{ display:none; }
.legal{
  padding:calc(96px + var(--pad)) var(--pad) calc(var(--pad) * 2);
  background:var(--paper);
}
.legal-shell{
  max-width:880px;
  margin:0 auto;
}
.legal-head{
  border-bottom:1px solid var(--line);
  padding-bottom:48px;
  margin-bottom:48px;
}
.legal-head .num{
  display:inline-block;
  font-family:var(--f-display);
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bronze-dark);
  margin-bottom:18px;
}
.legal-head h1{
  font-size:clamp(36px, 5.5vw, 64px);
  margin-bottom:24px;
}
.legal-head p{
  font-size:clamp(15px, 1.2vw, 17px);
  color:var(--ink-soft);
  max-width:680px;
  line-height:1.65;
}
.legal-block{
  margin-bottom:48px;
}
.legal-block h2{
  font-size:clamp(22px, 2.4vw, 28px);
  margin-bottom:18px;
  letter-spacing:-0.015em;
}
.legal-block h3{
  font-size:17px;
  margin:24px 0 12px;
  color:var(--ink);
  font-weight:600;
}
.legal-block p{
  margin:0 0 14px;
  color:var(--ink-soft);
  line-height:1.7;
}
.legal-block ul{
  padding-left:22px;
  margin:0 0 18px;
}
.legal-block li{
  margin-bottom:8px;
  color:var(--ink-soft);
  line-height:1.7;
}
.legal-block a{
  color:var(--bronze-dark);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.legal-block a:hover{ color:var(--rust); }
.legal-block strong{ color:var(--ink); font-weight:600; }
.legal-block code{
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:13px;
  background:var(--paper-2);
  padding:2px 7px;
  border-radius:4px;
  color:var(--ink);
}
.legal-meta{
  list-style:none;
  padding:24px 28px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin:0 0 18px;
}
.legal-meta li{
  margin:0;
  padding:6px 0;
  border-bottom:1px solid var(--line);
}
.legal-meta li:last-child{ border-bottom:0; }
.legal-table{
  width:100%;
  border-collapse:collapse;
  margin:18px 0 24px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.legal-table th,
.legal-table td{
  text-align:left;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  font-size:14px;
  vertical-align:top;
}
.legal-table th{
  background:var(--sand);
  color:var(--ink);
  font-weight:600;
  letter-spacing:.02em;
}
.legal-table tr:last-child td{ border-bottom:0; }
.legal-table td{ color:var(--ink-soft); line-height:1.55; }
.legal-update{
  margin-top:64px;
  padding-top:24px;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--bronze-dark);
  font-style:italic;
}

@media (max-width:720px){
  .legal{ padding:calc(80px + var(--pad)) var(--pad) calc(var(--pad) * 1.5); }
  .legal-head{ padding-bottom:32px; margin-bottom:32px; }
  .legal-block{ margin-bottom:36px; }
  .legal-meta{ padding:16px 18px; }
  .legal-table{ font-size:13px; }
  .legal-table th,
  .legal-table td{ padding:10px 12px; }
}

.not-found .legal-shell h1{ font-size:clamp(48px, 8vw, 96px); }

/* ════════════════════════════════  COOKIE BANNER  */
.cookie-banner{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translate(-50%, calc(100% + 24px));
  width:min(940px, calc(100vw - 32px));
  z-index:120;
  background:var(--ink);
  color:var(--paper);
  border-radius:var(--radius);
  padding:18px 22px;
  box-shadow:0 18px 60px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.18);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
  opacity:0;
}
.cookie-banner.is-visible{
  transform:translate(-50%, 0);
  opacity:1;
}
.cookie-shell{
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  align-items:center;
}
.cookie-text strong{
  display:block;
  font-family:var(--f-display);
  font-weight:600;
  font-size:15px;
  margin-bottom:6px;
  letter-spacing:-0.01em;
}
.cookie-text p{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:rgba(245,239,227,.78);
}
.cookie-text a{
  color:var(--paper);
  text-decoration:underline;
  text-underline-offset:3px;
}
.cookie-actions{
  display:flex;
  gap:10px;
  flex-shrink:0;
}
.cookie-actions .btn{
  padding:10px 18px;
  font-size:13px;
}
.cookie-actions .btn-ghost{
  border-color:rgba(245,239,227,.28);
  color:var(--paper);
}
.cookie-actions .btn-ghost:hover{
  background:rgba(245,239,227,.08);
  border-color:rgba(245,239,227,.45);
}
.cookie-actions .btn-dark{
  background:var(--bronze);
  color:var(--ink);
}
.cookie-actions .btn-dark:hover{
  background:var(--paper);
}

@media (max-width:680px){
  .cookie-banner{ left:8px; right:8px; width:auto; transform:translateY(calc(100% + 24px)); padding:16px 18px; }
  .cookie-banner.is-visible{ transform:translateY(0); }
  .cookie-shell{ grid-template-columns:1fr; gap:14px; }
  .cookie-actions{ justify-content:flex-end; }
}