@font-face{font-family:Barlow;src:url("assets/fonts/Barlow-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url("assets/fonts/Barlow-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url("assets/fonts/Barlow-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url("assets/fonts/Barlow-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url("assets/fonts/Barlow-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url("assets/fonts/Barlow-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  --font:"Barlow", system-ui, -apple-system, Segoe UI, sans-serif;
  --ink:#071326;
  --ink-2:#0b1b33;
  --ink-3:#10284c;
  --muted:#556278;
  --muted-2:#8b9686;
  --paper:#f6f3ec;
  --paper-2:#fffdf8;
  --steel:#dce2ea;
  --blue:#345b9e;
  --blue-2:#7ea1d8;
  --aqua:#43b8c7;
  --line:rgba(7,19,38,.12);
  --line-dark:rgba(255,255,255,.14);
  --radius:30px;
  --radius-in:22px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-heavy:cubic-bezier(.16,1,.3,1);
  --shadow:0 28px 80px -42px rgba(7,19,38,.45);
  --mx:0px;
  --my:0px;
  --spot-x:50%;
  --spot-y:50%;
  --stack-shift:0px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  line-height:1.65;
  color:var(--ink);
  background:
    radial-gradient(900px 520px at 88% 4%, rgba(126,161,216,.18), transparent 62%),
    radial-gradient(620px 420px at 0% 30%, rgba(67,184,199,.12), transparent 64%),
    var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:30;
  opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
:focus-visible{outline:3px solid #9fb8e6;outline-offset:4px}
main section[id],#zones{scroll-margin-top:7rem}
.skip-link{position:absolute;left:1rem;top:-5rem;background:var(--ink);color:white;padding:.8rem 1rem;border-radius:999px;z-index:60}
.skip-link:focus{top:1rem}

.site-header{
  position:fixed;
  top:18px;
  left:50%;
  z-index:40;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:auto 1fr auto auto auto;
  align-items:center;
  gap:.55rem;
  width:min(1180px, calc(100% - 28px));
  padding:.56rem .62rem .56rem 1.35rem;
  border-radius:999px;
  color:white;
  background:rgba(18,37,71,.78);
  box-shadow:0 24px 80px -42px rgba(4,13,27,.9), inset 0 1px 0 rgba(255,255,255,.13), inset 0 0 0 1px rgba(116,148,206,.12);
  backdrop-filter:blur(20px) saturate(1.28);
  transition:background .55s var(--ease-heavy), box-shadow .55s var(--ease-heavy), transform .55s var(--ease-heavy);
}
.site-header.is-scrolled{background:rgba(7,19,38,.92);box-shadow:0 18px 52px -32px rgba(7,19,38,.92), inset 0 1px 0 rgba(255,255,255,.12)}
.brand{display:inline-flex;align-items:center}
.brand img{width:150px;height:auto}
.nav{display:flex;justify-content:center;gap:.25rem}
.nav a,.header-call,.header-quote{
  padding:.72rem .75rem;
  border-radius:999px;
  color:rgba(255,255,255,.78);
  font-size:.94rem;
  font-weight:600;
  transition:color .55s var(--ease), background .55s var(--ease), transform .55s var(--ease);
}
.site-header .nav,.site-header .header-call,.site-header .header-quote{transition:opacity .4s var(--ease),transform .45s var(--ease-heavy)}
.nav a:hover,.header-call:hover,.header-quote:hover{color:white;background:rgba(255,255,255,.09);transform:translateY(-1px)}
.nav a.is-active{color:white;background:rgba(255,255,255,.11)}
.header-call{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  background:transparent;
  color:white;
  font-weight:700;
  white-space:nowrap;
}
.header-call::before{
  content:"☎";
  color:#97b4e9;
  font-size:1.18rem;
  line-height:1;
}
.header-quote{
  display:inline-flex;
  justify-content:center;
  color:white;
  background:#4c70b6;
  padding:.82rem 1.2rem;
  font-weight:800;
  white-space:nowrap;
}
.header-quote:hover{background:#5b7dcc}
.menu-button{
  display:grid;
  place-items:center;
  justify-self:end;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:white;
  cursor:pointer;
}
.menu-button span{grid-area:1/1;width:17px;height:2px;background:white;border-radius:3px;transition:transform .55s var(--ease-heavy)}
.menu-button span:first-child{transform:translateY(-4px)}
.menu-button span:last-child{transform:translateY(4px)}
.menu-button.is-open span:first-child{transform:rotate(45deg)}
.menu-button.is-open span:last-child{transform:rotate(-45deg)}
.menu-panel{
  position:fixed;
  inset:0;
  z-index:35;
  display:grid;
  padding:7.5rem max(1.2rem,calc((100vw - 1180px)/2)) 2rem;
  color:white;
  background:#071326;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(0,-3%,0);
  transition:opacity .7s var(--ease-heavy),transform .8s var(--ease-heavy),visibility .7s;
}
.menu-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.menu-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);grid-template-rows:1fr auto;gap:2rem 6vw;min-height:0}
.menu-panel nav{display:grid;align-content:center;gap:.2rem}
.menu-panel nav a{display:grid;grid-template-columns:2.4rem 1fr;align-items:baseline;gap:1rem;width:max-content;max-width:100%;opacity:0;transform:translate3d(0,32px,0);transition:opacity .7s var(--ease-heavy),transform .8s var(--ease-heavy),color .4s var(--ease)}
.menu-panel.is-open nav a{opacity:1;transform:none}
.menu-panel.is-open nav a:nth-child(2){transition-delay:.05s}
.menu-panel.is-open nav a:nth-child(3){transition-delay:.1s}
.menu-panel.is-open nav a:nth-child(4){transition-delay:.15s}
.menu-panel.is-open nav a:nth-child(5){transition-delay:.2s}
.menu-panel nav small{color:#7ea1d8;font-size:.68rem;font-weight:900;letter-spacing:.14em}
.menu-panel nav span{font-size:clamp(2.7rem,5.5vw,6rem);line-height:.92;font-weight:900;letter-spacing:-.03em}
.menu-panel nav a:hover{color:#9fb8e6}
.menu-preview{position:relative;align-self:center;margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:8px;background:#10284c}
.menu-preview img{width:100%;height:100%;object-fit:cover;transition:opacity .4s var(--ease),transform .9s var(--ease-heavy)}
.menu-preview.is-changing img{opacity:.2;transform:scale(1.04)}
.menu-meta{grid-column:1/-1;display:flex;align-items:center;gap:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.62);font-size:.85rem;font-weight:700}
.menu-meta a:last-child{margin-left:auto;color:white}
body.menu-open .site-header{z-index:60;background:rgba(7,19,38,.96)}
body.menu-open .site-header .nav,body.menu-open .site-header .header-call,body.menu-open .site-header .header-quote{opacity:0;pointer-events:none;transform:translate3d(0,-8px,0)}
body.menu-open .mobile-actions{opacity:0;pointer-events:none}

.intro-film{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:#071326;transition:opacity .3s var(--ease-heavy),visibility .3s;pointer-events:none}
.intro-film img{width:min(330px,64vw);opacity:0;clip-path:inset(0 100% 0 0);transform:scale(.96);animation:intro-mark .4s 0s var(--ease-heavy) forwards}
.intro-film>span{position:absolute;left:0;right:0;bottom:0;height:2px;background:#7ea1d8;transform-origin:left;animation:intro-line .45s ease-out forwards}
.intro-film.is-hidden{opacity:0;visibility:hidden}

.hero{
  position:relative;
  min-height:100dvh;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  align-items:center;
  justify-items:center;
  gap:0;
  padding:clamp(7.2rem,11vw,9rem) max(1.2rem, calc((100vw - 1180px)/2)) clamp(1.5rem,3.8vw,2.6rem);
  overflow:hidden;
  text-align:center;
}
.hero-media{
  position:absolute;
  inset:0;
  z-index:-2;
  background:var(--ink);
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.92) contrast(1.04);
  transform:scale(1.045);
  animation:hero-breath 16s 8s var(--ease-heavy) infinite alternate backwards;
  will-change:transform;
}
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(7,19,38,.76) 0%, rgba(7,19,38,.53) 48%, rgba(7,19,38,.28) 100%),
    linear-gradient(180deg, rgba(7,19,38,.18), rgba(7,19,38,.62));
}
.hero-content{width:100%;max-width:1180px;color:white;padding-bottom:0;margin-inline:auto}
.hero-stage{
  min-height:clamp(360px,54vh,560px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(.95rem,2.2vh,1.5rem);
}
.hero-logo{
  width:min(560px,70vw);
  height:auto;
  margin:0 auto;
  filter:drop-shadow(0 18px 34px rgba(4,13,27,.42));
  opacity:0;
  transform:translate3d(0,18px,0) scale(.96);
  animation:hero-logo-in .7s .1s var(--ease-heavy) forwards, hero-logo-float 5.8s 8s ease-in-out infinite;
  will-change:transform,opacity;
}
.hero-tagline{display:grid;justify-items:center}
.hero-term{
  max-width:none;
  margin:0;
  color:white;
  font-size:clamp(2.3rem,5.5vw,3.75rem);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:800;
  opacity:0;
  clip-path:inset(0 0 100% 0);
  transform:translate3d(0,22px,0);
  animation:text-curtain .95s .72s var(--ease-heavy) forwards;
}
.hero-term span{font:inherit;color:inherit}
.hero-scope{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  margin:.8rem 0 0;
  color:#cfdcf2;
  font-size:clamp(.78rem,1.45vw,.98rem);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-shadow:0 1px 2px rgba(4,10,22,.85),0 2px 18px rgba(4,10,22,.6);
  /* Sans equilibrage, « 1992 » restait seul sur la deuxieme ligne en mobile. */
  text-wrap:balance;
  opacity:0;
  transform:translate3d(0,14px,0);
  animation:soft-rise .9s .98s var(--ease-heavy) forwards;
}
.hero-scope::before,.hero-scope::after{content:"";width:28px;height:1px;background:currentColor;opacity:.55}
.eyebrow{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  gap:.55rem;
  margin:0 auto 1rem;
  padding:.42rem .72rem;
  border-radius:999px;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue);
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
h1,h2,h3,p{margin:0}
h1{
  max-width:13ch;
  margin-inline:auto;
  font-size:clamp(3.8rem,9.4vw,8.2rem);
  line-height:.95;
  letter-spacing:-.02em;
  font-weight:800;
  text-wrap:balance;
}
h2{
  max-width:13ch;
  margin-inline:auto;
  font-size:clamp(2.25rem,5vw,4.9rem);
  line-height:1.02;
  letter-spacing:-.02em;
  font-weight:800;
  text-wrap:balance;
}
h3{font-size:clamp(1.38rem,2vw,1.85rem);line-height:1.08;font-weight:800;letter-spacing:-.02em}
.hero-bar{
  position:relative;
  width:min(100%,1180px);
  margin:clamp(1.2rem,2.8vw,2rem) auto 0;
  border-radius:34px;
  padding:7px;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.12) 42%, rgba(93,128,190,.2)),
    rgba(116,135,166,.25);
  box-shadow:
    0 28px 80px -42px rgba(4,13,27,.9),
    inset 0 0 0 1px rgba(255,255,255,.36),
    inset 0 2px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(66,98,156,.34);
  backdrop-filter:blur(24px) saturate(1.35);
  -webkit-backdrop-filter:blur(24px) saturate(1.35);
  opacity:0;
  transform:translate3d(0,24px,0) scale(.985);
  animation:soft-rise-wide 1.05s 1.18s var(--ease-heavy) forwards;
  will-change:transform,opacity;
}
.hero-bar.shell{
  border-radius:34px;
  padding:7px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.12) 42%, rgba(93,128,190,.2)),
    rgba(116,135,166,.25);
  box-shadow:
    0 28px 80px -42px rgba(4,13,27,.9),
    inset 0 0 0 1px rgba(255,255,255,.36),
    inset 0 2px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(66,98,156,.34);
}
.hero-bar::before,.hero-bar::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:inherit;
}
.hero-bar::before{
  inset:0;
  background:
    radial-gradient(220px 90px at var(--spot-x) var(--spot-y), rgba(255,255,255,.38), transparent 68%),
    radial-gradient(360px 120px at 11% 0%, rgba(255,255,255,.42), transparent 72%),
    radial-gradient(280px 90px at 100% 20%, rgba(126,161,216,.34), transparent 70%),
    linear-gradient(90deg, rgba(72,129,204,.28), transparent 18%, transparent 78%, rgba(72,129,204,.24));
  mix-blend-mode:screen;
  opacity:.62;
  animation:glass-drift 7.5s 8s ease-in-out infinite alternate backwards;
}
.hero-bar::after{
  inset:-2px;
  border:1px solid rgba(255,255,255,.38);
  box-shadow:
    inset 6px 0 18px rgba(79,132,210,.2),
    inset -6px 0 18px rgba(79,132,210,.24);
  opacity:.86;
}
.hero-bar .core{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem 1.6rem;
  padding:.86rem .86rem .86rem 1.05rem;
  color:white;
  border-radius:27px;
  background:rgba(30,45,73,.44);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 42px rgba(255,255,255,.045);
}
.hero-reassure{
  flex:1 1 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.65rem 1.5rem;
  margin:0;
  padding:0;
  list-style:none;
}
/* Au-dela de 1120 px la barre fait 1180 px : les 4 garanties tiennent sur une
   seule ligne. Sans nowrap, la 4e retombait seule sous les trois autres. */
@media (min-width:1121px){
  .hero-reassure{flex-wrap:nowrap;gap:.65rem 1.15rem}
  .hero-reassure li{flex:0 0 auto}
}
.hero-reassure li{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  color:#c0cde4;
  font-size:.9rem;
  font-weight:500;
  white-space:nowrap;
  opacity:0;
  transform:translate3d(0,8px,0);
  animation:soft-rise .65s var(--ease-heavy) forwards;
}
.hero-reassure li:nth-child(1){animation-delay:1.38s}
.hero-reassure li:nth-child(2){animation-delay:1.46s}
.hero-reassure li:nth-child(3){animation-delay:1.54s}
.hero-reassure li:nth-child(4){animation-delay:1.62s}
.hero-ico{
  animation:icon-breathe 3.8s 8s ease-in-out infinite;
}
.hero-reassure b{color:white;font-weight:600;font-variant-numeric:tabular-nums lining-nums}
.hero-ico{
  display:grid;
  place-items:center;
  width:1.75rem;
  height:1.75rem;
  border-radius:.7rem;
  color:#b8cbeb;
  background:rgba(97,132,198,.14);
  box-shadow:inset 0 0 0 1px rgba(97,132,198,.22);
  font-size:.72rem;
  font-weight:800;
}
.hero-actions{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;justify-content:flex-end;margin:0}
.hero-bar .button-primary{
  min-width:220px;
  color:white;
  background:#0c1930;
  box-shadow:0 14px 32px -18px rgba(4,13,27,.95), inset 0 0 0 2px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.18);
}
.hero-bar .button-primary:hover{background:#111f39}
.hero-bar .button-secondary{
  min-width:220px;
  color:white;
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34), inset 0 1px 0 rgba(255,255,255,.14);
}
.hero-bar .button-secondary:hover{background:rgba(255,255,255,.15)}
/* Rangee basse du hero : elle partage les bords de la barre et du contenu
   (130 / 1310 a 1440 px). Avant, les deux pastilles etaient centrees en ligne
   de texte, donc leurs bords bougeaient avec la longueur des libelles. */
.hero-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:min(100%,1180px);
  margin:clamp(1rem,2vw,1.45rem) auto 0;
}
.hero-sister{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  max-width:min(100%,470px);
  margin:0;
  padding:.42rem .88rem .42rem .45rem;
  border-radius:999px;
  color:#aebdda;
  background:rgba(10,21,40,.74);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 18px 48px -34px rgba(4,13,27,.9);
  backdrop-filter:blur(14px) saturate(1.15);
  font-size:.82rem;
  font-weight:500;
  opacity:0;
  transform:translate3d(0,14px,0);
  animation:soft-rise .85s 1.55s var(--ease-heavy) forwards;
}
.hero-sister img{
  width:34px;
  height:34px;
  border-radius:50%;
  background:white;
}
.hero-sister strong{color:white;font-weight:800}
.hero-sister > span:last-child{color:#7ea1d8;font-weight:800}

.studio-intro{
  min-height:92dvh;
  display:grid;
  align-content:center;
  gap:1.35rem;
  padding:clamp(5rem,10vw,9rem) max(1.2rem, calc((100vw - 1180px)/2));
  background:var(--paper-2);
  color:var(--ink);
}
.studio-line{
  max-width:12.5ch;
  margin:0;
  font-size:clamp(3.35rem,9vw,8.8rem);
  line-height:.88;
  letter-spacing:-.045em;
  font-weight:900;
}
.studio-note{
  max-width:34rem;
  color:var(--muted);
  font-size:clamp(1rem,1.4vw,1.18rem);
  line-height:1.6;
}
.essence-flow{
  position:relative;
  height:300dvh;
  padding:0;
  background:var(--ink);
  color:white;
}
.flow-sticky{
  position:sticky;
  top:0;
  height:100dvh;
  overflow:hidden;
  background:var(--ink);
  isolation:isolate;
}
.flow-panel{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:.7rem;
  padding:clamp(1.2rem,3.2vw,3rem) max(1.2rem, calc((100vw - 1180px)/2));
  isolation:isolate;
  overflow:hidden;
  opacity:var(--panel-opacity,0);
  transform:translate3d(0,var(--panel-y,2.5%),0) scale(var(--panel-scale,1.04));
  filter:blur(var(--panel-blur,8px));
  will-change:transform,opacity,filter;
  pointer-events:none;
}
.flow-panel img{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.84) contrast(1.04);
  transform:scale(var(--image-scale,1.12)) translate3d(0,var(--image-y,0),0);
  will-change:transform;
}
.flow-panel::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(7,19,38,.14), rgba(7,19,38,.82));
}
.flow-panel span{
  width:max-content;
  color:#a8bee8;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.18em;
  opacity:var(--content-opacity,0);
  transform:translate3d(0,var(--content-y,18px),0);
}
.flow-panel h2{
  max-width:8ch;
  margin:0;
  color:white;
  font-size:clamp(2.4rem,5.5vw,5.8rem);
  line-height:.9;
  letter-spacing:-.04em;
  opacity:var(--content-opacity,0);
  clip-path:inset(0 0 var(--content-mask,100%) 0);
  transform:translate3d(0,var(--content-y,34px),0);
}
.flow-progress{
  position:absolute;
  left:max(1.2rem, calc((100vw - 1180px)/2));
  right:max(1.2rem, calc((100vw - 1180px)/2));
  bottom:clamp(1rem,3vw,2rem);
  z-index:3;
  height:1px;
  background:rgba(255,255,255,.18);
  overflow:hidden;
}
.flow-progress span{
  display:block;
  width:100%;
  height:100%;
  background:#b9c9e7;
  transform-origin:left center;
  transform:scaleX(var(--story-progress,0));
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.85rem;
  min-height:54px;
  padding:.5rem .55rem .5rem 1.25rem;
  border:0;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
  transform:translate3d(var(--mx), var(--my), 0);
  transition:transform .65s var(--ease-heavy), background .65s var(--ease-heavy), color .65s var(--ease-heavy);
  will-change:transform;
}
.button span{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  transition:transform .65s var(--ease-heavy), background .65s var(--ease-heavy);
}
.button:hover span{transform:translate(3px,-1px) scale(1.04)}
.button:active{transform:translate3d(var(--mx), var(--my), 0) scale(.98)}
.button-primary{color:white;background:var(--blue)}
.button-primary:hover{background:#264f90}
.button-primary span{background:rgba(255,255,255,.14)}
.button-secondary{color:white;background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.button-secondary:hover{background:rgba(255,255,255,.19)}
.button-secondary span{background:rgba(255,255,255,.11)}

.shell{
  border-radius:var(--radius);
  padding:7px;
  background:rgba(255,255,255,.33);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42), var(--shadow);
}
.core{
  height:100%;
  border-radius:var(--radius-in);
  background:var(--paper-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}

.section{padding:clamp(5rem,11vw,9rem) max(1.2rem, calc((100vw - 1180px)/2));text-align:center}
.section-kicker{display:grid;grid-template-columns:1fr;gap:1rem;align-items:end;margin:0 auto 2rem;max-width:760px;text-align:center}
.section-kicker h2{max-width:12ch}
/* 07/09 : trois prestations egales dans l'ordre demande par le client (locaux,
   vitrerie, fin de chantier), sans carte mise en avant. La « saison » qu'il
   evoque attend son texte a lui. */
.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  align-items:stretch;
}
/* 01/10 : cartes avec visuel en tete (rendu de la mini-scene 3D, image fixe), texte
   aligne a gauche, et une arrivee l'une apres l'autre au fil du defilement (--arrive,
   calcule par script.js ; 1 d'office sans mouvement). */
.service-card{--arrive:1;opacity:var(--arrive);transition:transform .75s var(--ease-heavy)}
.service-card:hover{transform:translateY(-8px)}
.service-card .core{
  display:flex;flex-direction:column;padding:0;overflow:hidden;
  transform:translate3d(0,calc((1 - var(--arrive)) * 120px),0) rotate(calc((1 - var(--arrive)) * (var(--i) - 1) * 2.5deg));
  will-change:transform,opacity;
}
.service-visual{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(180deg,#f3efe6,#e9e3d8)}
.service-visual img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.14 - var(--arrive) * .14));transition:transform .9s var(--ease-heavy)}
.service-card:hover .service-visual img{transform:scale(1.05)}
.service-index{position:absolute;left:1rem;top:1rem;padding:.44rem .7rem;border-radius:999px;background:rgba(7,19,38,.84);color:white;font-size:.72rem;font-weight:900;letter-spacing:.18em;backdrop-filter:blur(8px);box-shadow:0 10px 24px -14px rgba(7,19,38,.8)}
.service-body{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:clamp(1.25rem,2.6vw,1.8rem) clamp(1.25rem,2.6vw,1.8rem) clamp(1.4rem,2.8vw,1.9rem);text-align:left}
.service-card h3{margin:0;font-size:clamp(1.35rem,1.8vw,1.6rem);line-height:1.08;letter-spacing:-.015em}
.service-card p{margin-top:.8rem;color:var(--muted);line-height:1.55}
.service-card ul{display:flex;flex-wrap:wrap;gap:.42rem;margin:auto 0 0;padding:1.4rem 0 0;list-style:none}
.service-card li{padding:.46rem .66rem;border-radius:999px;background:rgba(52,91,158,.08);font-size:.8rem;font-weight:600;color:var(--blue)}
.service-card .card-cta{margin-top:1.3rem;padding:.74rem 1.05rem;background:var(--ink);color:white}
.service-card .card-cta::after{content:"→";margin-left:.5rem;transition:transform .45s var(--ease-heavy)}
.service-card .card-cta:hover{background:var(--blue)}
.service-card .card-cta:hover::after{transform:translateX(3px)}
.card-cta{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-top:1.4rem;
  padding:.68rem .9rem;
  border-radius:999px;
  color:var(--ink);
  background:rgba(7,19,38,.07);
  font-size:.9rem;
  font-weight:700;
  transition:transform .55s var(--ease-heavy), background .55s var(--ease-heavy), color .55s var(--ease-heavy);
}
.card-cta:hover{transform:translateY(-2px);background:var(--ink);color:white}
.service-more{max-width:none;margin:1.6rem 0 0;color:var(--muted);font-size:.95rem;font-weight:600}
.service-note{display:block;margin-top:.4rem;font-size:.8rem;font-weight:500;color:var(--muted-2)}
blockquote{margin:0}
blockquote .core{padding:clamp(1.8rem,4vw,3rem)}
blockquote p{font-size:clamp(2rem,4vw,4rem);line-height:1.02;letter-spacing:-.02em;font-weight:800}
blockquote footer{margin-top:1.5rem;color:var(--muted);font-weight:700}

.contact{padding-top:0}
.contact-card{background:rgba(7,19,38,.09)}
.contact-card .core{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2rem,5vw,4rem);
  padding:clamp(1.4rem,5vw,4rem);
  background:var(--ink);
  color:white;
  text-align:center;
}
.contact-card h2{max-width:11ch}
.contact-card p:not(.eyebrow){max-width:31rem;margin:1.15rem auto 0;color:rgba(255,255,255,.68);line-height:1.6}
.quote-form{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;width:min(100%,760px);margin-inline:auto}
.quote-form label{display:grid;gap:.45rem;color:rgba(255,255,255,.7);font-size:.86rem;font-weight:700;text-align:left}
/* 07/09 : le selecteur descendant « .quote-form label:nth-child(3..5) » herite
   de l'ancien formulaire a une etape ; il etalait aussi les choix 3 a 5 de la
   grille « Quel lieu » sur toute la largeur. Les champs de contact ont leur
   propre regle (.contact-fields). */
.quote-form button,.form-phone,.form-status{grid-column:1/-1}
.quote-form input,.quote-form select,.quote-form textarea{
  width:100%;
  border:0;
  border-radius:18px;
  padding:1rem;
  color:white;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  outline:none;
  transition:box-shadow .55s var(--ease), background .55s var(--ease);
}
.quote-form input:user-invalid,.quote-form textarea:user-invalid{box-shadow:inset 0 0 0 1px #e39595,0 0 0 4px rgba(227,149,149,.15)}
.quote-form textarea{resize:vertical}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px var(--blue-2),0 0 0 4px rgba(126,161,216,.16)}
.form-phone{color:var(--blue-2);font-weight:700}
.form-status{min-height:1.4rem;color:var(--blue-2);font-weight:700}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.results{padding:clamp(3rem,6vw,4.5rem) max(1.2rem,calc((100vw - 1180px)/2)) clamp(4rem,8vw,6rem);background:var(--paper-2)}
.trust-line{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-line div{padding:1.35rem;border-right:1px solid var(--line)}
.trust-line div:last-child{border-right:0}
.trust-line strong,.trust-line span{display:block}
.trust-line strong{font-size:clamp(1.35rem,2.4vw,2.1rem);line-height:1;font-weight:900}
.trust-line span{margin-top:.45rem;color:var(--muted);font-size:.86rem;font-weight:600}

.method-zone{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2.5rem,7vw,6rem);
  padding:clamp(5rem,10vw,8rem) max(1.2rem,calc((100vw - 1180px)/2));
  color:white;
  background:var(--ink);
}
/* Le bloc collant vit dans sa propre grille, separee de la rangee « Zones » :
   c'est ce qui borne reellement son deplacement (le confinement par piste de
   grille ne s'applique pas au sticky et le laissait ecrire par-dessus). */
.method-main{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(2.5rem,7vw,6rem)}
.method-copy{position:sticky;top:8.5rem;align-self:start}
.method-copy>p:not(.eyebrow){max-width:33rem;margin-top:1.25rem;color:rgba(255,255,255,.65);line-height:1.65}
.method-steps{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--line-dark)}
.method-steps li{display:grid;grid-template-columns:4.5rem 1fr;gap:1rem;padding:1.45rem .2rem;border-bottom:1px solid var(--line-dark)}
.method-steps li>span{color:var(--blue-2);font-size:.75rem;font-weight:900;letter-spacing:.16em}
.method-steps strong{font-size:clamp(1.3rem,2vw,1.7rem)}
.method-steps p{margin-top:.3rem;color:rgba(255,255,255,.57)}
.zone-summary{grid-column:1/-1;display:grid;grid-template-columns:.7fr 1.3fr;gap:2rem;align-items:end;margin-top:1rem;padding-top:2.2rem;border-top:1px solid var(--line-dark)}
.zone-summary h3{font-size:clamp(2rem,4vw,3.6rem)}
.zone-summary>p{max-width:48rem;color:rgba(255,255,255,.65);line-height:1.7}

.reviews{padding:clamp(5rem,10vw,8rem) max(1.2rem,calc((100vw - 1180px)/2));background:#e9e4da;overflow:hidden}
.reviews-head{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end}
.google-link{display:inline-flex;align-items:center;gap:.7rem;padding:.8rem 1rem;border-bottom:1px solid var(--ink);font-weight:800}
.review-rail{display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:1rem;margin-top:2.6rem}
.review-card{display:flex;flex-direction:column;min-height:360px;margin:0;padding:clamp(1.4rem,3vw,2.2rem);border-radius:8px;background:var(--paper-2);box-shadow:0 26px 70px -50px rgba(7,19,38,.55)}
.review-card:first-child{background:var(--ink);color:white}
.review-card p{font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.12;font-weight:700;text-wrap:pretty}
.review-card footer{display:grid;gap:.25rem;margin-top:auto;padding-top:2rem}
.review-card footer span{color:var(--muted);font-size:.83rem;font-weight:700;letter-spacing:.04em}
.review-card:first-child footer span{color:#a8bee8}

.file-field{grid-column:1/-1}
.file-field input{padding:.7rem}
.file-field input::file-selector-button{margin-right:.8rem;border:0;border-radius:10px;padding:.55rem .75rem;color:var(--ink);background:white;font-weight:800;cursor:pointer}
.file-field small{color:rgba(255,255,255,.48);font-weight:500}
.form-summary{grid-column:1/-1;padding:1rem;border-radius:16px;background:rgba(126,161,216,.12);box-shadow:inset 0 0 0 1px rgba(126,161,216,.25)}
.form-summary strong{font-size:1.15rem}
.form-summary p{margin:.35rem 0 1rem!important;color:rgba(255,255,255,.7)!important;white-space:pre-line}
.form-summary .button{width:max-content}

.clean-wipe{position:relative;height:200dvh;background:var(--ink);--wipe:0}
.clean-wipe-sticky{position:sticky;top:0;height:100dvh;overflow:hidden;isolation:isolate}
.clean-wipe-before,.clean-wipe-after,.clean-wipe-after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clean-wipe-before{filter:saturate(.6) contrast(.98) brightness(.8);transform:scale(1.04)}
/* La raclette part de la droite : le sale reste a gauche, le propre se revele a droite. */
.clean-wipe-after{clip-path:inset(0 0 0 calc(100% - (var(--wipe) * 100%)));will-change:clip-path}
.clean-wipe-after img{filter:saturate(.9) contrast(1.03);transform:scale(1.02)}
.clean-wipe-sticky::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,19,38,.6),transparent 55%),linear-gradient(180deg,transparent 55%,rgba(7,19,38,.58));pointer-events:none}
.clean-wipe-blade{position:absolute;z-index:3;top:0;bottom:0;left:calc(100% - (var(--wipe) * 100%));width:2px;background:rgba(255,255,255,.88);transform:translateX(-1px);will-change:transform}
.clean-wipe-blade span{position:absolute;top:18%;left:50%;width:92px;height:20px;border-radius:4px;background:#0c1930;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 24px -14px rgba(7,19,38,.8);transform:translateX(-50%) rotate(-8deg)}
.clean-wipe-blade span::after{content:"";position:absolute;left:50%;top:16px;width:12px;height:86px;border-radius:0 0 7px 7px;background:#345b9e;transform:translateX(-50%) rotate(8deg);transform-origin:top}
.clean-wipe-copy{position:absolute;z-index:4;left:max(1.2rem,calc((100vw - 1180px)/2));bottom:clamp(2rem,6vw,5rem);display:grid;gap:.5rem;color:white;pointer-events:none}
.clean-wipe-copy span{font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#b8cbed}
.clean-wipe-copy strong{max-width:9ch;font-size:clamp(2.8rem,7vw,7rem);line-height:.88;letter-spacing:-.03em}

.projects{padding:clamp(5rem,10vw,8rem) max(1.2rem,calc((100vw - 1180px)/2));background:#e9e4da}
/* Colonne 2 bornee a 37rem : le texte d'intro finit exactement sur la marge
   droite de la grille, comme les images en dessous (1310 px a 1440). */
.projects-head{display:grid;grid-template-columns:1fr minmax(0,37rem);gap:1.3rem 4rem;align-items:end;margin-bottom:2.8rem}
.projects-head .eyebrow{grid-column:1/-1}
.projects-head h2{max-width:10ch;margin:0}
.projects-head>p:not(.eyebrow){max-width:37rem;color:var(--muted);line-height:1.65}
.projects-grid{display:grid;grid-template-columns:1.35fr .65fr;grid-template-rows:minmax(260px,42vw) minmax(260px,34vw);gap:1rem}
.project{position:relative;overflow:hidden;min-height:0;border-radius:8px;background:var(--ink);color:white;isolation:isolate;transform:perspective(1100px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));transition:transform .65s var(--ease-heavy);will-change:transform}
.project-main{grid-row:1/3}
.project img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.04);transform:scale(1.035);transition:transform 1s var(--ease-heavy),filter .8s var(--ease)}
.project::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 44%,rgba(7,19,38,.85))}
.project:hover img{transform:scale(1.075);filter:saturate(.96) contrast(1.04)}
.project>div{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.2rem,3vw,2.2rem)}
.project span{color:#b7caeb;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.project h3{margin-top:.55rem;font-size:clamp(1.7rem,3vw,3.2rem)}
.project p{margin-top:.45rem;color:rgba(255,255,255,.65)}

.zone-intro>p:last-child{max-width:30rem;margin-top:1rem;color:rgba(255,255,255,.62)}
.zone-map{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0b1b33}
/* 02/10 : vraie carte. Apercu OpenStreetMap en image, Google Maps charge seulement au clic (pas de cookie Google avant). */
.map-frame{position:relative;aspect-ratio:14/9;overflow:hidden;background:#0b1b33}
.map-preview{display:block;width:100%;height:100%;object-fit:cover}
.map-frame::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(7,19,38,.35),rgba(7,19,38,.65));pointer-events:none}
.map-load{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);padding:.9rem 1.3rem;border:0;border-radius:999px;background:white;color:var(--ink);font:inherit;font-size:.92rem;font-weight:700;box-shadow:0 18px 44px -18px rgba(0,0,0,.9);cursor:pointer;transition:transform .5s var(--ease-heavy),background .5s var(--ease-heavy),color .5s var(--ease-heavy)}
.map-load:hover{transform:translate(-50%,-50%) translateY(-2px);background:var(--blue);color:white}
.map-load:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px}
.map-note{position:absolute;z-index:2;left:50%;top:calc(50% + 2.3rem);transform:translateX(-50%);margin:0;width:max-content;max-width:92%;text-align:center;font-size:.78rem;color:rgba(255,255,255,.72)}
.map-note a{color:rgba(255,255,255,.9);text-decoration:underline}
.map-credit{position:absolute;z-index:2;right:.6rem;bottom:.4rem;font-size:.62rem;color:rgba(255,255,255,.42)}
.map-frame iframe{position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0;display:block}
.map-frame.is-loaded .map-preview,.map-frame.is-loaded .map-load,.map-frame.is-loaded .map-note,.map-frame.is-loaded .map-credit,.map-frame.is-loaded::after{display:none}
.zone-cities{display:flex;flex-wrap:wrap;gap:.5rem;padding:.9rem 1rem 0}
.zone-point{border:0;padding:.5rem .7rem;border-radius:8px;color:white;background:rgba(7,19,38,.86);box-shadow:inset 0 0 0 1px rgba(126,161,216,.25);font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;transition:background .45s var(--ease-heavy),transform .45s var(--ease-heavy)}
.zone-point::before{content:"";display:inline-block;width:7px;height:7px;margin-right:.4rem;border-radius:50%;background:#7ea1d8;box-shadow:0 0 0 4px rgba(126,161,216,.12)}
.zone-point:hover,.zone-point.is-active{background:#345b9e;transform:translateY(-1px)}
.zone-detail{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:center;margin:.8rem 1rem 1rem;padding:.85rem 1rem;border-radius:8px;background:rgba(7,19,38,.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.zone-detail strong{font-size:1.15rem}.zone-detail span{color:rgba(255,255,255,.6);font-size:.87rem}

.quote-wizard{display:block;width:min(100%,760px)}
.quote-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-bottom:1.1rem;background:rgba(255,255,255,.13)}
.quote-progress span{padding:.7rem;color:rgba(255,255,255,.42);background:var(--ink);font-size:.72rem;font-weight:900;letter-spacing:.12em;text-align:center;text-transform:uppercase;transition:color .4s var(--ease),background .4s var(--ease)}
.quote-progress span.is-active{color:white;background:#345b9e}
.quote-step{display:none;margin:0;padding:0;border:0;opacity:0;transform:translate3d(24px,0,0)}
.quote-step.is-active{display:block;animation:step-in .6s var(--ease-heavy) forwards}
.quote-step legend{width:100%;margin-bottom:1.2rem;color:white;font-size:clamp(1.45rem,2.7vw,2.1rem);line-height:1.05;font-weight:800}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
/* Nombre impair de choix : le dernier prend toute la largeur plutot que de rester orphelin. */
.choice-grid label:last-child:nth-child(odd){grid-column:1/-1}
.choice-grid label{cursor:pointer}
.choice-grid input,.deadline-group input{position:absolute;opacity:0;pointer-events:none}
.choice-grid label>span{display:grid;gap:.25rem;min-height:105px;padding:1rem;border-radius:12px;color:white;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:1rem;font-weight:800;transition:background .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease-heavy)}
.choice-grid label>span small{color:rgba(255,255,255,.5);font-size:.76rem;font-weight:500}
.choice-grid input:checked+span{background:rgba(52,91,158,.5);box-shadow:inset 0 0 0 2px #7ea1d8;transform:translateY(-2px)}
.step-next{margin-top:1rem}
.step-error{min-height:1.4rem;margin-top:.6rem;color:#efb5b5;font-size:.84rem;font-weight:700}
.surface-control{display:grid!important;grid-template-columns:1fr auto;gap:.75rem!important;padding:1.2rem;border-radius:12px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.surface-control strong{color:white;font-size:1.5rem;font-variant-numeric:tabular-nums}
.surface-control input{grid-column:1/-1;width:100%;accent-color:#7ea1d8}
.surface-control>span{grid-column:1/-1;display:flex;justify-content:space-between;color:rgba(255,255,255,.45)}
.deadline-group{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem}
.deadline-group>span{width:100%;color:rgba(255,255,255,.7);font-size:.86rem;font-weight:700}
.deadline-group label>span{display:block;padding:.65rem .8rem;border-radius:8px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);cursor:pointer}
.deadline-group input:checked+span{color:white;background:#345b9e}
.step-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.2rem}
.step-back{border:0;padding:.8rem 0;color:#9fb8e6;background:transparent;font-weight:800;cursor:pointer}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.contact-fields label:nth-child(n+3){grid-column:1/-1}
.quote-wizard>.form-phone,.quote-wizard>.form-status,.quote-wizard>.form-summary{display:block;margin-top:.9rem}

@keyframes intro-mark{to{opacity:1;clip-path:inset(0);transform:scale(1)}}
@keyframes intro-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes step-in{to{opacity:1;transform:none}}


/* Seul le hero reste centre. Le reste retrouve une lecture editoriale a gauche. */main > section:not(.hero){
  text-align:left;
}
main > section:not(.hero) h2,main > section:not(.hero) h3,main > section:not(.hero) p,main > section:not(.hero) .eyebrow{
  margin-left:0;
  margin-right:0;
}
/* En-tete de section : meme structure que .projects-head — surtitre sur toute
   la largeur, titre a gauche, texte a droite cale en bas. L'auto-placement
   envoyait le titre en colonne 2 et le texte sous le surtitre. */
.section-kicker{grid-template-columns:1fr minmax(0,37rem);gap:1rem 4rem;margin:0 0 2rem;max-width:none;text-align:left}
.section-kicker .eyebrow{grid-column:1/-1}
.section-kicker h2{grid-column:1;margin:0}
.section-kicker .section-lead{grid-column:2;align-self:end;max-width:none;margin:0}
.service-card .core{align-items:flex-start;text-align:left}
.service-card ul{justify-content:flex-start}
.contact-card .core{grid-template-columns:.9fr 1.1fr;text-align:left}
.contact-card p:not(.eyebrow){margin:1.15rem 0 0}
.quote-form{margin-inline:0}

.footer{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:start;
  gap:1rem;
  padding:2rem max(1.2rem, calc((100vw - 1180px)/2)) 7rem;
  color:var(--muted);
}
.footer strong{display:block;color:var(--ink);font-size:1.05rem}
.footer p{max-width:34rem;margin-top:.35rem}
.footer-note{font-size:.86rem;color:#8b7968}
.footer nav{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:flex-end}
.footer a{font-weight:700;color:var(--ink)}
.mobile-actions{display:none}
.mobile-actions{transition:opacity .45s var(--ease),transform .55s var(--ease-heavy)}
.mobile-actions.is-hidden{opacity:0;pointer-events:none;transform:translate3d(0,120%,0)}

.reveal{
  opacity:0;
  transform:translate3d(0,42px,0);
  filter:blur(12px);
  clip-path:inset(8% 0 0 0);
  transition:opacity 1.05s var(--ease-heavy), transform 1.05s var(--ease-heavy), filter 1.05s var(--ease-heavy), clip-path 1.05s var(--ease-heavy);
  will-change:transform,opacity,filter,clip-path;
}
.reveal.is-visible{opacity:1;transform:none;filter:none;clip-path:inset(0)}

@keyframes hero-breath{
  from{transform:scale(1.045) translate3d(0,0,0)}
  to{transform:scale(1.095) translate3d(-1.2%,.9%,0)}
}
@keyframes hero-logo-in{
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes hero-logo-float{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-8px,0) scale(1.012)}
}
@keyframes text-curtain{
  to{opacity:1;clip-path:inset(0);transform:translate3d(0,0,0)}
}
@keyframes soft-rise{
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes soft-rise-wide{
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes glass-drift{
  from{transform:translate3d(-1.5%,0,0) scale(1)}
  to{transform:translate3d(1.5%,0,0) scale(1.02)}
}
@keyframes icon-breathe{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(97,132,198,.22);transform:translate3d(0,0,0)}
  50%{box-shadow:inset 0 0 0 1px rgba(162,190,238,.38);transform:translate3d(0,-2px,0)}
}
@keyframes metric-sheen{
  0%,46%{transform:translateX(-120%)}
  72%,100%{transform:translateX(120%)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,
  .hero-logo,
  .hero-term,
  .hero-scope,
  .hero-bar,
  .hero-reassure li,
  .hero-sister{opacity:1;transform:none;filter:none;clip-path:none;transition:none;animation:none}
  .hero-media img,
  .hero-ico,
  .hero-bar::before,
  .metric::after{animation:none}
  .flow-panel:first-child{opacity:1;transform:none;filter:none}
  .flow-panel:first-child img{transform:scale(1.03)}
  .flow-panel:first-child span,.flow-panel:first-child h2{opacity:1;transform:none;clip-path:none}
  .clean-wipe{--wipe:1}
  .intro-film{display:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

@media (max-width:1120px){
  .site-header{grid-template-columns:auto 1fr auto}
  .site-header .nav,.site-header .header-call,.site-header .header-quote{display:none}
}

@media (max-width:920px){
  .site-header{grid-template-columns:auto 1fr auto}
  .nav,.header-call,.header-quote{display:none}
  .menu-shell{grid-template-columns:1fr minmax(260px,.65fr)}
  .menu-panel nav span{font-size:clamp(2.4rem,7vw,4.6rem)}
  .projects-head{grid-template-columns:1fr}
  .projects-head .eyebrow{grid-column:auto}
  .projects-grid{grid-template-columns:1.15fr .85fr;grid-template-rows:420px 320px}
  .hero{grid-template-columns:1fr;align-items:center;justify-items:center;text-align:center}
  .hero-bar .core{flex-direction:column;align-items:center}
  .hero-reassure{justify-content:center}
  .hero-actions{justify-content:center}
  .studio-intro{min-height:auto;padding-top:5rem;padding-bottom:5.8rem}
  .studio-line{font-size:clamp(3rem,13vw,6rem)}
  .flow-panel{padding:1.2rem}
  .flow-progress{left:1.2rem;right:1.2rem}
  .award-logic,.service-path,.zones{grid-template-columns:1fr}
  .logic-intro,.path-head{position:static}
  .logic-grid{grid-template-columns:1fr 1fr}
  .section-kicker,.split,.visual-band,.quote-section,.contact-card .core{grid-template-columns:1fr}
  .section-kicker .eyebrow,.section-kicker h2,.section-kicker .section-lead{grid-column:auto}
  /* En une colonne, le texte reprend sa longueur de ligne lisible. */
  .section-kicker .section-lead{max-width:37rem}
  .service-grid{grid-template-columns:1fr}
  .proof-strip{grid-template-columns:repeat(2,1fr)}
  .method-zone,.method-main{grid-template-columns:1fr}
  .method-copy{position:static}
  .zone-summary{grid-template-columns:1fr}
  .review-rail{grid-template-columns:repeat(3,minmax(280px,82vw));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;margin-right:-1.2rem}
  .review-card{scroll-snap-align:start}
}

@media (max-width:620px){
  .site-header{top:12px;width:calc(100% - 20px)}
  .brand img{width:132px}
  .hero{padding:5.8rem 1rem 1.25rem;min-height:100dvh;gap:1rem}
  .menu-panel{padding:6.2rem 1rem 1rem}
  .menu-shell{grid-template-columns:1fr;grid-template-rows:1fr auto;gap:1rem}
  .menu-preview{display:none}
  .menu-panel nav{align-content:center;gap:.45rem}
  .menu-panel nav a{grid-template-columns:1.6rem 1fr;gap:.5rem;width:100%}
  .menu-panel nav span{font-size:clamp(2.15rem,12vw,3.5rem)}
  .menu-meta{display:grid;grid-template-columns:1fr auto;gap:.45rem 1rem;font-size:.75rem}
  .menu-meta a:last-child{grid-column:1/-1;margin-left:0;color:#9fb8e6}
  .hero-logo{width:min(340px,84vw);margin-bottom:.35rem}
  .hero-stage{min-height:46vh;gap:.8rem}
  .hero-term{font-size:clamp(1.9rem,9vw,2.45rem)}
  .hero-scope{display:block;text-align:center;font-size:.68rem;letter-spacing:.09em;line-height:1.35}
  .hero-scope::before,.hero-scope::after{display:none}
  .hero-bar,
  .hero-bar.shell{
    margin-top:1rem;
    padding:6px;
  }
  .hero-bar .core{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:1.1rem;
    padding:.88rem;
  }
  .hero-reassure{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-content:center;
    gap:.5rem .65rem;
    font-size:.82rem;
  }
  .hero-reassure li{font-size:.78rem;white-space:normal;line-height:1.15}
  .hero-reassure li:nth-child(n+3){display:none}
  .hero-ico{width:1.45rem;height:1.45rem;border-radius:.55rem}
  .hero-actions{width:100%;flex-direction:column;align-items:center;justify-content:center;gap:.8rem}
  .hero-sister{
    max-width:100%;
    margin-top:0;
    font-size:.76rem;
    line-height:1.25;
    text-align:left;
  }
  .hero-sister img{width:30px;height:30px}
  h1{font-size:clamp(2.95rem,15vw,4.4rem);line-height:1}
  h2{font-size:clamp(2.05rem,10vw,3.25rem);line-height:1.03}
  h3{font-size:clamp(1.28rem,7vw,1.7rem)}
  /* 25/08 · .58rem donnait 9,3 px : illisible en capitales espacees sur mobile. */
  .eyebrow{font-size:.68rem;letter-spacing:.14em;margin-bottom:.75rem}
  .hero-content{padding-bottom:.4rem}
  .hero-actions{margin-top:0}
  .button{min-height:48px;padding:.38rem .44rem .38rem 1rem;font-size:.94rem}
  .button span{width:36px;height:36px}
  .hero-actions .button{width:100%;justify-content:center}
  .hero-actions .button-secondary{display:none}
  .hero-bar .button-primary,
  .hero-bar .button-secondary{min-width:0}
  .hero-sister{display:none}
  .studio-intro{padding:4rem 1rem 4.6rem}
  .studio-line{font-size:clamp(2.6rem,15vw,4.7rem);line-height:.9}
  .studio-note{font-size:.98rem;line-height:1.5}
  .essence-flow{height:300dvh}
  .clean-wipe{height:155dvh}
  .clean-wipe-copy{left:1rem;bottom:5.5rem}
  .clean-wipe-copy strong{font-size:clamp(2.5rem,15vw,4.5rem)}
  .clean-wipe-blade span{top:22%;width:72px}
  .flow-panel{padding:1rem}
  .flow-panel h2{font-size:clamp(2.55rem,14vw,4.3rem)}
  .flow-progress{left:1rem;right:1rem;bottom:.9rem}
  .section,.visual-band,.award-logic{padding:3.15rem 1rem}
  .results{padding:2.4rem 1rem 3rem}
  .method-zone,.reviews{padding:4rem 1rem}
  .projects{padding:4rem 1rem}
  .projects-head{gap:.9rem;margin-bottom:1.5rem}
  .projects-grid{grid-template-columns:1fr;grid-template-rows:430px 270px 270px}
  .project-main{grid-row:auto}
  .project>div{padding:1.2rem}
  .project h3{font-size:1.8rem}
  .trust-line{grid-template-columns:repeat(2,1fr)}
  .trust-line div{padding:1rem}
  .trust-line div:nth-child(2){border-right:0}
  .trust-line div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .trust-line strong{font-size:1.35rem}
  .method-steps li{grid-template-columns:3rem 1fr;padding:1.15rem 0}
  .zone-summary{gap:1rem;padding-top:1.5rem}
  .zone-point{padding:.42rem .55rem;font-size:.7rem}
  .zone-detail{grid-template-columns:1fr;gap:.15rem;padding:.7rem}
  .map-note{font-size:.72rem}
  .reviews-head{grid-template-columns:1fr;align-items:start}
  .google-link{width:max-content;padding-left:0}
  .review-rail{margin-top:1.5rem;margin-right:-1rem;grid-template-columns:repeat(3,minmax(270px,86vw))}
  .review-card{min-height:330px}
  .section-kicker{gap:1rem;margin-bottom:1.1rem}
  .logic-grid{grid-template-columns:1fr}
  .logic-card .core{padding:1rem}
  .logic-card h3{margin-top:1rem}
  .logic-card p{font-size:.92rem;line-height:1.45}
  .dark-core{min-height:150px}
  .dark-core strong{font-size:3rem}
  .image-core img{min-height:180px}
  .service-grid{gap:.65rem}
  .service-card .core{padding:1rem}
  .service-card h3{margin-top:1rem}
  .service-card p{margin-top:.65rem;font-size:.92rem;line-height:1.42}
  .service-card ul{padding-top:.9rem;gap:.35rem}
  .service-card li{font-size:.74rem;padding:.38rem .52rem}
  .card-cta{margin-top:1rem}
  .split-copy p:not(.eyebrow){font-size:.98rem;line-height:1.5;margin-top:.9rem}
  .timeline .core{padding:1rem}
  .timeline li{padding:.9rem}
  .timeline strong{margin-top:.55rem;font-size:1.05rem}
  .timeline p{font-size:.88rem}
  .timeline ol,.quote-form,.proof-strip{grid-template-columns:1fr}
  .path-item{grid-template-columns:1fr;gap:.25rem}
  .image-stack{min-height:340px}
  .image-stack img{width:88%;height:220px;border-radius:26px}
  .proof-copy p:not(.eyebrow){font-size:.98rem;line-height:1.5}
  .metric{min-height:132px;padding:1.25rem}
  .metric strong{font-size:3rem}
  blockquote .core{padding:1.2rem}
  blockquote p{font-size:clamp(1.7rem,10vw,2.45rem);line-height:1}
  .path-list{gap:.5rem}
  .path-item{padding:.9rem;border-radius:18px}
  .path-item span{font-size:1.35rem}
  .path-item strong{font-size:.9rem}
  .zone-cloud{gap:.45rem}
  .zone-cloud span{padding:.58rem .72rem;font-size:.9rem}
  .contact-card .core{padding:1rem}
  .contact-card p:not(.eyebrow){font-size:.95rem;line-height:1.48}
  .quote-form{gap:.6rem}
  .choice-grid,.contact-fields{grid-template-columns:1fr}
  .choice-grid label>span{min-height:82px}
  .contact-fields label:nth-child(n){grid-column:1/-1}
  .quote-step legend{font-size:1.45rem}
  .quote-progress span{padding:.55rem .25rem;font-size:.62rem}
  .step-actions{align-items:stretch}
  .step-actions .button{flex:1}
  .quote-form input,.quote-form select,.quote-form textarea{border-radius:14px;padding:.85rem}
  .footer{display:block;padding-inline:1rem}
  .footer nav{justify-content:flex-start;margin-top:1rem}
  .footer a{display:inline-block;margin-top:.6rem}
  .mobile-actions{
    position:fixed;
    left:10px;
    right:10px;
    bottom:max(10px,env(safe-area-inset-bottom));
    z-index:45;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.5rem;
    padding:.45rem;
    border-radius:999px;
    background:rgba(7,19,38,.9);
    backdrop-filter:blur(16px);
    box-shadow:0 20px 60px -34px rgba(7,19,38,.9);
  }
  .mobile-actions a{display:grid;place-items:center;min-height:46px;border-radius:999px;color:white;font-weight:800}
  .mobile-actions a:last-child{background:var(--blue)}
}


/* --- Mention RGPD sous le formulaire de devis --- */.form-consent{
  margin:.2rem 0 1.1rem;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.55;
  max-width:52ch;
}
.form-consent a{color:var(--blue);text-underline-offset:.2em}


/* --- Repli sans JavaScript --- */.noscript-notice{
  padding:.85rem 1.2rem;
  color:#7a4a05;
  font-size:.92rem;
  font-weight:600;
  text-align:center;
  background:#ffedcc;
  box-shadow:inset 0 -1px 0 #f0c979;
}
.noscript-notice a{color:inherit}


/* Libère les couches GPU une fois la révélation jouée */.reveal.is-visible{will-change:auto}


/* Surtitres : --blue passe AA sur les fonds clairs (5,4 a 6,6:1) mais tombe
   a 2,3:1 sur les deux sections sombres, ou --blue-2 remonte a 5,8:1. */.method-zone .eyebrow,.contact .eyebrow{color:var(--blue-2)}

/* .quote-wizard>.form-summary{display:block} l'emportait sur l'attribut hidden :
   le recapitulatif « Votre demande est prete » s'affichait avant toute saisie. */
[hidden]{display:none!important}




/* ============================================================
   Correctifs design et UX · 06/08/2026
   ============================================================ *//* 1 · Collision de texte. La piste de grille du bloc collant « Methode »
   n'etait pas bornee : il debordait sur la section Zones et ecrivait
   par-dessus (92 px mesures a 1440, 358 px a 1024).
   19/08/2026 : le bornage par piste de grille ne tenait pas au scroll (402 x 83 px
   mesures a 1280, 402 x 66 px a 1440). La grille .method-main isole desormais le
   bloc collant de la rangee « Zones », ce qui le borne pour de bon. */
.method-copy{max-height:calc(100dvh - 11rem)}


/* 2 · Hierarchie typographique. Le H1 tombait a 60 px quand le H2 suivant
   montait a 129,6 px. La regle generique h1 portait deja la bonne echelle,
   .hero-term l'ecrasait par specificite de classe. */.hero-term{font-size:clamp(3.2rem,6.4vw,5.8rem)}


/* 3 · Bande morte 621-1120 px. Le header masque nav, telephone et devis
   des 1120 px, la barre d'actions n'apparaissait qu'a 620 px : sur toute
   cette plage, aucun moyen visible d'appeler ou de demander un devis. */@media (max-width:1120px){
  .mobile-actions{
    position:fixed;
    left:10px;
    right:10px;
    bottom:max(10px,env(safe-area-inset-bottom));
    z-index:45;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.5rem;
    width:min(520px,calc(100% - 20px));
    margin-inline:auto;
    padding:.45rem;
    border-radius:999px;
    background:rgba(7,19,38,.9);
    backdrop-filter:blur(16px);
    box-shadow:0 20px 60px -34px rgba(7,19,38,.9);
  }
  .mobile-actions a{display:grid;place-items:center;min-height:46px;border-radius:999px;color:white;font-weight:800}
  .mobile-actions a:last-child{background:var(--blue)}
  /* 19/08 · la barre fixe (~70 px avec sa marge basse) recouvrait le telephone
     du hero et la pastille Auto Pro Wash entre 621 et 1120 px : le bas du hero
     lui reserve desormais sa hauteur. */
  .hero{padding-bottom:calc(clamp(1.5rem,3.8vw,2.6rem) + 80px)}
  /* 25/08 · meme cause dans la sequence « essence » : les legendes des panneaux
     (« Du chantier… ») et la barre de progression, calees en bas du viewport
     collant, passaient derriere la barre fixe Appeler / Devis sur mobile. */
  .flow-panel{padding-bottom:calc(1.2rem + 80px)}
  .flow-progress{bottom:calc(.9rem + 80px)}
}

/* Au-dela de 1120 px la nav complete revient : le burger faisait doublon. */@media (min-width:1121px){
  .menu-button{display:none}
}


/* 4 · Sections a scroll long. Raccourcies le 06/08 a 180 / 130 dvh, puis
   rallongees le 07/09 sur retour du client (« le passage des transitions photo
   est beaucoup trop rapide ») : chaque photo tient sur un palier avant le
   fondu (voir renderStory dans script.js), la raclette a trois fois plus de
   course. */.essence-flow{height:300dvh}
.clean-wipe{height:200dvh}
@media (max-width:1120px){ .essence-flow{height:280dvh} }
@media (max-width:620px){ .essence-flow{height:260dvh} .clean-wipe{height:170dvh} }


/* 5 · Cibles tactiles. Les points de la carte mesuraient 31 a 33 px de haut,
   sous le minimum de 44 px. */.zone-point{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:620px){
  .zone-point{padding:.5rem .7rem;font-size:.72rem}
}


/* 6 · Deux des quatre garanties du hero etaient masquees sous 620 px,
   dont « Assurance RC Pro », sur l'appareil le plus utilise par la cible. */@media (max-width:620px){
  .hero-reassure li:nth-child(n+3){display:flex}
}


/* 7 · Rayon imbrique. La formule du double lisere donne 30 - 7 = 23,
   pas 22. Le hero-bar appliquait deja la formule exacte (34 - 7 = 27). */:root{--radius-in:23px}


/* 8 · Rythme de sortie. Environ 200 px de vide plat entre la carte de
   contact et un footer sans repere visuel. */.section.contact{padding-bottom:clamp(3rem,6vw,5rem)}
.footer{padding-top:2.6rem;border-top:1px solid var(--line)}


/* 9 · Icone telephone. Le dingbat Unicode se rendait en emoji couleur,
   seule icone non dessinee d'un site entierement en trace custom. */.header-call::before{content:none}
.ico-tel{flex:none;color:#97b4e9}


/* 10 · Curseur de surface : reperes visuels et ordre de grandeur nomme. */.surface-control input[list]{margin-bottom:.15rem}
.surface-hint{
  grid-column:1/-1;
  color:#b8cbed;
  font-size:.84rem;
  font-weight:700;
}
.surface-note{
  grid-column:1/-1;
  margin-top:-.2rem;
  color:rgba(255,255,255,.45);
  font-size:.78rem;
}


/* 11 · Piege a robots du formulaire : invisible, mais jamais display:none,
   sinon certains remplisseurs automatiques l'ignorent. */.hp{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* --- Reprises apres verification --- */

/* 1 bis · Le bornage de grille suffit au-dela de 1180 px (chevauchement 0 px
   mesure a 1180 et 1440) mais pas a 1024, ou la colonne de gauche devient
   trop etroite et le bloc collant redeborde. Sous 1180 px, la mise en page
   a deux colonnes n'a plus assez d'air : on rend le bloc statique, comme
   c'etait deja le cas sous 920 px. */
@media (max-width:1180px){
  .method-copy{position:static;max-height:none}
}

/* 2 bis · Le H1 remonte a 92 px mais le H2 restait devant a 129,6 px.
   Le titre du site doit etre la plus grande masse de texte de la page,
   sans pour autant ecraser le hero : on remonte l'un et on calme l'autre. */
.hero-term{font-size:clamp(3.2rem,7.4vw,6.8rem)}
.studio-line{font-size:clamp(2.9rem,6.5vw,5.9rem)}
@media (max-width:1120px){
  .studio-line{font-size:clamp(2.6rem,6.8vw,4.6rem)}
}
@media (max-width:620px){
  .hero-term{font-size:clamp(2.3rem,10.5vw,3.2rem)}
  .studio-line{font-size:clamp(2rem,9.2vw,2.9rem)}
}

/* ============================================================
   Conversion · 06/08/2026
   ============================================================ */

/* Phrase de contexte sous les titres de section : ce que fait l'entreprise
   et sous quel delai, sans obliger a lire les cartes. */
.section-lead{
  max-width:62ch;
  margin:.9rem auto 0;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.6;
}

/* Numero visible des le premier ecran : sous 1180 px le header ne l'affiche
   plus, et beaucoup de visiteurs preferent appeler que remplir. */
.hero-call{
  display:inline-flex;
  align-items:baseline;
  gap:.7rem;
  margin-top:0;
  padding:.7rem 1.25rem;
  border-radius:999px;
  color:white;
  text-decoration:none;
  background:rgba(9,20,40,.55);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  backdrop-filter:blur(12px);
  transition:background .4s var(--ease);
}
.hero-call:hover{background:rgba(9,20,40,.78)}
.hero-call span{color:#cfdcf2;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.hero-call strong{font-size:1.16rem;font-weight:800;font-variant-numeric:tabular-nums}

/* Rappel au moment du doute : les reperes de credibilite etaient isoles
   en haut de page, loin du formulaire. */
.contact-phone{
  display:inline-flex;
  flex-direction:column;
  gap:.15rem;
  margin-top:1.4rem;
  color:white;
  text-decoration:none;
}
.contact-phone>span{color:#b8cbed;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.contact-phone strong{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:900;font-variant-numeric:tabular-nums}
.contact-phone:hover strong{text-decoration:underline;text-underline-offset:.18em}

.contact-trust{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.9rem 1.4rem;
  margin:1.8rem 0 0;
  padding:1.2rem 0 0;
  border-top:1px solid var(--line-dark);
  list-style:none;
}
.contact-trust strong{display:block;color:white;font-size:1.02rem;font-weight:800;line-height:1.2}
.contact-trust span{display:block;margin-top:.15rem;color:rgba(255,255,255,.55);font-size:.83rem}

@media (max-width:620px){
  .hero-call{width:100%;justify-content:center;gap:.5rem}
  .contact-trust{gap:.8rem 1rem}
}

/* Intro · piece 3D. Texte a gauche, piece a droite ; sur grand ecran la section
   est epinglee le temps que la piece se range. Sans 3D, l'image fixe reste. */
.studio-copy{display:grid;gap:1.35rem;align-content:center}
.studio-room{position:relative;width:min(100%,520px);aspect-ratio:1;margin:2.4rem auto 0}
.studio-room canvas,
.studio-room-poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.studio-room-poster{object-fit:contain}
.studio-room.has-3d .studio-room-poster{display:none}
.studio-room canvas{opacity:0;transition:opacity .7s var(--ease)}
.studio-room.is-live canvas{opacity:1}
/* Ombre portee sous la maquette 3D (l'image fixe a deja la sienne). */
.studio-room.is-live::before{content:"";position:absolute;left:14%;right:14%;bottom:7%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(7,19,38,.2),rgba(7,19,38,0));filter:blur(14px);pointer-events:none}
@media (min-width:1121px){
  /* align-content vaut aussi en display:block : sans ce retour a start, le bloc
     epingle se centre dans les 210dvh et ne colle qu'a mi-parcours. */
  .studio-intro{display:block;align-content:start;min-height:0;height:210dvh;padding-top:0;padding-bottom:0}
  .studio-pin{position:sticky;top:0;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(1rem,2.5vw,2.5rem);padding-top:4.5rem;padding-bottom:clamp(1.5rem,5dvh,3.5rem)}
  /* Le titre suit aussi la hauteur de l'ecran : sur un ecran bas, le texte ne doit
     pas descendre jusqu'a la section suivante. */
  .studio-line{font-size:clamp(2.6rem,min(6.5vw,10dvh),5.9rem)}
  .studio-room{width:min(calc(100% + max(0px, (100vw - 1180px)/2 - 24px)), 80dvh);margin:0;justify-self:start}
}

/* Prestations · mini-scenes 3D en tete de chaque carte, dans le style de la
   piece de l'intro. Chaque scene se nettoie quand sa carte traverse l'ecran.
   Sans 3D, l'image fixe de la scene propre reste. */

/* Saisons : en station, ete comme hiver (02/10) */
.season{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;padding:clamp(4.5rem,9vw,7rem) max(1.2rem,calc((100vw - 1180px)/2));background:var(--paper);text-align:left}
.season-visual{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius-in);background:var(--steel);box-shadow:var(--shadow)}
.season-visual img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-heavy)}
.season-visual:hover img{transform:scale(1.03)}
.season-badge{position:absolute;left:1rem;top:1rem;padding:.46rem .72rem;border-radius:999px;background:rgba(7,19,38,.84);color:white;font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;backdrop-filter:blur(8px)}
.season-copy h2{margin:.6rem 0 0;max-width:14ch;margin-inline:0}
.season-copy .section-lead{margin:1.2rem 0 0;max-width:36rem}
.season-list{display:grid;gap:0;margin:1.8rem 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.season-list li{display:grid;grid-template-columns:1.1rem 1fr;column-gap:.9rem;padding:.95rem 0;border-bottom:1px solid var(--line)}
.season-list li::before{content:"";grid-row:1 / span 2;width:9px;height:9px;margin-top:.5rem;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(52,91,158,.14)}
.season-list strong{grid-column:2;display:block;font-size:1.05rem}
.season-list span{grid-column:2;display:block;margin-top:.2rem;color:var(--muted);font-size:.93rem;line-height:1.5}
.season-tags{display:flex;flex-wrap:wrap;gap:.42rem;margin:1.4rem 0 0;padding:0;list-style:none}
.season-tags li{padding:.46rem .66rem;border-radius:999px;background:rgba(52,91,158,.08);font-size:.8rem;font-weight:600;color:var(--blue)}
.season-note{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;margin:1.5rem 0 0;color:var(--muted);font-size:.92rem}
.season-note .card-cta{margin:0;background:var(--ink);color:white}
.season-note .card-cta:hover{background:var(--blue)}
@media (max-width:920px){
  .season{grid-template-columns:1fr;gap:1.6rem;padding:3.4rem 1rem}
  .season-visual{aspect-ratio:4/3;max-height:420px}
  .season-copy h2{max-width:none}
}

/* 13/10 · corrections de l'audit avant mise en ligne. */
/* Le visuel d'une carte mesurait 0 px tant que sa photo n'etait pas chargee :
   la page grandissait pendant le defilement et les ancres arrivaient trop haut. */
.service-visual{align-self:stretch}
main section[id],#zones,.quote-form{scroll-margin-top:7rem}
/* Contrastes */
.service-note,.footer-note{color:var(--muted)}
.review-card:first-child footer strong{color:#fff}
.quote-progress span{color:rgba(255,255,255,.7)}
.quote-progress span.is-active{color:#fff}
.map-credit{font-size:.72rem;color:rgba(255,255,255,.7)}
.surface-note{color:rgba(255,255,255,.6)}
.quote-form ::placeholder{color:rgba(255,255,255,.6)}
.contact-card p.step-error{color:#efb5b5;margin-top:.6rem}
.form-consent a{color:#9fb8e6;text-decoration:underline}
/* Champs a 16 px : en dessous, Safari iOS zoome a la saisie. */
.quote-form input:not([type=range]):not([type=file]),.quote-form textarea{font-size:1rem}
/* Anneau de focus : bleu soutenu sur fond clair, bleu clair sur fond sombre. */
:focus-visible{outline-color:var(--blue)}
.site-header :focus-visible,.hero :focus-visible,.method-zone :focus-visible,.contact-card :focus-visible,.menu-panel :focus-visible,.essence-flow :focus-visible,.clean-wipe :focus-visible,.review-card:first-child :focus-visible{outline-color:#9fb8e6}
/* Carte : bouton et note en bas, hors des etiquettes de villes et du point de Gap. */
.map-load{top:auto;bottom:3.6rem;transform:translateX(-50%)}
.map-load:hover{transform:translateX(-50%) translateY(-2px)}
.map-note{top:auto;bottom:1.5rem;padding:.3rem .75rem;border-radius:999px;background:rgba(7,19,38,.86);color:rgba(255,255,255,.86)}
/* Cibles tactiles et survols */
.menu-meta a{display:inline-flex;align-items:center;min-height:44px}
.google-link:hover,.footer a:hover,.form-phone:hover{text-decoration:underline}
@media (max-width:1120px){
  /* Le trait de progression barrait la derniere ligne du titre. */
  .flow-panel{padding-bottom:calc(2.4rem + 80px)}
}
@media (min-width:1121px){
  /* Plus de barre fixe a cette largeur : la reserve en bas du pied de page est inutile. */
  .footer{padding-bottom:2.6rem}
}
@media (min-width:1121px) and (max-height:780px){
  /* Portables a ecran bas : le bouton et le telephone du hero restent a l'ecran. */
  .hero{padding-top:6rem}
  .hero-stage{min-height:0}
  .hero-logo{width:auto;height:min(150px,15dvh)}
}
@media (prefers-reduced-motion:reduce){
  /* Sans animation, rien ne doit rester epingle : la page semblait bloquee et
     les panneaux 2 et 3 de la sequence n'apparaissaient jamais. */
  .studio-intro{height:auto}
  .studio-pin{position:static;height:auto;padding-block:7rem 4rem}
  .essence-flow{height:auto}
  .flow-sticky{position:static;height:auto}
  .flow-panel{position:relative;min-height:70dvh;opacity:1;transform:none;filter:none}
  .flow-panel span,.flow-panel h2{opacity:1;transform:none;clip-path:none}
  .flow-progress{display:none}
  .clean-wipe{height:100dvh}
}