/* Bailin — landing publique.
 *
 * Feuille autonome : elle ne réutilise PAS style.css (dont le `body { display:flex;
 * height:100vh; overflow:hidden }` empêcherait la page de défiler). Les jetons du
 * design system « Vert notarial » sont redéclarés à l’identique — aucune couleur
 * nouvelle. Fraunces pour les titres et gros chiffres, Public Sans pour le corps.
 *
 * Direction artistique unique pour toute la page :
 *   — icônes : un seul jeu (tracés Lucide), grille 24, trait 2, bouts arrondis,
 *     en `currentColor` ; le sprite est inséré en ligne dans landing.html ;
 *   — visuels produit : plus aucune capture d’écran. Chaque rubrique et chaque
 *     étape du parcours est expliquée par une scène animée en HTML + CSS
 *     (préfixe `.sc-`), nette à toute densité, sans poids d’image, responsive
 *     par construction, et figée dans son état final si le visiteur a demandé
 *     moins d’animations ;
 *   — rythme : sections `--papier` et `.section-alt` `--surface2` en alternance,
 *     coupées par la section sombre « Banque automatique ».
 */

/* ═══ POLICES AUTO-HÉBERGÉES ═══════════════════════════════════════════════
   Servies depuis notre domaine, jamais depuis Google Fonts : le site affirme
   un hébergement français et la conformité RGPD, et un appel à
   fonts.gstatic.com transmet l’adresse IP du visiteur avant tout consentement.

   Deux fontes variables, sous-ensemblées au jeu latin et à la ponctuation
   française (guillemets, apostrophe typographique, tirets, €, signe moins) —
   32 Ko et 84 Ko au total. Recette dans static/polices/LISEZMOI.md.

   Montserrat porte tout. Archivo est réservée aux CHIFFRES HÉROS : Montserrat
   y est trop large et couperait les montants. Les deux ont de vrais chiffres
   tabulaires (`tnum`), retenus au sous-ensemblage.
   ═════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Montserrat';src:url('/static/polices/montserrat.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('/static/polices/archivo.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}

:root {
  --vert-bouteille: #17402F;
  --vert-profond:   #0B2719;
  --vert-pale:      #E2ECE6;
  --vert-clair:     #72B190;
  --papier:         #F4F6F4;
  --blanc:          #FFFFFF;
  --encre:          #14181A;
  --encre-douce:    #545C58;
  /* 4,54:1 sur --vert-pale, 5,05:1 sur --papier. Était #6F7772 : 4,24:1 sur
     papier et 3,81:1 sur les aplats verts, donc sous le seuil AA de 4,5:1 sur
     les deux fonds, pour environ 140 usages. Assombri du strict nécessaire —
     la teinte et le rôle ne changent pas (audit RGAA du 14/09/2026, B4). */
  --encre-legere:   #636B66;
  /* 4,58:1 sur --vert-pale, 5,10:1 sur --papier. Était #B8590C : 4,32:1 et
     3,88:1, sous le seuil AA sur les deux fonds. L'orange reste orange : seule
     la luminance descend, du strict nécessaire (audit RGAA, B5). */
  --accent:         #A7500A;
  --attention:      #8F3D05;
  --attention-dark: #6E2F04;
  --danger:         #C1121F;
  --info:           #12508C;
  --surface2:       #EDF0EE;
  --border:         #DCE2DE;
  --filet-vert:     #C9D8CF;   /* filet sur fond vert pâle */
  --filet-rouge:    #F0D0CD;   /* filet sur fond rouge pâle */

  /* Teintes de contenu sur fond vert (5,6:1 et plus). */
  --sur-vert:       #B4CCC0;
  --sur-vert-faible:#8FBFA6;
  --border-sombre:  rgba(226, 236, 230, 0.16);

  --radius-card:  0;
  --radius-btn:   0;
  --radius-badge: 0;

  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-num: 'Archivo', 'Montserrat', sans-serif;

  --max: 1160px;
  /* La largeur de rendu « ordinateur » de la maquette du héros. Elle était
     employée avec une valeur de repli et JAMAIS déclarée : le repli faisait
     seul la loi, et le commentaire de landing.js affirmait le contraire. */
  --ec-largeur-pc: 790px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  color: var(--encre);
  background: var(--papier);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
sup { font-size: 0.7em; line-height: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* La nav collante décalerait les ancres : on réserve sa hauteur. */
[id] { scroll-margin-top: 84px; }

/* ── Icônes ───────────────────────────────────────────────────────────────────
   Le sprite est un <svg> hors flux ; les symboles ne portent aucun attribut de
   trait, tout est piloté ici pour garantir une graisse identique partout. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 1em; height: 1em; flex-shrink: 0;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.135em;
}

/* Wordmark commun à la nav et au pied de page. */
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--vert-bouteille);
}
.wordmark::after { content: '.'; color: var(--accent); font-weight: 700; }

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  padding: 11px 20px; border-radius: 0;
  cursor: pointer; border: 1px solid transparent;
  white-space: nowrap;
}
/* Plat, vert au repos pour l'action principale. Aucun relief au survol :
   la transition est celle de tout le site (voir « Une seule transition
   d'interaction, partout »). */
.btn-primary { background: var(--vert-bouteille); color: var(--papier); border-color: var(--vert-bouteille); }
/* (son survol et son appui : « UN VERT FONCÉ INTERACTIF S'ÉCLAIRCIT », en fin de fichier) */
.btn-secondary { background: transparent; color: var(--encre); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--vert-bouteille); color: var(--vert-bouteille); background: transparent; }
.btn-ghost { color: var(--encre-douce); padding: 11px 12px; }
.btn-ghost:hover { color: var(--vert-bouteille); }
/* Couleurs inversées du bouton « Essayer » (primaire) : fond clair, texte et
   liseré verts ; au survol, il se remplit. */
.btn-inverse { background: var(--papier); color: var(--vert-bouteille); border-color: var(--vert-bouteille); }
.btn-inverse:hover { background: var(--vert-bouteille); color: var(--papier); }
.btn-lg { font-size: 16px; padding: 14px 26px; }
:where(a, summary, details):focus-visible {
  outline: 2px solid var(--vert-bouteille);
  outline-offset: 3px;
  border-radius: 0;
}

/* ── En-tête / navigation ─────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 246, 244, 0.88);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.nav .wordmark { font-size: 26px; }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a.nav-link { color: var(--encre-douce); font-weight: 500; font-size: 15px; padding: 8px 12px; border-radius: 0; }
.nav-links a.nav-link:hover { color: var(--vert-bouteille); }
.nav-burger { display: none; }

/* ── Héros ────────────────────────────────────────────────────────────────── */
.hero { padding: 64px 0 48px; }

/* Deux colonnes : la promesse à gauche, le logiciel à droite. La colonne de
   droite est la plus large — c’est une reconstitution d’interface, elle a
   besoin de place pour rester lisible, là où le texte gagne à ne pas s’étaler.
   `align-items: center` plutôt que `start` : les deux blocs n’ont pas la même
   hauteur, et aligner par le haut laissait le texte flotter tout en haut d’une
   colonne vide. */
.hero-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.42fr);
  gap: 48px;
  align-items: center;
  /* Plus large que le reste de la page : la reconstitution d’interface a
     besoin de place, faute de quoi ses libellés se coupent — « Appartement
     Hauss… », « Thoma… » — et la démonstration se retourne contre elle. */
  max-width: 1320px;
}
.hero-texte { text-align: left; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  /* Taille calée sur la COLONNE, pas sur la fenêtre : en deux colonnes le
     titre dispose d’environ 430 px, où 72 px le cassaient en quatre lignes.
     Il retrouve sa pleine taille sous 1000 px, quand la page se remet sur une
     seule colonne. */
  font-size: clamp(36px, 3.8vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--vert-bouteille);
  text-wrap: balance;
}
/* Deux niveaux sous le titre : l’accroche porte l’argument, le paragraphe
   l’explique. Une seule taille pour les deux revenait à ne rien hiérarchiser —
   le lecteur qui ne lit qu’une ligne doit tomber sur la bonne. */
/* Sous-ligne du héros en SANS-SERIF (Jean, 25/08/2026). Deux réglages suivent
   ce changement : la graisse passe de 600 à 500, et l’approche de -0,015em à
   -0,005em. Ils étaient calés sur une serif de titre, où le resserrement
   compense les empattements ; appliqués à Public Sans ils alourdiraient et
   comprimeraient la ligne. */
.hero .sous-fort {
  max-width: 30ch; margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: clamp(19px, 2.6vw, 26px); font-weight: 700; line-height: 1.25;
  letter-spacing: -0.02em; color: var(--encre); text-wrap: balance;
}
.hero .sous {
  max-width: 620px; margin: 14px 0 0;
  font-size: clamp(15px, 1.7vw, 16.5px);
  color: var(--encre-douce);
  text-wrap: pretty;
}
.hero-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* ── L’écran d’accueil, en tête de page ───────────────────────────────────────
   Une RECONSTITUTION en HTML, pas une capture d’écran. Elle reste nette à
   toutes les résolutions, se replie sur téléphone, se lit à la synthèse
   vocale — et surtout, elle ne montre les données d’aucun bailleur réel, là
   où une vraie capture supposerait de flouter un logement, un nom et un
   montant, ou d’en inventer dans un compte de démonstration.
   Chiffres et libellés reprennent ceux des autres scènes de la page : le même
   parc de trois biens, les mêmes locataires. */
.hero-ecran { margin: 0; max-width: none; padding: 0 2px; }
.ec-cadre {
  background: var(--papier); border: 1px solid var(--border);
  border-radius: 0; overflow: hidden; text-align: left;
  box-shadow: 0 40px 80px -40px rgba(12, 42, 30, 0.42),
              0 4px 14px -6px rgba(12, 42, 30, 0.10);
}
.ec-barre {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.ec-barre i { width: 9px; height: 9px; border-radius: 0; background: var(--border); }
.ec-barre span {
  margin-left: 10px; font-size: 11px; color: var(--encre-legere);
  background: var(--blanc); border: 1px solid var(--border);
  border-radius: 0; padding: 3px 12px;
}
.ec-corps { display: grid; grid-template-columns: 176px minmax(0, 1fr); }

/* Menu latéral */
.ec-nav {
  background: var(--vert-bouteille); color: var(--sur-vert);
  padding: 16px 12px; display: flex; flex-direction: column; gap: 1px;
}
.ec-marque {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  color: var(--papier); padding: 0 8px 14px;
}
.ec-marque b { color: var(--vert-clair); }
.ec-nav-titre {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sur-vert-faible); padding: 12px 8px 5px;
}
.ec-nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 0; font-size: 12.5px; color: var(--sur-vert);
}
.ec-nav a .ico { font-size: 15px; }
.ec-nav .ec-actif { background: rgba(232, 240, 235, 0.14); color: var(--papier); font-weight: 600; }
.ec-pastille {
  margin-left: auto; background: var(--danger); color: #fff;
  font-size: 9.5px; font-weight: 700; border-radius: 0; padding: 1px 6px;
}

/* Page */
.ec-page { padding: 18px 20px 22px; min-width: 0; }
.ec-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ec-titre { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--encre); }
.ec-date { font-size: 11.5px; color: var(--encre-legere); margin-top: 2px; }
.ec-actions { display: flex; gap: 7px; flex-shrink: 0; }
.ec-btn {
  font-size: 11px; font-weight: 600; color: var(--encre); background: var(--blanc);
  border: 1px solid var(--border); border-radius: 0; padding: 6px 11px; white-space: nowrap;
}
.ec-btn-plein { background: var(--vert-bouteille); color: var(--papier); border-color: var(--vert-profond); }
.ec-cloche { position: relative; display: flex; align-items: center; padding: 6px 8px; }
.ec-cloche .ico { font-size: 14px; }
.ec-point {
  position: absolute; top: 4px; right: 5px;
  width: 6px; height: 6px; border-radius: 0; background: var(--danger);
}

/* Indicateurs */
.ec-kpis {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin-top: 16px;
}
.ec-kpis li {
  background: var(--blanc); border: 1px solid var(--border);
  border-radius: 0; padding: 11px 12px;
}
.ec-kpis span { display: block; font-size: 10.5px; color: var(--encre-legere); font-weight: 600; }
.ec-kpis b {
  display: block; margin-top: 4px;
  font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--encre);
}
.ec-kpis b small { font-size: 12px; color: var(--encre-legere); font-weight: 400; }
.ec-kpis em { font-style: normal; font-size: 10.5px; color: var(--encre-legere); }
.ec-kpi-alerte { border-color: var(--filet-rouge); background: var(--danger-light); }
.ec-kpi-alerte b, .ec-kpi-alerte em { color: var(--danger); }

/* Deux cartes */
.ec-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.ec-carte { background: var(--blanc); border: 1px solid var(--border); border-radius: 0; padding: 13px 14px; }
.ec-carte-titre {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--encre-legere); padding-bottom: 9px; border-bottom: 1px solid var(--border);
}
.ec-lien { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--vert-bouteille); }
.ec-carte ul { list-style: none; }
.ec-carte li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--encre);
}
.ec-carte li:last-child { border-bottom: none; padding-bottom: 0; }
.ec-carte li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-paiements b { font-variant-numeric: tabular-nums; font-weight: 600; }
.ec-dpe, .ec-etat {
  font-style: normal; font-size: 10px; font-weight: 700;
  border-radius: 0; padding: 2px 7px; flex-shrink: 0;
}
.ec-dpe-f { background: var(--danger-light); color: var(--danger); }
.ec-dpe-c { background: var(--attention-light); color: var(--attention-dark); }
.ec-dpe-b { background: var(--vert-pale); color: var(--vert-bouteille); }
.ec-recu { background: var(--vert-pale); color: var(--vert-bouteille); }
.ec-retard { background: var(--danger-light); color: var(--danger); }

/* Histogramme */
.ec-graphe-carte { margin-top: 12px; }
.ec-graphe {
  list-style: none; display: flex; align-items: flex-end; gap: 6px;
  height: 74px; margin-top: 12px;
}
.ec-graphe li {
  flex: 1; height: var(--h); border-radius: 0;
  background: var(--vert-pale); border-bottom: 2px solid var(--filet-vert);
  /* Les barres montent à l’arrivée, l’une après l’autre. C’est le seul
     mouvement du héros : il donne à la reconstitution l’air d’un logiciel qui
     tourne plutôt que d’une image, sans rien faire bouger sous le curseur du
     lecteur. Origine en bas — un histogramme pousse depuis son axe. */
  transform-origin: bottom;
  animation: pousse-barre 0.62s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.ec-graphe li:nth-child(1)  { animation-delay: 0.12s }
.ec-graphe li:nth-child(2)  { animation-delay: 0.17s }
.ec-graphe li:nth-child(3)  { animation-delay: 0.21s }
.ec-graphe li:nth-child(4)  { animation-delay: 0.26s }
.ec-graphe li:nth-child(5)  { animation-delay: 0.3s }
.ec-graphe li:nth-child(6)  { animation-delay: 0.35s }
.ec-graphe li:nth-child(7)  { animation-delay: 0.39s }
.ec-graphe li:nth-child(8)  { animation-delay: 0.43s }
.ec-graphe li:nth-child(9)  { animation-delay: 0.48s }
.ec-graphe li:nth-child(10) { animation-delay: 0.52s }
.ec-graphe li:nth-child(11) { animation-delay: 0.57s }
.ec-graphe li:nth-child(12) { animation-delay: 0.61s }
@keyframes pousse-barre { from { transform: scaleY(0.04); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .ec-graphe li { animation: none } }
.ec-graphe .ec-barre-vive { background: var(--vert-bouteille); border-bottom-color: var(--vert-profond); }

/* Sous 900 px, un écran de bureau réduit devient illisible : on garde la page
   et on retire le menu latéral, qui n’apporte rien une fois tassé à 60 px. */
/* SUR TÉLÉPHONE, LA MAQUETTE EST RÉDUITE, JAMAIS RÉAGENCÉE.
   Elle l’était : le menu latéral passait en `display: none`, les indicateurs
   sur deux colonnes, la moitié des boutons disparaissait. On y perdait
   exactement ce que la page cherche à montrer — le menu principal — et le
   visiteur sur téléphone, qui est le plus nombreux, ne voyait pas la même
   application que celui sur ordinateur.

   Elle se comporte donc comme une capture d’écran : même disposition, même
   proportions, à l’échelle. `transform` ne réserve aucune place dans le flux,
   d’où la hauteur posée sur l’enveloppe ; les deux valeurs sont calculées à la
   volée dans landing.html, la largeur disponible n’étant pas connue d’avance.

   Ce que cela coûte, et c’est assumé : sur un écran de 390 px la maquette rend
   à environ 43 %, taille où ses libellés se lisent comme un dessin plutôt que
   comme du texte. C’est le prix d’une image identique partout. */
@media (max-width: 900px) {
  /* Pas d'`overflow: hidden` ici : il couperait l’ombre portée de la maquette,
     qui déborde volontairement de sa boîte. L’échelle étant calculée sur la
     boîte de contenu, rien ne dépasse horizontalement de toute façon. */
  .hero-ecran { margin-top: 36px; }
}

/* ── Cadre commun des visuels produit ─────────────────────────────────────────
   Une seule enveloppe pour tout ce qui montre l’application : capture bitmap ou
   reconstitution vectorielle. C’est ce qui tient la cohérence d’une section à
   l’autre — même liseré, même rayon, même ombre, même barre de titre. */

/* ── Bandeau de réassurance ───────────────────────────────────────────────── */
.reassurance { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--blanc); }
.reassurance ul {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 34px; padding: 18px 24px; font-size: 14px; color: var(--encre-douce);
}
.reassurance li { display: flex; align-items: center; gap: 8px; }
/* Sa puce est celle de tout le site : voir « 4. LE MARQUEUR DE LISTE ». */

/* ── Titres de section ────────────────────────────────────────────────────── */
.section { padding: 88px 0; }
.section-alt { background: var(--surface2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-tag {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--attention-dark); text-align: center;
}
.section-tag-clair { color: var(--accent); text-align: left; }
.section-titre {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.015em;
  color: var(--vert-bouteille); text-align: center; margin-top: 10px;
  text-wrap: balance;
}
.section-intro { max-width: 640px; margin: 14px auto 0; text-align: center; color: var(--encre-douce); text-wrap: pretty; }

/* ── Reconstitutions d’interface (vectorielles) ───────────────────────────────
   Fragments d’écran redessinés en HTML/CSS plutôt qu’en capture : nets à toute
   densité, sans poids d’image, et strictement sur la palette. Ils reprennent
   les typographies de l’application (Fraunces pour les montants, chiffres
   tabulaires pour les colonnes). */
.ui {
  background: var(--blanc); border: 1px solid var(--border);
  border-radius: 0; padding: 18px;
  font-size: 14px;
}

.ui-entete { display: flex; align-items: center; gap: 10px; }
.ui-entete-ico { font-size: 18px; color: var(--vert-bouteille); }
.ui-fichier { font-weight: 600; color: var(--encre); font-size: 14.5px; flex: 1; min-width: 0; }

.pastille {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em;
  padding: 4px 9px; border-radius: 0; white-space: nowrap;
}
.pastille .ico { font-size: 13px; }
.pastille-live { background: rgba(232, 240, 235, 0.14); color: var(--sur-vert); }
.pastille-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 0;
  background: var(--accent);
}

/* Lignes d’opérations bancaires. */
.ui-lignes { list-style: none; margin-top: 14px; border-top: 1px solid var(--border); }
.ui-lignes li {
  display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.ui-lignes li:last-child { border-bottom: none; }
.ui-date { color: var(--encre-legere); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-lib { color: var(--encre-douce); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-mnt { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--encre); }
.ui-mnt-plus { color: var(--vert-bouteille); }
/* Ligne « conséquence » : ce que le logiciel a déduit de l’opération du dessus. */
.ui-ligne-lie { border-bottom: none; padding-top: 0; }
.ui-ligne-lie .ui-lib {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--vert-bouteille);
  padding-left: 2px;
  /* `display:flex` neutralise le text-overflow hérité de .ui-lib : sans ce
     retour à la ligne, le libellé déborderait de la carte en petite largeur. */
  white-space: normal; overflow: visible; text-overflow: clip;
  line-height: 1.35;
}
.ui-ligne-lie .ico { font-size: 14px; margin-top: 1px; }
.ui-ligne-alerte .ui-lib { color: var(--danger); }

/* Déclinaison sombre, pour la section Banque. */
.ui-sombre {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-sombre);
}
.ui-sombre .ui-entete-ico { color: var(--vert-clair); }
.ui-sombre .ui-fichier { color: var(--papier); }
.ui-sombre .ui-lignes,
.ui-sombre .ui-lignes li { border-color: var(--border-sombre); }
.ui-sombre .ui-date { color: var(--sur-vert-faible); }
.ui-sombre .ui-lib { color: var(--sur-vert); }
.ui-sombre .ui-mnt { color: var(--papier); }
.ui-sombre .ui-mnt-plus { color: var(--vert-clair); }
.ui-sombre .ui-ligne-lie .ui-lib { color: var(--vert-clair); }
.ui-sombre .ui-ligne-alerte .ui-lib { color: var(--danger); }

/* ── Parcours en 5 étapes ─────────────────────────────────────────────────────
   Timeline verticale : un rail continu relie les pastilles, chaque étape pose
   son texte à gauche et sa reconstitution d’écran à droite. En dessous de
   900 px, le rail passe à gauche et tout s’empile. */
.parcours { list-style: none; margin-top: 64px; }
.etape {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 0 40px;
  padding-bottom: 56px;
}
/* L’étape de confirmation : pas de scène, moins d’air, texte resserré. Le
   bailleur n’y fait rien — lui donner la hauteur des deux étapes où il agit
   diluait précisément ce qui distingue Bailin. */
.etape-mince { padding-bottom: 34px; }
.etape-mince .etape-texte {
  grid-column: 2 / -1;
  background: var(--vert-pale); border-radius: 0;
  padding: 16px 22px;
}
.etape-mince .etape-texte h3 { font-size: 18px; margin-top: 2px; }
.etape-mince .etape-texte > p:last-child { font-size: 15px; }
.etape-mince .etape-pastille { width: 38px; height: 38px; }
.etape-mince .etape-pastille .ico { font-size: 17px; }

.etape:last-child { padding-bottom: 0; }

.etape-rail { position: relative; display: flex; justify-content: center; }
.etape-pastille {
  position: relative; z-index: 1;
  width: 46px; height: 46px; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vert-bouteille); color: var(--papier);
  border: 4px solid var(--papier);
  box-shadow: 0 0 0 1px var(--border);
}
.etape-pastille .ico { font-size: 20px; }
/* Trait de liaison entre deux pastilles. */
.etape-rail::after {
  content: ''; position: absolute; top: 46px; bottom: -56px; left: 50%;
  width: 2px; margin-left: -1px; background: var(--border);
}
.etape:last-child .etape-rail::after { display: none; }

.etape-texte { padding-top: 4px; }
/* Le numéro d'étape : voir « Numéro d'étape et titre », une seule définition. */
.etape-texte h3 {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(23px, 2.6vw, 29px); line-height: 1.14; letter-spacing: -0.02em;
  color: var(--vert-bouteille); margin: 6px 0 14px;
}
.etape-texte > p:last-child { color: var(--encre-douce); font-size: 16.5px; text-wrap: pretty; }

.etape-visuel { display: flex; align-items: flex-start; min-width: 0; }

/* ── Banque automatique (section sombre) ──────────────────────────────────── */
.banque { background: var(--vert-bouteille); color: var(--papier); padding: 88px 0; }
.banque-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 56px; align-items: center; }
.banque h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(27px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -0.015em;
  color: var(--papier); margin-top: 10px;
  text-wrap: balance;
}
.banque-intro { margin-top: 18px; color: var(--sur-vert); font-size: 17px; text-wrap: pretty; }
.banque-points { list-style: none; margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.banque-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--sur-vert); line-height: 1.5; }
.banque-points .ico { font-size: 19px; color: var(--vert-clair); margin-top: 2px; }
.banque-points b { color: var(--papier); font-weight: 600; }

/* ── Surveillance continue ────────────────────────────────────────────────── */
.veilles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.veille {
  background: var(--blanc); border: 1px solid var(--border);
  border-radius: 0; padding: 20px;
  border-top: 3px solid var(--encre-legere);
  display: flex; flex-direction: column;
  transition: box-shadow 0.15s, transform 0.15s;
}
.veille:hover { box-shadow: 0 14px 30px -20px rgba(12, 42, 30, 0.28); }
@media (prefers-reduced-motion: no-preference) { .veille:hover { transform: translateY(-2px); } }
.veille-tete { display: flex; align-items: center; gap: 9px; }
.veille-tete .ico { font-size: 19px; }
.veille-tete h3 { font-size: 15.5px; font-weight: 600; color: var(--encre); }
/* Le texte de l’alerte telle qu’elle est poussée, en italique de labeur. */
.veille-alerte {
  margin-top: 12px; flex: 1;
  font-size: 14px; line-height: 1.5; color: var(--encre-douce);
  font-style: italic;
}
.veille-action {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12.5px; font-weight: 600; color: var(--vert-bouteille); line-height: 1.4;
}
.veille-action .ico { font-size: 15px; margin-top: 1px; }

/* Deux veilles décident un bailleur : le loyer qui n’arrive pas, et l’amende
   de 5 000 € sur l’encadrement. En grille homogène, elles pesaient autant
   qu’un rappel de diagnostic. Elles occupent désormais deux colonnes, sur la
   première rangée, avec un fond teinté. */
.veille-phare {
  grid-column: span 2;
  background: var(--danger-light); border-color: var(--filet-rouge);
}
.veille-phare .veille-tete h3 { font-size: 17px; }
.veille-phare .veille-alerte { font-size: 15px; }
.veille-phare .veille-tete .ico { font-size: 22px; }

/* Le filet d'état d'une alerte : une seule définition, dans « 1. LE FILET
   D'ÉTAT ». Ici, ce qui ne relève que de la carte. */

/* Huitième case : referme la grille sur la promesse plutôt que sur un vide. */
.veille-final {
  background: var(--vert-pale); border-color: var(--filet-vert); border-top-color: var(--accent);
  justify-content: center; align-items: flex-start; gap: 16px;
}
.veille-final p { font-size: 14.5px; color: var(--vert-bouteille); line-height: 1.5; }
.veille-final .btn { width: 100%; justify-content: center; }

/* ── Scènes du parcours ───────────────────────────────────────────────────────
   Même contrat que les scènes des rubriques : boucle de 12 s, aucun
   JavaScript, et arrêt sur l’état final si le visiteur demande moins
   d’animations. Chaque étape doit se comprendre à l’image seule. */

/* ── Étape 1 : les deux façons d’ouvrir un dossier ──────────────────────────
   Les deux voies coexistent à l’écran ; l’animation éclaire l’une puis
   l’autre, pour dire « au choix » plutôt que « d’abord ceci, puis cela ». */
.sc-voies { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sc-voie {
  position: relative; min-height: 190px;
  display: flex; flex-direction: column;
  background: var(--papier); border: 1px solid var(--border);
  border-radius: 0; padding: 12px;
}
.sc-voie-titre {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--encre-legere); margin-bottom: 12px;
}
.sc-voie-titre .ico { font-size: 15px; color: var(--vert-bouteille); }
.scene-bail .sc-voie-import   { animation: sc-voie-a 9s linear infinite; }
.scene-bail .sc-voie-generer  { animation: sc-voie-b 9s linear infinite; }

/* Voie « importer » : le fichier tombe dans la zone de dépôt, puis l’IA le lit. */
.sc-zone {
  display: block; height: 46px; border-radius: 0;
  border: 1.5px dashed var(--filet-vert); background: var(--blanc);
}
.sc-fichier {
  position: absolute; left: 12px; right: 12px;
  display: flex; align-items: center; gap: 7px;
  background: var(--blanc); border: 1px solid var(--border);
  border-radius: 0; padding: 8px 10px;
  font-size: 11px; font-weight: 600; color: var(--encre);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 8px 18px -10px rgba(12, 42, 30, 0.35);
  animation: sc-deposer 9s linear infinite;
}
.sc-fichier .ico { font-size: 14px; color: var(--vert-bouteille); }
.sc-lu {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--vert-bouteille);
  background: var(--vert-pale); border-radius: 0; padding: 4px 10px;
  opacity: 0; animation: sc-lu 9s linear infinite;
}
.sc-lu .ico { font-size: 13px; }

/* Voie « générer » : les champs se remplissent, la signature se trace. */
.sc-champs { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.sc-champs li {
  height: 15px; border-radius: 0; background: var(--blanc);
  border: 1px solid var(--border); overflow: hidden;
}
.sc-champs i {
  display: block; height: 100%; width: 0; background: var(--vert-pale);
  animation: sc-remplir-champ 9s linear infinite;
}
.sc-champs li:nth-child(1) i { animation-delay: 4.65s }
.sc-champs li:nth-child(2) i { animation-delay: 4.88s }
.sc-champs li:nth-child(3) i { animation-delay: 5.1s }
.sc-signature {
  display: block; margin-top: 10px; height: 34px;
  color: var(--vert-bouteille);
}
.sc-signature svg { width: 100%; height: 100%; }
.sc-signature path {
  stroke-dasharray: 260; stroke-dashoffset: 260;
  animation: sc-signer 9s linear infinite;
}
.sc-signe {
  margin-top: 10px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--vert-bouteille);
  background: var(--vert-pale); border-radius: 0; padding: 4px 10px;
  opacity: 0; animation: sc-signe 9s linear infinite;
}
.sc-signe .ico { font-size: 13px; }

@keyframes sc-voie-a {
  0%, 42%  { border-color: var(--filet-vert); background: var(--blanc) }
  50%, 96% { border-color: var(--border); background: var(--papier) }
  100%     { border-color: var(--border); background: var(--papier) }
}
@keyframes sc-voie-b {
  0%, 46%  { border-color: var(--border); background: var(--papier) }
  54%, 96% { border-color: var(--filet-vert); background: var(--blanc) }
  100%     { border-color: var(--filet-vert); background: var(--blanc) }
}
@keyframes sc-deposer {
  0%       { opacity: 0; transform: translateY(-26px) scale(0.96) }
  8%       { opacity: 1; transform: translateY(-26px) scale(1) }
  20%, 44% { opacity: 1; transform: translateY(34px) }
  50%, 100% { opacity: 0; transform: translateY(34px) }
}
@keyframes sc-lu {
  0%, 24%  { opacity: 0; transform: translateY(6px) }
  32%, 44% { opacity: 1; transform: none }
  50%, 100% { opacity: 0 }
}
@keyframes sc-remplir-champ {
  0%, 4%   { background-size: 0% 100% }
  12%, 94% { background-size: 100% 100% }
  100%     { background-size: 100% 100% }
}
@keyframes sc-signer {
  0%, 62%  { stroke-dashoffset: 260 }
  76%, 94% { stroke-dashoffset: 0 }
  100%     { stroke-dashoffset: 260 }
}
@keyframes sc-signe {
  0%, 78%  { opacity: 0; transform: translateY(6px) }
  86%, 96% { opacity: 1; transform: none }
  100%     { opacity: 0 }
}

/* ── Étape 2 : les données qui s’inscrivent ─────────────────────────────── */
.sc-champs-lus { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.sc-champs-lus li {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 10px; align-items: center;
  background: var(--papier); border: 1px solid var(--border);
  border-radius: 0; padding: 9px 11px;
  opacity: 0; animation: sc-inscrire 9s linear infinite;
}
.sc-champs-lus li:nth-child(1) { animation-delay: 0.15s }
.sc-champs-lus li:nth-child(2) { animation-delay: 0.83s }
.sc-champs-lus li:nth-child(3) { animation-delay: 1.5s }
.sc-champs-lus li:nth-child(4) { animation-delay: 2.17s }
.sc-cle {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--encre-legere);
}
.sc-val { font-size: 12.5px; color: var(--encre); font-weight: 600; }
.sc-ok { font-size: 15px; color: var(--vert-bouteille); }
.sc-echeancier {
  display: flex; align-items: center; gap: 9px;
  margin-top: 12px; padding: 10px 13px; border-radius: 0;
  background: var(--vert-pale); border: 1px solid var(--filet-vert);
  font-size: 12.5px; color: var(--vert-bouteille);
  opacity: 0; animation: sc-echeancier 9s linear infinite;
}
.sc-echeancier .ico { font-size: 16px; }

@keyframes sc-inscrire {
  0%, 2%   { opacity: 0; transform: translateX(-10px) }
  10%, 92% { opacity: 1; transform: none }
  100%     { opacity: 1; transform: none }
}
@keyframes sc-echeancier {
  0%, 36%  { opacity: 0; transform: translateY(8px) }
  46%, 92% { opacity: 1; transform: none }
  100%     { opacity: 1; transform: none }
}

/* ── Étape 3 : du virement au cash-flow ─────────────────────────────────── */
.scene-chaine .sc-ope {
  background: var(--papier); border: 1px solid var(--border);
  border-radius: 0; padding: 10px 12px;
}
.scene-chaine .sc-ope .ico { font-size: 16px; color: var(--vert-bouteille); }
.sc-arrivee { animation: sc-entrer 9s linear infinite; }
.sc-pointe {
  opacity: 0; animation: sc-apparaitre 9s linear infinite;
  border-color: var(--filet-vert) !important; background: var(--vert-pale) !important;
}
.sc-consequences { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.sc-bloc {
  background: var(--papier); border: 1px solid var(--border);
  border-radius: 0; padding: 10px 12px;
}
.sc-bloc-titre {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--encre-legere); margin-bottom: 6px;
}
.sc-compteur b {
  font-family: var(--font-display); font-size: 20px; color: var(--vert-bouteille);
  font-variant-numeric: tabular-nums;
  opacity: 0; animation: sc-compteur 9s linear infinite;
}
.sc-barres-mini { height: 26px; margin-top: 8px; gap: 4px; }
.sc-trace {
  /* LA LONGUEUR DU TRACÉ, SOURCE UNIQUE. Le chemin « réalisé » mesure ≈ 163,0
     unités du viewBox « 0 0 300 56 » (getTotalLength). En `340` — plus du
     double du chemin — le trait restait invisible le premier quart de la
     boucle, puis se dessinait d'un coup : la longueur du dessin ne
     correspondait pas au chemin. Cette valeur pilote le pointillé de dessin
     partout — ici et dans les keyframes `trace` et `sc-tracer-courbe`. Elle
     reste d'une unité AU-DESSUS de la longueur : plus courte, elle laisserait
     un éclat manquant au bout du tracé fini. */
  --trace-len: 164;
  stroke-dasharray: var(--trace-len); stroke-dashoffset: var(--trace-len);
  animation: sc-tracer-courbe 9s linear infinite;
}
.sc-aire { opacity: 0; animation: sc-aire 9s linear infinite; }

@keyframes sc-compteur {
  0%, 48%  { opacity: 0; transform: translateY(5px) }
  58%, 92% { opacity: 1; transform: none }
  100%     { opacity: 1; transform: none }
}
@keyframes sc-tracer-courbe {
  0%, 50%  { stroke-dashoffset: var(--trace-len) }
  74%, 92% { stroke-dashoffset: 0 }
  100%     { stroke-dashoffset: 0 }
}
@keyframes sc-aire {
  0%, 60%  { opacity: 0 }
  78%, 92% { opacity: 0.10 }
  100%     { opacity: 0.10 }
}

/* Consigne dans la zone de dépôt : elle disparaît quand le bail y tombe —
   c’est le geste qui la remplace. */
.sc-zone {
  display: flex; align-items: center; justify-content: center;
}
.sc-zone em {
  font-style: normal; font-size: 11.5px; font-weight: 600;
  color: var(--encre-legere);
  animation: sc-consigne 9s linear infinite;
}
@keyframes sc-consigne {
  0%, 14%  { opacity: 1 }
  20%, 46% { opacity: 0 }
  52%, 100% { opacity: 1 }
}

/* Champs nommés : le libellé est posé, la barre se remplit à côté. */
.sc-champs li {
  display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: center;
  height: auto; border: 0; background: none; border-radius: 0; overflow: visible;
}
.sc-champs li > span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--encre-legere);
}
.sc-champs i {
  height: 16px; width: 100%; border-radius: 0; box-sizing: border-box;
  border: 1px solid var(--border); background-color: var(--blanc);
  /* Le champ vide reste visible : c’est le REMPLISSAGE qui s’anime, via la
     taille du fond, et non la largeur de la boîte — sinon un champ non
     renseigné disparaît complètement. */
  background-image: linear-gradient(var(--vert-pale), var(--vert-pale));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  animation: sc-remplir-champ 9s linear infinite;
}
.sc-sig-libelle {
  margin-top: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--encre-legere);
}
.sc-signature { margin-top: 2px; }

/* Projection du cash-flow : même tracé, en pointillés, à la suite du réalisé.
   Après la révision IRL le loyer monte : la projection grimpe NETTEMENT plus
   vite que le réalisé — pente moyenne 0,246 contre 0,111 (32/130 contre 18/162
   unités du viewBox), soit 2,2 fois. Avec la cassure à y = 26, la projection
   plafonnait à 23/130 = 0,177 pour un réalisé à 0,167 : +6 %, invisible. La
   cassure descend donc à y = 35 pour laisser à la montée sa hauteur. */
.sc-projection {
  stroke-dasharray: 5 5;
  opacity: 0;
  animation: sc-projeter 9s linear infinite;
}
/* Le repère de révision est dessiné DANS le SVG, sur un sommet de la
   projection. L'enveloppe, la courbe et le repère n'ont chacun
   qu'UNE définition, plus bas (« LE GRAPHE DE CASH-FLOW : UNE HAUTEUR » et
   « LA LÉGENDE DU GRAPHE, ET SES TROIS REPÈRES »). */

/* ── Rubrique « Les revenus » : reçus, en attente, relance, cash-flow ───── */
.sc-loyers { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.sc-loyers li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  background: var(--papier); border: 1px solid var(--border);
  border-radius: 0; padding: 10px 12px; position: relative;
}
.sc-loyers .sc-lib { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-revenus .sc-recu   { animation: sc-encaisser 9s linear infinite; }
.scene-revenus .sc-recu-2 { animation-delay: 0.68s; }
.scene-revenus .sc-recu .sc-etat { animation: sc-apparaitre 9s linear infinite; }
.scene-revenus .sc-recu-2 .sc-etat { animation-delay: 0.68s; }

/* La ligne en attente bascule en retard, puis la relance part. */
.scene-revenus .sc-en-attente { animation: sc-tension 9s linear infinite; animation-delay: 1.2s; }
.sc-encours { background: var(--surface2); color: var(--encre-legere); }
.sc-retard { background: var(--danger-light); color: var(--danger); }
/* La ligne en défaut suit la grille des autres : elle en avait une à elle,
   avec une colonne d'état de 72 px, où « En attente » (82 px) débordait de dix
   pixels — que l'`overflow: hidden` de la scène rognait sans le dire. Les
   trois états qui se relaient occupent la même case, dimensionnée une fois
   pour toutes par `--col-etat`. */
.scene-revenus .sc-en-attente .sc-etat { position: static; }
.scene-revenus .sc-en-attente .sc-encours { animation: sc-etat-1 9s linear infinite; animation-delay: 1.2s; }
.scene-revenus .sc-en-attente .sc-retard  { opacity: 0; animation: sc-etat-2b 9s linear infinite; animation-delay: 1.2s; }

.sc-relance-auto {
  display: flex; align-items: center; gap: 9px;
  margin-top: 10px; padding: 10px 13px; border-radius: 0;
  background: var(--vert-pale); border: 1px solid var(--filet-vert);
  font-size: 12.5px; color: var(--vert-bouteille);
  opacity: 0; animation: sc-relance-auto 9s linear infinite;
}
.sc-relance-auto .ico { font-size: 16px; }

.sc-cashflow {
  margin-top: 12px; padding: 10px 12px;
  background: var(--papier); border: 1px solid var(--border); border-radius: 0;
}
.sc-total {
  font-family: var(--font-display); font-size: 15px; color: var(--vert-bouteille);
  text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums;
  opacity: 0; animation: sc-compteur 9s linear infinite;
}

@keyframes sc-encaisser {
  0%, 6%   { opacity: 0; transform: translateY(-8px) }
  14%, 92% { opacity: 1; transform: none }
  100%     { opacity: 1; transform: none }
}
@keyframes sc-etat-2b {
  0%, 26%  { opacity: 0 }
  34%, 92% { opacity: 1 }
  100%     { opacity: 1 }
}
@keyframes sc-relance-auto {
  0%, 44%  { opacity: 0; transform: translateY(8px) }
  54%, 92% { opacity: 1; transform: none }
  100%     { opacity: 1; transform: none }
}

/* ── Immobilité demandée : état final, sans mouvement ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sc-fichier { opacity: 0; }
  .sc-lu, .sc-signe, .sc-echeancier, .sc-relance-auto, .sc-pointe { opacity: 1; }
  .sc-zone em { opacity: 1; }
  .sc-champs i { background-size: 100% 100%; }
  .sc-projection { opacity: 0.55; }
  .sc-signature path, .sc-trace { stroke-dashoffset: 0; }
  .sc-aire { opacity: 0.10; }
  .sc-champs-lus li { opacity: 1; }
  .sc-compteur b, .sc-total { opacity: 1; }
  .scene-revenus .sc-en-attente .sc-encours { opacity: 0; }
  .scene-revenus .sc-en-attente .sc-retard { opacity: 1; }
}

/* Sous 640 px, les scènes à deux colonnes s’empilent. */
@media (max-width: 640px) {
  .sc-voies, .sc-consequences { grid-template-columns: 1fr; }
  .sc-voie { min-height: 150px; }
}

/* ── Les trois fonctionnalités mises en avant ─────────────────────────────────
   Titre et explication centrés, puis la capture de la catégorie en pleine
   largeur. Les sources font 2 880 px pour un affichage à 1 112 px (≈ @2,6x) :
   ces captures remplacent la vue produit retirée du héros, elles portent donc
   à elles seules la démonstration visuelle. */
/* Chaque rubrique tient sur une ligne : son explication à côté de sa scène,
   et non au-dessus. Empilés, les quatre blocs occupaient 2 800 px — plus du
   quart de la page pour quatre paragraphes. Côte à côte, le lecteur voit d’un
   coup ce qui est dit et ce que ça donne à l’écran.
   Les côtés alternent, pour que l'œil ne descende pas une colonne unique. */
.fonctions { display: flex; flex-direction: column; gap: 44px; margin-top: 44px; }
.fonction {
  min-width: 0; display: grid; gap: 18px 40px; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.fonction:nth-child(even) .fonction-tete { order: 2; }

/* La rubrique fiscale porte l’argument qui convertit — une déclaration déjà
   remplie — et se traitait au même gabarit que les trois autres. Elle prend
   une colonne de scène plus large, un panneau qui la détache du fond, et
   l’alternance des côtés ne s’applique pas à elle. */
.fonction-vedette {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  background: var(--blanc); border: 1px solid var(--border);
  border-radius: 0; padding: 32px; gap: 18px 36px;
  box-shadow: 0 22px 50px -32px rgba(12, 42, 30, 0.28);
}
.fonction-marque {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--vert-bouteille); color: var(--papier);
  padding: 3px 10px; border-radius: 0;
}
.fonction-vedette .fonction-tete h3 { font-size: clamp(25px, 3vw, 32px); }
.fonction-vedette .fonction-tete p { font-size: 17px; }
.fonction-tete { max-width: 560px; margin: 0; text-align: left; }
.fonction-tete h3 {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(23px, 2.8vw, 29px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--vert-bouteille); margin: 6px 0 10px;
}
.fonction-tete h3 .ico { font-size: 23px; color: var(--accent); }
.fonction-tete p { color: var(--encre-douce); font-size: 16.5px; text-wrap: pretty; }

/* ── Scènes animées des rubriques ─────────────────────────────────────────────
   Quatre saynètes en HTML + CSS, une par rubrique, qui racontent le mécanisme
   plutôt que de montrer l’écran. Règles communes :

     — une seule boucle de 12 s par scène, jouée à l’infini, pour que le regard
       puisse rattraper le début sans attendre ;
     — aucune dépendance JavaScript ;
     — sous `prefers-reduced-motion`, toutes les animations sont désactivées et
       les éléments sont figés dans leur état final : la scène reste lisible et
       raconte la même chose, immobile.

   Les couleurs sortent toutes des jetons du design system — aucune teinte
   nouvelle n’est introduite ici. */

.scene {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 22px;
  box-shadow: 0 18px 40px -22px rgba(12, 42, 30, 0.22);
  overflow: hidden;
  font-size: 13.5px;
}

/* Astérisque de renvoi vers la FAQ Bridge. */
.sc-tete {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--encre-legere); margin-bottom: 12px;
}
.sc-tete .ico { font-size: 15px; color: var(--vert-bouteille); }
.sc-puce {
  margin-left: auto; text-transform: none; letter-spacing: 0;
  font-size: 11px; font-weight: 700; color: var(--vert-bouteille);
  background: var(--vert-pale); border-radius: 0; padding: 3px 9px;
}

.sc-ope { display: flex; align-items: center; gap: 10px; }
.sc-lib { flex: 1; min-width: 0; color: var(--encre-douce); font-size: 12.5px;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-mnt { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--encre); }
.sc-plus { color: var(--vert-bouteille); }

.sc-etat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  padding: 3px 9px; border-radius: 0; white-space: nowrap;
}
.sc-etat .ico { font-size: 13px; }

/* ── 1. Revenus ──────────────────────────────────────────────────────────────
   Le virement descend, la flèche se trace, le loyer bascule de « attendu » à
   « payé », les conséquences s’affichent, l’histogramme se remplit. */
.sc-fleche {
  height: 26px; display: flex; align-items: center; justify-content: center;
  position: relative;
}
.sc-fleche i {
  display: block; width: 2px; height: 0; background: var(--accent);
  animation: sc-tracer 9s linear infinite;
}
.sc-fleche::after {
  content: ''; position: absolute; bottom: 2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--accent);
  opacity: 0; animation: sc-pointe 9s linear infinite;
}
.sc-attente { background: var(--surface2); color: var(--encre-legere); }
.sc-paye { background: var(--vert-pale); color: var(--vert-bouteille); opacity: 0; }
/* Hors de la scène des revenus, le badge suit son conteneur : il n’a pas
   d’animation propre et doit donc être visible. */
.scene-chaine .sc-paye { opacity: 1; }

.sc-barres {
  list-style: none; display: flex; align-items: flex-end; gap: 6px;
  height: 46px; margin-top: 16px;
}
.sc-barres li {
  flex: 1; background: var(--vert-bouteille); border-radius: 0;
  height: 20%; transform-origin: bottom;
  animation: sc-barre 9s linear infinite;
}
.sc-barres li:nth-child(1) { animation-delay: 0s }
.sc-barres li:nth-child(2) { animation-delay: 0.06s }
.sc-barres li:nth-child(3) { animation-delay: 0.12s }
.sc-barres li:nth-child(4) { animation-delay: 0.18s }
.sc-barres li:nth-child(5) { animation-delay: 0.24s }
.sc-barres li:nth-child(6) { animation-delay: 0.3s }
.sc-barres li:nth-child(7) { animation-delay: 0.36s }
.sc-barres li:nth-child(8) { animation-delay: 0.42s }

@keyframes sc-entrer {
  0%, 4%   { opacity: 0; transform: translateY(-10px) }
  10%, 92% { opacity: 1; transform: none }
  100%     { opacity: 1; transform: none }
}
@keyframes sc-tracer {
  0%, 12%  { height: 0 }
  22%, 92% { height: 16px }
  100%     { height: 16px }
}
@keyframes sc-pointe {
  0%, 20%  { opacity: 0 }
  26%, 92% { opacity: 1 }
  100%     { opacity: 1 }
}
@keyframes sc-sortir {
  0%, 26%  { opacity: 1; transform: none }
  34%, 92% { opacity: 0; transform: translateY(-6px) }
  100%     { opacity: 0 }
}
@keyframes sc-apparaitre {
  0%, 28%  { opacity: 0; transform: translateY(6px) scale(0.94) }
  38%, 92% { opacity: 1; transform: none }
  100%     { opacity: 1; transform: none }
}
@keyframes sc-barre {
  0%, 52%  { height: 8% }
  64%, 92% { height: var(--h, 70%) }
  100%     { height: var(--h, 70%) }
}
.sc-barres li:nth-child(1) { --h: 48% }
.sc-barres li:nth-child(2) { --h: 56% }
.sc-barres li:nth-child(3) { --h: 62% }
.sc-barres li:nth-child(4) { --h: 70% }
.sc-barres li:nth-child(5) { --h: 76% }
.sc-barres li:nth-child(6) { --h: 84% }
.sc-barres li:nth-child(7) { --h: 92% }
.sc-barres li:nth-child(8) { --h: 100% }

/* ── 2. Mes biens ────────────────────────────────────────────────────────────
   Un balayage parcourt le parc ; le bien classé F s’éclaire et son alerte
   monte. */
.scene-biens { padding-top: 26px; }
.sc-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 64px;
  background: linear-gradient(to bottom, rgba(168, 132, 60, 0), rgba(168, 132, 60, 0.13), rgba(168, 132, 60, 0));
  animation: sc-balayer 9s linear infinite;
}
.sc-biens { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sc-biens li {
  display: flex; align-items: center; gap: 11px;
  background: var(--papier); border: 1px solid var(--border);
  border-radius: 0; padding: 10px 13px;
}
.sc-biens .ico { font-size: 17px; color: var(--vert-bouteille); }
.sc-nom { flex: 1; min-width: 0; font-weight: 600; color: var(--encre); font-size: 13px; }
.sc-nom em { display: block; font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--encre-legere); }
.sc-dpe {
  width: 24px; height: 24px; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--blanc);
}
.sc-dpe-f { background: var(--danger); }
.sc-dpe-c { background: #7FA84A; }
.sc-dpe-b { background: #3E7D5C; }
.sc-biens li:first-child { animation: sc-signaler 9s linear infinite; }

.sc-alerte {
  display: flex; align-items: center; gap: 9px;
  margin-top: 12px; padding: 10px 13px; border-radius: 0;
  background: var(--danger-light); border: 1px solid var(--filet-rouge);
  font-size: 12.5px; color: var(--encre); opacity: 0;
  animation: sc-alerter 9s linear infinite;
}
.sc-alerte .ico { font-size: 16px; color: var(--danger); }
.sc-alerte b { color: var(--danger); }

@keyframes sc-signaler {
  0%, 14%  { border-color: var(--border); background: var(--papier) }
  24%, 92% { border-color: var(--filet-rouge); background: var(--danger-light) }
  100%     { border-color: var(--filet-rouge); background: var(--danger-light) }
}
@keyframes sc-alerter {
  0%, 44%  { opacity: 0; transform: translateY(8px) }
  56%, 92% { opacity: 1; transform: none }
  100%     { opacity: 1; transform: none }
}

/* ── 3. Fiscalité ────────────────────────────────────────────────────────────
   Trois factures tombent et rejoignent chacune sa case fiscale, qui s’allume à
   l’arrivée. */
.scene-fiscal .sc-pluie { position: relative; height: 66px; }
.sc-fact {
  position: absolute; top: 0;
  display: block; min-width: 104px;
  background: var(--blanc); border: 1px solid var(--border);
  border-radius: 0; padding: 7px 10px;
  font-size: 11.5px; font-weight: 600; color: var(--encre);
  box-shadow: 0 6px 14px -8px rgba(12, 42, 30, 0.3);
  opacity: 0;
}
.sc-fact em { display: block; font-style: normal; font-weight: 700;
              font-variant-numeric: tabular-nums; color: var(--vert-bouteille); }
.sc-f1 { left: 2%;  animation: sc-tomber 9s linear infinite; animation-delay: 0s }
.sc-f2 { left: 36%; animation: sc-tomber 9s linear infinite; animation-delay: 2.4s }
.sc-f3 { left: 70%; animation: sc-tomber 9s linear infinite; animation-delay: 4.8s }

.sc-bacs { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-bacs li {
  border: 1px dashed var(--border); border-radius: 0;
  padding: 11px 10px; text-align: center; background: var(--papier);
}
.sc-bacs span { display: block; font-size: 10.5px; font-weight: 700;
                letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-legere); }
.sc-bacs b { display: block; margin-top: 4px; font-family: var(--font-display);
             font-size: 17px; color: var(--vert-bouteille); font-variant-numeric: tabular-nums;
             opacity: 0.25; }
.sc-bac-1 { animation: sc-remplir 9s linear infinite; animation-delay: 0.75s }
.sc-bac-2 { animation: sc-remplir 9s linear infinite; animation-delay: 3.15s }
.sc-bac-3 { animation: sc-remplir 9s linear infinite; animation-delay: 5.55s }
.sc-bac-1 b { animation: sc-chiffre 9s linear infinite; animation-delay: 0.75s }
.sc-bac-2 b { animation: sc-chiffre 9s linear infinite; animation-delay: 3.15s }
.sc-bac-3 b { animation: sc-chiffre 9s linear infinite; animation-delay: 5.55s }

@keyframes sc-tomber {
  0%      { opacity: 0; transform: translateY(-14px) }
  4%      { opacity: 1; transform: translateY(0) }
  9%      { opacity: 1; transform: translateY(0) }
  15%     { opacity: 1; transform: translateY(52px) scale(0.9) }
  18%, 100% { opacity: 0; transform: translateY(52px) scale(0.9) }
}
@keyframes sc-remplir {
  0%, 13%  { border-style: dashed; border-color: var(--border); background: var(--papier) }
  17%, 92% { border-style: solid; border-color: var(--filet-vert); background: var(--vert-pale) }
  100%     { border-style: solid; border-color: var(--filet-vert); background: var(--vert-pale) }
}
@keyframes sc-chiffre {
  0%, 13%  { opacity: 0.25; transform: translateY(3px) }
  18%, 92% { opacity: 1; transform: none }
  100%     { opacity: 1; transform: none }
}

/* ── 4. Locataires ───────────────────────────────────────────────────────────
   Un locataire bascule en retard, la relance part seule, le paiement arrive et
   la séquence s’arrête. */
.sc-locs { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sc-locs li {
  display: flex; align-items: center; gap: 11px;
  background: var(--papier); border: 1px solid var(--border);
  border-radius: 0; padding: 10px 13px;
}
.sc-ini {
  width: 28px; height: 28px; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vert-pale); color: var(--vert-bouteille);
  font-size: 11px; font-weight: 700;
}
.sc-locs .sc-nom { font-size: 13px; }
.sc-ok { background: var(--vert-pale); color: var(--vert-bouteille); }
.sc-ko { background: var(--danger-light); color: var(--danger); }
.sc-regle { background: var(--vert-pale); color: var(--vert-bouteille); }

/* La ligne en défaut empile trois états au même endroit et les enchaîne. */
.sc-retard { position: relative; animation: sc-tension 9s linear infinite; }
.sc-retard .sc-etat { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); }
.sc-retard .sc-attente { animation: sc-etat-1 9s linear infinite; }
.sc-retard .sc-ko      { opacity: 0; animation: sc-etat-2 9s linear infinite; }
.sc-retard .sc-regle   { opacity: 0; animation: sc-etat-3 9s linear infinite; }

.sc-relance {
  display: flex; align-items: center; gap: 9px;
  margin-top: 12px; padding: 10px 13px; border-radius: 0;
  background: var(--vert-pale); border: 1px solid var(--filet-vert);
  font-size: 12.5px; color: var(--vert-bouteille); opacity: 0;
  animation: sc-partir 9s linear infinite;
}
.sc-relance .ico { font-size: 16px; }

@keyframes sc-tension {
  0%, 16%  { border-color: var(--border); background: var(--papier) }
  24%, 62% { border-color: var(--filet-rouge); background: var(--danger-light) }
  72%, 92% { border-color: var(--filet-vert); background: var(--vert-pale) }
  100%     { border-color: var(--filet-vert); background: var(--vert-pale) }
}
@keyframes sc-etat-1 {
  0%, 16%  { opacity: 1 }
  22%, 100% { opacity: 0 }
}
@keyframes sc-etat-2 {
  0%, 18%  { opacity: 0 }
  24%, 62% { opacity: 1 }
  68%, 100% { opacity: 0 }
}
@keyframes sc-etat-3 {
  0%, 64%  { opacity: 0 }
  72%, 92% { opacity: 1 }
  100%     { opacity: 1 }
}
@keyframes sc-partir {
  0%, 28%  { opacity: 0; transform: translateY(8px) }
  38%, 60% { opacity: 1; transform: none }
  70%, 100% { opacity: 0; transform: translateY(-6px) }
}

/* Immobilité demandée : chaque scène s’affiche dans son état final. */
@media (prefers-reduced-motion: reduce) {
  .sc-attente { opacity: 0; }
  .sc-retard .sc-ko { opacity: 0; }
  .sc-retard .sc-regle { opacity: 1; }
  .sc-fleche i { height: 16px; }
  .sc-fleche::after { opacity: 1; }
  .sc-fact { opacity: 0; }
  .sc-bacs li { border-style: solid; border-color: var(--filet-vert); background: var(--vert-pale); }
  .sc-bacs b { opacity: 1; }
  .sc-scan { opacity: 0; }
  .sc-biens li:first-child { border-color: var(--filet-rouge); background: var(--danger-light); }
  .sc-barres li { height: var(--h, 70%); }
}

/* ── Les automatisations, par lots ────────────────────────────────────────────
   Vingt-quatre vignettes à grosse icône occupaient huit rangées pour dire
   vingt-quatre lignes de texte. Regroupées par thème, elles en tiennent deux :
   c’est le titre qu’on lit, pas le pictogramme, et l’icône ne sert plus qu’à
   marquer le lot. Le lecteur y trouve aussi ce qu’il cherchait — « est-ce que
   ça gère mes charges ? » se répond dans un bloc, pas dans une grille. */
.lots {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; margin-top: 48px; align-items: start;
}
.lot {
  background: var(--blanc); border: 1px solid var(--border);
  border-radius: 0; padding: 22px 24px;
}
/* Chaque lot est un <details> : sur téléphone, la section passe de trente-deux
   lignes à sept en-têtes, et le visiteur ouvre ce qui l’intéresse. Sur grand
   écran tout reste ouvert — c’est une preuve d’exhaustivité, elle doit se voir
   d’un bloc.
   Le repli est posé par le script, pas par le CSS : un <details> sans `open`
   n’affiche pas son contenu quoi qu’en dise la feuille de style, et sans
   JavaScript la page doit rester lisible en entier. */
.lot > summary {
  list-style: none; cursor: default;
}
.lot > summary::-webkit-details-marker { display: none; }
.lot h3 {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 18px;
  color: var(--vert-bouteille); letter-spacing: -0.02em;
  padding-bottom: 12px; border-bottom: 1px solid var(--vert-pale);
  margin: 0;
}
.lot h3 .ico { font-size: 19px; color: var(--accent); }
/* Le compte n’apparaît que replié : ouvert, la liste se compte toute seule. */
.lot-compte {
  margin-left: auto; padding: 2px 9px; border-radius: 0;
  background: var(--vert-pale); color: var(--vert-bouteille);
  font-size: 12px; font-weight: 700; opacity: 0;
  transition: opacity 0.2s ease;
}
.lot:not([open]) .lot-compte { opacity: 1; }
.lot ul { list-style: none; margin-top: 4px; }
.lot li {
  padding: 11px 0; border-bottom: 1px solid var(--surface2);
  font-size: 13.5px; color: var(--encre-douce); line-height: 1.45;
}
.lot li:last-child { border-bottom: none; padding-bottom: 0; }
.lot li b {
  display: block; font-size: 14.5px; font-weight: 600;
  color: var(--encre); margin-bottom: 2px;
}

@media (max-width: 900px) {
  .fonction { grid-template-columns: minmax(0, 1fr); }
  .fonction:nth-child(even) .fonction-tete { order: 0; }
  .fonction-tete { max-width: 640px; }
 .lots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lots { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* Sous 720 px, l’en-tête devient cliquable et porte son chevron. Au-dessus, le
   lot est toujours ouvert : le curseur reste neutre et le chevron disparaît,
   pour ne pas promettre une interaction qui n’existe pas. */
@media (max-width: 720px) {
  .lot { padding: 16px 18px; }
  .lot > summary { cursor: pointer; }
  .lot h3 { padding-bottom: 0; border-bottom: none; }
  .lot[open] h3 { padding-bottom: 12px; border-bottom: 1px solid var(--vert-pale); }
  .lot h3::after {
    content: ""; width: 8px; height: 8px; flex-shrink: 0;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
  }
  .lot[open] h3::after { transform: rotate(-135deg) translateY(-2px); }
  .lot > summary:focus-visible { outline: 2px solid var(--vert-bouteille); outline-offset: 3px; border-radius: 0; }
}

/* ── Aperçu : la preuve d’exhaustivité, remontée ───────────────────────────
   Vingt-quatre lignes en fin de page ne sont lues que par qui va au bout. Huit
   d’entre elles, juste après le héros, disent avant tout détail « ça fait ce
   que vous espérez ». C’est une accroche, pas un catalogue : le catalogue
   reste plus bas, en lots. */
.apercu { padding: 30px 0 0; }
.apercu-liste {
  list-style: none; display: grid; gap: 10px 22px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.apercu-liste li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; color: var(--encre); line-height: 1.35;
}
.apercu-liste .ico { font-size: 18px; color: var(--accent); }
.apercu-note { text-align: center; margin-top: 22px; font-size: 14px; }
.apercu-note a { color: var(--encre-douce); text-decoration: none; font-weight: 600; }
.apercu-note a:hover { color: var(--vert-bouteille); text-decoration: underline; }

@media (max-width: 900px) { .apercu-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .apercu-liste { grid-template-columns: minmax(0, 1fr); } }

/* ── Bailin Pro ───────────────────────────────────────────────────────────────
   La section tenait en un encart vert de six lignes pour un métier entier. Elle
   passe à quatre blocs, chacun avec sa scène : le cloisonnement, la vue
   consolidée, l’équipe et la fiscalité par foyer. Ce sont les quatre questions
   qu’un administrateur de biens pose avant toute autre — et la première,
   toujours, est « est-ce qu’un client peut voir les données d’un autre ». */
/* Le socle commun, posé AVANT les quatre blocs. Un professionnel qui tombe
   sur une page « Pro » suppose spontanément qu’elle décrit une offre séparée,
   donc plus étroite. Il faut lui dire l’inverse en premier. */
.pro-socle {
  margin-top: 40px; padding: 26px 30px;
  background: var(--blanc); border: 1px solid var(--border); border-radius: 0;
}
.pro-socle h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 21px;
  color: var(--vert-bouteille); letter-spacing: -0.01em;
}
.pro-socle > p { margin-top: 8px; font-size: 15px; color: var(--encre-douce); }
.pro-socle-liste {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 20px; margin: 18px 0;
}
.pro-socle-liste li {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--encre); line-height: 1.35;
}
.pro-socle-liste .ico { font-size: 17px; color: var(--accent); flex: none; }
.pro-socle-note {
  padding-top: 16px; border-top: 1px solid var(--vert-pale);
  font-size: 14.5px; font-weight: 600; color: var(--vert-bouteille);
}

@media (max-width: 900px) { .pro-socle-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pro-socle-liste { grid-template-columns: minmax(0, 1fr); } }

.pro-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 44px; }
.pro-bloc {
  background: var(--blanc); border: 1px solid var(--border);
  border-radius: 0; padding: 26px 26px 22px;
  display: flex; flex-direction: column;
}
.pro-bloc h3 {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-body); font-weight: 700; font-size: 20px;
  color: var(--vert-bouteille); letter-spacing: -0.02em;
}
.pro-bloc h3 .ico { font-size: 21px; color: var(--accent); flex: none; }
.pro-bloc > p { margin-top: 12px; font-size: 15px; color: var(--encre-douce); line-height: 1.55; }
.pro-bloc .scene { margin-top: 20px; padding: 18px; }

.pro-appel {
  margin-top: 26px; padding: 30px 34px; border-radius: 0;
  background: var(--vert-bouteille); color: var(--sur-vert);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.pro-appel p { font-size: 16.5px; max-width: 620px; }
.pro-appel b { color: var(--papier); }
.pro-appel .btn { background: var(--papier); color: var(--vert-bouteille); border-color: var(--papier); flex: none; }
.pro-appel .btn:hover { background: var(--blanc); }

/* Sélecteur de mandant : la liste des lots change ENTIÈREMENT à chaque
   bascule. C’est le propos — pas un filtre, une cloison. */
.sc-mandants { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.sc-mandants li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px; border-radius: 0; border: 1px solid var(--border);
  font-size: 12.5px; font-weight: 600; color: var(--encre-douce); background: var(--papier);
}
.sc-mandants li b { font-weight: 600; }
.sc-mandants li span { font-weight: 400; font-size: 11.5px; color: var(--encre-legere); }
.sc-cloison { position: relative; margin-top: 12px; min-height: 108px; }
.sc-lots { list-style: none; position: absolute; inset: 0; opacity: 0; }
.sc-lots li {
  padding: 7px 0; border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--encre); line-height: 1.3;
}
.sc-lots li:last-child { border-bottom: none; }

@media (prefers-reduced-motion: no-preference) {
  .scene-mandants .sc-m1 { animation: sc-mandant-actif 9s linear infinite; }
  .scene-mandants .sc-m2 { animation: sc-mandant-actif 9s linear infinite; animation-delay: 3s; }
  .scene-mandants .sc-m3 { animation: sc-mandant-actif 9s linear infinite; animation-delay: 6s; }
  .scene-mandants .sc-lots-1 { animation: sc-lots-visibles 9s linear infinite; }
  .scene-mandants .sc-lots-2 { animation: sc-lots-visibles 9s linear infinite; animation-delay: 3s; }
  .scene-mandants .sc-lots-3 { animation: sc-lots-visibles 9s linear infinite; animation-delay: 6s; }
}
@keyframes sc-mandant-actif {
  0%, 2%    { background: var(--papier); border-color: var(--border); color: var(--encre-douce); }
  6%, 30%   { background: var(--vert-pale); border-color: var(--vert-bouteille); color: var(--vert-bouteille); }
  36%, 100% { background: var(--papier); border-color: var(--border); color: var(--encre-douce); }
}
@keyframes sc-lots-visibles {
  0%, 2%    { opacity: 0; transform: translateY(6px); }
  8%, 30%   { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-4px); }
}

/* Vue consolidée */
.sc-consolide { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.sc-consolide li { background: var(--papier); border: 1px solid var(--border); border-radius: 0; padding: 10px 12px; }
.sc-consolide span { display: block; font-size: 10.5px; font-weight: 600; color: var(--encre-legere); }
.sc-consolide b { display: block; margin-top: 3px; font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--encre); }
.sc-vert { color: var(--vert-bouteille) !important; }
.sc-rouge { color: var(--danger) !important; }
.sc-consolide-note {
  display: flex; align-items: center; gap: 9px;
  margin-top: 12px; padding: 10px 12px; border-radius: 0;
  background: var(--danger-light); border: 1px solid var(--filet-rouge); font-size: 12.5px; color: var(--encre);
}
.sc-consolide-note .ico { font-size: 16px; color: var(--danger); flex: none; }

/* Équipe */
.sc-equipe { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.sc-equipe li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.sc-equipe .sc-ini {
  width: 30px; height: 30px; border-radius: 0; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--vert-pale); color: var(--vert-bouteille); font-size: 11px; font-weight: 700;
}
.sc-equipe .sc-qui { flex: 1; min-width: 0; color: var(--encre); font-weight: 600; }
.sc-equipe .sc-qui em { display: block; font-style: normal; font-weight: 400; font-size: 11px; color: var(--encre-legere); }
.sc-equipe .sc-perimetre {
  flex: none; font-size: 11px; font-weight: 600; color: var(--vert-bouteille);
  background: var(--vert-pale); border-radius: 0; padding: 3px 10px;
}

/* Fiscalité par foyer */
.sc-fiscal-pro { list-style: none; }
.sc-fiscal-pro li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.sc-fiscal-pro li:last-child { border-bottom: none; padding-bottom: 0; }
.sc-fiscal-pro span { flex: 1; min-width: 0; color: var(--encre); font-weight: 600; }
.sc-fiscal-pro i {
  font-style: normal; flex: none; font-size: 10.5px; font-weight: 600;
  color: var(--encre-douce); background: var(--surface2); border-radius: 0; padding: 3px 9px;
}
.sc-fiscal-pro b { flex: none; font-variant-numeric: tabular-nums; color: var(--encre); }

@media (max-width: 900px) {
  .pro-grille { grid-template-columns: minmax(0, 1fr); }
  .pro-appel { flex-direction: column; align-items: flex-start; padding: 24px; }
  .pro-appel .btn { width: 100%; justify-content: center; }
}

/* ── Tarifs ───────────────────────────────────────────────────────────────── */

/* ── Bascule mensuel / annuel ────────────────────────────────────────────────
   Deux boutons, pas un interrupteur : l’état est lisible sans interprétation,
   et chaque option reste atteignable au clavier. */
.bascule {
  display: flex; width: fit-content; gap: 4px; margin: 26px auto 0;
  padding: 4px; border-radius: 0;
  background: var(--surface2); border: 1px solid var(--border);
}
.tarifs-section-centre { text-align: center; }
.bascule-opt {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
  color: var(--encre-douce); background: transparent; border: 0;
  padding: 9px 18px; border-radius: 0; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.bascule-opt:hover { color: var(--vert-bouteille); }
.bascule-opt.actif { background: var(--blanc); color: var(--vert-bouteille); box-shadow: 0 1px 3px rgba(12,42,30,0.12); }
.bascule-gain {
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  background: var(--vert-pale); color: var(--vert-bouteille);
  border-radius: 0; padding: 3px 8px;
}
.bascule-opt:focus-visible { outline: 2px solid var(--vert-bouteille); outline-offset: 2px; }

.prix-note { font-size: 12.5px; color: var(--encre-legere); margin-top: 2px; min-height: 34px; }

.tarifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; align-items: stretch; }
.tarifs-4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* La carte elle-même — fond, filet, rembourrage —, sa vedette, le gratuit en
   retrait et le ruban : une seule définition, dans « 3. LA CARTE », plus bas.
   Ici, la grille et la typographie. */
.tarif h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--vert-bouteille); }
.tarif .prix { margin: 14px 0 4px; }
.tarif .prix b { font-family: var(--font-display); font-size: 40px; font-weight: 600; color: var(--encre); letter-spacing: -0.01em; }
.tarif .prix span { font-size: 16px; color: var(--encre-douce); }
.tarif .prix-sur { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--encre); }
.tarif .desc { color: var(--encre-douce); font-size: 14px; min-height: 40px; margin-top: 10px; }
.tarif ul { list-style: none; margin: 22px 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.tarif li { display: flex; gap: 9px; font-size: 14px; color: var(--encre); line-height: 1.45; }
.tarif li > span { min-width: 0; }
.tarif li .ico { color: var(--vert-bouteille); font-size: 19px; margin-top: 2px; }
.tarif li.faible { color: var(--encre-legere); }
.tarif li.faible .ico { color: var(--encre-legere); }
.tarif .btn { width: 100%; justify-content: center; }
.tarif-renvoi { margin-top: auto; padding-top: 6px; font-size: 13.5px; }
.tarif-renvoi a { color: var(--vert-bouteille); font-weight: 600; text-decoration: none; }
.tarif-renvoi a:hover { text-decoration: underline; }
.tarifs-note { text-align: center; margin-top: 22px; color: var(--encre-douce); font-size: 14.5px; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq { max-width: 780px; margin: 48px auto 0; }
.faq details {
  border-bottom: 1px solid var(--border); padding: 4px 0;
}
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-size: 17px; font-weight: 600; color: var(--encre);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 24px; color: var(--attention-dark); font-weight: 400; line-height: 1;
}
.faq details[open] summary::after { content: '−'; }
/* La réponse vit sur le fond de section : les questions reposent sur le papier,
   la réponse s'ouvrait sur du blanc plein — le seul aplat de la FAQ. Le filet
   du bas de chaque entrée sépare déjà les questions ; rien de plus n'est dû. */
.faq .reponse { padding: 0 40px 22px 0; color: var(--encre-douce); font-size: 16px; }

/* ── Comparaison des niveaux de signature (dans la FAQ) ─────────────────────
   Deux colonnes côte à côte : ce qui les sépare doit se lire d’un coup d'œil,
   sans que le niveau le plus faible paraisse insuffisant. */
.niveaux { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 18px; }
.niveau {
  background: var(--blanc); border: 1px solid var(--border);
  border-radius: 0; padding: 14px 16px;
}
.niveau-fort { border-color: var(--filet-vert); background: var(--vert-pale); }
.niveau-titre {
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--vert-bouteille); margin-bottom: 6px;
}
.niveau-quoi { font-size: 13.5px; color: var(--encre-douce); line-height: 1.5; }
.niveau ul { margin: 10px 0 10px 17px; padding: 0; font-size: 13px; line-height: 1.6; }
.niveau li { color: var(--encre); }
.niveau-limite {
  font-size: 12px; color: var(--encre-legere); line-height: 1.45;
  padding-top: 9px; border-top: 1px solid var(--border);
}
.niveau-fort .niveau-limite { border-top-color: var(--filet-vert); }

@media (max-width: 640px) {
  .niveaux { grid-template-columns: 1fr; }
}

/* ── CTA final ────────────────────────────────────────────────────────────── */
.cta-final { background: var(--vert-bouteille); color: var(--papier); text-align: center; padding: 96px 0; }
.cta-final h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4.6vw, 52px); letter-spacing: -0.025em; color: var(--papier); line-height: 1.05; }
.cta-final p { max-width: 520px; margin: 16px auto 0; color: var(--sur-vert); font-size: 18px; }
.cta-final .btn { margin-top: 30px; background: var(--papier); color: var(--vert-bouteille); }
.cta-final .btn:hover { background: var(--blanc); }

/* ── Pied de page ─────────────────────────────────────────────────────────── */
.footer { background: var(--vert-profond); color: var(--sur-vert); padding: 56px 0 40px; }
.footer .wordmark { color: var(--papier); font-size: 24px; }
.footer .wordmark::after { color: var(--vert-clair); }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-baseline { margin-top: 10px; max-width: 280px; font-size: 14.5px; }
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
/* Le pied de page sautait de H2 à H5 : une hiérarchie trouée empêche de
   parcourir la page par ses titres. Ces intitulés sont devenus des H2 — ils
   sont bien au même niveau que les titres de section — et la règle vise
   désormais la classe, pas la balise, pour que l'apparence ne bouge pas d'un
   pixel. `margin: 0 0 14px` remplace la seule marge basse : un H2 porte une
   marge haute par défaut, un H5 n'en avait pas ici (audit RGAA, G4). */
.footer-col .pied-titre { color: var(--papier); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 14px; font-weight: 700; }
.footer-col a { display: block; color: var(--sur-vert); font-size: 15px; padding: 5px 0; }
.footer-col a:hover { color: var(--papier); }
.footer-bas { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 13.5px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ── Apparitions au défilement ────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* Sous 1000 px, la reconstitution d’interface devient illisible en colonne :
   on repasse à l’empilement, texte centré, écran dessous. C’est le seul point
   où la page redevient ce qu’elle était — mais avec trois lignes de texte au
   lieu de sept. */
@media (max-width: 1000px) {
  .hero h1 { font-size: clamp(40px, 6.2vw, 66px); }
  /* `minmax(0, 1fr)` ET NON `1fr` : la maquette du héros garde sa largeur
     d’ordinateur (790 px) et n’est réduite qu’ensuite, par `transform`. Or un
     `1fr` nu vaut `minmax(auto, 1fr)`, et ce `auto` laisse la colonne s’élargir
     jusqu’à contenir ces 790 px. Deux conséquences, sur le même défaut : la
     page débordait de plus de 400 px sur téléphone, ET le script d’échelle,
     qui mesure la place disponible dans cette colonne, y lisait 790 px — il
     concluait donc à un rapport de 1 et ne réduisait rien. La colonne doit
     pouvoir être plus étroite que son contenu pour que la réduction ait un
     sens. Même raison que les `minmax(0, …)` de la grille en deux colonnes. */
  .hero-grille { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-texte { text-align: center; }
  .hero .sous-fort { max-width: 44ch; margin-inline: auto; }
  .hero-cta { justify-content: center; }
  /* `width: 100%` EST LA PIÈCE MAÎTRESSE, et c’est celle qui manquait.
     `margin-inline: auto` retire l’élément de l’étirement normal de la grille :
     sa largeur devient celle de son CONTENU, et son contenu, c’est la maquette
     à sa largeur d’ordinateur — 790 px, posés en dur plus bas. La boîte se
     calait donc sur 790 px quelle que soit la place réelle. Ni la borne de
     piste `minmax(0, …)` ni `min-width: 0` n’y pouvaient rien : l’une et
     l’autre bornent un MINIMUM, pas une largeur au contenu.
     Deux conséquences du même défaut : la page débordait de plus de 400 px sur
     téléphone, ET le script d’échelle — qui mesure cette boîte pour savoir de
     combien réduire la maquette — y lisait 790 px de place disponible. Il
     concluait à un rapport de 1 et ne réduisait rien.
     Fixer la largeur rend la mesure juste ; les marges automatiques se
     résolvent alors à 0, faute d’espace libre à répartir. */
  .hero-ecran { max-width: 1040px; margin-inline: auto; min-width: 0; width: 100%; }
}
@media (max-width: 1080px) {
  .veilles { grid-template-columns: repeat(3, 1fr); }
  .veille-phare { grid-column: auto; }
  .tarifs-4 { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin-inline: auto; }
  /* Deux colonnes : la vedette ne peut plus déborder sans recouvrir sa
     voisine. Elle rentre dans le rang, son filet et son ruban suffisent. */
  .tarif.vedette { margin: 0; padding: 32px 26px 26px; }
}

@media (max-width: 900px) {
  /* Le parcours passe en pile : le rail se cale à gauche, texte puis visuel. */
  .etape { grid-template-columns: 46px minmax(0, 1fr); gap: 0 20px; padding-bottom: 44px; }
  .etape-visuel { grid-column: 2; margin-top: 22px; }
  .etape-pastille { width: 40px; height: 40px; border-width: 3px; }
  .etape-pastille .ico { font-size: 18px; }
  .etape-rail::after { top: 40px; bottom: -44px; }

  .fonctions { gap: 56px; }
  .fonction-tete { margin-bottom: 0; }

  .banque-inner { grid-template-columns: 1fr; gap: 36px; }
  .section-tag-clair { text-align: center; }
  .banque h2 { text-align: center; }
  .veilles { grid-template-columns: repeat(2, 1fr); }
  .veille-phare { grid-column: span 2; }
  .tarifs, .tarifs-4 { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .pro { padding: 40px 28px; }
}

@media (max-width: 640px) {
  .section, .banque { padding: 64px 0; }
  .hero { padding: 52px 0 40px; }
  .nav-links .nav-link, .nav-links .btn-ghost { display: none; }
  .nav-links .btn-primary, .nav-links .btn-inverse { padding: 9px 14px; font-size: 14px; }
  .veilles { grid-template-columns: 1fr; }
  .veille-phare { grid-column: auto; }
  .reassurance ul { gap: 8px 20px; font-size: 13px; }
  .footer-cols { gap: 36px; }

  /* Sous 640 px, le rail mangerait trop de largeur : la pastille se pose
     au-dessus du texte et le trait de liaison disparaît. */
  .etape { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 40px; }
  .etape-rail { justify-content: flex-start; margin-bottom: 14px; }
  .etape-rail::after { display: none; }
  .etape-pastille { border: none; box-shadow: none; }
  .etape-visuel { grid-column: 1; }
  .etape-mince .etape-texte { grid-column: 1; }

  .ui { padding: 14px; }
  .ui-lignes li { grid-template-columns: 38px 1fr auto; }

  /* Le titre d’une fonctionnalité passe sous son icône plutôt que de la serrer
     contre un texte qui se casse sur deux lignes. */
  .fonctions { gap: 48px; }
  .fonction-tete p { font-size: 16px; }
}

/* ── Scène fiscale : les lignes de la 2044 ──────────────────────────────────
   Bloc volontairement STATIQUE. Les autres scènes animent leurs éléments sur
   un cycle de 12 s ; ici on montre un résultat de calcul, qui n’a aucune
   raison d’apparaître puis de disparaître sous les yeux du lecteur. */
.sc-2044 { list-style: none; margin: 8px 0 0; padding: 0; }
.sc-2044 li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 5px 0; font-size: 12.5px; color: var(--encre);
  border-top: 1px solid var(--border);
}
.sc-2044 li:first-child { border-top: 0; }
.sc-2044 li span { color: var(--encre-legere); }
.sc-2044 li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-2044-total { font-weight: 600; }
.sc-2044-total span { color: var(--encre) !important; }

/* Le comparateur micro / réel — la première décision d'un bailleur, chiffrée
   sur ses montants, la page de vente le promet et l'app le calcule. Deux
   cases côte à côte ; le régime retenu (l'imposable le plus bas) porte le
   filet vert du système, comme le régime retenu dans l'application. */
.sc-comparateur { margin-top: 12px; }
.sc-vs {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.sc-vs li {
  display: grid; gap: 1px; padding: 9px 11px;
  border: 1px solid var(--border);
}
.sc-vs li span { font-size: 10.5px; font-weight: 600; color: var(--encre-legere); }
.sc-vs li b {
  font-family: var(--font-num); font-size: 18px; font-weight: 600; color: var(--encre);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sc-vs li em { font-style: normal; font-size: 10px; color: var(--encre-legere); }
.sc-vs-retenu {
  border-color: var(--vert-bouteille) !important;
  box-shadow: inset 3px 0 0 var(--vert-bouteille);
}
.sc-vs-retenu em { color: var(--vert-bouteille); font-weight: 600; }

.sc-note-fiscale {
  display: flex; align-items: center; gap: 9px;
  margin-top: 10px; padding: 10px 13px; border-radius: 0;
  background: var(--vert-pale); border: 1px solid var(--filet-vert);
  font-size: 12.5px; color: var(--vert-bouteille);
}
.sc-note-fiscale .ico { font-size: 16px; }

/* ── Scènes sur petit écran ─────────────────────────────────────────────────
   `repeat(3, 1fr)` ne descend PAS sous la largeur du contenu : sur un écran de
   390 px, les trois bacs réclamaient 324 px pour 296 disponibles, et le
   troisième — « Récupérable » — était coupé par l'`overflow: hidden` de la
   scène. `minmax(0, 1fr)` autorise la colonne à se réduire. */
@media (max-width: 640px) {
  /* La correction précédente empêchait la GRILLE de déborder, pas le TEXTE :
     « AMORTISSABLE » réclame 85 px à 9,5 px, la colonne n’en offrait plus que
     71, et l'`overflow: hidden` de la scène coupait la fin du mot. La mise en
     vedette de la rubrique fiscale, qui a ajouté 32 px de marge de chaque
     côté, avait rendu le calcul faux.
     Empilés, les trois bacs ne peuvent plus rien couper : chaque libellé
     dispose de toute la largeur, le montant se cale à droite. */
  .sc-bacs { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .sc-bacs li {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; padding: 8px 11px; text-align: left;
  }
  .sc-bacs span { font-size: 10px; letter-spacing: 0.02em; }
  .sc-bacs b { margin-top: 0; font-size: 16px; }

  /* Troisième facture : `left: 70%` plus `min-width: 104px` réclamait 265 px
     dans un conteneur de 230. Ancrée à droite, elle tient quelle que soit la
     largeur. */
  .sc-fact { min-width: 92px; }
  .sc-f2 { left: 34%; }
  .sc-f3 { left: auto; right: 0; }
}

/* Précision secondaire sous le texte d’une rubrique : ce qu’on peut corriger,
   et ce qu’on ne prend pas en charge. Plus discret que le corps, mais lisible —
   c’est là que se joue la confiance, pas dans une note de bas de page. */
.fonction-note {
  max-width: 640px; margin: 10px auto 0;
  font-size: 14px; line-height: 1.6; color: var(--encre-legere);
}

/* ── Navigation sur petit écran ─────────────────────────────────────────────
   Sous 640 px, les liens du bandeau sont masqués et seuls les deux boutons
   restent. Le panneau ci-dessous leur rend un chemin : sans lui, la seule
   navigation était le pied de page, tout en bas d’une page longue. */
.nav-burger { display: none; }

/* Le bandeau demande 903 px pour ses six liens et ses deux boutons. Entre 641
   et 999 px, il n’en avait pas autant et débordait de la page — jusqu’à deux
   cents pixels sous l’écran, en silence. Le burger prend donc la main dès
   1000 px, et non plus à 640 : les liens de section passent dans le panneau,
   les deux boutons restent dans la barre. */
@media (max-width: 1000px) {
  .nav-links .nav-link { display: none; }
}

@media (max-width: 1000px) {
  /* Même bouton que dans l’application : carré vert plein, bandes blanches.
     Deux interfaces qui se ressemblent doivent ouvrir leur menu de la même
     façon — et le fond plein se voit, là où un contour clair se perdait. */
  .nav-burger {
    /* `flex: none` : sans lui, le bandeau comprime le bouton et ses bandes
       deviennent illisibles. */
    display: flex; flex: none; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0; margin-left: 4px;
    background: var(--vert-bouteille); border: none;
    -webkit-appearance: none; appearance: none;
    border-radius: 0; cursor: pointer;
    box-shadow: 0 2px 10px rgba(12, 42, 30, 0.28);
  }
  /* Largeur EXPLICITE, et non un étirement : Safari centre les enfants d’un
     <button>, ce que Chrome ne fait pas. Des <span> vides s’y effondraient à
     une largeur nulle — sur iPhone on ne voyait qu’un carré vert. */
  .nav-burger span {
    display: block; width: 22px; height: 2px; flex-shrink: 0;
    background: var(--papier); border-radius: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
  }
  /* Croix à l’ouverture : l’état du bouton doit se lire sans son libellé. */
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* « Se connecter » reste visible sur téléphone, comme sur ordinateur (demande
     utilisateur) : les deux boutons tiennent avec le rembourrage compact
     ci-dessus. On resserre encore un cran sous 380 px pour garder le logo, les
     deux boutons et le burger sur une ligne. */
  @media (max-width: 380px) {
    .nav-links .btn-primary, .nav-links .btn-inverse { padding: 8px 11px; font-size: 13px; }
  }

  /* `[hidden]` ne pose que `display: none` dans la feuille du navigateur : une
     règle de classe l’emporte, et le panneau restait ouvert en permanence sur
     téléphone. On rétablit explicitement la priorité. */
  .menu-mobile[hidden] { display: none; }

  .menu-mobile {
    display: flex; flex-direction: column;
    padding: 6px 20px 14px;
    background: var(--blanc); border-top: 1px solid var(--border);
  }
  .menu-mobile a {
    padding: 13px 2px; font-size: 16px; color: var(--encre);
    text-decoration: none; border-bottom: 1px solid var(--border);
  }
  .menu-mobile a:last-child { border-bottom: 0; }
  .menu-mobile a:active { color: var(--vert-bouteille); }
}

/* Au-delà de 640 px les liens du bandeau reviennent : le panneau ne doit
   jamais s’afficher, même si le script l’avait laissé ouvert. */
@media (min-width: 1001px) { .menu-mobile { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════════
   COUCHE « NOUVEAU DESIGN » — 08/09/2026
   ─────────────────────────────────────────────────────────────────────────
   La page, sa structure, ses dix scènes animées et ses proportions sont
   celles d'origine : elles étaient justes, et les remplacer par la maquette
   statique a été une erreur. Ce qui change ici, et uniquement cela, c'est
   l'habillage — les mêmes règles que le nouveau design de l'application :

     — angles droits partout (les 75 `border-radius` ont été mis à zéro
       au-dessus, comme dans le socle où il n'en reste pas un seul) ;
     — aucune ombre portée : une bordure d'un pixel sépare, pas un flou ;
     — les titres de section alignés à gauche, surlignés d'un filet noir de
       deux pixels, précédés d'un œil en petites capitales ;
     — la barre de navigation en vert bouteille plein, comme le rail de
       l'application ;
     — les boutons plats, sans relief ni décollement au survol ;
     — les pastilles arrondies redevenues des étiquettes carrées à filet.

   La palette ne bouge pas : les deux feuilles déclarent exactement les mêmes
   hexadécimaux, sous deux noms. `--vert` et `--vert-bouteille` sont #17402F.
   ═════════════════════════════════════════════════════════════════════════ */

:root { --filet-fort: #14181A; --vert: var(--vert-bouteille); --filet: var(--border); }

/* ── Le relief s'en va ────────────────────────────────────────────────────
   Une seule exception : l'anneau de focus, qui doit rester visible. */
.scene, .ui, .ecran, .carte, .tarif, .veille, .lot, .fonction, .pro-bloc,
.reponse, .hero-produit, .sc-voie, .sc-bloc, .cta-final, .banque-visuel {
  box-shadow: none;
}

/* ── Navigation : le rail de l'application, couché ───────────────────────── */
.nav { background: var(--vert-bouteille); border-bottom: 0; backdrop-filter: none; }
.nav-inner { height: 60px; }
.nav .wordmark { color: #fff; font-size: 21px; }
.nav .wordmark::after { color: var(--vert-clair); }
.nav-links a.nav-link { color: var(--sur-vert); font-size: 12.5px; font-weight: 500; }
.nav-links a.nav-link:hover, .nav-links a.nav-link:focus-visible { color: #fff; }
.nav .btn-secondary, .nav .btn-inverse {
  background: transparent; color: var(--sur-vert);
  border: 1px solid rgba(180, 204, 192, .32);
  font-size: 11px; font-weight: 600; padding: 8px 16px;
}
.nav .btn-primary {
  background: #fff; color: var(--vert-bouteille); border-color: #fff;
  font-size: 11px; font-weight: 600; padding: 8px 16px;
}
.nav .btn-primary:hover { background: var(--vert-pale); }
.nav .btn-secondary:hover, .nav .btn-inverse:hover { background: transparent; border-color: var(--sur-vert); color: #fff; }
.nav-burger span { background: var(--sur-vert); }
[id] { scroll-margin-top: 78px; }

/* ── Titres de section : œil, titre à gauche, filet noir ─────────────────── */
.section-tag, .section-tag-clair {
  text-align: left; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre-legere); margin-bottom: 10px;
}
.section-titre {
  text-align: left; color: var(--encre); font-weight: 700;
  letter-spacing: -.024em; margin-top: 0;
  padding-bottom: 14px; border-bottom: 2px solid var(--filet-fort);
}
.section-titre:has(+ .section-intro) { padding-bottom: 0; border-bottom: 0; }
.section-intro {
  text-align: left; margin: 10px 0 0; max-width: 68ch;
  padding-bottom: 14px; border-bottom: 2px solid var(--filet-fort);
}
/* La grille qui suit reprend sa respiration sous le filet. */
.section-titre + *, .section-intro + * { margin-top: 34px; }

/* ── Héros ───────────────────────────────────────────────────────────────── */
.hero h1 { color: var(--encre); font-weight: 700; letter-spacing: -.03em; }
.hero .sous-fort { font-weight: 700; letter-spacing: -.02em; }

/* ── Étiquettes : le filet à gauche remplace la gélule ───────────────────── */
.sc-puce, .lot-compte, .veille-etat, .prix-note-forte {
  background: var(--surface2); color: var(--encre);
  box-shadow: inset 3px 0 0 var(--vert-bouteille);
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px 3px 10px;
}

/* ── Cartes : une bordure, pas un flou ───────────────────────────────────── */
.scene { border-color: var(--filet); }

/* ── Corrections de la couche : ce que la première capture a montré ─────── */

/* Le filet de titre courait jusqu'à la fin du paragraphe d'intro, soit 880 px,
   là où la grille qui suit en fait 1160 : il coupait la page en deux. Il passe
   sous le titre seul, pleine largeur, et l'intro se lit dessous. */
.section-titre { padding-bottom: 14px; border-bottom: 2px solid var(--filet-fort); }
.section-titre:has(+ .section-intro) { padding-bottom: 14px; border-bottom: 2px solid var(--filet-fort); }
.section-titre + .section-intro { margin-top: 14px; padding-bottom: 0; border-bottom: 0; }
.section-intro + * { margin-top: 34px; }

/* Les trois dernières ombres portées de la page. */
.ec-cadre, .fonction-vedette { box-shadow: none; }

/* « Trente corvées » : en grille, la rubrique fiscale, deux fois plus longue
   que les autres, restait seule sur une ligne et laissait mille pixels de
   vide à sa droite. En colonnes, les fiches se rangent d'elles-mêmes. */
.lots { display: block; column-count: 3; column-gap: 20px; }
.lot { break-inside: avoid; margin-bottom: 20px; display: inline-block; width: 100%; }
@media (max-width: 900px) { .lots { column-count: 2; } }
@media (max-width: 640px) { .lots { column-count: 1; } }

/* ═══ Deux défauts de la scène « un mandant, un dossier étanche » ═══════════
   1. Sous mouvement réduit, les trois listes de lots restaient à `opacity: 0`
      et la scène montrait une boîte vide : la seule des dix dans ce cas.
   2. Entre deux mandants, la sortie de l'un précédait l'entrée du suivant de
      plus d'une seconde, trois fois par cycle. Les deux fondus se recouvrent
      maintenant. */
@media (prefers-reduced-motion: reduce) {
  .scene-mandants .sc-lots-1 { opacity: 1; }
  .scene-mandants .sc-m1 { background: var(--vert-pale); border-color: var(--vert-bouteille); color: var(--vert-bouteille); }
}
@keyframes sc-lots-visibles {
  0%, 1%    { opacity: 0; transform: translateY(6px); }
  6%, 32%   { opacity: 1; transform: none; }
  37%, 100% { opacity: 0; transform: translateY(-4px); }
}

/* ═══ Les scènes prennent toute la place qu'on leur donne ══════════════════
   `.etape-visuel` est un conteneur flex : la scène, seul enfant, s'y calait
   sur son contenu et laissait soixante pixels de vide à droite, sur toute la
   hauteur du parcours. Elle occupe maintenant sa colonne, et la colonne des
   visuels prend un peu plus large que celle du texte — c'est le dessin qui
   porte la démonstration, le texte ne fait que la nommer.
   La respiration interne et le corps de texte des dix scènes montent d'un
   cran : à taille égale, elles se lisaient comme des vignettes. */
.etape-visuel > .scene { flex: 1 1 auto; width: 100%; }
/* Au-dessus de 900 px seulement : sous cette largeur le parcours passe sur une
   colonne, et redéclarer la grille ici l'aurait remise sur trois — la scène
   sortait alors de l'écran. */
@media (min-width: 901px) {
  .etape { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.18fr); gap: 0 44px; }
  .scene { padding: 26px; font-size: 14px; }
  .sc-voie { min-height: 218px; padding: 15px; }
  .sc-tete { font-size: 12.5px; margin-bottom: 14px; }
  .sc-lib { font-size: 13px; }
  .sc-cloison { min-height: 118px; }
}

/* Le fichier qui tombe passait PAR-DESSUS le titre de la voie : « J'AI DÉJÀ
   UN BAIL » se lisait « J'AI ■■■A UN BAIL » pendant les deux premières
   secondes du cycle. Le titre passe au-dessus et devient opaque : la fiche
   arrive de derrière lui, puis descend dans le carré. C'est le geste qu'on
   veut montrer, sans le mot coupé. */
.sc-voie-titre { position: relative; z-index: 2; background: var(--papier); }
.sc-fichier { z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   PASSAGE AU NOUVEAU DESIGN — 09/09/2026
   ─────────────────────────────────────────────────────────────────────────
   Les 128 icônes et leur sprite de 28 symboles ont été retirés de la page :
   le nouveau design n'en emploie aucune, ni dans l'application, ni dans la
   maquette de la page de vente. Ce qu'elles portaient est repris ici par les
   trois seuls dispositifs du système :

     — le CARRÉ PLEIN de 6 px, marqueur de liste unique (il remplace les
       cinquante-six coches et les puces rondes) ;
     — le FILET À GAUCHE de 3 px, qui dit la gravité sans teinter la carte ;
     — l'ŒIL en petites capitales, qui nomme un bloc sans l'illustrer.

   Et la palette se resserre : le vert, l'encre, et le rouge réservé à ce qui
   coûte de l'argent. Plus de rubans oranges au-dessus des cartes de veille,
   plus de titres verts sur icône orange dans les corvées.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Les têtes de scène, d'alerte et de rubrique : plus d'icône à aligner ── */
.sc-tete, .veille-tete, .lot h3, .fonction-tete h3, .ec-tete { gap: 0; }
.sc-tete { letter-spacing: .14em; }

/* Le jalon du parcours n'est plus une pastille à icône mais un nœud : un
   carré plein de 14 px posé sur le trait, comme un point d'étape sur une
   frise. Le numéro reste où il se lit, en tête de l'étape. */
.etape-pastille, .etape-mince .etape-pastille {
  width: 14px; height: 14px; border: 4px solid var(--papier);
  background: var(--vert-bouteille); box-shadow: none;
  align-self: flex-start; margin-top: 6px;
}
.section-alt .etape-pastille { border-color: var(--surface2); }
.etape-rail::after { top: 24px; }

/* ── « Le logiciel surveille votre parc à votre place » ────────────────────
   Sept cartes portaient quatre rubans de couleur différents — rouge, deux
   oranges, vert — plus un fond rosé et des icônes orange. Sur une page qui
   n'en compte plus que trois, cela faisait un nuancier.
   Une seule carte, une seule bordure. La gravité passe par le filet de
   gauche, et seul l'argent qui manque mérite le rouge. */
.veille {
  border: 1px solid var(--filet); border-top: 1px solid var(--filet);
  box-shadow: inset 3px 0 0 var(--filet-pale);
}
.veille:hover { box-shadow: inset 3px 0 0 var(--vert-bouteille); transform: none; }
.veille-phare {
  background: var(--surface); border-color: var(--filet);
  box-shadow: inset 3px 0 0 var(--rouge);
}
.veille-tete h3 { font-weight: 700; letter-spacing: -.018em; }
.veille-alerte { font-style: normal; color: var(--encre-legere); }
.veille-final {
  background: var(--vert-pale); border-color: var(--filet-pale);
  border-top-color: var(--filet-pale); box-shadow: inset 3px 0 0 var(--vert-bouteille);
}
.veille-final p { color: var(--encre); }

/* ── « Trente corvées que Bailin fait à votre place » ─────────────────────
   Sept titres verts précédés d'une icône orange. Ils passent à l'encre, sur
   le filet noir des têtes de section — le même geste, en plus petit. Le
   compte des lignes devient une étiquette, comme partout ailleurs. */
.lot h3 {
  color: var(--encre); font-size: 16px; letter-spacing: -.02em;
  padding-bottom: 11px; border-bottom: 2px solid var(--filet-fort);
}
.lot li b { font-weight: 700; }
.lot-compte {
  font-family: var(--font-num); font-size: 11px;
  background: var(--surface2); color: var(--encre);
  box-shadow: inset 3px 0 0 var(--vert-bouteille); padding: 2px 8px 2px 10px;
}

/* ── Les quatre rubriques : le numéro et le titre au même régime ─────────── */
.fonction-tete h3 { color: var(--encre); font-weight: 700; letter-spacing: -.024em; }
.apercu-liste li { color: var(--encre-douce); }

/* La cloche de la maquette n'était qu'une icône avec une pastille rouge : sans
   l'icône, il ne restait qu'un carré rouge dans une boîte vide. Elle porte
   maintenant son mot et son compte, comme dans l'application. */
.ec-cloche { padding: 6px 9px; gap: 6px; }
.ec-point {
  position: static; width: auto; height: auto;
  font-family: var(--font-num); font-style: normal; font-size: 10px; font-weight: 700;
  color: var(--blanc); background: var(--danger); padding: 1px 5px;
}

/* Les titres du parcours passent à l'encre : dans le nouveau design, le vert
   bouteille porte les fonds et les traits, pas les titres. */
.etape-texte h3, .etape-mince .etape-texte h3 { color: var(--encre); font-weight: 700; letter-spacing: -.024em; }

/* Le bail qui tombe : sa position de départ était calée sur le coin haut de
   la carte, c'est-à-dire sur le titre lui-même — la fiche s'arrêtait dessus au
   lieu d'atterrir dans le carré. Elle part maintenant de plus haut que la
   carte, passe derrière le titre, et se pose au centre de la zone de dépôt. */
.sc-fichier { top: 46px; }
@keyframes sc-deposer {
  0%        { opacity: 0; transform: translateY(-58px) scale(0.96) }
  8%        { opacity: 1; transform: translateY(-58px) scale(1) }
  20%, 44%  { opacity: 1; transform: translateY(5px) }
  50%, 100% { opacity: 0; transform: translateY(5px) }
}

/* Il manquait la place : entre le bas du titre et le haut du carré de dépôt,
   douze pixels, où une fiche de trente-six ne tient pas. Le titre prend son
   écart, la fiche apparaît dans l'intervalle, puis descend dans le carré.
   Elle ne sort plus jamais de la carte. */
.scene-bail .sc-voie-titre { margin-bottom: 34px; }
.sc-fichier { top: 68px; }
@keyframes sc-deposer {
  0%        { opacity: 0; transform: translateY(-28px) scale(0.96) }
  10%       { opacity: 1; transform: translateY(-28px) scale(1) }
  22%, 44%  { opacity: 1; transform: translateY(5px) }
  50%, 100% { opacity: 0; transform: translateY(5px) }
}

/* La consigne s'efface quand la fiche se pose, pas six pour cent avant. */
@keyframes sc-consigne {
  0%, 16%   { opacity: 1 }
  22%, 46%  { opacity: 0 }
  52%, 100% { opacity: 1 }
}

/* ── Les étiquettes, toutes au même dessin ────────────────────────────────
   Une douzaine de pastilles vert pâle traînaient encore, héritées de l'ancien
   système. Le nouveau n'en connaît qu'une : fond neutre, texte encre, filet
   de 3 px à gauche dont la couleur dit ce qu'il faut comprendre — vert quand
   c'est réglé, rouge quand ça manque, encre quand c'est un simple fait. */
.sc-etat, .ec-recu, .sc-perimetre, .bascule-gain, .sc-ok, .sc-regle, .sc-paye,
.veille-etat, .sc-lu, .sc-signe, .sc-puce, .lot-compte {
  background: var(--surface2); color: var(--encre);
  box-shadow: inset 3px 0 0 var(--vert-bouteille);
  border-radius: 0; padding: 3px 9px 3px 11px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
}
.sc-ko { background: var(--surface2); color: var(--rouge); box-shadow: inset 3px 0 0 var(--rouge); }
.sc-lu, .sc-signe { color: var(--vert-bouteille); }

/* Les initiales : un carré neutre, comme dans l'application. */
.sc-ini, .sc-equipe .sc-ini {
  background: var(--surface2); color: var(--encre-douce);
  box-shadow: inset 3px 0 0 var(--filet-pale);
}

/* Les titres d'offre passent à l'encre, comme tous les titres de la page. */
.tarif h3 { color: var(--encre); font-weight: 700; letter-spacing: -.022em; }
.tarif .prix b, .tarif .prix-sur { font-family: var(--font-num); font-weight: 700; }
.bascule-opt.actif { box-shadow: none; border: 1px solid var(--filet); color: var(--encre); }

/* Les classes DPE gardent leur couleur : c'est une échelle officielle, elle
   se lit à la teinte, et l'application l'affiche déjà ainsi. */

/* Le retard, lui, garde le rouge : c'est de l'argent qui manque. */
.sc-etat.sc-retard, .sc-etat.sc-ko, .ec-etat.ec-relance {
  background: var(--surface2); color: var(--rouge);
  box-shadow: inset 3px 0 0 var(--rouge);
}

/* Les trois dernières ombres portées de la page : la fiche qui tombe, la
   facture qui vole, et le bouton du menu. Le nouveau design n'en a aucune —
   une bordure d'un pixel sépare, pas un flou. */
.sc-fichier, .sc-fact, .nav-burger { box-shadow: none; }

/* ═══ L'ÉTIQUETTE N'A PLUS DE BOÎTE ════════════════════════════════════════
   « Payé » traînait un cadre gris, « Reçu » un fond vert pâle, « F » un fond
   rouge : autant de petites boîtes de couleur pour dire un mot. Le nouveau
   design n'en garde qu'un signe — le filet de 3 px à gauche. Le fond disparaît,
   la bordure aussi, la couleur passe dans le filet et dans le mot.
   ═════════════════════════════════════════════════════════════════════════ */
.sc-etat, .ec-etat, .ec-dpe, .ec-recu, .ec-retard,
.sc-perimetre, .bascule-gain, .sc-ok, .sc-regle, .sc-paye, .sc-attente,
.veille-etat, .sc-lu, .sc-signe, .sc-puce, .lot-compte,
.prix-note-forte, .sc-regime, .fonction-marque, .pastille {
  background: none; border: 0;
  box-shadow: inset 3px 0 0 var(--vert-bouteille);
  padding: 2px 8px 2px 10px; border-radius: 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  color: var(--encre);
}
/* Ce qui manque ou coûte : le filet rouge, et le mot rouge avec lui. */
.sc-etat.sc-ko, .sc-etat.sc-retard, .ec-retard, .ec-dpe-f {
  color: var(--danger); box-shadow: inset 3px 0 0 var(--danger);
}
/* Ce qui est en cours, ni réglé ni en défaut. */
.sc-attente, .ec-dpe-c { color: var(--encre-douce); box-shadow: inset 3px 0 0 var(--filet-pale); }
/* Ce qui est réglé garde le vert dans le mot comme dans le filet. */
.sc-paye, .sc-ok, .sc-regle, .ec-recu, .ec-dpe-b, .sc-lu, .sc-signe { color: var(--vert-bouteille); }

/* Sur le fond vert de la section bancaire, le filet et le mot s'éclaircissent. */
.banque .pastille, .banque-visuel .pastille, .pastille-live {
  color: var(--sur-vert); box-shadow: inset 3px 0 0 var(--vert-clair);
}
.pastille-live::before { display: none; }

/* Les initiales redeviennent un simple carré à filet, sans aplat. */
.sc-ini, .sc-equipe .sc-ini { background: none; color: var(--encre-douce); box-shadow: inset 3px 0 0 var(--filet-pale); }

/* ═══ « TRENTE CORVÉES » : UN TIROIR, PAS SEPT CARTES ══════════════════════
   Sept cartes ouvertes en trois colonnes, c'était mille sept cents pixels de
   texte que personne ne lit et une colonne toujours plus longue que les
   autres. Le nouveau design a son motif pour cela : une liste de tiroirs
   séparés d'un filet, le compte à droite, un « + » qui devient « – ». On voit
   les sept rubriques d'un coup, on ouvre celle qui concerne.
   ═════════════════════════════════════════════════════════════════════════ */
.lots { display: block; column-count: 1; margin-top: 40px; border-top: 1px solid var(--filet); }
.lot {
  display: block; width: 100%; margin: 0;
  background: none; border: 0; border-bottom: 1px solid var(--filet);
  padding: 0;
}
.lot > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 2px;
}
.lot > summary:hover h3 { color: var(--vert-bouteille); }
.lot h3 {
  flex: 1; display: flex; align-items: baseline; gap: 14px;
  font-size: 17px; font-weight: 700; color: var(--encre); letter-spacing: -.02em;
  padding: 0; border: 0; margin: 0;
}
.lot-compte {
  opacity: 1; margin-left: 0;
  font-family: var(--font-num); font-size: 11px;
}
.lot:not([open]) .lot-compte { opacity: 1; }
/* Le signe d'ouverture, en chiffres Archivo comme dans la maquette. */
.lot > summary::after {
  content: "+"; flex: none;
  font-family: var(--font-num); font-size: 19px; font-weight: 700; line-height: 1;
  color: var(--vert-bouteille);
}
.lot[open] > summary::after { content: "–"; }
.lot[open] > summary h3 { color: var(--vert-bouteille); }
/* Le contenu du tiroir : deux colonnes, il tient alors sur trois lignes au
   lieu de dix, et le tiroir suivant reste à portée de regard. */
.lot ul {
  margin: 0 0 18px; padding: 0 40px 0 2px;
  columns: 2; column-gap: 44px;
}
.lot li {
  break-inside: avoid; border-bottom: 0;
  padding: 0 0 14px; font-size: 13px;
}
.lot li:last-child { padding-bottom: 0; }
@media (max-width: 760px) { .lot ul { columns: 1; padding-right: 0; } }

/* ═══════════════════════════════════════════════════════════════════════════
   LES DIX SCÈNES REDESSINÉES
   ─────────────────────────────────────────────────────────────────────────
   Les gestes ne changent pas : le bail tombe dans le carré, le virement se
   rapproche, le balayage trouve le classé F, les factures rejoignent leur
   case, la relance part seule. C'est leur dessin qui change, parce qu'il
   parlait encore l'ancienne langue :

     — des cartes `--papier` posées dans des cartes blanches, là où le nouveau
       design sépare d'un filet et ne remplit rien ;
     — des aplats de couleur pour dire un état — rose pour l'alerte, vert pâle
       pour le réglé, carrés pleins pour le DPE — remplacés par le filet de
       gauche, seul signe d'état du système ;
     — un balayage en DÉGRADÉ D'OR (#A8843C), couleur d'accent d'avant la
       refonte, qui n'existe plus nulle part ailleurs sur le site ;
     — une barre d'histogramme orange là où l'application met le vert ;
     — des chiffres en Montserrat, alors qu'Archivo est la fonte des nombres.

   Les images clés qui animaient un fond animent maintenant le filet : même
   durée, même rythme, même lecture.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── L'œil des scènes, au gabarit des œils de section ─────────────────────── */
.sc-tete {
  font-size: 10px; letter-spacing: .14em; gap: 12px;
  padding-bottom: 9px; margin-bottom: 14px;
  border-bottom: 1px solid var(--filet);
}
.sc-puce { margin-left: auto; }

/* ── Les lignes : un filet les sépare, aucun fond ne les remplit ──────────── */
.sc-biens li, .sc-locs li {
  background: none; border: 0; border-bottom: 1px solid var(--filet);
  box-shadow: inset 3px 0 0 var(--filet-pale);
  padding: 11px 13px;
}
.sc-biens, .sc-locs { gap: 0; }
.sc-biens li:last-child, .sc-locs li:last-child { border-bottom: 0; }
.sc-mnt, .sc-fact em, .sc-bacs b, .sc-compteur b, .sc-total, .sc-consolide b,
.sc-2044 b, .sc-lots li b { font-family: var(--font-num); }

/* Le classé F : la lettre garde la couleur de l'échelle, le carré plein s'en va. */
.sc-dpe {
  width: auto; height: auto; padding: 2px 8px 2px 10px;
  font-size: 11px; background: none;
}
.sc-dpe-f { color: var(--danger); box-shadow: inset 3px 0 0 var(--danger); }
.sc-dpe-c { color: #6B8F3E; box-shadow: inset 3px 0 0 #7FA84A; }
.sc-dpe-b { color: var(--vert-bouteille); box-shadow: inset 3px 0 0 #3E7D5C; }

/* ── Alerte et relance : le filet, pas l'aplat ────────────────────────────── */
.sc-alerte {
  background: none; border: 0; border-top: 1px solid var(--filet);
  box-shadow: inset 3px 0 0 var(--danger);
  margin-top: 14px; padding: 11px 13px;
}
.sc-relance {
  background: none; border: 0; border-top: 1px solid var(--filet);
  box-shadow: inset 3px 0 0 var(--vert-bouteille);
  margin-top: 14px; padding: 11px 13px; color: var(--encre);
}
.sc-relance b, .sc-alerte b { font-weight: 700; }

/* ── L'état d'une ligne s'anime dans son filet ────────────────────────────── */
@keyframes sc-signaler {
  0%, 14%   { box-shadow: inset 3px 0 0 var(--filet-pale) }
  24%, 92%  { box-shadow: inset 3px 0 0 var(--danger) }
  100%      { box-shadow: inset 3px 0 0 var(--danger) }
}
@keyframes sc-tension {
  0%, 16%   { box-shadow: inset 3px 0 0 var(--filet-pale) }
  24%, 62%  { box-shadow: inset 3px 0 0 var(--danger) }
  72%, 92%  { box-shadow: inset 3px 0 0 var(--vert-bouteille) }
  100%      { box-shadow: inset 3px 0 0 var(--vert-bouteille) }
}

/* ── Le balayage du parc : vert, et non plus l'or d'avant la refonte ──────── */
.sc-scan {
  background: linear-gradient(to bottom,
    rgba(23, 64, 47, 0), rgba(23, 64, 47, 0.10), rgba(23, 64, 47, 0));
}

/* ── Les trois cases fiscales : elles se remplissent par le filet ─────────── */
.sc-bacs li {
  border: 0; border-top: 1px solid var(--filet);
  box-shadow: inset 3px 0 0 var(--filet-pale);
  background: none; text-align: left; padding: 11px 12px;
}
.sc-bacs span { font-size: 9.5px; letter-spacing: .14em; }
.sc-bacs b { font-size: 18px; font-weight: 700; color: var(--encre); }
@keyframes sc-remplir {
  0%, 13%   { box-shadow: inset 3px 0 0 var(--filet-pale) }
  17%, 92%  { box-shadow: inset 3px 0 0 var(--vert-bouteille) }
  100%      { box-shadow: inset 3px 0 0 var(--vert-bouteille) }
}
.sc-fact { border: 1px solid var(--filet); }

/* ── L'histogramme suit celui de l'application ────────────────────────────── */

/* ── La flèche du rapprochement : l'encre, comme les filets forts ─────────── */
.sc-fleche i { background: var(--filet-fort); }
.sc-fleche::after { border-top-color: var(--filet-fort); }

/* ── Immobilité demandée : l'état final suit le nouveau dessin ────────────── */
@media (prefers-reduced-motion: reduce) {
  .sc-bacs li { box-shadow: inset 3px 0 0 var(--vert-bouteille); background: none; border-style: solid; }
  .sc-biens li:first-child { box-shadow: inset 3px 0 0 var(--danger); background: none; }
  .sc-retard { box-shadow: inset 3px 0 0 var(--vert-bouteille); }
}

/* ── Les derniers blocs pleins des scènes ─────────────────────────────────
   Cartes dans la carte, encore : les lignes de loyers, les blocs de chiffres,
   le graphe de cash-flow, les cases de la consolidée, les lots d'un mandant.
   Tous à plat, séparés d'un filet, l'état dans le filet de gauche. */
.sc-loyers li, .sc-2044 li, .sc-fiscal-pro li, .sc-mandants li, .sc-consolide li {
  background: none; border: 0; border-bottom: 1px solid var(--filet);
  padding: 10px 12px;
}
.sc-loyers, .sc-2044, .sc-fiscal-pro, .sc-mandants { gap: 0; }
.sc-loyers li:last-child, .sc-2044 li:last-child,
.sc-fiscal-pro li:last-child, .sc-mandants li:last-child { border-bottom: 0; }
.sc-consolide li { border: 0; border-top: 1px solid var(--filet); box-shadow: inset 3px 0 0 var(--filet-pale); }
.sc-consolide b { font-family: var(--font-num); font-weight: 700; }
.sc-bloc, .sc-cashflow, .sc-graphe-carte {
  background: none; border: 0; border-top: 1px solid var(--filet);
}
.sc-voie { background: none; border: 1px solid var(--filet); }
.sc-voie-titre { background: var(--surface); }
.sc-zone { background: var(--surface2); border: 1px dashed var(--filet-pale); }
.sc-fichier { background: var(--surface); border: 1px solid var(--filet-fort); }
.sc-champs li i, .sc-champs i { background: var(--surface2); }
.sc-encours, .sc-attente { background: none; }

/* ── « Au choix » : la voie active se marque au filet, pas au fond ─────────
   Les deux voies s'éclairaient en changeant de fond — blanc contre papier —
   et de bordure. Sur un design qui ne remplit plus rien, il ne restait qu'un
   gris terne. C'est le filet du haut qui s'allume maintenant : la voie active
   porte le trait d'encre, l'autre le filet clair. */
.sc-voie { background: none; border: 1px solid var(--filet); box-shadow: inset 0 3px 0 var(--filet-pale); }
@keyframes sc-voie-a {
  0%, 42%  { box-shadow: inset 0 3px 0 var(--vert-bouteille) }
  50%, 96% { box-shadow: inset 0 3px 0 var(--filet-pale) }
  100%     { box-shadow: inset 0 3px 0 var(--filet-pale) }
}
@keyframes sc-voie-b {
  0%, 46%  { box-shadow: inset 0 3px 0 var(--filet-pale) }
  54%, 96% { box-shadow: inset 0 3px 0 var(--vert-bouteille) }
  100%     { box-shadow: inset 0 3px 0 var(--vert-bouteille) }
}
/* Les champs qui se remplissent : la barre passe au vert plein, comme les
   jauges de l'application, et non plus au vert pâle décoratif. */
.sc-champs li { background: var(--surface2); border: 0; height: 14px; }
.sc-champs i { background: var(--vert-bouteille); }
.sc-champs-lus li { background: none; border: 0; border-bottom: 1px solid var(--filet); }

/* Immobilité demandée. */
@media (prefers-reduced-motion: reduce) {
  .scene-bail .sc-voie-import { box-shadow: inset 0 3px 0 var(--vert-bouteille); }
  .scene-bail .sc-voie-generer { box-shadow: inset 0 3px 0 var(--vert-bouteille); }
}

/* Le bouton de la huitième case était secondaire — transparent — sur un fond
   vert pâle : il n'avait plus ni contour ni contraste. Il devient l'action
   qu'il est. */
.veille-final .btn { background: var(--vert-bouteille); color: #fff; border-color: var(--vert-bouteille); }

/* ═══════════════════════════════════════════════════════════════════════════
   LE MOUVEMENT, ET NON PLUS SEULEMENT SES COULEURS
   ─────────────────────────────────────────────────────────────────────────
   Repeindre les scènes ne suffisait pas : c'est leur façon de bouger qui
   datait. L'ancienne page animait en douze secondes adoucies, avec des objets
   qui apparaissent de nulle part (`opacity: 0`), dérivent de six pixels,
   rétrécissent à 0,9, puis s'effacent — si bien qu'à tout instant une partie
   de la scène était vide ou en train de disparaître.

   La maquette du nouveau design tient sa grammaire en quatre règles, et elle
   les tient partout :

     1. NEUF SECONDES, `linear`. Jamais de courbe d'accélération : une
        transition adoucie raconte un mouvement, or ici rien ne se déplace.
     2. RIEN NE DISPARAÎT. Ce qui n'est pas encore arrivé est là, en veilleuse
        à 42 % ; quand son tour vient, il passe à 100 % et Y RESTE. La scène
        est lisible à l'arrêt, à n'importe quelle image.
     3. AUCUN DÉPLACEMENT, aucune mise à l'échelle. Un état ne se déplace pas,
        il bascule : le filet change de couleur en quatre pour cent, puis tient.
     4. CE QUI POUSSE NE RECULE PAS. Une jauge, un trait, une barre partent de
        zéro, atteignent leur valeur et la gardent jusqu'à la fin de la boucle.

   Une seule exception, assumée : le bail tombe encore dans son carré. C'est le
   geste que la page doit montrer. Mais il tombe droit, en linéaire, sans
   rapetisser, et il ne s'efface plus — il reste dans la zone.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 1. Le dépôt du bail ──────────────────────────────────────────────────── */
@keyframes sc-deposer {
  0%, 8%    { opacity: .42; transform: translateY(-26px) }
  22%, 100% { opacity: 1;   transform: translateY(5px) }
}
@keyframes sc-consigne {
  0%, 18%   { opacity: 1 }
  24%, 100% { opacity: .3 }
}
@keyframes sc-lu {
  0%, 30%   { opacity: .42 }
  36%, 100% { opacity: 1 }
}
@keyframes sc-remplir-champ {
  0%       { background-size: 0% 100% }
  30%, 100% { background-size: 100% 100% }
}
@keyframes sc-signer {
  0%       { stroke-dashoffset: 300 }
  46%, 100% { stroke-dashoffset: 0 }
}
@keyframes sc-signe {
  0%, 52%   { opacity: .42 }
  58%, 100% { opacity: 1 }
}
/* « Au choix » : la voie active porte le filet vert, l'autre le filet clair.
   Une bascule, pas un fondu. */
@keyframes sc-voie-a {
  0%, 44%   { box-shadow: inset 0 3px 0 var(--vert-bouteille) }
  48%, 100% { box-shadow: inset 0 3px 0 var(--filet-pale) }
}
@keyframes sc-voie-b {
  0%, 44%   { box-shadow: inset 0 3px 0 var(--filet-pale) }
  48%, 100% { box-shadow: inset 0 3px 0 var(--vert-bouteille) }
}
@keyframes sc-inscrire {
  0%, 6%    { opacity: .42 }
  14%, 100% { opacity: 1 }
}
@keyframes sc-echeancier {
  0%, 56%   { opacity: .42 }
  62%, 100% { opacity: 1 }
}

/* ── 3. La chaîne : le virement, le pointage, les conséquences ────────────── */
@keyframes sc-entrer   { 0%, 6%  { opacity: .42 } 14%, 100% { opacity: 1 } }
@keyframes sc-tracer   { 0%      { height: 0 }    34%, 100% { height: 16px } }
@keyframes sc-pointe   { 0%, 30% { opacity: 0 }   36%, 100% { opacity: 1 } }
@keyframes sc-apparaitre { 0%, 34% { opacity: .42 } 42%, 100% { opacity: 1 } }
@keyframes sc-compteur { 0%, 52% { opacity: .42 } 60%, 100% { opacity: 1 } }
@keyframes sc-barre    { 0%      { height: 8% }   48%, 100% { height: var(--h, 70%) } }
@keyframes pousse-barre{ 0%      { transform: scaleY(.06) } 44%, 100% { transform: scaleY(1) } }
@keyframes sc-tracer-courbe { 0% { stroke-dashoffset: var(--trace-len) } 56%, 100% { stroke-dashoffset: 0 } }
@keyframes sc-projeter { 0%, 62% { opacity: 0 }   70%, 100% { opacity: .55 } }
@keyframes sc-aire     { 0%, 56% { opacity: 0 }   64%, 100% { opacity: .10 } }
@keyframes sc-sortir   { 0%, 26% { opacity: 1 }   32%, 100% { opacity: 0 } }

/* ── 4. Les revenus : deux encaissements, puis l'impayé et sa relance ─────── */
@keyframes sc-encaisser {
  0%, 8%    { opacity: .42; box-shadow: inset 3px 0 0 var(--filet-pale) }
  16%, 100% { opacity: 1;   box-shadow: inset 3px 0 0 var(--vert-bouteille) }
}
@keyframes sc-tension {
  0%, 30%   { box-shadow: inset 3px 0 0 var(--filet-pale) }
  36%, 70%  { box-shadow: inset 3px 0 0 var(--danger) }
  76%, 100% { box-shadow: inset 3px 0 0 var(--vert-bouteille) }
}
@keyframes sc-etat-1  { 0%, 30% { opacity: 1 } 34%, 100% { opacity: 0 } }
@keyframes sc-etat-2b { 0%, 32% { opacity: 0 } 36%, 100% { opacity: 1 } }
@keyframes sc-etat-2  { 0%, 32% { opacity: 0 } 36%, 70% { opacity: 1 } 74%, 100% { opacity: 0 } }
@keyframes sc-etat-3  { 0%, 72% { opacity: 0 } 76%, 100% { opacity: 1 } }
@keyframes sc-relance-auto { 0%, 46% { opacity: .42 } 54%, 100% { opacity: 1 } }
@keyframes sc-partir       { 0%, 46% { opacity: .42 } 54%, 100% { opacity: 1 } }

/* ── 5. Le parc : plus de faisceau, les lignes s'allument l'une après l'autre */
@keyframes sc-signaler {
  0%, 10%   { box-shadow: inset 3px 0 0 var(--filet-pale) }
  18%, 100% { box-shadow: inset 3px 0 0 var(--danger) }
}
@keyframes sc-alerter  { 0%, 50% { opacity: .42 } 58%, 100% { opacity: 1 } }
@keyframes sc-lister   { 0%, 6%  { opacity: .42 } 16%, 100% { opacity: 1 } }

/* ── 6. La fiscalité : les factures ne tombent plus, elles se rangent ─────── */
@keyframes sc-tomber   { 0%, 6%  { opacity: .42 } 16%, 100% { opacity: 1 } }
@keyframes sc-remplir {
  0%, 14%   { box-shadow: inset 3px 0 0 var(--filet-pale) }
  20%, 100% { box-shadow: inset 3px 0 0 var(--vert-bouteille) }
}
@keyframes sc-chiffre  { 0%, 14% { opacity: .34 } 22%, 100% { opacity: 1 } }

/* ── 7. Le mandant actif, et ses lots ─────────────────────────────────────── */
@keyframes sc-mandant-actif {
  0%, 2%    { box-shadow: inset 3px 0 0 var(--filet-pale); color: var(--encre-douce) }
  6%, 32%   { box-shadow: inset 3px 0 0 var(--vert-bouteille); color: var(--encre) }
  36%, 100% { box-shadow: inset 3px 0 0 var(--filet-pale); color: var(--encre-douce) }
}
/* Exactement une liste visible à tout instant : la précédente s'éteint à
   l'image où la suivante s'allume, sans intervalle vide. */
@keyframes sc-lots-visibles {
  0%, 33%   { opacity: 1 }
  34%, 100% { opacity: 0 }
}

/* ── Ce que la nouvelle grammaire change dans la structure des scènes ─────── */

/* Le faisceau qui balayait le parc s'en va. Un dégradé qui glisse sur trois
   lignes, c'est le vocabulaire de l'ancienne page ; ici la lecture se fait par
   allumage successif, ligne après ligne, et le classé F garde ensuite son
   filet rouge. */
.sc-scan { display: none; }
.sc-biens li, .sc-locs li { opacity: .42; animation: sc-lister 9s linear infinite; }
.sc-biens li:nth-child(1), .sc-locs li:nth-child(1) { animation-delay: 0s }
.sc-biens li:nth-child(2), .sc-locs li:nth-child(2) { animation-delay: .5s }
.sc-biens li:nth-child(3), .sc-locs li:nth-child(3) { animation-delay: 1s }
/* Le premier bien porte DEUX animations : il s'allume comme les autres, puis
   son filet bascule au rouge. */
.sc-biens li:first-child {
  animation: sc-lister 9s linear infinite, sc-signaler 9s linear infinite;
}
.sc-locs .sc-retard {
  animation: sc-lister 9s linear infinite, sc-tension 9s linear infinite;
}

/* Les trois factures ne tombent plus : elles sont posées côte à côte, et
   s'allument dans l'ordre où leurs cases se remplissent. Une pluie d'objets
   qui rétrécissent en tombant, c'était le geste d'avant. */
.scene-fiscal .sc-pluie {
  height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.sc-fact {
  position: static; min-width: 0; opacity: .42;
  border: 0; border-top: 1px solid var(--filet);
  box-shadow: inset 3px 0 0 var(--filet-pale);
  padding: 9px 11px;
}
.sc-f1 { animation-delay: 0s } .sc-f2 { animation-delay: 3s } .sc-f3 { animation-delay: 6s }
.sc-bac-1, .sc-bac-1 b { animation-delay: .6s }
.sc-bac-2, .sc-bac-2 b { animation-delay: 3.6s }
.sc-bac-3, .sc-bac-3 b { animation-delay: 6.6s }

/* Plus rien ne part de l'invisible : ce qui n'est pas encore arrivé est là,
   en veilleuse. Une scène arrêtée sur n'importe quelle image se lit en
   entier. */
.sc-champs-lus li, .sc-echeancier, .sc-relance-auto, .sc-relance, .sc-alerte,
.sc-compteur b, .sc-total, .sc-lu, .sc-signe, .sc-pointe, .sc-bacs b{ opacity: .42; }

/* Immobilité demandée : tout est allumé, rien n'est en veilleuse. */
@media (prefers-reduced-motion: reduce) {
  .sc-biens li, .sc-locs li, .sc-fact, .sc-champs-lus li, .sc-echeancier,
  .sc-relance-auto, .sc-relance, .sc-alerte, .sc-compteur b, .sc-total,
  .sc-lu, .sc-signe, .sc-pointe, .sc-bacs b{ opacity: 1; }
  .sc-fichier { transform: translateY(5px); opacity: 1; }
  .sc-zone em { opacity: .3; }
}

/* ── Remettre la scène du bail dans l'ordre où on la lit ──────────────────
   Les trois champs se remplissaient à la sixième seconde, après que la
   signature était tracée : on signait un formulaire vide. Ils se remplissent
   d'abord, la signature suit, la mention « Signé en ligne » ferme la marche. */
.sc-champs li:nth-child(1) i { animation-delay: .2s }
.sc-champs li:nth-child(2) i { animation-delay: .5s }
.sc-champs li:nth-child(3) i { animation-delay: .8s }
/* La consigne est REMPLACÉE par la fiche, elle ne cohabite pas avec : les deux
   se superposaient dans le carré, dix pixels de texte dépassant sous le PDF. */
@keyframes sc-consigne {
  0%, 16%   { opacity: 1 }
  22%, 100% { opacity: 0 }
}
/* Dernier aplat vert de la page : la note fiscale. Un filet suffit. */
.sc-note-fiscale {
  background: none; border: 0; border-top: 1px solid var(--filet);
  box-shadow: inset 3px 0 0 var(--vert-bouteille); color: var(--encre);
}

/* ── Le carré de dépôt redevient un carré ─────────────────────────────────
   En aplatissant les scènes, la zone avait fini en filet vert très pâle sur
   fond presque blanc : elle ne se voyait plus. Or c'est elle le sujet — « un
   carré fait exprès ». Trait discontinu à l'encre claire, et la fiche se pose
   au centre. */
.sc-zone {
  height: 54px; background: none;
  border: 1px dashed var(--encre-legere);
}
.sc-fichier { top: 68px; }
@keyframes sc-deposer {
  0%, 8%    { opacity: .42; transform: translateY(-26px) }
  22%, 100% { opacity: 1;   transform: translateY(9px) }
}

/* ── Les trois champs ne se remplissaient pas ─────────────────────────────
   La barre de remplissage était posée à `width: 0`, et l'animation faisait
   varier `background-size` : sur une boîte de largeur nulle, cela ne montre
   rien. Depuis toujours, les champs « Nom, Prénom, Adresse » restaient vides.
   C'est la largeur qui pousse. */
@keyframes sc-remplir-champ {
  0%        { width: 0 }
  30%, 100% { width: 100% }
}

/* La jauge d'un champ est verte ; c'est la piste qui est grise. Une règle
   posée plus haut les avait mises de la même couleur, et le remplissage ne
   se voyait pas. */
.sc-champs li { background: var(--surface2); }
.sc-champs li i { background: var(--vert-bouteille); }

/* Dernier aplat : la ligne de relance automatique. */
.sc-relance-auto {
  background: none; border: 0; border-top: 1px solid var(--filet);
  box-shadow: inset 3px 0 0 var(--vert-bouteille); color: var(--encre);
}

/* Les douze barres du héros poussaient sur une courbe de rebond de 0,62 s —
   le ressort de l'ancienne page. Elles poussent maintenant en linéaire, un
   peu plus lentement, l'une après l'autre : une jauge qui se remplit, pas un
   objet qui rebondit. */
.ec-graphe li { animation: pousse-barre .9s linear backwards; }
@keyframes pousse-barre { 0% { transform: scaleY(.06) } 100% { transform: scaleY(1) } }

/* ═══════════════════════════════════════════════════════════════════════════
   ALIGNÉ SUR L'APPLICATION — 09/09/2026
   ─────────────────────────────────────────────────────────────────────────
   Les composants ci-dessous sont recopiés de `design.css`, pas réinventés :
   même étiquette, mêmes carrés de DPE, mêmes tons d'alerte, même repère de
   révision. Une page de vente qui montre le produit doit montrer LE produit.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── L'étiquette de l'application, à l'identique ──────────────────────────
   design.css : `background:none; box-shadow:none; border-left:3px solid;
   padding:0 8px 0 9px`. Les tons : vert par défaut, rouge pour ce qui manque,
   orange/ambre pour ce qui arrive, encre légère pour le reste — le bleu a été
   neutralisé dans l'application (`--bleu: var(--encre-legere)`). */
.sc-etat, .ec-etat, .ec-recu, .ec-retard, .sc-perimetre, .bascule-gain,
.sc-ok, .sc-regle, .sc-paye, .sc-attente, .veille-etat, .sc-lu, .sc-signe,
.sc-puce, .lot-compte, .prix-note-forte, .sc-regime,
.fonction-marque, .pastille {
  background: none; box-shadow: none;
  border-left: 3px solid var(--vert-bouteille);
  padding: 0 8px 0 9px; color: var(--encre);
  display: inline-block; text-align: left; line-height: 18px;
}
.sc-etat.sc-ko, .sc-etat.sc-retard, .ec-retard {
  border-left-color: var(--danger); color: var(--danger);
}
.sc-attente, .sc-encours { border-left-color: var(--filet); color: var(--encre-legere); }
.sc-paye, .sc-ok, .sc-regle, .ec-recu, .sc-lu, .sc-signe { border-left-color: var(--vert-bouteille); }
.banque .pastille, .pastille-live { border-left-color: var(--vert-clair); color: var(--sur-vert); }
.fonction-marque { border-left-color: var(--orange); color: var(--ambre); }

/* ── Le DPE de l'application : un carré, ses sept teintes officielles ─────
   design.css lignes 232-236. Il était devenu un filet : ce n'est pas ce que
   le bailleur voit dans son logiciel. */
.sc-dpe, .ec-dpe {
  display: grid; place-items: center;
  width: 20px; height: 20px; padding: 0;
  font-style: normal; font-size: 11px; font-weight: 700;
  border: 0; box-shadow: none; background: none;
  color: #fff;
}
.sc-dpe-b, .ec-dpe-b { background: #3E7D5C; color: #fff; }
.sc-dpe-c, .ec-dpe-c { background: #7FA84A; color: var(--encre); }
.sc-dpe-d, .ec-dpe-d { background: #E4B106; color: var(--encre); }
.sc-dpe-f, .ec-dpe-f { background: #B4471B; color: #fff; }

.veille.niveau-danger .veille-action { color: var(--encre); }
.veille-action { color: var(--encre-douce); }
.veille-action strong, .veille-action b { color: var(--encre); }

/* ── Le repère de révision IRL, comme dans l'application ──────────────────
   `design.css` : `.cf-pt-rev { fill: var(--orange) }`, et le point de la
   légende est ROND — c'est le seul rond de tout le système, réservé aux
   jalons d'un graphe. */

/* La mention « le plus demandé » se tient à côté du numéro, sur sa ligne. */
.fonction-num .fonction-marque { font-size: 10px; }

/* ── Les lignes de loyer : une seule colonne d'état, les traits alignés ───
   Les étiquettes suivaient la largeur du montant : trois traits verts à trois
   abscisses différentes. L'état prend sa colonne, comme dans la liste des
   biens de l'application. */
.sc-loyers li { grid-template-columns: 1fr 92px 76px; align-items: center; }
.sc-loyers .sc-mnt { text-align: right; }
.sc-loyers .sc-etat { justify-self: start; }

/* ═══ LA CHAÎNE BANCAIRE ═══════════════════════════════════════════════════
   L'animation de la maquette, reprise telle quelle : un fil descend le long
   des quatre étapes et allume chaque jalon au passage. Huit secondes,
   linéaire. C'est un enchaînement, et il se lit comme tel — quatre cases qui
   s'allument à tour de rôle ne donnaient qu'un clignotement.
   ═════════════════════════════════════════════════════════════════════════ */

/* ═══ UN PEU PLUS DE VERT CLAIR ════════════════════════════════════════════
   La page était devenue très blanche : encre, filets, et le vert seulement
   dans les traits d'état. Le vert pâle revient là où il porte quelque chose —
   l'œil des sections, le survol d'un tiroir, les mois révisés du calendrier,
   la piste des jauges. */
.section-tag, .section-tag-clair { color: var(--vert-bouteille); }
.lot > summary:hover { background: var(--vert-pale); }
.sc-champs li { background: var(--vert-pale); }
.ec-graphe li { background: var(--vert-pale); border-bottom-color: var(--vert-clair); }
.etape-mince .etape-texte { background: var(--vert-pale); }
.sc-tete { color: var(--vert-bouteille); border-bottom-color: var(--filet-pale); }

/* Les étiquettes d'état n'ont plus de boîte, y compris les variantes qui
   portaient leur fond en propre et l'emportaient sur la règle générale. */
.sc-etat.sc-retard, .sc-etat.sc-ko, .sc-etat.sc-attente, .sc-etat.sc-encours,
.sc-etat.sc-paye, .sc-etat.sc-ok, .sc-etat.sc-regle,
.ec-etat.ec-recu, .ec-etat.ec-retard {
  background: none; border: 0; box-shadow: none;
}

/* En retirant les boîtes des variantes, j'avais aussi retiré leur filet :
   « Reçu » et « Retard » se lisaient sans leur trait. On le remet, c'est lui
   qui porte l'état. */
.sc-etat.sc-paye, .sc-etat.sc-ok, .sc-etat.sc-regle, .ec-etat.ec-recu {
  border-left: 3px solid var(--vert-bouteille); color: var(--vert-bouteille);
}
.sc-etat.sc-retard, .sc-etat.sc-ko, .ec-etat.ec-retard {
  border-left: 3px solid var(--danger); color: var(--danger);
}
.sc-etat.sc-attente, .sc-etat.sc-encours {
  border-left: 3px solid var(--filet); color: var(--encre-legere);
}

/* ═══ ALIGNEMENT DES SCÈNES PRO ════════════════════════════════════════════
   Les libellés et les chiffres étaient rentrés de vingt-sept pixels dans des
   cellules dont le filet, lui, partait du bord : trois alignements différents
   dans le même bloc. Une seule règle désormais —

     · une cellule coiffée d'un filet HORIZONTAL : texte au ras du filet ;
     · une ligne portant un filet VERTICAL à gauche : texte à onze pixels,
       la largeur du filet plus son écart.
   ═════════════════════════════════════════════════════════════════════════ */
.sc-consolide li, .sc-bacs li, .sc-fact {
  padding: 10px 0 13px; box-shadow: none;
  border-top: 1px solid var(--filet);
}
.sc-consolide li span, .sc-bacs span { padding: 0; }
.sc-loyers li, .sc-biens li, .sc-locs li, .sc-mandants li,
.sc-2044 li, .sc-fiscal-pro li, .sc-equipe li{
  padding-left: 11px; padding-right: 0;
}
.sc-lots li { padding-left: 11px; }
.sc-champs-lus li { padding-left: 11px; padding-right: 0; }

/* La note d'échéance : un filet rouge, plus une boîte rouge. */
.sc-consolide-note, .sc-alerte {
  background: none; border: 0; border-top: 1px solid var(--filet);
  box-shadow: inset 3px 0 0 var(--danger);
  padding: 11px 0 11px 11px; margin-top: 14px;
}

/* Les chiffres de la consolidée suivent l'application : Archivo, et le rouge
   réservé au retard. */
.sc-consolide b { font-family: var(--font-num); font-weight: 700; font-size: 20px; color: var(--encre); }
.sc-consolide .sc-rouge { color: var(--danger) !important; }
.sc-consolide .sc-vert { color: var(--encre) !important; }

/* ── Les trois listes de lots se chevauchaient ────────────────────────────
   Elles sont superposées en absolu, et chacune restait allumée jusqu'à
   33,3 % pendant que la suivante démarrait à 0 % — au tiers exactement, deux
   listes s'affichaient l'une sur l'autre, et les adresses se lisaient en
   double. La visible s'éteint maintenant avant que la suivante n'arrive. */
@keyframes sc-lots-visibles {
  0%, 31%   { opacity: 1 }
  32%, 100% { opacity: 0 }
}
@keyframes sc-mandant-actif {
  0%, 31%   { box-shadow: inset 3px 0 0 var(--vert-bouteille); color: var(--encre) }
  32%, 100% { box-shadow: inset 3px 0 0 var(--filet-pale); color: var(--encre-douce) }
}
/* Une seule liste porte le fond de la scène : sans cela, la liste éteinte
   laissait ses filets visibles sous la liste allumée. */
.sc-lots { background: var(--surface); }
.sc-lots li { border-bottom: 1px solid var(--filet); padding: 8px 0 8px 11px; }

/* ── Le repère de révision IRL ────────────────────────────────────────────
   Il était posé en veilleuse à 42 % : présent du début à la fin de la boucle,
   donc jamais un événement. Il ARRIVE à son moment — comme dans l'échéancier
   de l'application, où la révision est un jalon daté — et il reste ensuite. */

/* L'opacité seule ne suffisait pas : une liste à `opacity: 0` occupe toujours
   sa place et reste peinte le temps d'une image, d'où les adresses lues en
   double. `visibility` s'anime par paliers — exactement une liste est dans le
   document à chaque instant, et le repli sans animation n'en montre qu'une. */
.sc-lots { visibility: hidden; }
@keyframes sc-lots-visibles {
  0%        { opacity: 1; visibility: visible }
  31%       { opacity: 1; visibility: visible }
  32%       { opacity: 0; visibility: hidden }
  100%      { opacity: 0; visibility: hidden }
}
@media (prefers-reduced-motion: reduce) {
  .scene-mandants .sc-lots-1 { opacity: 1; visibility: visible; }
  .scene-mandants .sc-lots-2, .scene-mandants .sc-lots-3 { opacity: 0; visibility: hidden; }
}

/* ── La bascule de tarif, au dessin du sélecteur de période de l'app ──────
   `.segmented-btn` : boutons blancs à filet, collés, et l'actif en VERT PLEIN
   avec le texte blanc — pas une pastille blanche décollée par une ombre. */
.bascule {
  gap: 0; padding: 0; background: none;
  border: 1px solid var(--filet); width: fit-content; margin: 26px auto 0;
}
.bascule-opt {
  background: var(--surface); color: var(--encre-douce);
  border: 0; border-right: 1px solid var(--filet);
  padding: 10px 18px; font-size: 13px; font-weight: 600; gap: 9px;
}
.bascule-opt:last-child { border-right: 0; }
.bascule-opt:hover { background: var(--vert-pale); color: var(--vert-bouteille); }
.bascule-opt.actif {
  background: var(--vert-bouteille); color: #fff; border-color: var(--vert-bouteille);
  box-shadow: none;
}

/* ── Les champs du bail : le libellé À GAUCHE, la piste à droite ──────────
   Le <li> contient un <span> (le libellé) et un <i> (la jauge). En rendant le
   <li> haut de quatorze pixels et l'<i> large de cent pour cent, la jauge
   passait PAR-DESSUS le mot : « NOM » se lisait sur fond vert plein. Le li
   devient une ligne à deux colonnes — c'est aussi ainsi que l'application
   dessine un champ. */
.sc-champs { gap: 6px; }
.sc-champs li {
  display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 10px;
  height: auto; background: none; border: 0; overflow: visible;
}
.sc-champs li span {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--encre-legere);
}
.sc-champs li i {
  display: block; height: 13px; width: 0;
  background: var(--vert-bouteille);
  box-shadow: inset 0 0 0 100px var(--vert-bouteille);
}
/* La piste grise derrière la jauge. */
.sc-champs li::after { content: none; }
.sc-champs li { position: relative; }
.sc-champs li::before {
  content: ''; position: absolute; left: 84px; right: 0; top: 50%;
  height: 13px; margin-top: -6.5px; background: var(--vert-pale); z-index: 0;
}
.sc-champs li i { position: relative; z-index: 1; }

/* Les six barres des revenus du mois étaient à 38 % d'opacité sur du vert
   clair : elles ne se voyaient plus. Elles reprennent le vert pâle plein de
   l'histogramme de l'application, et la dernière le vert bouteille. */
/* LA COULEUR DES BARRES, UNE SEULE FOIS. Elle était énoncée quatre fois, et
   deux fois en contradiction — vert pâle plein d'un côté, vert clair à 38 % de
   l'autre. Le mois qui vient d'être encaissé porte le vert de marque ; les
   précédents, le vert pâle. */
.sc-barres li { background: var(--vert-pale); opacity: 1; }
.sc-barres li:last-child { background: var(--vert-bouteille); }

/* ── La première image de la scène doit être propre ───────────────────────
   À l'instant zéro — celle que voit un visiteur qui arrive, et celle que
   capture une vignette — la fiche partait de vingt-six pixels au-dessus du
   carré, c'est-à-dire À CHEVAL sur son bord : le trait discontinu barrait le
   nom du fichier. L'écart sous le titre passe à cinquante-deux pixels, de
   quoi loger la fiche entière avant sa descente. */
.scene-bail .sc-voie-titre { margin-bottom: 52px; }
.sc-fichier { top: 86px; }
@keyframes sc-deposer {
  0%, 8%    { opacity: .42; transform: translateY(-41px) }
  22%, 100% { opacity: 1;   transform: translateY(9px) }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ██  SYSTÈME — UNE SEULE DÉFINITION PAR COMPOSANT  ██
   ─────────────────────────────────────────────────────────────────────────
   Les couches précédentes se sont empilées : trois régimes de barre verticale,
   trois familles de badge, quatre traitements de carte. Ce bloc est la source
   unique. Il vient en dernier, il gagne, et rien ne doit plus le contredire.

   LES QUATRE PRIMITIVES

   1. LE FILET D'ÉTAT — `.filet-*`, posé en `border-left: 3px`
      Toujours 3 px, toujours pleine hauteur de son bloc, toujours à
      l'extérieur du texte (jamais en `box-shadow: inset`, qui empiète sur le
      rembourrage et mange la première lettre).
        vert    ce qui est réglé          rouge   ce qui manque ou coûte
        orange  ce qui arrive             filet   un simple fait

   2. LE BADGE — `.et`, recopié de l'application (design.css l. 1598)
      `background:none; border-left:3px; padding:0 8px 0 9px`. Aucune pilule,
      aucun fond. Le mot porte le sens, le filet porte l'état.

   3. LA CARTE — `.carte`
      Fond `--surface`, filet 1 px sur les quatre côtés, angles droits, aucune
      ombre. Une variante et une seule : `.carte--vedette`, filet 2 px encre.

   4. LE MARQUEUR DE LISTE — un carré plein de 6 px, `--vert-clair`.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --filet-etat: 3px;
  --duree: .22s;          /* toute transition d'interaction */
  --courbe: linear;       /* toute animation de scène */
  --boucle: 9s;           /* toute boucle de scène */
}

/* ── 1. LE FILET D'ÉTAT ────────────────────────────────────────────────────
   `box-shadow: inset` peignait la barre PAR-DESSUS le contenu : dans les
   blocs « Déductible » et « Récupérable », elle recouvrait la première
   lettre et l'on lisait « ÉDUCTIBLE ». Une bordure occupe sa propre place. */
.sc-biens li, .sc-locs li, .sc-loyers li, .sc-mandants li, .sc-bacs li,
.sc-fact, .sc-consolide li, .sc-alerte, .sc-relance, .sc-relance-auto,
.sc-consolide-note, .sc-note-fiscale, .veille, .sc-voie,
.sc-champs-lus li, .sc-2044 li, .sc-fiscal-pro li, .sc-equipe li, .sc-lots li {
  box-shadow: none;
}
.sc-bacs li, .sc-fact, .sc-consolide li {
  border: 0; border-left: var(--filet-etat) solid var(--filet);
  border-top: 0; padding: 9px 12px 11px 13px; background: none;
}
.sc-biens li, .sc-locs li, .sc-loyers li, .sc-mandants li,
.sc-champs-lus li, .sc-2044 li, .sc-fiscal-pro li, .sc-equipe li, .sc-lots li {
  border: 0; border-bottom: 1px solid var(--filet);
  border-left: var(--filet-etat) solid transparent;
  padding-left: 13px; background: none;
}
.sc-alerte, .sc-relance, .sc-relance-auto, .sc-consolide-note, .sc-note-fiscale {
  border: 0; border-left: var(--filet-etat) solid var(--filet);
  border-top: 1px solid var(--filet);
  padding: 11px 12px 11px 13px; margin-top: 14px; background: none;
}
.sc-alerte, .sc-consolide-note { border-left-color: var(--danger); }
.sc-relance, .sc-relance-auto, .sc-note-fiscale { border-left-color: var(--vert-bouteille); }
/* Les sept contrôles de la surveillance, aux trois tons de l'application, et
   à eux seuls : ROUGE quand de l'argent est en jeu, ORANGE quand une échéance
   approche, FILET NEUTRE quand ce n'est qu'une information. Pas de vert —
   rien n'est réglé dans une alerte. */
.veille { border: 1px solid var(--filet); border-left: var(--filet-etat) solid var(--filet); }
.veille.niveau-danger, .veille-phare { border-left-color: var(--danger); }
.veille.niveau-attention { border-left-color: var(--orange); }
.veille.niveau-info { border-left-color: var(--filet); }
.veille:hover { border-left-color: var(--vert-bouteille); transform: none; box-shadow: none; }
.veille-phare { background: var(--surface); }

/* ── 2. LE BADGE ───────────────────────────────────────────────────────────
   Trois familles cohabitaient : filet + mot, pilule grise, pilule vert clair.
   Il n'en reste qu'une. Elle est alignée sur la ligne de base du texte
   qu'elle qualifie, et sa barre fait exactement la hauteur de sa ligne. */
.sc-etat, .ec-etat, .sc-perimetre, .bascule-gain, .veille-etat,
.sc-lu, .sc-signe, .sc-puce, .lot-compte, .prix-note-forte,
.sc-regime, .fonction-marque, .pastille, .sc-fiscal-pro i, .tarif-precision {
  display: inline-block; vertical-align: baseline;
  background: none; box-shadow: none; border: 0;
  border-left: var(--filet-etat) solid var(--vert-bouteille);
  padding: 0 8px 0 9px; margin: 0;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: .02em; line-height: 17px; color: var(--encre);
  white-space: nowrap; text-transform: none;
}
.sc-etat.sc-ko, .sc-etat.sc-retard, .ec-etat.ec-retard {
  border-left-color: var(--danger); color: var(--danger);
}
.sc-etat.sc-attente, .sc-etat.sc-encours, .ec-etat.ec-partiel {
  border-left-color: var(--orange); color: var(--ambre);
}
.sc-etat.sc-paye, .sc-etat.sc-ok, .sc-etat.sc-regle, .ec-etat.ec-recu {
  border-left-color: var(--vert-bouteille); color: var(--vert-bouteille);
}
.banque .pastille, .pastille-live { border-left-color: var(--vert-clair); color: var(--sur-vert); }
.pastille-live::before { display: none; }
.tarif-precision {
  white-space: normal; font-weight: 400; font-size: 12.5px;
  line-height: 1.4; color: var(--encre-legere); border-left-color: var(--filet);
}

/* ── 3. LA CARTE ───────────────────────────────────────────────────────────
   Quatre traitements existaient dans la seule section des tarifs : filet noir
   épais, filet clair, pointillé, aucun. Un seul désormais, plus une vedette. */
/* `.reponse` n'y figure plus : le corps d'un tiroir n'est pas une carte, et
   l'y laisser en faisait le seul aplat blanc de la FAQ. */
.scene, .veille, .tarif, .pro-bloc, .pro-socle, .ec-cadre, .lot,
.fonction-vedette, .ui, .banque-visuel {
  background: var(--surface); border-radius: 0; box-shadow: none;
}
.tarif {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--filet); padding: 26px;
}

/* LA SEULE ET UNIQUE DÉFINITION DES TROIS ÉTATS D'UNE CARTE DE TARIF.
   Il en existait sept pour la vedette, quatre pour le ruban, deux pour le
   gratuit, réparties sur mille cinq cents lignes : la dernière l'emportait, et
   la dernière remettait la carte recommandée au ras de ses voisines. Une
   recommandation qui ne se voit pas ne recommande rien.

   La vedette est le SEUL écart de dessin de la section : elle sort de la
   rangée par le haut et par le bas, porte deux pixels du vert de marque — le
   même que son ruban —, un titre et un prix d'un cran au-dessus. Les trois
   autres cartes restent identiques entre elles. */
.tarif.vedette {
  z-index: 1; margin: -18px -6px; padding: 40px 26px 32px;
  border: 2px solid var(--vert-bouteille);
}
.tarif.vedette h3 { font-size: 26px; }
.tarif.vedette .prix b { font-size: 48px; }

/* Le gratuit se lit APRÈS les payantes : porte d'entrée, pas quatrième offre.
   Pas de fond — il repose sur le papier de la section —, un filet tireté, un
   titre et un prix en encre douce. C'est le seul endroit du site où un filet
   n'est pas plein, et c'est ce qui le dit « en retrait » sans l'effacer. */
.tarif-discret {
  background: none; border-style: dashed;
}
.tarif-discret h3, .tarif-discret .prix b, .tarif-discret .prix span {
  color: var(--encre-douce);
}

/* Le ruban n'est pas une étiquette d'état : il ne porte donc pas le filet de
   3 px. Il reste plein, parce qu'une recommandation doit peser plus qu'un mot
   d'état. Il se pose SUR le bord haut de la carte, sans pousser le contenu. */
.tarif-ruban {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--vert-bouteille); color: var(--papier);
  border: 0; box-shadow: none; border-radius: 0;
  padding: 5px 14px; font-family: var(--font-body);
  font-size: 10px; font-weight: 700; letter-spacing: .14em; line-height: 16px;
  text-transform: uppercase; white-space: nowrap;
}

.ui, .banque-visuel .ui { border: 1px solid var(--filet-vert); }
.ui-sombre { border-color: rgba(180, 204, 192, .28); }

/* ── 4. LE MARQUEUR DE LISTE ───────────────────────────────────────────────
   Un carré plein de 6 px, dans le vert clair, et RIEN D'AUTRE. Il en existait
   quatre définitions et trois couleurs — orange sur le bandeau de réassurance,
   vert bouteille dans les tarifs, vert clair ailleurs — pour un carré de six
   pixels de côté. La seule exception est la conséquence d'une alerte, qui
   porte un chevron : elle n'énumère pas, elle enchaîne. */
.banque-points li::before, .apercu-liste li::before, .tarif li::before,
.veille-action::before, .reassurance li::before,
.pro-socle-liste li::before {
  content: ''; flex: none; width: 6px; height: 6px; margin-top: 7px;
  background: var(--vert-clair); border-radius: 0;
}
.tarif li, .apercu-liste li, .banque-points li, .pro-socle-liste li,
.veille-action, .reassurance li {
  display: flex; gap: 10px; align-items: flex-start;
}

/* ═══ ALIGNEMENTS ══════════════════════════════════════════════════════════
   Règle unique : tout couple libellé/valeur est une grille, jamais un flux de
   `<span>` que le texte fait dériver. La valeur est en colonne fixe, calée à
   droite, en chiffres tabulaires ; l'état a sa propre colonne. Les lignes de
   base se rejoignent parce que la grille les y oblige, pas par chance.
   ═════════════════════════════════════════════════════════════════════════ */
.sc-loyers li {
  display: grid; grid-template-columns: minmax(0, 1fr) 96px 80px;
  align-items: center; gap: 12px; padding-top: 11px; padding-bottom: 11px;
}
.sc-locs li, .sc-biens li, .sc-mandants li, .sc-2044 li, .sc-fiscal-pro li {
  display: grid; align-items: center; gap: 12px;
  padding-top: 11px; padding-bottom: 11px;
}
.sc-locs li  { grid-template-columns: minmax(0, 1fr) 80px; }
.sc-biens li { grid-template-columns: minmax(0, 1fr) 34px; }
.sc-mandants li { grid-template-columns: minmax(0, 1fr) auto; }
.sc-2044 li  { grid-template-columns: minmax(0, 1fr) auto; }
.sc-fiscal-pro li { grid-template-columns: minmax(0, 1fr) 92px auto; }
.sc-equipe li { display: grid; grid-template-columns: minmax(0, 1fr) 84px; align-items: center; gap: 12px; }
.sc-mnt, .sc-2044 b, .sc-fiscal-pro b, .sc-consolide b, .sc-bacs b,
.sc-fact em, .sc-total, .sc-compteur b, .ec-paiements b, .ec-kpis b {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  text-align: right; justify-self: end;
}
.sc-etat, .sc-dpe, .ec-etat, .ec-dpe, .sc-perimetre { justify-self: start; }
.sc-nom em, .sc-qui em {
  display: block; font-style: normal; font-weight: 400;
  font-size: 11.5px; color: var(--encre-legere); margin-top: 1px;
}

/* Le mockup du héros : mêmes colonnes que les scènes. */
.ec-biens li, .ec-paiements li {
  display: grid; align-items: center; gap: 10px;
}
.ec-biens li { grid-template-columns: minmax(0, 1fr) 20px; }
.ec-paiements li { grid-template-columns: minmax(0, 1fr) 68px 62px; }

/* ── LE NUMÉRO D'ÉTAPE ET DE RUBRIQUE ──────────────────────────────────────
   UNE SEULE DÉFINITION. Il y en avait cinq, dont un compteur CSS qui doublait
   le chiffre déjà écrit dans le balisage, puis une couche pour l'éteindre,
   puis une autre pour rattraper la mise en page qu'il laissait.

   Le numéro est TOUJOURS un carré vert de 26 px portant un chiffre blanc en
   Archivo. Dans le parcours, l'élément est lui-même ce carré ; dans les
   rubriques, il est une ligne — le carré, puis la mention « le plus demandé »
   à côté — et c'est le <b> qui porte le carré. */
.etape-texte, .fonction-tete { display: block; }
.etape-num, .fonction-num {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px; padding: 0; background: none;
  font-size: 13px; color: var(--encre);
}
.etape-num, .fonction-num > b {
  place-items: center; flex: none; width: 26px; height: 26px;
  background: var(--vert-bouteille); color: #fff;
  font-family: var(--font-num); font-size: 13px; font-weight: 700;
}
.etape-num { display: inline-grid; }
.fonction-num > b { display: grid; }
/* Les quatre rubriques alternent gauche/droite : sans cette règle les numéros
   sautaient d'une colonne à l'autre et la séquence 1-2-3-4 devenait illisible.
   Ils sont désormais tous du même côté, contre le bord de leur bloc. */
.fonction:nth-child(even) .fonction-tete { text-align: left; }
.fonction-num { justify-content: flex-start; }

/* ── L'accordéon : le compte contre le titre, le signe à droite ────────── */
.lots { border-top: 0; }
.lot:first-of-type { border-top: 1px solid var(--filet); }
.lot > summary { gap: 12px; padding: 15px 2px; }
.lot h3 { flex: none; gap: 10px; align-items: center; }
.lot-compte {
  font-family: var(--font-num); font-size: 13px; line-height: 20px;
  color: var(--encre-legere); border-left-color: var(--filet-pale);
}
/* Un filet de conduite mène le regard du titre au signe : sans lui, les deux
   étaient séparés par toute la largeur de l'écran, sans relation lisible. */
.lot > summary::before {
  content: ''; flex: 1; height: 1px; background: var(--filet-pale);
  align-self: center;
}
.lot > summary::after { font-size: 20px; line-height: 20px; }

/* ── Les tarifs : quatre pieds de carte sur la même ligne ──────────────── */
.tarifs-4 { align-items: stretch; }
.tarif ul { flex: 1; }
.tarif > .btn { margin-top: auto; width: 100%; justify-content: center; }
.bascule { border: 1px solid var(--filet); }
.bascule-opt { border-top: 0; border-bottom: 0; }

/* ═══ ANIMATIONS — UNE DÉFINITION PAR INTERACTION ══════════════════════════
   Il en existait plusieurs pour un même geste, et surtout un état de veilleuse
   à 42 % posé sur des LIGNES DE DONNÉES : « Thomas Leroy · Haussmann »,
   « CASH-FLOW CUMULÉ », « 4 300 € » restaient à moitié transparents sur la
   page au repos. Un lecteur y voit un bug, et il a raison : une donnée n'a pas
   d'état intermédiaire.

   La règle est donc plus stricte que la précédente :

     · LE TEXTE ET LES CHIFFRES NE S'ANIMENT JAMAIS. Ils sont lisibles à
       100 %, à toute image, y compris la première.
     · Ce qui s'anime, c'est le FILET (sa couleur), la JAUGE (sa largeur), le
       TRACÉ (sa longueur) et les ÉTATS QUI SE RELAIENT (un seul visible).
     · Une seule durée, 9 s, une seule courbe, `linear`, une seule transition
       d'interaction, .22 s.
   ═════════════════════════════════════════════════════════════════════════ */

/* Plus aucune veilleuse sur le contenu. */
.sc-biens li, .sc-locs li, .sc-loyers li, .sc-fact, .sc-champs-lus li,
.sc-echeancier, .sc-relance-auto, .sc-relance, .sc-alerte, .sc-compteur b,
.sc-total, .sc-lu, .sc-signe, .sc-pointe, .sc-bacs b, .sc-mandants li, .sc-consolide li, .sc-2044 li,
.sc-fiscal-pro li, .sc-equipe li, .sc-arrivee, .sc-fichier,
.ec-graphe li, .sc-consolide-note, .sc-note-fiscale {
  opacity: 1;
}
.sc-biens li, .sc-locs li, .sc-fact, .sc-champs-lus li, .sc-echeancier,
.sc-relance-auto, .sc-relance, .sc-alerte, .sc-compteur b, .sc-total,
.sc-lu, .sc-signe, .sc-pointe, .sc-bacs b,
.ec-graphe li, .sc-arrivee {
  animation: none;
}

/* Ce qui reste animé, et rien d'autre. */
@keyframes filet-vert   { 0%, 18% { border-left-color: var(--filet) } 22%, 100% { border-left-color: var(--vert-bouteille) } }
@keyframes filet-rouge  { 0%, 30% { border-left-color: var(--filet) } 34%, 100% { border-left-color: var(--danger) } }
@keyframes filet-suite  { 0%, 30% { border-left-color: var(--filet) }
                          34%, 70% { border-left-color: var(--danger) }
                          74%, 100% { border-left-color: var(--vert-bouteille) } }
@keyframes jauge        { 0% { width: 0 } 34%, 100% { width: 100% } }
@keyframes trace        { 0% { stroke-dashoffset: var(--trace-len) } 50%, 100% { stroke-dashoffset: 0 } }
@keyframes paraitre     { 0%, 30% { opacity: 0 } 36%, 100% { opacity: 1 } }
@keyframes disparaitre  { 0%, 30% { opacity: 1 } 34%, 100% { opacity: 0 } }
@keyframes relais       { 0%, 32% { opacity: 0 } 36%, 70% { opacity: 1 } 74%, 100% { opacity: 0 } }
@keyframes relais-fin   { 0%, 72% { opacity: 0 } 76%, 100% { opacity: 1 } }

@media (prefers-reduced-motion: no-preference) {
  .scene-revenus .sc-recu           { animation: filet-vert var(--boucle) var(--courbe) infinite; }
  .scene-revenus .sc-en-attente     { animation: filet-suite var(--boucle) var(--courbe) infinite; }
  .scene-biens   .sc-biens li:first-child { animation: filet-rouge var(--boucle) var(--courbe) infinite; }
  .scene-locataires .sc-retard      { animation: filet-suite var(--boucle) var(--courbe) infinite; }
  .scene-fiscal  .sc-bacs li        { animation: filet-vert var(--boucle) var(--courbe) infinite; }
  .scene-chaine  .sc-pointe         { animation: filet-vert var(--boucle) var(--courbe) infinite; }
  .sc-champs li i                   { animation: jauge var(--boucle) var(--courbe) infinite; }
  .sc-trace                         { animation: trace var(--boucle) var(--courbe) infinite; }
  .sc-zone em                       { animation: disparaitre var(--boucle) var(--courbe) infinite; }
  .scene-revenus .sc-en-attente .sc-encours { animation: disparaitre var(--boucle) var(--courbe) infinite; }
  .scene-revenus .sc-en-attente .sc-retard  { animation: relais-fin var(--boucle) var(--courbe) infinite; }
  .sc-retard .sc-attente            { animation: disparaitre var(--boucle) var(--courbe) infinite; }
  .sc-retard .sc-ko                 { animation: relais var(--boucle) var(--courbe) infinite; }
  .sc-retard .sc-regle              { animation: relais-fin var(--boucle) var(--courbe) infinite; }
}

/* Les états qui se relaient occupent la même case : un seul est visible. */
.sc-retard .sc-attente, .sc-retard .sc-ko, .sc-retard .sc-regle,
.scene-revenus .sc-en-attente .sc-encours, .scene-revenus .sc-en-attente .sc-retard {
  grid-column: -2; grid-row: 1; position: static;
  transform: none; right: auto; top: auto;
}
.sc-retard .sc-ko, .sc-retard .sc-regle,
.scene-revenus .sc-en-attente .sc-retard { opacity: 0; }
.sc-retard, .scene-revenus .sc-en-attente { position: relative; }
.sc-retard .sc-etat { position: static; transform: none; }

/* Le dépôt du bail : le seul déplacement de la page, et il est le sujet. */
@keyframes sc-deposer {
  0%, 8%    { transform: translateY(-41px) }
  22%, 100% { transform: translateY(9px) }
}
.sc-fichier { opacity: 1; }

/* Une seule transition d'interaction, partout. */
.btn, .nav-link, .lot > summary, .veille, .bascule-opt, .tarif, .reponse summary {
  transition: background var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe),
              color var(--duree) var(--courbe);
}

/* L'apparition au défilement : une seule définition, et un état de repos
   pleinement lisible — jamais un bloc parqué à `opacity: 0`. */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: .001; transform: translateY(10px);
            transition: opacity .42s var(--courbe), transform .42s var(--courbe); }
  .reveal.vu { opacity: 1; transform: none; }
}

/* Immobilité demandée : l'état final, sans exception. */
@media (prefers-reduced-motion: reduce) {
  .scene *, .scene { animation: none !important; }
  .sc-retard .sc-attente, .sc-retard .sc-ko,
  .scene-revenus .sc-en-attente .sc-encours { opacity: 0; }
  .sc-retard .sc-regle, .scene-revenus .sc-en-attente .sc-retard { opacity: 1; }
  .sc-champs li i { width: 100%; }
  .sc-trace, .sc-signature path { stroke-dashoffset: 0; }
  .sc-zone em { opacity: 0 }
  .sc-fichier { transform: translateY(9px) }
  .scene-revenus .sc-recu, .scene-fiscal .sc-bacs li, .scene-chaine .sc-pointe { border-left-color: var(--vert-bouteille) }
  .scene-biens .sc-biens li:first-child { border-left-color: var(--danger) }
  .scene-locataires .sc-retard, .scene-revenus .sc-en-attente { border-left-color: var(--vert-bouteille) }
}

/* ── Rattrapages de la couche d'alignement ────────────────────────────────
   `justify-self: end` valait pour une valeur DANS une grille à deux colonnes.
   Les indicateurs du mockup ne sont pas de ceux-là : ce sont des blocs
   empilés, alignés à gauche. */
.ec-kpis b, .ec-kpis li { justify-self: stretch; text-align: left; }
.ec-kpis b { text-align: left; }
.reassurance li { display: flex; }

/* Le badge du menu : un point rouge, comme dans l'application — pas un tiret,
   pas un chiffre. Le compte, lui, est sur le bouton « À traiter ». */
.ec-pastille {
  display: inline-block; width: 6px; height: 6px; padding: 0; margin-left: auto;
  background: var(--danger); border: 0; border-radius: 0; font-size: 0;
}
.ec-nav a { display: flex; align-items: center; }
.ec-point {
  border-left: 0; background: var(--danger); color: #fff;
  padding: 1px 5px; margin-left: 6px; font-family: var(--font-num);
  font-size: 10px; font-weight: 700; font-style: normal;
}

/* Les douze barres portent toutes le même soulignement, la dernière comprise :
   elle en était la seule dépourvue, ce qui la faisait lire comme un objet
   d'une autre nature. */
.ec-graphe li { border-bottom: 2px solid var(--vert-clair); }
.ec-graphe .ec-barre-vive { background: var(--vert-bouteille); border-bottom-color: var(--vert-bouteille); }

/* ── Le fil du parcours doit être continu ─────────────────────────────────
   Il était tracé par `.etape-rail::after`, borné par `bottom: -44px` — une
   valeur calée sur le rembourrage de l'étape 1. L'étape 2, plus basse, avait
   un rembourrage différent : le trait s'y arrêtait net et le nœud de l'étape 3
   flottait seul. Le fil est désormais tracé UNE FOIS sur la colonne entière,
   du premier nœud au dernier, et les nœuds se posent dessus. */
.parcours { position: relative; }
.parcours::before {
  content: ''; position: absolute; left: 27px; top: 13px; bottom: 13px;
  width: 1px; background: var(--filet); z-index: 0;
}
.etape-rail::after { display: none; }
.etape-pastille { position: relative; z-index: 1; }
.etape-rail { align-items: flex-start; }

/* ── La flèche du rapprochement : un chevron, pas un trait isolé ────────── */
.sc-fleche { height: 22px; }
.sc-fleche i { width: 1px; height: 14px; background: var(--filet); animation: none; }
.sc-fleche::after {
  content: ''; position: absolute; bottom: 1px; opacity: 1; animation: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--filet);
}

/* ── Les mentions de bas de voie restent au pied de leur colonne ────────── */
.sc-lu, .sc-signe { margin-top: auto; align-self: flex-start; }

/* ── La bordure du relevé bancaire se referme sur les quatre côtés ────────
   `.ui-lignes li:last-child { border-bottom: none }` laissait le bas ouvert
   dès que la dernière ligne touchait le bord de la carte. */
.banque-visuel .ui { border: 1px solid rgba(180, 204, 192, .28); padding-bottom: 4px; }
.ui-lignes { border-bottom: 0; }
.ui-lignes li:last-child { border-bottom: 0; }

/* ── Aucune animation d'opacité ne subsiste sur un badge d'état ───────────
   Un « Reçu » restait à demi transparent : la règle d'apparition d'origine
   survivait sur `.sc-recu .sc-etat`. */
.scene-revenus .sc-recu .sc-etat, .scene-chaine .sc-etat, .sc-etat {
  animation: none; opacity: 1;
}
.sc-retard .sc-ko, .sc-retard .sc-regle,
.scene-revenus .sc-en-attente .sc-retard { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .sc-retard .sc-attente { animation: disparaitre var(--boucle) var(--courbe) infinite; }
  .sc-retard .sc-ko      { animation: relais var(--boucle) var(--courbe) infinite; }
  .sc-retard .sc-regle   { animation: relais-fin var(--boucle) var(--courbe) infinite; }
  .scene-revenus .sc-en-attente .sc-encours { animation: disparaitre var(--boucle) var(--courbe) infinite; }
  .scene-revenus .sc-en-attente .sc-retard  { animation: relais-fin var(--boucle) var(--courbe) infinite; }
}

/* Le libellé d'une ligne de loyer ne doit pas se couper : la colonne de
   l'état se resserre, celle du nom respire. */
.sc-loyers li { grid-template-columns: minmax(0, 1fr) 92px 74px; gap: 10px; }
.sc-lib { font-size: 12.5px; }

/* ── Les trois cases fiscales portent le même filet ───────────────────────
   L'une d'elles n'en avait aucun : les délais de la cascade la surprenaient
   sans couleur de repos. Le gris est désormais franc, et c'est lui qui passe
   au vert, l'une après l'autre. */
.sc-bacs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.sc-bacs li {
  border-left: var(--filet-etat) solid var(--filet-pale);
  padding: 10px 12px 12px 13px;
}
.sc-bac-1 { animation-delay: 0s } .sc-bac-2 { animation-delay: 1.2s } .sc-bac-3 { animation-delay: 2.4s }
.sc-bac-1 b, .sc-bac-2 b, .sc-bac-3 b { animation: none; opacity: 1; }
.sc-bacs span { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-legere); }
.sc-bacs b { display: block; margin-top: 3px; text-align: left; justify-self: start; font-size: 18px; color: var(--encre); }

/* Les trois factures : mêmes colonnes, même filet, même alignement. */
.scene-fiscal .sc-pluie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: 16px; }
.sc-fact { border-left: var(--filet-etat) solid var(--filet-pale); padding: 9px 12px 11px 13px; }
.sc-fact em { display: block; margin-top: 2px; text-align: left; justify-self: start; color: var(--encre); font-weight: 700; }

/* ── L'accordéon : titre à gauche, filet de conduite, signe à droite ──────
   Le pseudo-élément de conduite s'insérait AVANT le titre et le poussait à
   l'autre bout. `order` remet les trois pièces dans l'ordre où on les lit. */
.lot > summary { display: flex; align-items: center; gap: 14px; }
.lot h3 { order: 0; flex: none; }
.lot > summary::before { order: 1; flex: 1; }
.lot > summary::after { order: 2; flex: none; }

/* ── La grille de surveillance se referme ─────────────────────────────────
   Deux cartes larges, quatre cartes, puis une carte et la note : plus de vide
   en bas à droite, et la note n'est plus comptée comme un huitième contrôle. */
.veilles { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.veille-phare { grid-column: span 2; }
/* Le septième contrôle ferme la grille sur deux colonnes, comme les deux
   cartes de tête : seul sur une piste, il laissait les trois quarts de sa
   rangée vides. */
.veilles > .veille:last-of-type { grid-column: span 2; }
.veilles-note {
  grid-column: span 3; align-self: center;
  margin: 0; padding: 0 0 0 4px;
  font-size: 14.5px; color: var(--encre-douce); line-height: 1.55;
}
.veilles-note b { color: var(--encre); }
/* Les séparateurs internes s'alignent parce que la citation occupe toute la
   place restante : la ligne d'action tombe au même endroit dans chaque carte
   d'une même rangée. */
.veille { display: flex; flex-direction: column; }
.veille-alerte { flex: 1 1 auto; }
.veille-action { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--filet); }

/* ── Le bandeau d'appel Pro ───────────────────────────────────────────────
   Il était collé au bloc du dessus, et son bouton était blanc plein là où
   tous les autres appels du site sont verts pleins ou à filet. */
.pro-appel { margin-top: 40px; padding: 28px 32px; }
.pro-appel .btn {
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .5);
}
.pro-appel .btn:hover { background: #fff; color: var(--vert-bouteille); border-color: #fff; }

/* Le pied de chaque carte reste collé au bas, quelle que soit la longueur de
   la liste au-dessus. */
.tarif > .btn, .tarif > a.btn { margin-top: auto; }

/* ── Le filet de conduite de l'accordéon doit se voir ────────────────────── */
.lot > summary::before { background: var(--filet); }

/* ── Le déficit reportable : une information, pas une alerte ────────────── */
.sc-deficit { color: var(--encre) !important; font-family: var(--font-num); font-weight: 700; }
.sc-deficit em {
  display: block; font-style: normal; font-weight: 400; font-size: 10.5px;
  color: var(--encre-legere); margin-top: 1px; text-align: right;
}

/* ── Le libellé du DPE : une seule couleur par classe, celle de l'app ─────
   design.css l. 234-236. Elles valent pour le mockup du héros comme pour les
   scènes : le même bien ne peut pas être orange ici et rose là. */
.sc-dpe, .ec-dpe { width: 20px; height: 20px; font-size: 11px; }
.sc-dpe-a, .ec-dpe-a { background: #17402F; color: #fff }
.sc-dpe-b, .ec-dpe-b { background: #3E7D5C; color: #fff }
.sc-dpe-c, .ec-dpe-c { background: #7FA84A; color: var(--encre) }
.sc-dpe-d, .ec-dpe-d { background: #E4B106; color: var(--encre) }
.sc-dpe-e, .ec-dpe-e { background: #DE7A16; color: var(--encre) }
.sc-dpe-f, .ec-dpe-f { background: #B4471B; color: #fff }
.sc-dpe-g, .ec-dpe-g { background: #6E2410; color: #fff }

/* ── La consolidée : quatre blocs empilés, alignés à gauche ───────────────
   `justify-self: end` valait pour une valeur en regard d'un libellé, pas pour
   un chiffre posé SOUS son libellé. */
.sc-consolide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.sc-consolide li { display: block; }
.sc-consolide b {
  display: block; margin-top: 3px; text-align: left; justify-self: start;
  font-size: 20px; color: var(--encre);
}
.sc-consolide span { font-size: 11px; color: var(--encre-legere); }
.sc-consolide .sc-rouge { color: var(--danger) !important; }
.sc-consolide .sc-vert { color: var(--encre) !important; }

/* ── Les derniers fonds de badge ──────────────────────────────────────────
   Trois familles subsistaient ici : pilule vert clair pour un périmètre,
   pilule grise pour un régime fiscal. Elles n'existent plus. */
.sc-perimetre, .sc-fiscal-pro i, .sc-regime, .bascule-gain {
  background: none !important; box-shadow: none !important;
  border: 0; border-left: var(--filet-etat) solid var(--filet);
  padding: 0 8px 0 9px; color: var(--encre-douce);
  font-size: 11px; font-weight: 600; line-height: 17px;
  display: inline-block; white-space: nowrap;
}
.bascule-opt.actif .bascule-gain { border-left-color: var(--vert-clair); color: #fff; }
.sc-fiscal-pro b { color: var(--encre); }

/* Les trois régimes fiscaux : une colonne assez large pour le plus long, et
   les trois filets à la même abscisse. */
.sc-fiscal-pro li { grid-template-columns: minmax(0, 1fr) 104px 92px; }
.sc-fiscal-pro i { justify-self: start; }
.sc-fiscal-pro b { justify-self: end; }
.sc-equipe li { grid-template-columns: minmax(0, 1fr) 92px; }
.sc-perimetre { justify-self: start; }

/* ── La hiérarchie de couleur du relevé ───────────────────────────────────
   Sur fond vert, le blanc est la teinte la plus vive de la page. Il portait
   « 1 490,00 € », le loyer NON reçu, plus fort que les deux encaissements —
   exactement l'inverse de ce que la ligne rouge en dessous annonce. */
.ui-sombre .ui-mnt { color: var(--sur-vert); }
.ui-sombre .ui-mnt-plus { color: var(--vert-clair); font-weight: 700; }
.ui-sombre .ui-lib { color: var(--sur-vert); }
.ui-ligne-lie .ui-lib { color: var(--sur-vert-faible); }
.ui-ligne-alerte .ui-lib { color: var(--rouge) !important; }
.ui-sombre .ui-date { color: var(--sur-vert-faible); }

/* ── La chaîne : quatre jalons présents, allumés l'un après l'autre ───────
   Le dernier paraissait éteint « sans raison » : son gris de repos était trop
   loin du vert allumé pour se lire comme une étape à venir. */

/* ── LE GRAPHE DE CASH-FLOW : UNE HAUTEUR ─────────────────────────────────
   L'enveloppe et la courbe portaient SEPT déclarations de taille et
   d'affichage, à des centaines de lignes d'écart : 52 px pour la courbe, puis
   64 px pour l'enveloppe et pour la courbe, 64 px encore pour l'enveloppe du
   cash-flow, `height: auto` qui l'emportait, 72 px pour la courbe, et deux
   `position: relative` sans hauteur. L'enveloppe ne mesurait que ce que la
   courbe voulait bien lui donner, et tout ce qui s'y posait en pourcentage —
   l'ancien repère de révision — se calculait sur une boîte qui n'était pas
   celle du dessin.

   Une seule hauteur, portée par l'ENVELOPPE ; la courbe la remplit. Le SVG
   (`viewBox="0 0 300 56"`, `preserveAspectRatio="none"`) épouse exactement
   cette boîte, et le repère, dessiné dans le SVG, avec lui. */
.sc-cashflow { padding-top: 12px; }
.sc-graphe { display: block; height: 72px; margin: 10px 0 8px; }
.sc-courbe { display: block; width: 100%; height: 100%; color: var(--vert-bouteille); }
.sc-aire { fill: var(--vert-bouteille); }
.sc-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 11px; color: var(--encre-legere); }

/* ── Le graphe se lit en entier, à toute image ────────────────────────────
   La projection, l'aire et le repère de révision étaient parqués à
   `opacity: 0` en attendant leur tour : sur la première image de la page — et
   sur toute capture — il ne restait qu'une demi-courbe. La projection et
   l'aire sont là d'emblée ; le tracé du réalisé se dessine. Le repère de
   révision, lui, ARRIVE une fois ce pointillé lu : sa seule animation vit avec
   sa définition, plus bas (« LA LÉGENDE DU GRAPHE, ET SES TROIS REPÈRES »). */
.sc-projection, .sc-aire { animation: none; }
.sc-projection { opacity: .5; }
.sc-aire { fill: var(--vert-bouteille); opacity: .09; }

/* ── LA LÉGENDE DU GRAPHE, ET SES TROIS REPÈRES ────────────────────────────
   UNE SEULE DÉFINITION. Il en existait six, dont la dernière faisait du repère
   de révision un carré dans l'ambre — une forme et une couleur qu'on ne
   retrouve nulle part ailleurs, ni sur la page, ni dans l'application.

   Le repère de révision est le MÊME que dans le cash-flow de l'application :
   un point rond, plein, dans l'orange d'accent, cerné de la couleur du fond
   pour se détacher du tracé. C'est la seule forme ronde du système, et elle
   est réservée à ça : un jalon daté posé sur une courbe.

   Chaque repère et son mot forment UN SEUL bloc (`span` en flex) : sans lui, le
   marqueur et son libellé sont deux éléments flex distincts, et « Révision IRL »
   se décrochait sur la ligne suivante en laissant la pastille orange seule et
   muette. Le `span` les tient ensemble ; le repère de révision porte ainsi son
   nom dans la légende, là où vivait l'ancienne étiquette flottante. */
.sc-legende {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  margin-top: 8px; font-size: 11px; color: var(--encre-legere);
}
.sc-legende span { display: inline-flex; align-items: center; white-space: nowrap; }
.sc-legende i { flex: none; display: inline-block; margin-right: 5px; }
.sc-lg-plein     { width: 14px; height: 2px; background: var(--encre); border: 0; border-radius: 0; }
.sc-lg-pointille { width: 14px; height: 0; background: none; border: 0; border-top: 2px dashed var(--encre-legere); border-radius: 0; }
.sc-lg-irl       { width: 8px; height: 8px; background: var(--orange); border: 0; border-radius: 50%; }
/* Le détail chiffré de la révision, sous la légende : le gain mensuel qu'apporte
   l'indexation, en toutes lettres sous le jalon qu'il explique. */
.sc-legende-note { margin-top: 4px; font-size: 11px; color: var(--encre-legere); }
/* Le point sur la courbe : même orange, même rond, POSÉ SUR LE POINTILLÉ,
   franchement au-delà de la cassure réalisé/projeté (166 ; 35) : du pointillé
   se lit avant lui et après lui. Il occupe le premier SOMMET de la projection,
   (206 ; 25,5) — exactement sur la ligne, sans arrondi. Sa position est UN seul
   couple, le `transform="translate(x y)"` de son groupe dans landing.html, où
   un commentaire donne l'équation de chaque segment pour le déplacer.

   Il est DESSINÉ DANS LE SVG, à ces coordonnées mêmes, et non plus posé par-
   dessus en pourcentages de l'enveloppe (left 55,3 %, top 46,4 %) : ces
   pourcentages ne tombaient juste que si le navigateur étirait le dessin
   exactement comme la boîte HTML. Le viewBox, rendu invalide par une espace
   insécable glissée entre « 0 » et « 300 », était ignoré : la courbe restait à
   l'échelle 1:1 et le point glissait le long du tracé selon la largeur de
   l'écran. Dans le repère du dessin, il suit la courbe par construction.

   `preserveAspectRatio="none"` étire ce repère, où un <circle> deviendrait une
   ellipse : le point est un trait de longueur quasi nulle à bout rond, en
   `vector-effect: non-scaling-stroke` — son épaisseur se compte en pixels
   d'écran, il reste rond à toute largeur. Le halo (l'ancien `box-shadow` de
   3 px) est le même trait, plus épais, dans la couleur du fond. Pas
   d'étiquette flottante : c'est la légende qui le nomme (« Révision IRL »). */
.sc-point-irl path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sc-point-irl-halo     { stroke: var(--surface); stroke-width: 15px; }
.sc-point-irl-pastille { stroke: var(--orange); stroke-width: 9px; }
/* Le repère ARRIVE : il se lève entre 70 et 73 % de la boucle — le réalisé est
   tracé depuis 50 %, le pointillé est lu — puis ne bouge plus jusqu'à la fin.
   Une montée d'opacité, rien d'autre : ni glissement, ni rebond, ni pulsation.
   C'est la DERNIÈRE règle du fichier qui touche son animation : la règle
   « .sc-projection, .sc-aire { animation: none } » plus haut ne le vise plus.
   Immobilité demandée : `.scene *` y perd toute animation (`!important`), et
   le repère est là d'emblée, à sa place — son opacité de repos est 1. */
@keyframes sc-repere-irl { 0%, 70% { opacity: 0 } 73%, 100% { opacity: 1 } }
@media (prefers-reduced-motion: no-preference) {
  .sc-point-irl { animation: sc-repere-irl var(--boucle) var(--courbe) infinite; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES SEPT JETONS MANQUANTS
   ─────────────────────────────────────────────────────────────────────────
   Sept variables étaient employées dans la feuille sans avoir jamais été
   déclarées : `--orange`, `--ambre`, `--rouge`, `--surface`, `--filet-pale`,
   `--danger-light`, `--attention-light`. Une variable inconnue ne produit pas
   d'erreur : la propriété est simplement ignorée. Des dizaines de fonds, de
   filets et de couleurs de texte étaient donc silencieusement absents — le
   repère de révision sans sa couleur, les cases fiscales sans leur filet, les
   alertes sans leur teinte.

   Elles reprennent ici, à l'identique, les valeurs de `design.css`.
   ═════════════════════════════════════════════════════════════════════════ */
:root {
  --surface:        #FFFFFF;
  --surface2:       #EDF0EE;
  --orange:         #A7500A;   /* = --accent */
  --ambre:          #8F3D05;   /* = --attention */
  --rouge:          #C1121F;   /* = --danger */
  --filet-pale:     #C9D8CF;
  --danger-light:   #FBEAEA;
  --attention-light:#FAE4CE;
  --bleu-fond:      #E4EDF6;
}

/* La section sombre garde son fond : la règle générale de carte ne s'applique
   qu'aux blocs posés sur du papier. Déclarer `--surface` l'avait rendue
   blanche d'un coup, et son texte blanc avec elle. */
.banque { background: var(--vert-bouteille); color: var(--papier); }
.banque-visuel, .banque-visuel .ui, .ui-sombre { background: transparent; }
.banque h2, .banque .section-tag-clair, .banque b, .banque strong { color: #fff; }
.banque .section-tag-clair { color: var(--vert-clair); }
.banque-intro, .banque-points li { color: var(--sur-vert); }
.banque-points b { color: #fff; }
.ui-sombre { border: 1px solid rgba(180, 204, 192, .28); }
.banque .pastille-live { color: var(--sur-vert); }
.ui-sombre .ui-fichier { color: #fff; }

/* ── Les trois étapes du parcours ont le même traitement ──────────────────
   La deuxième était posée sur un aplat vert clair, son numéro à l'intérieur
   du bloc, les deux autres sur fond neutre avec le numéro dehors : trois
   différences pour dire une même chose. Elle reste plus basse — c'est le seul
   moment où le bailleur constate au lieu d'agir — mais elle se lit comme ses
   voisines. */
.etape-mince .etape-texte {
  background: none; padding: 0;
  border-left: var(--filet-etat) solid var(--vert-clair); padding-left: 16px;
}
.etape-mince .etape-texte h3 { font-size: 22px; }
.etape-mince .etape-texte > p { font-size: 16.5px; }
.etape-mince .etape-pastille { width: 14px; height: 14px; }

/* La ligne d'alerte du relevé : le rouge de l'application est trop sombre sur
   un fond vert bouteille. Sur fond sombre, l'alerte s'éclaircit. */
.ui-sombre .ui-ligne-alerte .ui-lib { color: #F09A9A !important; }

/* Le sélecteur de périodicité : un seul filet, celui du groupe. */
.bascule { border: 1px solid var(--filet); background: var(--surface); }
.bascule-opt { border: 0; border-right: 1px solid var(--filet); }
.bascule-opt:last-child { border-right: 0; }

/* ═══ TÉLÉPHONE ════════════════════════════════════════════════════════════
   Les grilles à colonnes fixes posées plus haut valent pour un écran large.
   Sous 760 px elles dépassent : le calendrier réclame 423 px pour douze mois,
   une ligne de loyer 416 px pour trois colonnes. Elles se replient.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .veilles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .veille-phare { grid-column: span 2; }
  .veilles-note { grid-column: span 2; }
  /* Les tarifs sont déjà passés à une colonne au même palier, dans 460 px
     (voir « .tarifs, .tarifs-4 » plus haut). Ils ne se redivisent pas ici. */
}
@media (max-width: 760px) {
  .sc-loyers li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .sc-loyers .sc-etat { grid-column: 1 / -1; justify-self: start; }
  .ec-paiements li { grid-template-columns: minmax(0, 1fr) auto; }
  .ec-paiements .ec-etat { display: none; }
  .sc-fiscal-pro li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .sc-fiscal-pro i { grid-column: 1 / -1; }
  .lot ul { columns: 1; padding-right: 0; }
  /* `.sc-loyers .sc-lib` pose `nowrap` avec deux classes : une règle à une
     seule classe ne pouvait pas la défaire, et « Thomas Leroy · Appartement
     Haussmann » se coupait à 204 px pour 261 nécessaires. */
  .sc-lib, .sc-loyers .sc-lib, .scene .sc-lib {
    white-space: normal; overflow: visible; text-overflow: clip;
  }
}
@media (max-width: 560px) {
  .veilles { grid-template-columns: minmax(0, 1fr); }
  .veille-phare, .veilles-note { grid-column: span 1; }
  .scene-fiscal .sc-pluie, .sc-bacs, .sc-consolide { grid-template-columns: minmax(0, 1fr); }
  .sc-voies { grid-template-columns: minmax(0, 1fr); }
}

/* Sous 900 px, le parcours passe sur une colonne : le rail n'a plus de place
   réservée, et le fil traversait le texte. Il disparaît, les nœuds restent. */
@media (max-width: 900px) {
  .parcours::before { display: none; }
  .etape-rail { margin-bottom: 10px; }
}

/* La précision du plan gratuit n'est pas une fonctionnalité de plus : elle
   porte son filet, pas la puce carrée de la liste. */
.tarif li:has(> .tarif-precision) { display: block; }
.tarif li:has(> .tarif-precision)::before { display: none; }
.tarif-precision { margin-top: 2px; }

/* La FAQ suit le dessin de l'accordéon des corvées : même signe, même
   couleur, même filet de conduite. Elle en employait un autre, en orange. */
.reponse, .faq details { border-bottom: 1px solid var(--filet); }
.faq summary::after, details > summary::after { color: var(--vert-bouteille); }

/* ═══ « TRENTE CORVÉES » : LA SECTION VIT SUR LE FOND ══════════════════════
   La carte blanche transformait l'accordéon en bloc flottant qui ne s'accroche
   à rien, alors que toutes les autres sections reposent sur le fond de page.
   Elle disparaît ; les filets de séparation suffisent. */
.lots { background: none; border-top: 1px solid var(--filet); }
.lot { background: none; border-left: 0; border-right: 0; }
.lot:first-of-type { border-top: 0; }
/* Le trait de conduite entre le titre et le signe n'existe nulle part
   ailleurs : il s'en va. Le titre à gauche, le signe à droite, la relation se
   lit par la ligne elle-même. */
.lot > summary::before { content: none; }
.lot > summary { justify-content: space-between; }
.lot h3 { flex: 1 1 auto; }
/* Le compte au gabarit des autres chiffres du site, et sa barre à la hauteur
   du chiffre — elle le dépassait de six pixels.
   Il partage la LIGNE DE BASE du titre : c'est le même objet, un intitulé et
   son décompte, ils ne peuvent pas flotter l'un par rapport à l'autre. */
.lot h3 { align-items: baseline; }
.lot-compte {
  font-family: var(--font-num); font-size: 16px; font-weight: 700;
  line-height: 17px; color: var(--encre-legere);
  border-left: var(--filet-etat) solid var(--filet-pale);
  padding: 0 0 0 9px; align-self: baseline;
}

/* ═══ SURVEILLANCE ════════════════════════════════════════════════════════
   La puce carrée verte dit « c'est fait » partout ailleurs ; ici elle
   introduisait une conséquence, parfois une sanction. Un chevron la remplace :
   « voici ce que Bailin fait ensuite ». */
.veille-action::before {
  content: '→'; width: auto; height: auto; margin-top: 0;
  background: none; color: var(--encre-legere);
  font-size: 13px; line-height: 1.4; flex: none;
}
/* La note quitte la grille et se pose en pied de section, pleine largeur. */
.veilles-note {
  grid-column: 1 / -1; align-self: start;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--filet);
  text-align: left;
}
/* Hors grille, la note reprend la pleine largeur de la section. */
.veilles-note { grid-column: auto; }

/* L'étape 2 porte deux scènes : le calendrier des douze mois, puis la chaîne
   bancaire. Elles s'empilent dans la colonne des visuels. */
.etape-visuel-double { flex-direction: column; gap: 16px; }
.etape-visuel-double > .scene { width: 100%; }

/* ═══ LE RELEVÉ QUI SE TRANSFORME ══════════════════════════════════════════
   Une seule colonne, un seul mouvement : la ligne brute est là, ses
   conséquences se glissent dessous l'une après l'autre. Neuf secondes,
   linéaire, comme toute scène du site.
   ═════════════════════════════════════════════════════════════════════════ */
.ui-flux { margin-top: 12px; border-top: 1px solid rgba(180, 204, 192, .22); }
/* Troisième colonne de LARGEUR FIXE. En `auto`, chaque ligne se calait sur la
   longueur de son étiquette : les cinq filets d'état — « Reçu », « Envoyée »,
   « Comptabilisé », « Reçu partiel », « Impayé » — tombaient à cinq abscisses
   différentes, dans une colonne qui est justement là pour les aligner. La
   largeur est celle du plus long, plus sa marge. */
.ui-flux li {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 92px;
  align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid rgba(180, 204, 192, .14);
}
.ui-flux .ui-etat { justify-self: start; }
.ui-flux .ui-mnt { justify-self: end; }
/* Les libellés du relevé se replient plutôt que de se couper : « Loyer de mars
   rapproché · Appartement Hau… » et « relance envoyée à … » perdaient
   justement le mot qui porte l'information — le bien, et le délai. */
.ui-flux .ui-lib { white-space: normal; overflow: visible; text-overflow: clip; }
.ui-flux li:last-child { border-bottom: 0; }
.ui-op .ui-lib { color: var(--sur-vert); font-size: 12.5px; letter-spacing: .01em; }
.ui-suite { padding-left: 0; opacity: .18; }
.ui-suite .ui-lib {
  grid-column: 2; color: var(--vert-clair); font-size: 12.5px;
  padding-left: 14px; border-left: 2px solid rgba(114, 177, 144, .45);
}
.ui-etat {
  grid-column: 3; border-left: 3px solid var(--vert-clair);
  padding: 0 0 0 9px; font-size: 10.5px; font-weight: 700;
  color: var(--vert-clair); line-height: 17px; white-space: nowrap;
}
.ui-etat.ui-att { border-left-color: #E4B106; color: #E4B106; }
.ui-etat.ui-mal { border-left-color: #F09A9A; color: #F09A9A; }
.ui-pied {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(180, 204, 192, .22);
  font-size: 13px; color: var(--sur-vert-faible);
}
@keyframes ui-suit { 0%, 8% { opacity: .18 } 16%, 100% { opacity: 1 } }
@media (prefers-reduced-motion: no-preference) {
  .ui-s1 { animation: ui-suit 9s linear infinite; animation-delay: .2s }
  .ui-s2 { animation: ui-suit 9s linear infinite; animation-delay: 1.0s }
  .ui-s3 { animation: ui-suit 9s linear infinite; animation-delay: 1.8s }
  .ui-s4 { animation: ui-suit 9s linear infinite; animation-delay: 2.8s }
  .ui-s5 { animation: ui-suit 9s linear infinite; animation-delay: 3.8s }
}
@media (prefers-reduced-motion: reduce) { .ui-suite { opacity: 1 } }

/* ═══ LA COLONNE D'ÉTAT A UNE SEULE LARGEUR ════════════════════════════════
   Les étiquettes d'état — « Reçu », « Partiel », « Impayé », « En attente »,
   « À jour » — vivent dans une colonne de grille de largeur fixe, pour que
   leurs filets tombent tous à la même abscisse. Cette largeur était posée
   trois fois, à trois valeurs différentes, et la plus longue des étiquettes,
   « En attente » (82 px), débordait des trois : `overflow: hidden` de la
   scène en rognait la fin, sans le dire.
   Une seule mesure désormais, celle du plus long libellé plus sa marge. */
:root { --col-etat: 88px; }
.sc-loyers li { grid-template-columns: minmax(0, 1fr) 92px var(--col-etat); }
.sc-locs li { grid-template-columns: minmax(0, 1fr) var(--col-etat); }
/* La maquette du héros est une CAPTURE RÉDUITE : elle applique la même règle à
   sa propre échelle. Ses états les plus longs sont « Partiel » et « Impayé »,
   pas « En attente » — lui donner les 88 px des scènes rognait les noms des
   locataires, « Thomas L… ». */
:root { --col-etat-mini: 68px; }
.ec-paiements li { grid-template-columns: minmax(0, 1fr) 70px var(--col-etat-mini); }
@media (max-width: 760px) {
  .sc-loyers li { grid-template-columns: minmax(0, 1fr) auto; }
  .ec-paiements li { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ═══ LES QUATRE INDICATEURS DE LA MAQUETTE SE LISENT SUR UNE LIGNE ════════
   Leurs intitulés sont ceux de l'application — « Score locataires moyen »,
   « Encaissé ce mois » — et deux d'entre eux passent à deux lignes dans une
   colonne de 155 px. Les valeurs tombaient alors à quatre hauteurs
   différentes. La ligne de l'intitulé a une hauteur FIXE, celle de deux
   lignes : le chiffre part du même endroit dans les quatre cases. */
.ec-kpis li { display: grid; grid-template-rows: 30px auto auto; align-content: start; }
.ec-kpis span { line-height: 15px; }
.ec-kpis b { margin-top: 0; }
.ec-kpis em { margin-top: 2px; line-height: 14px; }

/* ═══ LA FRISE BANCAIRE EN QUATRE ÉTAPES N'EXISTE PLUS ═════════════════════
   Elle disait une seconde fois ce que le relevé montre déjà — virement reçu,
   pointé, quittancé, comptabilisé. Son balisage a été retiré ; ses cent
   dix lignes de style restaient. Une règle qui ne peint plus rien finit par
   être recopiée ailleurs : elle s'en va aussi. */

/* ── Les quatre offres commencent leur description à la même hauteur ───────
   « Sur devis » s'écrit en 30 px là où un prix s'écrit en 40 : la carte Pro
   démarrait sa description trente-huit pixels plus haut que ses voisines, et
   la rangée se lisait en escalier. La ligne du prix a une hauteur minimale,
   et le chiffre y partage la ligne de base de son unité — « 10 € » et
   « / mois » sont un seul objet. */
.tarif .prix { display: flex; align-items: baseline; gap: 4px; min-height: 64px; }
.tarif.vedette .prix { min-height: 71px; }

/* ═══ UN RELAIS D'ÉTATS NE LAISSE JAMAIS LA CASE VIDE ══════════════════════
   Deux ou trois étiquettes se relaient dans la même case — « En attente »
   devient « Impayé », puis « Payé ». Leurs images clés ne se touchaient pas :
   entre 34 % et 72 % du cycle, soit trois secondes et demie sur neuf, AUCUNE
   n'était visible. Une ligne de loyer sans état se lit comme un bug, et c'est
   exactement ce que la règle du site interdit.

   Les fondus se recouvrent maintenant, image par image : ce qui sort s'éteint
   à l'instant où ce qui entre s'allume. À tout moment du cycle, exactement une
   étiquette est lisible.

     0 → 30 %   premier état
     30 → 34 %  bascule
     34 → 70 %  deuxième état
     70 → 74 %  bascule
     74 → 100 % troisième état (ou le deuxième, s'il n'y en a que deux)
   ═════════════════════════════════════════════════════════════════════════ */
/* LA BASCULE EST INSTANTANÉE, pas un fondu croisé. Les étiquettes occupent la
   MÊME case : un fondu de quatre pour cent les montre toutes deux à moitié
   transparentes, l'une par-dessus l'autre, pendant un tiers de seconde — deux
   textes superposés, exactement ce qu'on cherche à supprimer. Le site le dit
   d'ailleurs plus haut : « un état ne se déplace pas, il bascule ». */
@keyframes disparaitre { 0%, 31.9% { opacity: 1 } 32%, 100% { opacity: 0 } }
@keyframes paraitre    { 0%, 31.9% { opacity: 0 } 32%, 100% { opacity: 1 } }
@keyframes relais      { 0%, 31.9% { opacity: 0 } 32%, 71.9% { opacity: 1 } 72%, 100% { opacity: 0 } }
@keyframes relais-fin  { 0%, 71.9% { opacity: 0 } 72%, 100% { opacity: 1 } }
@media (prefers-reduced-motion: no-preference) {
  /* La ligne des revenus n'a que DEUX états : « En attente » puis « Impayé ».
     Elle empruntait le troisième temps du relais à trois états, et restait
     donc vide pendant tout le deuxième. */
  .scene-revenus .sc-en-attente .sc-retard { animation: paraitre var(--boucle) var(--courbe) infinite; }
}

/* ═══ REPLIS DE TÉLÉPHONE : CE QUE LES RÈGLES POSÉES PLUS HAUT DÉFONT ══════ */

/* La carte recommandée déborde de la page une fois les offres sur une colonne :
   son décollement (`margin: -16px -4px`) lui donne huit pixels de plus que la
   colonne, et la page entière prenait six pixels de défilement horizontal. */
@media (max-width: 900px) {
  .tarif.vedette { margin: 0; }
}
/* Sur une seule colonne, un `span 2` fabrique une deuxième piste implicite et
   écrase la première : la dernière carte de veille tombait à quarante pixels
   de large. */
@media (max-width: 560px) {
  .veilles > .veille:last-of-type, .veille-phare { grid-column: span 1; }
}

/* ═══ LA MAQUETTE DU HÉROS SE RÉDUIT À TOUTE LARGEUR ══════════════════════
   Elle gardait sa largeur d'ordinateur — 790 px — et n'était mise à l'échelle
   que sous 900 px. Entre 900 et 1 250 px, sa colonne est pourtant plus étroite
   que cela : le cadre se rétrécissait, son `overflow: hidden` rognait le menu
   latéral et les libellés, et « Appartement Haussmann » y perdait sa fin. Ce
   sont les largeurs d'un portable courant.

   La réduction vaut donc partout ; le script la borne à 1, la maquette ne
   grossit jamais au-delà de son gabarit. */
:root { --ec-largeur-pc: 790px; }
.hero-ecran { height: var(--ec-hauteur, auto); }
.hero-ecran .ec-cadre {
  width: var(--ec-largeur-pc);
  transform: scale(var(--ec-echelle, 1));
  transform-origin: top left;
}

/* ═══ AUCUN LIBELLÉ DE SCÈNE NE SE COUPE ══════════════════════════════════
   « Thomas Leroy · Appartement Haussmann » demande 261 px ; la colonne d'une
   scène en offre 198 sur un écran de 1 024 px, 214 sur 1 280. Le libellé était
   posé en `nowrap` + `ellipsis` : on y perdait le nom du bien, c'est-à-dire ce
   que la ligne sert à démontrer. Il se replie sur deux lignes, la ligne grandit
   d'autant, et la scène reste lisible à toute largeur. */
.scene .sc-lib, .sc-loyers .sc-lib {
  white-space: normal; overflow: visible; text-overflow: clip;
  line-height: 1.35;
}

/* ═══ LE GRATUIT, EN RETRAIT ══════════════════════════════════════════════
   Troisième de la rangée et volontairement moins appuyé : c'est une porte
   d'entrée, pas une offre qui dispute le regard aux deux payantes. Le retrait
   se fait par la VALEUR des teintes, jamais par un liseré d'une autre nature —
   la carte reste une carte du système. */
.tarif.tarif-discret {
  border-color: var(--filet-pale);
  background: none;
}
.tarif.tarif-discret h3,
.tarif.tarif-discret .prix b { color: var(--encre-douce); }
.tarif.tarif-discret .prix span,
.tarif.tarif-discret .desc,
.tarif.tarif-discret li { color: var(--encre-legere); }
.tarif.tarif-discret li strong { color: var(--encre-douce); font-weight: 600; }
.tarif.tarif-discret li::before { background: var(--filet-pale); }
.tarif.tarif-discret .btn { color: var(--encre-douce); border-color: var(--filet-pale); }
.tarif.tarif-discret .btn:hover { color: var(--vert-bouteille); border-color: var(--vert-bouteille); }

/* La bascule du mandant actif s'anime sur le FILET, pas sur une ombre
   intérieure : `box-shadow: inset` se peint par-dessus le rembourrage et mange
   la première lettre, ce que le reste de la feuille a déjà corrigé partout
   ailleurs. Même image clé, même durée, même effet visible — une bordure. */
@keyframes sc-mandant-actif {
  0%, 31%   { border-left-color: var(--vert-bouteille); color: var(--encre) }
  32%, 100% { border-left-color: var(--filet-pale); color: var(--encre-douce) }
}

/* ═══ LES QUATRE BLOCS PRO BOUGENT DE LA MÊME FAÇON ═══════════════════════
   Deux d'entre eux démontraient quelque chose — le client actif qui bascule et
   sa liste de lots qui se remplace, les quatre chiffres qui montent de zéro —
   et les deux autres ne bougeaient pas du tout. Une section où la moitié des
   cartes s'anime et l'autre non se lit comme une section inachevée.

   Les deux dernières empruntent la MÊME grammaire, sans en inventer une :
   neuf secondes, `linear`, le filet de gauche qui s'allume à tour de rôle.
   C'est le geste de `sc-mandant-actif`, et il dit la même chose ici — un
   gestionnaire à la fois, une déclaration à la fois.
   ═════════════════════════════════════════════════════════════════════════ */
.sc-equipe li, .sc-fiscal-pro li {
  border-left: var(--filet-etat) solid var(--filet-pale);
  padding-left: 13px;
}
@media (prefers-reduced-motion: no-preference) {
  .scene-equipe .sc-equipe li,
  .scene-fiscal-pro .sc-fiscal-pro li {
    animation: sc-mandant-actif var(--boucle) var(--courbe) infinite;
  }
  .scene-equipe .sc-equipe li:nth-child(2),
  .scene-fiscal-pro .sc-fiscal-pro li:nth-child(2) { animation-delay: 3s; }
  .scene-equipe .sc-equipe li:nth-child(3),
  .scene-fiscal-pro .sc-fiscal-pro li:nth-child(3) { animation-delay: 6s; }
}
/* Immobilité demandée : la première ligne est celle qui reste allumée, comme
   pour le sélecteur de mandant. */
@media (prefers-reduced-motion: reduce) {
  .scene-equipe .sc-equipe li:first-child,
  .scene-fiscal-pro .sc-fiscal-pro li:first-child {
    border-left-color: var(--vert-bouteille); color: var(--encre);
  }
}

/* ═══ LES QUATRE CARTES PRO S'ALIGNENT ════════════════════════════════════
   Leurs textes n'ont pas la même longueur : les scènes démarraient donc à
   quatre hauteurs différentes, et les pieds de carte ne tombaient pas
   ensemble. Le paragraphe prend la place qui reste, la scène se pose au bas de
   la carte, et toutes les scènes ont la même hauteur minimale. */
.pro-bloc { display: flex; flex-direction: column; }
.pro-bloc > p { flex: 1 1 auto; }
.pro-grille .scene { margin-top: 20px; min-height: 208px; }

/* ═══ LA CASCADE DE L'ÉTAPE 2 ═════════════════════════════════════════════
   Une colonne, cinq lignes, un seul mouvement. Elle remplace deux animations
   qui disaient la même chose côte à côte — le calendrier des douze échéances
   et le relevé qui pointe puis quittance.

   La grammaire est celle de tout le site : neuf secondes, `linear`, le filet
   de gauche qui passe au vert, rien qui se déplace, rien qui disparaît. La
   première ligne — le bail déposé — est allumée dès la première image : c'est
   le geste du bailleur, il a déjà eu lieu. Les quatre suivantes s'allument à
   son tour, ce qui EST la démonstration : une action, puis plus rien.
   ═════════════════════════════════════════════════════════════════════════ */
.sc-cascade { list-style: none; margin: 0; padding: 0; }
.sc-cascade li {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--col-etat);
  align-items: center; gap: 12px;
  padding: 11px 0 11px 13px;
  border-bottom: 1px solid var(--filet);
  border-left: var(--filet-etat) solid var(--filet-pale);
}
.sc-cascade li:last-child { border-bottom: 0; }
.sc-cascade .sc-lib { white-space: normal; overflow: visible; text-overflow: clip; }
/* Ce qui n'est pas encore arrivé garde son texte lisible : seule l'étiquette
   d'état attend son tour. Une donnée n'a pas d'état intermédiaire. */
.sc-cascade .sc-etat { opacity: 0; }
.sc-cascade-pied {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--filet);
  font-size: 12.5px; color: var(--encre-legere);
}
/* CINQ IMAGES CLÉS PLUTÔT QUE CINQ RETARDS. Avec `animation-delay`, chaque
   ligne suit sa propre boucle décalée : au bout d'un cycle les phases ne
   coïncident plus, et l'on voit la cinquième allumée pendant que la troisième
   attend encore. Un ordre qui se défait se lit comme un bug — ce que la règle
   d'animation du site interdit expressément.
   Les cinq lignes partagent donc UNE boucle et se distinguent par l'instant de
   leur bascule. L'ordre est alors garanti à chaque tour, et les cinq repartent
   ensemble. */
@keyframes casc-1 { 0%, 7%  { border-left-color: var(--filet-pale) } 8%,  100% { border-left-color: var(--vert-bouteille) } }
@keyframes casc-2 { 0%, 25% { border-left-color: var(--filet-pale) } 26%, 100% { border-left-color: var(--vert-bouteille) } }
@keyframes casc-3 { 0%, 43% { border-left-color: var(--filet-pale) } 44%, 100% { border-left-color: var(--vert-bouteille) } }
@keyframes casc-4 { 0%, 61% { border-left-color: var(--filet-pale) } 62%, 100% { border-left-color: var(--vert-bouteille) } }
@keyframes casc-5 { 0%, 79% { border-left-color: var(--filet-pale) } 80%, 100% { border-left-color: var(--vert-bouteille) } }
@keyframes casc-et-1 { 0%, 7%  { opacity: 0 } 8%,  100% { opacity: 1 } }
@keyframes casc-et-2 { 0%, 25% { opacity: 0 } 26%, 100% { opacity: 1 } }
@keyframes casc-et-3 { 0%, 43% { opacity: 0 } 44%, 100% { opacity: 1 } }
@keyframes casc-et-4 { 0%, 61% { opacity: 0 } 62%, 100% { opacity: 1 } }
@keyframes casc-et-5 { 0%, 79% { opacity: 0 } 80%, 100% { opacity: 1 } }
@media (prefers-reduced-motion: no-preference) {
  .sc-c0 { animation: casc-1 var(--boucle) var(--courbe) infinite; }
  .sc-c1 { animation: casc-2 var(--boucle) var(--courbe) infinite; }
  .sc-c2 { animation: casc-3 var(--boucle) var(--courbe) infinite; }
  .sc-c3 { animation: casc-4 var(--boucle) var(--courbe) infinite; }
  .sc-c4 { animation: casc-5 var(--boucle) var(--courbe) infinite; }
  .sc-c0 .sc-etat { animation: casc-et-1 var(--boucle) var(--courbe) infinite; }
  .sc-c1 .sc-etat { animation: casc-et-2 var(--boucle) var(--courbe) infinite; }
  .sc-c2 .sc-etat { animation: casc-et-3 var(--boucle) var(--courbe) infinite; }
  .sc-c3 .sc-etat { animation: casc-et-4 var(--boucle) var(--courbe) infinite; }
  .sc-c4 .sc-etat { animation: casc-et-5 var(--boucle) var(--courbe) infinite; }
}
/* Immobilité demandée : tout est fait, tout est lisible. */
@media (prefers-reduced-motion: reduce) {
  .sc-cascade li { border-left-color: var(--vert-bouteille); }
  .sc-cascade .sc-etat { opacity: 1; }
}
@media (max-width: 560px) {
  .sc-cascade li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .sc-cascade .sc-etat { justify-self: start; }
}

/* ═══ UN VERT FONCÉ INTERACTIF S'ÉCLAIRCIT SOUS LE POINTEUR ET SOUS LE DOIGT ═══
   La règle de l'application (design.css), pour les deux gestes vert foncé de la
   page : l'action principale (`.btn-primary`, sauf dans la barre de navigation,
   où elle est blanche) et le bouton de la huitième case (`.veille-final .btn`).
   Ils passaient au vert PROFOND au survol, retour presque invisible ; ils
   passent au VERT PÂLE, écriture et contour en vert bouteille (9,59:1).
   Ne la reçoivent pas : la bascule de tarif active (un état), les boutons des
   maquettes de scène (inertes, `aria-hidden`), le bouton de menu posé sur la
   barre verte. Survol réservé aux pointeurs qui survolent (`hover: hover`),
   appui au doigt par `:active` (landing.js écoute `touchstart` pour iOS). Le
   focus clavier garde le contour de `:where(a, summary, details):focus-visible`. */
@media (hover: hover) {
  :is(.btn-primary, .veille-final .btn):not(.nav .btn):hover {
    background: var(--vert-pale); border-color: var(--vert-bouteille); color: var(--vert-bouteille);
  }
}
:is(.btn-primary, .veille-final .btn):not(.nav .btn):active {
  background: var(--vert-pale); border-color: var(--vert-bouteille); color: var(--vert-bouteille);
}
/* Ils BASCULENT, ils ne fondent pas (règle 4 de CLAUDE.md) : en fondu, le fond
   passait par un vert moyen pendant que l'écriture devenait vert bouteille d'un
   coup, et le libellé disparaissait le temps de la transition. */
:is(.btn-primary, .veille-final .btn):not(.nav .btn) { transition: none; }