/* Negozimo — maquette de l'accueil : ce qui lui est propre. La scène du haut de page (le premier écran devient
   la couverture du dossier) et les trois prix sur leur règle graduée. Le reste vient de site.css. */

.scene { position: relative; background: var(--fond-prix); }

/* --- Bloc 2 : les trois prix. Fond calme ; la couleur est dans les prix : jaune pour la première offre (le prix
   conseillé), bleu pour le prix à viser, noir pour le prix à ne pas dépasser. --- */
html { --fond-prix: var(--color-bleu-clair); } /* choisi par l'utilisateur le 12/11, devant pierre et jaune clair */
.prix { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: var(--spacing-section) var(--spacing-gouttiere) 2.5rem; background: var(--fond-prix); color: var(--color-encre); transition: background-color var(--duree); }
.prix-couv { width: min(15rem, 56vw); aspect-ratio: 1240 / 1754; }
.prix-couv img { width: 100%; height: 100%; object-fit: cover; box-shadow: var(--shadow-page); transform: rotate(-3deg); }
.prix-texte { min-width: 0; display: grid; gap: clamp(1.2rem, calc(4 * var(--svh, 1svh)), 2.6rem); align-content: center; }
.prix h2 { max-width: 17ch; }
.regle { position: relative; }
.reperes { display: grid; gap: .5rem; }
.repere .corps { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; }
.repere .nom { font-size: var(--text-petit); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.25; }
.repere .montant { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: clamp(1.45rem, 2.3vw, 2rem); letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.r-offre .corps { background: var(--color-jaune); color: var(--color-encre); box-shadow: inset 0 0 0 2px var(--color-encre); }
.r-viser .corps { background: var(--color-bleu); color: var(--color-blanc); }
.r-plafond .corps { background: var(--color-encre); color: var(--color-blanc); }
.regle { display: flex; flex-direction: column; gap: .8rem; }
.regle-decor { order: 2; display: flex; flex-wrap: wrap; gap: .15rem 1.2rem; font-size: var(--text-petit); font-weight: 600; line-height: 1.35; }
.regle-decor b { font-weight: 800; }
.regle-ligne, .regle-crans, .regle-valeur { display: none; }
/* L'explication du bloc 2 : elle remonte se ranger sous la règle, dans le dernier écran de la scène (--remonte, posé par le script). */
.prix-suite { position: relative; z-index: 3; margin-top: calc(-1 * var(--remonte, 0px)); padding: 0 var(--spacing-gouttiere) var(--spacing-section); color: var(--color-encre); }
@media (max-width: 599px) { .repere .nom { letter-spacing: .04em; } .repere .corps { gap: .6rem; padding: .95rem .85rem; } .repere .montant { font-size: 1.4rem; } }
.prix-suite .colonne { display: grid; gap: 1rem; max-width: 46rem; }
.prix-suite .chapo { max-width: none; text-wrap: pretty; }
.prix-suite .exemple { font-size: var(--text-petit); font-weight: 600; }

/* La règle graduée : à partir de 900 px, les trois prix se posent sur une ligne à l'échelle (245 000 à 305 000 €). */
@media (min-width: 900px) {
  .prix { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
  .prix-couv { width: auto; height: min(42rem, calc(70 * var(--svh, 1svh))); }
  .prix h2 { max-width: 20ch; }
  .regle { display: block; --min: 245; --etendue: 60; --trait: 84%; height: clamp(15.5rem, calc(31 * var(--svh, 1svh)), 19rem); }
  .regle-ligne, .regle-valeur { display: block; }
  .regle-crans { display: flex; }
  .repere .montant { font-size: clamp(1.7rem, 2.75vw, 2.5rem); }
  .repere .nom { font-size: var(--text-petit); }
  .reperes { display: block; }
  .repere { position: absolute; left: calc((var(--v) - var(--min)) / var(--etendue) * var(--trait)); }
  .repere .corps { flex-direction: column; align-items: flex-start; gap: .3rem; padding: .6rem .9rem .65rem; }
  .repere::before { content: ""; position: absolute; left: 0; width: 3px; height: 1.7rem; background: var(--color-encre); }
  .repere::after { content: ""; position: absolute; left: -5px; width: 13px; height: 13px; border-radius: 50%; background: var(--color-blanc); box-shadow: inset 0 0 0 3px var(--color-encre); }
  .repere.haut { bottom: calc(50% + 1.7rem); }
  .repere.haut::before { top: 100%; }
  .repere.haut::after { top: calc(100% + 1.7rem - 5px); }
  .repere.bas { top: calc(50% + 1.7rem + 3px); }
  .repere.bas::before { bottom: 100%; }
  .repere.bas::after { bottom: calc(100% + 1.7rem - 8px); }
  .repere.a-gauche { transform: translateX(-100%); margin-left: 3px; }
  .repere.a-gauche .corps { align-items: flex-end; text-align: right; }
  .repere.a-gauche::before { left: auto; right: 0; }
  .repere.a-gauche::after { left: auto; right: -5px; }
  .regle-decor { display: block; position: absolute; inset: 0; pointer-events: none; font-weight: inherit; }
  .regle-ligne { position: absolute; left: 0; top: 50%; width: var(--trait); height: 3px; background: var(--color-encre); transform-origin: 0 50%; }
  .regle-crans { position: absolute; left: 0; top: calc(50% + 3px); width: var(--trait); height: 8px; justify-content: space-between; }
  .regle-crans i { width: 2px; height: 100%; background: var(--color-encre); }
  .regle-valeur { position: absolute; left: calc(29 / 60 * var(--trait)); top: calc(50% - 12px); width: calc(15 / 60 * var(--trait)); height: 27px; background: var(--color-blanc); box-shadow: inset 0 0 0 2px var(--color-encre); transform-origin: 0 50%; }
  .regle-valeur-nom { position: absolute; left: calc(30 / 60 * var(--trait) + 1.7rem); top: calc(50% + 1.15rem); font-size: var(--text-petit); font-weight: 600; line-height: 1.3; white-space: nowrap; }
  .regle-valeur-nom b { display: block; font-weight: 800; }
  .regle-affiche { position: absolute; left: calc(var(--trait) + .8rem); top: 50%; transform: translateY(-50%); font-size: var(--text-petit); font-weight: 600; line-height: 1.25; white-space: nowrap; }
  .regle-affiche b { display: block; font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: clamp(1.15rem, 1.6vw, 1.45rem); letter-spacing: -0.03em; }
  .prix-suite .colonne { margin-left: auto; margin-right: 0; width: var(--largeur-texte, 46rem); max-width: 100%; }
}

/* --- La scène épinglée --- */
html.scene-epinglee .scene-piste { height: calc(calc(100 * var(--svh, 1svh)) + var(--portee, calc(230 * var(--svh, 1svh)))); }
html.scene-epinglee .scene-fixe { position: sticky; top: 0; height: 100svh; overflow: clip; background: var(--fond-prix); transition: background-color var(--duree); }
html.scene-epinglee .cadre { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; overflow: hidden; background: var(--color-encre); transform-origin: 50% 50%; will-change: transform, width, height; box-shadow: 0 28px 50px -18px rgb(21 20 18 / calc(.45 * var(--k, 0))); }
html.scene-epinglee .hero { position: absolute; left: 0; top: 0; z-index: 0; width: var(--scene-l, 100vw); height: 100svh; min-height: 0; transform-origin: 0 0; will-change: transform; }
/* La couverture : calée en haut, à la largeur du cadre. Écran en hauteur : le noir du cadre prolonge celui de la page. */
html.scene-epinglee .feuille { position: absolute; inset: 0; z-index: 4; overflow: hidden; background: var(--color-encre); clip-path: inset(0% 0% 100% 0%); pointer-events: none; }
html.scene-epinglee .feuille img { width: 100%; max-width: none; height: auto; }
html:not(.scene-epinglee) .feuille { display: none; }
html.scene-epinglee .prix { position: absolute; inset: 0; z-index: 1; padding-block: clamp(5rem, calc(13 * var(--svh, 1svh)), 7.5rem) clamp(1.2rem, calc(5 * var(--svh, 1svh)), 3.2rem); align-content: center; }
html.scene-epinglee .prix-couv img { visibility: hidden; }
@media (max-width: 899px) {
  html.scene-epinglee .scene { --portee: calc(125 * var(--svh, 1svh)); }
  html.scene-epinglee .prix { grid-template-columns: clamp(7rem, 36vw, 15rem) minmax(0, 1fr); column-gap: clamp(1.1rem, 4vw, 2.5rem); row-gap: clamp(1.4rem, calc(4 * var(--svh, 1svh)), 2.5rem); align-items: center; align-content: start; }
  html.scene-epinglee .prix-couv { width: 100%; }
  html.scene-epinglee .prix-texte { display: contents; }
  html.scene-epinglee .prix h2 { font-size: clamp(1.5rem, 6.6vw, 2.6rem); max-width: none; }
  html.scene-epinglee .regle { grid-column: 1 / -1; }
}

/* ========================= Bloc 5 : la stratégie, en trois temps =========================
   Après le mur d'enquête (ce qu'on a lu), ce qu'on en fait : avant la visite, pendant la négociation, au compromis.
   Un bloc calme, sans chiffre géant ni épinglage : une ligne du temps, trois points, trois consignes. */
.strategie .conteneur { display: grid; gap: clamp(2.2rem, 5vw, 4.5rem); }
.strategie h2 { max-width: 16ch; }
.temps { display: grid; gap: 0; }
.temps li { position: relative; display: grid; align-content: start; gap: .75rem; padding: 0 0 clamp(1.6rem, 4vw, 2.4rem) 1.9rem; border-left: 2px solid var(--color-encre); }
.temps li:last-child { padding-bottom: 0; }
.temps li::before { content: ""; position: absolute; left: -1px; top: .1rem; width: .9rem; height: .9rem; translate: -50% 0; border-radius: 50%; background: var(--color-bleu); box-shadow: 0 0 0 4px var(--p); }
.temps .quand { font-size: var(--text-petit); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-bleu); }
.temps h3 { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: var(--text-sous-titre); letter-spacing: var(--tracking-titre); line-height: 1.05; max-width: 15ch; text-wrap: balance; }
.temps .dit { max-width: 24rem; font-size: var(--text-chapo); font-weight: 500; line-height: 1.4; }
.temps .dit b { font-weight: 700; white-space: nowrap; }
@media (min-width: 900px) {
  .temps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .temps li { padding: 1.9rem clamp(1.2rem, 2.6vw, 2.6rem) 0 0; border-left: 0; border-top: 2px solid var(--color-encre); }
  .temps li::before { left: 0; top: -1px; translate: 0 -50%; }
}

/* ========================= Bloc 5 : le mur d'enquête =========================
   Trois panneaux : le scan des sites d'annonces, l'histoire de l'annonce, la carte des ventes signées.
   Grand écran avec mouvement : la section s'épingle et les panneaux défilent de côté (classe enquete-epinglee, posée par le script).
   Sinon : les trois panneaux l'un sous l'autre. Tout est dessiné dans la page ; aucun jaune pâle, aucun texte penché. */
.enquete { position: relative; padding-block: var(--spacing-section); background: var(--p); color: var(--pt); overflow-x: clip; }
.enquete-tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 3rem; width: 100%; max-width: 90rem; margin-inline: auto; padding-inline: var(--spacing-gouttiere); }
.enquete-tete h2 { max-width: 15ch; }
.mur { display: grid; gap: clamp(4rem, 10vw, 7rem); margin-top: clamp(2.6rem, 6vw, 4.5rem); }
.pan { display: grid; gap: clamp(1.8rem, 4vw, 4rem); align-items: center; width: 100%; max-width: 90rem; margin-inline: auto; padding-inline: var(--spacing-gouttiere); }
.pan figure { margin: 0; min-width: 0; }
.pan-texte { display: grid; gap: .9rem; justify-items: start; min-width: 0; }
.pan .geant { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: var(--text-affiche); letter-spacing: -0.06em; line-height: .8; color: var(--pa); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pan .geant small { display: block; margin-top: .9rem; font-family: var(--font-texte); font-stretch: 100%; font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.35rem); letter-spacing: 0; line-height: 1.2; color: var(--pt); }
.pan h3 { margin-top: .6rem; font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: var(--text-sous-titre); letter-spacing: var(--tracking-titre); line-height: 1.05; max-width: 17ch; text-wrap: balance; }
.pan-texte > p:not(.geant):not(.legende) { max-width: 25rem; font-size: var(--text-chapo); font-weight: 500; line-height: 1.42; }
@media (min-width: 900px) { .pan { grid-template-columns: 5fr 7fr; } .pan-ventes { grid-template-columns: 6fr 6fr; } }
@media (min-width: 900px) { .pan-scan .geant { font-size: clamp(5rem, 11vw, 11rem); } }
@media (max-width: 899px) { .pan-ventes .carte { order: 2; } }

/* --- panneau 1 : les trois annonces du même appartement --- */
.annonces { position: relative; display: flex; align-items: flex-start; padding-right: 2%; }
.annonce { flex: 0 0 39%; }
.annonce + .annonce { margin-left: -7.5%; }
.annonce.a1 { z-index: 1; margin-top: clamp(.8rem, 3vw, 2.4rem); } .annonce.a3 { z-index: 3; margin-top: clamp(.4rem, 1.4vw, 1.2rem); }
.annonce { background: var(--color-blanc); color: var(--color-encre); box-shadow: var(--shadow-page); }
.annonce.a2 { z-index: 2; margin-top: clamp(2.4rem, 8vw, 6.4rem); }
.annonce .photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.annonce .bas { display: grid; gap: .2rem; justify-items: start; padding: .7rem .8rem .9rem; }
.annonce .logo { display: flex; align-items: center; height: 2.3rem; }
.annonce .logo img { width: auto; max-width: 100%; object-fit: contain; }
.annonce .qui { font-size: var(--text-petit); font-weight: 500; line-height: 1.25; }
.annonce b { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: var(--text-chiffre); letter-spacing: -0.035em; white-space: nowrap; }
.annonce.direct { outline: 5px solid var(--color-jaune); outline-offset: 0; }
.annonce.direct b { color: var(--color-bleu); }
.balayage { position: absolute; top: -4%; bottom: -4%; left: 0; width: 4px; background: var(--color-jaune); opacity: 0; pointer-events: none; }
@media (max-width: 519px) { .annonce .bas { padding: .5rem .5rem .65rem; } .annonce .logo { height: 1.9rem; } .annonce .logo img { max-height: 1.6rem; } .annonce .qui { font-size: var(--text-mini); } }

/* --- panneau 2 : la courbe du prix, tracée sur le bleu --- */
.trace { position: relative; height: clamp(13rem, calc(48 * var(--svh, 1svh)), 27rem); margin-block: 2.2rem 1.6rem; }
.trace svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trace path { fill: none; vector-effect: non-scaling-stroke; }
.trace .aire { fill: rgb(255 255 255 / .1); }
.trace .axe { stroke: rgb(255 255 255 / .4); stroke-width: 2; }
.trace .ligne { stroke: var(--color-blanc); stroke-width: 4; }
.trace .direct { stroke: var(--color-jaune); stroke-width: 4; }
.trace .pt { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: .85rem; height: .85rem; translate: -50% -50%; border-radius: 50%; background: var(--color-blanc); box-shadow: 0 0 0 4px var(--color-bleu); }
.trace .pt.direct { background: var(--color-jaune); }
.trace span { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); font-size: clamp(.875rem, 1.2vw, 1.0625rem); font-weight: 700; line-height: 1.15; white-space: nowrap; }
.trace .val { translate: -.2rem calc(-100% - .85rem); font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: var(--text-chiffre); letter-spacing: -0.035em; }
.trace .baisse { translate: calc(-100% - .6rem) -50%; color: var(--color-jaune); }
.trace .fin { left: calc(70% + .8rem); translate: 0 -50%; font-weight: 500; }
.trace .fin b { display: block; font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: var(--text-chiffre); letter-spacing: -0.035em; }
.trace .fin.direct b { color: var(--color-jaune); }
.trace .mois { top: 92%; translate: -50% 0; font-weight: 500; color: var(--p2); }
.trace .mois:first-of-type { translate: 0 0; }
@media (max-width: 519px) { .trace .val, .trace .fin b { font-stretch: 100%; } }

/* --- panneau 3 : la carte des ventes signées --- */
.carte-fond { position: relative; aspect-ratio: 1; width: 100%; max-width: min(38rem, calc(70 * var(--svh, 1svh))); margin-inline: auto; }
.carte svg { display: block; width: 100%; height: 100%; overflow: visible; }
.carte .fond { fill: var(--color-bleu-voile); }
.carte .rue { fill: none; stroke: var(--color-bleu); stroke-width: 7; stroke-linecap: round; }
.carte .anneau { fill: none; stroke: var(--color-bleu); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: .55; }
.carte .anneau-nom { font: 700 8.5px var(--font-texte); fill: var(--color-bleu); }
.carte .bien { fill: var(--color-encre); }
.carte .onde { fill: none; stroke: var(--color-encre); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
html.motion .carte .onde { animation: onde 2.6s ease-out infinite; }
@keyframes onde { from { transform: scale(.7); opacity: .7; } to { transform: scale(3); opacity: 0; } }
.carte .point { cursor: pointer; }   /* pas de transform-box ici : GSAP calcule lui-même le centre du point, les deux réglages se contrarient */
.carte .point.bas { fill: var(--color-bleu); stroke: var(--color-blanc); stroke-width: 1.5; }
.carte .point.haut { fill: var(--color-blanc); stroke: var(--color-encre); stroke-width: 2; }
.carte .point.actif { stroke: var(--color-encre); stroke-width: 3.5; }
.bulle { position: absolute; z-index: 2; pointer-events: none; translate: -50% calc(-100% - 12px); padding: .45rem .7rem .5rem; background: var(--color-encre); color: var(--color-blanc); font-size: var(--text-petit); font-weight: 600; line-height: 1.3; white-space: nowrap; opacity: 0; transition: opacity var(--duree-courte); }
.bulle.visible { opacity: 1; }
.bulle b { display: block; font-size: 1.0625rem; color: var(--color-jaune); }
.pan .legende { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; margin-top: .4rem; font-size: var(--text-petit); font-weight: 600; }
.pan .legende .pt { display: inline-block; width: .8rem; height: .8rem; margin-right: .45rem; border-radius: 50%; vertical-align: -.08em; }
.pan .legende .pt.bas { background: var(--color-bleu-clair); box-shadow: inset 0 0 0 2px var(--color-blanc); }
.pan .legende .pt.haut { background: var(--color-blanc); box-shadow: inset 0 0 0 2.5px var(--color-encre); }

/* --- la section épinglée : trois panneaux côte à côte --- */
html.enquete-epinglee .enquete { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: calc(100 * var(--svh, 1svh)); padding-block: clamp(4.8rem, calc(10 * var(--svh, 1svh)), 6rem) 0; overflow: clip; }
html.enquete-epinglee .enquete-tete { max-width: none; align-items: center; }
html.enquete-epinglee .enquete-tete h2 { max-width: none; font-size: clamp(1.5rem, 2.5vw, 2.3rem); }
html.enquete-epinglee .enquete-tete > p { margin-left: auto; }
html.enquete-epinglee .mur { display: flex; gap: 0; width: max-content; height: 100%; margin-top: 0; will-change: transform; }
html.enquete-epinglee .pan { flex: none; width: 100vw; max-width: none; height: 100%; margin: 0; padding-block: clamp(.6rem, calc(3 * var(--svh, 1svh)), 2rem) clamp(1.4rem, calc(6 * var(--svh, 1svh)), 3.4rem); }
html.enquete-epinglee .pan .geant { font-size: clamp(5rem, min(11vw, calc(26 * var(--svh, 1svh))), 12rem); }
html.enquete-epinglee .pan-histoire .geant, html.enquete-epinglee .pan-ventes .geant { font-size: clamp(5rem, min(15vw, calc(30 * var(--svh, 1svh))), 15rem); }

/* le repère des trois panneaux (section épinglée seulement) */
.mur-repere { display: none; }
html.enquete-epinglee .mur-repere { display: grid; grid-template-columns: repeat(3, 3.2rem); gap: .4rem; }
.mur-repere li { height: 4px; background: rgb(255 255 255 / .3); overflow: hidden; }
.mur-repere i { display: block; height: 100%; background: var(--color-jaune); transform-origin: 0 50%; }

/* --- Bloc 6 : l'application rejouée en petit (demo-app.js). Dessin d'après app.negozimo.com : la barre noire à gauche,
   les quatre étapes, puis le contenu de l'étape. Tout est en em : la taille suit la largeur du panneau (requête de
   conteneur), l'écran garde ses proportions de l'ordinateur au téléphone. État écrit dans la page = état final. --- */
.steps-app [data-step-media] { container-type: inline-size; padding: clamp(.5rem, 1.6vw, 1.25rem); }
@media (max-width: 767px) { html .steps-app [data-step-media] { aspect-ratio: 4 / 5; padding: .5rem; } }
.app { position: relative; display: grid; grid-template-columns: 9.8em minmax(0, 1fr); width: 100%; height: 100%; overflow: hidden; background: var(--color-pierre); color: var(--color-encre); font-size: clamp(9px, 1.82cqi, 15px); line-height: 1.3; text-align: left; outline: 2px solid var(--color-encre); box-shadow: 0 1.4em 2.6em -1.6em rgb(16 30 92 / .5); }
:where(.app) :where(p, ol, ul, dl, dd) { margin: 0; padding: 0; }
:where(.app) :where(ol, ul) { list-style: none; }
.app s { text-decoration: none; filter: blur(.3em); user-select: none; }
.app-pile { display: grid; min-width: 0; }
.app-pile > * { grid-area: 1 / 1; min-width: 0; }
.app [data-phase="a"] { visibility: hidden; opacity: 0; }

/* la barre noire */
.app-barre { display: flex; flex-direction: column; gap: 1.5em; min-width: 0; padding: 1.2em .75em .9em; background: var(--color-encre); color: var(--color-blanc); }
.app-logo { display: block; width: 6.4em; height: auto; }
.app-nav { display: grid; gap: .2em; font-size: .88em; font-weight: 700; }
.app-nav span { display: flex; align-items: center; gap: .6em; padding: .55em .65em; white-space: nowrap; }
.app-nav span::before { content: ""; flex: none; width: .75em; height: .75em; box-shadow: inset 0 0 0 1.5px currentColor; }
.app-nav .on { background: var(--color-jaune); color: var(--color-encre); }
.app-boites { margin-top: auto; }
.app-barre > .app-boite { margin-top: auto; }
.app-boite { display: block; padding: .85em .8em; background: rgb(255 255 255 / .09); color: var(--color-galet-clair); font-size: .72em; line-height: 1.4; }
.app-boite b { display: block; margin-bottom: .35em; color: var(--color-blanc); font-size: 1.08em; }

/* l'en-tête du bien et les quatre étapes */
.app-main { display: flex; flex-direction: column; gap: .75em; min-width: 0; min-height: 0; padding: 1em 1.2em 0; }
.app-tete { display: flex; align-items: center; gap: .75em; min-width: 0; }
.app-vignette { flex: none; display: block; width: 2.7em; height: 2.7em; overflow: hidden; background: var(--color-trait); }
.app-vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-plus { display: grid; place-items: center; background: var(--color-encre); color: var(--color-jaune); font-weight: 800; }
.app-tete p { display: grid; gap: .2em; min-width: 0; }
.app-tete b { overflow: hidden; font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: 1.32em; letter-spacing: -0.03em; line-height: 1.05; white-space: nowrap; text-overflow: ellipsis; }
.app-tete small { overflow: hidden; font-size: .74em; color: var(--color-galet); white-space: nowrap; text-overflow: ellipsis; }
.app-pdf { flex: none; margin-left: auto; padding: .6em .85em; background: var(--color-encre); color: var(--color-blanc); font-size: .78em; font-weight: 700; white-space: nowrap; }
.app-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45em; }
.app-tuiles li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .55em; min-width: 0; padding: .5em .6em; box-shadow: inset 0 0 0 1px var(--color-galet-clair); }
.app-tuiles i { grid-row: span 2; display: grid; place-items: center; width: 1.6em; height: 1.6em; box-shadow: inset 0 0 0 1.5px var(--color-galet-clair); color: var(--color-galet); font-size: .8em; font-style: normal; font-weight: 800; }
.app-tuiles b { color: var(--color-galet); font-size: .84em; font-weight: 700; line-height: 1.1; }
.app-tuiles small { overflow: hidden; color: var(--color-galet); font-size: .66em; white-space: nowrap; text-overflow: ellipsis; }
.app-tuiles .fait { background: var(--color-blanc); box-shadow: none; }
.app-tuiles .fait i { position: relative; background: var(--color-encre); color: transparent; box-shadow: none; }
.app-tuiles .fait i::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-blanc); }
.app-tuiles .on { background: var(--color-jaune); box-shadow: none; }
.app-tuiles .on i { background: var(--color-encre); color: var(--color-blanc); box-shadow: none; }
.app-tuiles .on b, .app-tuiles .fait b, .app-tuiles .on small { color: var(--color-encre); }
.app-onglets li { background: var(--color-blanc); box-shadow: none; }
.app-onglets i { box-shadow: none; color: var(--color-encre); font-size: .95em; }
.app-onglets b { color: var(--color-encre); }

/* le contenu de l'étape */
.app-corps { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.app .a-sur { font-size: .64em; font-weight: 800; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; color: var(--color-galet); }
.app .a-titre { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: 1.9em; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; }
.app .a-titre em, .app .p-titre em { font-style: italic; color: var(--color-bleu); }
.app .a-btn { display: inline-flex; align-items: center; padding: .62em .9em; background: var(--color-encre); color: var(--color-blanc); font-size: .8em; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.app .a-jaune { background: var(--color-jaune); color: var(--color-encre); box-shadow: inset 0 0 0 1.5px var(--color-encre); }
.app .a-contour { background: var(--color-blanc); color: var(--color-encre); box-shadow: inset 0 0 0 1.5px var(--color-encre); }
.app .a-prix { font-size: .82em; color: var(--color-galet); }
.app .a-prix b { margin-right: .2em; color: var(--color-encre); font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: 1.9em; letter-spacing: -0.04em; line-height: 1; }
.app .a-lecture { display: grid; gap: .45em; font-size: .82em; font-weight: 600; }
.app .a-lecture u { display: block; height: 4px; overflow: hidden; background: var(--color-trait); }
.app .a-lecture i { display: block; width: 100%; height: 100%; background: var(--color-bleu); transform-origin: left center; }

/* 1. le bien */
.d-accueil, .d-bien, .e-prepa, .e-espace { position: absolute; inset: 0; }
.d-accueil { display: flex; flex-direction: column; justify-content: center; gap: .95em; padding-bottom: 1.6em; }
.d-accueil .a-titre { max-width: 13em; font-size: 2.3em; }
.a-champ { display: grid; grid-template-columns: minmax(0, 1fr) auto; background: var(--color-blanc); box-shadow: inset 0 0 0 2px var(--color-encre); }
.a-url { display: flex; align-items: center; min-width: 0; padding: .78em .85em; overflow: hidden; font-size: .86em; white-space: nowrap; }
.a-curseur { flex: none; display: none; width: 1.5px; height: 1.2em; margin-left: 1px; background: var(--color-bleu); }
html.motion .a-curseur { display: block; animation: clignote 1s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.a-champ .a-btn { margin: 3px; box-shadow: none; font-size: .86em; }
.d-bien { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .55em; padding-bottom: .95em; }
.a-mosaique { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .3em; min-height: 0; }
.a-mosaique picture { display: block; min-height: 0; overflow: hidden; background: var(--color-trait); }
.a-mosaique picture:first-child { grid-row: span 2; }
.a-mosaique img { display: block; width: 100%; height: 100%; object-fit: cover; }
.a-ligne { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: .55em; }
.a-fiche { display: grid; gap: .6em; padding: .8em .9em; background: var(--color-blanc); }
.a-faits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6em; }
.a-faits div { display: grid; padding-top: .35em; border-top: 2px solid var(--color-encre); }
.a-faits dt { order: 2; color: var(--color-galet); font-size: .66em; }
.a-faits dd { overflow: hidden; font-size: .88em; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.a-boutons { display: flex; flex-wrap: wrap; gap: .45em; }
.a-adresse { display: grid; align-content: start; gap: .5em; padding: .85em .9em; background: var(--color-bleu-nuit); color: var(--color-blanc); font-size: .82em; line-height: 1.35; }
.a-adresse .a-sur { color: var(--color-jaune); font-size: .78em; }
.a-rue { font-size: 1.2em; font-weight: 800; }

/* 2. la vérification */
[data-demo="verif"] .app-corps { display: flex; flex-direction: column; gap: .6em; padding-bottom: .95em; }
.v-haut { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.v-haut .a-titre { font-size: 1.6em; }
.v-compte { flex: none; display: grid; gap: .35em; width: 9.5em; font-size: .74em; color: var(--color-galet); text-align: right; }
.v-compte b { color: var(--color-encre); }
.v-compte u { display: block; height: 3px; overflow: hidden; background: var(--color-trait); }
.v-compte i { display: block; width: 100%; height: 100%; background: var(--color-bleu); transform-origin: left center; }
.v-themes { display: flex; flex-wrap: wrap; gap: .35em; white-space: nowrap; }
.v-themes li { flex: none; display: flex; align-items: center; gap: .45em; padding: .42em .6em; background: var(--color-blanc); box-shadow: inset 0 0 0 1px var(--color-trait); font-size: .74em; font-weight: 600; }
.v-themes li:first-child { box-shadow: inset 0 0 0 1.5px var(--color-encre); }
.v-themes i { font-style: normal; font-weight: 800; }
.v-themes .fait::after { content: "✓"; color: var(--color-bleu); font-weight: 800; }
.v-carte { flex: 1; display: grid; align-content: start; gap: .5em; min-height: 0; padding: .8em .95em; background: var(--color-blanc); box-shadow: inset 0 0 0 1.5px var(--color-encre); }
.v-carte-tete { display: flex; align-items: baseline; gap: .8em; }
.v-carte-tete b { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: 1.3em; letter-spacing: -0.03em; }
.v-q { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); align-items: center; gap: .35em .8em; padding-top: .5em; border-top: 1px solid var(--color-trait); }
.v-q > p:first-child { display: grid; gap: .15em; font-size: .84em; font-weight: 700; }
.v-q em { font-size: .82em; font-style: normal; font-weight: 600; color: var(--color-galet); }
.v-tag { display: grid; color: var(--color-bleu); }
.v-tag span { grid-area: 1 / 1; }
.v-tag span:first-child, .v-tag.a-faire span:last-child { visibility: hidden; }
.v-tag.a-faire span:first-child { visibility: visible; color: var(--color-galet); }
.v-choix { display: flex; flex-wrap: wrap; gap: .3em; }
.v-choix span { padding: .38em .58em; background: var(--color-blanc); box-shadow: inset 0 0 0 1.5px var(--color-encre); font-size: .76em; font-weight: 600; white-space: nowrap; }
.v-choix .on { background: var(--color-encre); color: var(--color-blanc); }
.v-champ { padding: .45em .6em; box-shadow: inset 0 0 0 1.5px var(--color-encre); color: var(--color-galet); font-size: .76em; }
.v-suite { display: flex; justify-content: flex-end; padding-top: .2em; }
.a-souris { position: absolute; z-index: 3; top: 0; left: 0; width: 1.25em; height: auto; fill: var(--color-encre); stroke: var(--color-blanc); stroke-width: 1.3; visibility: hidden; pointer-events: none; filter: drop-shadow(0 .15em .2em rgb(0 0 0 / .35)); }

/* 3. l'aperçu gratuit (un long écran qui défile tout seul) */
.p-defile { position: relative; display: grid; gap: .75em; padding-bottom: .95em; }
.p-faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr); gap: .5em; }
.p-fait { display: grid; align-content: start; gap: .4em; padding: .75em .8em; background: var(--color-blanc); }
.p-fait > b { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: 1.6em; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.p-fait p { font-size: .72em; line-height: 1.38; }
.p-flou { filter: blur(.2em); user-select: none; }
.p-lecture { display: grid; align-content: start; gap: .35em; padding: .8em .85em; background: var(--color-jaune); box-shadow: inset 0 0 0 1.5px var(--color-encre); rotate: -2deg; }
.p-lecture .a-sur { color: var(--color-encre); }
.p-lecture b { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: 1.4em; letter-spacing: -0.035em; line-height: 1; }
.p-lecture p:last-child { font-size: .72em; }
.p-titre { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: 1.45em; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
.p-marche { display: grid; gap: .55em; padding: .95em 1.05em 1.05em; background: var(--color-bleu); color: var(--color-blanc); }
.p-marche .a-sur { color: var(--color-bleu-clair); }
.app .p-marche .p-titre em { color: var(--color-jaune); }
.p-graphe { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.1em; }
.p-barres { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: .35em; height: 9em; }
.p-barres li { display: flex; flex-direction: column; justify-content: flex-end; gap: .25em; height: 100%; text-align: center; }
.p-barres b { font-size: .64em; font-weight: 800; white-space: nowrap; }
.p-barres i { display: block; height: calc(var(--v) * 6.6em); background: var(--color-blanc); transform-origin: center bottom; }
.p-barres li:nth-child(n+4) i { background: var(--color-bleu-clair); }
.p-barres li:last-child i { background: var(--color-jaune); }
.p-barres span { font-size: .6em; color: var(--color-bleu-clair); }
.p-badge { margin-bottom: 2.2em; padding: .45em .65em; background: var(--color-jaune); color: var(--color-encre); font-size: .9em; font-weight: 800; white-space: nowrap; rotate: -2deg; }
.p-ventes, .p-energie { display: grid; gap: .5em; padding: .95em 1.05em; background: var(--color-blanc); }
.p-ventes .p-titre b { color: var(--color-bleu); }
.p-table { width: 100%; border-collapse: collapse; font-size: .74em; }
.p-table th { padding: .35em .3em; border-bottom: 2px solid var(--color-encre); font-weight: 800; text-align: left; }
.p-table td { padding: .42em .3em; border-bottom: 1px solid var(--color-trait); white-space: nowrap; }
.p-table th:last-child, .p-table td:last-child { text-align: right; }
.p-cache td { filter: blur(.3em); color: var(--color-galet); user-select: none; }
.p-dpe { display: flex; align-items: center; gap: .7em; }
.dpe { display: flex; flex-direction: column; justify-content: center; min-width: 4.4em; padding: .3em 1.4em .3em .7em; font-family: var(--font-titre); font-weight: 800; font-size: 1.5em; line-height: 1; color: var(--color-encre); clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%); }
.dpe small { font-family: var(--font-texte); font-size: .42em; font-weight: 700; }
.dpe-f { background: #EB8235; }
.dpe-e { background: #F0B40F; }
.p-fleche { font-size: 1.4em; font-weight: 800; color: var(--color-bleu); }
.p-cta { display: grid; gap: .6em; padding: .95em 1.05em 1.1em; background: var(--color-bleu-nuit); color: var(--color-blanc); }
.p-cta .a-sur { color: var(--color-jaune); }
.p-prix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4em; }
.p-prix span { display: grid; gap: .25em; padding: .55em .6em; background: var(--color-pierre); color: var(--color-encre); font-size: .66em; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.p-prix span:first-child { background: var(--color-jaune); }
.p-prix s { font-family: var(--font-titre); font-size: 1.9em; letter-spacing: 0; text-transform: none; white-space: nowrap; }

/* 4. le dossier et le chemin */
.e-prepa { display: flex; flex-direction: column; justify-content: center; gap: .85em; padding-bottom: 1.6em; }
.e-taches { display: grid; gap: .45em; font-size: .9em; font-weight: 600; }
.e-taches li { display: flex; align-items: center; gap: .6em; color: var(--color-galet); }
.e-taches li::before { content: ""; flex: none; display: grid; place-items: center; width: 1.15em; height: 1.15em; box-shadow: inset 0 0 0 1.5px var(--color-galet-clair); font-size: .9em; }
.e-taches li.fait { color: var(--color-encre); }
.e-taches li.fait::before { content: "✓"; background: var(--color-encre); color: var(--color-jaune); box-shadow: none; }
.e-espace { display: flex; flex-direction: column; gap: .55em; padding-bottom: .95em; }
.e-photos { flex: 1 1 0; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: .3em; min-height: 3em; }
.e-photos picture { display: block; min-height: 0; overflow: hidden; }
.e-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.e-haut { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: .8em; }
.e-fiche { display: grid; gap: .4em; padding: .8em .9em; background: var(--color-blanc); font-size: .9em; }
.e-puces { display: flex; flex-wrap: wrap; gap: .3em; }
.e-puces span { padding: .25em .5em; box-shadow: inset 0 0 0 1px var(--color-trait); font-size: .72em; font-weight: 600; }
.e-conseil { display: grid; gap: .3em; padding: .85em .95em; background: var(--color-jaune); box-shadow: inset 0 0 0 1.5px var(--color-encre), 0 .7em 1.3em -.8em rgb(0 0 0 / .45); font-size: .84em; rotate: -1.5deg; }
.e-conseil .a-sur { color: var(--color-encre); }
.e-offre { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: 2em; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.e-ou { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: 1.2em; letter-spacing: -0.03em; }
.e-cartes { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: .5em; }
.e-cartes > div { display: grid; align-content: start; gap: .45em; min-width: 0; padding: .8em .9em; background: var(--color-blanc); font-size: .88em; }
.e-cartes .e-nego { background: var(--color-bleu-nuit); color: var(--color-blanc); }
.e-nego .a-sur { color: var(--color-jaune); }
.e-etape { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: 1.4em; letter-spacing: -0.03em; line-height: 1; }
.e-segments { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25em; }
.e-segments i { display: block; height: .42em; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55); }
.e-segments i:first-child { background: var(--color-jaune); box-shadow: none; transform-origin: left center; }
.e-nego > p:not([class]) { font-size: .82em; }
.e-nego .a-btn { justify-self: start; }
.e-gris { color: var(--color-galet); font-size: .82em; }
.e-eventail { position: relative; display: block; height: 5.2em; }
.e-eventail img { position: absolute; left: 50%; bottom: .2em; width: 3.3em; height: auto; translate: -50% 0; transform-origin: 50% 100%; box-shadow: 0 .3em .7em -.25em rgb(0 0 0 / .4); }
.e-eventail img:nth-child(1) { transform: rotate(-13deg); }
.e-eventail img:nth-child(2) { transform: rotate(-2deg); }
.e-eventail img:nth-child(3) { transform: rotate(10deg); }
.e-mail { position: absolute; right: .3em; bottom: 1.3em; z-index: 2; padding: .65em .95em; background: var(--color-encre); color: var(--color-blanc); font-size: .8em; font-weight: 700; visibility: hidden; box-shadow: 0 .6em 1.2em -.6em rgb(0 0 0 / .5); }

/* l'écran étroit (téléphone) : la barre noire passe en haut, les étapes perdent leur sous-titre */
@container (max-width: 470px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); font-size: max(9px, 2.55cqi); }
  .app-barre { flex-direction: row; align-items: center; gap: .8em; padding: .65em .85em; }
  .app-logo { width: 5.6em; }
  .app-nav { display: flex; margin-left: auto; }
  .app-nav span:not(.on) { display: none; }
  .app-barre > .app-boite, .app-boites { display: none; }
  .app-main { padding: .8em .8em 0; gap: .65em; }
  .app-tuiles { gap: .3em; }
  .app-tuiles li { column-gap: .35em; padding: .45em .4em; }
  .app-tuiles small { display: none; }
  .app-tuiles i { grid-row: auto; }
  .app-tuiles b { font-size: .74em; }
  .d-accueil .a-titre { font-size: 2.1em; }
  .a-mosaique { grid-template-columns: 1fr 1fr; grid-template-rows: 1.7fr 1fr; }
  .a-mosaique picture:first-child { grid-row: auto; grid-column: span 2; }
  .a-mosaique picture:nth-child(n+4) { display: none; }
  .a-ligne { grid-template-columns: minmax(0, 1fr); }
  .a-boutons .a-contour { display: none; }
  .v-haut { flex-direction: column; align-items: stretch; gap: .5em; }
  .v-compte { width: auto; text-align: left; }
  .v-q { grid-template-columns: minmax(0, 1fr); }
  .v-q:nth-child(6) { display: none; }
  .p-faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-graphe { grid-template-columns: minmax(0, 1fr); }
  .p-badge { justify-self: start; margin-bottom: 0; }
  .e-haut { grid-template-columns: minmax(0, 1fr); }
  .e-fiche { display: none; }
  .e-cartes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; }
  .e-cartes .e-nego { grid-column: span 2; }
  .e-eventail { height: 5em; }
  .e-photos { grid-template-columns: 2fr 1fr 1fr; }
  .e-photos picture:nth-child(4) { display: none; }
}

.espace-demo h2 em { font-style: italic; color: var(--color-bleu); }

/* --- Bloc 5 (14/11) : votre espace, onglet par onglet. Le même dessin que l'écran Synthèse du bloc animé,
   en grand ; une souris passe d'un onglet à l'autre (demo-app.js). Les légendes dessous sont de vrais boutons. --- */
.ed-tete { display: grid; gap: 1.1rem; margin-bottom: clamp(1.6rem, 4vw, 2.8rem); }
.ed-tete h2 { max-width: 20ch; }
@media (min-width: 900px) { .ed-tete { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; column-gap: clamp(2rem, 5vw, 5rem); } }
.ed-ecran { container-type: inline-size; max-width: 70rem; padding: clamp(.5rem, 2vw, 1.6rem); background: var(--color-bleu-voile); }
.app-espace { height: auto; aspect-ratio: 16 / 10; font-size: clamp(9px, 1.32cqi, 15px); }
.app-espace .app-tuiles li { cursor: pointer; }
.app-espace .app-tuiles li:not(.on) b { color: var(--color-encre); }
.app-espace .ed-panneau { visibility: hidden; }
.app-espace:not([data-ed-onglet]) [data-ed-panneau="synthese"],
.app-espace[data-ed-onglet="synthese"] [data-ed-panneau="synthese"],
.app-espace[data-ed-onglet="dossier"] [data-ed-panneau="dossier"],
.app-espace[data-ed-onglet="negociation"] [data-ed-panneau="negociation"] { visibility: visible; }
.ed-panneau { position: absolute; inset: 0; }
.e-segments i.f { background: var(--color-jaune); box-shadow: none; }
.ed-souris { width: 1.35em; }
/* le dossier */
.d2 { display: flex; flex-direction: column; gap: .7em; padding-bottom: .95em; }
.d2-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.d2-titre { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: 1.55em; letter-spacing: -0.035em; line-height: 1.05; }
.d2-sous { margin-top: .25em; font-size: .78em; color: var(--color-galet); }
.d2-grille { flex: 1 1 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .55em; min-height: 0; }
.d2-carte { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .3em; min-height: 0; padding: .8em .95em; overflow: hidden; background: var(--color-blanc); }
.d2-pages { position: absolute; top: .9em; left: 1em; display: flex; }
.d2-pages img { display: block; width: 3.9em; height: auto; box-shadow: 0 .3em .7em -.25em rgb(0 0 0 / .45); transform: rotate(-4deg); }
.d2-pages img + img { margin-left: -1.6em; margin-top: .5em; transform: rotate(5deg); }
.d2-chiffre { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: 1.35em; letter-spacing: -0.03em; line-height: 1.05; }
.d2-texte { font-size: .74em; line-height: 1.35; opacity: .88; }
.d2-lien { margin-top: .2em; font-size: .74em; font-weight: 700; }
.d2-noir { background: var(--color-encre); color: var(--color-blanc); }
.d2-noir .a-sur, .d2-nuit .a-sur { color: var(--color-jaune); }
.d2-bleu { background: var(--color-bleu); color: var(--color-blanc); }
.d2-bleu .a-sur { color: var(--color-bleu-clair); }
.d2-voile { background: var(--color-bleu-clair); }
.d2-jaune { background: var(--color-jaune); box-shadow: inset 0 0 0 2px var(--color-encre); }
.d2-jaune .a-sur { color: var(--color-encre); }
.d2-nuit { background: var(--color-bleu-nuit); color: var(--color-blanc); }
.d2-carte.vif { outline: 3px solid var(--color-bleu); outline-offset: -3px; }
/* la négociation */
.n2 { display: flex; flex-direction: column; gap: .6em; padding-bottom: .95em; }
.n2-bandeau { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65em 1.2em; padding: .85em 1em .9em; background: var(--color-bleu-nuit); color: var(--color-blanc); }
.n2-bandeau .a-sur { color: var(--color-jaune); }
.n2-titre { margin-top: .2em; font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: 1.6em; letter-spacing: -0.04em; line-height: 1; }
.n2-titre em { font-style: italic; color: var(--color-jaune); }
.n2-papier { display: grid; align-self: start; padding: .45em .85em .5em; background: var(--color-jaune); color: var(--color-encre); rotate: -2deg; box-shadow: 0 .5em 1em -.6em rgb(0 0 0 / .5); }
.app .n2-papier s { filter: none; text-decoration: line-through; color: var(--color-galet); font-size: .74em; }
.n2-papier b { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: 1.5em; letter-spacing: -0.04em; line-height: 1; }
.n2-papier small { font-size: .62em; font-weight: 700; }
.n2-etapes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3em; }
.n2-etapes li { display: grid; gap: .1em; min-width: 0; padding: .4em .45em; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); font-size: .72em; }
.n2-etapes i { font-size: 1.3em; font-style: normal; font-weight: 800; }
.n2-etapes b { overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.n2-etapes .fait { background: var(--color-blanc); color: var(--color-encre); box-shadow: none; }
.n2-etapes .fait i::before { content: "✓ "; }
.n2-etapes .on { background: var(--color-jaune); color: var(--color-encre); box-shadow: none; }
.n2-corps { flex: 1 1 0; display: grid; grid-template-columns: minmax(0, 1fr) 14.5em; gap: .6em; min-height: 0; }
.n2-fiche { display: flex; flex-direction: column; gap: .45em; min-height: 0; padding: .85em .95em; overflow: hidden; background: var(--color-blanc); }
.n2-q { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: 1.2em; letter-spacing: -0.03em; }
.n2-pile { flex: 1; min-height: 0; align-items: start; }
.n2-etat { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: 1.3em; letter-spacing: -0.03em; line-height: 1.05; }
.n2-conseil { display: grid; gap: .25em; padding: .6em .75em; background: var(--color-jaune); font-size: .84em; rotate: -.6deg; }
.n2-conseil .a-sur { color: var(--color-encre); }
.n2-cartes-t { margin-top: .3em; }
.n2-cartes { display: flex; flex-wrap: wrap; gap: .3em; }
.n2-cartes span { padding: .35em .5em; background: var(--color-bleu-nuit); color: var(--color-blanc); font-size: .88em; font-weight: 700; }
.n2-cartes .b { background: var(--color-blanc); color: var(--color-encre); box-shadow: inset 0 0 0 1.5px var(--color-encre); }
.n2-choisir { display: grid; align-content: start; gap: .6em; visibility: hidden; }
.n2-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4em; }
.n2-choix li { display: grid; gap: .15em; padding: .55em .7em; border-left: 3px solid var(--color-bleu); background: var(--color-pierre); font-size: .82em; }
.n2-choix li:first-child { border-left-color: var(--color-jaune); }
.n2-choix small { color: var(--color-galet); font-size: .86em; }
.n2-choix li.choisi { background: var(--color-encre); color: var(--color-blanc); }
.n2-choix li.choisi small { color: var(--color-galet-clair); }
.n2-prix { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; }
.n2-champ { display: flex; align-items: center; min-width: 8.5em; min-height: 2.4em; padding: .3em .7em; background: var(--color-blanc); box-shadow: inset 0 0 0 2px var(--color-encre); font-weight: 600; }
.n2-reponse { display: grid; align-content: start; gap: .55em; padding: .85em .95em; background: var(--color-bleu-nuit); color: var(--color-blanc); font-size: .9em; }
.n2-r-titre { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: 1.5em; letter-spacing: -0.035em; line-height: 1.05; }
.n2-r-titre em { font-style: italic; color: var(--color-jaune); }
.n2-dire { display: grid; gap: .3em; padding: .6em .75em; background: var(--color-jaune); color: var(--color-encre); font-weight: 600; }
.n2-dire .a-sur { color: var(--color-encre); }
.n2-prixliste { display: grid; align-content: start; gap: .5em; padding: .85em .95em; background: var(--color-blanc); font-size: .86em; }
.n2-prixliste dl { display: grid; gap: .25em; margin: 0; }
.n2-prixliste dl div { display: flex; justify-content: space-between; gap: .6em; padding: .45em .6em; background: var(--color-pierre); font-weight: 700; }
.n2-prixliste dd { margin: 0; white-space: nowrap; }
.n2-prixliste .jaune { background: var(--color-jaune); }
.n2-prixliste .nuit { background: var(--color-encre); color: var(--color-blanc); }
.n2-prixliste .vif { box-shadow: inset 0 0 0 2px var(--color-bleu); background: var(--color-bleu-voile); }
/* les légendes : trois vrais boutons */
.ed-legendes { display: grid; gap: clamp(1rem, 2.4vw, 2rem); max-width: 70rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ed-legendes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ed-legendes button { display: grid; gap: .35rem; width: 100%; padding: 0 0 .2rem; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ed-legendes button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.ed-barre { display: block; height: 4px; margin-bottom: .55rem; overflow: hidden; background: var(--color-trait); }
.ed-barre i { display: block; height: 100%; background: var(--color-bleu); transform: scaleX(0); transform-origin: left center; }
.ed-legendes [aria-pressed="true"] .ed-barre i { transform: scaleX(1); }
.ed-legendes b { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: 1.3rem; letter-spacing: -0.03em; }
.ed-legendes button > span:last-child { color: var(--p2); line-height: 1.45; }
.ed-legendes [aria-pressed="true"] > span:last-child { color: var(--pt); }
.ed-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; margin-top: clamp(1.4rem, 3vw, 2rem); }
.ed-exemple { font-size: var(--text-petit); color: var(--p2); }
@container (max-width: 470px) {
  .app-espace { aspect-ratio: 3 / 4.3; }
  .app-espace .app-pdf { display: none; }
  .d2-tete .a-btn, .d2-sous, .d2-texte, .d2-lien { display: none; }
  .d2-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .d2-pages img { width: 3.2em; }
  .n2-papier, .n2-etapes b, .n2-prixliste, .n2-choix small, .n2-conseil { display: none; }
  .n2-corps { grid-template-columns: minmax(0, 1fr); }
  .n2-choix { grid-template-columns: minmax(0, 1fr); }
  .n2-etapes li { place-items: center; }
}