/* Charte Oakâme (charte.css, chargée avant). Arbitrages tranchés une fois ici :
   - BwGradual -> Inter Tight 500 pour les titres, Inter pour le texte.
   - Écart entre sections : 120px, chaque section en porte la moitié en haut et en bas.
   - Tout est carré, sauf les boutons et les étiquettes, en pilule. Aucune ombre.
   - Un seul bouton plein par écran, les autres sont au trait. */
:root {
  --ecart: 60px;                     /* x2 entre deux sections = 120px */
  --marge: var(--spacing-40);
  --nav: 72px;
  --filet: 1px solid var(--color-walnut-ink);
  --filet-doux: 1px solid color-mix(in srgb, var(--color-walnut-ink) 22%, transparent);
  --lavis: color-mix(in srgb, var(--color-walnut-ink) 9%, var(--color-linen-canvas));
  --sortie: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav); scroll-behavior: smooth; }
body {
  background: var(--color-linen-canvas); color: var(--color-charcoal-note);
  font: 400 var(--text-body-sm)/var(--leading-body-sm) var(--font-texte);
  overflow-x: clip;
}
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }

.label { font: 500 var(--text-caption)/var(--leading-caption) var(--font-texte); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-slate-whisper); }
.titre { font: 500 clamp(34px, 4.6vw, var(--text-heading-lg))/1.08 var(--font-titre); letter-spacing: -.045em; color: var(--color-walnut-ink); max-width: 16em; text-wrap: balance; }
.label + .titre { margin-top: var(--spacing-20); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px;
  border-radius: var(--radius-pill); border: var(--filet); background: transparent; color: var(--color-walnut-ink);
  font: 500 var(--text-caption)/1 var(--font-texte); letter-spacing: var(--tracking-caption); text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: background .3s var(--sortie), color .3s var(--sortie);
}
.btn:hover { background: var(--color-walnut-ink); color: var(--color-linen-canvas); }
.btn--plein { background: var(--color-walnut-ink); color: var(--color-linen-canvas); }
.btn--plein:hover { background: transparent; color: var(--color-walnut-ink); }
.btn--clair { border-color: var(--color-linen-canvas); background: var(--color-linen-canvas); color: var(--color-walnut-ink); }
.btn--clair:hover { background: transparent; color: var(--color-linen-canvas); }
:focus-visible { outline: 2px solid var(--color-walnut-ink); outline-offset: 3px; }

.section { max-width: var(--page-max-width); margin: 0 auto; padding: var(--ecart) var(--marge); }
.section > .titre { margin-bottom: var(--spacing-68); }
.attend { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--sortie), transform .9s var(--sortie); }
.attend.vu { opacity: 1; transform: none; }

/* photo : un panneau teinté tant que l'image n'est pas là, l'image par-dessus ensuite */
.photo { background: var(--lavis) var(--img) center / cover no-repeat; }

/* ---------- barre du haut ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav);
  display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-20);
  padding: 0 max(var(--marge), calc((100% - var(--page-max-width)) / 2 + var(--marge)));
  background: var(--color-linen-canvas); border-bottom: var(--filet);
}
.nav__logo { font: 500 22px/1 var(--font-titre); letter-spacing: -.04em; color: var(--color-walnut-ink); white-space: nowrap; }
.nav__liens { display: flex; gap: var(--spacing-40); font: 500 var(--text-caption)/1 var(--font-texte); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.nav__liens a { padding: 16px 0; background: linear-gradient(currentColor, currentColor) 0 72% / 0 1px no-repeat; transition: background-size .35s var(--sortie); }
.nav__liens a:hover { background-size: 100% 1px; }

/* ---------- 1. l'assemblage ---------- */
.montage { position: relative; height: 300vh; border-bottom: var(--filet); overflow: clip; }
.montage__stage {
  position: sticky; top: var(--nav); height: calc(100vh - var(--nav)); height: calc(100dvh - var(--nav));
  max-width: var(--page-max-width); margin: 0 auto; padding: var(--spacing-40) var(--marge);
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: var(--spacing-68); align-items: center;
}
.montage h1 { margin: var(--spacing-20) 0 var(--spacing-40); font: 500 clamp(56px, 8.6vw, 150px)/.92 var(--font-titre); letter-spacing: -.06em; color: var(--color-walnut-ink); }
.montage__lead { max-width: 26em; font-size: var(--text-body); line-height: var(--leading-body); }
.montage__ctas { display: flex; gap: var(--spacing-8); flex-wrap: wrap; margin-top: var(--spacing-40); }

/* La scène : une ligne d'étiquettes, la table, l'invite. La case de la table est un conteneur :
   les écarts des pièces sont en cqw, donc proportionnels à sa largeur. */
.montage__scene { position: relative; align-self: stretch; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: 1fr auto; gap: var(--spacing-20); }
.montage__cadre { grid-column: 1 / -1; grid-row: 2; container-type: size; display: grid; place-items: center; }
/* --ar : rapport largeur / hauteur de l'image, posé par main.js. La table tient dans 72 % de la case. */
.montage__table { position: relative; width: min(72cqw, calc(72cqh * var(--ar, 1.333))); aspect-ratio: var(--ar, 1.333); }
/* Chaque pièce est la même image, découpée au ras du bois : le fond de la photo n'entre dans aucune pièce. */
.piece { position: absolute; inset: 0; background: center / 100% 100% no-repeat; will-change: transform; }

.montage__fiche { grid-row: 1; grid-column: 1; display: flex; flex-wrap: wrap; gap: var(--spacing-8) var(--spacing-20); font: 500 var(--text-caption)/var(--leading-caption) var(--font-texte); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-walnut-ink); }
.montage__fiche li { display: flex; align-items: center; gap: var(--spacing-8); opacity: .3; transition: opacity .5s var(--sortie); }
.montage__fiche li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: var(--filet); transition: background .5s var(--sortie); }
.montage__fiche li.ok { opacity: 1; }
.montage__fiche li.ok::before { background: var(--color-walnut-ink); }
.montage__compte { grid-row: 1; grid-column: 2; text-align: right; font: 500 var(--text-caption)/var(--leading-caption) var(--font-texte); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-walnut-ink); font-variant-numeric: tabular-nums; }
/* « 0 vis » arrive à la fin, à la place de l'invite : même ligne, même case */
.montage__fin, .montage__indice { grid-row: 3; grid-column: 1 / -1; justify-self: center; white-space: nowrap; }
.montage__fin { font: 500 var(--text-heading-sm)/1 var(--font-titre); letter-spacing: -.05em; color: var(--color-walnut-ink); opacity: 0; transform: translateY(8px); transition: opacity .6s var(--sortie), transform .6s var(--sortie); }
.montage.fini .montage__fin { opacity: 1; transform: none; }
.montage__indice {
  align-self: center; padding: 10px 18px; border-radius: var(--radius-pill); border: var(--filet-doux);
  font: 500 var(--text-caption)/1 var(--font-texte); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-slate-whisper);
  opacity: calc(1 - var(--p, 0) * 8);
}

/* ---------- 2. introduction ---------- */
.intro { padding-top: calc(var(--ecart) * 2); }
.intro .titre { max-width: 17em; margin-bottom: var(--spacing-40); }
.intro__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-40); max-width: 1000px; font-size: var(--text-body); line-height: var(--leading-body); }

/* ---------- 3. métiers ---------- */
.metiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-20); }
.metier .photo { aspect-ratio: 4 / 5; transition: transform 1s var(--sortie); }
.metier { overflow: hidden; }
.metier:hover .photo { transform: scale(1.02); }
.metier__n { margin-top: var(--spacing-20); font: 500 var(--text-caption)/1 var(--font-texte); letter-spacing: var(--tracking-caption); color: var(--color-slate-whisper); }
.metier h3 { margin: var(--spacing-8) 0; font: 500 28px/1.15 var(--font-titre); letter-spacing: -.04em; color: var(--color-walnut-ink); }
.metier p:last-child { max-width: 24em; }
.aussi { margin-top: var(--spacing-40); padding-top: var(--spacing-20); border-top: var(--filet-doux); }
.aussi span { margin-right: var(--spacing-20); font: 500 var(--text-caption)/1 var(--font-texte); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-slate-whisper); }

/* ---------- 4. essences ---------- */
.essences { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-68); align-items: center; }
.essences .titre { margin-bottom: var(--spacing-40); }
.essences__choix { display: flex; flex-wrap: wrap; gap: var(--spacing-8); }
.essences__choix button {
  min-height: 44px; padding: 0 22px; border-radius: var(--radius-pill); border: var(--filet); background: transparent; color: var(--color-walnut-ink);
  font: 500 var(--text-caption)/1 var(--font-texte); letter-spacing: var(--tracking-caption); text-transform: uppercase; cursor: pointer;
  transition: background .3s var(--sortie), color .3s var(--sortie);
}
.essences__choix button[aria-selected="true"] { background: var(--color-walnut-ink); color: var(--color-linen-canvas); }
/* quatre lignes réservées : la fiche change de longueur, le bloc ne bouge pas */
.essences__fiche { max-width: 24em; min-height: calc(4 * var(--leading-body) * var(--text-body)); margin-top: var(--spacing-40); font-size: var(--text-body); line-height: var(--leading-body); }
.essences__planche { position: relative; aspect-ratio: 5 / 4; }
.essences__img { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--sortie); }
.essences__img.is-on { opacity: 1; }
.essences__img[data-bois="chene"] { --lavis: #c9a173; }
.essences__img[data-bois="frene"] { --lavis: #e3d2b4; }
.essences__img[data-bois="noyer"] { --lavis: #6b4a36; }
.essences__img[data-bois="chataignier"] { --lavis: #d2aa6e; }

/* ---------- 5. chiffres ---------- */
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); }
.chiffres div { padding: var(--spacing-40) var(--spacing-20) var(--spacing-40) 0; border-top: var(--filet); font: 500 var(--text-caption)/var(--leading-caption) var(--font-texte); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-slate-whisper); }
.chiffres strong { display: block; margin-bottom: var(--spacing-20); font: 500 clamp(48px, 7vw, var(--text-display))/1 var(--font-titre); letter-spacing: -.06em; text-transform: none; color: var(--color-walnut-ink); white-space: nowrap; }

/* ---------- 6. réalisations ---------- */
.grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-40) var(--spacing-20); }
.grille .grand { grid-column: span 2; }
.grille .photo { aspect-ratio: 4 / 5; }
.grille .grand .photo { aspect-ratio: auto; height: calc(100% - 56px); min-height: 280px; }
.grille figure { display: flex; flex-direction: column; }
.grille figcaption { display: flex; justify-content: space-between; gap: var(--spacing-20); margin-top: var(--spacing-20); font: 500 var(--text-caption)/var(--leading-caption) var(--font-texte); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-slate-whisper); }
.grille figcaption b { font-weight: 500; color: var(--color-walnut-ink); }

/* ---------- 7. déroulé ---------- */
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-20); }
.etapes li { padding-top: var(--spacing-20); border-top: var(--filet); }
.etapes span { font: 500 var(--text-caption)/1 var(--font-texte); letter-spacing: var(--tracking-caption); color: var(--color-slate-whisper); }
.etapes h3 { margin: var(--spacing-40) 0 var(--spacing-8); font: 500 28px/1.15 var(--font-titre); letter-spacing: -.04em; color: var(--color-walnut-ink); }

/* ---------- 8. avis ---------- */
.avis__liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-20); }
.avis blockquote { display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing-40); padding: var(--spacing-40); border: var(--filet-doux); }
.avis blockquote p { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-walnut-ink); }
.avis footer { font: 500 var(--text-caption)/1 var(--font-texte); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-slate-whisper); }

/* ---------- 9. zone ---------- */
.zone { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-68); align-items: start; }
.zone__villes { display: grid; grid-template-columns: repeat(3, 1fr); }
.zone__villes li { padding: 14px 0; border-top: var(--filet-doux); color: var(--color-walnut-ink); }

/* ---------- 10. contact ---------- */
.contact { margin-top: var(--ecart); background: var(--color-walnut-ink); color: var(--color-linen-canvas); }
.contact.attend { transform: none; }
.contact__in { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-68); padding-top: calc(var(--ecart) * 2); padding-bottom: calc(var(--ecart) * 2); align-items: start; }
.contact .label { color: color-mix(in srgb, var(--color-linen-canvas) 65%, transparent); }
.contact .titre { color: var(--color-linen-canvas); }
.contact__tel { display: block; margin: var(--spacing-40) 0 var(--spacing-20); font: 500 clamp(44px, 6.4vw, 96px)/1 var(--font-titre); letter-spacing: -.06em; white-space: nowrap; }
.contact__infos { font-size: var(--text-body-sm); line-height: 1.6; opacity: .85; }
.contact__infos a { text-decoration: underline; text-underline-offset: 3px; }
.rappel { display: grid; gap: var(--spacing-20); padding: var(--spacing-40); border: 1px solid color-mix(in srgb, var(--color-linen-canvas) 35%, transparent); }
.rappel__lead { font: 500 26px/1.15 var(--font-titre); letter-spacing: -.04em; margin-bottom: var(--spacing-8); }
.rappel label span { display: block; margin-bottom: var(--spacing-8); font: 500 var(--text-caption)/1 var(--font-texte); letter-spacing: var(--tracking-caption); text-transform: uppercase; opacity: .7; }
.rappel input { width: 100%; min-height: 44px; padding: var(--spacing-8) 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--color-linen-canvas) 50%, transparent); border-radius: 0; background: transparent; color: inherit; font: inherit; }
.rappel input::placeholder { color: color-mix(in srgb, var(--color-linen-canvas) 40%, transparent); }
.rappel input:focus { outline: 0; border-bottom-color: var(--color-linen-canvas); }
.rappel .btn { justify-self: start; margin-top: var(--spacing-8); }
.rappel__ok { font: 500 26px/1.15 var(--font-titre); letter-spacing: -.04em; }

.pied { display: flex; justify-content: space-between; gap: var(--spacing-20); flex-wrap: wrap; padding: var(--spacing-20) max(var(--marge), calc((100% - var(--page-max-width)) / 2 + var(--marge))); background: var(--color-walnut-ink); color: color-mix(in srgb, var(--color-linen-canvas) 70%, transparent); font-size: 14px; }
.pied a { text-decoration: underline; text-underline-offset: 3px; color: var(--color-linen-canvas); }

@media (max-width: 899px) {
  :root { --marge: var(--spacing-20); --nav: 60px; --ecart: 44px; }
  .nav__liens { display: none; }
  .nav__logo { font-size: 19px; }
  .nav .btn { min-height: 40px; padding: 0 16px; font-size: 11px; }

  .montage { height: 260vh; }
  .montage__stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: var(--spacing-20); padding: var(--spacing-20) var(--marge) var(--spacing-20); align-items: stretch; }
  .montage__scene { grid-row: 1; }
  .montage__texte { grid-row: 2; }
  .montage h1 { margin: var(--spacing-8) 0 var(--spacing-20); font-size: clamp(48px, 15vw, 64px); }
  .montage__lead { font-size: 16px; }
  .montage__ctas { margin-top: var(--spacing-20); }
  .montage__ctas .btn:not(.btn--plein) { display: none; }
  .montage__fin { font-size: 28px; }
  .montage__scene { gap: var(--spacing-8); }
  .montage__compte { display: none; }
  .montage__fiche { grid-column: 1 / -1; justify-content: space-between; gap: var(--spacing-8); font-size: var(--text-label); }
  .montage__table { width: min(80cqw, calc(80cqh * var(--ar, 1.333))); }

  .intro__cols, .essences, .zone, .contact__in { grid-template-columns: 1fr; gap: var(--spacing-40); }
  .intro__cols { gap: var(--spacing-20); font-size: var(--text-body-sm); }
  .section > .titre { margin-bottom: var(--spacing-40); }
  .metiers { grid-template-columns: 1fr; gap: var(--spacing-40); }
  .metier .photo { aspect-ratio: 16 / 11; }
  .essences .titre { margin-bottom: var(--spacing-20); }
  .essences__fiche { margin-top: var(--spacing-20); font-size: var(--text-body-sm); min-height: calc(5 * var(--leading-body) * var(--text-body-sm)); }
  .chiffres { grid-template-columns: 1fr 1fr; column-gap: var(--spacing-20); }
  .chiffres div { padding: var(--spacing-20) 0 var(--spacing-40); }
  .grille { grid-template-columns: 1fr 1fr; gap: var(--spacing-40) var(--spacing-8); }
  .grille .grand .photo { height: auto; aspect-ratio: 16 / 11; min-height: 0; }
  .grille figcaption { flex-direction: column; gap: var(--spacing-4); }
  .etapes { grid-template-columns: 1fr 1fr; gap: var(--spacing-40) var(--spacing-20); }
  .etapes h3 { margin-top: var(--spacing-20); font-size: 24px; }
  .avis__liste { grid-template-columns: 1fr; }
  .avis blockquote { padding: var(--spacing-20); gap: var(--spacing-20); }
  .avis blockquote p { font-size: var(--text-body-sm); }
  .zone__villes { grid-template-columns: 1fr 1fr; }
  .rappel { padding: var(--spacing-20); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .montage { height: auto; }
  .montage__stage { position: relative; top: 0; height: auto; min-height: 80vh; }
  .montage__indice { display: none; }
  * { transition: none !important; }
}

/* en vignette sur bloomwise.studio (embed.js) : pas de défilement propre, pas de barre d'appel */
html.embarque { overflow: hidden; scroll-behavior: auto; }
html.embarque .callbar { display: none; }