/* Estimateur : couleurs du client (variables), polices eclosion.
   Les trois couleurs de marque sont injectees par construire.py depuis
   client.yaml ; tout le reste en decoule. Pense d'abord pour le telephone :
   le trafic vient des publicites Facebook et Instagram. */

:root {
  --noir: #11150F;
  --vert: #52AE32;
  --anis: #D3D800;
  --vert-texte: #30651D;      /* vert lisible sur fond clair */
  --fond: #F5F6F0;
  --pale: #ECF0E2;
  --blanc: #FFFFFF;
  --gris: #5E6458;
  --gris-clair: #8C9285;
  --trait: #E2E5DA;
  --rouge: #B4432F;

  --titre: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --rayon: 18px;
  --ombre: 0 1px 2px rgba(17, 21, 15, .05), 0 8px 28px rgba(17, 21, 15, .07);
  --marge: clamp(18px, 5vw, 40px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 16px/1.55 var(--titre);
  color: var(--noir);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--vert-texte); }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--anis); outline-offset: 2px; border-radius: 6px; }

h1, h2, h3 { font-family: var(--titre); font-weight: 500; letter-spacing: -0.025em; line-height: 1.08; margin: 0; }
h1 em, h2 em, h3 em, .titre em {
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--vert-texte);
}
.surtitre {
  font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .14em;
  color: var(--vert-texte); margin: 0 0 14px;
}
.surtitre.clair { color: var(--anis); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.etoiles { color: var(--anis); letter-spacing: .08em; }

/* ---------------------------------------------------------------- boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border: 0; border-radius: 999px;
  font: 600 16px/1 var(--titre); letter-spacing: -0.005em; text-decoration: none;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.bouton:active { transform: scale(.98); }
.bouton-vert { background: var(--vert); color: var(--noir); }
.bouton-vert:hover { background: #5CBD3A; box-shadow: 0 6px 20px rgba(82, 174, 50, .35); }
.bouton-noir { background: var(--noir); color: var(--blanc); }
.bouton-noir:hover { background: #262C22; }
.bouton-contour { background: transparent; color: var(--noir); box-shadow: inset 0 0 0 1.5px var(--trait); }
.bouton-contour:hover { box-shadow: inset 0 0 0 1.5px var(--noir); }
.bouton-grand { min-height: 60px; padding: 0 34px; font-size: 17px; }
.bouton[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.bouton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ barre */
.barre { background: var(--noir); color: var(--blanc); }
.barre-dedans {
  max-width: 1120px; margin: 0 auto; padding: 14px var(--marge);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.signature { color: inherit; text-decoration: none; display: flex; flex-direction: column; line-height: 1.2; }
.signature-nom { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.signature-titre { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.barre-note { color: var(--blanc); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; }

/* ------------------------------------------------------------------ heros */
.heros {
  background: var(--noir); color: var(--blanc);
  position: relative; isolation: isolate; overflow-x: clip;
  --mx: 70%; --my: 40%;
}
/* Fond vivant : trois halos qui derivent lentement, une trame qui s'efface,
   et une lumiere qui suit la souris. */
.heros-fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* Liste d'adresses ouverte : le heros passe devant le bandeau jaune. */
.heros:has(.suggestions:not([hidden])) { z-index: 6; }
.heros-fond i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.heros-fond i:nth-child(1) { width: 62vmax; height: 62vmax; left: 38%; top: -28%; background: radial-gradient(circle, var(--vert), transparent 65%); animation: derive-a 22s ease-in-out infinite alternate; }
.heros-fond i:nth-child(2) { width: 38vmax; height: 38vmax; left: -12%; top: 48%; background: radial-gradient(circle, var(--anis), transparent 62%); opacity: .22; animation: derive-b 26s ease-in-out infinite alternate; }
.heros-fond i:nth-child(3) { width: 46vmax; height: 46vmax; left: 62%; top: 52%; background: radial-gradient(circle, #1F6B12, transparent 65%); opacity: .5; animation: derive-c 30s ease-in-out infinite alternate; }
.heros-fond::before {
  content: ""; position: absolute; inset: -56px 0 0 -56px; will-change: transform;
  background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%);
  animation: trame 40s linear infinite;
}
.heros-fond::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px circle at var(--mx) var(--my), rgba(211, 216, 0, .10), transparent 60%);
}
@keyframes derive-a { to { transform: translate(-18%, 22%) scale(1.15); } }
@keyframes derive-b { to { transform: translate(40%, -30%) scale(.85); } }
@keyframes derive-c { to { transform: translate(-35%, -25%) scale(1.2); } }
@keyframes trame { to { transform: translate(56px, 56px); } }

.heros-dedans { position: relative; max-width: 1120px; margin: 0 auto; padding: calc(56px + env(safe-area-inset-top, 0px)) var(--marge) 72px; }
.heros-texte-bloc { position: relative; z-index: 2; }
.heros h1 { font-size: clamp(2.5rem, 9.5vw, 4.9rem); max-width: 13ch; }
.heros h1 em { color: var(--anis); }
.rotateur { display: inline-block; white-space: nowrap; }
.rotateur em { display: inline-block; }
.rotateur em.sort { animation: rot-sortie .38s cubic-bezier(.5, 0, .75, 0) forwards; }
.rotateur em.entre { animation: rot-entree .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes rot-sortie { to { opacity: 0; transform: translateY(-40%); filter: blur(8px); } }
@keyframes rot-entree { from { opacity: 0; transform: translateY(45%); filter: blur(8px); } }
.heros-texte strong { color: var(--anis); font-weight: 600; }
.heros-note { margin: 22px 0 0; font-size: 14px; color: rgba(255, 255, 255, .72); }

/* La carte : en fond au telephone, a droite sur grand ecran */
.carte-zone { position: absolute; z-index: 1; pointer-events: none; right: -46%; top: 150px; width: 120%; aspect-ratio: 1 / 1.05; opacity: .3; }
.carte-zone canvas { width: 100%; height: 100%; display: block; }
.carte-legende { display: none; }
.carte-etiquettes { position: absolute; inset: 0; }
.carte-etiquette {
  position: absolute; pointer-events: none;
  background: rgba(17, 21, 15, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 8px 12px; white-space: nowrap;
  font-size: 13px; line-height: 1.35; color: var(--blanc); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  opacity: 0; transform: translate(-50%, calc(-100% - 4px)) scale(.92);
  transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.carte-etiquette.montree { opacity: 1; transform: translate(-50%, calc(-100% - 16px)) scale(1); }
.carte-etiquette b { display: block; font: 500 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--anis); }
.carte-etiquette strong { font-weight: 600; }
@media (min-width: 1000px) {
  .heros-dedans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding-top: 64px; padding-bottom: 88px; min-height: min(92vh, 860px); }
  .carte-zone { position: relative; right: auto; top: auto; width: 112%; aspect-ratio: 1 / 1.08; opacity: 1; pointer-events: auto; }
  .carte-legende {
    display: flex; align-items: center; gap: 8px; position: absolute; left: 0; bottom: -6px; margin: 0;
    font: 400 11px/1.4 var(--mono); letter-spacing: .06em; color: rgba(255, 255, 255, .5);
  }
  .carte-point { width: 7px; height: 7px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 10px var(--vert); }
}

/* Entree du heros, en cascade */
.js .entree { opacity: 0; animation: entree-heros .7s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--d, 0) * 70ms); }
@keyframes entree-heros { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Apparition au defilement */
.js .apparait { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--retard, 0ms); }
.js .apparait.vu { opacity: 1; transform: none; }

/* Bandeau des villes, qui defile */
.bandeau {
  background: var(--anis); color: var(--noir); overflow: hidden; position: relative; z-index: 3;
  transform: rotate(-1.4deg) scale(1.04); margin: -14px 0 0; padding: 15px 0; box-shadow: 0 12px 40px rgba(17, 21, 15, .25);
}
.bandeau-piste { display: flex; width: max-content; animation: defile 70s linear infinite; }
.bandeau span { font: 500 15px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.bandeau span::after { content: "✦"; margin: 0 26px; color: var(--vert-texte); }
@keyframes defile { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .heros-fond i, .heros-fond::before, .bandeau-piste, .bouton-brillant::after, .lueur::after { animation: none !important; }
  .js .entree, .js .apparait { animation: none; opacity: 1; transform: none; transition: none; filter: none; }
}

.heros-texte { font-size: clamp(1.1rem, 2.8vw, 1.35rem); line-height: 1.5; color: rgba(255, 255, 255, .82); max-width: 32rem; margin: 22px 0 30px; }

/* Le bloc d'adresse passe devant les lignes qui le suivent (garanties, note). */
.adresse-bloc { position: relative; z-index: 20; }
.adresse { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.adresse-champ {
  display: flex; align-items: center; gap: 10px; background: var(--blanc); color: var(--noir);
  border-radius: 999px; padding: 0 20px; min-height: 58px;
}
.adresse-champ svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--vert-texte); stroke-width: 1.8; }
.adresse-champ input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 17px; padding: 16px 0; }
.adresse-champ input::placeholder { color: var(--gris-clair); }
@media (min-width: 640px) {
  .adresse { flex-direction: row; background: var(--blanc); border-radius: 999px; padding: 6px; gap: 6px; }
  .adresse-champ { flex: 1; min-height: 52px; padding: 0 14px; }
  .adresse .bouton { min-height: 52px; }
  .adresse .suggestions { top: calc(100% + 8px); }
}
.suggestions {
  position: absolute; left: 0; right: 0; top: 66px; z-index: 30; margin: 0; padding: 6px;
  list-style: none; background: var(--blanc); color: var(--noir); border-radius: 18px;
  box-shadow: 0 2px 6px rgba(17, 21, 15, .08), 0 24px 60px rgba(17, 21, 15, .35);
  max-height: min(60vh, 380px); overflow-y: auto; animation: deroule .18s ease-out;
}
@keyframes deroule { from { opacity: 0; transform: translateY(-6px); } }
.suggestions li {
  display: grid; grid-template-columns: 34px 1fr; align-items: center; column-gap: 10px;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
}
.suggestions li + li { margin-top: 2px; }
.suggestions li::before {
  content: ""; grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; background: var(--pale)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F7A1A' stroke-width='1.8'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.suggestions .rue { font-weight: 500; font-size: 16px; line-height: 1.25; }
.suggestions small { display: block; color: var(--gris); font-size: 13px; line-height: 1.3; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--fond); }
.suggestions li[aria-selected="true"]::before, .suggestions li:hover::before { background-color: var(--anis); }
.suggestions .hors-zone { display: block; cursor: default; color: var(--gris); font-size: 14px; padding: 12px 14px; }
.suggestions .hors-zone::before { display: none; }
.suggestions .hors-zone:hover { background: none; }

.garanties { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 18px 0 0; font-size: 14px; color: rgba(255, 255, 255, .75); }
.garanties li::before { content: "✓"; color: var(--anis); font-weight: 700; margin-right: 6px; }


/* ---------------------------------------------------------------- chiffres */
/* Trois cartes, chacune avec son image animee : les ventes par annee, les
   etoiles, le chronometre. Une lumiere suit la souris, le bord s'allume. */
.chiffres {
  max-width: 1120px; margin: 40px auto 0; padding: 0 var(--marge);
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 820px) { .chiffres { grid-template-columns: 1.15fr 1fr 1fr; gap: 18px; margin-top: 56px; } }
.chiffre {
  --x: 50%; --y: 50%;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--blanc); border-radius: 24px; padding: 26px 26px 24px;
  min-height: 210px; display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(17, 21, 15, .04), 0 18px 50px rgba(17, 21, 15, .07);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, opacity .9s ease;
}
.chiffre::before {
  /* lumiere sous la souris */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--x) var(--y), rgba(211, 216, 0, .22), transparent 70%);
}
.chiffre::after {
  /* bord qui s'allume */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: linear-gradient(135deg, var(--anis), var(--vert) 60%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.chiffre:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(17, 21, 15, .05), 0 28px 70px rgba(17, 21, 15, .14); }
.chiffre:hover::before, .chiffre:hover::after { opacity: 1; }
.chiffre-tag { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.chiffre-tag span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--pale); color: var(--vert-texte); letter-spacing: 0; }
.chiffre-valeur { display: block; font-weight: 600; font-size: clamp(2.6rem, 7vw, 3.4rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--noir); }
.chiffre-valeur small { font-size: .5em; font-weight: 500; color: var(--gris-clair); letter-spacing: -0.02em; }
.chiffre-texte { margin: 12px 0 0; font-size: 15px; color: var(--gris); max-width: 22ch; }

/* 01 : les ventes par annee */
.chiffre-barres { position: absolute; right: 22px; bottom: 26px; display: flex; align-items: flex-end; gap: 6px; height: 70px; }
.chiffre-barres span {
  position: relative; width: 13px; height: calc(var(--h) * 100%); border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, var(--anis), var(--vert)); transform-origin: bottom;
}
.chiffre-barres b { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); font: 500 9px/1 var(--mono); color: var(--gris-clair); }
.js .chiffre-barres span { transform: scaleY(0); transition: transform .9s cubic-bezier(.2, .9, .25, 1.15); transition-delay: calc(var(--i) * 90ms + 250ms); }
.js .vu .chiffre-barres span { transform: none; }

/* 02 : les etoiles */
.chiffre-etoiles { position: absolute; right: 24px; bottom: 26px; display: flex; gap: 4px; font-size: 26px; line-height: 1; }
.chiffre-etoiles i { font-style: normal; color: var(--anis); text-shadow: 0 4px 14px rgba(211, 216, 0, .45); }
.js .chiffre-etoiles i { color: var(--trait); text-shadow: none; transform: scale(.6); transition: color .3s, transform .5s cubic-bezier(.3, 1.8, .5, 1), text-shadow .3s; }
.js .vu .chiffre-etoiles i { color: var(--anis); text-shadow: 0 4px 14px rgba(211, 216, 0, .45); transform: none; }
.js .vu .chiffre-etoiles i:nth-child(1) { transition-delay: .3s; }
.js .vu .chiffre-etoiles i:nth-child(2) { transition-delay: .42s; }
.js .vu .chiffre-etoiles i:nth-child(3) { transition-delay: .54s; }
.js .vu .chiffre-etoiles i:nth-child(4) { transition-delay: .66s; }
.js .vu .chiffre-etoiles i:nth-child(5) { transition-delay: .78s; }

/* 03 : le chronometre, sur une carte sombre */
.chiffre-sombre { background: var(--noir); }
.chiffre-sombre .chiffre-valeur { color: var(--blanc); }
.chiffre-sombre .chiffre-texte { color: rgba(255, 255, 255, .65); }
.chiffre-sombre .chiffre-tag { color: rgba(255, 255, 255, .55); }
.chiffre-sombre .chiffre-tag span { background: rgba(211, 216, 0, .14); color: var(--anis); }
.chiffre-sombre::before { background: radial-gradient(300px circle at var(--x) var(--y), rgba(82, 174, 50, .35), transparent 70%); opacity: .6; }
.chiffre-chrono { position: absolute; right: 18px; bottom: 18px; width: 92px; height: 92px; transform: rotate(-90deg); }
.chrono-piste { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 8; }
.chrono-arc { fill: none; stroke: var(--anis); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgba(211, 216, 0, .6)); }
.chrono-aiguille { stroke: var(--blanc); stroke-width: 3; stroke-linecap: round; transform-origin: 60px 60px; transform: rotate(90deg) rotate(540deg); }
.chrono-centre { fill: var(--blanc); }
/* 1 min 30 = trois quarts d'un tour de 2 minutes */
.js .chrono-arc { stroke-dashoffset: 314.16; transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1) .3s; }
.js .vu .chrono-arc { stroke-dashoffset: 78.54; }
.js .chrono-aiguille { transform: rotate(90deg); transition: transform 1.6s cubic-bezier(.4, 0, .2, 1) .3s; }
.js .vu .chrono-aiguille { transform: rotate(90deg) rotate(270deg); }
.chrono-aiguille { transform: rotate(90deg) rotate(270deg); }

@media (max-width: 819px) {
  .chiffre { min-height: 0; padding: 22px 22px 22px; }
  .chiffre-texte { max-width: 18ch; }
  .chiffre-barres { height: 64px; right: 20px; bottom: 30px; }
  .chiffre-barres span { width: 12px; }
  .chiffre-etoiles { font-size: 20px; bottom: auto; top: 26px; right: 20px; }
  .chiffre-chrono { width: 78px; height: 78px; bottom: auto; top: 50%; margin-top: -39px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .chiffre-barres span, .js .chiffre-etoiles i, .js .chrono-arc, .js .chrono-aiguille { transition: none; }
}

/* ------------------------------------------------------------------ blocs */
.bloc { max-width: 1120px; margin: 0 auto; padding: 64px var(--marge); }
.bloc h2 { font-size: clamp(2rem, 6.5vw, 3.2rem); max-width: 18ch; margin-bottom: 28px; }
.bande-pale { background: var(--pale); }
.bande-sombre { background: var(--noir); color: var(--blanc); }
.bande-sombre h2 em { color: var(--anis); }

/* biens vendus : defilement horizontal au telephone, grille ailleurs */
.biens {
  display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--marge)); padding: 0 var(--marge) 8px;
  scroll-padding-inline: var(--marge);
  scrollbar-width: none;
}
.biens::-webkit-scrollbar { display: none; }
@media (min-width: 720px) {
  .biens { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; gap: 18px; }
}
.bien { scroll-snap-align: start; margin: 0; }
.bien-photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--rayon); overflow: hidden; background: var(--trait); }
.bien-photo img { width: 100%; height: 100%; object-fit: cover; }
.bien-badge {
  position: absolute; top: 12px; left: 12px; background: var(--anis); color: var(--noir);
  font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 8px 10px; border-radius: 999px;
}
.bien figcaption { padding: 12px 2px 0; }
.bien-lieu { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.bien-detail { color: var(--gris); font-size: 14px; }

/* avis */
.avis-source { margin: -12px 0 24px; color: var(--gris); font-size: 15px; }
.avis-source .etoiles { color: var(--vert); }
.avis { display: grid; gap: 14px; }
@media (min-width: 720px) { .avis { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1020px) { .avis { grid-template-columns: repeat(3, 1fr); } }
.avis-carte { background: var(--blanc); border-radius: var(--rayon); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.avis-carte .etoiles { color: var(--vert); font-size: 15px; }
.avis-titre { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; line-height: 1.3; }
.avis-texte { margin: 0; color: #2B3127; font-size: 15px; }
.avis-texte.replie { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.avis-plus { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--vert-texte); font-weight: 600; font-size: 14px; }
.avis-auteur { margin-top: auto; padding-top: 8px; font: 400 12px/1.4 var(--mono); color: var(--gris); letter-spacing: .04em; }

/* etapes */
.etapes { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 820px) { .etapes { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.etapes li { background: var(--blanc); border-radius: var(--rayon); padding: 24px; }
.etape-num { font: 500 13px/1 var(--mono); color: var(--vert-texte); letter-spacing: .1em; }
.etapes h3 { font-size: 21px; margin: 14px 0 8px; }
.etapes p { margin: 0; color: var(--gris); font-size: 15px; }

/* agent */
.agent { display: grid; gap: 28px; align-items: center; }
@media (min-width: 820px) { .agent { grid-template-columns: 380px 1fr; gap: 56px; } }
.agent-photo { width: 100%; max-width: 380px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon); }
.agent-texte { font-size: 17px; color: rgba(255, 255, 255, .8); margin: 0 0 24px; max-width: 36rem; }
.agent-citation {
  margin: 0; padding-left: 18px; border-left: 3px solid var(--anis);
  font: italic 400 clamp(1.4rem, 3.6vw, 1.9rem)/1.25 var(--serif); color: var(--blanc); max-width: 30rem;
}

/* fin et pied */
.fin { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 26px; padding-bottom: 80px; }
.fin h2 { margin: 0 auto; }
.pied { background: var(--noir); color: rgba(255, 255, 255, .7); text-align: center; font-size: 14px; padding: 36px var(--marge) calc(110px + env(safe-area-inset-bottom, 0px)); }
.pied p { margin: 0 0 8px; }
.pied strong { color: var(--blanc); font-weight: 600; }
.pied a { color: rgba(255, 255, 255, .85); }
.pied-source, .pied-credit { font-size: 12px; color: rgba(255, 255, 255, .45); }
@media (min-width: 820px) { .pied { padding-bottom: 40px; } }

/* bouton fixe au telephone, une fois le heros passe */
.appel-fixe {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 12px var(--marge) calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(245, 246, 240, 1) 60%, rgba(245, 246, 240, 0));
  transform: translateY(110%); transition: transform .25s ease;
}
.appel-fixe.visible { transform: none; }
.appel-fixe .bouton { width: 100%; box-shadow: 0 8px 24px rgba(17, 21, 15, .18); }
@media (min-width: 820px) { .appel-fixe { display: none; } }

/* ============================================================== PARCOURS */
.parcours {
  position: fixed; inset: 0; z-index: 50; background: var(--blanc);
  display: flex; flex-direction: column; overflow: hidden;
}
.parcours-haut {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px; border-bottom: 1px solid var(--trait);
}
.parcours-nom { font-weight: 600; font-size: 15px; }
.parcours-retour, .parcours-fermer {
  width: 44px; height: 44px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center;
}
.parcours-retour:hover, .parcours-fermer:hover { background: var(--fond); }
.parcours-retour svg, .parcours-fermer svg { width: 22px; height: 22px; fill: none; stroke: var(--noir); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.parcours-retour[disabled] { visibility: hidden; }
.progression { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; }
.progression span { display: block; height: 100%; width: 0; background: var(--vert); transition: width .35s ease; }

.parcours-scene { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.question {
  max-width: 640px; margin: 0 auto; padding: clamp(28px, 8vh, 72px) var(--marge) 40px;
}
@keyframes entree { from { opacity: 0; transform: translateY(26px); } }
@keyframes sortie { to { opacity: 0; transform: translateY(-18px); } }
@media (prefers-reduced-motion: reduce) { .question, .question.sortie { animation: none; } }

.question-num { font: 500 13px/1 var(--mono); color: var(--vert-texte); letter-spacing: .08em; margin: 0 0 14px; display: flex; gap: 8px; align-items: center; }
.question-titre { font-size: clamp(1.6rem, 5.6vw, 2.3rem); letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 10px; }
.question-aide { color: var(--gris); margin: 0 0 26px; font-size: 16px; }

.options { display: grid; gap: 10px; }
.options.deux { grid-template-columns: 1fr 1fr; }
.option {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--blanc); border: 1.5px solid var(--trait); border-radius: 14px; padding: 14px 16px; min-height: 58px;
  transition: border-color .12s ease, background-color .12s ease, transform .12s ease;
}
.option:hover { border-color: var(--gris-clair); }
.option:active { transform: scale(.99); }
.option[aria-pressed="true"] { border-color: var(--vert); background: #F2F8EC; }
.option-touche {
  flex: none; width: 28px; height: 28px; border-radius: 7px; border: 1.5px solid var(--trait);
  display: grid; place-items: center; font: 500 13px/1 var(--mono); color: var(--gris);
}
.option[aria-pressed="true"] .option-touche { background: var(--vert); border-color: var(--vert); color: var(--noir); }
.option-texte { display: flex; flex-direction: column; gap: 2px; font-weight: 500; font-size: 17px; line-height: 1.25; }
.option-texte small { font-weight: 400; font-size: 14px; color: var(--gris); }
.option-grande { flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px; min-height: 140px; }
.option-grande svg { width: 44px; height: 44px; fill: none; stroke: var(--noir); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.option-grande .option-touche { position: absolute; top: 14px; right: 14px; }
.option-grande { position: relative; }
.option-coche::after { content: ""; }

.saisie { display: flex; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--trait); transition: border-color .15s; max-width: 420px; }
.saisie:focus-within { border-color: var(--vert); }
.saisie input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 clamp(1.8rem, 7vw, 2.4rem)/1.2 var(--titre); padding: 8px 0; letter-spacing: -0.02em; }
.saisie input::placeholder { color: #C5C9BE; }
.saisie-unite { font: 500 1.3rem var(--titre); color: var(--gris); }
.saisie.adresse-question { max-width: none; position: relative; }
.saisie.adresse-question input { font-size: clamp(1.3rem, 5vw, 1.7rem); }
.question .suggestions { top: calc(100% + 6px); border: 1px solid var(--trait); }

.champs { display: grid; gap: 14px; }
.champ label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.champ input {
  width: 100%; min-height: 54px; border: 1.5px solid var(--trait); border-radius: 12px; padding: 0 16px; font-size: 17px; background: var(--blanc); outline: 0;
}
.champ input:focus { border-color: var(--vert); }
.champ input[aria-invalid="true"] { border-color: var(--rouge); }
.deux-colonnes { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }

.question-suite { display: flex; align-items: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.question-suite .indice { font-size: 13px; color: var(--gris); }
.question-suite .indice kbd { font: 500 12px var(--mono); }
@media (hover: none) { .question-suite .indice { display: none; } }
.erreur { color: var(--rouge); font-size: 14px; margin: 10px 0 0; min-height: 1.4em; }
.mention { font-size: 13px; color: var(--gris); margin: 16px 0 0; line-height: 1.5; }

.pret {
  display: flex; align-items: center; gap: 12px; background: var(--pale); border-radius: 14px; padding: 14px 16px; margin: 0 0 24px; font-size: 15px;
}
.pret svg { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--vert-texte); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ecran de calcul */
.calcul { max-width: 520px; margin: 0 auto; padding: 18vh var(--marge) 40px; text-align: center; }
.calcul-anneau { width: 64px; height: 64px; margin: 0 auto 26px; border-radius: 50%; border: 4px solid var(--pale); border-top-color: var(--vert); animation: tourne 0.9s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.calcul h2 { font-size: clamp(1.5rem, 5vw, 2rem); margin-bottom: 18px; }
.calcul ol { list-style: none; padding: 0; margin: 0; text-align: left; display: inline-flex; flex-direction: column; gap: 10px; color: var(--gris-clair); }
.calcul li { transition: color .3s; }
.calcul li.fait { color: var(--noir); }
.calcul li.fait::before { content: "✓ "; color: var(--vert-texte); font-weight: 700; }

/* ============================================================= RESULTAT */
.resultat { min-height: 100vh; background: var(--fond); }
.res { max-width: 980px; margin: 0 auto; padding: 28px var(--marge) 80px; display: grid; gap: 18px; }
/* une grille laisse ses enfants s'elargir a leur contenu : le tableau defile, la page non */
.res > *, .deux-cartes > * { min-width: 0; }
.res-tete h1 { font-size: clamp(1.9rem, 6vw, 2.9rem); }
.res-adresse { color: var(--gris); margin: 10px 0 0; font-size: 15px; }
.carte { background: var(--blanc); border-radius: 22px; padding: clamp(20px, 4vw, 32px); box-shadow: 0 1px 2px rgba(17, 21, 15, .04); }
.carte h2 { font-size: clamp(1.35rem, 4vw, 1.7rem); margin-bottom: 6px; }
.carte .sous-titre { color: var(--gris); margin: 0 0 20px; font-size: 15px; }

.prix-carte { background: var(--noir); color: var(--blanc); position: relative; overflow: hidden; }
.prix-carte::after {
  content: ""; position: absolute; right: -120px; top: -140px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(82, 174, 50, .35), transparent 70%); pointer-events: none;
}
.prix-etiquette { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--anis); margin: 0 0 12px; }
.prix-valeur { font-weight: 600; font-size: clamp(2.8rem, 12vw, 4.6rem); letter-spacing: -0.04em; line-height: 1; margin: 0; font-variant-numeric: tabular-nums; }
.prix-m2 { color: rgba(255, 255, 255, .7); margin: 10px 0 26px; font-size: 16px; }
.fourchette { position: relative; z-index: 1; }
.fourchette-piste { height: 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(211, 216, 0, .25), var(--vert) 50%, rgba(211, 216, 0, .25)); position: relative; }
.fourchette-repere { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: var(--blanc); border: 4px solid var(--vert); transform: translate(-50%, -50%); }
.fourchette-bornes { display: flex; justify-content: space-between; margin-top: 12px; font-size: 14px; color: rgba(255, 255, 255, .7); }
.fourchette-bornes strong { display: block; color: var(--blanc); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fourchette-bornes div:last-child { text-align: right; }
.fiabilite { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 14px; color: rgba(255, 255, 255, .8); position: relative; z-index: 1; }
.fiabilite-points { display: inline-flex; gap: 4px; }
.fiabilite-points i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.fiabilite-points i.on { background: var(--anis); }

.conseil { display: grid; gap: 16px; }
.conseil-tete { display: flex; align-items: center; gap: 14px; }
.conseil-tete img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.conseil-tete h2 { margin: 0; }
.conseil-tete p { margin: 2px 0 0; color: var(--gris); font-size: 14px; }
.conseil-texte { font-size: 17px; line-height: 1.65; color: #1F241B; min-height: 6em; }
.conseil-texte p { margin: 0 0 14px; }
.conseil-texte p:last-child { margin-bottom: 0; }
.conseil-texte.ecrit::after { content: "▍"; color: var(--vert); animation: clignote 1s steps(1) infinite; margin-left: 2px; }
@keyframes clignote { 50% { opacity: 0; } }
.conseil-attente { display: flex; gap: 6px; padding: 8px 0; }
.conseil-attente i { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); animation: rebond 1.2s infinite ease-in-out; }
.conseil-attente i:nth-child(2) { animation-delay: .15s; }
.conseil-attente i:nth-child(3) { animation-delay: .3s; }
@keyframes rebond { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
.ia-mention { font-size: 13px; color: var(--gris); border-top: 1px solid var(--trait); padding-top: 14px; margin: 0; }

.visite { background: var(--anis); color: var(--noir); display: grid; gap: 16px; }
@media (min-width: 760px) { .visite { grid-template-columns: 1fr auto; align-items: center; gap: 28px; } }
.visite h2 em { color: var(--noir); }
.visite p { margin: 0; font-size: 16px; color: #2A2F10; }
.visite .bouton { white-space: nowrap; }

.graphique { width: 100%; height: auto; display: block; overflow: visible; margin-top: 8px; }
.graphique text { font-family: var(--titre); fill: var(--gris); font-size: 12px; }
.graphique .valeur { fill: var(--noir); font-weight: 600; font-size: 13px; }
.legende { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--gris); margin-top: 12px; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

.deux-cartes { display: grid; gap: 18px; }
@media (min-width: 860px) { .deux-cartes { grid-template-columns: 1fr 1fr; } }

.ventes { list-style: none; margin: 18px 0 0; padding: 0; }
.vente { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0; border-top: 1px solid var(--trait); font-size: 15px; }
.vente > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vente strong { font-weight: 600; }
.vente span { font-size: 13px; color: var(--gris); }
.vente-prix { text-align: right; flex: none; font-variant-numeric: tabular-nums; }

.rapport { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; }
.rapport p { margin: 0; flex: 1 1 260px; }
.rapport svg { width: 18px; height: 18px; }

.methode summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.methode summary::-webkit-details-marker { display: none; }
.methode summary::after { content: "+"; font: 400 24px/1 var(--titre); color: var(--vert-texte); }
.methode[open] summary::after { content: "−"; }
.methode p { color: var(--gris); font-size: 15px; margin: 14px 0 0; }

.res-pied { text-align: center; font-size: 13px; color: var(--gris); padding-top: 10px; }
.res-pied a { color: var(--gris); }

/* pages legales */
.texte-legal h2 { font-size: 1.15rem; margin: 26px 0 8px; }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal p { margin: 0 0 10px; color: #2B3127; font-size: 15px; }

/* ------------------------------------------------------ effets de l'accueil */
/* Halo qui respire autour de la barre d'adresse, tant qu'elle n'a pas la main */
/* Le halo est un calque a part dont seule l'opacite varie : rien a repeindre. */
.lueur { position: relative; }
.lueur::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  box-shadow: 0 0 0 5px rgba(211, 216, 0, .3), 0 0 42px rgba(82, 174, 50, .5);
  opacity: 0; animation: respire 2.8s ease-in-out infinite; will-change: opacity;
}
.lueur:focus-within { box-shadow: 0 0 0 3px rgba(211, 216, 0, .85); }
.lueur:focus-within::after { animation: none; opacity: 0; }
@keyframes respire { 50% { opacity: 1; } }

/* Reflet qui balaie le bouton principal */
.bouton-brillant { position: relative; overflow: hidden; }
.bouton-brillant::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg); animation: reflet 4.2s ease-in-out infinite 2s;
}
@keyframes reflet { 0%, 70% { left: -60%; } 100% { left: 130%; } }

/* Biens vendus : zoom au survol, tampon « Vendu » */
.bien-photo img { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.bien:hover .bien-photo img { transform: scale(1.06); }
.js .bien .bien-badge { opacity: 0; transform: scale(1.8) rotate(-14deg); transition: opacity .35s ease .45s, transform .5s cubic-bezier(.3, 1.6, .5, 1) .45s; }
.js .bien.vu .bien-badge { opacity: 1; transform: rotate(-4deg); }

/* Avis et etapes : un leger soulevement au survol */
.avis-carte, .etapes li { transition: transform .35s ease, box-shadow .35s ease, opacity .9s ease; }
.avis-carte:hover, .etapes li:hover { box-shadow: var(--ombre); }
.etape-num { font-size: 28px; display: block; background: linear-gradient(120deg, var(--vert-texte), var(--vert)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Le halo entoure le champ au telephone, toute la barre sur grand ecran */
.adresse.lueur::after { display: none; }
.adresse.lueur:focus-within { box-shadow: none; }
@media (min-width: 640px) {
  .adresse.lueur::after { display: block; }
  .adresse.lueur:focus-within { box-shadow: 0 0 0 3px rgba(211, 216, 0, .85); }
  .adresse-champ.lueur::after { display: none; }
  .adresse-champ.lueur:focus-within { box-shadow: none; }
}

/* ============================================== PARCOURS FACON TYPEFORM
   Sombre et vivant comme le heros, une question au centre de l'ecran, des
   transitions verticales, les fleches et le compteur en bas a droite. */
.parcours { background: var(--noir); color: var(--blanc); isolation: isolate; }
.parcours-fond { opacity: .55; }
.parcours-fond::before { opacity: .6; }

.parcours .progression { position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3; background: rgba(255, 255, 255, .08); }
.parcours .progression span { background: linear-gradient(90deg, var(--vert), var(--anis)); box-shadow: 0 0 14px rgba(211, 216, 0, .6); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.parcours-haut {
  position: absolute; top: 0; right: 0; z-index: 3; border: 0; justify-content: flex-end;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 0;
}
.parcours-fermer { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.parcours-fermer:hover { background: rgba(255, 255, 255, .14); }
.parcours-fermer svg { stroke: var(--blanc); }

.parcours-scene { display: flex; flex-direction: column; padding-bottom: 84px; }
.parcours-scene > * { margin-top: auto; margin-bottom: auto; width: 100%; }
.parcours .question { padding: 72px var(--marge) 40px; max-width: 720px; }

/* Transitions entre questions */
.entre-bas { animation: entre-bas .55s cubic-bezier(.2, .8, .2, 1) both; }
.entre-haut { animation: entre-haut .55s cubic-bezier(.2, .8, .2, 1) both; }
.sort-haut { animation: sort-haut .26s cubic-bezier(.5, 0, .75, 0) forwards; }
.sort-bas { animation: sort-bas .26s cubic-bezier(.5, 0, .75, 0) forwards; }
@keyframes entre-bas { from { opacity: 0; transform: translateY(70px); } }
@keyframes entre-haut { from { opacity: 0; transform: translateY(-70px); } }
@keyframes sort-haut { to { opacity: 0; transform: translateY(-70px); } }
@keyframes sort-bas { to { opacity: 0; transform: translateY(70px); } }
/* Les elements de la question arrivent l'un apres l'autre */
.entre-bas > *, .entre-haut > * { animation: monte .6s cubic-bezier(.2, .8, .2, 1) both; }
.entre-bas > :nth-child(2), .entre-haut > :nth-child(2) { animation-delay: .05s; }
.entre-bas > :nth-child(3), .entre-haut > :nth-child(3) { animation-delay: .1s; }
.entre-bas > :nth-child(4), .entre-haut > :nth-child(4) { animation-delay: .15s; }
.entre-bas > :nth-child(n+5), .entre-haut > :nth-child(n+5) { animation-delay: .2s; }
@keyframes monte { from { opacity: 0; transform: translateY(14px); } }

.secoue { animation: secoue .4s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes secoue { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* Titre et numero */
.parcours .question-num { color: var(--anis); font-size: 15px; gap: 6px; margin-bottom: 16px; }
.parcours .question-num svg { width: 16px; height: 16px; fill: none; stroke: var(--anis); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.parcours .question-titre { font-size: clamp(1.75rem, 5.2vw, 2.6rem); line-height: 1.15; color: var(--blanc); }
.parcours .question-aide { color: rgba(255, 255, 255, .62); font-size: clamp(1rem, 2.4vw, 1.15rem); margin-bottom: 30px; }

/* Choix */
.parcours .options { gap: 10px; max-width: 560px; }
.parcours .option {
  background: rgba(255, 255, 255, .04); color: var(--blanc);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .15s, background-color .15s, transform .15s;
}
.parcours .option:hover { border-color: rgba(211, 216, 0, .7); background: rgba(211, 216, 0, .07); }
.parcours .option[aria-pressed="true"] { border-color: var(--anis); background: rgba(211, 216, 0, .14); box-shadow: inset 0 0 0 1px var(--anis); }
.parcours .option-touche { border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .85); border-radius: 6px; width: 26px; height: 26px; font-size: 12px; }
.parcours .option[aria-pressed="true"] .option-touche { background: var(--anis); border-color: var(--anis); color: var(--noir); }
.parcours .option-texte small { color: rgba(255, 255, 255, .55); }
.option-coche { width: 22px; height: 22px; margin-left: auto; flex: none; fill: none; stroke: var(--anis); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.option[aria-pressed="true"] .option-coche { opacity: 1; transform: none; }
.option-grande .option-coche { position: absolute; bottom: 16px; right: 16px; }
.parcours .option-grande { min-height: 168px; }
.parcours .option-grande svg:not(.option-coche) { stroke: var(--blanc); width: 52px; height: 52px; }
.parcours .option-grande[aria-pressed="true"] svg:not(.option-coche) { stroke: var(--anis); }
.clignote { animation: clignote .5s steps(1) both; }
@keyframes clignote { 0%, 50% { background: rgba(211, 216, 0, .3); } 25%, 75% { background: rgba(211, 216, 0, .05); } }

/* Saisies */
.parcours .saisie { border-bottom: 2px solid rgba(255, 255, 255, .25); max-width: 560px; }
.parcours .saisie:focus-within { border-color: var(--anis); }
.parcours .saisie input { color: var(--blanc); caret-color: var(--anis); }
.parcours .saisie input::placeholder { color: rgba(255, 255, 255, .26); }
.parcours .saisie-unite { color: rgba(255, 255, 255, .55); }
.parcours .champ label { color: rgba(255, 255, 255, .75); font-weight: 500; }
.parcours .champ input {
  background: transparent; color: var(--blanc); caret-color: var(--anis);
  border: 0; border-bottom: 2px solid rgba(255, 255, 255, .25); border-radius: 0; padding: 0 2px; font-size: 20px; min-height: 50px;
}
.parcours .champ input:focus { border-color: var(--anis); }
.parcours .champ input[aria-invalid="true"] { border-color: #FF8A7A; }

/* Bouton OK */
.bouton-ok { background: var(--anis); color: var(--noir); border-radius: 10px; min-height: 50px; padding: 0 22px; font-size: 17px; box-shadow: 0 6px 24px rgba(211, 216, 0, .25); }
.bouton-ok:hover { background: #E1E61A; }
.bouton-ok .ok-coche { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bouton-ok.bouton-grand { min-height: 56px; padding: 0 28px; }
.parcours .indice { color: rgba(255, 255, 255, .5); }
.parcours .indice kbd { color: rgba(255, 255, 255, .85); }
.parcours .erreur:empty { display: none; }
.parcours .erreur {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 7px 12px; border-radius: 8px;
  background: rgba(255, 138, 122, .14); color: #FFB4A8; font-size: 14px;
}
.parcours .erreur::before { content: "!"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #FF8A7A; color: var(--noir); font-weight: 700; font-size: 12px; }
.parcours .mention { color: rgba(255, 255, 255, .5); }
.parcours .mention a { color: var(--anis); }
.parcours .pret { background: rgba(82, 174, 50, .16); border: 1px solid rgba(82, 174, 50, .45); color: var(--blanc); }
.parcours .pret svg { stroke: var(--anis); }
.parcours .suggestions { border: 0; }

/* Ecran de calcul */
.parcours .calcul h2 { color: var(--blanc); }
.parcours .calcul-anneau { border-color: rgba(255, 255, 255, .12); border-top-color: var(--anis); box-shadow: 0 0 30px rgba(211, 216, 0, .25); }
.parcours .calcul ol { color: rgba(255, 255, 255, .35); }
.parcours .calcul li.fait { color: var(--blanc); }
.parcours .calcul li.fait::before { color: var(--anis); }

/* Fleches et compteur, en bas a droite */
.parcours-nav {
  position: absolute; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 3;
  display: flex; align-items: center; gap: 2px;
}
.parcours-compte { font: 500 12px/1 var(--mono); letter-spacing: .06em; color: rgba(255, 255, 255, .55); margin-right: 12px; }
.parcours-nav button {
  width: 40px; height: 38px; border: 0; display: grid; place-items: center; background: var(--anis); color: var(--noir);
  transition: background-color .15s, opacity .15s;
}
.parcours-nav button:hover { background: #E1E61A; }
.parcours-nav button:first-of-type { border-radius: 8px 0 0 8px; }
.parcours-nav button:last-of-type { border-radius: 0 8px 8px 0; }
.parcours-nav button[disabled] { opacity: .35; cursor: default; }
.parcours-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) {
  .entre-bas, .entre-haut, .sort-haut, .sort-bas, .entre-bas > *, .entre-haut > *, .clignote, .secoue { animation: none !important; }
}
@media (min-width: 900px) {
  .parcours .question { max-width: 780px; }
  .parcours .question-titre { font-size: 2.9rem; }
  .parcours .question-aide { font-size: 1.2rem; }
  .parcours .options { max-width: 620px; gap: 12px; }
  .parcours .option { padding: 16px 18px; min-height: 64px; }
  .parcours .option-texte { font-size: 19px; }
  .parcours .saisie, .parcours .champs { max-width: 620px; }
}
/* La liste d'adresses de la question passe devant le bouton OK : chaque element
   de la question anime forme son propre calque, il faut donc hisser la saisie. */
.saisie.adresse-question { position: relative; z-index: 10; }

/* ------------------------------------------------------------ defilement */
/* Le bandeau incline deborde volontairement de l'ecran : on coupe ce qui
   depasse, sans barre de defilement horizontale. « clip » plutot que
   « hidden » pour ne pas casser le defilement fluide ni les elements colles. */
html, body { overflow-x: clip; }

/* Barre verticale aux couleurs du site : piste sombre, curseur vert-jaune. */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--noir); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--anis), var(--vert));
  border: 3px solid var(--noir); border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #E8EC3A, #6BCB45); }
::-webkit-scrollbar-thumb:active { background: var(--anis); }
::-webkit-scrollbar-corner { background: var(--noir); }
/* Listes et tableaux sur fond clair : une barre fine et discrete. */
.suggestions::-webkit-scrollbar, .resultat ::-webkit-scrollbar { width: 8px; }
.suggestions::-webkit-scrollbar-track { background: transparent; }
.suggestions::-webkit-scrollbar-thumb { background: var(--trait); border: 2px solid var(--blanc); }
/* Firefox ne connait que la couleur et l'epaisseur. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--vert) var(--noir); scrollbar-width: thin; }
  .suggestions { scrollbar-color: var(--trait) transparent; }
}
/* Grandes cartes (maison, appartement) : la coche reste jaune et fine, comme
   sur les autres choix ; la regle des icones ne doit pas la noircir. */
.parcours .option-grande svg.option-coche { width: 26px; height: 26px; stroke: var(--anis); stroke-width: 2.4; fill: none; }
.parcours .question-titre + .options { margin-top: 28px; }

/* ------------------------------------------- resultat : envoi et appel */
.envoye {
  display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; padding: 12px 16px;
  background: var(--pale); border: 1px solid rgba(82, 174, 50, .35); border-radius: 14px; font-size: 15px; color: #2B3127;
}
.envoye svg { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: none; stroke: var(--vert-texte); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.visite .surtitre { color: #4A4F12; margin-bottom: 8px; }
.visite h2 { font-size: clamp(1.6rem, 4.6vw, 2.2rem); }
.visite p:not(.surtitre) { margin-top: 10px; }
.prendre-rdv svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.appel-bas { background: var(--noir); color: var(--blanc); display: grid; gap: 18px; align-items: center; }
.appel-bas img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--anis); }
.appel-bas h2 { color: var(--blanc); }
.appel-bas h2 em { color: var(--anis); }
.appel-bas p { margin: 8px 0 0; color: rgba(255, 255, 255, .7); }
@media (min-width: 760px) { .appel-bas { grid-template-columns: auto 1fr auto; gap: 24px; } }

/* ================================================ ANALYSE : LE RADAR */
.parcours .calcul {
  max-width: 980px; padding: 64px var(--marge) 40px; text-align: left;
  display: grid; gap: 28px; align-items: center; justify-items: center;
}
@media (min-width: 860px) { .parcours .calcul { grid-template-columns: auto 1fr; gap: 56px; justify-items: start; } }
.radar {
  position: relative; width: min(78vw, 400px, 52vh); aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(211, 216, 0, .25), 0 0 80px rgba(82, 174, 50, .35), inset 0 0 60px rgba(0, 0, 0, .5);
  animation: radar-entree .8s cubic-bezier(.2, .8, .2, 1) both;
}
.radar::after {
  content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px dashed rgba(211, 216, 0, .3);
  animation: tourne 30s linear infinite;
}
.radar canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
@keyframes radar-entree { from { opacity: 0; transform: scale(.7) rotate(-20deg); } }
.calcul-texte { width: 100%; max-width: 440px; }
.calcul-texte .surtitre { margin-bottom: 18px; }
.compteurs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
.compteurs div { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 16px 18px; }
.compteurs strong { display: block; font-weight: 600; font-size: clamp(2rem, 6vw, 2.8rem); letter-spacing: -0.03em; line-height: 1; color: var(--blanc); font-variant-numeric: tabular-nums; }
.compteurs div:last-child strong { color: var(--anis); text-shadow: 0 0 24px rgba(211, 216, 0, .5); }
.compteurs span { display: block; margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.parcours .calcul ol { display: flex; flex-direction: column; gap: 14px; }
.parcours .calcul li { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .35); font-size: 16px; transition: color .3s; }
.parcours .calcul li::before { content: none; }
.parcours .calcul li i {
  flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .2);
  display: grid; place-items: center; transition: background-color .3s, border-color .3s;
}
.parcours .calcul li.en-cours { color: var(--blanc); }
.parcours .calcul li.en-cours i { border-color: rgba(211, 216, 0, .25); border-top-color: var(--anis); animation: tourne .8s linear infinite; }
.parcours .calcul li.fait { color: var(--blanc); }
.parcours .calcul li.fait i { background: var(--anis); border-color: var(--anis); animation: pop .35s cubic-bezier(.3, 1.8, .5, 1); }
.parcours .calcul li.fait i::after { content: ""; width: 9px; height: 5px; border: solid var(--noir); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
@keyframes pop { from { transform: scale(.4); } }

/* =================================== COORDONNEES : LE RAPPORT QUI ATTEND */
.parcours .coordonnees { max-width: 1080px; }
.coord-grille { display: grid; gap: 34px; align-items: center; }
@media (min-width: 980px) { .coord-grille { grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; } }
.coord-texte { min-width: 0; }

/* Libelles flottants */
.champ.flottant { position: relative; padding-top: 14px; }
.champ.flottant label {
  position: absolute; left: 2px; top: 28px; margin: 0; pointer-events: none;
  font-size: 19px; font-weight: 400; color: rgba(255, 255, 255, .45);
  transition: top .25s cubic-bezier(.2, .8, .2, 1), font-size .25s, color .25s, letter-spacing .25s;
}
.champ.flottant input:focus + label, .champ.flottant input:not(:placeholder-shown) + label {
  top: 0; font-size: 12px; color: var(--anis); letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
}
.parcours .champ.flottant input {
  background-image: linear-gradient(var(--anis), var(--anis)); background-repeat: no-repeat;
  background-size: 0 2px; background-position: 0 100%; transition: background-size .45s cubic-bezier(.2, .8, .2, 1), border-color .2s;
}
.parcours .champ.flottant input:focus { background-size: 100% 2px; border-color: rgba(255, 255, 255, .25); }

.bouton-pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 6px 24px rgba(211, 216, 0, .25), 0 0 0 10px rgba(211, 216, 0, .12); } }

/* L'apercu du rapport : trois pages en eventail, le prix cache sous un cadenas */
.apercu { position: relative; height: 210px; perspective: 1200px; }
@media (min-width: 980px) { .apercu { height: 470px; } }
.apercu-page {
  position: absolute; left: 50%; top: 50%; width: 160px; aspect-ratio: 1 / 1.414; margin: -113px 0 0 -80px;
  background: #FBFBF6; border-radius: 10px; box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
  transform-origin: 50% 90%;
}
@media (min-width: 980px) { .apercu-page { width: 300px; margin: -212px 0 0 -150px; border-radius: 14px; } }
.apercu-arriere { background: #DCE2D2; animation: eventail-a 1s cubic-bezier(.2, .8, .2, 1) .2s both; }
.apercu-milieu { background: #ECF0E2; animation: eventail-b 1s cubic-bezier(.2, .8, .2, 1) .3s both; }
.apercu-devant { padding: 9% 9% 0; overflow: hidden; animation: eventail-c 1s cubic-bezier(.2, .8, .2, 1) .1s both, flotte 5s ease-in-out 1.2s infinite; }
@keyframes eventail-a { from { opacity: 0; transform: translateY(40px); } to { transform: rotate(-11deg) translate(-26%, 4%); } }
@keyframes eventail-b { from { opacity: 0; transform: translateY(40px); } to { transform: rotate(7deg) translate(20%, 2%); } }
@keyframes eventail-c { from { opacity: 0; transform: translateY(60px) rotateX(20deg); } }
@keyframes flotte { 50% { transform: translateY(-10px) rotate(-1deg); } }
.apercu-devant::after {
  /* reflet qui passe sur la page */
  content: ""; position: absolute; inset: -20% auto -20% -60%; width: 45%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
  animation: reflet-page 3.6s ease-in-out 1.4s infinite;
}
@keyframes reflet-page { 0%, 55% { left: -60%; } 100% { left: 140%; } }
.apercu-tete { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7% 8%; margin: -9% -9% 8%; background: var(--noir); }
.apercu-tete b { color: var(--blanc); font-size: clamp(7px, 1.2vw, 13px); font-weight: 600; }
.apercu-tete span { color: var(--anis); font: 500 clamp(5px, .8vw, 8px)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.apercu-titre { margin: 0 0 6%; color: var(--noir); font-weight: 500; font-size: clamp(8px, 1.4vw, 16px); }
.apercu-prix { position: relative; background: var(--noir); border-radius: 8px; padding: 7% 8%; color: var(--blanc); }
.apercu-prix small { display: block; font: 500 clamp(5px, .7vw, 8px)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--anis); margin-bottom: 5%; }
.apercu-flou { display: block; font-weight: 600; font-size: clamp(14px, 2.6vw, 30px); letter-spacing: -0.03em; filter: blur(7px); user-select: none; }
.apercu-cadenas {
  position: absolute; right: 8%; top: 50%; width: 22%; max-width: 46px; transform: translateY(-50%);
  fill: none; stroke: var(--anis); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(211, 216, 0, .7)); animation: cadenas 2s ease-in-out infinite;
}
@keyframes cadenas { 50% { transform: translateY(-50%) scale(1.12); } }
.apercu-barres { display: flex; align-items: flex-end; gap: 5%; height: 18%; margin: 9% 0 7%; }
.apercu-barres i { flex: 1; height: calc(var(--h) * 100%); border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, var(--anis), var(--vert)); transform-origin: bottom; animation: barre .7s cubic-bezier(.2, .9, .25, 1.2) both; animation-delay: calc(var(--i) * 80ms + .9s); }
@keyframes barre { from { transform: scaleY(0); } }
.apercu-lignes { display: grid; gap: 6px; }
.apercu-lignes i { height: 6px; border-radius: 3px; background: #E2E5DA; }
.apercu-lignes i:nth-child(2) { width: 86%; }
.apercu-lignes i:nth-child(3) { width: 92%; }
.apercu-lignes i:nth-child(4) { width: 60%; }
.apercu-tampon {
  position: absolute; right: 8%; bottom: 7%; padding: 3% 7%; border: 2px solid var(--vert-texte); border-radius: 6px;
  color: var(--vert-texte); font: 700 clamp(8px, 1.3vw, 15px)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  animation: tampon .5s cubic-bezier(.3, 1.8, .5, 1) 1.5s both;
}
@keyframes tampon { from { opacity: 0; transform: scale(2.2) rotate(-25deg); } to { transform: rotate(-12deg); } }

/* A l'envoi : la page s'envole */
.envoi .apercu-devant { animation: envol .9s cubic-bezier(.55, 0, .75, .3) forwards; }
.envoi .apercu-arriere, .envoi .apercu-milieu { transition: opacity .5s .2s; opacity: 0; }
@keyframes envol { 30% { transform: translateY(14px) rotate(-3deg) scale(.96); } 100% { opacity: 0; transform: translate(70%, -140%) rotate(18deg) scale(.5); } }
.envoi .coord-texte { opacity: .5; transition: opacity .3s; }
@media (max-width: 979px) { .apercu { order: -1; margin-bottom: -10px; } }
@media (prefers-reduced-motion: reduce) {
  .radar, .radar::after, .apercu-page, .apercu-devant::after, .apercu-cadenas, .apercu-barres i, .apercu-tampon, .bouton-pulse { animation: none !important; }
}
@media (min-width: 860px) { .radar { width: min(460px, 62vh); } }

/* ===================================================== PAGE RESULTAT
   Sombre et vivante comme l'accueil et le questionnaire. Chaque carte
   s'anime en entrant dans l'ecran (classe « vu »). */
.resultat { position: relative; isolation: isolate; background: var(--noir); color: var(--blanc); min-height: 100vh; overflow-x: clip; }
.resultat-fond { position: fixed; z-index: -1; opacity: .7; }
.resultat .res { max-width: 1080px; padding: calc(56px + env(safe-area-inset-top, 0px)) var(--marge) 90px; gap: 20px; }
.resultat .surtitre { color: var(--anis); }

/* En-tete : titre, puces, confirmation d'envoi */
.res-entree { animation: res-entree .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d, 0) * 110ms); }
@keyframes res-entree { from { opacity: 0; transform: translateY(26px); } }
.resultat .res-tete h1 { font-size: clamp(2.2rem, 7vw, 4rem); max-width: 18ch; color: var(--blanc); }
.resultat .res-tete h1 em { color: var(--anis); }
.res-puces { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.res-puces li {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 14px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85);
}
.res-puces svg { width: 15px; height: 15px; fill: none; stroke: var(--anis); stroke-width: 1.8; }
.resultat .envoye { background: rgba(82, 174, 50, .12); border-color: rgba(82, 174, 50, .4); color: rgba(255, 255, 255, .85); }
.resultat .envoye strong { color: var(--blanc); }
.resultat .envoye svg { stroke: var(--anis); }

/* Cartes */
.carte-r {
  --x: 50%; --y: 50%;
  position: relative; isolation: isolate; overflow: hidden;
  background: #161B13; border: 1px solid rgba(255, 255, 255, .09); border-radius: 26px;
  padding: clamp(22px, 4vw, 36px); color: var(--blanc);
}
.carte-r::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--x) var(--y), rgba(211, 216, 0, .08), transparent 70%);
}
.carte-r.anime:not(.res-entree) { opacity: 0; transform: translateY(40px) scale(.98); transition: opacity .9s ease, transform 1s cubic-bezier(.2, .8, .2, 1); }
.carte-r.anime.vu:not(.res-entree) { opacity: 1; transform: none; }
.carte-r h2 { font-size: clamp(1.5rem, 4.4vw, 2.2rem); color: var(--blanc); margin-bottom: 8px; }
.carte-r h2 em { color: var(--anis); }
.resultat .sous-titre { color: rgba(255, 255, 255, .6); font-size: 15px; margin: 0 0 18px; }
.resultat .sous-titre.petit { font-size: 13px; margin: 14px 0 0; }

/* Le prix : compteur, jauge */
.prix-r { display: grid; gap: 26px; align-items: center; background: linear-gradient(140deg, #1B2416, #11150F 60%); border-color: rgba(211, 216, 0, .25); }
.prix-r::after {
  content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -220px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(82, 174, 50, .35), transparent 65%); animation: derive-a 14s ease-in-out infinite alternate;
}
@media (min-width: 860px) { .prix-r { grid-template-columns: 1.1fr 1fr; gap: 40px; } }
.resultat .prix-etiquette { color: var(--anis); }
.resultat .prix-valeur { display: flex; align-items: flex-end; font-size: clamp(3rem, 12vw, 5.6rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.chiffre-roule { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.chiffre-roule > span { display: block; transform: translateY(0); transition: transform 1.6s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i) * 70ms + 150ms); }
.vu .chiffre-roule > span { transform: translateY(calc(var(--v) * -10%)); }
.chiffre-fixe { display: inline-block; line-height: 1; }
.resultat .prix-m2 { color: rgba(255, 255, 255, .7); margin: 14px 0 22px; font-size: 17px; }
.resultat .prix-m2 strong { color: var(--blanc); font-weight: 600; }
.resultat .fiabilite { margin: 0; }
.fiabilite-points i { transition: background-color .3s; }
.vu .fiabilite-points i.on { animation: allume .5s ease both; }
.vu .fiabilite-points i.on:nth-child(2) { animation-delay: .15s; }
.vu .fiabilite-points i.on:nth-child(3) { animation-delay: .3s; }
@keyframes allume { from { background: rgba(255, 255, 255, .2); transform: scale(.4); } }

.jauge { width: 100%; max-width: 420px; display: block; margin: 0 auto; overflow: visible; }
.jauge-piste { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 18; stroke-linecap: round; }
.jauge-valeur { fill: none; stroke: url(#jauge-degrade); stroke-width: 18; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 10px rgba(211, 216, 0, .45)); transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1) .2s; }
.vu .jauge-valeur { stroke-dashoffset: 0; }
.jauge-trait { stroke: rgba(255, 255, 255, .25); stroke-width: 1.5; opacity: 0; transition: opacity .3s; transition-delay: calc(var(--i) * 40ms + .3s); }
.jauge-trait.long { stroke: rgba(255, 255, 255, .55); stroke-width: 2.5; }
.vu .jauge-trait { opacity: 1; }
.jauge-aiguille { transform-origin: 150px 150px; transform: rotate(-90deg); transition: transform 2s cubic-bezier(.34, 1.56, .64, 1) .5s; }
.vu .jauge-aiguille { transform: rotate(var(--angle)); }
.jauge-aiguille path { fill: var(--blanc); filter: drop-shadow(0 0 6px rgba(255, 255, 255, .5)); }
.jauge-aiguille circle { fill: var(--blanc); }
.jauge-aiguille .jauge-moyeu { fill: var(--noir); }
.jauge-bornes { display: flex; justify-content: space-between; gap: 12px; max-width: 420px; margin: 6px auto 0; font-size: 13px; color: rgba(255, 255, 255, .6); }
.jauge-bornes b { display: block; font-size: 17px; color: var(--blanc); font-weight: 600; font-variant-numeric: tabular-nums; }
.jauge-bornes span:last-child { text-align: right; }

/* Le conseil : bordure lumineuse pendant l'ecriture */
.resultat .conseil-photo { position: relative; flex: none; }
.resultat .conseil-photo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; }
.resultat .conseil:has(.ecrit) .conseil-photo::after, .resultat .conseil:has(.conseil-attente) .conseil-photo::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--anis); border-right-color: transparent; animation: tourne 1s linear infinite;
}
.resultat .conseil-tete p { color: rgba(255, 255, 255, .6); }
.resultat .conseil:has(.ecrit) #conseil-etat, .resultat .conseil:has(.conseil-attente) #conseil-etat { color: var(--anis); }
.resultat .conseil-texte { color: rgba(255, 255, 255, .9); font-size: 18px; }
.resultat .conseil-texte.ecrit::after { color: var(--anis); }
.resultat .ia-mention { color: rgba(255, 255, 255, .45); border-top-color: rgba(255, 255, 255, .1); }
.resultat .conseil-attente i { background: var(--anis); }
.resultat .conseil:has(.ecrit) { border-color: rgba(211, 216, 0, .45); box-shadow: 0 0 0 1px rgba(211, 216, 0, .15), 0 0 60px rgba(211, 216, 0, .08); }

/* Appel a reserver */
.resultat .visite { background: var(--anis); color: var(--noir); border: 0; }
.resultat .visite h2, .resultat .visite h2 em { color: var(--noir); }
.resultat .visite .surtitre { color: #4A4F12; }
.resultat .visite::before { background: radial-gradient(420px circle at var(--x) var(--y), rgba(255, 255, 255, .45), transparent 70%); }
.resultat .visite .bouton { box-shadow: 0 10px 30px rgba(17, 21, 15, .35); }
.resultat .visite .bouton:hover { transform: translateY(-2px) scale(1.02); }

/* Carte des ventes + liste */
.ventes-grille { display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) { .ventes-grille { grid-template-columns: 48% 1fr; gap: 30px; } }
.carte-ventes { width: 100%; max-width: 440px; display: block; margin: 0 auto; overflow: visible; }
.carte-disque { opacity: 0; transform-origin: center; transform-box: fill-box; transform: scale(.6); transition: opacity .8s, transform 1s cubic-bezier(.2, .8, .2, 1); }
.vu .carte-disque { opacity: 1; transform: none; }
.carte-anneau { fill: none; stroke: rgba(255, 255, 255, .12); stroke-dasharray: 3 5; }
.carte-axe { stroke: rgba(255, 255, 255, .06); }
.carte-km { fill: rgba(255, 255, 255, .45); font: 500 10px var(--mono); }
.carte-lien { stroke: rgba(211, 216, 0, .55); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s ease; transition-delay: calc(var(--i) * 110ms + .5s); }
.vu .carte-lien { stroke-dashoffset: 0; }
.carte-point { cursor: pointer; }
.carte-point > circle:not(.carte-halo) { fill: var(--anis); }
.carte-point text { fill: var(--noir); font: 700 10px var(--mono); text-anchor: middle; pointer-events: none; }
.carte-point .carte-halo { fill: rgba(211, 216, 0, .25); transform-box: fill-box; transform-origin: center; animation: halo 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 200ms); }
@keyframes halo { 50% { transform: scale(1.7); opacity: 0; } }
.carte-point > * { opacity: 0; transition: opacity .3s; transition-delay: calc(var(--i) * 110ms + .9s); }
.vu .carte-point > * { opacity: 1; }
.carte-point.allume > circle:not(.carte-halo) { fill: var(--blanc); }
.carte-point.allume .carte-halo { fill: rgba(255, 255, 255, .35); }
.carte-bien circle { fill: var(--blanc); }
.carte-bien .carte-coeur { fill: var(--vert); }
.carte-bien .carte-onde { fill: none; stroke: var(--blanc); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: onde 2s ease-out infinite; }
@keyframes onde { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }

.resultat .ventes { margin: 0; }
.resultat .vente {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 10px; margin: 0 -10px;
  border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; cursor: default;
  opacity: 0; transform: translateX(20px); transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1), background-color .2s;
  transition-delay: calc(var(--i) * 80ms + .4s), calc(var(--i) * 80ms + .4s), 0s;
}
.vu .vente { opacity: 1; transform: none; }
.resultat .vente.allume { background: rgba(211, 216, 0, .1); }
.vente-num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--anis); color: var(--noir); font: 700 11px var(--mono); }
.resultat .vente strong { color: var(--blanc); }
.resultat .vente span { color: rgba(255, 255, 255, .55); }

/* Evolution et position */
.resultat .deux-cartes { gap: 20px; }
@media (min-width: 900px) { .resultat .deux-cartes { grid-template-columns: 1fr 1fr; } }
.badge-variation { display: inline-flex; margin: 4px 0 6px; padding: 6px 12px; border-radius: 999px; font: 600 13px var(--mono); }
.badge-variation.baisse { background: rgba(255, 138, 122, .14); color: #FFB4A8; }
.badge-variation.hausse { background: rgba(82, 174, 50, .18); color: var(--anis); }
.evolution, .position { width: 100%; height: auto; display: block; overflow: visible; margin-top: 10px; }
.evo-grille { stroke: rgba(255, 255, 255, .07); }
.evo-aire { fill: url(#evo-aire); opacity: 0; transition: opacity 1.2s ease 1s; }
.vu .evo-aire { opacity: 1; }
.evo-ligne { fill: none; stroke: var(--anis); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 8px rgba(211, 216, 0, .5)); transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1) .3s; }
.vu .evo-ligne { stroke-dashoffset: 0; }
.evo-bien { stroke: var(--blanc); stroke-width: 1.5; stroke-dasharray: .012 .012; opacity: 0; transition: opacity .6s 1.6s; }
.vu .evo-bien { opacity: .7; }
.evo-bien-texte { fill: var(--blanc); font: 600 12px var(--titre); opacity: 0; transition: opacity .6s 1.8s; }
.vu .evo-bien-texte { opacity: 1; }
.evo-point circle { fill: var(--noir); stroke: var(--anis); stroke-width: 3; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s cubic-bezier(.3, 1.8, .5, 1); transition-delay: calc(var(--i) * 280ms + .4s); }
.vu .evo-point circle { transform: none; }
.evo-valeur { fill: var(--blanc); font: 600 12px var(--titre); text-anchor: middle; opacity: 0; transition: opacity .4s; transition-delay: calc(var(--i) * 280ms + .6s); }
.vu .evo-valeur { opacity: 1; }
.evo-annee { fill: rgba(255, 255, 255, .5); font: 500 11px var(--mono); text-anchor: middle; }

.position-phrase { color: rgba(255, 255, 255, .75); margin: 4px 0 6px; font-size: 16px; }
.position-phrase strong { color: var(--anis); font-size: 1.6em; font-weight: 600; }
.pos-barre { fill: url(#pos-degrade); transform-box: fill-box; transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.4, 0, .2, 1) .2s; }
.vu .pos-barre { transform: none; }
.pos-vente { fill: rgba(255, 255, 255, .55); opacity: 0; transform: translateY(-30px); transition: opacity .4s, transform .6s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--i) * 45ms + .6s); }
.vu .pos-vente { opacity: 1; transform: none; }
.pos-bien { transform: translateX(0); transition: transform 1.8s cubic-bezier(.34, 1.3, .64, 1) .9s; opacity: 0; }
.vu .pos-bien { transform: translateX(var(--x)); opacity: 1; transition: transform 1.8s cubic-bezier(.34, 1.3, .64, 1) .9s, opacity .3s .9s; }
.pos-bien line { stroke: var(--anis); stroke-width: 2; }
.pos-bien circle { fill: var(--anis); stroke: var(--noir); stroke-width: 3; filter: drop-shadow(0 0 8px rgba(211, 216, 0, .7)); }
.pos-bien text { fill: var(--blanc); font: 600 13px var(--titre); }
.pos-borne { fill: rgba(255, 255, 255, .5); font: 500 11px var(--mono); }

/* Dernier appel, methode, pied */
.resultat .appel-bas { background: linear-gradient(130deg, #1D2617, #11150F); border-color: rgba(211, 216, 0, .2); }
.resultat .methode summary { color: var(--blanc); }
.resultat .methode p { color: rgba(255, 255, 255, .6); }
.resultat .res-pied { color: rgba(255, 255, 255, .45); }
.resultat .res-pied a { color: rgba(255, 255, 255, .6); }

@media (prefers-reduced-motion: reduce) {
  .res-entree, .carte-r.anime, .chiffre-roule > span, .jauge-valeur, .jauge-aiguille, .carte-lien, .carte-point > *, .vente,
  .evo-ligne, .evo-aire, .evo-point circle, .evo-valeur, .pos-barre, .pos-vente, .pos-bien { transition: none !important; animation: none !important; }
}

/* Champs pre-remplis par le navigateur : pas de fond bleu clair sur le fond sombre. */
.parcours input:-webkit-autofill, .parcours input:-webkit-autofill:hover, .parcours input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--blanc); caret-color: var(--anis);
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* Numeros des ventes : sombres sur la pastille jaune (la regle des textes de ligne les blanchissait). */
.resultat .vente .vente-num { color: var(--noir); }

/* Le conseil en sections : intertitres, puces cochees */
.resultat .conseil-texte h3.conseil-titre {
  display: flex; align-items: center; gap: 10px; margin: 22px 0 8px; font: 500 12px/1.3 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--anis);
}
.resultat .conseil-texte h3.conseil-titre:first-child { margin-top: 0; }
.resultat .conseil-texte h3.conseil-titre::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(211, 216, 0, .4), transparent); }
.resultat .conseil-texte .conseil-puces { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 8px; }
.resultat .conseil-texte .conseil-puces li { position: relative; padding-left: 30px; }
.resultat .conseil-texte .conseil-puces li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(211, 216, 0, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D3D800' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.resultat .conseil-texte h3.conseil-titre:nth-of-type(3) + .conseil-puces li::before {
  background: rgba(255, 138, 122, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB4A8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.resultat .conseil-texte p { margin: 0 0 10px; }
.resultat .conseil-texte h3.conseil-titre:last-of-type + p { color: var(--blanc); font-weight: 500; }