@charset "utf-8";
/* ==========================================================================
   Villa Aphéa — feuille de style
   ========================================================================== */

/* ---------- fonte -------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

/* ---------- variables ---------------------------------------------------- */
:root {
  --sable:       #e8e1d4;
  --sable-fonce: #ded5c4;
  --papier:      #f4f0e8;
  --encre:       #14120f;
  --encre-2:     #1e1b17;
  --doux:        #5f584d;
  --doux-clair:  #a9a196;
  --vert:        #c6d3a0;
  --vert-fonce:  #a9c07c;
  --terre:       #a53d24;
  --terre-clair: #d97a5c;

  --fond:  var(--sable);
  --texte: var(--encre);
  --texte-doux: var(--doux);
  --trait: color-mix(in srgb, var(--encre) 16%, transparent);
  --accent: var(--terre);

  --marge: clamp(1.25rem, 5vw, 5rem);
  --colonne: min(100%, 68ch);
  --rythme: clamp(4.5rem, 11vw, 10rem);
  --coupe-h: 100px;

  --t-rapide: 220ms cubic-bezier(.2, .7, .3, 1);
  --t-lent: 900ms cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 780px) { :root { --coupe-h: 58px; } }

/* ---------- base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  padding-bottom: var(--coupe-h);
  background: var(--encre);
  color: var(--texte);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wght" 400, "wdth" 100;
  font-size: clamp(1rem, .95rem + .22vw, 1.125rem);
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; background: var(--sable-fonce); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--vert); color: var(--encre); }

.saut {
  position: absolute; left: -9999px;
  padding: .75rem 1.25rem; background: var(--encre); color: var(--papier);
  z-index: 200;
}
.saut:focus { left: 1rem; top: 1rem; }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- typographie -------------------------------------------------- */
h1, h2, h3 { margin: 0; font-weight: 400; }

.titre {
  font-variation-settings: "wght" 800, "wdth" 82;
  text-transform: uppercase;
  line-height: .86;
  letter-spacing: -.015em;
  font-size: clamp(2.75rem, 9vw, 7.5rem);
  margin: 0;
}

.titre-s {
  font-variation-settings: "wght" 700, "wdth" 88;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -.005em;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
}

.lead {
  font-size: clamp(1.25rem, 1.05rem + 1.05vw, 2rem);
  line-height: 1.32;
  font-variation-settings: "wght" 430, "wdth" 96;
  letter-spacing: -.012em;
  max-width: 28ch;
  text-wrap: balance;
}
.lead--large { max-width: 34ch; }

.corps p { margin: 0 0 1.25em; max-width: var(--colonne); }
.corps p:last-child { margin-bottom: 0; }

.num {
  font-variation-settings: "wght" 500, "wdth" 100;
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--texte-doux);
  font-feature-settings: "tnum" 1;
}

/* ---------- structure ---------------------------------------------------- */
.enveloppe { width: 100%; padding-inline: var(--marge); margin-inline: auto; max-width: 1680px; }

.section { padding-block: var(--rythme); position: relative; }
.section + .section { border-top: 1px solid var(--trait); }

.section--sable  { background: var(--sable); }
.section--papier { background: var(--papier); }
.section--jardin { background: color-mix(in srgb, var(--vert) 26%, var(--papier)); }

.section--sombre {
  background: var(--encre);
  color: var(--papier);
  --texte-doux: var(--doux-clair);
  --trait: color-mix(in srgb, var(--papier) 18%, transparent);
  --accent: var(--terre-clair);
  border-top: 0;
}
.section--sombre img { background: var(--encre-2); }

.entete {
  display: flex; flex-direction: column; gap: .9rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.duo {
  display: grid; gap: clamp(2rem, 4vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 940px) {
  .duo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .duo--texte-droite { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* ---------- figures ------------------------------------------------------ */
figure { margin: 0; }

figure img {
  width: 100%;
  object-fit: cover;
}

figcaption {
  margin-top: .7rem;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--texte-doux);
  max-width: 64ch;
}

.fig--pleine {
  margin-inline: calc(var(--marge) * -1);
  width: calc(100% + var(--marge) * 2);
}
.fig--pleine figcaption { padding-inline: var(--marge); }

.fig--haute img { aspect-ratio: 3 / 4; }

/* Une image montrée en entier, comme une planche posée sur la page :
   centrée, à ses proportions d'origine, sans recadrage ni mouvement. */
.fig--document {
  margin-block: clamp(2.5rem, 5vw, 4rem);
  margin-inline: auto;
  max-width: min(720px, 92%);
}
.fig--document img { aspect-ratio: auto; object-fit: contain; }
.fig--document figcaption { text-align: center; max-width: none; }
/* La vue aérienne : une verticale montrée en grand dans une fenêtre carrée.
   Le débordement — un tiers de la hauteur — donne une descente franche, des
   toits du quartier jusqu'au fond du jardin, sans jamais perdre la maison. */
.fig--aerien {
  margin-block: clamp(2.5rem, 5vw, 4.5rem);
  margin-inline: auto;
  max-width: min(980px, 92%);
}
.fig--aerien > .fig__cadre { aspect-ratio: 1 / 1; }
.fig--aerien figcaption { text-align: center; max-width: none; }

.fig--43   img { aspect-ratio: 4 / 3; }
.fig--large img { aspect-ratio: 16 / 9; }
.fig--pano > .fig__cadre { aspect-ratio: 16 / 9; }
.fig--carre img { aspect-ratio: 1 / 1; }

.grille-fig {
  display: grid; gap: clamp(.75rem, 1.6vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .grille-fig--duo { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: stretch; }
  /* La verticale donne la hauteur de la rangée ; la photo large la remplit
     au lieu de laisser un vide sous elle. Deux colonnes, un seul trait bas. */
  .grille-fig--duo .fig--large,
  .grille-fig--duo .fig--large picture { display: flex; flex-direction: column; min-height: 0; }
  .grille-fig--duo .fig--large picture { flex: 1; }
  .grille-fig--duo .fig--large img { aspect-ratio: auto; flex: 1; min-height: 0; }
}

/* ---------- hero --------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  color: var(--papier);
  background: var(--encre);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute; inset: 0; z-index: -2;
}
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
}
/* Un voile aussi court que possible : juste de quoi asseoir le titre, et la
   photo garde sa lumière. La lisibilité est reprise par l'ombre du texte,
   qui ne coûte rien à l'image. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(14,12,10,.72) 0%, rgba(14,12,10,.44) 16%, rgba(14,12,10,.14) 38%, rgba(14,12,10,0) 60%, rgba(14,12,10,.16) 100%);
}

.hero__contenu {
  padding-block: clamp(2.5rem, 7vh, 6rem) clamp(3rem, 8vh, 6rem);
  display: grid; gap: 1.25rem;
  text-shadow: 0 1px 3px rgba(14, 12, 10, .55), 0 2px 28px rgba(14, 12, 10, .55);
}

.hero__titre {
  font-variation-settings: "wght" 850, "wdth" 78;
  text-transform: uppercase;
  line-height: .82;
  letter-spacing: -.022em;
  font-size: clamp(3.2rem, 15vw, 13rem);
  margin: 0;
}

.hero__kicker {
  font-variation-settings: "wght" 550, "wdth" 100;
  font-size: clamp(.75rem, 1.4vw, .875rem);
  letter-spacing: .3em;
  text-transform: uppercase;
}

.hero__baseline {
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  font-variation-settings: "wght" 400, "wdth" 98;
  max-width: 30ch;
  line-height: 1.3;
}

.hero__cue {
  margin-top: .75rem;
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  font-variation-settings: "wght" 500, "wdth" 100;
  width: fit-content;
}
.hero__cue span:last-child { transition: transform var(--t-rapide); }
.hero__cue:hover span:last-child { transform: translateY(3px); }

/* ---------- barre haute -------------------------------------------------- */
.barre {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem var(--marge);
  background: color-mix(in srgb, var(--sable) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--trait);
  transition: transform var(--t-rapide), border-color var(--t-rapide);
}
.js .barre { transform: translateY(-104%); border-bottom-color: transparent; }
.js .barre.est-visible { transform: none; border-bottom-color: var(--trait); }

.barre__marque {
  font-variation-settings: "wght" 750, "wdth" 84;
  text-transform: uppercase; letter-spacing: -.01em;
  font-size: 1rem; text-decoration: none; white-space: nowrap;
}
@media (max-width: 700px) {
  .barre { padding-inline: 1rem; }
  .barre__marque { font-size: .9rem; }
  .barre .bouton-nu { padding: .45rem .65rem; font-size: .6875rem; letter-spacing: .08em; }
  .barre__droite .bouton-nu[href="#conditions"] { display: none; }
}
@media (max-width: 400px) {
  .barre__droite .bouton-nu[href="#contact"] { display: none; }
}

.barre__droite { display: flex; align-items: center; gap: .4rem; }

.bouton-nu {
  appearance: none; border: 1px solid var(--trait); background: transparent;
  color: inherit; font: inherit; cursor: pointer;
  font-variation-settings: "wght" 550, "wdth" 100;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .5rem .8rem; border-radius: 999px;
  text-decoration: none;
  transition: background var(--t-rapide), border-color var(--t-rapide), color var(--t-rapide);
}
.bouton-nu:hover { background: var(--encre); border-color: var(--encre); color: var(--papier); }

.bouton-plein {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--encre); color: var(--papier);
  border: 1px solid var(--encre);
  padding: .85rem 1.5rem; border-radius: 999px;
  font-variation-settings: "wght" 600, "wdth" 100;
  font-size: .875rem; letter-spacing: .06em;
  text-decoration: none; cursor: pointer;
  transition: background var(--t-rapide), color var(--t-rapide);
}
.bouton-plein:hover { background: var(--terre); border-color: var(--terre); color: #fff; }
.section--sombre .bouton-plein { background: var(--papier); color: var(--encre); border-color: var(--papier); }
.section--sombre .bouton-plein:hover { background: var(--terre-clair); border-color: var(--terre-clair); color: var(--encre); }

/* menu déroulant */
.menu {
  position: fixed; inset: 0; z-index: 80;
  background: var(--encre); color: var(--papier);
  display: grid; align-content: center; gap: .2rem;
  padding: 6rem var(--marge) calc(var(--coupe-h) + 2rem);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-rapide);
}
.menu[data-ouvert="true"] { opacity: 1; pointer-events: auto; }
.menu a {
  font-variation-settings: "wght" 700, "wdth" 84;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 6vw, 3.5rem);
  line-height: 1.12;
  text-decoration: none;
  color: color-mix(in srgb, var(--papier) 72%, transparent);
  transition: color var(--t-rapide);
}
.menu a:hover { color: var(--papier); }
.menu__fermer { position: absolute; top: 1.4rem; right: var(--marge); }
.menu .bouton-nu { border-color: color-mix(in srgb, var(--papier) 30%, transparent); }
.menu .bouton-nu:hover { background: var(--papier); color: var(--encre); border-color: var(--papier); }

/* ---------- chiffres ----------------------------------------------------- */
.chiffres {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--trait);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.chiffre__val {
  display: block;
  font-variation-settings: "wght" 700, "wdth" 88;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-feature-settings: "tnum" 1;
}
.chiffre__val small {
  font-size: .38em; font-variation-settings: "wght" 500, "wdth" 100;
  margin-left: .25em; letter-spacing: 0;
}
.chiffre__lab {
  display: block; margin-top: .5rem;
  font-size: .875rem; line-height: 1.4; color: var(--texte-doux); max-width: 22ch;
}

/* ---------- listes ------------------------------------------------------- */
.liste-traits { list-style: none; margin: 2rem 0 0; padding: 0; max-width: var(--colonne); }
.liste-traits li {
  padding: .8rem 0 .8rem 1.6rem;
  border-top: 1px solid var(--trait);
  position: relative;
  font-size: .9375rem;
}
.liste-traits li:last-child { border-bottom: 1px solid var(--trait); }
.liste-traits li::before {
  content: ""; position: absolute; left: 0; top: 1.45em;
  width: .7rem; height: 1px; background: var(--accent);
}

/* définitions : specs, venir */
.defs { margin: 0; display: grid; gap: 0; }
.defs > div {
  display: grid; gap: .2rem .5rem;
  grid-template-columns: 1fr;
  padding: .95rem 0;
  border-top: 1px solid var(--trait);
}
.defs > div:last-child { border-bottom: 1px solid var(--trait); }
@media (min-width: 620px) {
  .defs > div { grid-template-columns: minmax(9rem, 15rem) 1fr; gap: 1.5rem; align-items: baseline; }
}
.defs dt {
  font-variation-settings: "wght" 600, "wdth" 96;
  font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte-doux);
}
.defs dd { margin: 0; font-size: .9375rem; }

/* ---------- citation ----------------------------------------------------- */
.note {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 2px solid var(--accent);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.42;
  font-variation-settings: "wght" 400, "wdth" 98;
  max-width: 42ch;
}

/* ---------- cartes usages ------------------------------------------------ */
.cartes {
  display: grid; gap: clamp(1.75rem, 3vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
}
.carte img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.carte h3 { margin: 1.1rem 0 .5rem; }
.carte p { margin: 0; font-size: .9375rem; color: var(--texte-doux); max-width: 40ch; }

.encart {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: color-mix(in srgb, var(--encre) 5%, transparent);
  border-left: 3px solid var(--accent);
}
.section--sombre .encart { background: color-mix(in srgb, var(--papier) 7%, transparent); }
.encart h3 { margin-bottom: .6rem; }
.encart p { margin: 0; max-width: 58ch; }

/* ---------- tarifs ------------------------------------------------------- */
.tarifs {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  margin-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--trait);
}
.tarif { padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-bottom: 1px solid var(--trait); }
@media (min-width: 700px) {
  .tarif + .tarif { border-left: 1px solid var(--trait); padding-left: clamp(1.5rem, 3vw, 2.25rem); }
}
.tarif__per {
  font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texte-doux); font-variation-settings: "wght" 550, "wdth" 100;
}
.tarif__prix {
  display: block; margin-top: .5rem;
  font-variation-settings: "wght" 750, "wdth" 84;
  font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; letter-spacing: -.025em;
  font-feature-settings: "tnum" 1;
}
.tarif__unite { display: block; margin-top: .45rem; font-size: .875rem; color: var(--texte-doux); }

/* ---------- formulaire --------------------------------------------------- */
.form { display: grid; gap: 1.15rem; max-width: 44rem; }
.form__ligne { display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form__ligne { grid-template-columns: 1fr 1fr; } }

.champ { display: grid; gap: .4rem; }
.champ > span {
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  font-variation-settings: "wght" 600, "wdth" 100; color: var(--texte-doux);
}
.champ em { font-style: normal; color: var(--accent); letter-spacing: 0; text-transform: none; }

.champ input, .champ select, .champ textarea {
  font: inherit; font-size: .9375rem;
  color: inherit; background: transparent;
  border: 0; border-bottom: 1px solid var(--trait);
  padding: .65rem 0; border-radius: 0;
  transition: border-color var(--t-rapide);
  width: 100%;
}
.champ textarea { min-height: 8.5rem; resize: vertical; line-height: 1.55; }
.champ select { appearance: none; cursor: pointer; padding-right: 1.5rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 8px top 55%, right 3px top 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--texte-doux); opacity: .85; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 0; border-bottom-color: var(--accent); border-bottom-width: 2px; padding-bottom: calc(.65rem - 1px);
}
.champ select option { color: #14120f; background: #f4f0e8; }

.case { display: flex; align-items: center; gap: .7rem; font-size: .9375rem; cursor: pointer; }
.case input { width: 1.05rem; height: 1.05rem; accent-color: var(--terre); flex: none; }

.pot-de-miel {
  position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0;
}

.form__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: .5rem; }
.form__etat { font-size: .875rem; min-height: 1.4em; }
.form__etat[data-etat="succes"] { color: var(--vert-fonce); }
.form__etat[data-etat="erreur"] { color: var(--terre-clair); }
.section--sombre .form__etat[data-etat="succes"] { color: var(--vert); }

.rgpd { margin-top: 1.25rem; font-size: .8125rem; line-height: 1.5; color: var(--texte-doux); max-width: 52ch; }

.contact-direct { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.contact-direct__lab { font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.contact-direct a {
  display: block; margin-top: .5rem;
  font-variation-settings: "wght" 600, "wdth" 88;
  font-size: clamp(1.15rem, 2.6vw, 1.8rem);
  letter-spacing: -.01em; text-decoration: none;
  border-bottom: 1px solid var(--trait); padding-bottom: .5rem; width: fit-content;
  transition: border-color var(--t-rapide), color var(--t-rapide);
}
.contact-direct a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- pied --------------------------------------------------------- */
.pied {
  background: var(--encre); color: var(--doux-clair);
  --trait: color-mix(in srgb, #f4f0e8 16%, transparent);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  font-size: .875rem;
}
.pied__haut { display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: space-between; align-items: flex-start; }
.pied__marque { font-variation-settings: "wght" 750, "wdth" 84; text-transform: uppercase; font-size: 1.3rem; color: var(--papier); letter-spacing: -.01em; }
.pied__sous { margin-top: .4rem; max-width: 34ch; }
.pied__liens { display: grid; gap: .5rem; }
.pied__liens a { color: var(--papier); }
.pied__bas {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.25rem;
  border-top: 1px solid var(--trait);
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
  font-size: .8125rem;
}
.pied__bas button { background: none; border: 0; color: inherit; font: inherit; font-size: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .22em; padding: 0; }

/* ---------- mentions légales --------------------------------------------- */
dialog.legal {
  border: 0; padding: 0; max-width: min(46rem, calc(100vw - 2rem)); width: 100%;
  background: var(--papier); color: var(--encre);
  margin: auto;
}
dialog.legal::backdrop { background: rgba(14, 18, 15, .72); backdrop-filter: blur(3px); }
.legal__in { padding: clamp(1.75rem, 4vw, 3rem); }
.legal__in h2 { margin-bottom: 1.5rem; }
.legal__in h3 { margin: 1.75rem 0 .4rem; font-variation-settings: "wght" 650, "wdth" 96; font-size: .9375rem; text-transform: uppercase; letter-spacing: .08em; }
.legal__in p { margin: 0; font-size: .9375rem; max-width: 60ch; }
.legal__in .bouton-nu { margin-top: 2rem; }

/* ---------- la loupe : une photo en grand --------------------------------
   Pas de cadre, pas de fond : la photo seule sur du noir, avec sa légende.
   Le curseur « zoom-in » n'apparaît que si le script a pris la main. */
.js .fig picture { cursor: zoom-in; }
.js .fig picture:focus-visible { outline: 2px solid var(--papier); outline-offset: 3px; }

dialog.loupe {
  border: 0; padding: 0; margin: auto;
  max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh;
  background: transparent; color: var(--papier);
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
}
dialog.loupe:not([open]) { display: none; }
dialog.loupe::backdrop { background: rgba(10, 9, 8, .93); }

.loupe__cadre {
  grid-row: 1;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  padding: clamp(1rem, 4vw, 3rem) clamp(1rem, 4vw, 4rem) 0;
}
.loupe__img {
  display: block;
  width: auto; height: auto;
  max-width: min(1600px, 92vw);
  max-height: calc(100dvh - 9rem);
  object-fit: contain;
  aspect-ratio: auto;
  background: none;
}
.loupe__legende {
  grid-row: 2;
  margin: 0; padding: 1rem clamp(1rem, 4vw, 4rem) clamp(1.25rem, 3vw, 2rem);
  font-size: .8125rem; line-height: 1.45; text-align: center;
  color: var(--doux-clair); max-width: 70ch;
}

.loupe__bouton {
  position: fixed; z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(240, 236, 226, .28);
  border-radius: 50%;
  background: rgba(20, 18, 15, .5);
  color: var(--papier);
  cursor: pointer;
  transition: background var(--t-rapide), border-color var(--t-rapide);
}
.loupe__bouton:hover { background: rgba(20, 18, 15, .9); border-color: rgba(240, 236, 226, .6); }
.loupe__bouton--fermer { inset-block-start: clamp(.75rem, 2vw, 1.5rem); inset-inline-end: clamp(.75rem, 2vw, 1.5rem); }
.loupe__bouton--prec   { inset-block-start: 50%; inset-inline-start: clamp(.5rem, 1.5vw, 1.5rem); translate: 0 -50%; }
.loupe__bouton--suiv   { inset-block-start: 50%; inset-inline-end: clamp(.5rem, 1.5vw, 1.5rem); translate: 0 -50%; }

/* ---------- la coupe (navigation spatiale) -------------------------------
   Une coupe du terrain, de la rue jusqu'au fond du jardin.
   Le curseur suit la position du lecteur dans la traversée du lieu.
   Le dessin fait 1200 × 138 unités : sa hauteur vaut donc
   largeur / 8,7, et la ligne de sol tombe à 30/138 = 21,74 % du bas.
   ------------------------------------------------------------------------ */
.coupe {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 70;
  height: var(--coupe-h);
  background: color-mix(in srgb, var(--sable) 93%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
  border-top: 1px solid var(--trait);
  color: var(--encre);
  transition: opacity var(--t-rapide), transform var(--t-rapide);
}
.js .coupe { opacity: 0; transform: translateY(100%); }
.js .coupe.est-visible { opacity: 1; transform: none; }

.coupe__scene {
  height: 100%; width: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}

.coupe__plan {
  position: relative;
  width: min(100%, calc(var(--coupe-h) * 8.7));
}
.coupe__plan > svg { display: block; width: 100%; height: auto; }

/* prolongement de la ligne de sol de part et d'autre du dessin */
.coupe__plan::before,
.coupe__plan::after {
  content: ""; position: absolute; bottom: 21.74%;
  width: 50vw; height: 1px;
  background: currentColor; opacity: .22;
}
.coupe__plan::before { right: 100%; }
.coupe__plan::after  { left: 100%; }

.va-feuillage { fill: var(--vert); stroke: currentColor; stroke-width: 1.3; }
.va-arbre-s .va-feuillage { fill: var(--vert-fonce); }
.va-mitoyen { fill: color-mix(in srgb, var(--encre) 9%, transparent); }
.va-plancher { stroke: var(--terre); }

/* segments cliquables, calés sur les proportions du dessin */
.coupe__zones {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 14fr 26fr 34fr 26fr;
}
.coupe__zone {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; font: inherit; position: relative;
}
.coupe__zone span {
  position: absolute; inset-block-start: 2px; inset-inline: 0;
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  font-variation-settings: "wght" 700, "wdth" 100;
  color: var(--terre); opacity: 0;
  transition: opacity var(--t-rapide);
  pointer-events: none; white-space: nowrap;
}
.coupe__zone:hover span { opacity: .55; color: var(--encre); }
.coupe__zone[aria-current="true"] span { opacity: 1; color: var(--terre); }
@media (max-width: 620px) { .coupe__zone span { display: none; } }

/* le curseur qui parcourt le terrain */
.coupe__curseur {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 1px; background: var(--terre);
  transform: translateX(-.5px);
  will-change: left;
  pointer-events: none;
}
.coupe__curseur::after {
  content: ""; position: absolute; bottom: calc(21.74% - 4px); left: 50%;
  width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: var(--terre);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sable) 85%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .coupe__curseur { transition: left 120ms linear; }
}

/* ---------- révélations au scroll ---------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); }
  .js .reveal.est-vu {
    opacity: 1; transform: none;
    transition: opacity var(--t-lent), transform var(--t-lent);
  }
  .js .reveal.est-vu:nth-child(2) { transition-delay: 70ms; }
  .js .reveal.est-vu:nth-child(3) { transition-delay: 140ms; }
}

/* ---------- impression --------------------------------------------------- */
@media print {
  .coupe, .barre, .menu, .hero__cue { display: none !important; }
  body { padding-bottom: 0; background: #fff; color: #000; }
  .section--sombre { background: #fff; color: #000; }
  .section { page-break-inside: avoid; }
}


/* ==========================================================================
   Classes utilitaires
   La politique de sécurité du site interdit les attributs style="",
   tout espacement passe donc par une classe.
   ========================================================================== */
.duo--espace   { margin-top: clamp(2.5rem, 5vw, 4rem); }
.defs--espace  { margin-top: 2rem; }
.corps--espace { margin-top: 1.75rem; }
.bloc-cta      { margin-top: clamp(2rem, 4vw, 2.75rem); }
.form--espace  { margin-top: 2.5rem; }
.section--trait { border-top: 1px solid var(--trait); }
.chiffre dd    { margin: 0; }

/* ==========================================================================
   Vignettes floues
   Chaque image porte en fond une miniature de 20 px encodée dans la CSS.
   Elle occupe la place, dans les bonnes couleurs, jusqu'à l'arrivée du vrai
   fichier — plus de rectangle gris pendant le défilement.
   ========================================================================== */
.lq {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.lq[src] { background-color: transparent; }

/* ==========================================================================
   Parallaxe
   Un seul principe : chaque élément marqué data-vitesse est translaté
   verticalement d'une fraction de sa distance au centre de l'écran.
   Tout passe par transform, jamais par top ou margin : le navigateur
   compose sans recalculer la mise en page.
   ========================================================================== */
[data-vitesse] {
  will-change: transform;
  backface-visibility: hidden;
}

/* Cadre d'une image pleine largeur.
   L'image n'est PAS agrandie : elle est simplement plus haute que sa fenêtre.
   Une photo produite en 16/9 montrée dans une fenêtre en 21/9 déborde de
   part et d'autre, ce qui donne de quoi la faire glisser franchement sans
   jamais perdre en définition ni découvrir de bord. C'est la fenêtre qui
   cadre, pas un agrandissement. */
.fig__cadre {
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
}
.fig__cadre picture { display: block; }
.fig__cadre img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
}

/* couches de tracés d'architecture en fond de section */
.calque {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: var(--encre);
  opacity: .055;
  width: clamp(180px, 26vw, 420px);
}
.section--sombre .calque { color: var(--papier); opacity: .075; }
.section--jardin .calque { opacity: .07; }

.calque svg { width: 100%; height: auto; display: block; }

.calque--droite { inset-block-start: 12%; inset-inline-end: -4%; }
.calque--gauche { inset-block-start: 18%; inset-inline-start: -6%; }

/* la couche ne doit jamais gêner la lecture sur petit écran */
@media (max-width: 900px) {
  .calque { opacity: .04; width: 42vw; }
  .calque--droite { inset-inline-end: -12%; }
  .calque--gauche { inset-inline-start: -14%; }
}

/* le contenu passe devant les tracés */
.section > .enveloppe { position: relative; z-index: 1; }

/* le hero : l'image dérive plus lentement que la page */
.hero__media { will-change: transform; }
.js .hero__media img { transform: scale(1.14); }

@media (prefers-reduced-motion: reduce) {
  [data-vitesse] { transform: none !important; will-change: auto; }
  .js .fig__cadre img { transform: translateY(-50%); }
  .js .hero__media img { transform: none; }
}


/* ==========================================================================
   La charpente
   Pas de cadre, pas de fond : le canevas est transparent et l'ossature se
   pose directement sur la section sombre, derrière le texte. Elle décore
   autant qu'elle informe.
   ========================================================================== */
/* La hauteur de ce bloc EST la durée du mouvement : la scène reste collée à
   l'écran pendant qu'on parcourt les sept écrans de défilement, et c'est ce
   parcours qui fait descendre la caméra puis ouvrir l'éclaté. */
.charpente {
  position: relative;
  margin-block: clamp(3rem, 7vw, 6rem) clamp(1rem, 2vw, 2rem);
  margin-inline: calc(var(--marge) * -1);
  width: calc(100% + var(--marge) * 2);
  height: 700svh;
}

.charpente__scene {
  position: sticky;
  inset-block-start: 0;
  height: 100svh;
  display: grid;
  align-items: center;
}

.charpente__vue {
  grid-area: 1 / 1;
  margin: 0;
  width: 100%;
  height: 100svh;
}
.charpente__vue canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms ease;
}
.charpente__vue.est-pret canvas { opacity: 1; }

.charpente__texte {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  padding-inline: var(--marge);
  max-width: min(34ch, 90%);
  align-self: end;
  padding-bottom: clamp(1rem, 4vh, 3rem);
}
.charpente__texte p {
  margin: .7rem 0 0;
  color: var(--papier);
  text-shadow: 0 1px 18px rgba(14, 12, 10, .9), 0 0 40px rgba(14, 12, 10, .8);
}
.charpente__legende {
  margin-top: 1.1rem !important;
  font-size: .8125rem;
  color: var(--doux-clair) !important;
  letter-spacing: .02em;
}

@media (min-width: 940px) {
  .charpente__texte { align-self: center; }
}

/* Sur petit écran on défile plus vite : quatre écrans suffisent. */
@media (max-width: 700px) {
  .charpente { height: 420svh; }
}

/* Sans animation, pas de course : la charpente est simplement là, montée. */
@media (prefers-reduced-motion: reduce) {
  .charpente { height: auto; }
  .charpente__scene { position: static; height: min(78vh, 720px); }
  .charpente__vue { height: min(78vh, 720px); }
}


/* ---- vignettes floues, générées par build.mjs ---- */
.lq-aerien{background-image:url(data:image/webp;base64,UklGRnwAAABXRUJQVlA4IHAAAADQBACdASoUABsAPwlws1CrpqUisAwBcCEJQBbfbIBqQG1k/wScsTTetXUI+2oQAAD2Oh+/1nSUVNP0cKTW4mo54UN/peLnEpKmZvBtAz9RAsdoIGOrj5oFcqmkD+VScVpF+rRZwOU66ps2I5hSXAAA)}
.lq-concert2{background-image:url(data:image/webp;base64,UklGRlYAAABXRUJQVlA4IEoAAAAwBACdASoUAA8APxl2tFGspyUisAgBkCMJZQDCgCHdssFOT24/GAMPNgAA/sA/LOm5iAy2xM0bj2nRBxiQ/8gGb/xF+y1hTlYAAA==)}
.lq-concert{background-image:url(data:image/webp;base64,UklGRkwAAABXRUJQVlA4IEAAAADwAwCdASoUAA8APxmAtlKsqKUisAgBkCMJZwDKACHf/4Uu0zs2wtggAP7r2euWqbwYqSNjET4c1W9BC9aVh0AA)}
.lq-cour-fete{background-image:url(data:image/webp;base64,UklGRkwAAABXRUJQVlA4IEAAAADQAwCdASoUAA8APxl0sVCspqSisAgBkCMJQAAMMDFxgC9ODH9VMOAA/cr14araXz1Qr1MBUbOL0ySkBrP+vFwA)}
.lq-crest{background-image:url(data:image/webp;base64,UklGRlIAAABXRUJQVlA4IEYAAACwAwCdASoUAA8APxl4slCspySisAgBkCMJZQAAW+Hl2t5kDR3wAAD94eJ7NwiS77HXe/b3qe4CwctSM2GVM1dMKw0u4AAA)}
.lq-fabrique-ext{background-image:url(data:image/webp;base64,UklGRmAAAABXRUJQVlA4IFQAAACQAwCdASoUAA8APxl4slEspySisAgBkCMJQBkTBDrOon9qJ3gAAP5mvv7FcUvqj/ertCf0ONFsZwmbYTXjuWWZ9SxPrUmPfX16Dry1WZ8S+LDAAAA=)}
.lq-fabrique-haut{background-image:url(data:image/webp;base64,UklGRlgAAABXRUJQVlA4IEwAAAAQBACdASoUAA8APxl4slEspySisAgBkCMJYwC06CHfMJbyjqXyceE+0AD+3Mu8z4UPLrMn4y/q8hAbewObWYm1oOQUvzWWUQSrmkAA)}
.lq-fabrique-noir{background-image:url(data:image/webp;base64,UklGRmIAAABXRUJQVlA4IFYAAADQAwCdASoUAA8APxl4slEspySisAgBkCMJYgCdAB6TFWNcyGlMzuAA/uvnen1kJ+re052o1vYgbsCmCAoz1UhzKHc83IHtZSWBsRtApNB/A/KqWugAAA==)}
.lq-fabrique-plateau{background-image:url(data:image/webp;base64,UklGRmIAAABXRUJQVlA4IFYAAADQAwCdASoUAA8APxl2slCspySisAgBkCMJZAC2yB52bf86DhoG4aAA/rxzXMrLbD5Kwr0xXjuexXaUGUPs4tJIPQUCl7eqHFCUZig29DNn+dNWSAAAAA==)}
.lq-fabrique-regie{background-image:url(data:image/webp;base64,UklGRlgAAABXRUJQVlA4IEwAAADwAwCdASoUAA8APxl2s1EspySisAgBkCMJQBibBDvWb0Y/Y82jiycAAP7i6TlhAe9xbL7EJFB7K1u40wAiBkg6cXvDKvKteOF7OIAA)}
.lq-facade{background-image:url(data:image/webp;base64,UklGRlYAAABXRUJQVlA4IEoAAACwAwCdASoUAA8APxl2s1EspySisAgBkCMJYwC06A72GGQT/Z7sAAD8WoTm/WgKPDkI2JbfoYwHxj61+wzUqxkvdBufP2cPrAAAAA==)}
.lq-jardin-chemin{background-image:url(data:image/webp;base64,UklGRnoAAABXRUJQVlA4IG4AAABwBQCdASoUABsAPxl2r1GspyQisBgMAZAjCWYAsOwLLwVzms4J0O7smyVJ6/EWNBzYNCtgAPvpMKX7IkM6rLObwSQxFXJCf16rv9olxdPxXIjuCxiAdiFGQo+/Dg6tOLMxGoaagn24dh5wplWAAA==)}
.lq-jardin-fabrique{background-image:url(data:image/webp;base64,UklGRlAAAABXRUJQVlA4IEQAAAAwAwCdASoUAAsAPxl0sVCspqSisAgBkCMJQBOgAbzP6ACAAPx3/1cDec1MDLSAcT+lkE5Lt+mu9Jdg+IGUXUtcu33wAA==)}
.lq-jardin-terrasse{background-image:url(data:image/webp;base64,UklGRlYAAABXRUJQVlA4IEoAAADwAwCdASoUAAsAPxl2slCspySisAgBkCMJYwC7AB08CTer+4WZFpGAAP66/EB7ybLjZJSSdzHKuO0UDx6dWYjTwMPYtUohaoAAAA==)}
.lq-maison-atelier{background-image:url(data:image/webp;base64,UklGRl4AAABXRUJQVlA4IFIAAAAQBACdASoUAA8APxl2slCspySisAgBkCMJQBOmUABc+Isdq8EZvdQ4AAD3H3hcQpQuDvOp3/56p6jHzRTg5qMg6NMhx7HjGXNJlmqaV33VQAAA)}
.lq-maison-bureau-jardin{background-image:url(data:image/webp;base64,UklGRkwAAABXRUJQVlA4IEAAAAAwAwCdASoUAA8APxl2slEspySisAgBkCMJQBWAAgXPCcwAAPCiSkpT7wRZ1DohQZa3nhpTG1vy6Y900itGgAAA)}
.lq-maison-bureau{background-image:url(data:image/webp;base64,UklGRlQAAABXRUJQVlA4IEgAAACQAwCdASoUAA8APxl0sVCspqSisAgBkCMJQBYdgVP4SQhOr6sAAGm8KaWAC9j7asocieg8oghmPHsAfQnoJVC3RJKdAAqgAAA=)}
.lq-maison-chambre2{background-image:url(data:image/webp;base64,UklGRlIAAABXRUJQVlA4IEYAAACQAwCdASoUAA8APxl0sVCspqSisAgBkCMJZQC7ABQfBbibVNJAAPhPeyblT9d6kjdxuvOOrs03A1fwmG7eFhDUHw3KuAAA)}
.lq-maison-chambre3{background-image:url(data:image/webp;base64,UklGRloAAABXRUJQVlA4IE4AAADwAwCdASoUAA8APxl4slCspySisAgBkCMJQBahJABEY20s78RcW7acAPefbUHpoeZ4UUpn54LiSda74D31drGgba3IozRgU80t3d6AAAA=)}
.lq-maison-cuisine{background-image:url(data:image/webp;base64,UklGRlQAAABXRUJQVlA4IEgAAADQAwCdASoUAA8APxl2slCspySisAgBkCMJZgCdIKnBRfHUmgp+O0AA1tdIv2P3dUHbY9Y1fMiLEo+md2rAUtJKsn3wyw4dUAA=)}
.lq-maison-tabarin{background-image:url(data:image/webp;base64,UklGRlgAAABXRUJQVlA4IEwAAAAQBACdASoUAA8APxl2s1CspySisAgBkCMJZACw7CFU8nQB7poVJ9OrAAD+kBmg/pt5KOPs7FkJidtKjnrxCNaVmpX0FCla0TkOAAAA)}
.lq-portail{background-image:url(data:image/webp;base64,UklGRlgAAABXRUJQVlA4IEwAAACwAwCdASoUAA0APxl2slCspySisAgBkCMJQBOgAw6sNSX1WoAB4AD+v3ZHNU7TEkqfJjwV5TsqMn38G8EV7aHT9pGLM7SfBX4EANAA)}
.lq-riviere{background-image:url(data:image/webp;base64,UklGRmIAAABXRUJQVlA4IFYAAADwAwCdASoUAA0APxl4slEspySisAgBkCMJZgCdL1ABeCG9Kt3pgFgAAP3O3J7vt+xHSmkX2z6CoKwHISMYqMxwJdwGBZb5z3Y3mGMQTIOKzYgB5CgAAA==)}
.lq-salle-pleine{background-image:url(data:image/webp;base64,UklGRmIAAABXRUJQVlA4IFYAAACQAwCdASoUAA8APxl2slCspySisAgBkCMJQBibAwx65KLGz9TgAP7jOVCKKKWl+rXEf/PngjawzH6cY9fk1z9NjhYTHW8RcaRreG0yIzp3bgy39kAAAA==)}
.lq-salle-public{background-image:url(data:image/webp;base64,UklGRloAAABXRUJQVlA4IE4AAADQAwCdASoUAA8APxl2slCspySisAgBkCMJYwC7ABuf0yVdVNv5cUAA/qa4tGPhI4jz/ZtGCQefc+nqqrvn8I/fmGG//xJrv17wnZ64AAA=)}
.lq-usage-installation{background-image:url(data:image/webp;base64,UklGRlQAAABXRUJQVlA4IEgAAADwAwCdASoUAA8APxl2s1CspySisAgBkCMJZQDImCHeseTPfEg6KsAAAP7ug2RUCv7IM4QKAJprKxeFlaA/+96sb7MkNWJWAAA=)}
.lq-usage-tournage{background-image:url(data:image/webp;base64,UklGRlIAAABXRUJQVlA4IEYAAADQAwCdASoUAA8APxl2slCspySisAgBkCMJZQAAW4cByxGYhb4iNoAA/ujaMagjqiUCMDtXrZN//YxPb7zvnIsWkt7AgAAA)}