/* ==========================================================================
   SunLouvre Pergolas, prototype d'accueil v2 (page claire, parcours Mionio)
   Vanilla CSS. Tokens named after the design system (tailwind.preset.cjs /
   global.css) so the port to the WordPress theme is mechanical.
   ========================================================================== */

:root {
  /* Colours (DS: primary / secondary / white + the cream ground used as bg-[#f3f1ee]) */
  --sl-color-primary: #333230;
  --sl-color-secondary: #946955;
  --sl-color-white: #ffffff;
  --sl-color-cream: #f3f1ee;
  --sl-color-ink-70: rgba(51, 50, 48, 0.7);
  --sl-color-ink-55: rgba(51, 50, 48, 0.55);
  --sl-color-ink-20: rgba(51, 50, 48, 0.2);
  --sl-color-ink-12: rgba(51, 50, 48, 0.12);
  --sl-color-ink-10: rgba(51, 50, 48, 0.1);
  --sl-color-paper-80: rgba(255, 255, 255, 0.8);
  --sl-color-paper-60: rgba(255, 255, 255, 0.6);
  --sl-color-paper-12: rgba(255, 255, 255, 0.12);
  --sl-color-paper-08: rgba(255, 255, 255, 0.08);
  --sl-color-taupe-light: #c9a58f;

  /* Fonts (DS: font-futura / font-cormorant / font-mono) */
  --sl-font-sans: 'futura-pt', 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --sl-font-serif: 'Cormorant Garamond', Georgia, serif;
  --sl-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout: media and text share the same 40 px side margins (16 px on phones) */
  --sl-margin: 40px;
  --sl-max: 1680px;
  --sl-gap: 24px;
  --sl-bar-h: 88px;
  --sl-utility-h: 0px; /* desktop strip, set in the >= 1051px block */
  --sl-header-h: calc(var(--sl-bar-h) + var(--sl-utility-h));
  --sl-header-h-stuck: 88px;
  --sl-section-pad: clamp(96px, 11vw, 168px);

  /* Motion */
  --sl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sl-reveal-duration: 600ms;
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

html.menu-open,
html.menu-open body {
  overflow: hidden;
}

body {
  margin: 0;
  font-family: var(--sl-font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--sl-color-primary);
  background: var(--sl-color-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--sl-color-secondary);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: calc(var(--sl-max) + var(--sl-margin) * 2);
  margin-inline: auto;
  padding-inline: var(--sl-margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sl-gap);
}

.section {
  padding-block: var(--sl-section-pad);
}

.section--white {
  background: var(--sl-color-white);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

/* Cormorant italic eyebrow, taupe. The only eyebrow style on the page. */
.eyebrow {
  font-family: var(--sl-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  color: var(--sl-color-secondary);
  margin-bottom: 14px;
}

/* Heading mixing weights on one line: bold for the first clause, regular
   for the rest. Sentence case, never uppercase. The Adobe kit (duy6uql) only
   ships futura-pt 400 and 700, so 300/500 would both resolve to 400 and the
   mix would vanish; 400/700 is the real contrast available. */
.h {
  font-family: var(--sl-font-sans);
  font-weight: 400;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.005em;
}

.h strong {
  font-weight: 700;
}

.h--sm {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
}

.lede {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--sl-color-ink-70);
  max-width: 50ch;
}

.h + .lede {
  margin-top: 24px;
}

.links {
  margin-top: 28px;
}

.label {
  font-family: var(--sl-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sl-color-ink-55);
}

/* Mono text link, 12 px, thin underline that darkens on hover. The page's
   primary call-to-action style; buttons are reserved for the contact band. */
.text-link {
  position: relative;
  display: inline-block;
  font-family: var(--sl-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  padding-bottom: 5px;
  white-space: nowrap;
}

.text-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transition: opacity 200ms var(--sl-ease);
}

.text-link:hover::after {
  opacity: 1;
}

.text-link span {
  display: inline-block;
  transition: transform 220ms var(--sl-ease);
}

.text-link:hover span {
  transform: translateX(3px);
}

.text-link--light {
  color: var(--sl-color-white);
}

/* --------------------------------------------------------------------------
   Buttons (DS Button, reproduced 1:1). Only .btn--secondary is used on the
   page, twice: the contact band and the form submit.
   base: inline-block text-center font-futura font-medium uppercase
         tracking-[0.08em] no-underline cursor-pointer transition-colors
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  text-align: center;
  font-family: var(--sl-font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 32px;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 200ms var(--sl-ease), color 200ms var(--sl-ease), border-color 200ms var(--sl-ease);
  white-space: nowrap;
}

.btn--primary {
  background: var(--sl-color-primary);
  border-color: var(--sl-color-primary);
  color: var(--sl-color-white);
}

.btn--primary:hover {
  background: rgba(51, 50, 48, 0.9);
}

.btn--secondary {
  background: var(--sl-color-secondary);
  border-color: var(--sl-color-secondary);
  color: var(--sl-color-white);
}

.btn--secondary:hover {
  background: rgba(148, 105, 85, 0.9);
}

.btn--outline {
  background: transparent;
  border-color: var(--sl-color-primary);
  color: var(--sl-color-primary);
}

.btn--outline:hover {
  background: var(--sl-color-primary);
  color: var(--sl-color-white);
}

.btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--sl-color-white);
}

.btn--outline-light:hover {
  background: var(--sl-color-white);
  border-color: var(--sl-color-white);
  color: var(--sl-color-primary);
}

/* --------------------------------------------------------------------------
   Parallax frame (Strate-J recipe). Square corners, no shadow, inset.
   -------------------------------------------------------------------------- */

.frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #e6e2dc;
}

.frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.28);
  will-change: transform;
}

.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;
}

/* Mionio-style gentle zoom-in on scroll (mode="zoom" in app.js's frames
   list) instead of the site-wide pan-with-overscan: scale grows from
   data-parallax-zoom-from as the frame scrolls through, so the rest-state/
   reduced-motion fallback must start at that same value (usually 1, natural
   framing) rather than the site-wide 1.28 static crop, which would sit
   pre-zoomed instead of growing into it. One attribute selector covers
   every zoom-mode frame instead of a bespoke rule per instance. */
.frame[data-parallax-mode="zoom"] img {
  transform: scale(1);
}

.morph-slider-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Opted out of the parallax (see app.js): no oversampling scale either, so
   the photo shows at its natural framing inside the crop. */
.frame--still img {
  transform: none;
  will-change: auto;
}

.frame--16x10 {
  aspect-ratio: 16 / 10;
}

.frame--4x5 {
  aspect-ratio: 4 / 5;
}

.frame--4x3 {
  aspect-ratio: 4 / 3;
}

.frame--3x2 {
  aspect-ratio: 3 / 2;
}

/* Portrait haut. La photo du hero de la page soumission a besoin du boitier
   de la toile en haut ET du visage de l'homme en bas pour que le geste de
   l'enfant se comprenne; en 4:5 il fallait couper l'un des deux. */
.frame--2x3 {
  aspect-ratio: 2 / 3;
}

.frame--1x1 {
  aspect-ratio: 1 / 1;
}

/* --------------------------------------------------------------------------
   Reveal
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--sl-reveal-duration) var(--sl-ease), transform var(--sl-reveal-duration) var(--sl-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Header: cream from the start, big logo left, mono links, no button
   88 px tall in every state: the bar and the logo never shrink on scroll,
   only the 1 px rule appears once .stuck.
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--sl-header-h);
  color: var(--sl-color-primary);
  background: var(--sl-color-cream);
  transition: height 280ms var(--sl-ease);
}

.site-header.stuck {
  height: var(--sl-header-h-stuck);
}

.site-header__inner {
  height: var(--sl-bar-h);
  display: flex;
  align-items: center;
  gap: 48px;
}

/* --------------------------------------------------------------------------
   Utility strip (desktop only): region, phone, language. Sits above the
   bar inside the fixed header and collapses to 0 when .stuck lands, so the
   compact header stays the compact header.
   -------------------------------------------------------------------------- */

.utility-bar {
  position: relative;
  z-index: 2;
  height: var(--sl-utility-h);
  border-bottom: 1px solid rgba(51, 50, 48, 0.08);
  transition: height 280ms var(--sl-ease), opacity 200ms var(--sl-ease);
}

.site-header.stuck .utility-bar {
  height: 0;
  opacity: 0;
  overflow: hidden;
  border-bottom-width: 0;
}

.utility-bar__inner {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
  font-family: var(--sl-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sl-color-ink-70);
}

.utility-bar__phone {
  color: var(--sl-color-primary);
  transition: color 160ms var(--sl-ease);
}

.utility-bar__phone:hover {
  color: var(--sl-color-taupe-light);
}

.utility-bar__lang {
  display: flex;
  gap: 8px;
  align-items: center;
}

.utility-bar__lang a {
  color: var(--sl-color-ink-70);
}

.utility-bar__lang a:hover,
.utility-bar__lang .is-current {
  color: var(--sl-color-primary);
}

/* Region select (desktop strip): a small dropdown in the sub-panel idiom.
   Purely visual for now; the WordPress build owns the behaviour. */
.region-select {
  position: relative;
}

.region-select__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--sl-color-primary);
  transition: color 160ms var(--sl-ease);
}

.region-select__btn svg {
  width: 8px;
  height: 5px;
  transition: transform 200ms var(--sl-ease);
}

.region-select__btn:hover {
  color: var(--sl-color-taupe-light);
}

.region-select.is-open .region-select__btn svg {
  transform: rotate(180deg);
}

.region-select__panel {
  position: absolute;
  top: 100%;
  right: -12px;
  min-width: 150px;
  padding: 6px 0;
  background: var(--sl-color-white);
  border: 1px solid var(--sl-color-ink-12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 180ms var(--sl-ease), transform 180ms var(--sl-ease), visibility 0s linear 180ms;
  z-index: 2;
}

.region-select.is-open .region-select__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 180ms var(--sl-ease), transform 180ms var(--sl-ease), visibility 0s;
}

.region-select__panel button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 9px 14px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  color: var(--sl-color-ink-70);
  transition: color 160ms var(--sl-ease), background-color 160ms var(--sl-ease);
}

.region-select__panel button:hover,
.region-select__panel button:focus-visible {
  color: var(--sl-color-primary);
  background: rgba(51, 50, 48, 0.05);
}

.region-select__panel button.is-active {
  color: var(--sl-color-primary);
}

.region-select__panel button.is-active::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sl-color-taupe-light);
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header .brand {
  width: 158px;
}

/* Inline logo. 76 px tall in every state, width pinned at the intrinsic ratio
   (300 / 144 * 76 = 158), so the letters can leave on scroll without the nav
   sliding left. preserveAspectRatio="xMinYMid meet" keeps the S anchored to
   the left edge, and the root svg clips its own overflow, which is what eats
   the glyphs as they ride up. */
.brand__logo {
  display: block;
  height: 76px;
  width: 158px;
  color: var(--sl-color-primary);
  overflow: hidden;
  /* The lone S drifts to its centred spot: long, soft, no snap at either end. */
  transition: transform 1300ms cubic-bezier(0.32, 0.08, 0.12, 1);
}

/* Load-in: masked rise, the mechanics of the GSAP "Masked Lines with
   SplitText" pen. Two lines, each inside a <clipPath> band exactly its own
   glyph box tall: the script "SunLouvre" (S and word as one unit, user units
   y 0 to 113, glyphs end at 111.3) and PERGOLAS (y 124 to 144, glyphs 126.4
   to 143.6). Each line starts translated down by its own band height, so it
   sits fully below its mask and nothing shows at the first paint, then rises
   to 0 on an expo.out curve. Nothing drops, nothing bounces. The rise lives
   on the inner .logo-rise group so the band itself stays still while the
   glyphs travel through it. */
.logo-rise--script {
  transform: translateY(113px);
  opacity: 0;
}

.logo-rise--caps {
  transform: translateY(20px);
  opacity: 0;
}

.site-header.is-loaded .logo-rise--script {
  animation: logo-rise-script 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.site-header.is-loaded .logo-rise--caps {
  animation: logo-rise-caps 600ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both;
}

@keyframes logo-rise-script {
  from { transform: translateY(113px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes logo-rise-caps {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Scroll: "unLouvre" and PERGOLAS ride up with the page at exactly the
   scroll speed and are eaten by the top edge of the box, the way Mionio's
   IONI leaves. app.js writes the transform on every frame, so there is
   deliberately no transition here: it is scroll-linked, not timed.
   The word moves inside its band, whose top edge is the top edge of the svg,
   so the band does not cut it early. PERGOLAS would hit the bottom of its own
   20-unit band after 20 units of travel, so app.js translates the clipped
   group instead and the band rides up with the caps. Both also fade on the
   way up, on the same scroll progress: app.js writes the opacity. */
.logo-word,
.logo-band--caps {
  will-change: transform, opacity;
}

/* Once they are gone the S slides right on its own and sits centred between
   the page margin and the first nav link (the APPELER link under 1050 px).
   The move is carried by the whole svg, not by the .logo-mark group: the S
   has to travel further than the 300-unit viewBox is wide, so a transform
   inside the svg would run it into the right edge of the box and cut it in
   half. Transforms do not affect layout, so the .brand box stays put and
   nothing else in the bar moves. app.js measures both offsets in screen px:
   --solo-y re-centres the S, which only occupies the top 59 % of the
   viewBox, so the lone mark does not ride high against the nav links. */
.brand--solo .brand__logo {
  transform: translate(var(--solo-x, 0px), var(--solo-y, 0px));
}

/* Return trip, back at the top of the page: the S has already slid back
   (same transition, reversed); the letters then ride down into place and
   fade in. Only present during the return so the scroll-linked exit stays
   instantaneous. */
.brand--return .logo-word,
.brand--return .logo-band--caps {
  transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms ease-out;
}

.primary-nav {
  flex: 1 1 auto;
}

.primary-nav > ul {
  display: flex;
  align-items: center;
  gap: 32px;
}

.primary-nav > ul > li {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--sl-bar-h);
  font-family: var(--sl-font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sl-color-ink-70);
  transition: color 200ms var(--sl-ease), height 280ms var(--sl-ease);
}

.site-header.stuck .nav-link {
  height: var(--sl-header-h-stuck);
}

.nav-link:hover,
.has-sub:hover > .nav-link,
.has-sub:focus-within > .nav-link {
  color: var(--sl-color-primary);
}

/* Real button CTA in the header (was a mono text-link). */
.site-header__cta {
  /* +15 % demande le 2026-09-24 : 13/24 -> 15/28, 12 -> 13.8 px. */
  padding: 15px 28px;
  font-size: 13.8px;
  letter-spacing: 0.08em;
}

/* Pill: a taupe block that slides behind the hovered/focused desktop nav
   link. Injected by app.js; inert below 1051 px where the nav is hidden. */
@media (min-width: 1051px) {
  :root { --sl-utility-h: 32px; }

  /* The overlay is a phone pattern: on desktop everything it held now lives
     in the strip (phone, language, region) and the Entreprise dropdown. */
  .site-header .menu-toggle { display: none; }

  .primary-nav > ul { position: relative; }
  .primary-nav .nav-link { position: relative; z-index: 1; }
  .nav-pill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 36px;
    width: 0;
    margin-top: -18px;
    background: rgba(148, 105, 85, 0.13);
    opacity: 0;
    transform: translateX(0);
    transition: transform 340ms var(--sl-ease), width 340ms var(--sl-ease), opacity 220ms var(--sl-ease);
    pointer-events: none;
  }
  .nav-pill.is-on { opacity: 1; }
}

.nav-link svg {
  width: 8px;
  height: 8px;
  opacity: 0.6;
  transition: transform 200ms var(--sl-ease);
}

.has-sub:hover > .nav-link svg,
.has-sub:focus-within > .nav-link svg {
  transform: rotate(180deg);
}

/* Dropdown panel: cream, charcoal mono items, sentence case. */
.sub-panel {
  position: absolute;
  top: 100%;
  left: -20px;
  min-width: 260px;
  padding: 12px 0;
  background: var(--sl-color-white);
  border: 1px solid var(--sl-color-ink-12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 180ms var(--sl-ease), transform 180ms var(--sl-ease), visibility 0s linear 180ms;
}

.has-sub:hover > .sub-panel,
.has-sub:focus-within > .sub-panel,
.has-sub.is-open > .sub-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.sub-panel a {
  display: block;
  padding: 11px 20px;
  font-family: var(--sl-font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--sl-color-ink-70);
  transition: color 160ms var(--sl-ease), background-color 160ms var(--sl-ease);
}

.sub-panel a:hover,
.sub-panel a:focus-visible {
  color: var(--sl-color-primary);
  background: rgba(51, 50, 48, 0.05);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Phone-only sticky contact bar and header utility cluster, see the
   <= 1050px block. */
.mobile-cta,
.mobile-utility {
  display: none;
}

.call-link {
  display: none;
  font-family: var(--sl-font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sl-font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sl-color-primary);
  padding: 8px 0;
}

.menu-toggle__lines {
  position: relative;
  display: block;
  width: 26px;
  height: 10px;
}

.menu-toggle__lines::before,
.menu-toggle__lines::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 220ms var(--sl-ease), width 220ms var(--sl-ease);
}

.menu-toggle__lines::before {
  top: 0;
}

.menu-toggle__lines::after {
  bottom: 0;
  width: 70%;
}

.menu-toggle:hover .menu-toggle__lines::after {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Full-screen menu overlay (charcoal)
   -------------------------------------------------------------------------- */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--sl-color-primary);
  color: var(--sl-color-white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 300ms var(--sl-ease), transform 300ms var(--sl-ease), visibility 0s linear 300ms;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* The overlay keeps the PNG (no animation there), so it carries its own
   sizing: the header's .brand rule now targets the inline svg. */
.menu-overlay .brand img {
  height: 64px;
  width: auto;
  filter: invert(1);
}

.menu-overlay__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 0;
  padding-bottom: 32px;
}

.menu-overlay__top {
  height: var(--sl-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.menu-close {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sl-font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 0;
}

.menu-close__x {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
}

.menu-close__x::before,
.menu-close__x::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: rotate(45deg);
}

.menu-close__x::after {
  transform: rotate(-45deg);
}

.menu-overlay__quick {
  display: none;
}

.menu-overlay__body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px;
  align-content: center;
  padding-block: 40px;
}

.menu-primary li + li {
  margin-top: 4px;
}

.menu-primary__row {
  display: flex;
  align-items: baseline;
  gap: 20px;
}

.menu-primary__link {
  font-family: var(--sl-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.15;
  color: var(--sl-color-white);
  transition: color 200ms var(--sl-ease), transform 300ms var(--sl-ease);
  display: inline-block;
}

.menu-primary__link:hover {
  color: var(--sl-color-taupe-light);
  transform: translateX(6px);
}

.menu-primary__link--cta {
  color: var(--sl-color-taupe-light);
}

.menu-acc-toggle {
  display: none;
}

.menu-sub {
  display: none;
}

.menu-secondary {
  align-self: center;
  padding-left: 48px;
  border-left: 1px solid var(--sl-color-paper-12);
}

.menu-secondary li + li {
  margin-top: 14px;
}

.menu-secondary a {
  font-family: var(--sl-font-mono);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
  transition: color 160ms var(--sl-ease);
}

.menu-secondary a:hover {
  color: var(--sl-color-white);
}

.menu-overlay__bottom {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 32px 48px;
  padding-top: 28px;
  border-top: 1px solid var(--sl-color-paper-12);
}

.menu-phone {
  font-family: var(--sl-font-sans);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.menu-phone:hover {
  color: var(--sl-color-taupe-light);
}

.menu-addresses {
  display: flex;
  gap: 40px;
  font-family: var(--sl-font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.menu-addresses strong {
  display: block;
  font-weight: 500;
  color: var(--sl-color-white);
}

.menu-lang {
  font-family: var(--sl-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  display: flex;
  gap: 10px;
  align-items: center;
}

.menu-lang a {
  color: rgba(255, 255, 255, 0.55);
}

.menu-lang a:hover {
  color: var(--sl-color-white);
}

.menu-lang .is-current {
  color: var(--sl-color-white);
}

.social {
  display: flex;
  gap: 18px;
  align-items: center;
}

.social a {
  display: inline-flex;
  color: rgba(255, 255, 255, 0.8);
  transition: color 160ms var(--sl-ease);
}

.social a:hover {
  color: var(--sl-color-taupe-light);
}

.social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   A. Hero: statement on cream, video inset in a frame, rotating badge
   -------------------------------------------------------------------------- */

.hero {
  padding-top: calc(var(--sl-header-h) + clamp(48px, 6vw, 88px));
}

.hero__head {
  align-items: end;
}

.hero__text {
  grid-column: 1 / 9;
}

.hero__link {
  grid-column: 10 / 13;
  justify-self: end;
  padding-bottom: 6px;
}

.hero__title {
  font-family: var(--sl-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.005em;
}

.hero__sub {
  margin-top: 24px;
  font-family: var(--sl-font-sans);
  font-weight: 300;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--sl-color-ink-70);
  max-width: 44ch;
}

.hero__media {
  position: relative;
  margin-top: clamp(40px, 4vw, 64px);
}

.hero__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e6e2dc;
}

.hero__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.16);
  will-change: transform;
}

/* Living film grain on the hero video only (the stills are clean): the
   noise tile is drawn on this transparent canvas at alpha 0.16 and blended
   with overlay by CSS, which is what the pinned scene does inside its canvas. */
.hero__grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Round rotating-text badge overlapping the frame's top-left corner. */
.badge {
  position: absolute;
  top: -40px;
  left: -28px;
  z-index: 2;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--sl-color-primary);
  color: var(--sl-color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 300ms var(--sl-ease);
}

.badge:hover {
  transform: scale(1.04);
}

.badge__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: badge-spin 40s linear infinite;
}

.badge__text {
  font-family: var(--sl-font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: currentColor;
}

.badge__glyph {
  width: 26px;
  height: 26px;
}

@keyframes badge-spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   B. Pinned scene in an inset frame with one giant sliding sentence
   -------------------------------------------------------------------------- */

.pin {
  position: relative;
  /* Hauteur de la version epinglee, gardee pour reference : la variante B
     ci-dessous (.pin--flow) est celle qui est active sur l'accueil. */
  height: 220vh;
  margin-top: var(--sl-section-pad);
}

.pin__sticky {
  position: sticky;
  top: var(--sl-header-h-stuck);
  height: calc(100vh - 128px);
  padding-inline: var(--sl-margin);
  max-width: calc(var(--sl-max) + var(--sl-margin) * 2);
  margin-inline: auto;
}

.pin__frame {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #e6e2dc;
}

/* Variante B (25 septembre) : la scene ne s'epingle plus. Elle traverse le
   viewport en scrubant, donc la barre de defilement n'arrete jamais d'avancer
   et la sensation de longueur disparait, sans perdre une seule des 107 images.
   Le premier texte produit passe de 3,4 ecrans a 2,1. */
.pin--flow {
  /* 78vh au depart. Plus la section est haute, plus elle met de defilement a
     traverser l'ecran, donc plus la sequence a de course. */
  height: 88vh;
  margin-block: var(--sl-section-pad);
  padding-inline: var(--sl-margin);
  max-width: calc(var(--sl-max) + var(--sl-margin) * 2);
  margin-inline: auto;
}

.pin--flow .pin__sticky {
  position: static;
  top: auto;
  height: 100%;
  padding-inline: 0;
  max-width: none;
  margin-inline: 0;
}

@media (max-width: 720px) {
  /* Telephone (proprio 2026-10-08 : « on voit une ligne passer et on ne comprend
     pas »). La video est en 16:9 ; un cadre portrait n'en gardait qu'environ 30 %
     de la largeur, une seule lame. */
  /* .pin.pin--flow : plus fort que « .pin { height: 280vh } » plus bas dans ce
     fichier (bloc mobile), qui ecrasait cette regle : section de 2 363 px pour
     un cadre de 269 px, d'ou le grand vide et les phrases hors de l'ecran. */
  .pin.pin--flow { height: auto; }
  .pin.pin--flow .pin__sticky { height: auto; }
  .pin.pin--flow .pin__frame { height: auto; aspect-ratio: 1 / 1; } /* carre : plus haut que 4:3 (proprio), ~56 % de la largeur de la video */
  .pin.pin--flow .pin__l { font-size: clamp(32px, 9vw, 56px); }
}

.pin__poster,
.pin__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Soft radial vignette behind the first line only: the open sky is too pale
   for white type. Opacity driven by JS off the line's own reveal. */
.pin__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(20, 20, 18, 0.34), rgba(20, 20, 18, 0) 100%);
  opacity: 0;
  pointer-events: none;
}

/* Cream wash that dissolves the black frame into the page at the very end of
   the pin, so the section below arrives on cream instead of a hard cut from
   black. Opacity driven by JS. */
.pin__dissolve {
  position: absolute;
  inset: 0;
  background: var(--sl-color-cream);
  opacity: 0;
  pointer-events: none;
}

/* Two lines in relay: "Ouvrez pour le soleil." over the open sky, then
   "Fermez pour la pluie." landing on the blackout. Blur-in, opacity and a
   slight rise are all set by JS off the eased progress; the second line's
   colour crosses from white to primary as the frame dissolves. */
.pin__l {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  font-family: var(--sl-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 8.4vw, 150px);
  line-height: 1;
  white-space: nowrap;
  color: var(--sl-color-white);
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, opacity, filter;
  pointer-events: none;
  text-shadow: 0 2px 36px rgba(20, 20, 18, 0.32), 0 0 2px rgba(20, 20, 18, 0.18);
}

/* --------------------------------------------------------------------------
   C. Intro: text left (cols 1-5), 1/3 slider right (cols 6-12), lower
   -------------------------------------------------------------------------- */

.intro__text {
  grid-column: 1 / 6;
  padding-right: clamp(0px, 3vw, 48px);
}

.intro__slider {
  grid-column: 6 / 13;
  margin-top: 120px;
}

.slider__frame {
  aspect-ratio: 4 / 5;
}

/* Desktop: the text column stays in view while the taller slider scrolls past. */
@media (min-width: 1051px) {
  .intro .grid {
    align-items: start;
  }
  .intro__text {
    position: sticky;
    top: 108px;
  }
}

@media (min-width: 1051px) {
  .slider__frame,
  .slider__bar {
    max-width: 560px;
    margin-left: auto;
  }
}

.slider__track {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform 700ms var(--sl-ease);
  will-change: transform;
}

.slider__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}

.slider__bar {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 18px;
  font-family: var(--sl-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.slider__progress {
  display: flex;
  gap: 12px;
}

.slider__progress span {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--sl-color-ink-20);
  transition: background-color 300ms var(--sl-ease), height 300ms var(--sl-ease);
}

.slider__progress span.is-active {
  background: var(--sl-color-primary);
  height: 2px;
}

.slider__count {
  color: var(--sl-color-ink-55);
  min-width: 3ch;
}

.slider__nav {
  margin-left: auto;
  display: flex;
  gap: 18px;
}

.slider__btn {
  font-family: var(--sl-font-mono);
  font-size: 15px;
  color: var(--sl-color-ink-55);
  padding: 4px 2px;
  transition: color 160ms var(--sl-ease);
}

.slider__btn:hover {
  color: var(--sl-color-primary);
}

/* --------------------------------------------------------------------------
   D. Three editorial rows, each with its own asymmetry
   -------------------------------------------------------------------------- */

.rows {
  padding-top: 0;
}

.row + .row {
  margin-top: clamp(112px, 12vw, 192px);
}

/* Classique: photo wide left (1-8), text right and lower (9-12) */
.row--classique .row__media {
  grid-column: 1 / 9;
}

.row--classique .row__text {
  grid-column: 9 / 13;
  align-self: end;
  padding-left: clamp(0px, 2vw, 32px);
  margin-bottom: -56px;
}

/* Lames intégrées: heading floats just above the photo's top edge, starting
   two columns left of it (heading 3-11, photo 5-12), text left and narrow
   (1-3) sitting on the photo's bottom line */
.row--integrees {
  grid-template-rows: auto auto;
}

.row__float {
  grid-column: 3 / 12;
  grid-row: 1;
  margin-bottom: 20px;
}

.row--integrees .row__media {
  grid-column: 5 / 13;
  grid-row: 2;
}

/* Shift the parallax zoom's anchor left ~45%: the JS-applied scale(1.28)
   grows outward from this point, so anchoring further left keeps more of
   the cabin wall in frame and lets the zoom eat into the right (seating/
   fire pit) instead. object-position has no effect here since the source
   crop already matches the frame's 16:10 ratio exactly (no object-fit
   cropping to reposition) — the overscan from the scroll parallax is what
   needed shifting. */
.row--integrees .row__media img {
  transform-origin: 5% 50%;
}

.row--integrees .row__text {
  grid-column: 1 / 4;
  grid-row: 2;
  align-self: end;
  padding-bottom: 8px;
}

/* Accessoires: heading + lede, 6-item strip, link */
.row__head {
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.row__head .h {
  grid-column: 1 / 7;
}

.row__head-lede {
  grid-column: 8 / 12;
  margin-top: 0;
  padding-bottom: 6px;
}

.strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.card {
  display: block;
  color: inherit;
}

.card .frame {
  margin-bottom: 12px;
}

.card__name {
  display: block;
  font-family: var(--sl-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sl-color-ink-70);
  transition: color 160ms var(--sl-ease);
}

.card:hover .card__name {
  color: var(--sl-color-secondary);
}

.card .frame img {
  transition: filter 300ms var(--sl-ease);
}

.card:hover .frame img {
  filter: brightness(1.04);
}

/* Catalogue index, desktop and tablets in landscape (the strip below takes
   over on phones): six hairline rows — mono number, the accessory's name in
   the same Cormorant italic the menu overlay uses, an arrow that slides in —
   facing a 4:5 preview frame that crossfades to the row under the cursor or
   the keyboard focus. The first accessory is active by default so the frame
   is never empty. */
.accindex {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sl-gap);
  align-items: center;
}

.accindex__list {
  grid-column: 1 / 8;
}

.accindex__row {
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 2.4vw, 40px);
  padding: clamp(16px, 1.8vw, 24px) 0;
  border-top: 1px solid var(--sl-color-ink-12);
}

.accindex__list li:last-child .accindex__row {
  border-bottom: 1px solid var(--sl-color-ink-12);
}

.accindex__name {
  display: inline-block;
  font-family: var(--sl-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.15;
  color: var(--sl-color-primary);
  transition: color 220ms var(--sl-ease), transform 320ms var(--sl-ease);
}

.accindex__arrow {
  margin-left: auto;
  font-family: var(--sl-font-mono);
  font-size: 15px;
  color: var(--sl-color-secondary);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 220ms var(--sl-ease), transform 320ms var(--sl-ease);
}

.accindex__row:hover .accindex__name,
.accindex__row.is-active .accindex__name {
  color: var(--sl-color-secondary);
  transform: translateX(8px);
}

.accindex__row:hover .accindex__arrow,
.accindex__row.is-active .accindex__arrow {
  opacity: 1;
  transform: translateX(0);
}

.accindex__preview {
  grid-column: 9 / 13;
}

/* Stacked crossfade inside the frame. Specificity beats .frame--still img
   (which only means "no scroll parallax" — app.js leaves it alone), so the
   incoming photo settles from a faint zoom instead of the site-wide drift. */
.accindex .accindex__frame img {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 560ms var(--sl-ease), transform 900ms var(--sl-ease);
}

.accindex .accindex__frame img.is-active {
  opacity: 1;
  transform: scale(1);
}

/* The melt engine's canvas covers the stacked fallback imgs (opaque, no
   alpha); if WebGL fails the imgs simply keep crossfading as before. */
.accindex__frame .morph-slider-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 1050px) {
  .accindex {
    display: none;
  }
}

@media (min-width: 1051px) {
  .row--accessoires .strip,
  .row--accessoires .strip__hint {
    display: none;
  }
}

/* Swipe hint under the accessories strip, phones and tablets (the strip is a
   horizontal snap scroller there): mono counter, "Glissez" with an arrow that
   nudges, and a hairline track whose thumb mirrors the strip's scroll
   position. The label fades once the visitor has swiped; the track stays. */
.strip__hint {
  display: none;
}

@media (max-width: 1050px) {
  .strip__hint {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
  }

  .strip__count {
    font-family: var(--sl-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--sl-color-ink-55);
    white-space: nowrap;
    min-width: 7ch;
  }

  .strip__label {
    font-family: var(--sl-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sl-color-ink-55);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity 400ms var(--sl-ease);
  }

  .strip__label span {
    display: inline-block;
    animation: strip-nudge 1.6s var(--sl-ease) infinite;
  }

  .strip--swiped .strip__label {
    opacity: 0;
  }

  .strip__track {
    position: relative;
    flex: 1 1 auto;
    height: 1px;
    background: var(--sl-color-ink-20);
    overflow: hidden;
  }

  .strip__thumb {
    position: absolute;
    top: -1px;
    left: 0;
    width: 30%;
    height: 3px;
    background: var(--sl-color-primary);
    will-change: transform;
  }

  @keyframes strip-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
  }
}

.row--accessoires .links {
  margin-top: clamp(32px, 4vw, 48px);
}

/* --------------------------------------------------------------------------
   E. Sur mesure: two photos of different heights, bottoms aligned
   -------------------------------------------------------------------------- */

.surmesure__head {
  margin-bottom: clamp(48px, 6vw, 88px);
}

.surmesure__intro {
  grid-column: 1 / 8;
}

.surmesure__grid {
  align-items: end;
  row-gap: 32px;
  /* Reserves real space for the shifted .surmesure__wide column below (see
     measureSurMesureShift in app.js) so the section's own box grows instead
     of the next section overlapping the visually-pushed-down content. */
  padding-bottom: var(--sm-shift, 0px);
}

.surmesure__tall {
  grid-column: 1 / 6;
  grid-row: 1;
  align-self: end;
}

.surmesure__wide {
  grid-column: 7 / 13;
  grid-row: 1 / 3;
  display: contents;
}

.surmesure__wide .frame {
  grid-column: 7 / 13;
  grid-row: 1;
  align-self: end;
  transform: translateY(var(--sm-shift, 0px));
}

.surmesure__wide .lede {
  grid-column: 7 / 12;
  grid-row: 2;
  margin-top: 8px;
  transform: translateY(var(--sm-shift, 0px));
}

.surmesure__wide .links {
  grid-column: 7 / 12;
  grid-row: 3;
  margin-top: 0;
  transform: translateY(var(--sm-shift, 0px));
}

/* --------------------------------------------------------------------------
   F. Réalisations: Résidentiel / Commercial split, then two featured
   -------------------------------------------------------------------------- */

.projets__split {
  row-gap: 64px;
}

.projets__col {
  grid-column: 1 / 6;
}

.projets__col--offset {
  grid-column: 7 / 12;
  margin-top: 96px;
}

.projets__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.projets__line {
  margin-top: 20px;
  font-weight: 300;
  color: var(--sl-color-ink-70);
}

.projets__featured {
  margin-top: clamp(96px, 10vw, 144px);
  row-gap: 48px;
}

.projets__feat {
  grid-column: 1 / 6;
}

.projets__feat + .projets__feat {
  grid-column: 7 / 12;
}

.projets__feat .frame {
  margin-bottom: 24px;
}

.projets__feat .lede {
  margin-top: 16px;
}

.projets__feat .links {
  margin-top: 20px;
}

/* --------------------------------------------------------------------------
   G. Avis: pull-quote, then a light 3 + 2 grid with thin top rules
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   G. Avis: Scroll Stack. Head row, then sticky cards that pile up; the
   covered ones recede (JS writes transform/opacity/filter). The last card
   is the charcoal CTA.
   -------------------------------------------------------------------------- */

.avis__head {
  row-gap: 24px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.avis__intro {
  grid-column: 1 / 7;
}

.avis__lede {
  grid-column: 8 / 13;
  align-self: end;
}

.avis-stack {
  position: relative;
  padding-bottom: 12vh;
}

.avis-stack__item {
  position: sticky;
  top: calc(96px + var(--i) * 18px);
}

.avis-stack__gap {
  height: 42vh;
}

.avis-card {
  display: flex;
  flex-direction: column;
  max-width: 760px;
  min-height: 300px;
  margin-inline: auto;
  padding: 40px 48px 36px;
  background: var(--sl-color-cream);
  border: 1px solid var(--sl-color-ink-12);
  box-shadow: 0 30px 60px -36px rgba(51, 50, 48, 0.5);
  transform-origin: top center;
  will-change: transform, opacity;
  transition: transform 120ms linear, opacity 120ms linear, filter 120ms linear;
}

.avis-card .stars {
  display: flex;
  margin-bottom: 18px;
}

.avis-card__text {
  font-family: var(--sl-font-serif);
  font-size: 24px;
  line-height: 1.35;
  color: var(--sl-color-primary);
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.avis-card .review-meta {
  margin-top: auto;
  padding-top: 20px;
}

.avis-card--cta {
  background: var(--sl-color-primary);
  border-color: var(--sl-color-primary);
  color: var(--sl-color-white);
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
}

.avis-card--cta .eyebrow {
  color: var(--sl-color-taupe-light);
  margin: 0;
}

.avis-card--cta__title {
  font-family: var(--sl-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.15;
  margin: 0;
  max-width: 16ch;
}

.avis-card--cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.avis-card--cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--sl-color-cream);
  color: var(--sl-color-primary);
  font-family: var(--sl-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--sl-color-cream);
  transition: background-color 200ms var(--sl-ease), color 200ms var(--sl-ease), border-color 200ms var(--sl-ease);
}

.avis-card--cta__btn:hover {
  background: transparent;
  color: var(--sl-color-white);
}

.avis-card--cta__btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Google in outline, the quote in solid: the quote is what converts. */
.avis-card--cta__btn--ghost {
  background: transparent;
  color: var(--sl-color-white);
  border-color: rgba(255, 255, 255, 0.4);
}

.avis-card--cta__btn--ghost:hover {
  background: var(--sl-color-cream);
  color: var(--sl-color-primary);
  border-color: var(--sl-color-cream);
}

.stars {
  display: inline-flex;
  gap: 3px;
  color: var(--sl-color-secondary);
}

.stars svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.review-meta {
  margin-top: 20px;
}

.review-meta .stars {
  display: flex;
  margin-bottom: 12px;
}

.review-meta__name {
  display: block;
  font-family: var(--sl-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.review-meta__where {
  display: block;
  margin-top: 4px;
  font-family: var(--sl-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--sl-color-ink-55);
}

/* --------------------------------------------------------------------------
   H. Salles de montre
   -------------------------------------------------------------------------- */

.salles__head {
  margin-bottom: clamp(48px, 6vw, 88px);
}

.salles__intro {
  grid-column: 1 / 8;
}

.salles__grid {
  align-items: end;
  row-gap: 48px;
}

.showroom {
  grid-column: 1 / 7;
  align-self: start;
}

.showroom--offset {
  grid-column: 7 / 13;
}

.showroom .frame {
  margin-bottom: 24px;
}

.showroom__title {
  font-family: var(--sl-font-sans);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.25;
  margin-bottom: 10px;
}

.showroom__address {
  font-weight: 300;
  color: var(--sl-color-ink-70);
  line-height: 1.6;
}

.showroom__phone {
  display: inline-block;
  margin-top: 8px;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.02em;
  transition: color 160ms var(--sl-ease);
}

.showroom__phone:hover {
  color: var(--sl-color-secondary);
}

.showroom .links {
  margin-top: 18px;
}

.links--row {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* --------------------------------------------------------------------------
   I. Contact band (charcoal) + quote form on a cream card
   -------------------------------------------------------------------------- */

.contact {
  background: var(--sl-color-white);
  color: var(--sl-color-primary);
  padding-block: clamp(88px, 10vw, 144px);
}

/* Two panels sharing an edge: the proof on charcoal, the form on cream.
   Same composition as the avant/apres page, this page's own type. */
.cta-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  border: 1px solid var(--sl-color-ink-12);
}

.cta-split__panel {
  padding: clamp(32px, 4vw, 56px);
}

.cta-split__panel--proof {
  background: var(--sl-color-primary);
  color: var(--sl-color-white);
}

/* The panel keeps its full height so the two blocks stay flush; the proof
   itself is what pins, and it travels inside the panel while the form is
   being filled. Sticky needs the panel taller than this box, which it is. */
@media (min-width: 1051px) {
  .cta-split__sticky {
    position: sticky;
    top: calc(var(--sl-header-h-stuck) + 32px);
  }
}

.cta-split__panel--proof .tally {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.cta-split__panel--form {
  background: var(--sl-color-cream);
}

.cta-split .eyebrow {
  color: var(--sl-color-secondary);
}

.cta-split .lede {
  color: var(--sl-color-ink-70);
  margin-bottom: clamp(28px, 3vw, 40px);
}

.quote {
  align-items: start;
  row-gap: 40px;
}

.quote .eyebrow {
  color: var(--sl-color-taupe-light);
}

.quote .lede {
  color: var(--sl-color-paper-80);
}

/* The two counters: futura 700 like every other figure on this page, mono
   caps for the labels (same recipe as .next-card__num), never the thin
   light-weight numerals of the avant/apres page. */
.tally {
  margin: 44px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--sl-color-paper-12);
}

.tally__item {
  margin: 0;
}

/* Stacked, with the short rule between them, as on the avant/apres page. */
.tally__item + .tally__item {
  margin-top: 30px;
}

.tally__item + .tally__item::before {
  content: "";
  display: block;
  width: 120px;
  height: 1px;
  margin-bottom: 30px;
  background: var(--sl-color-taupe-light);
  opacity: 0.55;
}

.tally__n {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--sl-font-sans);
  font-weight: 700;
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--sl-color-white);
}

.tally__plus {
  font-weight: 400;
  font-size: 0.45em;
  color: var(--sl-color-taupe-light);
}

.tally__label {
  margin: 10px 0 0;
  font-family: var(--sl-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sl-color-paper-60);
}

.quote__body {
  margin-top: 28px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--sl-color-paper-80);
}

/* Pull quote: the serif italic this page already uses for its eyebrows. */
.pull {
  margin: 32px 0 0;
  padding-left: 20px;
  border-left: 1px solid var(--sl-color-taupe-light);
  font-family: var(--sl-font-serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.3;
  color: var(--sl-color-taupe-light);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  font-family: var(--sl-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sl-color-ink-55);
  margin-bottom: 8px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sl-font-sans);
  font-size: 15px;
  color: var(--sl-color-primary);
  background: var(--sl-color-white);
  border: 1px solid var(--sl-color-ink-20);
  border-radius: 0;
  padding: 12px 14px;
  outline: none;
  transition: border-color 160ms var(--sl-ease);
  appearance: none;
  -webkit-appearance: none;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23333230' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(51, 50, 48, 0.4);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--sl-color-secondary);
}

.form-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
}

.form-note {
  font-family: var(--sl-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--sl-color-ink-55);
}

.form-confirm {
  grid-column: 1 / -1;
  padding: 18px 20px;
  background: var(--sl-color-white);
  border-left: 2px solid var(--sl-color-secondary);
}

.form-confirm[hidden] {
  display: none;
}

.form-confirm .form-note {
  display: block;
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   J. Footer (charcoal, content parity with the live footer)
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--sl-color-primary);
  color: var(--sl-color-white);
  border-top: 1px solid var(--sl-color-paper-08);
  padding-top: 64px;
  padding-bottom: 40px;
}

.site-footer__logo img {
  height: 64px;
  width: auto;
  filter: invert(1);
}

.site-footer__rule {
  height: 1px;
  background: var(--sl-color-paper-12);
  margin-block: 36px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
}

.site-footer__phone-label {
  font-family: var(--sl-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sl-color-paper-60);
  margin-bottom: 10px;
}

.site-footer__phone {
  display: inline-block;
  font-family: var(--sl-font-sans);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: color 160ms var(--sl-ease);
}

.site-footer__phone:hover {
  color: var(--sl-color-taupe-light);
}

.site-footer__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 20px;
  font-size: 14px;
}

.site-footer__quick span {
  opacity: 0.45;
}

.site-footer__quick a:hover {
  color: var(--sl-color-taupe-light);
}

.site-footer__col h4 {
  font-family: var(--sl-font-sans);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sl-color-paper-60);
  margin-bottom: 18px;
}

.site-footer__col li + li {
  margin-top: 10px;
}

.site-footer__col a {
  font-size: 14.5px;
  font-weight: 300;
  transition: color 160ms var(--sl-ease);
}

.site-footer__col a:hover {
  color: var(--sl-color-taupe-light);
}

.site-footer__bottom {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 24px 40px;
}

.site-footer__selectors {
  display: flex;
  gap: 12px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-family: var(--sl-font-sans);
  font-size: 13.5px;
  transition: border-color 160ms var(--sl-ease);
}

.pill svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

a.pill:hover {
  border-color: rgba(255, 255, 255, 0.75);
}

.site-footer__fine {
  font-family: var(--sl-font-mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--sl-color-paper-60);
  text-align: right;
}

.site-footer__partner {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}

.site-footer__partner {
  align-items: center;
}

/* Le logo Financeit, repris tel quel du pied de page en ligne. Il etait
   ecrit en toutes lettres dans la refonte, et un <b> blanc sur charbon se
   fondait dans le fond. Le trace n'a pas de fill : il herite donc de la
   couleur du texte, qu'on met a 80 % de blanc pour qu'il ne crie pas plus
   fort que le reste de la ligne fine. */
.site-footer__partner-logo {
  height: 15px;
  width: auto;
  fill: currentColor;
  color: var(--sl-color-paper-80);
  transition: color 160ms var(--sl-ease);
}

.site-footer__partner a:hover .site-footer__partner-logo {
  color: var(--sl-color-white);
}

.site-footer__partner b {
  font-family: var(--sl-font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--sl-color-white);
}

/* ==========================================================================
   Inner pages: Soumission gratuite and Merci (soumission.html, merci.html,
   built by build-pages.py from index.html's chrome)
   ========================================================================== */

/* ---- Page hero: statement left, portrait right --------------------------- */
.page-hero {
  padding-top: calc(var(--sl-header-h) + clamp(48px, 6vw, 88px));
  padding-bottom: clamp(40px, 4vw, 56px);
}

/* The form section follows the promises strip closely; the strip is its lead-in, not a separate act */
.page--soumission .quote {
  padding-top: clamp(56px, 6vw, 80px);
}

.page-hero__grid {
  align-items: center;
  row-gap: 48px;
}

.page-hero__text {
  grid-column: 1 / 7;
}

.page-hero__media {
  grid-column: 8 / 13;
}

.h--display {
  font-family: var(--sl-font-sans);
  font-weight: 700;
  font-size: clamp(36px, 4.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.h--display em {
  font-family: var(--sl-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.12em;
  letter-spacing: 0;
}

.page-hero .lede {
  margin-top: 24px;
  max-width: 44ch;
}

/* Four promises: numbered, on a rule, no icons */
.promises {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--sl-color-ink-12);
}

.promises li {
  display: flex;
  gap: 14px;
  align-items: baseline;
}

.promises__t {
  font-family: var(--sl-font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.25;
}

/* ---- Form section ------------------------------------------------------ */
.quote__grid {
  align-items: start;
  row-gap: 48px;
}

.quote__aside {
  grid-column: 1 / 5;
  position: sticky;
  top: calc(var(--sl-header-h-stuck) + 40px);
  padding-top: clamp(24px, 4vw, 48px);
}

.quote__form {
  grid-column: 6 / 13;
  min-width: 0;
  padding: clamp(24px, 4vw, 48px);
  background: var(--sl-color-cream);
}

.steps {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
}

.steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--sl-color-ink-70);
}

.steps strong {
  font-weight: 500;
  color: var(--sl-color-primary);
}

.steps__n {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--sl-color-ink-20);
  font-family: var(--sl-font-mono);
  font-size: 11px;
  color: var(--sl-color-primary);
  margin-top: 1px;
}

.steps__n--done {
  background: var(--sl-color-primary);
  border-color: var(--sl-color-primary);
  color: var(--sl-color-white);
}

.quote__phone {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--sl-color-ink-12);
}

/* Promises list in the aside: one per line, icon slot on the left (placeholder tick until icons land) */
.vows {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.vows li {
  display: flex;
  align-items: center;
  gap: 16px;
}

.vows__i {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  color: var(--sl-color-secondary);
}

/* Phosphor duotone (MIT): the tint layer is the icon's own 20 % opacity path, so one color drives both */
.vows__svg {
  width: 32px;
  height: 32px;
  display: block;
}

.vows__t {
  font-family: var(--sl-font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.2;
  color: var(--sl-color-primary);
}

.quote__tel {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--sl-font-mono);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--sl-color-primary);
  transition: color 160ms var(--sl-ease);
}

.quote__tel:hover {
  color: var(--sl-color-secondary);
}

.quote__hours {
  margin-top: 6px;
  font-size: 14px;
  color: var(--sl-color-ink-55);
}

/* Fieldsets */
.qf {
  border: 0;
  padding: 0;
  margin: 0 0 clamp(40px, 5vw, 64px);
  min-width: 0;
}

.qf__legend {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 0;
  margin-bottom: 28px;
  font-family: var(--sl-font-sans);
  font-size: 22px;
  font-weight: 500;
}

.qf__legend i {
  font-style: normal;
  font-weight: 300;
  color: var(--sl-color-ink-55);
}

.qf__num {
  font-family: var(--sl-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--sl-color-secondary);
}

.qf__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.qf__row + .qf__row {
  margin-top: 16px;
}

.qf__hint {
  margin: -12px 0 20px;
  font-size: 14px;
  color: var(--sl-color-ink-55);
}

/* Boxed fields. The label sits inside the box as the prompt, then floats to the
   top corner (small mono) once the field is focused or filled, so it never vanishes */
.qfield {
  position: relative;
  display: block;
  min-width: 0;
  background: var(--sl-color-white);
  border: 1px solid var(--sl-color-ink-20);
  transition: border-color 200ms var(--sl-ease), box-shadow 200ms var(--sl-ease);
}

.qfield:hover {
  border-color: var(--sl-color-ink-55);
}

.qfield:focus-within {
  border-color: var(--sl-color-primary);
  box-shadow: inset 0 0 0 1px var(--sl-color-primary);
}

.qfield__label {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--sl-font-sans);
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--sl-color-ink-55);
  transition: top 180ms var(--sl-ease), transform 180ms var(--sl-ease), font-size 180ms var(--sl-ease), letter-spacing 180ms var(--sl-ease), color 180ms var(--sl-ease);
}

.qfield__label b {
  font-weight: 400;
  color: var(--sl-color-secondary);
}

.qfield:focus-within .qfield__label,
.qfield:has(input:not(:placeholder-shown)) .qfield__label,
.qfield:has(select option:checked:not([value=""])) .qfield__label,
.qfield--area .qfield__label {
  top: 11px;
  transform: none;
  font-family: var(--sl-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sl-color-ink-70);
}

.qfield__label i {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--sl-color-ink-55);
}

.qfield__input {
  display: block;
  width: 100%;
  height: 72px;
  padding: 26px 18px 10px;
  font-family: var(--sl-font-sans);
  font-size: 17px;
  color: var(--sl-color-primary);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
}

/* Province dropdown: same box, chevron on the right */
.qfield--select .qfield__input {
  padding-right: 52px;
  cursor: pointer;
}

.qfield__chevron {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 1.5px solid var(--sl-color-primary);
  border-bottom: 1.5px solid var(--sl-color-primary);
  transform: rotate(45deg);
  pointer-events: none;
}

.qfield__input::placeholder {
  color: var(--sl-color-ink-55);
  font-weight: 300;
}

.qfield--area {
  margin-top: 24px;
}

/* The free-text box is a real box: a lone underline 140 px below its label read as decoration */
.qfield--area .qfield__input {
  height: auto;
  resize: vertical;
  min-height: 190px;
  line-height: 1.6;
  padding: 36px 18px 14px;
}

.qfield--area .qfield__input::placeholder {
  color: var(--sl-color-ink-70);
  font-weight: 300;
}

/* Segmented control (province), same pill idiom as the region toggle */
.seg {
  position: relative;
  display: inline-flex;
  border: 1px solid var(--sl-color-ink-20);
  padding: 2px;
  margin: 6px 0 2px;
}

.seg__opt {
  position: relative;
  cursor: pointer;
}

.seg__opt input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.seg__opt span {
  display: block;
  padding: 10px 20px;
  font-family: var(--sl-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sl-color-ink-70);
  transition: background-color 200ms var(--sl-ease), color 200ms var(--sl-ease);
}

.seg__opt input:checked + span {
  background: var(--sl-color-primary);
  color: var(--sl-color-white);
}

.seg__opt input:focus-visible + span {
  outline: 2px solid var(--sl-color-secondary);
  outline-offset: 2px;
}

/* Choice cards (project type) */
.choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.choice__card {
  position: relative;
  display: block;
  cursor: pointer;
}

.choice__card input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.choice__body {
  position: relative;
  display: block;
  padding: 22px 24px;
  background: var(--sl-color-paper-60);
  border: 1px solid var(--sl-color-ink-20);
  transition: border-color 200ms var(--sl-ease), background-color 200ms var(--sl-ease), box-shadow 200ms var(--sl-ease);
}

/* Visible radio: a ring in the corner so the card reads as a choice, not a heading */
.choice__body::before {
  content: "";
  position: absolute;
  top: 22px;
  right: 22px;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--sl-color-ink-20);
  border-radius: 50%;
  background: var(--sl-color-white);
  transition: border-color 200ms var(--sl-ease), box-shadow 200ms var(--sl-ease);
}

.choice__card:hover .choice__body::before {
  border-color: var(--sl-color-primary);
}

.choice__card input:checked + .choice__body::before {
  border-color: var(--sl-color-secondary);
  box-shadow: inset 0 0 0 5px var(--sl-color-white);
  background: var(--sl-color-secondary);
}

.choice__title {
  display: block;
  padding-right: 36px;
  font-family: var(--sl-font-serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.1;
}

.choice__desc {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--sl-color-ink-55);
}

.choice__card:hover .choice__body {
  border-color: var(--sl-color-primary);
}

.choice__card input:checked + .choice__body {
  border-color: var(--sl-color-primary);
  box-shadow: inset 0 0 0 1px var(--sl-color-primary);
  background: var(--sl-color-white);
}

.choice__card input:focus-visible + .choice__body {
  outline: 2px solid var(--sl-color-secondary);
  outline-offset: 2px;
}

/* Drop zone */
.field__hint {
  margin: -2px 0 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sl-color-ink-55);
}

.drop {
  position: relative;
  border: 1px dashed var(--sl-color-ink-20);
  background: var(--sl-color-paper-60);
  padding: 36px 24px;
  text-align: center;
  transition: border-color 200ms var(--sl-ease), background-color 200ms var(--sl-ease);
}

.drop.is-over {
  border-color: var(--sl-color-primary);
  background: var(--sl-color-white);
}

.drop__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.drop__label {
  display: block;
  pointer-events: none;
}

/* Inside a .field, the generic label rule would turn the drop zone's own
   label into mono uppercase 11 px. It keeps its own voice. */
.field .drop__label {
  font-family: var(--sl-font-sans);
  font-size: 17px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--sl-color-primary);
  margin-bottom: 0;
}

.drop__title {
  display: block;
  font-family: var(--sl-font-serif);
  font-style: italic;
  font-size: 24px;
}

.drop__or {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--sl-color-ink-55);
}

.drop__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.drop__list:not(:empty) {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--sl-color-ink-12);
}

.drop__list li {
  font-family: var(--sl-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sl-color-primary);
}

.drop__list li + li {
  margin-top: 6px;
}

.qf__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 32px;
}

.btn--lg {
  padding: 20px 36px;
  font-size: 13px;
}

.qf__legal {
  margin: 0;
  max-width: 34ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sl-color-ink-55);
}

.qf__legal b {
  font-weight: 500;
  color: var(--sl-color-secondary);
}

/* ---- Reviews band (soumission): two rows gliding in opposite directions --- */
.avis-flow__head {
  row-gap: 24px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.avis-flow__intro {
  grid-column: 1 / 7;
}

.avis-flow__lede {
  grid-column: 8 / 13;
  align-self: end;
}

.avis-flow__band {
  position: relative;
  overflow: hidden;
  padding-block: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.avis-flow__row {
  display: flex;
  width: max-content;
  animation: avis-flow-left var(--dur, 70s) linear infinite;
}

.avis-flow__row--reverse {
  margin-top: 24px;
  animation-name: avis-flow-right;
}

/* Each set = the six reviews + its trailing gap, so one set is exactly 50 %
   of the row and the -50 % loop lands seamlessly on the copy. */
.avis-flow__set {
  display: flex;
  flex: 0 0 auto;
  gap: 24px;
  padding-right: 24px;
}

.avis-flow__band:hover .avis-flow__row {
  animation-play-state: paused;
}

.avis-flow .avis-card {
  width: 400px;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 32px 34px 28px;
  background: var(--sl-color-white);
  box-shadow: none;
  transform: none;
  transition: none;
  will-change: auto;
}

.avis-flow .avis-card__text {
  font-family: var(--sl-font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-line-clamp: 9;
}

.avis-flow__link {
  margin-top: 48px;
}

@keyframes avis-flow-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes avis-flow-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .avis-flow__row {
    animation: none;
  }

  .avis-flow__band {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

@media (max-width: 1050px) {
  .avis-flow__intro,
  .avis-flow__lede {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .avis-flow .avis-card {
    width: 300px;
    padding: 24px 22px 22px;
  }

  .avis-flow .avis-card__text {
    font-size: 15px;
    -webkit-line-clamp: 12;
  }

  .avis-flow__set {
    gap: 16px;
    padding-right: 16px;
  }

  .avis-flow__row--reverse {
    margin-top: 16px;
  }
}

/* ---- FAQ ---------------------------------------------------------------- */
.faq__grid {
  align-items: start;
  row-gap: 40px;
}

.faq__intro {
  grid-column: 1 / 5;
  position: sticky;
  top: calc(var(--sl-header-h-stuck) + 40px);
}

.faq__list {
  grid-column: 5 / 13;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sl-color-ink-12);
}

.faq__item {
  border-bottom: 1px solid var(--sl-color-ink-12);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 22px 0;
  text-align: left;
  font-family: var(--sl-font-serif);
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.3;
  color: var(--sl-color-primary);
  transition: color 160ms var(--sl-ease);
}

.faq__q:hover {
  color: var(--sl-color-secondary);
}

.faq__q svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  transition: transform 220ms var(--sl-ease);
}

.faq__q[aria-expanded="true"] svg {
  transform: rotate(45deg);
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 360ms var(--sl-ease);
}

.faq__a-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 220ms var(--sl-ease), transform 320ms var(--sl-ease);
}

.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}

.faq__item.is-open .faq__a-inner {
  opacity: 1;
  transform: none;
  transition-delay: 80ms;
}

.faq__a-inner p {
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--sl-color-ink-70);
}

.faq__a-inner p:first-child {
  padding-top: 2px;
}

.faq__a-inner p:last-child {
  padding-bottom: 26px;
}

.faq__a-inner p + p {
  margin-top: 12px;
}

/* ---- Merci: one full-height screen, nothing after it but the footer --- */
.page-hero--merci {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-bottom: 0;
}

/* The photo is the right 42 % of the screen, top to bottom, flush right */
.page-hero--merci .page-hero__media {
  position: absolute;
  inset: 0 0 0 auto;
  width: 42vw;
  aspect-ratio: auto;
}

.merci__visite {
  margin-top: 18px;
}

.merci__phone {
  margin-top: 32px;
  font-size: 15.5px;
  color: var(--sl-color-ink-70);
}

/* The form page's own submit is the CTA: no sticky bar duplicating it. */
.page--soumission ~ .mobile-cta,
body:has(.page--soumission) .mobile-cta {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1240px) {
  .primary-nav > ul {
    gap: 24px;
  }

  .site-header__inner {
    gap: 32px;
  }

  .row--classique .row__text {
    margin-bottom: -32px;
  }
}

@media (max-width: 1050px) {
  .primary-nav,
  .site-header__quote,
  .utility-bar {
    display: none;
  }

  /* The nav is hidden, but APPELER and MENU still share the bar: the logo
     comes down to 60 px (125 px wide) and stays there when .stuck lands. */
  .brand__logo {
    height: 60px;
    width: 125px;
  }

  .site-header .brand {
    width: 125px;
  }

  /* The number lives in the bottom bar on phones; the bar itself holds
     the logo, the region + language cluster, and the toggle. */
  .site-header__inner {
    gap: 14px;
  }

  .site-header__actions {
    gap: 18px;
    margin-left: 0;
  }

  .mobile-utility {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    font-family: var(--sl-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-color-ink-70);
  }

  .mobile-utility .region-select__btn {
    height: 36px;
    gap: 6px;
  }

  .mobile-utility .region-select__panel {
    left: -12px;
    right: auto;
  }

  .mobile-utility__lang {
    gap: 6px;
  }

  /* 360-400 px phones: logo, region, language and Menu all share the bar,
     so the logo drops to 108 px and every gap tightens. */
  @media (max-width: 400px) {
    .brand__logo {
      height: 52px;
      width: 108px;
    }

    .site-header .brand {
      width: 108px;
    }

    .site-header__inner {
      gap: 10px;
    }

    .site-header__actions {
      gap: 12px;
    }

    .mobile-utility {
      gap: 10px;
    }

    .mobile-utility__lang {
      gap: 4px;
    }
  }

  /* Number + quote CTA pinned to the bottom edge, above the header's
     z-index and below the overlay's, with the home-indicator inset. */
  .mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(243, 241, 238, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(51, 50, 48, 0.1);
  }

  .mobile-cta__phone {
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border: 1px solid rgba(51, 50, 48, 0.22);
    font-family: var(--sl-font-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: var(--sl-color-primary);
  }

  .mobile-cta__btn {
    justify-content: center;
    padding: 14px 16px;
    font-size: 12px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  html.menu-open .mobile-cta {
    display: none;
  }

  /* Room under the footer so the last links are never hidden behind the bar. */
  body {
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }

  .menu-overlay__quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
    padding-top: 8px;
  }

  .menu-overlay__body {
    grid-template-columns: 1fr;
    gap: 40px;
    align-content: start;
    padding-block: 32px 40px;
  }

  .menu-primary__link {
    font-size: clamp(30px, 8vw, 44px);
  }

  .menu-primary__row {
    gap: 14px;
  }

  .menu-acc-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.7);
    align-self: center;
  }

  .menu-acc-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 220ms var(--sl-ease);
  }

  .menu-acc.is-open .menu-acc-toggle svg {
    transform: rotate(45deg);
  }

  /* Accordion: the sub-list grows from 0fr to 1fr (height animates
     without a fixed number) while the links fade in slightly later. */
  .menu-sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 360ms var(--sl-ease);
  }

  .menu-sub__list {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 220ms var(--sl-ease), transform 320ms var(--sl-ease);
  }

  .menu-acc.is-open .menu-sub {
    grid-template-rows: 1fr;
  }

  .menu-acc.is-open .menu-sub__list {
    opacity: 1;
    transform: none;
    transition-delay: 80ms;
  }

  /* Vertical breathing room lives on the first/last items, not on the
     list's padding, so the collapsed row really is 0 px tall. */
  .menu-sub__list {
    padding-left: 42px;
  }

  .menu-sub__list li:first-child {
    padding-top: 8px;
  }

  .menu-sub__list li:last-child {
    padding-bottom: 12px;
  }

  .menu-sub li + li {
    margin-top: 10px;
  }

  .menu-sub a {
    font-family: var(--sl-font-mono);
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.78);
  }

  .menu-secondary {
    padding-left: 0;
    border-left: 0;
    padding-top: 28px;
    border-top: 1px solid var(--sl-color-paper-12);
    align-self: start;
  }

  .menu-overlay__bottom {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .menu-addresses {
    flex-direction: column;
    gap: 14px;
  }

  /* Hero */
  .hero__text {
    grid-column: 1 / 11;
  }

  .hero__link {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 28px;
  }

  /* Intro */
  .intro__text,
  .intro__slider {
    grid-column: 1 / -1;
  }

  .intro__text {
    padding-right: 0;
  }

  .intro__slider {
    margin-top: 64px;
  }

  /* Rows */
  .row--classique .row__media,
  .row--classique .row__text,
  .row--integrees .row__media,
  .row--integrees .row__text {
    grid-column: 1 / -1;
  }

  /* Both model photos go square on phone (dedicated 1:1 crops via
     <picture>), and the Lames intégrées zoom re-centres so the parallax
     eats both edges evenly instead of the right side only. */
  .row--classique .row__media,
  .row--integrees .row__media {
    aspect-ratio: 1 / 1;
  }

  .row--integrees .row__media img {
    transform-origin: 50% 50%;
  }

  /* Classique on phone reads like Lames intégrées: heading above the
     photo, lede + link below. display: contents lifts the text block's
     children into the grid; the reveal observer watches each child, so
     the stagger still works. */
  .row--classique {
    grid-template-rows: auto auto auto auto;
  }

  .row--classique .row__text {
    display: contents;
  }

  .row--classique .row__text > .h {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 28px;
  }

  .row--classique .row__media {
    grid-row: 2;
  }

  .row--classique .row__text > .lede {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 32px;
  }

  .row--classique .row__text > .links {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .row--integrees {
    grid-template-rows: auto auto auto;
  }

  .row__float {
    grid-column: 1 / -1;
    margin-bottom: 28px;
  }

  .row--integrees .row__media {
    grid-row: 2;
  }

  .row--integrees .row__text {
    grid-row: 3;
    margin-top: 32px;
    padding-bottom: 0;
  }

  .row__head .h,
  .row__head-lede {
    grid-column: 1 / -1;
  }

  .row__head-lede {
    margin-top: 20px;
  }

  /* Accessoires: centre-focus carousel on tablets (phones below refine the
     sizing). The card nearest the centre snaps in and comes forward; the
     others recede. Recede styles wait for .is-in so the reveal's own
     opacity/translate pass still plays first. */
  .strip {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin-inline: calc(var(--sl-margin) * -1);
    padding-inline: 30%;
    scroll-padding-inline: 30%;
    scrollbar-width: none;
  }

  .strip::-webkit-scrollbar {
    display: none;
  }

  .strip .card {
    flex: 0 0 40%;
    scroll-snap-align: center;
  }

  .strip.is-carousel .card {
    transition: opacity 480ms var(--sl-ease), transform 480ms var(--sl-ease);
  }

  .strip.is-carousel .card.is-in {
    opacity: 0.45;
    transform: scale(0.92);
  }

  .strip.is-carousel .card.is-in.is-center {
    opacity: 1;
    transform: none;
  }

  .strip.is-carousel .card:not(.is-center) .card__name {
    opacity: 0.4;
  }

  /* Sur mesure */
  .surmesure__intro {
    grid-column: 1 / -1;
  }

  .surmesure__tall {
    grid-column: 1 / 6;
  }

  .surmesure__wide .frame,
  .surmesure__wide .lede,
  .surmesure__wide .links {
    grid-column: 6 / 13;
  }

  /* Projets */
  .projets__col {
    grid-column: 1 / 7;
  }

  .projets__col--offset {
    grid-column: 7 / 13;
    margin-top: 64px;
  }

  .projets__feat {
    grid-column: 1 / 7;
  }

  .projets__feat + .projets__feat {
    grid-column: 7 / 13;
  }

  /* Avis */
  .avis__intro,
  .avis__lede {
    grid-column: 1 / -1;
  }

  /* Inner pages */
  .page-hero__text,
  .page-hero__media,
  .quote__aside,
  .quote__form,
  .faq__intro,
  .faq__list {
    grid-column: 1 / -1;
  }

  .page-hero__media {
    max-width: 520px;
  }

  .page-hero--merci {
    padding-bottom: clamp(40px, 4vw, 56px);
  }

  .page-hero--merci .page-hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 4 / 5;
  }

  .quote__aside,
  .faq__intro {
    position: static;
  }

  /* Stacked: the form comes first, the "what happens next" aside follows it */
  .quote__form {
    order: 1;
  }

  .quote__aside {
    order: 2;
    padding-top: 8px;
  }

  .promises {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cta-split {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__grid > :first-child {
    grid-column: 1 / -1;
  }

  .site-footer__bottom {
    grid-template-columns: 1fr;
  }

  .site-footer__fine {
    text-align: left;
  }
}

@media (max-width: 720px) {
  :root {
    --sl-margin: 16px;
    --sl-gap: 16px;
  }

  body {
    font-size: 16px;
  }

  .hero {
    padding-top: calc(var(--sl-header-h) + 40px);
  }

  .hero__text {
    grid-column: 1 / -1;
  }

  .hero__title {
    font-size: clamp(34px, 9.2vw, 44px);
  }

  .hero__sub {
    font-size: 17px;
  }

  /* Phone hero: the 16:9 inset frame read as a thumbnail. Full-bleed and
     portrait (4:5) instead, cover-cropped on the subject, which sits
     centre-left in hero.mp4. The badge moves inside the frame's corner so
     it never leaves the viewport. */
  .hero__media {
    margin-top: 32px;
  }

  .hero__frame {
    margin-top: 0;
    margin-inline: calc(var(--sl-margin) * -1);
    aspect-ratio: 4 / 5;
  }

  .badge {
    width: 96px;
    height: 96px;
    top: -28px;
    left: 0;
  }

  .badge__glyph {
    width: 22px;
    height: 22px;
  }

  .pin {
    height: 280vh;
  }

  .pin__l {
    white-space: normal;
    width: 90%;
    text-align: center;
    font-size: clamp(40px, 9.5vw, 72px);
  }

  .intro__slider {
    margin-top: 48px;
  }

  .slider__progress span {
    width: 40px;
  }

  .row + .row {
    margin-top: 96px;
  }

  /* Accessoires, phones: same carousel, one dominant card at a time. */
  .strip {
    gap: 12px;
    padding-inline: 15%;
    scroll-padding-inline: 15%;
  }

  .strip .card {
    flex-basis: 70%;
  }

  .surmesure__tall {
    grid-column: 1 / 10;
    grid-row: 1;
  }

  .surmesure__wide .frame {
    grid-column: 3 / 13;
    grid-row: 2;
  }

  .surmesure__wide .lede {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 16px;
  }

  .surmesure__wide .links {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .projets__col,
  .projets__col--offset,
  .projets__feat,
  .projets__feat + .projets__feat {
    grid-column: 1 / -1;
  }

  .projets__col--offset {
    margin-top: 0;
  }

  .projets__featured {
    row-gap: 40px;
  }

  .page-hero__media {
    max-width: none;
  }

  .promises {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .qf__row,
  .choice {
    grid-template-columns: 1fr;
  }

  .qf__row + .qf__row {
    margin-top: 14px;
  }

  .qf__row {
    gap: 14px;
  }

  .qf__legend {
    font-size: 20px;
  }

  .qf__submit .btn {
    width: 100%;
    text-align: center;
  }

  .avis-stack__item {
    top: calc(80px + var(--i) * 12px);
  }

  .avis-stack__gap {
    height: 30vh;
  }

  .avis-card {
    min-height: 0;
    padding: 28px 24px 24px;
  }

  .avis-card__text {
    font-size: 20px;
  }

  .avis-card--cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .avis-card--cta__btn {
    justify-content: center;
    padding: 14px 14px;
    font-size: 11px;
    letter-spacing: 0.08em;
    gap: 8px;
  }

  .showroom,
  .showroom--offset {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .menu-sub,
  .menu-sub__list,
  .avis-card,
  .faq__a,
  .faq__a-inner {
    transition: none;
  }

  .frame img {
    transform: none !important;
    will-change: auto;
  }

  .hero__frame video {
    transform: none !important;
  }

  .badge__ring {
    animation: none;
  }

  .pin {
    height: auto;
  }

  .pin__sticky {
    position: relative;
    top: auto;
  }

  /* Reduced motion: static open frame, first line shown, no tick. */
  .pin__l {
    width: 90%;
    text-align: center;
    white-space: normal;
    font-size: clamp(40px, 6vw, 96px);
    transform: translate(-50%, -50%) !important;
    filter: none !important;
  }
  .pin__l--1 { opacity: 1 !important; }
  .pin__l--2 { opacity: 0 !important; }
  .pin__vignette { opacity: 0.6 !important; }

  .slider__track {
    transition: none;
  }

  /* Accessories index: the crossfade becomes a straight cut, no settle zoom. */
  .accindex .accindex__frame img {
    transition: none;
    transform: none;
  }

  .accindex__name,
  .accindex__arrow {
    transition: none;
  }

  /* Accessories carousel: recede/come-forward becomes instant. */
  .strip.is-carousel .card {
    transition: none;
  }

  /* Review stars: no staggered fill, simply there. */
  .stars svg {
    transition: none;
  }

  .menu-overlay,
  .sub-panel,
  .site-header,
  .btn,
  .menu-primary__link,
  .badge,
  .text-link span {
    transition: none;
  }

  /* The logo is fully drawn from the first paint: no rise and no fade, and
     app.js skips the scroll-linked pass, so the word stays put. The exit
     still latches past the threshold; transition: none below is what makes
     the lone S snap into place instead of sliding. */
  .logo-rise--script,
  .logo-rise--caps {
    transform: none;
    opacity: 1;
    animation: none !important;
  }

  .brand__logo,
  .brand--return .logo-word,
  .brand--return .logo-band--caps {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Héros des pages intérieures (2026-10-01, proprio) : sur ordinateur, la photo
   est collée sous la navigation et descend jusqu'au bas de l'écran ; le texte
   est centré verticalement à côté. Même logique que .page-hero--merci.
   -------------------------------------------------------------------------- */
@media (min-width: 1051px) {
  .page-hero:not(.page-hero--merci) {
    padding-top: var(--sl-header-h);
    padding-bottom: 0;
  }
  .page-hero:not(.page-hero--merci) .page-hero__grid {
    min-height: calc(100vh - var(--sl-header-h));
    min-height: calc(100svh - var(--sl-header-h));
    align-items: stretch;
  }
  .page-hero:not(.page-hero--merci) .page-hero__text {
    align-self: center;
    padding-block: clamp(48px, 6vw, 88px);
  }
  .page-hero:not(.page-hero--merci) .page-hero__media {
    aspect-ratio: auto;
    align-self: stretch;
    min-height: 100%;
  }
}

/* --------------------------------------------------------------------------
   Vrai formulaire Contact Form 7 (35240 / 35241) dans la refonte (2026-10-07).
   La mise en page vient de inc/functions/refonte-formulaire.php ; ces regles
   adaptent ce que Contact Form 7 et le form tracker ajoutent autour des champs.
   -------------------------------------------------------------------------- */
/* L'enveloppe <div class="wpcf7"> de Contact Form 7 ne doit pas prendre la
   place du formulaire dans la grille de la page (colonne .quote__form). */
.wpcf7:has(> form.sl-cf7) { display: contents; }
.sl-cf7 .wpcf7-form-control-wrap { display: block; position: static; }
.sl-cf7 .qfield .wpcf7-not-valid-tip {
  display: block;
  padding: 0 18px 12px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #a8412f;
}
.sl-cf7 .qfield:has(.wpcf7-not-valid) { border-color: #a8412f; }
.sl-cf7 .qfield:has(select option:checked:not([value=""])) .qfield__label { top: 11px; }

/* Residentiel / Commercial : memes cartes que la maquette */
.sl-cf7-choice .wpcf7-radio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sl-cf7-choice .wpcf7-list-item { display: block; margin: 0; position: relative; }
.sl-cf7-choice .wpcf7-list-item label { display: block; cursor: pointer; }
.sl-cf7-choice .wpcf7-list-item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sl-cf7-choice .wpcf7-list-item-label {
  position: relative;
  display: block;
  padding: 22px 60px 22px 24px;
  background: var(--sl-color-paper-60);
  border: 1px solid var(--sl-color-ink-20);
  font-family: var(--sl-font-serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.1;
  transition: border-color 200ms var(--sl-ease), background-color 200ms var(--sl-ease), box-shadow 200ms var(--sl-ease);
}
.sl-cf7-choice .wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  top: 22px;
  right: 22px;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--sl-color-ink-20);
  border-radius: 50%;
  background: var(--sl-color-white);
  transition: border-color 200ms var(--sl-ease), box-shadow 200ms var(--sl-ease);
}
.sl-cf7-choice .wpcf7-list-item-label::after {
  display: block;
  margin-top: 8px;
  font-family: var(--sl-font-sans);
  font-style: normal;
  font-size: 14px;
  line-height: 1.4;
  color: var(--sl-color-ink-55);
}
html[lang^="fr"] .sl-cf7-choice .wpcf7-list-item.first .wpcf7-list-item-label::after { content: "Cour, terrasse, bord de piscine, balcon."; }
html[lang^="fr"] .sl-cf7-choice .wpcf7-list-item.last .wpcf7-list-item-label::after { content: "Restaurant, hôtel, spa, condo, espace commun."; }
html[lang^="en"] .sl-cf7-choice .wpcf7-list-item.first .wpcf7-list-item-label::after { content: "Backyard, deck, poolside, balcony."; }
html[lang^="en"] .sl-cf7-choice .wpcf7-list-item.last .wpcf7-list-item-label::after { content: "Restaurant, hotel, spa, condo, common area."; }
.sl-cf7-choice .wpcf7-list-item label:hover .wpcf7-list-item-label,
.sl-cf7-choice .wpcf7-list-item label:hover .wpcf7-list-item-label::before { border-color: var(--sl-color-primary); }
.sl-cf7-choice .wpcf7-list-item input:checked + .wpcf7-list-item-label {
  border-color: var(--sl-color-primary);
  box-shadow: inset 0 0 0 1px var(--sl-color-primary);
  background: var(--sl-color-white);
}
.sl-cf7-choice .wpcf7-list-item input:checked + .wpcf7-list-item-label::before {
  border-color: var(--sl-color-secondary);
  box-shadow: inset 0 0 0 5px var(--sl-color-white);
  background: var(--sl-color-secondary);
}
.sl-cf7-choice .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label { outline: 2px solid var(--sl-color-secondary); outline-offset: 2px; }

/* Photos : l'interface du form tracker (3 boutons), alignee sur les champs */
.sl-cf7-files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sl-cf7-files .wpcf7-form-control-wrap { min-width: 0; }
.sl-cf7-files .sl-asyncup { border-radius: 0; border-color: var(--sl-color-ink-20); background: var(--sl-color-white); }

/* Envoi, messages */
.sl-cf7 input[type="submit"].btn { cursor: pointer; border: 0; font: inherit; }
.sl-cf7 .wpcf7-spinner { margin: 0 0 0 16px; }
.sl-cf7 .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--sl-color-ink-20);
  font-size: 15px;
  line-height: 1.5;
}
.sl-cf7.invalid .wpcf7-response-output, .sl-cf7.unaccepted .wpcf7-response-output { border-color: #a8412f; color: #a8412f; }
.sl-cf7.sent .wpcf7-response-output { border-color: var(--sl-color-primary); }

@media (max-width: 720px) {
  .sl-cf7-choice .wpcf7-radio { grid-template-columns: 1fr; }
  .sl-cf7-files { grid-template-columns: 1fr; }
}