/* Myrta Construction — feuille de style
   Palette et typographie : charte Myrta (graphite, orange sécurité, gris acier, béton clair). */

@font-face { font-family: "Archivo Black"; font-weight: 400; font-display: swap;
  src: url("fonts/archivo-black-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 400; font-display: swap;
  src: url("fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap;
  src: url("fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }

:root {
  --bg: #1B1D1F;          /* graphite */
  --surface: #232629;
  --ink: #EEF0F1;
  --muted: #AEB2B6;       /* gris acier éclairci pour le texte secondaire */
  --accent: #FF4D00;      /* orange sécurité */
  --on-accent: #1B1D1F;
  --paper: #C9CCCE;       /* béton clair */
  --paper-ink: #1B1D1F;

  --font: "Space Grotesk", system-ui, sans-serif;
  --font-display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --t-display: clamp(40px, 5.8vw, 88px);
  --t-title: clamp(36px, 4.4vw, 68px);
  --t-statement: clamp(22px, 2.2vw, 32px);
  --t-body: 18px;
  --t-small: 15px;

  --m: clamp(16px, 4vw, 56px);     /* marge extérieure, identique à gauche et à droite */
  --gap: clamp(12px, 1.6vw, 24px);
  --section: clamp(120px, 14vw, 220px);
  --bar-h: 64px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--bar-h); color-scheme: dark; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--t-body)/1.55 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }

.skip { position: absolute; left: var(--m); top: -100px; z-index: 50; background: var(--ink); color: var(--bg);
  padding: 10px 16px; font-size: var(--t-small); }
.skip:focus { top: 12px; }

/* --- Type ------------------------------------------------------------- */
.display { font-family: var(--font-display); font-weight: 400; font-size: var(--t-display); line-height: 1; letter-spacing: -0.02em; }
.title { font-family: var(--font-display); font-weight: 400; font-size: var(--t-title); line-height: 1.04; letter-spacing: -0.02em; }
.statement { font-size: var(--t-statement); line-height: 1.28; letter-spacing: -0.01em; }
.lede { font-size: var(--t-body); line-height: 1.55; color: var(--ink); max-width: 34ch; }

/* --- Boutons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border-radius: 0;
  background: var(--accent); color: var(--on-accent);
  font: 500 var(--t-small)/1 var(--font); text-decoration: none;
  transition: transform 140ms var(--ease-out), background-color 160ms ease;
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #FF6A26; } }
.btn-small { min-height: 40px; padding: 0 18px; }
.btn-block { display: flex; width: 100%; min-height: 56px; }

/* --- Barre ------------------------------------------------------------ */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: flex; align-items: center; gap: 32px; padding-left: var(--m); padding-right: var(--m);
  background: var(--bg);
}
.bar-logo { color: var(--ink); display: block; }
.bar-logo .logo { height: 22px; width: auto; }
.bar-nav { display: flex; gap: 28px; margin-left: auto; font-size: var(--t-small); }
.bar-nav a { text-decoration: none; color: var(--muted); transition: color 160ms ease; }
.bar-nav a:hover, .bar-nav a:focus-visible { color: var(--ink); }
@media (max-width: 700px) { .bar-nav { display: none; } .bar .btn-small { margin-left: auto; } }

/* --- Le mur (scène pilotée au défilement) ----------------------------- */
.story { position: relative; z-index: 1; background: var(--bg); }
.stage { position: relative; }
.wall-canvas { display: none; }
.scene-fallback { width: 100%; height: auto; margin-top: var(--bar-h); }
.steps { padding: 48px var(--m) 0; display: grid; gap: 64px; }
.step-index { display: none; }
.cue { display: none; }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }

/* Mode animé, activé par le script quand le rendu 3D fonctionne */
.webgl .story { height: calc(var(--steps, 9) * 50svh + 100svh); }
.webgl .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.webgl .wall-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.webgl .scene-fallback { display: none; }
.webgl .steps {
  position: absolute; z-index: 2; left: var(--m); top: 50%; translate: 0 -46%;
  width: min(44vw, 640px); padding: 0; display: block; height: 60svh;
}
.webgl .step {
  position: absolute; inset: auto 0 auto 0; top: 50%; translate: 0 -50%;
  opacity: 0; pointer-events: none; visibility: hidden; transition: visibility 0s linear 450ms;
}
.webgl .step > * { opacity: 0; transform: translateY(22px);
  transition: opacity 420ms var(--ease-out), transform 640ms var(--ease-out); }
.webgl .step.is-on { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.webgl .step.is-on > * { opacity: 1; transform: none; }
.webgl .step.is-on > :nth-child(2) { transition-delay: 70ms; }
.webgl .step.is-on > :nth-child(3) { transition-delay: 140ms; }
.webgl .step .lede { margin-top: 24px; }
.webgl .cue { display: inline; font-size: var(--t-small); color: var(--muted); }

.webgl .step-index {
  display: block; position: absolute; z-index: 2; left: var(--m); bottom: 36px;
  margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; max-width: 46vw;
  font-size: var(--t-small); line-height: 1.9; color: var(--muted);
  opacity: 0; transition: opacity 400ms ease;
}
.webgl .step-index.is-on { opacity: 1; }
.step-index li { transition: color 240ms ease; }
.step-index li.is-on { color: var(--ink); }
.step-index li.is-done { color: #7E8388; }

@media (max-width: 899px) {
  .webgl .steps {
    left: var(--m); right: var(--m); top: auto; bottom: 28px; translate: none;
    width: auto; height: 38svh;
  }
  .webgl .step { top: auto; bottom: 0; translate: none; }
  .webgl .step .lede { margin-top: 14px; }
  .webgl .step-index { display: none; }
  .display { font-size: clamp(34px, 10vw, 52px); }
}

/* --- Notre métier ----------------------------------------------------- */
.metier {
  position: relative; z-index: 1; background: var(--bg);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
  padding: var(--section) var(--m) clamp(48px, 5vw, 80px);
}
.metier-head { grid-column: 7 / 13; }
.metier-head .statement { margin-top: 32px; }
.metier-head .famille { margin-top: 24px; max-width: 46ch; }
.metier-head .zone { margin-top: 20px; max-width: 46ch; }
.metier-photo { grid-column: 1 / 6; grid-row: 1; margin: 0; align-self: start; margin-top: 8px; }
.metier-photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.services { grid-column: 1 / -1; margin: 96px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.service { display: grid; gap: 12px; align-content: start; padding: 28px 0 0; }

.service dt { font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.1; font-weight: 400; letter-spacing: -0.01em; }
.service dd { margin: 0; color: var(--ink); }
@media (max-width: 899px) {
  .metier { display: block; padding-bottom: 96px; }
  .metier-photo { width: 100%; margin: 40px 0 0; }
  .services { margin-top: 56px; grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .service { gap: 8px; padding: 20px 0 0; }
}

/* --- Chantiers : scène « chantier-film » ----------------------------------- */
/* Composition finie (sans script, mouvement réduit) : la vidéo en bandeau, puis la liste légendée. */
.chantier-scene { position: relative; z-index: 1; background: var(--bg); }
.cf-bg { position: relative; aspect-ratio: 16 / 9; max-height: 70svh; width: 100%; overflow: hidden; background: var(--surface); }
.cf-bg::after { content: ""; position: absolute; inset: 0; background: rgba(27, 29, 31, var(--veil, 0.5)); }
.cf-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-intro { padding: 48px var(--m) 0; }
.cf-title { max-width: 14ch; }
.cf-lede { margin-top: 20px; font-size: var(--t-statement); line-height: 1.3; max-width: 30ch; }
.cf-items { list-style: none; margin: 0; padding: 64px var(--m) var(--section); display: grid; gap: 72px; }
.cf-item { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: center; }
.cf-photo { grid-column: 5 / 13; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface); }
.cf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-text { grid-column: 1 / 5; grid-row: 1; }
.cf-name { font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 50px); line-height: 1.04; letter-spacing: -0.02em; font-weight: 400; max-width: 16ch; text-wrap: balance; }
.cf-desc { margin-top: 20px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.4; max-width: 30ch; }
.chantier-scene .vid-toggle { display: none; }
@media (max-width: 899px) {
  .cf-item { display: block; }
  .cf-text { margin-top: 20px; }
}

/* Scène active : la vidéo remplit l'écran, les photos montent par-dessus */
.chantier-scene.is-live .cf-bg { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; height: 100%; }
.chantier-scene.is-live .cf-video { object-position: 50% 38%; }
.chantier-scene.is-live .cf-intro {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  padding: calc(var(--bar-h) + 6svh) var(--m) 40px;
  background: var(--bg);   /* bandeau uni : le titre reste lisible quel que soit le ciel */
}
.chantier-scene.is-live .cf-title { font-size: clamp(48px, 6.4vw, 104px); }
.chantier-scene.is-live .cf-items { position: absolute; inset: 0; padding: 0; display: block; z-index: 3; pointer-events: none; }
.chantier-scene.is-live .cf-item { position: absolute; inset: 0; display: block; pointer-events: none; }
.chantier-scene.is-live { --pw: min(60vw, calc((100svh - var(--bar-h) - 96px) * 16 / 9)); }
/* Centrage sans « translate » : l'animation (GSAP) réécrit cette propriété */
.chantier-scene.is-live .cf-photo {
  position: absolute; right: var(--m); width: var(--pw);
  top: calc(var(--bar-h) + (100svh - var(--bar-h) - var(--pw) * 9 / 16) / 2);
  visibility: hidden;
}
.chantier-scene.is-live .cf-text {
  position: absolute; left: var(--m); top: var(--bar-h); bottom: 0;
  width: calc(100vw - var(--m) * 2 - var(--pw) - 48px);
  display: flex; flex-direction: column; justify-content: center;
  visibility: hidden;
}
.chantier-scene.is-live .vid-toggle {
  display: inline-flex; align-items: center; position: absolute; z-index: 4;
  right: var(--m); bottom: 24px; min-height: 40px; padding: 0 16px;
  background: var(--bg); color: var(--ink); border: 0; border-radius: 0;
  font: 500 var(--t-small)/1 var(--font); cursor: pointer;
}
.chantier-scene.is-live .cf-item.is-tall { --ph: calc(100svh - var(--bar-h) - 72px); }
.chantier-scene.is-live .cf-item.is-tall .cf-photo {
  width: calc(var(--ph) * 3 / 4); aspect-ratio: 3 / 4;
  top: calc(var(--bar-h) + 36px); right: calc(var(--m) + (var(--pw) - var(--ph) * 3 / 4) / 2);
}
.cf-item.is-tall .cf-photo { aspect-ratio: 3 / 4; }
@media (max-width: 899px) {
  .chantier-scene.is-live .cf-intro { padding-top: calc(var(--bar-h) + 24px); }
  /* Téléphone : photo en grand en haut, légende sur un bandeau uni en dessous.
     La hauteur de la photo laisse toujours ~200 px à la légende, même avec les barres du navigateur. */
  .chantier-scene.is-live .cf-item { --php: min(75vw, calc(100svh - var(--bar-h) - 200px)); }
  .chantier-scene.is-live .cf-item.is-tall { --php: min(125vw, calc(100svh - var(--bar-h) - 200px)); }
  .chantier-scene.is-live .cf-photo,
  .chantier-scene.is-live .cf-item.is-tall .cf-photo {
    left: 0; right: 0; top: var(--bar-h); width: auto; margin: 0;
    height: var(--php); aspect-ratio: auto;
  }
  .chantier-scene.is-live .cf-text,
  .chantier-scene.is-live .cf-item.is-tall .cf-text {
    left: 0; right: 0; bottom: 0; width: auto; margin: 0;
    top: calc(var(--bar-h) + var(--php));
    display: block; padding: 20px var(--m) 20px; background: var(--bg);
  }
  .cf-item.is-tall .cf-photo { aspect-ratio: 4 / 5; }
  /* Bouton lecture/pause : en haut à droite, sur la photo, loin de la légende */
  .chantier-scene.is-live .vid-toggle { top: calc(var(--bar-h) + 12px); bottom: auto; right: 12px; }
  .chantier-scene.is-live .cf-name { font-size: clamp(28px, 8vw, 40px); }
  .chantier-scene.is-live .cf-desc { font-size: 17px; line-height: 1.4; margin-top: 10px; }
}

/* --- Contact ---------------------------------------------------------- */
.contact { position: relative; z-index: 1; background: var(--bg); min-height: 100svh; }
.contact-photo img { width: 100%; height: 100svh; object-fit: cover; object-position: 60% 50%; }
.card {
  position: absolute; top: calc(var(--bar-h) + 48px); left: var(--m); width: 380px;
  background: var(--paper); color: var(--paper-ink); padding: 32px; border-radius: 0;
}
.card-title { font-family: var(--font-display); font-size: var(--t-statement); line-height: 1.1; font-weight: 400; letter-spacing: -0.01em; }
.quote-note { margin-top: 12px; font-size: var(--t-small); line-height: 1.5; min-height: 0; }
.quote-note:empty { display: none; }
.card-intro { margin-top: 12px; font-size: var(--t-small); line-height: 1.5; }
.card address { font-style: normal; margin: 24px 0 32px; display: grid; gap: 14px; font-size: 17px; }
.card .tels { display: grid; font-variant-numeric: tabular-nums; }
.card a:not(.btn) { color: var(--paper-ink); }
@media (max-width: 899px) {
  .contact { min-height: 0; padding-bottom: 48px; }
  .contact-photo img { height: 70svh; }
  .card { position: relative; top: auto; left: auto; width: auto; margin: -80px var(--m) 0; }
}

/* --- Pied de page ----------------------------------------------------- */
.foot {
  position: sticky; bottom: 0; z-index: 0; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto auto;
  background: var(--paper); color: var(--paper-ink); padding: calc(var(--bar-h) + 32px) var(--m) 20px;
  font-size: var(--t-small);
}
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.foot-k { font-weight: 500; margin-bottom: 6px; }
.foot-cols p:not(.foot-k) { color: #3A3E42; line-height: 1.7; }
.foot a { color: inherit; }
.foot-mark { grid-row: 3; align-self: end; color: var(--paper-ink); }
.foot-mark .logo-full { width: 100%; height: auto; }
.foot-legal { grid-row: 4; margin-top: 20px; max-width: 90ch; font-size: 13px; color: #3A3E42; }
@media (max-width: 899px) {
  .foot-cols { grid-template-columns: 1fr 1fr; row-gap: 32px; }
}

/* --- Apparitions ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px);
    transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out); }
  .js [data-reveal].in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
}

/* La scène s'efface du côté du texte, pour que celui-ci reste lisible */
.webgl .wall-canvas {
  -webkit-mask-image: linear-gradient(to right, /* taste-skill-ignore: fondu de la scène sous le texte */ transparent 0, transparent 26%, #000 48%);
          mask-image: linear-gradient(to right, /* taste-skill-ignore */ transparent 0, transparent 26%, #000 48%);
}
@media (max-width: 899px) {
  .webgl .wall-canvas {
    -webkit-mask-image: linear-gradient(to bottom, /* taste-skill-ignore */ #000 0, #000 50%, transparent 66%);
            mask-image: linear-gradient(to bottom, /* taste-skill-ignore */ #000 0, #000 50%, transparent 66%);
  }
}

/* --- Réalisations ---------------------------------------------------- */
/* Réalisations : sans script, grille légendée ; avec script, scène « realisations-film » */
.real-scene {
  position: relative; z-index: 1;
  background: radial-gradient(110% 85% at 68% 42%, #353A3F 0%, #262A2E 42%, var(--bg) 100%);  /* taste-skill-ignore: demandé, léger dégradé de fond */
}
.real-scene .scene-stage { padding: var(--section) var(--m); }
.real-title { margin-bottom: 48px; }
.real-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); }
.real-photo { margin: 0; overflow: hidden; }
.real-photo img { width: 100%; height: auto; display: block; }
.real-cap { margin-top: 12px; font-size: var(--t-body); }

.real-scene.is-live .scene-stage {
  padding: 0; height: 100svh; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 28px;
  padding-top: var(--bar-h);
}
.real-scene.is-live .real-title { margin: 0; padding: 0 var(--m); font-size: clamp(48px, 5.6vw, 96px); flex: none; }
.real-scene.is-live { --rh: calc(100svh - var(--bar-h) - 220px); }
.real-scene.is-live .real-items {
  display: flex; gap: clamp(16px, 2vw, 32px); padding: 0 var(--m);
  width: max-content; will-change: transform; flex: none;
}
.real-scene.is-live .real-item { flex: none; }
.real-scene.is-live .real-photo { height: var(--rh); width: calc(var(--rh) * var(--ar)); overflow: hidden; }
.real-scene.is-live .real-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); will-change: transform; }
.real-scene.is-live .real-cap { margin-top: 14px; font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 26px); line-height: 1.15; }
@media (max-width: 899px) {
  .real-scene.is-live { --rh: min(58svh, 520px); }
  .real-scene.is-live .real-title { font-size: clamp(40px, 11vw, 60px); }
  .real-scene.is-live .real-cap { font-size: 19px; }
}

/* --- Grande photo ------------------------------------------------------ */
.feature { position: relative; z-index: 1; background: var(--bg); height: 100svh; min-height: 560px; overflow: hidden; }
.feature-photo { position: absolute; inset: 0; margin: 0; }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; will-change: transform; }
.feature-text {
  position: absolute; left: var(--m); bottom: 48px; max-width: min(560px, calc(100vw - var(--m) * 2));
  background: var(--bg); padding: 28px 32px 30px;
}
.feature-text p { margin-top: 12px; color: var(--ink); }
@media (max-width: 899px) {
  .feature { height: auto; min-height: 0; }
  .feature-photo { position: relative; aspect-ratio: 4 / 5; }
  .feature-text { position: relative; left: auto; bottom: auto; max-width: none; padding: 24px var(--m) 8px; }
}

/* --- Mentions légales (panneau ouvert par #mentions) ------------------ */
.legal-panel {
  display: none; position: fixed; inset: 0; z-index: 40; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg);
}
html:not(.js) .legal-panel:target, .legal-panel.is-open { display: block; }
.legal { max-width: 46rem; padding: calc(var(--bar-h) + 24px) var(--m) var(--section); }
.legal-close { display: inline-flex; min-height: 44px; align-items: center; margin-bottom: 32px;
  font-size: var(--t-small); color: var(--ink); }
.legal-date { margin-top: 16px; color: var(--muted); font-size: var(--t-small); }
.legal section { margin-top: 56px; display: grid; gap: 12px; }
.legal h3 { font-size: var(--t-statement); line-height: 1.15; letter-spacing: -0.01em; }
.legal h4 { font-size: var(--t-body); margin-top: 12px; }
.legal p { color: var(--ink); max-width: 65ch; }

/* --- Téléphone : zones de toucher d'au moins 44 px ----------------------- */
@media (max-width: 899px) {
  .bar-logo { padding: 11px 0; }
  .foot-cols a, .card address a { display: inline-block; padding: 9px 0; line-height: 1.45; }
  .foot-cols p:not(.foot-k) { line-height: 1.5; }
  .foot-legal a { display: inline-block; padding: 12px 0; }
  .card .tels { gap: 0; }
}

/* --- Titres : les lettres apparaissent une à une, du flou au net -------- */
.split .w { display: inline-block; white-space: nowrap; }
.split .ch { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .split .ch {
    opacity: 0; transform: translateY(0.32em);
    transition: opacity 380ms var(--ease-out), transform 620ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 24ms);
  }
  .js .split.is-in .ch { opacity: 1; transform: none; }
}

/* --- Choix de la langue ----------------------------------------------- */
.lang { display: flex; gap: 2px; font-size: var(--t-small); font-weight: 500; }
.lang a { color: var(--muted); text-decoration: none; padding: 10px 6px; min-width: 32px; text-align: center; }
.lang a[aria-current="page"] { color: var(--ink); }
.lang a:hover, .lang a:focus-visible { color: var(--ink); }
@media (max-width: 700px) { .lang { margin-left: auto; } .bar .btn-small { margin-left: 4px; } .lang a { padding: 10px 4px; min-width: 28px; } }