@font-face{
  font-family:'Oswald';
  src:url('/assets/fonts/oswald.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('/assets/fonts/archivo.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ============================================================
   BÂTISSEUR — design system
   ============================================================ */
:root{
  /* Plaster / concrete neutrals */
  --plaster:      #F5F1EA;
  --plaster-2:    #ECE5D8;
  --plaster-3:    #E1D9C9;
  --concrete:     #8C877C;
  --concrete-dk:  #565149;
  --charcoal:     #1C1B19;
  --charcoal-2:   #26241F;
  --ink:          #211F1C;
  --muted:        #5B564D;

  /* Single disciplined accent: construction ocre */
  --ocre:         #C4661E;
  --ocre-dk:      #A5511A;
  --ocre-lt:      #E08A2B;

  --line:         rgba(28,27,25,.16);
  --line-soft:    rgba(28,27,25,.09);
  --line-onDark:  rgba(245,241,234,.16);

  --ff-display:'Oswald', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  --ff-body:'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --wrap: 1200px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --radius: 3px;

  --shadow-1: 0 1px 2px rgba(28,27,25,.06), 0 8px 24px -12px rgba(28,27,25,.22);
  --shadow-2: 0 18px 50px -20px rgba(28,27,25,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0}
body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--plaster);
  font-size:clamp(1rem,.97rem + .2vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

h1,h2,h3,h4{font-family:var(--ff-display);font-weight:600;line-height:.98;margin:0;letter-spacing:.01em}
p{margin:0}

:focus-visible{outline:3px solid var(--ocre);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);width:100%}

/* Subtle plaster grain over whole page */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
main,header,footer{position:relative;z-index:1}

/* ---------- Ruler / graduation motif ---------- */
.ruler{
  height:14px;width:100%;
  background:
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, var(--line) 0 1.5px, transparent 1.5px 80px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  background-position:0 100%, 0 100%;
  background-size:100% 8px, 100% 14px;
  background-repeat:repeat-x;
}
.ruler--dark{
  background:
    repeating-linear-gradient(90deg, var(--line-onDark) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, var(--line-onDark) 0 1.5px, transparent 1.5px 80px);
  background-position:0 100%, 0 100%;
  background-size:100% 8px, 100% 14px;
  background-repeat:repeat-x;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--ff-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:.94rem;line-height:1;
  padding:.95em 1.5em;border-radius:var(--radius);border:2px solid transparent;
  cursor:pointer;transition:transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn--primary{background:var(--ocre);color:#fff;box-shadow:0 8px 20px -10px rgba(196,102,30,.9)}
.btn--primary:hover{background:var(--ocre-dk);transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(196,102,30,.95)}
.btn--ghost{background:transparent;color:var(--charcoal);border-color:var(--charcoal)}
.btn--ghost:hover{background:var(--charcoal);color:var(--plaster);transform:translateY(-2px)}
.btn--onDark{background:transparent;color:var(--plaster);border-color:rgba(245,241,234,.5)}
.btn--onDark:hover{background:var(--plaster);color:var(--charcoal);border-color:var(--plaster);transform:translateY(-2px)}
.btn--block{width:100%;justify-content:center}
.btn--lg{padding:1.15em 1.9em;font-size:1.05rem}

/* ---------- Eyebrow / section label ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.22em;
  font-weight:600;font-size:.82rem;color:var(--ocre-dk);
}
.eyebrow .num{
  font-variant-numeric:tabular-nums;color:var(--charcoal);
  border:1.5px solid var(--line);border-radius:2px;padding:.15em .45em;font-size:.9em;letter-spacing:.05em;
}
.section-title{
  font-size:clamp(2.1rem,1.4rem + 3.4vw,4rem);text-transform:uppercase;
  letter-spacing:.005em;margin:.55rem 0 0;max-width:16ch;
}
.section-title em{font-style:normal;color:var(--ocre)}
.lead{color:var(--muted);max-width:56ch;margin-top:1rem;font-size:1.08rem}

section{padding-block:clamp(3.75rem,3rem + 4vw,7rem)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(245,241,234,.86);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid transparent;
  transition:box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.site-header.is-stuck{
  box-shadow:0 1px 0 var(--line-soft), 0 10px 30px -20px rgba(28,27,25,.55);
  border-bottom-color:var(--line-soft);
}
.nav{
  display:flex;align-items:center;gap:1.5rem;
  padding-block:clamp(.7rem,.5rem + .5vw,1.05rem);
  transition:padding .25s ease;
}
.site-header.is-stuck .nav{padding-block:.55rem}
.brand{display:flex;align-items:center;gap:.7rem;margin-right:auto;line-height:1}
.brand__mark{width:34px;height:34px;flex:none}
.brand__txt{display:flex;flex-direction:column}
.brand__name{
  font-family:var(--ff-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:1.02rem;color:var(--charcoal);
}
.brand__sub{font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--concrete-dk);font-weight:600}

.nav__links{display:flex;align-items:center;gap:1.6rem;list-style:none;margin:0;padding:0}
.nav__links a{
  font-family:var(--ff-display);font-weight:500;text-transform:uppercase;
  letter-spacing:.08em;font-size:.9rem;color:var(--charcoal);position:relative;padding:.2em 0;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--ocre);transition:width .22s ease;
}
.nav__links a:hover::after,.nav__links a:focus-visible::after{width:100%}

.nav__cta{display:flex;align-items:center;gap:.9rem}
.nav__phone{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ff-display);
  font-weight:600;letter-spacing:.03em;color:var(--charcoal);font-size:.98rem;white-space:nowrap;
}
.nav__phone svg{width:1.05em;height:1.05em;color:var(--ocre)}
.nav__phone:hover{color:var(--ocre-dk)}

.nav__devis-m{display:none}
.nav__toggle{display:none;border:1.5px solid var(--line);background:transparent;border-radius:var(--radius);
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.nav__toggle svg{width:22px;height:22px}
.nav__toggle .x{display:none}
.nav.is-open .nav__toggle .x{display:block}
.nav.is-open .nav__toggle .burger{display:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:clamp(2.5rem,2rem + 3vw,4.5rem);padding-bottom:0;position:relative}
.hero__grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:end;
}
.hero__copy{padding-bottom:clamp(2rem,2vw,3rem)}
.hero__eyebrow{margin-bottom:1.1rem}
.hero h1 .hero__kicker{display:flex;width:fit-content;line-height:1.3;letter-spacing:.22em}
.hero h1{
  font-size:clamp(2.9rem,1.6rem + 6.6vw,6.6rem);
  text-transform:uppercase;letter-spacing:-.005em;line-height:.92;
}
.hero h1 .amber{color:var(--ocre);display:inline-block}
.hero h1 .thin{-webkit-text-stroke:1.5px var(--charcoal);color:transparent}
.hero__sub{margin-top:1.4rem;max-width:46ch;color:var(--muted);font-size:1.12rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.9rem}
.hero__chips{
  display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.9rem;
  padding-top:1.6rem;border-top:1px solid var(--line-soft);
}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--plaster-2);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:.5rem .8rem;font-size:.86rem;font-weight:500;color:var(--charcoal);
}
.chip svg{width:1.05em;height:1.05em;color:var(--ocre);flex:none}

/* Hero media */
.hero__media{position:relative;align-self:end}
.hero__frame{
  position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-2);border:1px solid var(--line-soft);
  aspect-ratio:4/5;background:var(--plaster-3);
}
.hero__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
/* subtle unifying tint for legibility of overlay badge */
.hero__frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,27,25,0) 45%,rgba(28,27,25,.55) 100%);
}
.hero__badge{
  position:absolute;left:-14px;bottom:22px;z-index:2;
  background:var(--charcoal);color:var(--plaster);
  padding:.9rem 1.15rem;border-radius:var(--radius);box-shadow:var(--shadow-1);
  display:flex;align-items:baseline;gap:.55rem;
}
.hero__badge b{font-family:var(--ff-display);font-weight:700;font-size:2rem;line-height:1;color:var(--ocre-lt)}
.hero__badge span{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;max-width:9ch;line-height:1.2}
.hero__tag{
  position:absolute;top:14px;right:14px;z-index:2;
  background:rgba(245,241,234,.94);color:var(--charcoal);
  font-family:var(--ff-display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:.74rem;padding:.45rem .7rem;border-radius:2px;
}
.hero__ruler{margin-top:2.3rem}

/* ============================================================
   SERVICES
   ============================================================ */
.services{background:linear-gradient(180deg,var(--plaster) 0%,var(--plaster-2) 100%)}
.svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.svc-grid{
  margin-top:clamp(2rem,1.5rem + 2vw,3.5rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;
}
.svc{
  background:var(--plaster);padding:clamp(1.6rem,1.2rem + 1.5vw,2.4rem);
  display:flex;flex-direction:column;gap:.9rem;position:relative;
  transition:background .2s ease, transform .2s ease;
}
.svc:hover{background:#fff}
.svc__top{display:flex;align-items:center;justify-content:space-between}
.svc__num{
  font-family:var(--ff-display);font-weight:700;font-size:1.05rem;letter-spacing:.05em;
  color:var(--concrete);font-variant-numeric:tabular-nums;
}
.svc__icon{
  width:46px;height:46px;border-radius:var(--radius);flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--charcoal);color:var(--ocre-lt);transition:background .2s ease,color .2s ease;
}
.svc:hover .svc__icon{background:var(--ocre);color:#fff}
.svc__icon svg{width:24px;height:24px}
.svc h3{font-size:1.5rem;text-transform:uppercase;letter-spacing:.01em;color:var(--charcoal);margin-top:.25rem}
.svc p{color:var(--muted);font-size:.98rem}
.svc__bar{height:3px;width:34px;background:var(--ocre);margin-top:auto;transition:width .25s ease}
.svc:hover .svc__bar{width:64px}

/* ============================================================
   À PROPOS
   ============================================================ */
.about{background:var(--charcoal);color:var(--plaster)}
.about .eyebrow{color:var(--ocre-lt)}
.about .eyebrow .num{color:var(--plaster);border-color:var(--line-onDark)}
.about__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.about__media{position:relative}
.about__media img{
  border-radius:var(--radius);width:100%;aspect-ratio:4/5;object-fit:cover;
  box-shadow:var(--shadow-2);border:1px solid var(--line-onDark);
}
.about__stamp{
  position:absolute;right:-10px;top:-10px;background:var(--ocre);color:#fff;
  font-family:var(--ff-display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  font-size:.8rem;padding:.55rem .8rem;border-radius:2px;box-shadow:var(--shadow-1);
}
.about h2{font-size:clamp(2rem,1.4rem + 3vw,3.4rem);text-transform:uppercase;color:#fff;margin-top:.55rem}
.about__quote{
  font-size:clamp(1.05rem,1rem + .4vw,1.22rem);line-height:1.7;color:#E7E1D6;margin-top:1.4rem;max-width:56ch;
}
.about__quote::first-letter{}
.about__sign{
  margin-top:1.3rem;font-family:var(--ff-display);font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ocre-lt);font-size:1.05rem;display:flex;align-items:center;gap:.7rem;
}
.about__sign::before{content:"";width:36px;height:2px;background:var(--ocre)}
.values{
  list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.4rem;
}
.values li{display:flex;align-items:center;gap:.7rem;font-weight:500;color:#EFEAE0;font-size:1rem}
.values svg{width:1.25em;height:1.25em;color:var(--ocre-lt);flex:none}

/* ============================================================
   RÉALISATIONS / GALLERY
   ============================================================ */
.gallery{background:var(--plaster-2)}
.gal-grid{
  margin-top:clamp(2rem,1.5rem + 2vw,3.2rem);
  display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:200px;gap:14px;
}
.gal-item{
  position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line-soft);
  background:var(--plaster-3);cursor:pointer;
}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gal-item:hover img,.gal-item:focus-visible img{transform:scale(1.07)}
.gal-item::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,27,25,0) 40%,rgba(28,27,25,.72) 100%);
  opacity:.75;transition:opacity .25s ease;
}
.gal-item:hover::after{opacity:.9}
.gal-cap{
  position:absolute;left:0;bottom:0;z-index:2;padding:.95rem 1.05rem;color:var(--plaster);
  display:flex;flex-direction:column;gap:.15rem;transform:translateY(4px);transition:transform .25s ease;
}
.gal-item:hover .gal-cap{transform:translateY(0)}
.gal-cap b{font-family:var(--ff-display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:1.02rem;line-height:1.1}
.gal-cap span{font-size:.78rem;color:rgba(245,241,234,.82);text-transform:uppercase;letter-spacing:.12em}
/* deliberate masonry rhythm */
.gal-item.tall{grid-row:span 2}
.gal-item.wide{grid-column:span 2}
.gal-item.big{grid-column:span 2;grid-row:span 2}

/* Lightbox */
.lb{
  position:fixed;inset:0;z-index:120;display:none;place-items:center;
  background:rgba(20,19,17,.93);padding:clamp(1rem,4vw,3rem);
}
.lb.is-open{display:grid}
.lb__img{max-width:min(1100px,92vw);max-height:82vh;width:auto;height:auto;border-radius:var(--radius);box-shadow:var(--shadow-2)}
.lb__cap{
  color:var(--plaster);text-align:center;margin-top:1rem;font-family:var(--ff-display);
  text-transform:uppercase;letter-spacing:.1em;font-size:1rem;
}
.lb__close,.lb__nav{
  position:absolute;background:rgba(245,241,234,.12);border:1px solid var(--line-onDark);
  color:var(--plaster);border-radius:var(--radius);cursor:pointer;
  width:52px;height:52px;display:grid;place-items:center;transition:background .18s ease,transform .18s ease;
}
.lb__close svg,.lb__nav svg{width:24px;height:24px}
.lb__close:hover,.lb__nav:hover{background:var(--ocre);transform:scale(1.05)}
.lb__close{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lb__nav{top:50%;transform:translateY(-50%)}
.lb__nav:hover{transform:translateY(-50%) scale(1.05)}
.lb__nav--prev{left:clamp(.5rem,2vw,1.5rem)}
.lb__nav--next{right:clamp(.5rem,2vw,1.5rem)}

/* ============================================================
   ZONE D'INTERVENTION
   ============================================================ */
.zone{background:var(--plaster)}
.zone__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.zone__card{
  background:var(--charcoal);color:var(--plaster);border-radius:var(--radius);
  padding:clamp(1.6rem,1.2rem + 1.5vw,2.6rem);position:relative;overflow:hidden;box-shadow:var(--shadow-1);
}
.zone__card .pin{width:34px;height:34px;color:var(--ocre-lt)}
.zone__card h3{font-size:1.8rem;text-transform:uppercase;color:#fff;margin:.8rem 0 .5rem}
.zone__card p{color:#DED8CD}
.zone__card .ruler--dark{margin:1.4rem 0}
.communes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.communes li{
  border:1px solid var(--line-onDark);border-radius:2px;padding:.4rem .7rem;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.06em;font-family:var(--ff-display);font-weight:500;color:#EFEAE0;
}
.communes li.acc{background:var(--ocre);border-color:var(--ocre);color:#fff}
.zone__note{color:var(--muted)}
.zone__note h2{margin-top:.55rem}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--charcoal-2);color:var(--plaster)}
.contact .eyebrow{color:var(--ocre-lt)}
.contact .eyebrow .num{color:var(--plaster);border-color:var(--line-onDark)}
.contact h2{font-size:clamp(2.1rem,1.5rem + 3vw,3.8rem);text-transform:uppercase;color:#fff;margin-top:.55rem;max-width:18ch}
.contact__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,4vw,4rem);margin-top:2.5rem;align-items:start}
.contact__lead{color:#DED8CD;max-width:46ch;font-size:1.1rem}
.contact__cta{
  display:flex;flex-direction:column;gap:.9rem;margin-top:1.9rem;
  padding:1.5rem;background:rgba(245,241,234,.05);border:1px solid var(--line-onDark);border-radius:var(--radius);
}
.coord{display:flex;flex-direction:column;gap:1.15rem;margin-top:1.9rem}
.coord a,.coord div{display:flex;align-items:center;gap:.9rem}
.coord a > span + span,.coord div > span + span{display:flex;flex-direction:column;gap:.15rem}
.coord .k{display:block}.coord .v{display:block}
.coord .ic{
  width:44px;height:44px;flex:none;border-radius:var(--radius);display:grid;place-items:center;
  background:var(--charcoal);border:1px solid var(--line-onDark);color:var(--ocre-lt);
}
.coord .ic svg{width:20px;height:20px}
.coord .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--concrete)}
.coord .v{font-family:var(--ff-display);font-weight:600;font-size:1.12rem;color:#fff;letter-spacing:.02em}
.coord a:hover .v{color:var(--ocre-lt)}

/* Form */
.form{
  background:var(--plaster);color:var(--ink);border-radius:var(--radius);
  padding:clamp(1.5rem,1.2rem + 1.5vw,2.4rem);box-shadow:var(--shadow-2);
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.05rem}
.field label{
  font-family:var(--ff-display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:.78rem;color:var(--charcoal);
}
.field label .opt{color:var(--concrete);font-weight:500;letter-spacing:.05em}
.field input,.field textarea{
  font-family:var(--ff-body);font-size:1rem;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);
  padding:.8rem .9rem;transition:border-color .18s ease, box-shadow .18s ease;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ocre);box-shadow:0 0 0 3px rgba(196,102,30,.16)}
.field textarea{resize:vertical;min-height:120px}
.form__note{font-size:.82rem;color:var(--muted);margin-top:.6rem;display:flex;gap:.5rem;align-items:flex-start}
.form__note svg{width:1.1em;height:1.1em;color:var(--ocre);flex:none;margin-top:.15em}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--charcoal);color:var(--plaster);padding-block:clamp(2.5rem,2rem + 2vw,3.5rem)}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;align-items:start}
.foot__brand{display:flex;flex-direction:column;gap:.9rem;max-width:34ch}
.foot__brand .brand__name{color:#fff}
.foot__brand p{color:#C9C3B8;font-size:.95rem}
.foot__col h4{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--ocre-lt);font-weight:600;margin-bottom:1rem}
.foot__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.foot__col a,.foot__col span{color:#D8D2C7;font-size:.95rem}
.foot__col a:hover{color:#fff}
.foot__bottom{
  margin-top:2.4rem;padding-top:1.5rem;border-top:1px solid var(--line-onDark);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.84rem;color:var(--concrete);
}
.foot__credit{color:#D8D2C7}
.foot__credit b{color:var(--ocre-lt);font-weight:600}
.foot__credit:hover,.foot__credit:hover b{color:#fff}
.foot__legal{margin-top:1.2rem;font-size:.84rem;color:#A9A397}
.foot__legal summary{cursor:pointer;width:fit-content;color:#D8D2C7;text-decoration:underline;text-underline-offset:3px}
.foot__legal summary:hover{color:#fff}
.foot__legal-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1.2rem 2rem;margin-top:1rem}
.foot__legal-body h5{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;color:var(--ocre-lt);font-weight:600;margin:0 0 .4rem}
.foot__legal-body p{line-height:1.55}
.foot__legal-body a{text-decoration:underline;text-underline-offset:2px}


/* ============================================================
   LIENS SERVICES · FAQ
   ============================================================ */
.svc h3 a{color:inherit}
.svc h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.svc h3 a:focus-visible{outline:none}
.svc:has(h3 a:focus-visible){outline:3px solid var(--ocre);outline-offset:-3px}
.svc__more{
  font-family:var(--ff-display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:.8rem;color:var(--ocre-dk);display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;
}
.svc__more::after{content:"→";transition:transform .2s ease}
.svc:hover .svc__more::after{transform:translateX(4px)}
.svc__more + .svc__bar{margin-top:.2rem}

.faq{background:var(--plaster-2)}
.faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.faq__list{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.15rem .2rem;font-family:var(--ff-display);font-weight:600;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.02em;color:var(--charcoal);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius);
  background:var(--charcoal);color:var(--ocre-lt);font-size:1.3rem;line-height:1;transition:transform .2s ease;
}
.faq__item[open] summary::after{content:"−";background:var(--ocre);color:#fff}
.faq__item summary:hover{color:var(--ocre-dk)}
.faq__item p{padding:0 .2rem 1.3rem;color:var(--muted);max-width:62ch}
.foot__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
@media (max-width:900px){.faq__grid{grid-template-columns:1fr}}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .gal-item img,.btn,.svc,.svc__icon{transition:none !important}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .gal-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
  .nav__links,.nav__phone,.nav__cta{display:none}
  .nav__toggle{display:flex}
  .nav.is-open{flex-wrap:wrap}
  .nav.is-open .nav__links{
    display:flex;order:3;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;
    margin-top:.5rem;border-top:1px solid var(--line-soft);padding-top:.5rem;
  }
  .nav.is-open .nav__links li{border-bottom:1px solid var(--line-soft)}
  .nav.is-open .nav__links a{display:block;padding:.9rem .2rem;font-size:1.05rem}
  .nav.is-open .nav__phone{display:inline-flex;order:4;flex-basis:100%;padding:.85rem .2rem;font-size:1.15rem;border-top:1px solid var(--line-soft)}
  .nav.is-open .nav__devis-m{display:block;order:5;flex-basis:100%;margin-top:.7rem}
  .nav__devis-m .btn{width:100%;justify-content:center}
  .hero__grid,.about__grid,.zone__grid,.contact__grid,.foot__grid{grid-template-columns:1fr}
  .hero__media{max-width:440px;margin-inline:auto;width:100%}
  .about__grid{gap:2.4rem}
  .about__media{max-width:420px}
  .values{grid-template-columns:1fr 1fr}
  .foot__grid{gap:2.2rem}
}
@media (max-width:640px){
  .svc-grid{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .gal-item.big{grid-column:span 2;grid-row:span 1}
  .gal-item.wide{grid-column:span 2}
  .gal-item.tall{grid-row:span 1}
  .form__row{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
  .foot__bottom{flex-direction:column}
  .hero__badge{left:0}
  .btn--block-sm{width:100%}
}
@media (max-width:400px){
  .hero__actions .btn{width:100%;justify-content:center}
}

/* ============================================================
   PAGES SERVICES
   ============================================================ */
.page-hero{padding-top:clamp(2rem,1.5rem + 2.5vw,3.5rem);padding-bottom:clamp(2.5rem,2rem + 3vw,4.5rem)}
.page-hero .hero__grid{align-items:center}
.page-hero h1{font-size:clamp(2.5rem,1.6rem + 4.4vw,5rem);text-transform:uppercase;line-height:.95;margin-top:.6rem}
.crumbs{font-size:.86rem;color:var(--muted);margin-bottom:1.4rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs li+li::before{content:"/";margin-right:.4rem;color:var(--concrete)}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover{color:var(--ocre-dk)}
.detail{background:var(--plaster-2)}
.detail__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.prose p{margin-top:1.1rem;max-width:64ch;font-size:1.06rem}
.prose p:first-of-type{margin-top:1.4rem}
.checks{list-style:none;margin:0;padding:clamp(1.4rem,1.1rem + 1vw,2rem);display:grid;gap:.85rem;
  background:var(--charcoal);color:#EFEAE0;border-radius:var(--radius);box-shadow:var(--shadow-1)}
.checks h3{font-size:1.35rem;text-transform:uppercase;color:#fff;margin-bottom:.4rem}
.checks li{display:flex;gap:.7rem;align-items:flex-start;font-weight:500}
.checks li::before{content:"";flex:none;width:.6rem;height:.6rem;margin-top:.55em;background:var(--ocre);border-radius:1px}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(2rem,1.5rem + 2vw,3rem)}
.photos figure{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-soft);background:var(--plaster-3);aspect-ratio:4/3}
.photos img{width:100%;height:100%;object-fit:cover}
.steps{list-style:none;margin:clamp(2rem,1.5rem + 2vw,3rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden}
.steps li{background:var(--plaster);padding:clamp(1.4rem,1.1rem + 1vw,2rem);display:flex;flex-direction:column;gap:.6rem}
.steps b{font-family:var(--ff-display);font-size:1.05rem;color:var(--concrete);letter-spacing:.05em}
.steps h3{font-size:1.3rem;text-transform:uppercase}
.steps p{color:var(--muted)}
.cta-band{background:var(--charcoal-2);color:var(--plaster)}
.cta-band__inner{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.cta-band h2{font-size:clamp(1.9rem,1.4rem + 2.4vw,3.2rem);text-transform:uppercase;color:#fff;max-width:20ch}
.cta-band p{color:#DED8CD;margin-top:.8rem;max-width:46ch}
.cta-band .hero__actions{margin-top:0}
.related{background:var(--plaster)}
.related__list{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.related__list a{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border:1.5px solid var(--charcoal);border-radius:var(--radius);
  font-family:var(--ff-display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.92rem;transition:background .18s ease,color .18s ease}
.related__list a:hover{background:var(--charcoal);color:var(--plaster)}
@media (max-width:900px){.detail__grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}}
@media (max-width:640px){.photos{grid-template-columns:1fr 1fr}.photos figure:first-child{grid-column:span 2}}