/* Charte 2020 (charte.css, chargée avant ce fichier). Voir ../charte/2020/DESIGN.md.
   Arbitrages tranchés une fois ici :
   - Une seule famille, une seule graisse (400), interlignage serré au-dessus de 21px, jamais de gras.
   - Pas de bouton plein : tout ce qui se clique est un filet Olive Ink de 1px, angles vifs.
   - 20px reste l'unité ; les sections respirent en multiples de 20 (100px = 5 x 20).
   - Les tailles d'affichage de la charte (137px, 75px) sont des plafonds : elles descendent avec l'écran.
   - Chaque bande prend une des six surfaces de la charte ; le texte reste Olive Ink partout. */
:root {
  --u: var(--spacing-20);
  --ecart: calc(var(--u) * 5);
  --grand: clamp(54px, 9.6vw, var(--text-display));
  --moyen: clamp(34px, 5.2vw, var(--text-heading));
  --encre: var(--color-olive-ink);
  --barre: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--barre); }
body {
  margin: 0; background: var(--color-signal-orange); color: var(--encre);
  font: var(--font-weight-regular) var(--text-caption) / var(--leading-caption) var(--font-helvetica-lt-pro);
  letter-spacing: -0.05em; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol, blockquote, figure { margin: 0; padding: 0; font-weight: var(--font-weight-regular); }
ol { list-style: none; }

.grand { font-size: var(--grand); line-height: var(--leading-display); letter-spacing: -0.05em; }
.sous { font-size: var(--text-subheading); line-height: var(--leading-subheading); text-transform: uppercase; }
.corps { font-size: var(--text-subheading); line-height: 1.35; max-width: 34em; }

/* ---------- barre du haut ---------- */
/* une vraie barre, fond plein : le nom et le numéro restent lisibles quand la photo défile dessous */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 20; height: var(--barre); display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--u); font-size: var(--text-subheading); line-height: var(--leading-subheading);
  background: var(--color-signal-orange); border-bottom: 1px solid var(--encre);
}
.nav a { text-decoration: none; }
.nav__tel { border-bottom: 1px solid var(--encre); }

/* ---------- 1. le chantier ---------- */
.chantier { position: relative; height: 470vh; background: var(--color-signal-orange); }
/* sous la barre ; la plus grande hauteur d'écran, pour que la photo couvre encore tout quand Safari replie sa barre */
.chantier__scene { position: sticky; top: var(--barre); height: calc(100vh - var(--barre)); height: calc(100lvh - var(--barre)); overflow: hidden; }
.chantier__titre {
  position: absolute; inset: 0 0 auto; padding: var(--u) var(--u) 0; z-index: 2;
  transform: translateY(calc(var(--e, 0) * -45vh)); opacity: calc(1 - var(--e, 0) * 1.6);
}
.chantier__titre h1 { font-size: var(--grand); line-height: var(--leading-display); letter-spacing: -0.05em; max-width: 11em; }
.chantier__titre .sous { margin-top: var(--u); }
/* la photo part dans un cadre sous le titre et s'ouvre en plein écran */
.chantier__photo {
  position: absolute; inset: 0; overflow: hidden; background: #e9e1d1;
  clip-path: inset(calc((1 - var(--e, 0)) * var(--haut, 50vh)) calc((1 - var(--e, 0)) * var(--u)) calc((1 - var(--e, 0)) * var(--u)));
}
.chantier__photo img, .chantier__photo canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* tant que le cadre est fermé, l'image descend de la moitié de la marge du haut : le cadre montre le milieu du mur */
.chantier__avant, .chantier__peinture, .chantier__apres { transform: translateY(calc((1 - var(--e, 0)) * var(--haut, 50vh) * .5)); }
.chantier__apres { opacity: var(--fin, 0); }
.chantier__rouleau {
  inset: auto !important; left: 0; top: 0; width: var(--rw, 200px) !important; height: auto !important; object-fit: contain !important;
  transform: translate(var(--rx, -500px), var(--ry, -500px)) rotate(var(--rr, 0deg)); transform-origin: 50% 7%;
  opacity: var(--ro, 0); will-change: transform; filter: drop-shadow(0 18px 22px rgba(8, 22, 24, .28));
}
.cartel {
  position: absolute; left: var(--u); bottom: var(--u); display: grid; padding: calc(var(--u) * .6) var(--u);
  background: var(--color-pearl); font-size: var(--text-subheading); line-height: var(--leading-subheading);
  opacity: var(--fin, 0); transform: translateY(calc((1 - var(--fin, 0)) * 16px));
}
.cartel span + span { font-size: var(--text-caption); line-height: var(--leading-caption); text-transform: uppercase; }
.chantier__indice {
  position: absolute; right: var(--u); bottom: calc(var(--u) * 2); writing-mode: vertical-rl; transform: rotate(180deg);
  opacity: calc(1 - var(--e, 0) * 3);
}

/* ---------- les bandes de couleur ---------- */
.bande { padding: var(--ecart) var(--u); scroll-margin-top: var(--barre); }
.bande--sauge { background: var(--color-sage-mist); }
.bande--perle { background: var(--color-pearl); }
.bande--sienne { background: var(--color-burnt-sienna); }
.bande--orange { background: var(--color-signal-orange); }
.bande > .sous { margin-bottom: calc(var(--u) * 2); }

.intro .grand { max-width: 9em; }
.intro .sous { margin: var(--u) 0 calc(var(--u) * 2); }

.lignes li {
  display: grid; grid-template-columns: 3em 1fr 1fr; gap: var(--u); align-items: baseline;
  padding: var(--u) 0 calc(var(--u) * 1.5); border-top: 1px solid var(--encre);
}
.lignes li:last-child { border-bottom: 1px solid var(--encre); }
.lignes h3 { font-size: var(--moyen); line-height: var(--leading-heading); letter-spacing: -0.05em; }
.lignes p { font-size: var(--text-subheading); line-height: 1.3; }
.n { font-size: var(--text-subheading); }

.realisations .grand { margin-bottom: calc(var(--u) * 2); }
.tuiles { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--u); align-items: start; }
.tuile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.tuile--large img { aspect-ratio: auto; height: 100%; }
.tuile--large { align-self: stretch; display: grid; grid-template-rows: 1fr auto; }
.tuile figcaption { padding-top: calc(var(--u) * .5); }

.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--u); }
.etapes li { border-top: 1px solid var(--encre); padding-top: var(--u); }
.etapes h3 { font-size: var(--text-subheading); line-height: var(--leading-subheading); text-transform: uppercase; margin: var(--u) 0 calc(var(--u) * .5); }

.citations { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--u); }
.citations blockquote { border-top: 1px solid var(--encre); padding-top: var(--u); }
.citations p { font-size: var(--text-subheading); line-height: 1.3; }
.citations footer { margin-top: var(--u); text-transform: uppercase; }

.zone .villes { margin-top: calc(var(--u) * 2); font-size: var(--text-subheading); line-height: 1.4; max-width: 40em; }

.contact__tel { display: inline-block; text-decoration: none; margin-bottom: var(--u); }
.contact .corps { margin-bottom: calc(var(--u) * 2); }
.formulaire { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--u); max-width: 1100px; }
.formulaire label { display: grid; gap: calc(var(--u) * .25); text-transform: uppercase; }
.formulaire .large { grid-column: 1 / -1; }
.formulaire input {
  font: inherit; font-size: var(--text-subheading); text-transform: none; letter-spacing: -0.05em; color: var(--encre);
  background: transparent; border: 0; border-bottom: 1px solid var(--encre); border-radius: var(--radius-buttons); padding: calc(var(--u) * .4) 0;
}
.formulaire input::placeholder { color: var(--encre); opacity: .5; }
.formulaire input:focus { outline: none; border-bottom-width: 2px; }
.bouton {
  justify-self: start; font: inherit; font-size: var(--text-subheading); letter-spacing: -0.05em; color: var(--encre);
  background: transparent; border: 1px solid var(--encre); border-radius: var(--radius-buttons); padding: var(--u); cursor: pointer;
}
.bouton:hover { opacity: .7; }
.formulaire__ok { grid-column: 1 / -1; font-size: var(--text-subheading); }

.pied { display: flex; justify-content: space-between; gap: var(--u); padding: var(--u); background: var(--color-signal-orange); border-top: 1px solid var(--encre); }

.callbar {
  position: fixed; inset: auto 0 0; z-index: 30; display: none; padding: var(--u); text-align: center; text-decoration: none;
  font-size: var(--text-subheading); background: var(--color-signal-orange); border-top: 1px solid var(--encre);
  padding-bottom: calc(var(--u) + env(safe-area-inset-bottom)); transition: transform .4s ease;
}
.callbar.cache { transform: translateY(110%); }

@media (max-width: 860px) {
  .lignes li { grid-template-columns: 2.2em 1fr; }
  .lignes p { grid-column: 2; }
  .tuiles { grid-template-columns: 1fr 1fr; }
  .tuile--large { grid-column: 1 / -1; }
  .tuile--large img { aspect-ratio: 3 / 2; }
  .etapes, .citations { grid-template-columns: 1fr 1fr; }
  .formulaire { grid-template-columns: 1fr; }
  .callbar { display: block; }
  .pied { flex-direction: column; padding-bottom: calc(var(--u) * 5); }
}
@media (max-width: 560px) {
  .nav { font-size: 17px; }
  .etapes, .citations { grid-template-columns: 1fr; }
}

/* en vignette sur bloomwise.studio : pas de barre d'appel, la scène joue seule */
html.embarque { overflow: hidden; }
html.embarque .callbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .chantier { height: auto; }
  .chantier__scene { position: relative; height: 100svh; }
  .chantier__photo { --e: 1; }
  .chantier__apres { opacity: 1; }
}