/* ==========================================================================
   Page « Faisabilité de terrain »
   Plan fixe d'un côté, 5 textes qui défilent de l'autre (plan en haut sur mobile)
   ========================================================================== */

.fz-hero .lead { max-width: 46ch; }

/* ---- Couleurs du plan : reprises du fichier validé */
.fz-plan { --line: #a8a8a2; --road: #f1f0ec; display: block; width: 100%; height: auto; }
.fz-plan text { font-size: 11px; fill: #6b6b66; font-family: var(--font-body); }

/* ---- Mise en page « scrollytelling » */
.fz-scrolly { position: relative; }
.fz-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--s7); }
.fz-figure {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
}
.fz-figure-in { width: 100%; margin: 0; }
.fz-figure-in svg { max-height: calc(100vh - var(--header-h) - 130px); }
.fz-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: var(--s2); font-size: var(--fs-xs); color: var(--muted); }
.fz-legend li { display: inline-flex; align-items: center; gap: 6px; }
.fz-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.fz-swatch--bati { background: #f7c948; }
.fz-swatch--parcelle { border: 2px solid #378add; background: rgba(55, 138, 221, 0.12); }
.fz-swatch--regles { border: 1.5px dashed #d85a30; }
.fz-swatch--demolition { background: linear-gradient(45deg, transparent 42%, #e24b4a 42%, #e24b4a 58%, transparent 58%); }
.fz-swatch--projet { background: rgba(29, 158, 117, 0.35); border: 2px solid #1d9e75; }
.fz-example { margin-top: var(--s1); font-size: var(--fs-xs); color: var(--muted); font-style: italic; }

/* ---- Les 5 textes */
.fz-steps { padding-block: 20vh 35vh; }
.fz-step {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 400ms var(--ease-out);
}
.js .fz-scrolly.is-live .fz-step { opacity: 0.25; }
.js .fz-scrolly.is-live .fz-step.is-active { opacity: 1; }
.fz-step .eyebrow { margin-bottom: var(--s2); }
.fz-step-title { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem); }
.fz-step-text { margin-top: var(--s3); font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 38ch; }
.fz-step .actions { margin-top: var(--s4); }

/* ---- Mobile : le plan reste fixé en haut, les textes défilent dessous */
@media (max-width: 899px) {
  .fz-grid { grid-template-columns: 1fr; gap: 0; }
  .fz-figure {
    z-index: 3;
    height: auto;
    padding-block: var(--s2);
    background: var(--bg);
    border-bottom: 1px solid var(--line-soft);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .fz-figure-in svg { max-height: 36vh; margin-inline: auto; }
  .fz-legend { justify-content: center; gap: 4px 12px; }
  .fz-example { display: none; }
  .fz-steps { padding-block: 6vh 30vh; }
  .fz-step { min-height: 62vh; }
  .fz-step-text { font-size: 1.0625rem; }
}

/* ---- Cartes « ce que comprend l'étude » / « pour qui » */
.fz-cards { display: grid; gap: var(--s2); margin-top: var(--s6); }
@media (min-width: 640px) { .fz-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .fz-cards { grid-template-columns: repeat(3, 1fr); } .fz-cards--four { grid-template-columns: repeat(4, 1fr); } }
.fz-icon { width: 30px; height: 30px; color: var(--gres); margin-bottom: var(--s2); }
.card--outline { border: 1px solid var(--line-soft); }
.fz-process { margin-top: var(--s6); }
@media (min-width: 1100px) { .fz-process { grid-template-columns: repeat(4, 1fr); } }

/* ---- Sans animation : tout est affiché */
@media (prefers-reduced-motion: reduce) {
  .js .fz-scrolly.is-live .fz-step { opacity: 1; }
}