/* Charte Kindsight (charte.css, chargée avant ce fichier). Voir ../charte/Kindsight/DESIGN.md.
   Arbitrages tranchés une fois ici :
   - Times Now -> Playfair Display 400 (sa graisse la plus fine), Founders Grotesk -> Inter.
   - Écart entre sections : 80px (bas de la fourchette 80-120, demandé plus serré). Chaque section
     porte la moitié en haut et la moitié en bas.
   - Sur le fond olive, les boutons sont chartreuse (la charte y interdit la terracotta). */
:root {
  --ecart: 40px;                        /* x2 entre deux sections = 80px */
  --marge: var(--spacing-24);
  --nav: 72px;
  --filet: 1px solid rgba(14, 15, 10, .12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav); }
body {
  background: var(--color-cream-paper); color: var(--color-ink-black);
  font: 400 var(--text-body-sm)/var(--leading-body-sm) var(--font-founders-grotesk); letter-spacing: var(--tracking-body-sm);
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }

.titre {
  font: 400 clamp(38px, 5vw, var(--text-heading))/var(--leading-heading) var(--font-times-now);
  letter-spacing: -.049em;
}
/* le geste de la charte : un mot en italique, souligné chartreuse */
.souligne { font-style: italic; background: linear-gradient(var(--color-chartreuse-spark), var(--color-chartreuse-spark)) 0 94% / 100% .09em no-repeat; padding-right: .04em; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px var(--spacing-24); border-radius: var(--radius-buttons); border: 0; font: 400 var(--text-body-sm)/1 var(--font-founders-grotesk); cursor: pointer; transition: filter .2s, transform .2s; }
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn--terre { background: var(--color-terracotta-cta); color: var(--color-pure-white); }
.btn--citron { background: var(--color-chartreuse-spark); color: var(--color-ink-black); }
.btn--ligne { padding: 8px 20px; box-shadow: inset 0 0 0 1px var(--color-ink-black); }
.btn--clair { color: var(--color-cream-paper); box-shadow: inset 0 0 0 1px rgba(250, 245, 241, .5); }

.section { max-width: var(--page-max-width); margin: 0 auto; padding: var(--ecart) var(--marge); }
.section > .titre { margin-bottom: var(--spacing-32); }

/* ---------- 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-16);
  padding: 0 max(var(--marge), calc((100% - var(--page-max-width)) / 2 + var(--marge)));
  background: var(--color-cream-paper); border-bottom: var(--filet);
}
.nav__logo { font: 400 26px/1 var(--font-times-now); letter-spacing: -.03em; white-space: nowrap; }
.nav__droite { display: flex; gap: var(--spacing-12); align-items: center; }
.nav .btn--terre { padding: 10px 20px; }

/* ---------- 1. la montée ---------- */
.climb { position: relative; height: 320vh; background: var(--color-olive-grove); color: var(--color-cream-paper); }
.climb__stage {
  /* dvh : la scène suit la hauteur réelle de l'écran quand Chrome mobile masque sa barre d'adresse */
  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: 1fr minmax(0, .9fr) 72px; gap: var(--spacing-40); align-items: center;
}
.climb h1 {
  font: 400 clamp(46px, 6.4vw, 92px)/.86 var(--font-times-now); letter-spacing: -.055em; color: var(--color-chartreuse-spark);
}
.climb__texte p { max-width: 30em; margin: var(--spacing-32) 0; font-size: var(--text-body); line-height: var(--leading-body); }
.climb__ctas { display: flex; gap: var(--spacing-12); flex-wrap: wrap; }

.climb__carte { position: relative; height: 100%; }
.climb__fenetre { position: absolute; inset: 0; border-radius: var(--radius-cards); overflow: hidden; background: var(--color-deep-olive); container-type: size; }
/* Le cèdre est en 1:4 et remplit la largeur de la carte : sa hauteur vaut 4,03 fois cette largeur.
   La carte est un conteneur (cqw, cqh) : au départ on voit le pied du tronc, à la fin la cime. */
.climb__tree {
  position: absolute; inset: 0 0 auto; height: 403cqw;
  background: url(img/cedre.jpg?v=2) center top / 100% auto no-repeat;
  transform: translate3d(0, calc((var(--p, 0) - 1) * (403cqw - 100cqh)), 0);
  will-change: transform;
}
.climb__legende {
  position: absolute; left: var(--spacing-16); right: var(--spacing-16); bottom: var(--spacing-16);
  padding: var(--spacing-16) var(--spacing-20); border-radius: var(--radius-badges);
  background: var(--color-soft-linen); color: var(--color-ink-black); font-size: var(--text-caption); line-height: var(--leading-caption);
  opacity: clamp(0, (var(--p, 0) - .82) * 7, 1); transform: translateY(calc((1 - var(--p, 0)) * 30px));
}
.climb__legende strong { display: block; font: 400 26px/1 var(--font-times-now); letter-spacing: -.03em; margin-bottom: var(--spacing-4); }
.climb__indice {
  position: absolute; left: 50%; bottom: var(--spacing-16); transform: translateX(-50%); white-space: nowrap;
  padding: var(--spacing-8) var(--spacing-16); border-radius: var(--radius-badges);
  background: var(--color-soft-linen); color: var(--color-ink-black); font-size: var(--text-micro);
  opacity: calc(1 - var(--p, 0) * 8);
}

/* La jauge est rattachée à la carte : sur grand écran elle se tient dans la colonne de droite. */
.jauge { position: absolute; top: 0; bottom: 0; left: calc(100% + var(--spacing-40)); width: 72px; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-12); }
.jauge__rail { position: relative; flex: 1; width: 2px; background: rgba(250, 245, 241, .25); border-radius: 2px; }
.jauge__rail::before { content: ""; position: absolute; inset: 0 -7px; background: repeating-linear-gradient(to top, rgba(250, 245, 241, .45) 0 1px, transparent 1px 10%); }
.jauge__plein { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p, 0) * 100%); background: var(--color-chartreuse-spark); border-radius: 2px; }
.jauge__valeur { font: 400 var(--text-subheading)/1 var(--font-times-now); letter-spacing: -.04em; color: var(--color-chartreuse-spark); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
/* le nombre a une largeur fixe (deux chiffres) : rien ne bouge quand on passe de 9 à 10 m */
.jauge__num { display: inline-block; min-width: 1.25em; text-align: right; }

/* ---------- 2. introduction ---------- */
.intro { padding-top: calc(var(--ecart) * 2); }
.intro .titre { max-width: 14em; margin-bottom: var(--spacing-24); }
.intro p { max-width: 38em; 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-24); }
.metier img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-cards); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.metier:hover img { transform: scale(1.02); }
.metier img.cadre-haut { object-position: center top; }   /* le sujet (haut du tronc, pièce qui tombe) est en haut de la photo */
.metier__n { margin-top: var(--spacing-20); font-size: var(--text-caption); color: var(--color-terracotta-cta); font-weight: 500; }
.metier h3 { font: 400 32px/1 var(--font-times-now); letter-spacing: -.03em; margin: var(--spacing-8) 0; }

/* ---------- 4. avant / après ---------- */
.avap { display: grid; grid-template-columns: 1fr auto auto; gap: var(--spacing-24); align-items: end; }
.avap__texte .titre { margin-bottom: var(--spacing-12); }
.compare figcaption { margin-top: var(--spacing-12); font-size: var(--text-caption); }
.compare__frame { --x: 50%; position: relative; height: min(70vh, 640px); aspect-ratio: 9/16; overflow: hidden; border-radius: var(--radius-cards); touch-action: pan-y; }
/* Deux images au même cadrage, --a (avant) et --b (après) : l'après recouvre l'avant à droite de la poignée. */
.compare__side { position: absolute; inset: 0; background: center / cover no-repeat; }
.compare__side--avant { background-image: var(--a); }
.compare__side--apres { background-image: var(--b); clip-path: inset(0 0 0 var(--x)); }
.compare__tag { position: absolute; top: var(--spacing-12); left: var(--spacing-12); z-index: 2; padding: 6px var(--spacing-12); border-radius: var(--radius-badges); background: var(--color-soft-linen); font-size: var(--text-micro); font-weight: 500; }
.compare__tag--apres { left: auto; right: var(--spacing-12); background: var(--color-chartreuse-spark); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--x); z-index: 2; width: 2px; margin-left: -1px; background: var(--color-soft-linen); pointer-events: none; }
.compare__handle span { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--color-soft-linen); }
.compare__handle span::before, .compare__handle span::after { content: ""; position: absolute; top: 50%; margin-top: -6px; border: 6px solid transparent; }
.compare__handle span::before { left: 6px; border-right-color: var(--color-olive-grove); }
.compare__handle span::after { right: 6px; border-left-color: var(--color-olive-grove); }
.compare__frame { cursor: ew-resize; user-select: none; -webkit-user-select: none; }
/* le curseur ne sert plus qu'au clavier : c'est l'image entière qui reçoit le doigt ou la souris */
.compare__range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.compare__frame:has(.compare__range:focus-visible) { outline: 2px solid var(--color-chartreuse-spark); outline-offset: 3px; }

/* ---------- 5. chiffres ---------- */
.bande { background: var(--color-warm-sand); margin: var(--ecart) 0; }
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-24); padding-top: var(--spacing-56); padding-bottom: var(--spacing-56); }
.chiffres div { background: var(--color-soft-linen); border-radius: var(--radius-cards); padding: var(--spacing-32) var(--spacing-24); font-size: var(--text-caption); line-height: var(--leading-caption); }
.chiffres strong { display: block; font: 400 var(--text-heading-sm)/var(--leading-heading-sm) var(--font-times-now); letter-spacing: -.04em; margin-bottom: var(--spacing-12); }

/* ---------- 6. sur le terrain ---------- */
.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-24); }
.grille img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-cards); }
.grille figcaption { margin-top: var(--spacing-12); font-size: var(--text-caption); }

/* ---------- 7. zone ---------- */
.zone { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--spacing-56); align-items: center; }
.zone__texte .titre { margin-bottom: var(--spacing-24); }
.zone__texte p { max-width: 34em; font-size: var(--text-body); line-height: var(--leading-body); }
.zone__carte svg { width: 100%; height: auto; overflow: visible; font-family: var(--font-founders-grotesk); }
.zone__carte .ring { fill: none; stroke: var(--color-olive-grove); stroke-width: 1; stroke-dasharray: 3 6; opacity: .5; }
.zone__carte .ring--30 { stroke-dasharray: none; stroke-width: 1.5; opacity: 1; fill: var(--color-warm-sand); fill-opacity: .45; }
.zone__carte .dot { fill: var(--color-olive-grove); }
.zone__carte .dot--base { fill: var(--color-terracotta-cta); }
.zone__carte .lbl { font-size: 14px; fill: var(--color-ink-black); }
.zone__carte .lbl--loin { fill: #7d7a70; }
.zone__carte .lbl--base { font: 400 24px var(--font-times-now); letter-spacing: -.03em; }
.zone__carte .km { font-size: 12px; font-weight: 500; fill: var(--color-olive-grove); }

/* ---------- 8. contact ---------- */
.contact { background: var(--color-olive-grove); color: var(--color-cream-paper); margin-top: var(--ecart); }
.contact__in { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-56); padding-top: calc(var(--ecart) * 2); padding-bottom: calc(var(--ecart) * 2); align-items: start; }
.contact .titre { color: var(--color-chartreuse-spark); }
.contact__tel { display: block; margin: var(--spacing-24) 0 var(--spacing-16); font: 400 clamp(48px, 6.5vw, var(--text-heading-lg))/var(--leading-heading-lg) var(--font-times-now); letter-spacing: -.05em; white-space: nowrap; }
.contact__tel:hover { color: var(--color-chartreuse-spark); }
.contact__horaires, .contact__mail { font-size: var(--text-body); line-height: var(--leading-body); opacity: .85; }
.contact__mail { margin-top: var(--spacing-8); }
.contact__mail a { text-decoration: underline; text-underline-offset: 3px; }

.rappel { display: grid; gap: var(--spacing-16); padding: var(--card-padding); border-radius: var(--radius-cards); background: var(--color-soft-linen); color: var(--color-ink-black); }
.rappel__lead { font: 400 26px/1.05 var(--font-times-now); letter-spacing: -.02em; margin-bottom: var(--spacing-8); }
.rappel label span { display: block; margin-bottom: var(--spacing-8); font-size: var(--text-caption); }
.rappel input { width: 100%; padding: var(--spacing-12) var(--spacing-16); border: 1px solid var(--color-deep-olive); border-radius: var(--radius-inputs); background: transparent; color: var(--color-deep-olive); font: inherit; }
.rappel input::placeholder { color: rgba(14, 15, 10, .4); }
.rappel input:focus { outline: 2px solid var(--color-chartreuse-spark); outline-offset: 1px; }
.rappel .btn { justify-self: start; margin-top: var(--spacing-8); }
.rappel__ok { font: 400 26px/1.05 var(--font-times-now); }

.pied a { text-decoration: underline; text-underline-offset: 3px; }
.pied { display: flex; justify-content: space-between; gap: var(--spacing-16); flex-wrap: wrap; max-width: var(--page-max-width); margin: 0 auto; padding: var(--spacing-24) var(--marge); font-size: var(--text-caption); }

/* bouton d'appel collé en bas, téléphone seulement, caché pendant la montée (où le hero a le sien) */
.callbar { display: none; }

@media (max-width: 899px) {
  :root { --ecart: 40px; --marge: var(--spacing-16); --nav: 60px; }   /* 80px entre sections, comme sur grand écran */
  .nav__logo { font-size: 21px; }
  .nav__lien { display: none; }
  .nav .btn--terre { padding: 9px 14px; font-size: var(--text-caption); }

  .climb { height: 280vh; }
  .climb__stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: var(--spacing-20); padding: var(--spacing-16) var(--marge) var(--spacing-24); align-items: stretch; }
  .climb__carte { grid-row: 1; }
  .climb__texte { grid-row: 2; }
  .climb h1 { font-size: 38px; }
  .climb__texte p { margin: var(--spacing-12) 0 var(--spacing-16); font-size: var(--text-caption); }
  /* Sur téléphone, la jauge passe dans la photo, le long du bord droit, sous l'étiquette qui arrive en haut. */
  /* Sur téléphone, la jauge est sur la photo, le long du bord droit, sous le ciel :
     sa couleur (--jauge) doit ressortir sur le bleu. */
  .jauge { --jauge: var(--color-olive-grove); left: auto; right: var(--spacing-16); top: 44%; bottom: var(--spacing-16); width: 64px; align-items: flex-end; }
  .jauge__rail { margin-right: var(--spacing-12); background: color-mix(in srgb, var(--jauge) 35%, transparent); }
  .jauge__rail::before { background: repeating-linear-gradient(to top, color-mix(in srgb, var(--jauge) 60%, transparent) 0 1px, transparent 1px 10%); }
  .jauge__plein { left: -1px; right: -1px; background: var(--jauge); }
  .jauge__valeur { font-size: 28px; color: var(--jauge); text-shadow: 0 1px 10px rgba(14, 15, 10, .25); }
  /* l'étiquette arrive en bas, à gauche de la jauge (64px + 16px de marge) */
  .climb__legende { right: calc(var(--spacing-16) + 64px + var(--spacing-8)); }
  .climb__legende strong { font-size: 22px; }

  .metiers, .grille { grid-template-columns: 1fr; }
  .metiers { gap: var(--spacing-40); }
  .metier img { aspect-ratio: 16/10; }
  .grille { grid-template-columns: 1fr 1fr; gap: var(--spacing-24) var(--spacing-16); }
  .avap { grid-template-columns: 1fr; justify-items: center; gap: var(--spacing-40); }
  .avap__texte { justify-self: stretch; }
  /* la largeur est fixée sur la figure, pas déduite de la légende : les deux avant/après ont la même taille */
  .compare { width: min(100%, 420px); }
  .compare__frame { height: auto; width: 100%; aspect-ratio: 3/4; }
  .chiffres { grid-template-columns: 1fr 1fr; gap: var(--spacing-16); padding-top: var(--spacing-40); padding-bottom: var(--spacing-40); }
  .chiffres div { padding: var(--spacing-20) var(--spacing-16); }
  .chiffres strong { font-size: 38px; }
  .zone { grid-template-columns: 1fr; gap: var(--spacing-24); }
  .contact__in { grid-template-columns: 1fr; gap: var(--spacing-32); }
  .rappel { padding: var(--spacing-24); }
  .pied { padding-bottom: 96px; }

  .callbar {
    display: block; position: fixed; z-index: 60; left: var(--spacing-12); right: var(--spacing-12); bottom: max(var(--spacing-12), env(safe-area-inset-bottom));
    padding: var(--spacing-16); border-radius: var(--radius-buttons); text-align: center;
    background: var(--color-terracotta-cta); color: var(--color-pure-white); font-weight: 500;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  /* cachée pour de bon (pas seulement poussée vers le bas) : rien ne dépasse quand l'écran grandit */
  .callbar { transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s, visibility 0s; }
  .callbar.cache { transform: translateY(calc(100% + 40px)); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s, visibility 0s .35s; }
}

@media (prefers-reduced-motion: reduce) {
  .climb { height: auto; }
  .climb__stage { position: relative; top: 0; height: auto; min-height: 80vh; }
  .climb__tree { transform: none; height: 100%; }
  .climb__indice, .jauge { display: none; }
}

/* ---------- recentrage sur les arbres ---------- */
.metier img.cadre-bas { object-position: center bottom; }
.aussi { margin-top: var(--spacing-40); padding-top: var(--spacing-20); border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); font-size: var(--text-caption); line-height: var(--leading-caption); }
.aussi span { color: var(--color-terracotta-cta); font-weight: 500; margin-right: var(--spacing-12); }
.grille { grid-template-columns: repeat(4, 1fr); }
.grille img { aspect-ratio: 3/4; }
.grille img.cadre-haut { object-position: center top; }
@media (max-width: 899px) {
  .grille { grid-template-columns: 1fr 1fr; }
  .aussi { margin-top: var(--spacing-32); }
}

/* 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; }