/* Terrain d'Evange : feuille de style unique, mobile d'abord.
   Direction : pierre claire, texte anthracite, un seul accent (laiton). Titres en Libre Caslon, texte en Hanken Grotesk.
   Le mouvement (révélations, parallaxe, chiffres) est ajouté par le script ; sans lui, tout reste lisible. */

@font-face { font-family: "Libre Caslon Text"; src: url("../polices/LibreCaslonText-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("../polices/LibreCaslonText-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../polices/HankenGrotesk-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../polices/HankenGrotesk-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Position du curseur avant / après : déclarée pour que le déplacement puisse glisser */
@property --pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

:root {
  --fond: oklch(98% 0.002 95);
  --pierre: oklch(95% 0.004 95);
  --blanc: oklch(100% 0 0);
  --encre: oklch(25% 0.01 255);
  --encre-2: oklch(44% 0.012 255);
  --trait: oklch(86% 0.006 95);
  --nuit: oklch(22% 0.01 255);
  --nuit-2: oklch(28% 0.01 255);
  --sur-nuit: oklch(94% 0.004 95);
  --sur-nuit-2: oklch(78% 0.008 255);
  --laiton: oklch(78% 0.105 82);
  --laiton-fonce: oklch(47% 0.085 70);
  --ardoise: oklch(55% 0.04 240);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 80px; --s10: 96px; --s11: 128px;

  --titre: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --texte: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-petit: 0.875rem;
  --t-corps: 1.0625rem;
  --t-chapeau: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --t-h3: 1.1875rem;
  --t-h2: clamp(2rem, 1.45rem + 2.3vw, 3.25rem);
  --t-h1: clamp(2.125rem, 1.2rem + 2.6vw, 3.5rem);

  --sortie: cubic-bezier(0.22, 1, 0.36, 1);
  --gouttiere: 20px;
  --entete: 72px;
  --bloc: clamp(var(--s9), 7vw + 32px, var(--s11));

  /* échelle de calques : en-tête < barre < visionneuse */
  --z-entete: 50;
  --z-barre: 40;
  --z-menu: 60;
}

@media (min-width: 768px) { :root { --gouttiere: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--entete) + var(--s4)); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t-corps);
  line-height: 1.65;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: 1.15; margin: 0; text-wrap: balance; }
h3 { font-family: var(--texte); font-weight: 700; font-size: var(--t-h3); line-height: 1.3; }
p { margin: 0 0 var(--s4); max-width: 68ch; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-decoration-color: var(--laiton); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.bloc--nuit :focus-visible, .heros :focus-visible, .barre :focus-visible, .pied :focus-visible, .visionneuse :focus-visible { outline-color: var(--sur-nuit); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: var(--s4); top: -100px; background: var(--blanc); color: var(--encre); padding: var(--s3) var(--s4); z-index: 100; font-weight: 700; }
.lien-evitement:focus { top: var(--s2); }

.conteneur { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gouttiere); }

/* Boutons : carrés, sobres. Laiton sur fond sombre, anthracite sur fond clair. */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: var(--s3) var(--s5);
  background: var(--encre); color: var(--blanc); border: 1px solid var(--encre);
  font: 700 0.9375rem/1.2 var(--texte); letter-spacing: 0.01em; text-decoration: none; border-radius: 0; cursor: pointer;
  transition: background-color 0.25s var(--sortie), color 0.25s var(--sortie), border-color 0.25s var(--sortie);
}
.bouton:hover { background: var(--nuit-2); border-color: var(--nuit-2); }
.bouton--petit { min-height: 44px; padding: var(--s2) var(--s4); font-size: var(--t-petit); }
.bouton--grand { min-height: 60px; font-size: 1.125rem; padding: var(--s4) var(--s6); overflow-wrap: anywhere; }
.bouton--laiton { background: var(--laiton); border-color: var(--laiton); color: var(--nuit); }
.bouton--laiton:hover { background: oklch(84% 0.1 82); border-color: oklch(84% 0.1 82); }
.bouton--lien { background: transparent; border-color: transparent; color: inherit; text-decoration: underline; text-decoration-color: var(--laiton); text-decoration-thickness: 1.5px; text-underline-offset: 6px; padding-inline: var(--s2); }
.bouton--lien:hover { background: transparent; border-color: transparent; text-decoration-color: currentColor; }
.bouton--contour { background: transparent; border-color: currentColor; color: inherit; }
.bouton--contour:hover { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.bouton--clair { background: var(--blanc); border-color: var(--blanc); color: var(--nuit); }
.bouton--clair:hover { background: var(--sur-nuit); border-color: var(--sur-nuit); }

/* En-tête : sur le premier écran il flotte sur la vidéo, ensuite il devient plein */
/* Bandeau sombre plein et opaque, partout et à tout moment : le contenu passe dessous, jamais à travers */
.entete { position: fixed; inset: 0 0 auto 0; z-index: var(--z-entete); background: var(--nuit); color: var(--blanc); padding-top: env(safe-area-inset-top); border-bottom: 1px solid oklch(100% 0 0 / 0.16); box-shadow: 0 6px 16px oklch(14% 0.01 255 / 0.35); }
.entete .conteneur { max-width: 1520px; } /* même bord gauche que le texte de l'accueil */
.entete__ligne { display: flex; align-items: center; gap: var(--s4); min-height: var(--entete); }
.entete__marque { display: inline-flex; align-items: center; gap: var(--s3); font: 400 1.3125rem/1 var(--titre); text-decoration: none; margin-right: auto; min-height: 44px; }
.entete__sigle { width: 30px; height: 30px; fill: currentColor; }
.entete__sigle .sigle-ligne { fill: none; stroke: var(--laiton); stroke-width: 2.4; }
.entete__nav { display: none; }
.entete__ecrire { display: none; }
.entete__menu { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s3); background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 0; font: 700 var(--t-petit)/1 var(--texte); cursor: pointer; }
.entete__menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; }
.menu-mobile { background: var(--nuit); color: var(--blanc); border-top: 1px solid oklch(100% 0 0 / 0.14); max-height: calc(100dvh - var(--entete)); overflow-y: auto; }
.menu-mobile[hidden] { display: none; }
.menu-mobile__liste { list-style: none; padding: var(--s3) 0 var(--s6); }
.menu-mobile__liste a { display: flex; align-items: center; min-height: 52px; text-decoration: none; border-bottom: 1px solid oklch(100% 0 0 / 0.14); font: 400 1.375rem/1.2 var(--titre); }

@media (min-width: 1024px) {
  .entete__nav { display: flex; gap: var(--s6); }
  .entete__nav a { text-decoration: none; font-size: 0.9375rem; font-weight: 700; padding: var(--s3) 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size 0.3s var(--sortie); }
  .entete__nav a:hover { background-size: 100% 1.5px; }
  .entete__ecrire { display: inline-flex; }
  .entete__menu { display: none; }
  .menu-mobile { display: none !important; }
  .entete__ecrire { background: transparent; border-color: var(--blanc); color: var(--blanc); }
  .entete__ecrire:hover { background: var(--blanc); border-color: var(--blanc); color: var(--nuit); }
}

/* Premier écran : l'image (un avant / après qu'on déplace) occupe tout l'écran, le texte est posé dessus en bas à gauche.
   Le texte ne capte pas la souris ni le doigt : on peut attraper la séparation partout, sauf sur les boutons. */
.heros { position: relative; isolation: isolate; display: grid; align-items: end; min-height: 100vh; min-height: 100svh; background: var(--nuit); color: var(--blanc); overflow: clip; }
.heros__scene { position: absolute; inset: calc(var(--entete) + env(safe-area-inset-top)) 0 0 0; z-index: -2; }
.heros__scene .comparer, .heros__scene .comparer__scene { height: 100%; }
.heros .comparer--hero .comparer__scene { aspect-ratio: auto; width: 100%; }
.comparer--hero .comparer__image img { object-position: 50% 45%; }
.comparer--hero .comparer__etiquette { top: var(--s3); }
/* Voile de lisibilité : posé sur les images, sous la poignée et les étiquettes, sans capter la souris */
.comparer--hero .comparer__scene::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, oklch(14% 0.01 255 / 0.6) 0%, oklch(14% 0.01 255 / 0.52) 38%, oklch(14% 0.01 255 / 0) 62%); -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 34%); mask-image: linear-gradient(to bottom, transparent 8%, #000 34%); }
/* Ombre douce : elle aide la lecture sans assombrir l'image */
.heros__surtitre, .heros h1, .prix__montant, .prix__detail, .heros__actions .bouton--lien { text-shadow: 0 1px 2px oklch(14% 0.01 255 / 0.7), 0 0 14px oklch(14% 0.01 255 / 0.55); }
.heros__contenu { display: grid; gap: var(--s6); padding: calc(var(--entete) + var(--s8)) var(--gouttiere) var(--s7); max-width: 660px; pointer-events: none; }
.heros__contenu a { pointer-events: auto; }
.heros__surtitre { margin: 0 0 var(--s4); font-size: 0.9375rem; font-weight: 700; color: var(--sur-nuit); }
.heros h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.015em; }
.heros__prix { display: grid; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid oklch(100% 0 0 / 0.45); }
.prix__montant { margin: 0; font: 400 clamp(2.25rem, 1.8rem + 2.4vw, 3.75rem)/1 var(--titre); letter-spacing: -0.01em; max-width: none; white-space: nowrap; }
.prix__detail { margin: var(--s1) 0 0; font-size: var(--t-petit); color: var(--sur-nuit); }
.heros__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
@keyframes monte { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
.heros__surtitre, .heros h1, .heros__prix { animation: monte 1s var(--sortie) both; }
.heros h1 { animation-delay: 0.12s; }
.heros__prix { animation-delay: 0.3s; }

@media (min-width: 1024px) {
  .heros__contenu { padding: calc(var(--entete) + var(--s8)) 0 var(--s8) max(var(--gouttiere), calc((100vw - 1520px) / 2 + var(--gouttiere))); }
}
@media (max-width: 1023px) {
  /* Mobile et tablette : l'image vient sous le bandeau, entière et pleine largeur, puis le texte sur fond sombre uni. */
  .heros { min-height: 0; align-content: start; padding-top: calc(var(--entete) + env(safe-area-inset-top)); }
  .heros__scene { position: relative; inset: auto; z-index: 0; }
  .heros__scene .comparer, .heros__scene .comparer__scene { height: auto; }
  .heros .comparer--hero .comparer__scene { aspect-ratio: 3 / 2; } /* le format de l'image : rien n'est rogné, les mentions incrustées restent visibles */
  .comparer--hero .comparer__scene::after { display: none; }
  .comparer--hero .comparer__etiquette { top: var(--s3); }
  .comparer--hero .comparer__image img { object-position: 50% 50%; }
  .heros__surtitre, .heros h1, .prix__montant, .prix__detail, .heros__actions .bouton--lien { text-shadow: none; }
  .heros__contenu { gap: var(--s4); padding: var(--s5) var(--gouttiere) var(--s6); max-width: none; pointer-events: auto; }
  .heros__prix { gap: var(--s3); }
}
@media (max-width: 639px) {
  .heros h1 { font-size: 2rem; line-height: 1.08; }
  .heros__surtitre { margin-bottom: var(--s2); font-size: 0.875rem; }
  .prix__montant { font-size: 2.25rem; }
}

@media (max-width: 1023px) and (max-height: 700px) {
  /* Petit téléphone : le texte se resserre un peu pour que le prix et le bouton restent dans le premier écran */
  .heros__contenu { padding-top: var(--s4); padding-bottom: var(--s5); gap: var(--s3); }
  .heros h1 { font-size: 1.75rem; }
  .heros__prix { padding-top: var(--s3); gap: var(--s2); }
  .prix__montant { font-size: 2rem; }
}

/* Introduction et chiffres clés */
.intro { padding-block: var(--bloc); }
.intro__grille { display: grid; gap: var(--s8); }
.intro__texte { margin: 0; max-width: 34ch; font: 400 clamp(1.5rem, 1.1rem + 1.9vw, 2.625rem)/1.3 var(--titre); letter-spacing: -0.005em; text-wrap: balance; }
.faits { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s5); margin: 0; }
.faits > div { padding-top: var(--s4); border-top: 1px solid var(--encre); }
.faits dt { font-size: var(--t-petit); color: var(--encre-2); }
.faits dd { margin: var(--s2) 0 0; font: 400 1.375rem/1.25 var(--titre); }
.faits .nombre { font-variant-numeric: tabular-nums; }
.faits > div:last-child { grid-column: 1 / -1; }
@media (min-width: 640px) { .faits { grid-template-columns: repeat(3, 1fr); } .faits > div:last-child { grid-column: auto; } }
@media (min-width: 960px) { .faits { grid-template-columns: repeat(5, 1fr); } .faits dd { font-size: 1.5rem; } }

/* Blocs de contenu */
.bloc { padding-block: var(--bloc); }
.bloc--pierre { background: var(--pierre); }
.bloc--nuit { background: var(--nuit); color: var(--sur-nuit); }
.bloc__grille { display: grid; gap: var(--s6); }
.bloc__tete { display: grid; gap: var(--s4); align-content: start; }
.bloc__tete::before { content: ""; width: 48px; height: 2px; background: var(--laiton); }
.bloc h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.01em; }
.bloc__corps > * + * { margin-top: var(--s7); }
.bloc__corps > p, .bloc__corps > .chapeau { margin-bottom: 0; }
.bloc__corps > .chapeau + * { margin-top: var(--s6); }
.chapeau { font-size: var(--t-chapeau); line-height: 1.5; }
.chapeau--fort { font-family: var(--titre); font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); line-height: 1.28; }
.note { font-size: var(--t-petit); color: var(--encre-2); }
.bloc--nuit .note { color: var(--sur-nuit-2); }

@media (min-width: 960px) {
  .bloc__grille { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s9); }
  .bloc__tete { position: sticky; top: calc(var(--entete) + var(--s6)); align-self: start; }
  .bloc__grille--large { grid-template-columns: 1fr; gap: var(--s7); }
  .bloc__grille--large .bloc__tete { position: static; max-width: 760px; }
}

.deux-colonnes { display: grid; gap: var(--s5); }
@media (min-width: 768px) { .deux-colonnes { grid-template-columns: 1fr 1fr; gap: var(--s7); } }
.deux-colonnes p:last-child { margin-bottom: 0; }

.liste { list-style: none; display: grid; gap: var(--s3); }
.liste li { padding-left: var(--s5); position: relative; max-width: 68ch; }
.liste li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 12px; height: 1px; background: currentColor; }
.liste--numerotee { counter-reset: liste; }
.liste--numerotee li { counter-increment: liste; padding-left: var(--s6); }
.liste--numerotee li::before { content: counter(liste) "."; background: none; top: 0; width: auto; font: 700 var(--t-petit)/1.9 var(--texte); color: var(--laiton-fonce); }

/* Fiche d'identité du terrain */
.fiche { margin: 0; border-top: 1px solid var(--encre); }
.fiche > div { display: grid; gap: var(--s1); padding: var(--s4) 0; border-bottom: 1px solid var(--trait); }
.fiche dt { font-size: var(--t-petit); font-weight: 700; color: var(--encre-2); }
.fiche dd { margin: 0; }
@media (min-width: 640px) { .fiche > div { grid-template-columns: 180px 1fr; gap: var(--s5); } }


/* Comparateur avant / après */
.comparaisons { display: grid; gap: var(--s8); }
.comparer { margin: 0; position: relative; }
/* Le curseur reste dans la page pour le clavier et les lecteurs d'écran, mais on ne le voit pas : la poignée de l'image prend le relais */
.comparer__curseur { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.comparer:has(.comparer__curseur:focus-visible) .comparer__poignee::after { outline: 3px solid var(--blanc); outline-offset: 3px; box-shadow: 0 0 0 7px var(--laiton); }
.comparer__scene img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.comparer__scene { -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; position: relative; aspect-ratio: 1536 / 656; /* format des visuels : la mention incrustée ne doit pas être rognée */ overflow: hidden; background: var(--trait); --pos: 50%; touch-action: pan-y; user-select: none; cursor: ew-resize; }
/* Images en 16:9 (vue d'ensemble) */
.comparer--16x9 .comparer__scene { aspect-ratio: 16 / 9; }
.comparer--3x2 .comparer__scene { aspect-ratio: 3 / 2; }
.comparer__scene.est-lisse { transition: --pos 0.35s var(--sortie); }
.comparer__image { position: absolute; inset: 0; }
.comparer__image img { width: 100%; height: 100%; object-fit: cover; }
.comparer__image--avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comparer__poignee { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--blanc); box-shadow: 0 0 12px oklch(14% 0.01 255 / 0.4); z-index: 2; pointer-events: none; }
.comparer__poignee::after { content: ""; position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2f36' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 24px no-repeat; border-radius: 50%; box-shadow: 0 2px 16px oklch(14% 0.01 255 / 0.35); }
.comparer__etiquette { position: absolute; top: var(--s4); background: var(--nuit); color: var(--blanc); font-size: 0.8125rem; line-height: 1.2; padding: var(--s2) var(--s3); z-index: 3; max-width: calc(50% - var(--s5)); pointer-events: none; transition: opacity 0.2s ease; }
.comparer__etiquette.est-masquee { opacity: 0; }
.etiq-court { display: none; }
.comparer__etiquette--avant { left: var(--s4); }
.comparer__etiquette--apres { right: var(--s4); }
@media (max-width: 639px) {
  .comparer__etiquette { top: var(--s2); font-size: 0.8125rem; padding: var(--s1) var(--s2); max-width: calc(50% - var(--s4)); }
  .etiq-long { display: none; }
  .etiq-court { display: inline; }
  .comparer__etiquette--avant { left: var(--s2); }
  .comparer__etiquette--apres { right: var(--s2); }
  .comparer__poignee::after { width: 40px; height: 40px; margin: -20px 0 0 -20px; background-size: 20px; }
}
.comparer figcaption { margin-top: var(--s4); }
.comparer figcaption, .video figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.comparer figcaption strong { font: 400 1.375rem/1.2 var(--titre); }
.comparer--attente figcaption, .video--attente figcaption { margin-top: var(--s3); }

.emplacement { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; width: 100%; background: var(--pierre); color: var(--encre-2); overflow: hidden; border: 1px dashed var(--encre-2); }
.emplacement svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: oklch(55% 0.04 240 / 0.16); }
.emplacement span { position: relative; padding: var(--s3) var(--s4); font-size: var(--t-petit); font-weight: 700; text-align: center; max-width: 32ch; }

.videos { display: grid; gap: var(--s6); }
.video { margin: 0; }
.video__cadre { position: relative; background: var(--nuit); aspect-ratio: 9 / 16; max-height: 80vh; max-width: 100%; margin-inline: auto; }
.video__cadre video { width: 100%; height: 100%; object-fit: cover; }
.video__mobile { display: block; }
.video__bureau { display: none; }
.video figcaption { margin-top: var(--s3); }
.video figcaption strong { font: 400 1.375rem/1.2 var(--titre); }
@media (min-width: 768px) {
  .video__mobile { display: none; }
  .video__bureau { display: block; }
  .video__cadre { aspect-ratio: 16 / 9; max-height: none; }
}

/* Rappel sur les dimensions réelles, à côté des visuels */
.rappel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); padding: var(--s5); background: var(--fond); border: 1px solid var(--encre); }
.rappel__texte { margin: 0; flex: 1 1 280px; }

/* Trajets */
.trajets { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--encre); }
.trajet { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nom duree" "barre barre"; align-items: baseline; gap: var(--s2) var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--trait); }
.trajet__nom { grid-area: nom; font-weight: 700; display: grid; }
.trajet small { font-weight: 400; font-size: var(--t-petit); color: var(--encre-2); }
.trajet__barre { grid-area: barre; width: 100%; height: 6px; overflow: hidden; }
.trajet__fond { fill: var(--pierre); }
.bloc--pierre .trajet__fond { fill: var(--trait); }
.trajet__valeur { fill: var(--encre); }
.trajet--cle .trajet__valeur { fill: var(--laiton-fonce); }
.trajet__duree { grid-area: duree; font: 400 1.5rem/1.1 var(--titre); text-align: right; display: grid; font-variant-numeric: tabular-nums; }
.trajet__duree small { font-family: var(--texte); }
.trajet--cle .trajet__nom { font-size: 1.125rem; }
@media (min-width: 768px) {
  .trajet { grid-template-columns: minmax(200px, 280px) 1fr 110px; grid-template-areas: "nom barre duree"; align-items: center; }
  .trajet__barre { height: 8px; }
}

/* Plan */
.plan { border: 1px solid var(--encre); background: var(--fond); }
.plan__outils { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--encre); background: var(--pierre); }
.calque { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; cursor: pointer; font-size: var(--t-petit); font-weight: 700; }
.calque input { width: 22px; height: 22px; accent-color: var(--encre); margin: 0; }
.plan__zone { display: grid; gap: var(--s4); padding: var(--s4); }
.plan__svg { width: 100%; max-width: 480px; max-height: 80vh; margin-inline: auto; height: auto; font-family: var(--texte); }
.plan__legende { margin: 0; padding: var(--s4); background: var(--pierre); font-size: var(--t-petit); max-width: none; min-height: 4.5em; }
.plan__route polygon { fill: var(--trait); stroke: none; }
.plan__parcelle { fill: oklch(92% 0.03 85); }
.plan__parcelle-hachure { pointer-events: none; opacity: 0.5; }
.hachure { stroke: oklch(70% 0.06 82); stroke-width: 1.2; }
.plan__recul { fill: oklch(55% 0.04 240 / 0.26); stroke: var(--ardoise); stroke-width: 1.5; stroke-dasharray: 8 5; cursor: pointer; }
.plan__maison { fill: var(--encre); stroke: var(--nuit); stroke-width: 2; cursor: pointer; }
.plan__limite { fill: none; stroke: var(--encre); stroke-width: 3; stroke-linejoin: round; pointer-events: none; }
.zone-clic { fill: none; stroke: transparent; stroke-width: 30; stroke-linecap: round; cursor: pointer; }
.plan__nom { fill: var(--blanc); font: 700 19px/1 var(--texte); }
.plan__nom--petit { font-weight: 400; font-size: 16px; }
.plan__rue { font: 700 18px var(--texte); fill: var(--encre-2); letter-spacing: 0.06em; text-transform: uppercase; }
.plan__voisin { font: 400 16px var(--texte); fill: var(--encre-2); }
.plan__surface { font: 400 28px var(--titre); fill: var(--encre); }
.cote { font: 700 16px var(--texte); fill: var(--encre); paint-order: stroke; stroke: var(--fond); stroke-width: 4px; stroke-linejoin: round; }
.cote--maison { fill: var(--encre); }
.fleche { stroke: var(--encre); stroke-width: 1.5; stroke-dasharray: 4 3; }
.nord path { fill: var(--encre); }
.nord text { font: 700 14px var(--texte); fill: var(--encre); }
.echelle path { stroke: var(--encre); stroke-width: 2; fill: none; }
.echelle text { font: 700 16px var(--texte); fill: var(--encre); }
.plan__svg [data-info]:focus-visible { outline: none; stroke: var(--laiton-fonce); stroke-width: 4; }
.plan [hidden], .plan__svg .est-cache { display: none; }
@media (min-width: 768px) {
  .plan__zone { grid-template-columns: minmax(240px, 400px) 1fr; align-items: start; gap: var(--s6); padding: var(--s5); }
  .plan__legende { position: sticky; top: calc(var(--entete) + var(--s5)); }
}

/* Règles */
.regles { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--encre); }
.regles li { display: grid; gap: var(--s2); padding: var(--s6) 0; border-bottom: 1px solid var(--trait); }
.regle__valeur { font: 400 clamp(2rem, 1.5rem + 2vw, 3rem)/1.05 var(--titre); letter-spacing: -0.01em; margin: 0; }
.regle__sep { color: var(--encre-2); }
.regles h3 { margin: 0; }
.regles p { margin: 0; }
.regle__art { font-size: var(--t-petit); color: var(--encre-2); }
@media (min-width: 768px) {
  .regles li { grid-template-columns: 300px 1fr; grid-template-areas: "valeur titre" "valeur texte" "valeur art"; column-gap: var(--s7); align-items: start; }
  .regle__valeur { grid-area: valeur; }
  .regles h3 { grid-area: titre; }
  .regles li > p:nth-of-type(2) { grid-area: texte; }
  .regle__art { grid-area: art; }
}
.encadre { padding: var(--s6); background: var(--pierre); }
.bloc--pierre .encadre { background: var(--fond); }
.encadre h3 { margin-bottom: var(--s3); }
.encadre p:last-child { margin-bottom: 0; }

/* Étude de sol (fond sombre) */
.etapes { list-style: none; display: grid; gap: var(--s3); }
.etape { display: grid; gap: var(--s1); padding: var(--s5); border: 1px solid oklch(100% 0 0 / 0.25); }
.etape--fait { border-color: var(--laiton); }
.etape__marque { font-size: var(--t-petit); font-weight: 700; color: var(--sur-nuit-2); }
.etape--fait .etape__marque { color: var(--laiton); }
.etape strong { font: 400 1.375rem/1.25 var(--titre); }
@media (min-width: 768px) { .etapes { grid-template-columns: repeat(3, 1fr); } }
.sol__points { display: grid; gap: var(--s7) var(--s7); }
.sol__points h3 { color: var(--laiton); margin-bottom: var(--s2); }
.sol__points p { margin: 0; color: var(--sur-nuit); }
@media (min-width: 768px) { .sol__points { grid-template-columns: 1fr 1fr; } }
.bloc--nuit a { text-decoration-color: var(--laiton); }

/* Réseaux */
.tableau-conteneur { overflow-x: auto; }
.reseaux { width: 100%; border-collapse: collapse; border-top: 1px solid var(--encre); min-width: 0; }
.reseaux thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.reseaux tr { display: grid; gap: var(--s2); padding: var(--s5) 0; border-bottom: 1px solid var(--trait); }
.reseaux th, .reseaux td { display: block; text-align: left; padding: 0; font-weight: 400; }
.reseaux tbody th { font: 400 1.375rem/1.2 var(--titre); }
.pastille { display: inline-block; padding: var(--s1) var(--s3); font-size: var(--t-petit); font-weight: 700; border: 1px solid var(--encre); }
.pastille--oui { background: var(--encre); color: var(--blanc); }
.pastille--oui::before { content: "✓ "; }
.pastille--non { background: transparent; }
.pastille--attention { background: transparent; border-style: dashed; }
@media (min-width: 768px) {
  .reseaux thead { position: static; width: auto; height: auto; clip: auto; }
  .reseaux tr { grid-template-columns: 170px 160px 1fr; gap: var(--s5); align-items: baseline; }
  .reseaux thead tr { padding: var(--s3) 0; }
  .reseaux thead th { font-size: var(--t-petit); font-weight: 700; color: var(--encre-2); }
}

/* Permis précédent */
.permis__planches { display: grid; gap: var(--s5); }
.planche { margin: 0; background: var(--fond); border: 1px solid var(--trait); padding: var(--s4); }
.planche img { width: 100%; }
.planche figcaption { font-size: var(--t-petit); color: var(--encre-2); margin-top: var(--s3); }
@media (min-width: 768px) { .permis__planches { grid-template-columns: 1.4fr 1fr; } .planche:first-child { grid-column: 1 / -1; } }

/* FAQ */
.faq__outils { display: grid; gap: var(--s4); }
.faq__recherche { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: 0 var(--s4); border: 1px solid var(--encre); background: var(--fond); }
.faq__recherche:focus-within { outline: 2px solid var(--encre); outline-offset: 3px; }
.faq__recherche svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--encre); stroke-width: 1.8; stroke-linecap: round; }
.faq__recherche input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--encre); min-height: 48px; outline: none; }
.faq__recherche input::placeholder { color: var(--encre-2); opacity: 1; }
.faq__themes { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }
.theme { min-height: 44px; min-width: 44px; padding: var(--s2) var(--s1); background: transparent; border: 0; border-bottom: 1.5px solid transparent; color: var(--encre-2); font: 700 var(--t-petit)/1.2 var(--texte); cursor: pointer; border-radius: 0; }
.theme:hover { color: var(--encre); }
.theme[aria-pressed="true"] { color: var(--encre); border-bottom-color: var(--laiton-fonce); }
.faq__compte { margin: 0; font-size: var(--t-petit); color: var(--encre-2); }
.faq { border-top: 1px solid var(--encre); }
.question { border-bottom: 1px solid var(--trait); }
.question[hidden] { display: none; }
.question summary { list-style: none; display: grid; gap: var(--s1); padding: var(--s5) var(--s8) var(--s5) 0; cursor: pointer; position: relative; min-height: 56px; }
.question summary::-webkit-details-marker { display: none; }
.question summary::before, .question summary::after { content: ""; position: absolute; right: var(--s3); top: 50%; width: 18px; height: 1.5px; margin-top: -1px; background: var(--encre); transition: transform 0.3s var(--sortie); }
.question summary::after { transform: rotate(90deg); }
.question[open] summary::after { transform: rotate(0); }
.question__theme { font-size: var(--t-petit); font-weight: 700; color: var(--laiton-fonce); }
.question__texte { font: 400 1.3125rem/1.3 var(--titre); }
.question summary:hover .question__texte { text-decoration: underline; text-decoration-color: var(--laiton); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.question__reponse { padding: 0 0 var(--s6); }
.question__reponse p:last-child { margin-bottom: 0; }
.question mark { background: oklch(88% 0.1 85); color: var(--encre); }
.faq__vide { margin-top: var(--s5); }

/* Documents */
.documents { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--encre); }
.document__lien { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "texte icone" "taille icone"; gap: var(--s1) var(--s5); align-items: center; padding: var(--s5) 0; border-bottom: 1px solid var(--trait); text-decoration: none; transition: padding 0.35s var(--sortie); }
.document__lien:hover { padding-left: var(--s3); }
.document__icone { grid-area: icone; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--encre); transition: background-color 0.25s var(--sortie); }
.document__icone svg { width: 22px; height: 22px; fill: none; stroke: var(--encre); stroke-width: 1.8; stroke-linecap: square; transition: stroke 0.25s var(--sortie); }
.document__lien:hover .document__icone { background: var(--encre); }
.document__lien:hover .document__icone svg { stroke: var(--blanc); }
.document__texte { grid-area: texte; display: grid; }
.document__texte strong { font: 400 1.25rem/1.3 var(--titre); }
.document__texte small { font-size: var(--t-petit); color: var(--encre-2); }
.document__taille { grid-area: taille; font-size: var(--t-petit); font-weight: 700; color: var(--encre-2); }
@media (min-width: 768px) {
  .documents { grid-template-columns: 1fr 1fr; column-gap: var(--s8); }
}

/* Contact */
.contact__lien { margin: 0 !important; }
.contact .bouton--grand { background: var(--laiton); border-color: var(--laiton); color: var(--nuit); }
.contact .bouton--grand:hover { background: oklch(84% 0.1 82); border-color: oklch(84% 0.1 82); }
.contact h3 { color: var(--laiton); margin-bottom: var(--s2); }
.contact .deux-colonnes p { color: var(--sur-nuit); }

/* Pied */
.pied { background: oklch(18% 0.01 255); color: var(--sur-nuit-2); padding-block: var(--s8) calc(var(--s8) + env(safe-area-inset-bottom)); font-size: var(--t-petit); }
.pied__grille { display: grid; gap: 0; }
.pied p { max-width: 78ch; }
.pied a { text-decoration-color: var(--laiton); }

/* Barre de prix et de contact : apparaît quand le premier écran est passé */
.barre { position: fixed; inset: auto 0 0 0; z-index: var(--z-barre); display: none; background: var(--nuit); color: var(--blanc); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid oklch(100% 0 0 / 0.14); }
.js .barre { display: block; transform: translate3d(0, 100%, 0); visibility: hidden; }
.js .barre.est-visible { transform: none; visibility: visible; transition: transform 0.5s var(--sortie); }
.barre__ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px; padding-block: var(--s2); }
.barre__prix { margin: 0; max-width: none; display: grid; line-height: 1.2; }
.barre__prix strong { font: 400 1.5rem/1.1 var(--titre); }
.barre__prix span { font-size: var(--t-petit); color: var(--sur-nuit-2); }
.barre .bouton { min-height: 44px; }
@media (min-width: 768px) {
  .barre { inset: auto var(--s5) var(--s5) auto; width: 440px; border: 1px solid oklch(100% 0 0 / 0.14); padding-bottom: 0; }
  .barre__ligne { padding-inline: var(--s5); }
}

/* Visionneuse plein écran : un visuel à la fois, balayage ou flèches pour passer au suivant */
.visionneuse { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--nuit); color: var(--blanc); overflow: hidden; }
.visionneuse::backdrop { background: var(--nuit); }
.visionneuse[open] { display: grid; grid-template-rows: auto 1fr auto; }
.visionneuse__barre { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--gouttiere); padding-top: calc(var(--s3) + env(safe-area-inset-top)); }
.visionneuse__titre { margin: 0 auto 0 0; font: 400 1.375rem/1.2 var(--titre); }
.visionneuse__compte { margin: 0; font-size: var(--t-petit); color: var(--sur-nuit-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 639px) { .visionneuse__titre { font-size: 1.125rem; } .visionneuse__aide { font-size: 0.8125rem; } }
.visionneuse__contenu { display: grid; place-items: center; padding: 0 var(--gouttiere); min-height: 0; touch-action: pan-y; }
.visionneuse__contenu .comparer { width: 100%; max-width: min(100%, calc((100dvh - 210px) * 2.34)); }
.visionneuse__contenu .comparer--16x9 { max-width: min(100%, calc((100dvh - 210px) * 1.778)); }
.visionneuse__contenu .comparer--3x2 { max-width: min(100%, calc((100dvh - 210px) * 1.5)); }
.visionneuse__contenu figcaption { display: none; }
.visionneuse__contenu .visionneuse__contenu .visionneuse__contenu .visionneuse__nav { display: flex; align-items: center; justify-content: center; gap: var(--s5); padding: var(--s3) var(--gouttiere) calc(var(--s4) + env(safe-area-inset-bottom)); }
.visionneuse__nav button { display: grid; place-items: center; width: 52px; height: 52px; background: transparent; color: inherit; border: 1px solid oklch(100% 0 0 / 0.5); cursor: pointer; border-radius: 50%; transition: background-color 0.25s var(--sortie); }
.visionneuse__nav button:hover { background: oklch(100% 0 0 / 0.14); }
.visionneuse__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.visionneuse__aide { margin: 0; font-size: var(--t-petit); color: var(--sur-nuit-2); max-width: none; }

/* Mouvement au défilement : appliqué seulement quand le script l'a activé (classe .anime) et que l'utilisateur ne l'a pas désactivé */
.anime .revele:not(.est-visible) { opacity: 0; transform: translate3d(0, 28px, 0); }
.anime .revele { transition: opacity 0.9s var(--sortie), transform 0.9s var(--sortie); transition-delay: calc(min(var(--i, 0), 5) * 90ms); }
.anime .trajet__valeur { transform: scaleX(0); transform-box: fill-box; transform-origin: 0 50%; transition: transform 1.2s var(--sortie) calc(min(var(--i, 0), 9) * 70ms + 200ms); }
.anime .trajet.est-visible .trajet__valeur { transform: none; }
.anime .faits > div { border-top-color: transparent; background: linear-gradient(var(--encre), var(--encre)) 0 0 / 0 1px no-repeat; }
.anime .faits > div.est-visible { background-size: 100% 1px; transition: background-size 1.1s var(--sortie) calc(min(var(--i, 0), 5) * 90ms); }