/* Hallmark · shape: dossier (le papier où la vidéo s'arrête) · genre: editorial · theme: brand · redesign: full · job: hire
 * paper: oklch(92.2% 0.020 77) · accent: oklch(48.3% 0.100 82) · display: Newsreader + Archivo (titres) · body: Public Sans · hero: kept (Stage animé, scrub vidéo validé client) · nav: kept (edge-aligned, validée client) · footer: mast · signature: la couture jaune sur le cuir, trois fois
 * axes: light/roman-serif/warm · posture: Restrained · contrast: pass · fold: pass · imagery: photographs 3 (bureau, lac, lisière de cuir générée) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, sections encore proches d'un cabinet quelconque ; ancrées dans la matière de la vidéo (cuir, couture, laiton) et dans des faits propres (horaires en bandeau, deux côtés de la fiscalité, plafonds 2026) */
/* Hallmark · titres · 2 faces par titre, demande client : chaque H1 et H2 pose un groupe de mots entier en Newsreader 300 (opsz 72) puis le suivant en Archivo étroit 600 à 0,70 em, chacun sur sa ligne (display: block), même couleur, aucun mot isolé garni · contraste sur structure, graisse, chasse et taille */
/* Hallmark · waive 37 · Public Sans Hero pointe sur publicsans.woff2 · alias métrique du hero gelé, même fichier que Public Sans, donc trois familles chargées ; Archivo porte la seconde ligne des titres demandée par le client */
/* Hallmark · answered F19 · la graisse 300 ne sert qu'à la ligne Newsreader des titres, c'est l'axe de graisse du pairing demandé par le client ; 400, 500 et 600 restent ceux du corps et de la nav validés */
/* Hallmark · finish-review: subagent · 6 findings · 6 resolved · gap: none · hero-review: none, hero kept as validated by the client */
/* Hallmark · waive 22 · --hero-bg et --char neutres · noir mesuré sur la frame 0 de la vidéo du porte-documents, le raccord du hero exige ce neutre exact */
/* Hallmark · exceptions client (hero gelé, Floor non waivable, décompté à part) : 54 et 67 .hero .eyebrow, 67 .brand-sub, 58 .hero-copy-in, 44c et 79 .hero, 66 .hero-cue · hero validé par le client */
/* Hallmark · waive 24b · deux écarts optiques gardés dans la nav validée · 10px entre NormaLex et fiduciaire, 14px autour des liens de la nav du hero, gelés pour garder ses boîtes */
/* Hallmark · waive 44c · hero de 240 vh en scrub, la section suivante arrive après la vidéo · le porte-documents validé par le client remplit l'écran pendant tout le défilement */
/* Hallmark · waive 79 · le vide sous le texte du hero à 1440 x 900 · l'objet vidéo du porte-documents occupe cet espace dès que le scrub commence, hero validé par le client */
/* Hallmark · dismissed 23 · trois numéraux 1, 2, 3 en laiton dans la méthode, bien sous 1 % de l'écran */
/* Hallmark · dismissed 25 · la citation de la méthode est une déclaration à 40px, mesure de titrage et non de prose */
/* Hallmark · dismissed 41 · --ink est le texte de la nav sur l'ivoire, jamais posé sur --hero-bg */
/* Hallmark · dropped bureau-1024.webp, lac-1024.webp · les mêmes photos du bureau et du lac, recadrées en bureau45 (4:5) et lacw (fond perdu) */
/* avoid-ai-design-ignore: SD1 · le crème #EDE4D7 est la dernière frame de la vidéo du hero, imposé par le raccord invisible */
/* avoid-ai-design-ignore: C5 · halo du bouton jaune du hero au survol, hero validé par le client et gelé */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader.woff2?v=39787da4f1") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/publicsans.woff2?v=f98c3e3ccf") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
/* Alias du hero et de la nav : même fichier, calé sur les chasses de l'ancienne face pour garder
   les boîtes de texte du hero validé. Deux groupes de graisses aux descripteurs identiques, et dans
   chacun la règle la plus spécifique en dernier (elle est essayée en premier) : minuscules 103 %,
   capitales 96 %, chiffres et signes du téléphone calés au pixel (les chasses tabulaires s'arrondissent). */
@font-face {
  font-family: "Public Sans Hero";
  src: url("../fonts/publicsans.woff2?v=f98c3e3ccf") format("woff2");
  font-weight: 400 550;
  font-style: normal;
  font-display: swap;
  size-adjust: 103%;
}
@font-face {
  font-family: "Public Sans Hero";
  src: url("../fonts/publicsans.woff2?v=f98c3e3ccf") format("woff2");
  font-weight: 400 550;
  font-style: normal;
  font-display: swap;
  size-adjust: 96%;
  unicode-range: U+0041-005A, U+00C0-00DE;
}
@font-face {
  font-family: "Public Sans Hero";
  src: url("../fonts/publicsans.woff2?v=f98c3e3ccf") format("woff2");
  font-weight: 400 550;
  font-style: normal;
  font-display: swap;
  size-adjust: 115%;
  unicode-range: U+002B, U+00A0;
}
@font-face {
  font-family: "Public Sans Hero";
  src: url("../fonts/publicsans.woff2?v=f98c3e3ccf") format("woff2");
  font-weight: 400 550;
  font-style: normal;
  font-display: swap;
  size-adjust: 96.6%;
  unicode-range: U+0030-0039;
}
@font-face {
  font-family: "Public Sans Hero";
  src: url("../fonts/publicsans.woff2?v=f98c3e3ccf") format("woff2");
  font-weight: 551 600;
  font-style: normal;
  font-display: swap;
  size-adjust: 103%;
}
@font-face {
  font-family: "Public Sans Hero";
  src: url("../fonts/publicsans.woff2?v=f98c3e3ccf") format("woff2");
  font-weight: 551 600;
  font-style: normal;
  font-display: swap;
  size-adjust: 96%;
  unicode-range: U+0041-005A, U+00C0-00DE;
}
@font-face {
  font-family: "Public Sans Hero";
  src: url("../fonts/publicsans.woff2?v=f98c3e3ccf") format("woff2");
  font-weight: 551 600;
  font-style: normal;
  font-display: swap;
  size-adjust: 99.8%;
  unicode-range: U+002B, U+00A0;
}
@font-face {
  font-family: "Public Sans Hero";
  src: url("../fonts/publicsans.woff2?v=f98c3e3ccf") format("woff2");
  font-weight: 551 600;
  font-style: normal;
  font-display: swap;
  size-adjust: 99.8%;
  unicode-range: U+0030-0039;
}
/* Seconde face des titres : Archivo instanciée en étroit (chasse 75) et en 600, une seule graisse. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2?v=daa253f346") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Polices de secours ajustées : pas de saut de mise en page au chargement. */
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 98%; ascent-override: 92%; descent-override: 24%; }
@font-face { font-family: "Public Sans Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 104%; ascent-override: 92%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial Narrow"), local("Arial"); size-adjust: 92%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%; }

:root {
  /* hero et nav (valeurs d'origine, gelées) */
  --ivory: #EDE4D7;
  --ink: #1C1B19;
  --brass: #7A5800;
  --char: #141414;
  --hero-bg: #101010;
  --on-dark: #F3EEE6;
  --on-dark-2: #B9B2A7;
  --gold: #F2B705;
  --gold-hover: #FFC51F;
  --gold-glow: rgba(242, 183, 5, .6);
  --nav-glass: color-mix(in srgb, var(--ivory) 92%, transparent);
  --line: #D6CBBB;
  --serif: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --sans: "Public Sans Hero", "Public Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 48px);
  --nav-h: 72px;

  /* système de la refonte */
  --color-paper: var(--ivory);
  --color-paper-2: #F7F3EC;
  --color-paper-3: #E4D8C6;
  --color-field: #FBF8F2;
  --color-ink: #1C1A16;
  --color-ink-2: #4E483F;
  --color-muted: #675F55;
  --color-rule: #D3C6B3;
  --color-edge: #8A8073;
  --color-accent: #7A5800;
  --color-accent-ink: #F7F3EC;
  --color-focus: #7A5800;
  --color-leather: #1A1815;
  --color-char: #15130F;
  --color-on-dark: #F3EEE6;
  --color-on-dark-2: #BDB5A8;
  --color-rule-dark: #4A443B;
  --color-edge-dark: #9A9184;
  --color-stitch: #F2B705;
  --color-stitch-hover: #FFC51F;
  --color-scrim: rgba(21, 19, 15, .55);
  --font-display: var(--serif);
  --font-body: "Public Sans", "Public Sans Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-titre-sans: "Archivo", "Archivo Fallback", "Arial Narrow", sans-serif;

  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1.0625rem;
  --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem);
  --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem);
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem);
  --text-figure: clamp(3.5rem, 2rem + 6vw, 7rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms; --dur-short: 220ms;
  --gap-columns: 32px;
  --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --radius-card: 4px; --radius-input: 6px;
  --badge-h: 32px;
  --z-raised: 10; --z-sticky-nav: 300; --z-toast: 500; --z-skip: 600;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  overflow-x: clip;
  scroll-padding-top: calc(var(--nav-h) + var(--space-md));
  scroll-padding-bottom: calc(var(--badge-h) + var(--space-xs));
  scrollbar-color: var(--color-edge) var(--color-paper);
}
@media (prefers-reduced-motion: no-preference) { html:not(.scrub) { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.65;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  caret-color: var(--color-accent);
}
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; font-synthesis: none; }
p { margin: 0; text-wrap: pretty; }
sup { font-size: .7em; line-height: 0; vertical-align: .45em; }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 3px; }
.hero :focus-visible, .experience :focus-visible, .calc-section :focus-visible, .footer :focus-visible,
html.js .nav:not(.is-light) :focus-visible { outline-color: var(--gold); }

.skip {
  position: absolute; left: var(--space-sm); top: -60px; z-index: var(--z-skip);
  background: var(--char); color: var(--on-dark); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); text-decoration: none;
}
.skip:focus { top: var(--space-sm); }

.wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter); }

/* ================================================================== hero et nav (gelés) */
.hero, .nav { font-family: var(--sans); }

.hero .eyebrow {
  font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 20px;
  display: flex; align-items: center; gap: var(--space-sm);
}
.eyebrow-dark { color: var(--gold); }
.eyebrow-dark::before { content: ""; width: 28px; height: 1px; background: var(--gold); opacity: .7; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: 0 var(--space-lg); border-radius: var(--radius-input); border: 0;
  font: 600 1rem/1 var(--sans); letter-spacing: .005em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--ease-out), background-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-gold { background: var(--gold); color: var(--char); }
.btn-gold:hover { background: var(--gold-hover); }
.hero .btn:hover { transform: translateY(-1px); }
/* avoid-ai-design-ignore: C5 (halo du bouton du hero gelé) */
.hero .btn-gold:hover { box-shadow: 0 8px 24px -10px var(--gold-glow); }
.hero .btn:active { transform: translateY(0); }

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-sticky-nav); height: var(--nav-h);
  color: var(--ink);
  background: var(--nav-glass);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.nav.has-rule { box-shadow: 0 1px 0 var(--line); }
html.js .nav:not(.is-light) {
  background: transparent; color: var(--on-dark);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nav-in {
  max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 32px;
}
.brand { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; min-height: 44px; align-items: center; }
.brand-name { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; letter-spacing: -.01em; line-height: 1; }
.brand-name span { font-style: normal; color: var(--brass); }
html.js .nav:not(.is-light) .brand-name span { color: var(--gold); }
.brand-sub { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; padding-top: var(--space-2xs); }
.nav-links { display: flex; gap: var(--space-2xs); margin-left: auto; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-size: .9375rem; font-weight: 500; text-decoration: none; border-radius: var(--radius-input);
}
.nav-links a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.nav-links a:active { opacity: .7; }
.nav-tel {
  display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md);
  border: 1px solid currentColor; border-radius: var(--radius-input); text-decoration: none; font-size: .9375rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.nav-tel .tel-short { display: none; }
.nav-tel:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.nav-tel:active { background: color-mix(in srgb, currentColor 16%, transparent); }

@media (max-width: 900px) {
  :root { --nav-h: 64px; }
  .brand-sub { display: none; }
  .nav-in { gap: var(--space-xs); }
  .nav-links a:not(.nav-contact) { display: none; }
  .nav-tel .tel-long { display: none; }
  .nav-tel .tel-short { display: inline; }
  .nav-tel { padding: 0 var(--space-sm); }
}
/* 320 à 360 px : le bouton d'appel ne déborde plus de l'écran (seul écart volontaire de la nav). */
@media (max-width: 360px) {
  .nav-in { gap: var(--space-2xs); }
  .nav-links a { padding: 0 var(--space-xs); }
  .nav-tel { padding: 0 var(--space-sm); }
  .nav-tel svg { display: none; }
}

.hero { position: relative; background: var(--ivory); margin: 0; border: 0; }
.hero-sticky {
  position: relative; height: 100svh; overflow: hidden;
  background: var(--hero-bg); color: var(--on-dark);
}
html.scrub .hero { height: calc(100lvh + 140lvh); }
html.scrub .hero-sticky { position: sticky; top: 0; height: 100lvh; }
@media (max-width: 600px), (max-width: 900px) and (orientation: portrait) {
  html.scrub .hero { height: calc(100lvh + 120lvh); }
}
.hero-zoom { position: absolute; inset: 0; transform-origin: 50% 100%; }
/* Cadre à la taille exacte « cover » du clip (ratio 1912/1080), centré : la vidéo n'est jamais
   rognée par sa boîte, donc la réduire montre l'objet entier. */
.hero-frame {
  position: absolute; left: 50%; top: 50%;
  width: max(100%, calc(100lvh * 1.7704));
  aspect-ratio: 1912 / 1080;
  transform: translate(-50%, -50%); transform-origin: 50% 50%;
}
html:not(.scrub) .hero-frame { width: max(100%, calc(100svh * 1.7704)); }
.hero-zoom, .hero-frame, .hero-copy, .hero-veil { will-change: transform, opacity; }
.hero-poster, .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
.hero-video { opacity: 0; }
.hero-frame.has-video .hero-video { opacity: 1; }
.hero-frame.has-video .hero-poster { visibility: hidden; }
/* Sans JS : objet décalé à droite du texte (le JS calcule ensuite la valeur exacte). */
html:not(.js) .hero-frame { transform: translate(-50%, -50%) translate(24%, 6.7%) scale(.76); }
.hero-veil { position: absolute; inset: 0; background: var(--ivory); opacity: 0; pointer-events: none; }
/* Mode statique (mouvement réduit, échec vidéo, sans JS) : le hero se fond vers l'ivoire. */
.hero-fade { position: absolute; inset: auto 0 0 0; height: 22lvh; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--ivory)); }
@supports (background: linear-gradient(in oklab, red, blue)) {
  .hero-fade { background: linear-gradient(in oklab, color-mix(in oklab, var(--ivory) 0%, transparent), var(--ivory)); }
}
html.scrub .hero-fade { display: none; }

.hero-copy {
  position: absolute; inset: 0 0 auto 0; height: 100svh;
  display: flex; align-items: center;
  padding-top: var(--nav-h);
}
.hero-copy-in {
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter);
}
.hero-copy-in > * { max-width: min(32rem, 40vw); }
.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.75rem); line-height: 1.02; letter-spacing: -.02em;
  font-variation-settings: "opsz" 72;
  color: var(--on-dark); text-wrap: balance; overflow-wrap: break-word; min-width: 0;
}
.hero-lead { margin-top: var(--space-lg); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--on-dark-2); max-width: 30rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-top: 36px; }
.hero-tel {
  display: inline-flex; align-items: center; min-height: 48px; color: var(--on-dark);
  font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--on-dark) 45%, transparent);
  text-underline-offset: 6px; font-variant-numeric: tabular-nums;
}
.hero-tel:hover { text-decoration-color: var(--gold); }
.hero-tel:active { opacity: .8; }
.hero-cue {
  position: absolute; left: 50%; bottom: 28px; width: 1px; height: 48px; transform: translateX(-50%);
  background: color-mix(in srgb, var(--on-dark) 25%, transparent); overflow: hidden;
}
.hero-cue span { position: absolute; left: 0; top: -16px; width: 1px; height: 16px; background: var(--gold); animation: cue 2.2s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes cue { to { transform: translateY(64px); } }
html:not(.scrub) .hero-cue { display: none; }

@media (max-width: 600px), (max-width: 900px) and (orientation: portrait) {
  .hero-copy { align-items: flex-end; padding-bottom: clamp(84px, 13svh, 128px); }
  .hero-copy-in > * { max-width: 34rem; }
  .hero h1 { font-size: clamp(2.375rem, 1.6rem + 3.6vw, 3.25rem); }
  .hero-lead { margin-top: var(--space-md); }
  .hero-actions { margin-top: var(--space-lg); }
  .hero-cue { display: none; }
  html:not(.js) .hero-frame { transform: translate(-50%, -50%) translate(0, -27%) scale(.44); }
}

/* ================================================================== système des sections */
.section { position: relative; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-section); line-height: 1.06; letter-spacing: -.02em;
  font-variation-settings: "opsz" 60;
  max-width: 24ch; text-wrap: balance; overflow-wrap: break-word; min-width: 0;
}
h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-title); line-height: 1.2; letter-spacing: -.01em;
  font-variation-settings: "opsz" 24;
  max-width: 40ch; text-wrap: balance; overflow-wrap: break-word; min-width: 0;
}
/* Titres à deux faces (demande client) : chaque H1/H2 pose un groupe de mots en Newsreader léger, grand, à fort
   contraste, puis le suivant en grotesque étroite demi-grasse, plus petite. Quatre écarts francs (structure,
   graisse, chasse, taille) ; même couleur, même présence, chacun sur sa ligne. */
.titre-serif { display: block; text-wrap: balance; font-weight: 300; font-variation-settings: "opsz" 72; }
.titre-sans {
  display: block; text-wrap: balance;
  font-family: var(--font-titre-sans); font-weight: 600; font-variation-settings: normal;
  font-size: .7em; line-height: 1.12; letter-spacing: 0; margin-top: .1em;
}
/* fenêtres étroites : « accompagner » ne finit jamais seul le titre de la méthode */
.insecable { white-space: nowrap; }
.lead { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); max-width: 46ch; }

/* ------------------------------------------------------------------ 1. services : split photo */
/* Les 25vh du haut restent ivoire nu : raccord invisible avec la dernière image de la vidéo. */
/* Juste après le hero : le voile ivoire fait déjà office de marge, le titre arrive dès que le voile est plein. */
.services { padding-top: 104px; padding-bottom: var(--section-gap); }
html:not(.scrub) .services { padding-top: var(--section-gap); }
.services-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
/* texte avant la photo dans le DOM (ordre de lecture du mobile) ; sur desktop, la photo reste à gauche sur la même rangée */
.services-photo { grid-column: 1 / span 6; grid-row: 1; margin: 0; }
.services-photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 45% 50%;
  border-radius: var(--radius-card); background: var(--color-paper-3);
  outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px;
}
.services-text { grid-column: 8 / span 5; grid-row: 1; }
.services .lead { margin-top: var(--space-md); }
.clientele { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-ink); }
.clientele > p { margin-top: var(--space-2xs); color: var(--color-ink-2); }
.points { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.points li { padding: var(--space-xs) 0; border-top: 1px solid var(--color-rule); line-height: 1.45; }

/* ------------------------------------------------------------------ 2. expérience : bande de cuir, diptyque */
.experience { background: var(--color-leather); color: var(--color-on-dark); padding-top: var(--section-gap); }
.experience-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.experience h2 { grid-column: 1 / span 8; font-size: var(--text-display-s); max-width: none; line-height: 1.04; }
.annees {
  grid-column: 9 / span 4; justify-self: end; margin-bottom: -.12em;
  font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 72;
  font-size: clamp(8rem, 4rem + 11vw, 14rem); line-height: .8; letter-spacing: -.05em; color: var(--color-on-dark);
  font-variant-numeric: lining-nums;
}
.sides { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); margin-top: var(--space-3xl); }
.side { grid-column: span 6; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-dark); }
.side + .side { padding-left: var(--space-xl); border-left: 1px solid var(--color-rule-dark); }
.side h3 { max-width: 22ch; }
.side p { margin-top: var(--space-sm); color: var(--color-on-dark-2); max-width: 40ch; }
.experience-close { margin-top: var(--space-2xl); font-size: var(--text-lead); line-height: 1.5; color: var(--color-on-dark); max-width: 52ch; }
/* Signature 1 : la lisière de cuir à couture jaune ferme la bande. */
.lisiere { margin-top: var(--space-2xl); height: clamp(150px, 19vw, 280px); }
.lisiere img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--color-ink) 40%);
  mask-image: linear-gradient(to bottom, transparent, var(--color-ink) 40%);
}

/* ------------------------------------------------------------------ 3. méthode : déclaration */
.methode { padding-block: var(--section-gap-l) var(--section-gap); }
.methode h2 { max-width: 26ch; }
.statement { margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.statement p { grid-column: 3 / span 10; }
.statement > p:first-child {
  font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 48;
  font-size: clamp(1.625rem, 1rem + 1.9vw, 2.75rem); line-height: 1.26; letter-spacing: -.012em;
  max-width: 40ch; color: var(--color-ink); text-indent: -.55em;
}
.temps { list-style: none; counter-reset: temps; margin: var(--space-3xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.temps li { grid-column: span 4; counter-increment: temps; padding-top: var(--space-md); border-top: 1px solid var(--color-ink); }
.temps li::before {
  content: counter(temps); display: block; margin-bottom: var(--space-sm);
  font-family: var(--font-display); font-size: var(--text-section); line-height: 1; color: var(--color-accent);
  font-variant-numeric: lining-nums;
}
.temps p { margin-top: var(--space-xs); color: var(--color-ink-2); max-width: 34ch; }
.statement .valeurs { grid-column: 3 / span 10; margin-top: var(--space-lg); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.6; text-indent: 0; color: var(--color-ink-2); }

/* ------------------------------------------------------------------ 4. calculateur : instrument sur charbon */
.calc-section { background: var(--color-char); color: var(--color-on-dark); padding-block: var(--section-gap) var(--section-gap-l); }
.calc-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.calc-head h2 { grid-column: 1 / span 7; max-width: 20ch; }
.calc-head .lead { grid-column: 9 / span 4; font-size: var(--text-md); color: var(--color-on-dark-2); }
.calc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.calc-form { grid-column: 1 / span 5; padding-top: var(--space-xl); display: grid; gap: var(--space-lg); align-content: start; }
.calc-result {
  grid-column: 7 / span 6; container-type: inline-size; position: relative; padding: var(--space-xl) 0 0 var(--space-xl);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm);
}
.calc-result::before { content: ""; position: absolute; left: 0; top: var(--space-xl); bottom: 0; width: 1px; background: var(--color-rule-dark); }
/* Signatures 2 et 3 : la couture photographiée, en bandeau fin (la lisière de cuir en est la 1re). */
.couture { height: 48px; overflow: hidden; }
.couture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.couture-calc { margin-top: var(--space-3xl); border-radius: var(--radius-card); }
.couture-footer { height: 40px; }
.calc fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-sm); min-width: 0; }
.calc legend, .calc label { font-weight: 600; font-size: .9375rem; color: var(--color-on-dark); padding: 0; }
.calc legend { margin-bottom: var(--space-sm); }
.calc .radio-card { padding: var(--space-sm) var(--space-md); }
.radio-card {
  position: relative; display: flex; align-items: center; gap: var(--space-sm); min-height: 52px; padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-edge-dark); border-radius: var(--radius-input); cursor: pointer; font-weight: 500 !important;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.radio-card:hover { border-color: var(--color-on-dark-2); }
.radio-card:active { background: color-mix(in srgb, var(--color-on-dark) 6%, transparent); }
.radio-card:has(input:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.radio-card input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 2px solid var(--color-edge-dark); border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.radio-card input:checked { border-color: var(--gold); }
.radio-card input:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.radio-card input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.field { display: grid; gap: var(--space-xs); }
.field[hidden] { display: none; }
.calc input[type="text"] {
  width: 100%; min-height: 52px; padding: 0 var(--space-md); border-radius: var(--radius-input);
  background: var(--color-char); color: var(--color-on-dark); border: 1px solid var(--color-edge-dark);
  font: 500 1.125rem/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.calc input[type="text"]::placeholder { color: var(--color-on-dark-2); }
.calc input[type="text"]:hover { border-color: var(--color-on-dark-2); }
.calc input[type="text"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.calc input:disabled { opacity: .55; cursor: not-allowed; }
.calc input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--gold); cursor: pointer; margin: 0; }
.range-scale { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--color-on-dark-2); margin-top: calc(-1 * var(--space-xs)); }
.calc-label { font-size: var(--text-sm); color: var(--color-on-dark-2); }
.calc-amount {
  display: block; font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 72;
  font-size: min(var(--text-figure), 17cqi); line-height: .95; letter-spacing: -.025em; color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.calc-detail { color: var(--color-on-dark); font-variant-numeric: tabular-nums; }
.calc-note { color: var(--color-on-dark-2); font-size: .9375rem; min-height: 1lh; }
.calc-note.is-warn { color: var(--gold); }
.calc-disclaimer { color: var(--color-on-dark-2); font-size: .9375rem; max-width: 52ch; padding-top: var(--space-md); margin-top: var(--space-xs); border-top: 1px solid var(--color-rule-dark); }
.calc-result .btn { margin-top: var(--space-xs); }

/* ------------------------------------------------------------------ 5. Nyon : photographie à fond perdu, plaque */
.nyon { position: relative; }
.nyon-photo { margin: 0; height: clamp(520px, 58vw, 820px); background: var(--color-paper-3); }
.nyon-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.nyon-in { position: absolute; z-index: var(--z-raised); left: 0; right: 0; bottom: 0; }
.nyon-plate { width: min(100%, 36rem); background: var(--color-paper); padding: var(--space-xl) var(--space-xl) var(--space-xl) 0; border-radius: 0 var(--radius-card) 0 0; position: relative; }
/* la plaque prolonge le papier jusqu'au bord gauche de l'écran */
.nyon-plate::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 50vmax; background: var(--color-paper); }
.nyon-plate p { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 46ch; }
address { font-style: normal; margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); line-height: 1.6; }

/* ------------------------------------------------------------------ 6. FAQ : index sur papier */
.faq { background: var(--color-paper-2); padding-block: var(--section-gap) var(--section-gap-s); }
.faq-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.faq h2 { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-h) + var(--space-xl)); max-width: 10ch; }
.faq-list { grid-column: 6 / span 7; border-top: 1px solid var(--color-ink); }
.faq details { border-bottom: 1px solid var(--color-rule); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
  min-height: 72px; padding: var(--space-md) 0;
  font-family: var(--font-display); font-size: var(--text-title); font-weight: 400; line-height: 1.3; font-variation-settings: "opsz" 24;
  transition: color var(--dur-short) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--color-accent), var(--color-accent)) center / 14px 1.5px no-repeat,
              linear-gradient(var(--color-accent), var(--color-accent)) center / 1.5px 14px no-repeat;
  transition: transform var(--dur-short) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-accent); }
.faq summary:active { opacity: .75; }
.faq details p { padding: 0 var(--space-3xl) var(--space-lg) 0; color: var(--color-ink-2); max-width: 62ch; }

/* ------------------------------------------------------------------ 7. contact : coordonnées, horaires, formulaire */
.contact { padding-block: var(--section-gap-s) var(--section-gap); }
.contact-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-3xl); align-items: start; }
.contact-coords { grid-column: 1 / span 6; grid-row: 1; }
.contact .lead { margin-top: var(--space-md); }
.contact-tel { margin-top: var(--space-xl); }
.contact-tel a {
  display: inline-flex; align-items: center; min-height: 48px;
  font-family: var(--font-display); font-size: var(--text-display-s); line-height: 1.1; letter-spacing: -.02em; font-variation-settings: "opsz" 60;
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--color-rule); text-underline-offset: .18em;
  transition: text-decoration-color var(--dur-short) var(--ease-out);
}
.contact-mail { margin-top: var(--space-sm); }
.contact-mail a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display); font-size: var(--text-title); font-variation-settings: "opsz" 24;
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--color-rule); text-underline-offset: .2em;
}
.contact-tel a:hover, .contact-mail a:hover { text-decoration-color: var(--color-accent); }
.contact-tel a:active, .contact-mail a:active { color: var(--color-accent); }
.contact-adresse { margin-top: var(--space-sm); color: var(--color-ink-2); }

.contact-form { grid-column: 8 / span 5; grid-row: 1 / span 2; display: grid; gap: var(--space-md); }
.contact-form label { font-weight: 600; font-size: .9375rem; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input);
  border: 1px solid var(--color-edge); background: var(--color-field); color: var(--color-ink); font: 400 1rem/1.4 var(--font-body);
  transition: border-color var(--dur-short) var(--ease-out);
}
.contact-form input:hover, .contact-form select:hover, .contact-form textarea:hover { border-color: var(--color-ink-2); }
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.contact-form :disabled { opacity: .55; cursor: not-allowed; }
.contact-form textarea { resize: vertical; min-height: 132px; }
.contact-form select {
  appearance: none; -webkit-appearance: none; padding-right: var(--space-xl);
  background-image: linear-gradient(45deg, transparent 50%, var(--color-ink) 50%), linear-gradient(135deg, var(--color-ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.contact-form .btn { justify-self: start; margin-top: var(--space-xs); }
.btn-ink { background: var(--color-ink); color: var(--color-paper-2); }
.btn-ink:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.btn-ink:focus-visible { outline-color: var(--color-focus); }
.form-note { font-size: var(--text-sm); color: var(--color-ink-2); }

/* horaires : la semaine en bandeau, les heures d'ouverture dessinées sur l'axe 8 h à 17 h */
.horaires { grid-column: 1 / span 6; grid-row: 2; align-self: start; }
.horaires h3 { font-size: var(--text-title); }
.semaine { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--color-ink); }
.semaine li { position: relative; padding: var(--space-sm) var(--space-md) var(--space-xl); border-left: 1px solid var(--color-rule); min-height: 96px; }
.semaine li:first-child { border-left: 0; padding-left: 0; }
.semaine .jour { font-weight: 600; }
.semaine li::after {
  content: ""; position: absolute; left: var(--space-md); right: var(--space-md); bottom: var(--space-md); height: 6px; border-radius: 3px;
  background:
    linear-gradient(to right, transparent 5.6%, var(--color-accent) 5.6% 44.4%, transparent 44.4% 61.1%, var(--color-accent) 61.1% 100%),
    var(--color-rule);
}
.semaine li:first-child::after { left: 0; }
.semaine .ferme { color: var(--color-muted); }
.semaine .ferme::after { background: var(--color-rule); }
.semaine .etat { display: block; font-size: var(--text-sm); }
.heures { margin-top: var(--space-sm); color: var(--color-ink-2); }

/* ------------------------------------------------------------------ pied de page, badge */
.footer { position: relative; background: var(--color-char); color: var(--color-on-dark-2); padding: 0 0 calc(var(--badge-h) + var(--space-2xl)); font-size: .9375rem; }
.footer-in { display: grid; gap: var(--space-xs); padding-top: var(--space-3xl); }
.footer-brand {
  font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 72;
  font-size: var(--text-figure); line-height: 1; letter-spacing: -.03em; color: var(--color-on-dark); margin-bottom: var(--space-lg);
}
.footer-brand span { color: var(--gold); }
.footer-adresse { color: var(--color-on-dark); }
.footer-note { margin-top: var(--space-xs); font-size: var(--text-sm); max-width: 62ch; }

/* Le badge de maquette est une barre de chrome opaque en bas de l'écran, comme la nav en haut :
   le pied de page lui réserve sa hauteur + 8 px, et scroll-padding-bottom garde le focus au-dessus. */
.demo-badge {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-toast); margin: 0;
  min-height: var(--badge-h); display: flex; align-items: center;
  padding: var(--space-2xs) max(var(--gutter), calc((100% - 1200px) / 2 + var(--gutter)));
  background: var(--color-char); color: var(--color-on-dark);
  border-top: 1px solid var(--color-rule-dark);
  font: 500 var(--text-xs)/1.35 var(--font-body);
  pointer-events: none;
}

/* ================================================================== responsive */
@media (max-width: 60rem) {
  :root { --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; --gap-columns: 24px; }
  .services-in, .sides, .temps, .calc-head, .calc, .faq-in, .contact-in, .experience-head, .statement { grid-template-columns: minmax(0, 1fr); }
  .experience h2, .annees, .statement > p, .statement .valeurs { grid-column: 1 / -1; }
  .annees { justify-self: start; order: -1; margin: 0 0 var(--space-md); font-size: clamp(6rem, 30vw, 9rem); }
  .couture-calc { margin-top: var(--space-2xl); }
  .services-photo, .services-text, .side, .temps li, .calc-head h2, .calc-head .lead, .calc-form, .calc-result,
  .faq h2, .faq-list, .contact-coords, .contact-form, .horaires { grid-column: 1 / -1; grid-row: auto; }
  .services-photo { max-width: 34rem; margin-top: var(--space-2xl); }
  .services-photo img { aspect-ratio: 4 / 3; }
  .side + .side { padding-left: 0; border-left: 0; margin-top: var(--space-xl); }
  .temps { row-gap: var(--space-xl); }
  .calc-head .lead { margin-top: var(--space-md); }
  .calc-result { padding: var(--space-2xl) 0 0; margin-top: var(--space-xl); }
  .calc-result::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .faq h2 { position: static; max-width: none; margin-bottom: var(--space-xl); }
  .faq details p { padding-right: 0; }
  .nyon { padding-bottom: var(--space-xl); }
  .nyon-photo { height: clamp(340px, 60vw, 520px); }
  .nyon-in { position: relative; margin-top: calc(-1 * var(--space-3xl)); }
  .nyon-plate { padding: var(--space-xl) var(--space-lg) var(--space-lg) 0; }
}
@media (max-width: 40rem) {
  :root { --section-gap-s: 64px; --section-gap: 80px; --section-gap-l: 96px; --badge-h: 44px; }
  .demo-badge { font-size: .75rem; }
  .semaine { grid-template-columns: minmax(0, 1fr); }
  .semaine li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; column-gap: var(--space-md); min-height: 48px; padding: var(--space-sm) 0; border-left: 0; border-top: 1px solid var(--color-rule); }
  .semaine li:first-child { border-top: 0; }
  .semaine li::after { position: static; grid-column: 2; grid-row: 1; }
  .semaine .ferme .etat { grid-column: 2; grid-row: 1; justify-self: end; position: relative; z-index: var(--z-raised); background: var(--color-paper); padding-left: var(--space-xs); }
  .contact-tel a { font-size: clamp(1.75rem, 8.6vw, 2.5rem); }
  .lisiere { height: 120px; }
  .statement > p:first-child { text-indent: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}