/* ==========================================================================
   Aluminium Perron — site.css
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body);
  line-height: var(--lh-body); letter-spacing: var(--ls); font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: var(--ls); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }

::selection { background: var(--c-blue); color: var(--c-cream); }

:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-blue); outline-offset: 3px; border-radius: 1px;
}

.skip {
  position: fixed; top: -100px; left: var(--gutter); z-index: 999;
  background: var(--c-charcoal); color: var(--c-cream);
  padding: .75rem 1.25rem; transition: top var(--t-fast) var(--ease-out);
}
.skip:focus { top: 1rem; }

body::after {
  content: ""; position: fixed; inset: 0; z-index: 900; pointer-events: none;
  opacity: .03; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ========================= Typographie partagée ========================= */
.h2 { font-size: var(--fs-h2); line-height: var(--lh-title); font-weight: 300; max-width: 18ch; }
.h2 em { font-style: normal; font-weight: 600; }
.h2--inv { color: var(--c-cream); }
.h3 { font-size: var(--fs-h3); line-height: 1.15; font-weight: 600; }

.p { font-size: var(--fs-body); line-height: var(--lh-body); max-width: 46ch; color: var(--c-ink-60); }
.p--inv { color: var(--c-paper-70); }
.p--strong { color: var(--ink); font-weight: 600; max-width: 34ch; }

.eyebrow {
  display: flex; align-items: center; gap: .9rem;
  font-size: var(--fs-small); font-weight: 600; color: var(--c-blue); margin: 0 0 var(--sp-3);
}
.eyebrow__rule { display: block; width: 3.25rem; height: 1px; background: currentColor; flex: none; }
/* Sur fond charbon, le #21304d de la charte tombe à 1,1:1. On prend donc l'autre
   couleur claire de la charte, le gris pierre : 8,4:1, et il reste distinct du
   titre en crème. Le bleu garde les neuf surtitres sur fond clair. */
.eyebrow--inv { color: var(--c-stone); }

.note { font-size: var(--fs-micro); color: var(--c-ink-60); max-width: 52ch; line-height: 1.5; }
.note--inv { color: rgba(252,249,244,.55); }

/* ========================= Icônes (Lucide) ========================= */
/* Un seul jeu, une seule épaisseur de trait, la couleur suit le texte. */
.ico {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico--sm  { width: 17px; height: 17px; stroke-width: 2.1; }
.ico--usp { width: 30px; height: 30px; stroke-width: 1.5; color: var(--c-cream); opacity: .85; }
.ico--arrow { width: 19px; height: 19px; transition: transform 340ms var(--ease-soft); }

/* ========================= Boutons ========================= */
.btn {
  --bg: var(--c-charcoal); --fg: var(--c-cream);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .75rem; min-height: 62px; padding: 0 2rem;
  font-size: var(--fs-body); font-weight: 600;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.btn--sm { min-height: 50px; padding: 0 1.4rem; white-space: nowrap; font-size: var(--fs-small); }
.btn--full { width: 100%; }
.btn--solid { background: var(--bg); color: var(--fg); }
.btn--solid::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-blue);
  transform: translateY(101%); transition: transform 460ms var(--ease-soft);
}
.btn--solid:hover::before, .btn--solid:focus-visible::before { transform: translateY(0); }
.btn--ghost { background: none; border-color: var(--c-hairline); color: var(--ink); }
.btn--ghost.btn--inv { border-color: var(--c-hairline-inv); color: var(--c-cream); }
.btn--ghost:hover { border-color: var(--c-blue); color: var(--c-blue); }
.btn--ghost.btn--inv:hover { border-color: var(--c-cream); color: var(--c-cream); }

.btn:hover .ico--arrow { transform: translateX(4px); }
.btn:hover .ico--arrow[class*='down'] { transform: translateY(3px); }

/* ========================= Médias ========================= */
.media { width: 100%; height: auto; display: block; }
.media--cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 03 — séquence de lames */
.seq { position: relative; overflow: hidden; background: #14161a; aspect-ratio: 21 / 9; }
.seq__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seq__badge {
  position: absolute; right: 1.25rem; top: 1.25rem; z-index: 2;
  font-size: var(--fs-micro); font-weight: 600; color: var(--c-cream);
  background: rgba(10,14,20,.55); backdrop-filter: blur(4px);
  padding: .4rem .7rem; border-left: 2px solid var(--c-cream);
}

/* 05 — rendu de base + calques d'accessoires */
.cfgview { position: relative; overflow: hidden; background: var(--c-cream); aspect-ratio: 5 / 4; }
.cfgview__base { width: 100%; height: 100%; object-fit: cover; display: block; }
.cfgview__lay {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 420ms var(--ease-soft); pointer-events: none;
}
.cfgview__lay.is-on { opacity: 1; }

.pill {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 42px; padding: 0 1rem; cursor: pointer;
  font-size: var(--fs-micro); font-weight: 600;
  background: rgba(252,249,244,.92); backdrop-filter: blur(6px);
  border: 1px solid var(--c-hairline); border-radius: var(--radius); color: var(--ink);
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast);
}
.pill:hover { border-color: var(--c-blue); color: var(--c-blue); }
.pill .ico { color: var(--c-blue); }
.pill[aria-pressed="true"] .ico { color: var(--c-cream); }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--c-cream); border-color: var(--ink); }

.mv { position: absolute; inset: 0; z-index: 2; background: var(--c-cream); }
.mv model-viewer { width: 100%; height: 100%; --poster-color: transparent; }
.mv__hint {
  position: absolute; left: 1rem; bottom: 1.1rem; z-index: 3;
  font-size: var(--fs-micro); color: var(--c-ink-60);
}
.mv__hint--mid {
  left: 0; right: 0; bottom: auto; top: 50%; transform: translateY(-50%);
  text-align: center; padding: 0 var(--sp-4);
}

/* ========================= Barre supérieure ========================= */
/* La barre reste visible au défilement : le téléphone doit rester joignable
   à tout moment, c'est le premier réflexe sur ce type de produit. */
.topbar { background: var(--c-blue); color: var(--c-cream); }
.topbar__in {
  max-width: var(--maxw); margin: 0 auto;
  padding: .6rem var(--gutter);
  display: flex; align-items: center; gap: 1rem;
  font-size: var(--fs-micro); font-weight: 600;
}
.topbar__tel, .topbar__hours { display: inline-flex; align-items: center; gap: .45rem; }

.topbar__tel { text-decoration: none; }
.topbar__tel:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar__sep { width: 1px; height: 14px; background: currentColor; opacity: .35; }
.topbar__note { margin-left: auto; font-weight: 400; opacity: .85; }

/* ========================= En-tête ========================= */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 800;
  border-bottom: 1px solid transparent; transform: translateY(0);
  transition: transform 380ms var(--ease-out), background 420ms var(--ease-out), border-color 420ms;
}
.hdr__in {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 1.05rem var(--gutter); max-width: var(--maxw); margin: 0 auto;
}
.logo { display: block; flex: none; }
.logo img {
  width: auto; height: 48px;
  filter: brightness(0) invert(1);
  transition: filter 420ms var(--ease-out);
}
.hdr.is-stuck .logo img { filter: none; }

.hdr__nav { display: flex; gap: var(--sp-4); margin-left: auto; font-size: var(--fs-nav); font-weight: 600; color: var(--c-cream); }
.hdr__nav a { position: relative; padding: .35rem 0; }
.hdr__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 380ms var(--ease-soft);
}
.hdr__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.hdr__right { display: flex; align-items: center; gap: var(--sp-3); }
.lang {
  display: flex; align-items: center; gap: .4rem; font-size: var(--fs-small);
  color: var(--c-cream); padding-left: var(--sp-2); border-left: 1px solid var(--c-hairline-inv);
}
.lang__b { background: none; border: 0; padding: .35rem .1rem; cursor: pointer; opacity: .55; font-weight: 600; }
.lang__b.is-on { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

.hdr.is-stuck { background: var(--c-cream); border-bottom-color: var(--c-hairline); }
.hdr.is-stuck .hdr__nav, .hdr.is-stuck .lang { color: var(--ink); }
.hdr.is-stuck .lang { border-left-color: var(--c-hairline); }
.hdr.is-hide { transform: translateY(-100%); }

/* ========================= 01 — Héro ========================= */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; background: var(--c-charcoal); overflow: hidden; }
.hero__media { position: absolute; inset: -6% 0; will-change: transform; }
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(16,18,22,.84) 0%, rgba(16,18,22,.46) 44%, rgba(16,18,22,.08) 74%),
    linear-gradient(to top, rgba(16,18,22,.72) 0%, rgba(16,18,22,0) 46%);
}
.hero__in {
  position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 11rem var(--gutter) 4.5rem;
  display: grid; grid-template-columns: minmax(0, 1fr) 540px; gap: var(--sp-5); align-items: end;
}
.hero__title {
  font-size: clamp(3rem, 7.2vw, 7.25rem); line-height: var(--lh-tight); font-weight: 300;
  color: var(--c-cream); margin: 0 0 var(--sp-3); max-width: 13ch;
}
.hero__kicker {
  display: flex; align-items: center; gap: .9rem;
  font-size: var(--fs-small); font-weight: 600; line-height: 1.3; letter-spacing: var(--ls);
  color: var(--c-stone); margin-bottom: var(--sp-3);
}
.hero__kicker::before {
  content: ""; width: 3.25rem; height: 1px; background: currentColor; flex: none;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line__i { display: block; transform: translateY(105%); }
.hero__title .line:last-child .line__i { font-weight: 600; }
.is-ready .hero__title .line__i { transform: translateY(0); transition: transform 1100ms var(--ease-soft); }
.is-ready .hero__title .line:last-child .line__i { transition-delay: 110ms; }
.hero__lead { color: var(--c-paper-70); max-width: 38ch; font-size: var(--fs-lead); line-height: 1.5; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.hero__price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--c-paper-70);
}
.hero__price b { font-size: var(--fs-lead); font-weight: 600; color: var(--c-cream); }
.hero__incl {
  margin-top: .35rem; font-size: var(--fs-small); font-weight: 600;
  color: var(--c-cream); letter-spacing: var(--ls);
}
.hero__astx { margin-top: .3rem; font-size: var(--fs-micro); color: var(--c-paper-70); }

.hero__cue { position: absolute; left: var(--gutter); bottom: 1.75rem; z-index: 2; }
.hero__cueline { display: block; width: 1px; height: 64px; background: linear-gradient(var(--c-blue), transparent); }
.hero__cueline::after { content: ""; display: block; width: 1px; height: 22px; background: var(--c-cream); animation: cue 2600ms var(--ease-soft) infinite; }
@keyframes cue { 0% { transform: translateY(-22px); opacity: 0 } 30% { opacity: 1 } 100% { transform: translateY(64px); opacity: 0 } }

.quick {
  background: rgba(252,249,244,.95); backdrop-filter: blur(14px);
  padding: var(--sp-4) var(--sp-4) var(--sp-4);
  border-top: 3px solid var(--c-blue);
}
.quick .eyebrow { margin-bottom: var(--sp-2); }
.quick .eyebrow__rule { width: 2.25rem; }
.quick__t { font-size: var(--fs-h3); font-weight: 600; line-height: 1.1; text-align: left; }
.quick__sub {
  font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-60);
  margin: .6rem 0 var(--sp-4); max-width: 42ch; text-align: left;
}
.quick__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem var(--sp-3); }
.quick__form > .field--full,
.quick__form > button,
.quick__form > .form__note,
.quick__form > .form__msg { grid-column: 1 / -1; }

/* ========================= Champs ========================= */
.field { position: relative; }
.field input, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--c-hairline);
  padding: 1.55rem 0 .65rem; font-size: var(--fs-body); border-radius: 0;
  transition: border-color var(--t-fast) var(--ease-out);
}
.field textarea { resize: vertical; }
.field label {
  position: absolute; left: 0; top: 1.5rem; font-size: var(--fs-body); color: var(--c-ink-60);
  pointer-events: none; transform-origin: left top;
  transition: transform 280ms var(--ease-soft), color 280ms var(--ease-out);
}
.field input:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label {
  transform: translateY(-1.45rem) scale(.78); color: var(--ink);
}
.field input:focus, .field textarea:focus { border-bottom-color: var(--c-blue); outline: none; }
.field.is-bad input, .field.is-bad textarea { border-bottom-color: #9a3412; }
.field__err { font-size: var(--fs-micro); color: #9a3412; margin-top: .3rem; }
.field__hint { font-size: var(--fs-micro); color: var(--c-ink-60); margin-top: .35rem; }

.field--file { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: .55rem; margin-top: .6rem; }
.field--file label { position: static; font-size: var(--fs-micro); font-weight: 600; transform: none; color: var(--ink); }
.field--file em { font-style: normal; font-weight: 400; opacity: .65; }
.field--file input { padding: .55rem 0; font-size: var(--fs-micro); border-bottom: 1px dashed var(--c-hairline); width: 100%; }
.field--file input::file-selector-button {
  font: inherit; font-size: var(--fs-micro); font-weight: 600; cursor: pointer;
  background: none; border: 1px solid var(--c-hairline); border-radius: var(--radius);
  padding: .4rem .8rem; margin-right: .8rem; color: var(--ink);
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast);
}
.field--file input::file-selector-button:hover { border-color: var(--c-blue); color: var(--c-blue); }

.form__note { font-size: var(--fs-micro); color: var(--c-ink-60); text-align: center; }
.form__note--left { text-align: left; }
.form__msg { font-size: var(--fs-small); font-weight: 600; color: var(--c-blue); }
.form__msg--bad { color: #9a3412; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__msg:empty { display: none; }
.form__tech { font-size: var(--fs-micro); color: var(--c-ink-60); opacity: .75; border-top: 1px solid var(--c-hairline); padding-top: .75rem; }
.form__grp { font-size: var(--fs-micro); font-weight: 600; margin-top: var(--sp-2); }
.btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ========================= Bande USP ========================= */
.usp { background: var(--c-charcoal); color: var(--c-cream); border-top: 1px solid rgba(252,249,244,.12); padding: var(--sp-4) var(--gutter); }
.usp__list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3) var(--sp-4);
  max-width: var(--maxw); margin: 0 auto;
  font-size: 25px; font-weight: 400; line-height: 1.2;
}
.usp__list li { display: flex; align-items: center; gap: .9rem; }

.usp__delay {
  max-width: 62ch; margin: var(--sp-3) auto 0; padding: 0 var(--gutter);
  text-align: center; font-size: var(--fs-small); color: var(--c-ink-60);
}

/* ========================= 02 — Concept ========================= */
.concept { padding: var(--sp-8) var(--gutter); }
.concept__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.15fr .95fr; gap: var(--sp-6); align-items: center; }
.concept__fig { margin: 0; }
.concept__fig--big { grid-row: span 2; }
.concept__fig--small { width: 78%; margin-top: calc(var(--sp-4) * -1); margin-left: auto; }
.concept__copy > * + * { margin-top: var(--sp-3); }

/* ========================= 03 — Lames ========================= */
.louvre { background: var(--c-charcoal); color: var(--c-cream); padding: var(--sp-7) var(--gutter); }
.louvre__head, .louvre__copy, .louvre__stage { max-width: var(--maxw); margin: 0 auto; }
.louvre__head { margin-bottom: var(--sp-4); }
.louvre__ctrl { max-width: 520px; margin: var(--sp-4) auto 0; text-align: center; }
.gauge { width: 220px; height: 34px; margin: 0 auto .9rem; }
.gauge line { stroke: var(--c-cream); stroke-width: 3; stroke-linecap: round; }
.ctrl__labels { display: flex; justify-content: space-between; font-size: var(--fs-micro); font-weight: 600; color: var(--c-paper-70); margin-bottom: .6rem; }
.ctrl__out { display: block; margin-top: .75rem; font-size: var(--fs-micro); color: rgba(252,249,244,.6); }
.ctrl__out b { color: var(--c-cream); }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: none; cursor: grab; }
.slider:active { cursor: grabbing; }
.slider::-webkit-slider-runnable-track { height: 1px; background: rgba(252,249,244,.3); }
.slider::-moz-range-track { height: 1px; background: rgba(252,249,244,.3); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%;
  background: var(--c-cream); box-shadow: 0 0 0 0 rgba(252,249,244,.4);
  transition: box-shadow 260ms var(--ease-out);
}
.slider:hover::-webkit-slider-thumb, .slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 9px rgba(252,249,244,.24); }
.slider::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--c-cream); }

.louvre__copy { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--sp-4); margin-top: var(--sp-6); align-items: start; }
.statement { font-size: var(--fs-small); line-height: 2; }
.statement li { border-top: 1px solid var(--c-hairline-inv); padding-top: .55rem; margin-top: .55rem; }
.statement li:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* ========================= 04 — Inclus ========================= */
.incl { padding: var(--sp-8) var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.incl__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: end; margin-bottom: var(--sp-6); }
.incl__list { border-top: 1px solid var(--c-hairline); }
.incl__it {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 5rem 1fr; gap: var(--sp-4); align-items: center;
  padding: var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--c-hairline);
  transition: transform 620ms var(--ease-soft), color 420ms var(--ease-out);
}
/* voile qui se déroule depuis la gauche : plus doux qu'un saut de marge */
.incl__it::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--c-cream-dim);
  transform: scaleX(0); transform-origin: left;
  transition: transform 620ms var(--ease-soft);
}
.incl__it:hover::before { transform: scaleX(1); }
.incl__it:hover { transform: translateX(6px); }
.incl__n {
  font-size: var(--fs-small); font-weight: 600; color: var(--c-blue);
  transition: transform 620ms var(--ease-soft), opacity 420ms var(--ease-out);
}
.incl__it:hover .incl__n { transform: translateX(4px); }
.incl__it .h3 { transition: transform 620ms var(--ease-soft); }
.incl__it:hover .h3 { transform: translateX(4px); }
.incl__body { display: grid; grid-template-columns: 24ch 1fr; gap: var(--sp-4); align-items: baseline; }
.incl__body p { color: var(--c-ink-60); font-size: var(--fs-small); max-width: 52ch; }
.incl__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-5); }

/* ========================= 05 — Personnalisation ========================= */
.cfg { padding: var(--sp-8) var(--gutter); background: var(--c-cream-dim); }
.cfg__head { max-width: var(--maxw); margin: 0 auto var(--sp-5); }
.cfg__head .p { margin-top: var(--sp-2); }
.cfg__wrap { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .45fr); gap: var(--sp-5); align-items: start; }
.cfg__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.cfg__tags li { font-size: var(--fs-micro); font-weight: 600; border: 1px solid var(--c-hairline); padding: .3rem .65rem; }
.cfg__tags li:first-child { background: var(--ink); color: var(--c-cream); border-color: var(--ink); }
.cfg__panel { position: sticky; top: 6rem; display: grid; gap: var(--sp-4); }
.opt { border: 0; padding: 0; margin: 0; }
.opt__lg { font-size: var(--fs-micro); font-weight: 600; padding: 0 0 .85rem; }
.opt__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.opt__col { display: grid; gap: .1rem; }

.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: block; padding: .6rem 1rem; font-size: var(--fs-micro); font-weight: 600;
  border: 1px solid var(--c-hairline); border-radius: var(--radius);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast), border-color var(--t-fast);
}
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); color: var(--c-cream); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--c-blue); outline-offset: 2px; }

.chk { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; cursor: pointer; font-size: var(--fs-small); border-bottom: 1px solid var(--c-hairline); }
.chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chk__b { width: 18px; height: 18px; flex: none; border: 1px solid var(--ink); position: relative; transition: background var(--t-fast), border-color var(--t-fast); }
.chk__b { display: grid; place-items: center; }
.chk input:checked + .chk__b { background: var(--c-blue); border-color: var(--c-blue); }
.ico--chk {
  width: 13px; height: 13px; stroke-width: 3; color: var(--c-cream);
  transform: scale(0); transition: transform 260ms var(--ease-soft);
}
.chk input:checked + .chk__b .ico--chk { transform: scale(1); }
.chk input:focus-visible + .chk__b { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.cfg__foot { display: grid; gap: .85rem; }

/* ========================= 06 — Comparateur ========================= */
.cmp { padding: var(--sp-7) var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.cmp__copy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: end; margin-bottom: var(--sp-4); }
.cmp__stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; touch-action: pan-y; user-select: none; background: var(--c-stone); }
.cmp__layer { position: absolute; inset: 0; }
.cmp__layer--clip { clip-path: inset(0 50% 0 0); will-change: clip-path; }
.cmp__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 48px; transform: translateX(-50%); cursor: ew-resize; z-index: 3; }
.cmp__bar { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--c-cream); transform: translateX(-50%); }
.cmp__knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; transform: translate(-50%,-50%); border-radius: 50%; background: var(--c-cream); box-shadow: 0 8px 30px rgba(0,0,0,.28); }
.cmp__knob { display: grid; place-items: center; color: var(--c-charcoal); }
.cmp__knob .ico { width: 24px; height: 24px; }
.cmp__lbl { position: absolute; top: 4.25rem; z-index: 4; font-size: var(--fs-micro); font-weight: 600; color: var(--c-cream); background: rgba(10,14,20,.62); padding: .35rem .7rem; pointer-events: none; }
.cmp__lbl--l { left: 1.5rem; }
.cmp__lbl--r { right: 1.5rem; }

/* ========================= 07 — Performance ========================= */
.perf { background: var(--c-charcoal); color: var(--c-cream); padding: var(--sp-7) var(--gutter); }
.perf__head, .perf__stats, .perf .note { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.perf__head { margin-bottom: var(--sp-6); }
.perf__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.stat { border-top: 1px solid var(--c-hairline-inv); padding-top: var(--sp-3); }
.stat__v { display: flex; align-items: baseline; gap: .35rem; font-size: clamp(3rem, 7.5vw, 7rem); line-height: 1; font-weight: 300; }
.stat__u { font-size: clamp(1rem, 1.6vw, 1.5rem); font-weight: 600; color: var(--c-paper-70); }
.stat__k { margin: var(--sp-2) 0 0; font-size: var(--fs-small); color: var(--c-paper-70); max-width: 26ch; }
.perf .note { margin-top: var(--sp-5); display: block; }

/* ========================= 08 — Jour → soir ========================= */
.dusk { height: 320vh; position: relative; background: #0d1017; }
.dusk__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.dusk__layers { position: absolute; inset: 0; }
.dusk__night { opacity: 0; }
.dusk__shade { position: absolute; inset: 0; background: #070a12; opacity: 0; pointer-events: none; }
/* montée en chaleur de l'éclairage intégré : reste pertinent une fois la
   photo « soir » en place, c'est un étalonnage, pas un faux luminaire. */
.dusk__stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.dusk__lamps {
  position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen;
  background:
    radial-gradient(60% 34% at 50% 62%, rgba(255,201,135,.34) 0%, rgba(255,201,135,0) 70%),
    radial-gradient(38% 20% at 50% 44%, rgba(255,214,160,.28) 0%, rgba(255,214,160,0) 72%);
}
.dusk__copy { position: absolute; left: var(--gutter); bottom: 6rem; z-index: 2; max-width: 40ch; }
.dusk__copy .p { margin-top: var(--sp-3); }
.dusk__meter { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: .75rem; z-index: 2; font-size: 11px; font-weight: 600; color: rgba(252,249,244,.55); }
.dusk__track { display: block; width: 1px; height: 180px; background: rgba(252,249,244,.22); position: relative; }
.dusk__track i { position: absolute; inset: 0 0 auto; width: 1px; height: 0; background: var(--c-cream); }

/* ========================= 09 — Planifier ========================= */
/* Colonne de gauche collante, frise qui descend à droite : le message reste
   à l'écran pendant que le visiteur parcourt les quatre étapes. */
.plan {
  padding: var(--sp-8) var(--gutter); max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr .92fr; gap: var(--sp-6);
  align-items: start;
}
.plan__copy { position: sticky; top: 11rem; }
.plan__copy > * + * { margin-top: var(--sp-3); }
.plan__copy .btn { margin-top: var(--sp-4); }

.tl { display: block; }
.tl__i {
  position: relative;
  display: grid; grid-template-columns: 30px 1fr; column-gap: var(--sp-2);
  padding-bottom: var(--sp-7);
}
.tl__i:last-child { padding-bottom: 0; }
.tl__mark { grid-column: 1; grid-row: 1 / 3; position: relative; }
.tl__mark::before {                        /* rail gris, vers le bas */
  content: ""; position: absolute; left: 5px; top: .9rem;
  bottom: calc(var(--sp-7) * -1); width: 1px; background: var(--c-hairline);
}
.tl__i:last-child .tl__mark::before { display: none; }
.tl__mark i {                              /* segment bleu qui se remplit */
  position: absolute; left: 4.5px; top: .9rem; bottom: calc(var(--sp-7) * -1);
  width: 2px; background: var(--c-blue);
  transform: scaleY(0); transform-origin: top;
  transition: transform 760ms var(--ease-soft);
}
.tl__i:last-child .tl__mark i { display: none; }
.tl__mark::after {                         /* le jalon */
  content: ""; position: absolute; left: 0; top: .6rem;
  width: 11px; height: 11px; background: var(--paper);
  border: 1px solid var(--ink); transform: rotate(45deg) scale(.3);
  opacity: 0; transition: transform 560ms var(--ease-soft), opacity 400ms var(--ease-out);
}
.tl__i--end .tl__mark::after { background: var(--c-blue); border-color: var(--c-blue); }
.tl.is-in .tl__mark::after { transform: rotate(45deg) scale(1); opacity: 1; }
.tl.is-in .tl__mark i { transform: scaleY(1); }
.tl.is-in .tl__i:nth-child(2) .tl__mark i,
.tl.is-in .tl__i:nth-child(2) .tl__mark::after { transition-delay: 180ms; }
.tl.is-in .tl__i:nth-child(3) .tl__mark i,
.tl.is-in .tl__i:nth-child(3) .tl__mark::after { transition-delay: 360ms; }
.tl.is-in .tl__i:nth-child(4) .tl__mark i,
.tl.is-in .tl__i:nth-child(4) .tl__mark::after { transition-delay: 540ms; }

.tl__t { grid-column: 2; font-size: var(--fs-lead); font-weight: 600; line-height: 1.2; }
.tl__s { grid-column: 2; margin-top: .35rem; font-size: var(--fs-small); color: var(--c-ink-60); max-width: 34ch; }

/* ========================= 10 — Comment ça fonctionne ========================= */
.how { padding: var(--sp-7) var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.how .h2 { margin-bottom: var(--sp-6); }
.how__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.how__i { border-top: 1px solid var(--ink); padding-top: var(--sp-3); }
.how__n { display: block; font-size: var(--fs-micro); font-weight: 600; color: var(--c-blue); margin-bottom: var(--sp-3); }
.how__i .h3 { font-size: var(--fs-lead); margin-bottom: .75rem; }
.how__i p { font-size: var(--fs-small); color: var(--c-ink-60); }

/* ========================= Réalisations ========================= */
.works { padding: var(--sp-7) 0; background: var(--c-cream-dim); overflow: hidden; }
.works__head {
  max-width: var(--maxw); margin: 0 auto var(--sp-5);
  padding: 0 var(--gutter);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4);
}
.works__nav { display: flex; gap: .6rem; }
.rnd {
  width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  background: none; border: 1px solid var(--c-hairline); color: var(--ink);
  display: grid; place-items: center;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast), border-color var(--t-fast);
}
.rnd:hover { background: var(--ink); color: var(--c-cream); border-color: var(--ink); }
.rnd .ico { width: 20px; height: 20px; }

.works__rail {
  display: flex; gap: var(--sp-3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--gutter) var(--sp-2);
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
}
.works__rail::-webkit-scrollbar { display: none; }
.works__rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.work { flex: 0 0 clamp(280px, 34vw, 520px); margin: 0; scroll-snap-align: start; }
.work figcaption { margin-top: .85rem; font-size: var(--fs-small); color: var(--c-ink-60); }
.works .note { max-width: var(--maxw); margin: var(--sp-4) auto 0; padding: 0 var(--gutter); }

/* emplacement photo, en attendant les vraies images */
.slot {
  position: relative; aspect-ratio: 16 / 11; overflow: hidden; color: var(--c-cream);
  background:
    repeating-linear-gradient(118deg, rgba(252,249,244,.07) 0 1px, transparent 1px 16px),
    linear-gradient(152deg, #3b4a66 0%, #21304d 55%, #6b6152 100%);
}
.slot::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(252,249,244,.24); }
.slot::after {
  content: attr(data-slot);
  position: absolute; left: 26px; bottom: 24px; max-width: 78%;
  font-size: var(--fs-micro); font-weight: 600; line-height: 1.35;
  background: rgba(10,14,20,.45); backdrop-filter: blur(3px);
  padding: .4rem .65rem; border-left: 2px solid var(--c-cream);
}

/* ========================= Avis Google ========================= */
.avis-sec { padding: var(--sp-7) 0; overflow: hidden; }
.avis__head {
  max-width: var(--maxw); margin: 0 auto var(--sp-5); padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-4); align-items: end;
}
.avis__note { display: grid; justify-items: start; gap: .3rem; }
.avis__chiffre { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 600; line-height: 1; }
.avis__compte { font-size: var(--fs-micro); color: var(--c-ink-60); max-width: 26ch; }
.avis__g { width: 22px; height: 22px; flex: none; }
.avis__g--big { width: 28px; height: 28px; }

.stars { display: inline-flex; gap: 2px; color: #f5a623; }
.stars svg { width: 15px; height: 15px; }

.avis__rail {
  display: flex; gap: var(--sp-3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .25rem var(--gutter) var(--sp-2);
  scrollbar-width: none; cursor: grab;
}
.avis__rail::-webkit-scrollbar { display: none; }
.avis__rail.is-drag { cursor: grabbing; scroll-snap-type: none; }

.avis {
  flex: 0 0 clamp(280px, 29vw, 400px); scroll-snap-align: start;
  display: grid; gap: .8rem; align-content: start;
  padding: var(--sp-3); background: var(--c-cream-dim);
  border: 1px solid var(--c-hairline); border-radius: var(--radius);
}
.avis__tete { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; }
.avis__ini {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-blue); color: var(--c-cream); font-size: var(--fs-small); font-weight: 600;
}
.avis__nom { font-size: var(--fs-small); font-weight: 600; }
.avis__date { font-size: var(--fs-micro); color: var(--c-ink-60); }
.avis__txt { font-size: var(--fs-small); line-height: 1.55; color: var(--c-ink-60); }
.avis-sec .note { max-width: var(--maxw); margin: var(--sp-4) auto 0; padding: 0 var(--gutter); }

/* ========================= 11 — FAQ ========================= */
.faq { padding: var(--sp-7) var(--gutter); max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--sp-6); align-items: start; }
.faq__head { position: sticky; top: 7rem; }
.qa { border-bottom: 1px solid var(--c-hairline); }
.qa:first-child { border-top: 1px solid var(--c-hairline); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0; cursor: pointer; list-style: none;
  font-size: var(--fs-lead); line-height: 1.3; transition: color var(--t-fast) var(--ease-out);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--c-blue); }
.ico--plus { transition: transform 420ms var(--ease-soft); }
.qa[open] .ico--plus { transform: rotate(45deg); }
.qa__a { overflow: hidden; }
.qa__a p { padding: 0 3rem var(--sp-3) 0; color: var(--c-ink-60); font-size: var(--fs-small); max-width: 62ch; }

/* ========================= 12 — Contact ========================= */
.end { padding: var(--sp-8) var(--gutter) var(--sp-7); max-width: var(--maxw); margin: 0 auto; }
.end__title {
  font-size: clamp(3rem, 9vw, 8.5rem); line-height: .96; font-weight: 600;
  letter-spacing: var(--ls); max-width: 14ch; margin-bottom: var(--sp-6);
}
.end__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--sp-6); align-items: start; }
.end__side .p { margin-bottom: var(--sp-4); }
.end__info { display: grid; gap: var(--sp-3); border-top: 1px solid var(--c-hairline); padding-top: var(--sp-3); }
.end__info div { display: grid; gap: .2rem; }
.end__info dt { font-size: var(--fs-micro); font-weight: 600; color: var(--c-blue); }
.end__info dd { margin: 0; font-size: var(--fs-small); color: var(--c-ink-60); }
.end__fig { margin: var(--sp-4) 0 0; }

.end__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem var(--sp-4); }
.end__form .field--full, .end__form .btn, .end__form .form__note,
.end__form .form__grp, .end__form .form__msg, .end__form .form__tech { grid-column: 1 / -1; }
.end__form .form__grp:first-child { margin-top: 0; }

/* coordonnées en très grand, comme demandé */
.end__reach {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
  margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: 1px solid var(--c-hairline);
}
.reach { display: grid; gap: .35rem; }
.reach--r { text-align: right; justify-items: end; }
.reach__k { font-size: var(--fs-micro); font-weight: 600; color: var(--c-blue); }
.reach__v {
  font-size: clamp(1.5rem, 3.4vw, 3rem); font-weight: 600; line-height: 1.1;
  position: relative; display: inline-block; padding-bottom: .12em;
}
.reach__v::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 520ms var(--ease-soft);
}
.reach:hover .reach__v::after { transform: scaleX(1); transform-origin: left; }

/* ========================= Pied de page ========================= */
.ft { background: var(--c-charcoal); color: var(--c-cream); padding: var(--sp-5) var(--gutter) var(--sp-4); }
.ft__in { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: space-between; }
.ft__logo { width: auto; height: 56px; filter: brightness(0) invert(1); }
.ft__nav { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-small); color: var(--c-paper-70); }
.ft__nav a:hover { color: var(--c-cream); }
.ft__disc { max-width: var(--maxw); margin: var(--sp-4) auto 0; font-size: var(--fs-micro); color: rgba(252,249,244,.42); border-top: 1px solid var(--c-hairline-inv); padding-top: var(--sp-3); }

/* ========================= Révélations ========================= */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 760ms var(--ease-out), transform 900ms var(--ease-soft); }

/* ========================= Responsive ========================= */
@media (max-width: 1180px) {
  .plan { grid-template-columns: 1fr; gap: var(--sp-5); }
  .plan__copy { position: static; }
  .tl__i { padding-bottom: var(--sp-5); }
  .tl__mark::before, .tl__mark i { bottom: calc(var(--sp-5) * -1); }
  .hero__in { grid-template-columns: 1fr; align-items: start; padding-top: 8rem; }
  .quick { max-width: 620px; }
  .louvre__copy { grid-template-columns: 1fr 1fr; }
  .cfg__wrap { grid-template-columns: 1fr; }
  .cfg__panel { position: static; }
  .opt__col { grid-template-columns: repeat(2, 1fr); gap: 0 var(--sp-3); }
  .end__grid { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .faq__head { position: static; }
  .how__list { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3); }
}

@media (max-width: 1080px) {
  .topbar__note { display: none; }
  .usp__list { grid-template-columns: repeat(2, 1fr); font-size: 22px; }
}

@media (max-width: 860px) {
  .hdr__nav { display: none; }
  .topbar__hours, .topbar__sep { display: none; }
  .topbar__in { justify-content: center; }
  .hdr__right { margin-left: auto; }
  .concept__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .concept__fig--small { width: 78%; margin-top: 0; }
  .incl__head, .cmp__copy { grid-template-columns: 1fr; }
  .incl__it { grid-template-columns: 3rem 1fr; gap: var(--sp-2); }
  .incl__body { grid-template-columns: 1fr; gap: .5rem; }
  .perf__stats { grid-template-columns: 1fr; }
  .louvre__copy { grid-template-columns: 1fr; }
  .end__form { grid-template-columns: 1fr; }
  .end__reach { grid-template-columns: 1fr; gap: var(--sp-3); }
  .reach--r { text-align: left; justify-items: start; }
  .works__head { flex-direction: column; align-items: flex-start; }
  .avis__head { grid-template-columns: 1fr; }
  .usp__list { font-size: 21px; }
  .dusk { height: 260vh; }
  .cmp__stage { aspect-ratio: 4 / 3; }
  .seq { aspect-ratio: 4 / 3; }
  .dusk__copy { bottom: 4.5rem; right: var(--gutter); }
  .dusk__meter { display: none; }
  .opt__col { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .hdr__in { gap: var(--sp-2); }
  .logo img { height: 34px; }
  .hero__in { padding-top: 9.5rem; }
  .hdr__right { gap: var(--sp-2); }
  .btn--sm { font-size: var(--fs-micro); padding: 0 .9rem; }
  .hero__veil { background: linear-gradient(to bottom, rgba(16,18,22,.74) 0%, rgba(16,18,22,.46) 38%, rgba(16,18,22,.88) 100%); }
}

@media (max-width: 560px) {
  .how__list { grid-template-columns: 1fr; }
  .usp__list { grid-template-columns: 1fr; gap: 1rem; font-size: 20px; }
  .quick__form { grid-template-columns: 1fr; }
  .hero__in { padding-bottom: 3.5rem; }
  .hero__cue { display: none; }
  .quick { max-width: none; }
}

/* ========================= Mouvement réduit ========================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__title .line__i { transform: none; }
  .hero__cueline::after { display: none; }
}