/* Atelier Vantelume, direction artistique premium */
:root{
  --ink:#171512;--ink-2:#ebe5d9;--panel:#fffdf8;--panel-2:#f6f1e7;
  --line:rgba(34,28,21,.11);--line-2:rgba(34,28,21,.22);
  --txt:#1b1814;--txt-2:#5f584e;--muted:#81786c;
  --brand:#a77a45;--brand-2:#d6b477;--brand-dark:#75502d;
  --brand-soft:rgba(167,122,69,.11);
  --grad:linear-gradient(135deg,#e1c28a 0%,#b78851 48%,#7d552f 100%);
  --shadow:0 34px 90px -38px rgba(38,28,18,.42);
  --shadow-soft:0 22px 55px -34px rgba(38,28,18,.28);
  --r:28px;--max:1240px;
}
html{scroll-padding-top:108px}
body{
  background:radial-gradient(circle at 8% 2%,rgba(214,180,119,.12),transparent 27rem),#f5f1e8;
  color:var(--txt);font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:.17;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;letter-spacing:-.045em;line-height:.98}
h2.title{font-size:clamp(2.65rem,5.6vw,4.75rem);font-weight:600;max-width:14ch}
.wrap{max-width:var(--max);padding:0 32px}
section{padding:128px 0}
.lead{color:var(--txt-2);font-size:1.08rem;line-height:1.85}
.accent{
  background:linear-gradient(130deg,#7a5430,#c3955f 55%,#88613b);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-style:italic;font-weight:500;
  /* L'italique déborde de sa boîte à droite (mesuré : .041em) et background-clip:text
     rogne alors la dernière lettre. On élargit la boîte peinte, la marge négative
     annule l'effet sur la mise en page. */
  padding-right:.09em;margin-right:-.09em;
}
.eyebrow{gap:13px;font-size:.69rem;font-weight:800;letter-spacing:.22em;color:var(--brand-dark);margin-bottom:24px}
.eyebrow::before{width:36px;height:2px;background:var(--grad);border-radius:3px}
.eyebrow::after{content:"";width:5px;height:5px;border:1px solid var(--brand);transform:rotate(45deg);margin-left:-8px}

/* Boutons haute couture */
.btn{
  min-height:54px;padding:13px 18px 13px 24px;border-radius:15px;
  font-family:'Manrope',sans-serif;font-size:.83rem;font-weight:800;letter-spacing:.01em;
  isolation:isolate;overflow:hidden;position:relative;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease,color .3s ease;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.25) 48%,transparent 76%);
  transform:translateX(-100%);transition:transform .6s ease,opacity .2s ease;
}
.btn::after{
  content:"↗";width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  margin-left:6px;font-size:.9rem;line-height:1;transition:transform .28s ease,background .28s ease;
}
.btn:hover{transform:translateY(-3px)}
.btn:hover::before{opacity:1;transform:translateX(100%)}
.btn:hover::after{transform:rotate(45deg)}
.btn-primary{
  color:#fffdf7;background:linear-gradient(135deg,#26221d,#12110f);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 16px 34px -18px rgba(18,15,12,.75),inset 0 1px rgba(255,255,255,.11);
}
.btn-primary::after{background:var(--grad);color:#1a140c;box-shadow:inset 0 1px rgba(255,255,255,.4)}
.btn-primary:hover{box-shadow:0 23px 45px -19px rgba(18,15,12,.85)}
.btn-ghost{
  color:var(--txt);background:rgba(255,253,248,.55);border-color:rgba(34,28,21,.17);
  backdrop-filter:blur(10px);box-shadow:inset 0 1px rgba(255,255,255,.8);
}
.btn-ghost::after{background:rgba(167,122,69,.12);color:var(--brand-dark)}
.btn-ghost:hover{background:#fffdf8;border-color:rgba(167,122,69,.4)}

/* Bandeau démo */
.demo-bar{
  background:#14120f;color:rgba(255,255,255,.62);border:0;padding:10px 24px;
  font-size:.72rem;letter-spacing:.035em;position:relative;z-index:70;
}
.demo-bar::before{
  content:"DÉMO";display:inline-flex;align-items:center;justify-content:center;
  margin-right:9px;padding:3px 8px;border:1px solid rgba(214,180,119,.42);
  border-radius:100px;color:var(--brand-2);font-size:.59rem;font-weight:800;letter-spacing:.14em;
}
.demo-bar b{display:none}.demo-bar a{color:#fff;text-decoration-color:rgba(214,180,119,.5)}

/* Navigation capsule */
header.site{
  position:sticky;top:0;z-index:60;border:0;background:rgba(245,241,232,.78);
  backdrop-filter:blur(22px) saturate(150%);
  transition:box-shadow .3s ease,background .3s ease;
}
header.site.is-scrolled{background:rgba(245,241,232,.93);box-shadow:0 12px 40px -28px rgba(28,22,16,.5)}
.navbar{height:88px;gap:22px}
.brand{gap:12px;font-family:'Manrope',sans-serif;font-size:.96rem;font-weight:800;letter-spacing:-.025em}
.brand svg.mark{display:none}
.brand::before{
  content:"";width:50px;height:50px;flex:none;border-radius:15px;
  background-image:url('./assets/icons-premium.webp?v=8');background-repeat:no-repeat;
  background-size:400% auto;background-position:33.33% 72%;
  filter:drop-shadow(0 10px 12px rgba(73,49,28,.18));
}
.brand small{font-family:'Manrope',sans-serif;color:var(--muted);font-size:.59rem;letter-spacing:.18em}
nav.main{
  margin-left:auto;gap:4px;padding:5px;background:rgba(255,253,248,.72);
  border:1px solid rgba(34,28,21,.1);border-radius:15px;
  box-shadow:0 10px 30px -24px rgba(31,23,15,.4),inset 0 1px rgba(255,255,255,.9);
  color:#5c554b;font-size:.76rem;font-weight:700;
}
nav.main a{padding:9px 13px;border-radius:10px;transition:background .25s,color .25s,box-shadow .25s}
nav.main a::after{display:none}
nav.main a:hover,nav.main a.active{color:#fff;background:#1c1915;box-shadow:0 8px 18px -10px rgba(26,22,17,.55)}
.nav-cta{gap:12px}
.nav-tel{font-family:'Manrope',sans-serif;color:var(--brand-dark);font-size:.79rem;font-weight:800}
.navbar>.nav-cta .btn{min-height:44px;padding:7px 8px 7px 17px;border-radius:13px;font-size:.72rem}
.navbar>.nav-cta .btn::after{width:28px;height:28px;border-radius:8px}
.menu-toggle{display:none}

/* Hero manifeste */
.hero{padding:90px 0 118px;min-height:calc(100vh - 128px);display:flex;align-items:center}
.hero::before{
  inset:-25% -10% auto -10%;height:120%;
  background:radial-gradient(45% 42% at 10% 20%,rgba(214,180,119,.18),transparent 72%),
             radial-gradient(40% 42% at 74% 20%,rgba(167,122,69,.09),transparent 70%);
}
.hero::after{
  content:"";position:absolute;left:max(32px,calc((100vw - var(--max))/2 + 32px));bottom:56px;
  width:clamp(80px,12vw,168px);height:1px;background:linear-gradient(90deg,var(--brand),transparent);
}
.hero-grid{grid-template-columns:1.02fr .98fr;gap:72px}
.hero h1{font-size:clamp(3.6rem,7.4vw,6.7rem);font-weight:600;line-height:.87;max-width:10ch}
.hero .lead{font-size:1.08rem;max-width:54ch;margin-top:30px;padding-left:22px;border-left:1px solid rgba(167,122,69,.38)}
.hero-actions{margin-top:36px}
.hero-proof{
  gap:0;margin-top:52px;padding:0;border:1px solid var(--line);border-radius:18px;
  background:rgba(255,253,248,.5);backdrop-filter:blur(12px);overflow:hidden;
}
.hero-proof div{flex:1;min-width:116px;padding:17px 18px;border-right:1px solid var(--line)}
.hero-proof div:last-child{border-right:0}
.hero-proof b{font-family:'Cormorant Garamond',serif;color:var(--brand-dark);font-size:1.75rem;font-weight:600;line-height:1}
.hero-proof span{text-transform:uppercase;letter-spacing:.08em;font-size:.58rem;font-weight:700;color:var(--muted);margin-top:5px;display:block}
.hero-visual{
  aspect-ratio:4/5.25;border-radius:160px 160px 28px 28px;
  border:8px solid rgba(255,253,248,.76);box-shadow:0 38px 100px -42px rgba(44,30,18,.65);
  background:linear-gradient(180deg,transparent 45%,rgba(14,12,10,.68) 100%),
             url('./assets/hero-portrait.webp') center/cover no-repeat;
}
.hero-visual::before{
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.13) 46%,transparent 64%),
             radial-gradient(circle at 72% 18%,rgba(214,180,119,.18),transparent 24rem);
}
.hero-visual::after{
  content:"17";position:absolute;left:-54px;top:54%;transform:translateY(-50%);
  width:108px;height:108px;border-radius:50%;display:grid;place-items:center;
  background:#f7f3eb;border:1px solid rgba(167,122,69,.23);
  color:var(--brand-dark);font:600 3.5rem/1 'Cormorant Garamond',serif;
  box-shadow:0 25px 55px -25px rgba(36,26,17,.45);
}
.hero-visual .stamp{
  top:28px;right:28px;background:rgba(20,18,15,.74);border:1px solid rgba(255,255,255,.18);
  color:#f0d59d;backdrop-filter:blur(12px);font-size:.62rem;font-weight:800;padding:9px 14px;
}
.hero-visual .tag{
  left:28px;bottom:28px;right:28px;padding:20px 22px;border-color:rgba(255,255,255,.19);
  background:rgba(20,18,15,.74);backdrop-filter:blur(18px);color:#fff;
}
.hero-visual .tag b{font-family:'Cormorant Garamond',serif;font-size:1.25rem;letter-spacing:-.02em}
.hero-visual .tag span{color:rgba(255,255,255,.58);font-size:.72rem}

/* Services et icônes 3D */
.services{background:#181613;color:#f7f2e9;border:0;border-radius:54px 54px 0 0;overflow:hidden}
.services::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 10% 10%,rgba(214,180,119,.13),transparent 28rem),
             linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
             linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:auto,72px 72px,72px 72px;mask-image:linear-gradient(to bottom,#000,transparent 86%);
}
.services .wrap{position:relative}
.services .eyebrow{color:#d9ba80}.services .title{color:#fffdf8}.services .lead{color:rgba(255,255,255,.58)}
.grid-3{gap:18px;margin-top:58px}
.card{
  position:relative;overflow:hidden;padding:30px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);border-radius:24px;box-shadow:none;transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.18,.75,.2,1),border-color .3s,background .3s;
}
.card::after{
  content:"";position:absolute;inset:auto -20% -65% 18%;height:80%;pointer-events:none;
  background:radial-gradient(circle,rgba(214,180,119,.14),transparent 68%);
  opacity:0;transition:opacity .35s ease;
}
.card:hover{transform:translateY(-8px);border-color:rgba(214,180,119,.28);background:rgba(255,255,255,.075)}
.card:hover::after{opacity:1}
.svc-ic{
  width:88px;height:88px;border-radius:24px;margin-bottom:25px;position:relative;overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px rgba(255,255,255,.12);
}
.svc-ic svg{display:none}
.svc-ic::before{
  content:"";position:absolute;inset:5px;background-image:url('./assets/icons-premium.webp?v=8');
  background-repeat:no-repeat;background-size:400% auto;filter:drop-shadow(0 14px 9px rgba(0,0,0,.25));
  transform:scale(1.06);transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.card:hover .svc-ic::before{transform:scale(1.14) translateY(-2px) rotate(-2deg)}
.grid-3 .card:nth-child(1) .svc-ic::before{background-position:0 26%}
.grid-3 .card:nth-child(2) .svc-ic::before{background-position:33.33% 26%}
.grid-3 .card:nth-child(3) .svc-ic::before{background-position:66.66% 26%}
.grid-3 .card:nth-child(4) .svc-ic::before{background-position:100% 26%}
.grid-3 .card:nth-child(5) .svc-ic::before{background-position:0 72%}
.grid-3 .card:nth-child(6) .svc-ic::before{background-position:33.33% 72%}
.card h3{font-size:1.62rem;letter-spacing:-.03em;margin-bottom:12px;color:#fff;font-weight:600}
.card p{color:rgba(255,255,255,.58);font-size:.87rem;line-height:1.75}
.card ul{margin-top:20px;gap:7px}
.card ul li{
  color:rgba(255,255,255,.52);background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.075);font-size:.64rem;font-weight:700;letter-spacing:.035em;padding:6px 10px;
}

/* Réalisations magazine */
#realisations{background:#f5f1e8}
#realisations .title{max-width:11ch}
.works{
  display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:repeat(2,minmax(300px,1fr));
  gap:20px;margin-top:64px;
}
.work{
  position:relative;min-height:300px;border:0;border-radius:28px;overflow:hidden;
  background:#25211c;box-shadow:var(--shadow-soft);isolation:isolate;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;
}
.work:first-child{grid-row:1/3;min-height:620px}
.work:hover{transform:translateY(-7px);border-color:transparent;box-shadow:0 38px 70px -42px rgba(25,18,12,.68)}
.work-img{position:absolute;inset:0;aspect-ratio:auto;background-size:cover!important;background-position:center!important;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
/* Cartes chantier : comparateur avant / après.
   Les photos ne sont PAS ecrites ici mais posees par premium.js quand la carte
   entre dans l'ecran : 4 photos sur 7 ne sont donc jamais telechargees par un
   visiteur qui ne descend pas jusqu'aux realisations. Le degrade de secours
   reste visible tant que la photo n'est pas la, et si JS est coupe. */
.work{--p:50%}
.work-img{
  background-color:#25211c;
  background-image:var(--ap,linear-gradient(160deg,#3a3128,#1a1613));
}
.work-avant{
  position:absolute;inset:0;z-index:1;
  background-image:var(--av,linear-gradient(160deg,#2b2620,#141110));
  background-size:cover;background-position:center;
  clip-path:inset(0 calc(100% - var(--p)) 0 0);
}
.work-sep{
  position:absolute;top:0;bottom:0;left:var(--p);z-index:3;width:2px;
  background:#f0d39b;box-shadow:0 0 14px rgba(0,0,0,.5);pointer-events:none;
}
.work-sep::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:rgba(20,18,15,.72);
  border:2px solid #f0d39b;backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.work-sep::before{
  content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:1;color:#f0d39b;font-size:.95rem;font-weight:700;
}
/* Le curseur couvre toute la carte : on attrape n'importe ou, meme sur le texte. */
.work-range{
  position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;padding:0;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent;
}
.work-range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%}
.work-range::-moz-range-thumb{width:44px;height:100%;border:0;background:transparent}
.work-range:focus-visible{opacity:1;outline:3px solid #f0d39b;outline-offset:-3px}
.work-hint{
  position:absolute;top:20px;right:20px;z-index:3;pointer-events:none;
  background:rgba(20,18,15,.66);border:1px solid rgba(255,255,255,.18);
  color:#f0d39b;font-size:.6rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:8px 12px;border-radius:100px;backdrop-filter:blur(12px);
}
/* Le texte ne doit pas bloquer le glissement. */
.work-body{pointer-events:none}
.work-body a{pointer-events:auto}
.work:hover .work-img{transform:scale(1.045)}
.work-img::after{display:none}
.work-img .badge{
  top:20px;left:20px;background:rgba(20,18,15,.66);border:1px solid rgba(255,255,255,.18);
  color:#f0d39b;backdrop-filter:blur(12px);font-size:.61rem;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;
}
.work-body{
  position:absolute;z-index:2;left:0;right:0;bottom:0;padding:30px;color:#fff;
  background:linear-gradient(transparent,rgba(16,14,12,.82) 26%);
}
.work:first-child .work-body{padding:42px}
.work-body h3{font-size:clamp(1.55rem,2.6vw,2.5rem);font-weight:600;color:#fff;margin-bottom:11px}
.work-body p{
  color:rgba(255,255,255,.65);font-size:.8rem;line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.work:first-child .work-body p{font-size:.9rem;max-width:56ch;-webkit-line-clamp:3}
.work-meta{
  gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.62);font-size:.66rem;flex-wrap:wrap;
}
.work-meta b{color:#f0d39b}

/* Méthode */
.method{background:#eae3d6;border:0}
.method .title{max-width:12ch}
.steps{gap:0;margin-top:68px;position:relative}
.steps::before{
  content:"";position:absolute;top:48px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand),var(--brand),transparent);opacity:.35;
}
.step{padding:0 28px 26px;border:0;border-radius:0;background:transparent;text-align:center}
.step::before{
  position:relative;z-index:2;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto 28px;background:#171512;-webkit-text-fill-color:#e5c98f;
  font-family:'Cormorant Garamond',serif;font-size:2.1rem;font-weight:600;opacity:1;
  border:7px solid #eae3d6;box-shadow:0 0 0 1px rgba(167,122,69,.35),0 18px 40px -25px rgba(31,23,17,.5);
}
.step h3{font-size:1.55rem;font-weight:600;margin-bottom:12px}
.step p{font-size:.82rem;color:var(--txt-2);line-height:1.75}

/* Avis */
#avis{background:#f5f1e8}
.reviews{gap:18px;margin-top:58px}
.reviews .card{
  min-height:310px;padding:34px;background:#fffdf8;border:1px solid var(--line);
  box-shadow:0 22px 50px -38px rgba(33,24,16,.35);color:var(--txt);
}
.reviews .card::before{
  content:"“";position:absolute;top:17px;right:27px;color:rgba(167,122,69,.16);
  font:600 6rem/1 'Cormorant Garamond',serif;
}
.reviews .card:hover{background:#fffdf8;border-color:rgba(167,122,69,.3)}
.reviews .stars{color:#b38048;font-size:.75rem;letter-spacing:5px;margin-bottom:26px}
.reviews .review p{color:var(--txt-2);font:500 1.24rem/1.5 'Cormorant Garamond',serif}
.reviews .review footer{border-top-color:var(--line);color:var(--muted);font-size:.72rem;margin-top:26px}
.reviews .review footer b{color:var(--txt);font-family:'Manrope',sans-serif;font-size:.77rem}

/* Zone et pin 3D */
.zone{background:#181613;color:#fff;border:0;overflow:hidden}
.zone::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 76% 46%,rgba(214,180,119,.16),transparent 30rem)}
.zone-grid{gap:70px;position:relative}
.zone .eyebrow{color:#dfc08a}.zone .title{color:#fff}.zone .lead{color:rgba(255,255,255,.56)}
.zone-list{gap:9px;margin-top:32px}
.zone-list span{
  color:rgba(255,255,255,.67);background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.1);padding:9px 14px;font-size:.7rem;font-weight:700;
}
/* Carte de la zone : vraie carte schematique en SVG.
   Remplace un grand cadre quasi vide avec une epingle isolee au milieu, qui
   occupait 800px de haut sur telephone pour ne rien dire. */
.zone-map{
  aspect-ratio:1/1;border-radius:34px;border:1px solid rgba(255,255,255,.11);
  background:none;overflow:hidden;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 38px 80px -42px #000;
}
.zone-map::before,.zone-map::after{content:none}
.zone-map svg{display:block;width:100%;height:100%}

.zone-map .zm-town circle{fill:#e8cf9c;fill-opacity:.9}
.zone-map .zm-lead{stroke:#e8cf9c;stroke-opacity:.32;stroke-width:1;fill:none}
/* Le texte SVG est en unites du viewBox : il faut donc l'AGRANDIR quand la carte
   est affichee plus petite, sinon les noms tombent a 8,8 px sur telephone.
   Positions calculees pour le cas le plus large (15,5 px), donc valables partout. */
.zone-map .zm-town text{
  font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:600;
  fill:#ffffff;fill-opacity:.75;letter-spacing:.01em;
}
.zone-map .zm-ring{
  font-family:'Manrope',sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:.24em;fill:#d6b477;fill-opacity:.5;
}
.zone-map .zm-here{
  font-family:'Manrope',sans-serif;font-size:15px;font-weight:800;
  letter-spacing:.13em;fill:#f3ddb0;
}
.zone-map .zm-sub{
  font-family:'Manrope',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.04em;fill:#ffffff;fill-opacity:.4;
}
/* ATTENTION : ce bloc doit rester APRES toutes les regles ci-dessus.
   Place avant, il etait annule par elles (meme specificite, la derniere gagne),
   et les libelles du centre tombaient a 7,7 px sur telephone. */
@media (max-width:900px){
  .zone-map .zm-town text{font-size:15.5px}
  .zone-map .zm-ring{font-size:12px}
  .zone-map .zm-here{font-size:18px}
  .zone-map .zm-sub{font-size:12.5px}
}
/* Le repere de Chalon respire doucement, coupe si l'utilisateur refuse les animations */
@media (prefers-reduced-motion:no-preference){
  .zone-map svg > g > circle[r="26"]{transform-origin:230px 230px;animation:zmPulse 3.4s ease-in-out infinite}
  .zone-map svg > g > circle[r="16"]{transform-origin:230px 230px;animation:zmPulse 3.4s ease-in-out .35s infinite}
}
@keyframes zmPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.14);opacity:.62}
}

/* FAQ */
.faq{max-width:940px;margin-top:58px}
.faq details{
  background:rgba(255,253,248,.75);border:1px solid var(--line);border-radius:18px;
  padding:0 24px;margin-bottom:10px;box-shadow:0 15px 40px -38px rgba(34,25,17,.25);
}
.faq details[open]{border-color:rgba(167,122,69,.32);background:#fffdf8}
.faq summary{min-height:74px;font-family:'Manrope',sans-serif;font-size:.87rem;font-weight:800}
.faq summary::after{
  content:"";width:32px;height:32px;border-radius:10px;
  background:linear-gradient(var(--brand-dark),var(--brand-dark)) center/10px 1px no-repeat,
             linear-gradient(var(--brand-dark),var(--brand-dark)) center/1px 10px no-repeat,var(--brand-soft);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 24px;color:var(--txt-2);font-size:.86rem;line-height:1.8;max-width:76ch}

/* Contact signature */
.contact{background:#eae3d6;border:0}
.contact-grid{grid-template-columns:.82fr 1.18fr;gap:74px}
.contact-info li{gap:16px;margin-top:25px}
.contact-info .ic{
  width:48px;height:48px;border-radius:15px;background:#fffdf8;border:1px solid rgba(167,122,69,.22);
  box-shadow:0 14px 32px -24px rgba(38,27,16,.34);
}
.contact-info .icn{stroke:var(--brand-dark)}
.contact-info b{font-family:'Manrope',sans-serif;font-size:.82rem}
.contact-info span{font-size:.75rem}
form{
  padding:42px;background:#181613;border:1px solid rgba(255,255,255,.08);border-radius:30px;
  box-shadow:0 42px 90px -48px rgba(22,17,12,.72),inset 0 1px rgba(255,255,255,.07);
}
.field{margin-bottom:20px}
.field label{color:rgba(255,255,255,.66);font-size:.69rem;letter-spacing:.035em}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);
  border-radius:14px;padding:15px 16px;color:#fff;font-size:.82rem;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.28)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(214,180,119,.7);box-shadow:0 0 0 3px rgba(214,180,119,.09)
}
.field select option{background:#211e1a;color:#fff}
form .btn-primary{background:var(--grad);color:#17120d;border:0;box-shadow:0 18px 38px -20px rgba(214,180,119,.5)}
form .btn-primary::after{background:rgba(20,17,13,.9);color:#f0d39b}
.form-note{color:rgba(255,255,255,.35)}
.form-msg{background:rgba(214,180,119,.1);border-color:rgba(214,180,119,.25);color:#f0d39b}

/* Footer */
footer.site{background:#11100e;border:0;padding:82px 0 34px;color:#fff}
footer.site .brand::before{width:58px;height:58px}
.foot-grid{grid-template-columns:1.5fr .8fr .8fr;gap:70px}
.foot-grid h4{color:#c9ab77;font-size:.64rem}
.foot-grid a,.foot-grid p{color:rgba(255,255,255,.53);font-size:.78rem}
.foot-grid a:hover{color:#efd49f}
.legal-demo{
  margin-top:54px;padding:18px 22px;border-radius:16px;background:rgba(214,180,119,.055);
  border-color:rgba(214,180,119,.15);color:rgba(255,255,255,.42);font-size:.69rem;
}
.legal-demo b{color:#d3b57f}
.foot-bottom{border-top-color:rgba(255,255,255,.09);color:rgba(255,255,255,.3);font-size:.68rem}
.foot-bottom a{color:rgba(255,255,255,.58)}

/* Entrées */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
.grid-3 .reveal:nth-child(2),.reviews .reveal:nth-child(2){transition-delay:.08s}
.grid-3 .reveal:nth-child(3),.reviews .reveal:nth-child(3){transition-delay:.16s}
.grid-3 .reveal:nth-child(4){transition-delay:.05s}.grid-3 .reveal:nth-child(5){transition-delay:.13s}.grid-3 .reveal:nth-child(6){transition-delay:.21s}

@media (max-width:1120px){
  .navbar{gap:14px}.nav-tel{display:none}nav.main a{padding:9px 9px}
  .hero-grid{gap:46px}.hero h1{font-size:clamp(3.5rem,7vw,5.5rem)}
  .hero-visual::after{left:-34px;width:82px;height:82px;font-size:2.8rem}
}
@media (max-width:980px){
  section{padding:92px 0}.wrap{padding:0 24px}.hero{padding:70px 0 92px;min-height:auto}
  .hero-grid,.zone-grid,.contact-grid{grid-template-columns:1fr;gap:54px}
  .hero h1{font-size:clamp(3.7rem,11vw,6.1rem);max-width:11ch}
  .hero-visual{aspect-ratio:16/11;max-height:none;border-radius:120px 120px 26px 26px}
  .hero-visual::after{left:20px;top:20px;transform:none}
  .grid-3{grid-template-columns:1fr 1fr}
  .works{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .work:first-child{grid-column:1/3;grid-row:auto;min-height:520px}
  .work:nth-child(2),.work:nth-child(3){min-height:390px}
  .steps{grid-template-columns:1fr 1fr;row-gap:40px}.steps::before{display:none}
  .zone-map{max-width:680px;width:100%;margin:0 auto}
  .foot-grid{grid-template-columns:1.2fr 1fr 1fr;gap:36px}
  .menu-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:7px;width:44px;height:44px;
    margin-left:auto;border:1px solid var(--line);border-radius:13px;background:rgba(255,253,248,.7);
    align-items:center;cursor:pointer;position:relative;z-index:3;
  }
  .menu-toggle span{width:17px;height:1.5px;background:var(--txt);transition:transform .25s}
  .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4.25px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4.25px) rotate(-45deg)}
  nav.main{
    display:flex;position:absolute;top:78px;left:24px;right:24px;flex-direction:column;
    padding:10px;border-radius:20px;background:rgba(252,249,242,.98);
    box-shadow:0 28px 60px -30px rgba(30,23,17,.5);
    opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .25s,transform .25s,visibility .25s;
  }
  nav.main.open{opacity:1;visibility:visible;transform:none}nav.main a{padding:12px 14px}
  .navbar>.nav-cta{margin-left:0}
}
@media (max-width:680px){
  .wrap{padding:0 18px}section{padding:76px 0}h2.title{font-size:clamp(2.6rem,13vw,3.8rem)}.lead{font-size:.96rem}
  .demo-bar{font-size:.64rem;padding:9px 12px}.demo-bar::before{display:none}
  .navbar{height:74px}.brand::before{width:43px;height:43px}.brand{font-size:.84rem}.brand small{font-size:.51rem}
  .navbar>.nav-cta .btn{display:none}nav.main{top:68px;left:18px;right:18px}
  .hero{padding:54px 0 76px}.hero h1{font-size:clamp(3.3rem,16vw,5.05rem);line-height:.89}
  .hero .lead{padding-left:16px;margin-top:24px;font-size:.93rem}
  .hero-actions{display:grid;grid-template-columns:1fr;margin-top:30px}.hero-actions .btn{width:100%}
  .hero-proof{display:grid;grid-template-columns:1fr 1fr;margin-top:36px}
  .hero-proof div{border-bottom:1px solid var(--line)}.hero-proof div:nth-child(2){border-right:0}
  .hero-proof div:nth-child(3),.hero-proof div:nth-child(4){border-bottom:0}
  .hero-visual{aspect-ratio:4/5.1;border-width:5px;border-radius:90px 90px 22px 22px}
  .hero-visual::after{width:68px;height:68px;font-size:2.3rem;left:13px;top:13px}
  .hero-visual .stamp{top:16px;right:16px}.hero-visual .tag{left:16px;right:16px;bottom:16px;padding:16px}
  .services{border-radius:34px 34px 0 0}.grid-3{grid-template-columns:1fr;gap:12px;margin-top:42px}
  .card{padding:25px}.svc-ic{width:78px;height:78px}
  .works{display:grid;grid-template-columns:1fr;gap:14px;margin-top:44px}
  .work:first-child,.work:nth-child(2),.work:nth-child(3){grid-column:auto;min-height:470px}
  .work:first-child .work-body,.work-body{padding:26px 22px}.work-body h3{font-size:1.85rem}
  .steps{grid-template-columns:1fr;gap:26px;margin-top:46px}
  .step{display:grid;grid-template-columns:76px 1fr;text-align:left;column-gap:20px;padding:0}
  .step::before{width:72px;height:72px;margin:0;grid-row:1/3;font-size:1.7rem;border-width:5px}
  .step h3{align-self:end;margin:0 0 6px;font-size:1.45rem}.step p{margin:0}
  .reviews{grid-template-columns:1fr;margin-top:42px}.reviews .card{min-height:0}
  .zone-grid{gap:44px}.zone-map{aspect-ratio:1/1}
  .faq{margin-top:42px}.faq details{padding:0 18px}.faq summary{font-size:.8rem;min-height:68px}
  form{padding:26px 20px}.row-2{grid-template-columns:1fr;gap:0}
  .foot-grid{grid-template-columns:1fr;gap:32px}footer.site{padding-top:64px}
}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Téléphone et e-mail : ce sont les deux vraies actions d'un site d'artisan.
   Ils doivent AVOIR L'AIR cliquables (sinon personne n'appuie) et offrir une
   cible confortable au doigt. Sans ça, le lien existe mais ne sert à rien. */
/* :not(.nav-tel) est indispensable : sans lui, ce selecteur (specificite plus
   forte que .nav-tel) reaffiche le numero de l'en-tete sur mobile, ou il doit
   rester masque. */
a[href^="tel:"]:not(.nav-tel),a[href^="mailto:"]{
  display:inline-block;padding:8px 0;
  text-decoration:underline;text-decoration-color:rgba(214,180,119,.5);
  text-underline-offset:4px;text-decoration-thickness:1px;
  transition:text-decoration-color .2s ease;
}
a[href^="tel:"]:not(.nav-tel):hover,a[href^="mailto:"]:hover{text-decoration-color:currentColor}
a.nav-tel{padding:0;text-decoration:none}          /* l'en-tête reste compact */
a.nav-tel:hover{text-decoration:underline;text-underline-offset:5px}