/* ==================================================================
   SimFiscal : feuille de style unique, mobile-first
   ------------------------------------------------------------------
   Identité : « Encre électrique ».

   Structure des grands produits fintech (héros sombre encre marine +
   contenu clair), et non le tout-gris précédent : des blocs pleine
   largeur en marine #0B1220 signent le landing et la section expert,
   même en thème clair. Un seul accent : le cobalt électrique #2B4EFF.

   Contrastes vérifiés au calcul (WCAG) :
     cobalt sur blanc 5,77:1 · blanc sur cobalt 5,77:1 ·
     encre sur sol 17,5:1 · accent sombre sur sol 6,4:1.
   Palette de données revalidée au validateur sur les deux nouvelles
   surfaces (cartes blanches, surface marine sombre) : 4/4 PASS.

   Typo : pile système (zéro dépendance). L'identité vient du poids
   (800), du resserrement (-0.04em) et de l'échelle héros, pas d'une
   fonte embarquée. Le rouge reste réservé aux montants négatifs et aux
   scénarios infinançables : jamais décoratif.
   ================================================================== */

:root {
  color-scheme: light;

  /* Surfaces */
  --fond: #f3efe6;
  --surface: #fffcf7;
  --surface-2: #ece6d8;
  --filet: #e4dccb;
  --filet-fort: #cfc4ae;

  /* Encres */
  --encre: #161e2e;
  --encre-2: #334155;
  --encre-3: #475569;

  /* Accent : bleu d'encre */
  --accent: #2b4eff;
  --accent-fonce: #1f3bd9;
  --sur-accent: #ffffff;
  --accent-voile: rgba(43, 78, 255, 0.08);

  /* Statuts (réservés : jamais utilisés comme couleur de série) */
  --bon: #1c6b46;
  --bon-voile: rgba(28, 107, 70, 0.1);
  --alerte: #8a5a12;
  --alerte-voile: rgba(138, 90, 18, 0.11);
  --grave: #9c2f22;
  --grave-voile: rgba(156, 47, 34, 0.1);

  /* Palette catégorielle validée (surface #faf7f2)
     ΔE CVD adjacent min. 15,2 · contraste ≥ 3:1 · bande de clarté OK, */
  --serie-1: #1668b3;  /* ce qui vous reste */
  --serie-2: #a8721a;  /* cotisations */
  --serie-3: #b3402f;  /* impôts */
  --serie-4: #6b5ca5;  /* charges */

  /* Typographie
     Les titres passent en serif de document : c'est la lettre des registres
     comptables, des liasses fiscales et de la presse économique, pas celle
     d'une application de plus. Choix restreint aux fontes DÉJÀ installées
     (Charter/Cambria/Palatino/Georgia) : aucune requête réseau, donc aucun
     transfert vers un tiers : Google Fonts est précisément ce qu'un outil
     fiscal français doit éviter (RGPD). Charter et Cambria en tête : ce
     sont les seules du lot à chiffres alignés par défaut ; pour les autres,
     `lining-nums` est forcé sur les titres chiffrés (voir h1/h2/h3). */
  --titre: Fraunces, Charter, "Bitstream Charter", "Charis SIL", Cambria, "Palatino Linotype",
    Palatino, Georgia, "Times New Roman", serif;
  --corps: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* Les montants restent en proportionnel + chiffres tabulaires : ils s'alignent
     en colonne sans la fonte à chasse fixe. Le français sépare les milliers par
     une espace fine insécable, qu'une fonte monospace étire à une chasse pleine :
     « 487 099 € » devient alors illisible. */
  --chiffres: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* Réservée aux repères courts sans espaces : 1re, codes INSEE, numérotation. */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --rayon: 10px;
  --rayon-s: 8px;
  --rayon-pilule: 980px; /* la pilule des CTA Apple */
  --ombre: 0 1px 3px rgba(11, 18, 32, 0.06);
  --ombre-haute: 0 10px 30px rgba(11, 18, 32, 0.10);
  --largeur: 1280px;

  /* Blocs héros : encre marine pleine largeur, identiques dans les deux
     thèmes : c'est la signature structurelle de l'identité. */
  --bloc-encre: #0b1220;
  --bloc-encre-2: #111a30;
  --bloc-encre-texte: #f2f4f8;
  --bloc-encre-sourdine: #94a0bd;
  --bloc-encre-filet: rgba(255, 255, 255, 0.10);
  --bloc-encre-accent: #6e8bff;

  /* Une courbe d'accélération unique, partagée : le mouvement de toute
     l'interface parle d'une seule voix. Proche de l'« ease-out » d'Apple :
     départ vif, arrivée posée, sans rebond. */
  --easing: cubic-bezier(0.32, 0.72, 0, 1);
  --transition: 0.22s var(--easing);

  /* Le fond translucide de l'en-tête, dérivé de la surface pour tenir dans
     les deux thèmes sans être redéfini. */
  --entete-voile: rgba(246, 247, 249, 0.75);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fond: #070a14;
    --surface: #111830;
    --surface-2: #1a2240;
    --filet: #222b4d;
    --filet-fort: #35406b;

    --encre: #f2f4f8;
    --encre-2: #cbd5e1;
    --encre-3: #94a3b8;

    --accent: #6e8bff;
    --accent-fonce: #8ba3ff;
    --sur-accent: #0b1220;
    --accent-voile: rgba(110, 139, 255, 0.14);

    --bon: #3fa876;
    --bon-voile: rgba(63, 168, 118, 0.14);
    --alerte: #d9a441;
    --alerte-voile: rgba(217, 164, 65, 0.14);
    --grave: #e06a5c;
    --grave-voile: rgba(224, 106, 92, 0.14);

    /* Jeu sombre choisi et validé pour la surface #14171c, pas une inversion. */
    --serie-1: #4d97e6;
    --serie-2: #c08726;
    --serie-3: #e0665a;
    --serie-4: #8578c9;

    --ombre: 0 1px 3px rgba(0, 0, 0, 0.5);
    --ombre-haute: 0 4px 20px rgba(0, 0, 0, 0.6);
    --entete-voile: rgba(9, 13, 26, 0.75);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Lien d'évitement : premier élément focusable de la page : invisible
   jusqu'au Tab, puis affiché par-dessus l'en-tête. */
.lien-evitement {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  background: var(--accent); color: var(--sur-accent);
  padding: 10px 18px; border-radius: var(--rayon-pilule);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transform: translateY(-64px); opacity: 0;
}
.lien-evitement:focus-visible { transform: none; opacity: 1; }

/* Anneau de focus clavier, unique et cohérent, sur tout ce qui est actionnable.
   Avant, seuls les champs réagissaient : un utilisateur au clavier ne voyait
   jamais où il se trouvait sur les boutons, liens, options et onglets.
   `:focus-visible` n'apparaît qu'au clavier : jamais au clic souris. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--rayon-s);
}
/* Les champs portent déjà leur propre halo ; on évite le double trait. */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

body {
  font-family: var(--corps);
  background: var(--fond);
  color: var(--encre);
  line-height: 1.47;
  font-size: 17px;
  /* L'interlettrage négatif d'Apple sur tout le corps de texte. */
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Un libellé de formulaire administratif : petites capitales espacées. */
.micro-titre {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 700; color: var(--accent);
}

/* ---------- En-tête ----------
   Barre translucide floutée, à la manière d'apple.com : le contenu défile
   derrière un voile dépoli. La séparation d'avec la page n'apparaît qu'une
   fois défilé (classe .defile posée par un écouteur de scroll), pour ne pas
   trancher inutilement quand on est en haut. */
.entete {
  background: var(--entete-voile);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  padding: 11px 16px;
  padding-top: calc(11px + env(safe-area-inset-top));
  position: sticky; top: 0; z-index: 30;
  transition: border-color var(--transition), background var(--transition);
}
.entete.defile { border-bottom-color: var(--filet); }
/* Repli sans backdrop-filter (rare) : on retombe sur une surface opaque. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .entete { background: var(--surface); }
}
.entete-inner {
  max-width: var(--largeur); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.marque { display: flex; align-items: center; gap: 11px; }
/* Mot-symbole : pas de pastille, le nom lui-même, très gras, très serré,
   terminé par un point cobalt : la signature typographique de l'identité. */
.logo { display: none; }
.entete h1 { line-height: 1.1; }
.entete h1 button {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--titre); font-size: 21px; font-weight: 700;
  letter-spacing: -0.005em; color: inherit;
}
.entete h1 button::after { content: "."; color: var(--accent); }
/* La signature de la barre reste compacte : elle passait à la ligne sur
   375 px, ce qui gonflait inutilement l'en-tête. On la réserve aux écrans
   qui ont la place. */
.tagline {
  font-size: 12px; color: var(--encre-3); letter-spacing: -0.01em;
  margin-top: 1px; display: none;
}
/* Sous 500 px, la barre ne garde que l'essentiel : mot-symbole + CTA. */
@media (min-width: 500px) {
  .tagline { display: block; }
}

/* ==================================================================
   Questionnaire : une question à la fois
   ================================================================== */

/* Le formulaire complet se lit en lignes libellé | champ : il occupe toute
   la largeur de la page (--largeur), comme la calculette Schwab. */
#questionnaire { max-width: none; }

/* Option IA : un lien discret, pas une deuxième porte d'entrée. Il vit à
   l'intérieur de #questionnaire (voir index.html) : il disparaît de
   lui-même dès qu'on quitte le questionnaire, sans JS dédié. */
.lien-ia {
  display: block; width: fit-content; margin: 0 0 16px auto;
  background: none; border: none; padding: 4px 0; cursor: pointer;
  font-family: var(--corps); font-size: 13.5px; color: var(--encre-3);
  text-align: right; line-height: 1.4;
}
.lien-ia:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.lien-ia:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Un seul cadre visible pour tout l'outil : bande d'en-tête et formulaire
   ensemble : façon calculette Schwab : la page ne pose plus le formulaire
   à même le fond, il se distingue comme un widget contenu. Partagé avec
   .intro-boite (le raccourci IA), pour un même traitement des deux entrées.
   Plat, pas « carte SaaS » : bordure fine, coin peu arrondi, PAS d'ombre, le
   contour suffit à détacher le widget du fond, comme chez Schwab. */
.widget-outil, .intro-boite {
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--rayon-s); padding: 26px; box-shadow: none;
}

/* Bandeau d'en-tête DANS le widget : gris plat, séparé par un filet, façon
   la bande d'accordéon « Filing status and income: » de Schwab. Déborde du
   padding du widget (marges négatives) pour affleurer aux quatre coins. */
.widget-entete {
  background: var(--surface-2);
  margin: -26px -26px 22px; padding: 16px 26px 14px;
  border-bottom: 1px solid var(--filet);
  border-radius: var(--rayon-s) var(--rayon-s) 0 0;
}
.widget-entete .compteur { margin-bottom: 0; }
/* Le compteur perd sa couleur d'accent dans ce contexte : une étiquette
   d'utilitaire grise, pas un élément de marque, plus proche de Schwab que
   du reste de l'identité. Sélecteur à 3 classes : l'emporte sur .micro-titre
   sans jamais toucher ses usages ailleurs (pied de page, fiches, etc.). */
.widget-entete .compteur.micro-titre { color: var(--encre-3); font-weight: 600; }

/* ---------- Lignes du formulaire : libellé | champ, à la Schwab ---------- */
/* Chaque question est une ligne séparée par un filet ; les champs riches
   (commune, situations, curseur avec aperçu) passent en pleine largeur. */
.f-ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px 28px; align-items: start;
  padding: 20px 0; border-top: 1px solid var(--filet);
}
.f-ligne:first-child { border-top: none; padding-top: 2px; }
.f-libelle label {
  display: block; font-size: 16.5px; font-weight: 650;
  line-height: 1.35; letter-spacing: -0.01em;
}
.f-libelle small {
  display: block; margin-top: 5px;
  font-size: 13.5px; line-height: 1.5; color: var(--encre-3); font-weight: 400;
}
/* Question secondaire : elle reste accessible mais cesse de peser autant que
   les huit qui décident vraiment du résultat. */
.f-discret .f-libelle label { font-size: 14.5px; font-weight: 600; color: var(--encre-2); }
.f-discret .cases label { font-size: 13px; padding: 9px 11px; }

/* Bulle d'aide : au survol comme au clavier, sans dépendance ni calcul de
   position. Elle sort du flux pour ne pas décaler la ligne. */
.info-bulle { position: relative; display: inline-block; margin-left: 6px; vertical-align: middle; }
.info-bulle-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--filet-fort); color: var(--encre-3);
  font-family: var(--corps); font-size: 10px; font-weight: 700; font-style: italic;
  cursor: help; transition: border-color 0.12s, color 0.12s;
}
.info-bulle:hover .info-bulle-pastille,
.info-bulle:focus .info-bulle-pastille,
.info-bulle:focus-within .info-bulle-pastille { border-color: var(--accent); color: var(--accent); }
.info-bulle-contenu {
  position: absolute; z-index: 40; left: 0; top: calc(100% + 8px);
  width: max-content; max-width: min(460px, 78vw);
  background: var(--surface); color: var(--encre);
  border: 1px solid var(--filet-fort); border-radius: var(--rayon-s);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.13);
  padding: 12px 14px; font-size: 12.5px; line-height: 1.45; font-weight: 400;
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity 0.14s, transform 0.14s, visibility 0.14s;
  white-space: normal; text-align: left; letter-spacing: 0;
}
.info-bulle:hover .info-bulle-contenu,
.info-bulle:focus .info-bulle-contenu,
.info-bulle:focus-within .info-bulle-contenu { opacity: 1; visibility: visible; transform: none; }
.info-bulle-contenu strong { display: block; margin-bottom: 8px; font-size: 13px; }
.info-bulle-contenu p { margin: 0 0 7px; color: var(--encre-2); }
.info-bulle-contenu p:last-child { margin-bottom: 0; }
.info-bulle-contenu p em { font-style: italic; color: var(--encre); }
.info-bulle-contenu table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.info-bulle-contenu th, .info-bulle-contenu td {
  text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--filet);
  font-variant-numeric: tabular-nums;
}
.info-bulle-contenu th:first-child, .info-bulle-contenu td:first-child { text-align: left; }
.info-bulle-contenu th { font-size: 11px; color: var(--encre-3); font-weight: 600; }
.info-bulle-contenu tr:last-child td { border-bottom: none; }
.info-bulle-contenu em { color: var(--encre-3); font-size: 11.5px; font-style: normal; }
/* Sur mobile, la bulle se recale à gauche pour ne pas déborder de l'écran. */
@media (max-width: 680px) {
  .info-bulle-contenu { left: auto; right: 0; max-width: 82vw; }
  .info-bulle-contenu table { font-size: 11.5px; }
}

.f-large { grid-template-columns: 1fr; }
.f-large .f-controle { margin-top: 8px; }
.f-controle { min-width: 0; }
.f-controle .f-detail { margin-top: 7px; }
.f-erreur { margin-top: 10px; }
#notesExtraction .bandeau { margin: 0 0 20px; }
#formProjet .perso { margin-top: 26px; }
@media (max-width: 680px) {
  .f-ligne { grid-template-columns: 1fr; }
  .f-controle { margin-top: 6px; }
}

/* ---------- Montant ---------- */
/* Un champ de formulaire ordinaire, pas une vitrine : même gabarit que les
   autres saisies : dans une ligne parmi neuf, un 30 px hurlerait. */
.q-saisie-euro { position: relative; }
.q-saisie-euro input {
  font-family: var(--chiffres); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 600; letter-spacing: -0.02em;
  padding: 12px 38px 12px 13px; width: 100%;
  background: var(--surface); color: var(--encre);
  border: 1px solid var(--filet-fort); border-radius: var(--rayon-s);
  -webkit-appearance: none; appearance: none;
}
.q-saisie-euro input::-webkit-outer-spin-button,
.q-saisie-euro input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.q-saisie-euro input[type=number] { -moz-appearance: textfield; }
.q-saisie-euro span {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 15px; font-weight: 500; color: var(--encre-3); pointer-events: none;
}

/* ---------- Plage : un minimum et un maximum ---------- */
.q-plage { display: flex; align-items: center; gap: 10px; }
.q-plage .q-saisie-euro { flex: 1; min-width: 0; }
.q-plage-tiret { color: var(--encre-3); font-size: 14px; flex-shrink: 0; }

/* ---------- Postes : total décomposé en catégories ---------- */
.q-postes-grille {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px;
}
/* Le nom du poste est modifiable : il se donne l'air d'une étiquette tant
   qu'on n'y touche pas, et se révèle champ au survol et au focus. */
.q-poste-tete { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.q-poste-nom {
  flex: 1; min-width: 0; font-family: var(--corps);
  font-size: 12.5px; color: var(--encre-2);
  background: transparent; border: 1px solid transparent; border-radius: 5px;
  padding: 2px 5px; margin: 0;
  transition: border-color 0.12s, background 0.12s;
}
.q-poste-nom:hover { border-color: var(--filet); background: var(--surface-2); }
.q-poste-nom:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
  color: var(--encre); box-shadow: 0 0 0 3px var(--accent-voile);
}
.q-poste-suppr {
  flex-shrink: 0; width: 20px; height: 20px; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 5px; cursor: pointer;
  color: var(--encre-3); font-size: 16px;
  opacity: 0; transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.q-poste:hover .q-poste-suppr, .q-poste-suppr:focus-visible { opacity: 1; }
.q-poste-suppr:hover { background: var(--alerte-voile); color: var(--alerte); }
.q-postes-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--filet);
}
.q-poste-ajout {
  background: none; border: 1px dashed var(--filet-fort); border-radius: var(--rayon-s);
  padding: 7px 12px; font-family: var(--corps); font-size: 12.5px; font-weight: 500;
  color: var(--encre-2); cursor: pointer; width: auto;
  transition: border-color 0.12s, color 0.12s;
}
.q-poste-ajout:hover { border-color: var(--accent); color: var(--accent); }
.q-poste .q-saisie-euro input { font-size: 15px; padding: 10px 32px 10px 12px; }
.q-poste .q-saisie-euro span { font-size: 13px; right: 12px; }
/* Le filet et la marge vivent désormais sur .q-postes-pied, qui porte à la
   fois le bouton d'ajout et le total. */
.q-postes-total {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13.5px; color: var(--encre-3);
}
.q-postes-total b {
  font-family: var(--chiffres); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 650; color: var(--encre); letter-spacing: -0.02em;
}
@media (max-width: 680px) {
  .q-postes-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Croissance du CA ---------- */
.q-croissance {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.q-croissance-ca-depart {
  background: var(--surface-2);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-s);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.q-croissance-depart-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--encre);
}
.q-croissance-depart-label em {
  font-style: normal;
  font-weight: normal;
  color: var(--encre-3);
  font-size: 12px;
}
.q-croissance-ca-depart .q-saisie-euro input {
  max-width: 170px;
  font-size: 16px;
  font-weight: 650;
}
.q-croissance-rythme {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-s);
  padding: 12px 14px;
}
.q-croissance-rythme-entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.q-croissance-rythme-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--encre-2);
}
.q-croissance-valeur {
  font-family: var(--chiffres);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}
.q-croissance-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px;
}
.q-preset-btn {
  background: var(--surface-2);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-s);
  padding: 5px 10px;
  font-family: var(--chiffres);
  font-size: 12px;
  font-weight: 600;
  color: var(--encre-2);
  cursor: pointer;
  transition: all 0.12s ease;
}
.q-preset-btn:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
}
.q-preset-btn.actif {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.q-croissance-options {
  margin-top: 10px;
}
.q-croissance-case {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--encre-2); margin-bottom: 0;
}
.q-croissance-case input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); flex-shrink: 0; }
.q-taux-fixe input[type="range"] { height: 32px; width: 100%; }
.q-taux-variable {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--filet);
}
.q-taux-variable[hidden], .q-taux-fixe[hidden] { display: none; }
.q-taux-segment label {
  display: block; font-size: 11px; color: var(--encre-3); margin-bottom: 4px;
  font-family: var(--mono); letter-spacing: 0.02em;
}
.q-trajectoire-bloc {
  background: var(--surface-2);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-s);
  padding: 10px 12px;
}
.q-trajectoire-tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 6px;
}
.q-trajectoire-tete .micro-titre {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--encre-2);
  margin: 0;
}
.q-trajectoire-tete .note {
  font-size: 11px;
  color: var(--encre-3);
  margin: 0;
}
.q-saisie-pourcent { position: relative; }
.q-saisie-pourcent input {
  font-family: var(--chiffres); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 600; letter-spacing: -0.02em;
  padding: 9px 26px 9px 10px; width: 100%;
  background: var(--surface); color: var(--encre);
  border: 1px solid var(--filet-fort); border-radius: var(--rayon-s);
  -webkit-appearance: none; appearance: none;
}
.q-saisie-pourcent input::-webkit-outer-spin-button,
.q-saisie-pourcent input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.q-saisie-pourcent span {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 12px; font-weight: 500; color: var(--encre-3); pointer-events: none;
}

/* ---------- Date ---------- */
.q-date input {
  font-family: var(--chiffres); font-size: 19px; font-weight: 500; padding: 14px;
}

/* ---------- Commune ---------- */
.q-commune input[type="search"] { font-size: 17px; padding: 14px; }
.q-commune .avance { margin-top: 18px; margin-bottom: 0; }
.q-commune .zonage-resultat { margin-top: 14px; margin-bottom: 0; }

/* Motif d'inaccessibilité : pourquoi ce statut ne concourt pas. */
.motif-inaccessible {
  font-size: 12.5px; line-height: 1.45; color: var(--alerte);
  background: var(--alerte-voile); border-radius: var(--rayon-s);
  padding: 8px 10px; margin-top: 8px;
}

/* ---------- Multi ---------- */
.q-multi .q-aucun { border-top: 2px solid var(--filet-fort); }

/* Un libellé + son effet en une ligne : la case dit ce qu'elle déclenche
   sans qu'il faille lire l'aide de la question. */
.cases label {
  transition: background-color 0.12s ease, border-color 0.12s ease;
  cursor: pointer;
}
.cases label:hover {
  background: var(--surface-2);
}
.cases label.actif {
  background: var(--accent-voile);
}
.cases label > span { display: block; min-width: 0; }
.cases label > span small {
  display: block; margin-top: 2px;
  font-size: 11.5px; line-height: 1.35; color: var(--encre-3); font-weight: 400;
}

/* Variante compacte : deux colonnes sur large écran, une sur mobile. */
.q-multi-compact .cases {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden;
}
.q-multi-compact .cases label { border-right: 1px solid var(--filet); }
.q-multi-compact .cases label:nth-child(2n) { border-right: none; }
.q-multi-compact .q-aucun { grid-column: 1 / -1; border-right: none; }
@media (max-width: 680px) {
  .q-multi-compact .cases { grid-template-columns: 1fr; }
  .q-multi-compact .cases label { border-right: none; }
}

/* Financement initial : récapitulatif live de l'emprunt */
.emprunt-recap {
  background: var(--surface-2);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-s);
  padding: 14px 16px;
  margin-top: 14px;
}
.emprunt-recap-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.emprunt-recap-case {
  display: flex;
  flex-direction: column;
}
.emprunt-recap-case .micro-titre {
  font-size: 10px;
  color: var(--encre-3);
  text-transform: uppercase;
  margin-bottom: 2px;
  letter-spacing: 0.04em;
}
.emprunt-recap-case b {
  font-family: var(--chiffres);
  font-size: 14px;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}

/* ---------- Navigation ---------- */
/* `width:100%` sur les boutons est la valeur de base hors flex : il faut la
   neutraliser ici, sinon « Retour » occupe toute la ligne et pousse
   « Continuer » hors de l'écran. */
.q-nav { display: flex; gap: 10px; margin-top: 30px; }
.q-nav .btn-secondaire { flex: 0 0 auto; width: auto; min-width: 104px; }
.q-nav .btn-primaire { flex: 1; width: auto; }
.q-erreur {
  margin-top: 14px; padding: 10px 12px; font-size: 13px;
  background: var(--grave-voile); color: var(--grave);
  border-left: 2px solid var(--grave); border-radius: 0 2px 2px 0;
}

/* ---------- Mise en page ---------- */
main { max-width: var(--largeur); margin: 0 auto; padding: 40px 22px 24px; }
@keyframes monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Réglages propres au serif : il porte déjà son contraste, inutile de le
   serrer comme une grotesque. Le gras s'arrête à 700 (au-delà, la plupart
   de ces fontes n'ont pas de graisse réelle et le navigateur la simule),
   et les chiffres sont forcés en capitales pour éviter les chiffres
   elzéviriens de Georgia/Palatino dans un titre comme « 99 702 € ». */
h2 {
  font-family: var(--titre); font-size: 34px; font-weight: 700;
  letter-spacing: -0.012em; line-height: 1.12; margin-bottom: 10px;
  font-variant-numeric: lining-nums tabular-nums;
  text-wrap: balance;
}
h3 {
  font-family: var(--titre); font-size: 23px; font-weight: 700;
  letter-spacing: -0.008em; line-height: 1.2;
  font-variant-numeric: lining-nums tabular-nums;
  text-wrap: balance;
}
/* Le fond gris sépare les sections : plus besoin d'un filet pour les border. */
.titre-section { margin: 48px 0 8px; position: relative; }
.aide-texte { color: var(--encre-2); font-size: 16px; line-height: 1.5; margin-bottom: 24px; max-width: 60ch; }

/* ---------- Champs ---------- */
.champ { margin-bottom: 20px; }
.champ > label {
  display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px;
  letter-spacing: -0.005em; color: var(--encre);
}
.champ-case > label {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 500; color: var(--encre);
}
.champ-case input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0; }

input[type="number"], input[type="search"], input[type="date"], select {
  width: 100%; font-family: var(--corps); font-size: 17px; /* ≥16px : pas de zoom iOS */
  letter-spacing: -0.022em;
  background: var(--surface); color: var(--encre);
  border: 1px solid var(--filet-fort); border-radius: var(--rayon-s);
  padding: 13px 14px; -webkit-appearance: none; appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="number"] { font-family: var(--chiffres); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%238b8071' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px;
  padding-right: 36px;
  cursor: pointer;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-voile);
}
.input-euro { position: relative; }
.input-euro input { padding-right: 48px; }
.input-euro span {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--encre-3); font-size: 15px; font-weight: 500;
  pointer-events: none;
}

/* Curseur de plage (range) */
input[type="range"] {
  width: 100%; height: 6px; border-radius: 3px; background: var(--filet-fort);
  outline: none; -webkit-appearance: none; appearance: none; cursor: pointer;
  margin: 12px 0 6px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--surface); box-shadow: var(--ombre);
  cursor: pointer; transition: transform 0.1s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--surface); box-shadow: var(--ombre);
  cursor: pointer;
}

output {
  float: right; font-family: var(--chiffres); font-variant-numeric: tabular-nums;
  color: var(--accent); font-weight: 700; font-size: 13px; letter-spacing: -0.02em;
}
.note { font-size: 13.5px; color: var(--encre-3); margin-top: 6px; line-height: 1.55; max-width: 65ch; }
.note a { color: var(--accent); text-underline-offset: 2px; }

.cases { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
.cases label {
  display: flex; align-items: flex-start; gap: 10px; font-size: 14px;
  cursor: pointer; padding: 11px 12px; background: var(--surface);
  border-bottom: 1px solid var(--filet); margin: 0; transition: background 0.12s;
}
.cases label:last-child { border-bottom: none; }
.cases label:hover { background: var(--surface-2); }
.cases label:has(input:checked) { background: var(--accent-voile); color: var(--encre); }
.cases input { width: 16px; height: 16px; accent-color: var(--accent); margin-top: 2px; flex-shrink: 0; }

/* Aperçu du CA : une bande de registre */
.apercu-ca {
  display: flex; margin-top: 10px; font-family: var(--mono);
  border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden;
}
.apercu-ca span {
  flex: 1; text-align: center; padding: 6px 2px; background: var(--surface);
  border-right: 1px solid var(--filet); font-size: 10px; color: var(--encre-3);
  letter-spacing: 0.06em;
}
.apercu-ca span:last-child { border-right: none; }
.apercu-ca b {
  display: block; color: var(--encre); font-weight: 600; font-size: 12px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.015em; margin-top: 1px;
  cursor: pointer; border-bottom: 1px dotted var(--filet-fort);
}
.apercu-ca b:hover { color: var(--accent); border-bottom-color: var(--accent); }
.apercu-ca .q-chip-saisie {
  display: block; width: 100%; margin-top: 1px; text-align: center;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 12px; font-weight: 600; color: var(--encre);
  background: var(--surface); border: 1px solid var(--accent); border-radius: 3px;
  padding: 0 2px; -webkit-appearance: none; appearance: none;
}
.apercu-ca .q-chip-saisie::-webkit-outer-spin-button,
.apercu-ca .q-chip-saisie::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Replis ---------- */
.avance {
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--rayon); margin-bottom: 20px; overflow: hidden;
}
.avance summary {
  padding: 14px 16px; cursor: pointer; font-size: 13.5px; font-weight: 600;
  color: var(--encre-2); list-style: none; user-select: none; letter-spacing: -0.005em;
}
.avance summary::-webkit-details-marker { display: none; }
.avance summary::before { content: "+"; color: var(--accent); margin-right: 7px; font-weight: 700; }
.avance[open] summary::before { content: "−"; }
.avance[open] summary { border-bottom: 1px solid var(--filet); }
.avance > .champ, .avance > div { padding: 0 14px; }
.avance > .champ:first-of-type { padding-top: 16px; }
.avance > .champ:last-child { padding-bottom: 16px; margin-bottom: 0; }

/* ---------- Boutons ---------- */
.btn-primaire, .btn-secondaire {
  font-family: var(--corps); font-size: 17px; font-weight: 500;
  letter-spacing: -0.022em; /* l'interlettrage serré d'Apple (ne pas re-déclarer) */
  padding: 12px 24px; border-radius: var(--rayon-pilule); cursor: pointer;
  border: 1px solid transparent; width: 100%;
  transition: background var(--transition), transform 0.12s var(--easing),
    box-shadow var(--transition);
}
.btn-primaire { background: var(--accent); color: var(--sur-accent); }
.btn-primaire:hover { background: var(--accent-fonce); }
/* Enfoncement Apple : une légère réduction, pas un décalage vertical. */
.btn-primaire:active, .btn-secondaire:active { transform: scale(0.97); }
.btn-secondaire { background: transparent; color: var(--encre); border-color: var(--filet-fort); }
.btn-secondaire:hover { border-color: var(--encre-3); background: var(--surface); }
.nav-boutons { display: flex; gap: 10px; margin-top: 26px; }
.nav-boutons .btn-secondaire { flex: 0 0 34%; }
.btn-lien {
  background: none; border: none; color: var(--accent); font-family: var(--corps);
  font-size: 15px; letter-spacing: -0.022em; cursor: pointer; padding: 4px 0; font-weight: 400;
}
.btn-lien:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Recherche de commune ---------- */
.resultats-recherche { margin-top: 8px; }
.resultat-commune {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 11px 12px;
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--rayon); margin-bottom: -1px;
  font-family: var(--corps); font-size: 14px; color: var(--encre); cursor: pointer;
  transition: background 0.12s;
}
.resultat-commune:hover { background: var(--accent-voile); border-color: var(--accent); position: relative; z-index: 1; }
.resultat-commune small { color: var(--encre-3); font-family: var(--mono); font-size: 11px; }

.puce {
  font-size: 10.5px; font-weight: 700; padding: 4px 8px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
}
.puce-vert { background: var(--bon-voile); color: var(--bon); }
.puce-bleu { background: var(--accent-voile); color: var(--accent); }
.puce-neutre { background: var(--surface-2); color: var(--encre-3); }
.puce-ambre { background: var(--alerte-voile); color: var(--alerte); }

.zonage-resultat {
  padding: 14px; border-radius: var(--rayon); margin-bottom: 20px;
  border: 1px solid var(--filet); border-left-width: 3px;
  background: var(--surface); font-size: 14px;
}
.zonage-resultat.connu { border-left-color: var(--bon); background: var(--bon-voile); }
.zonage-resultat.inconnu { border-left-color: var(--alerte); background: var(--alerte-voile); }
.zonage-resultat strong { display: block; margin-bottom: 5px; font-weight: 650; font-size: 15px; }
.zonage-resultat p { font-size: 13px; color: var(--encre-2); }
.zonage-resultat a { color: var(--accent); }

/* ---------- Bandeaux ---------- */
.bandeau {
  padding: 13px 14px; border-radius: var(--rayon); margin-bottom: 20px;
  font-size: 13.5px; border: 1px solid var(--filet); border-left-width: 3px;
  background: var(--surface); line-height: 1.5;
}
.bandeau.vert { border-left-color: var(--bon); background: var(--bon-voile); }
.bandeau.ambre { border-left-color: var(--alerte); background: var(--alerte-voile); }
.bandeau strong { font-weight: 700; }
.bandeau a { color: var(--accent); }

/* ---------- Comparaison ---------- */
.comparaison { display: flex; flex-direction: column; gap: 0; margin-top: 18px; }

/* Le verdict replié : deux phrases en vitrine, le reste sur demande. */
.enclair-plus { margin-top: 10px; }
.enclair-plus summary {
  cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--accent);
  list-style: none;
}
.enclair-plus summary::before { content: "+ "; }
.enclair-plus[open] summary::before { content: "− "; }
.enclair-plus ul { margin: 10px 0 0; padding-left: 0; display: flex; flex-direction: column; gap: 10px; }
.enclair-plus li { list-style: none; padding-left: 14px; border-left: 2px solid var(--filet); }
@media print { .enclair-plus { display: block; } .enclair-plus ul { display: flex; } }

/* ==================================================================
   La traversée : Scène canvas, HUD enrichi, Scrubber & Journal
   ================================================================== */
.traversee-titre-bloc {
  margin-bottom: 14px;
}
.cinema-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-s);
  padding: 12px 18px;
  flex-wrap: wrap;
}
.cinema-hud-principale {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.cinema-mois {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--encre);
  font-variant-numeric: lining-nums;
}
.cinema-statut-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--encre-2);
  border: 1px solid var(--filet);
}
.cinema-compteurs {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.cinema-compteur {
  display: flex;
  flex-direction: column;
  position: relative;
}
.cinema-compteur dt {
  font-size: 0.72rem;
  color: var(--encre-3);
  margin: 0 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.cinema-compteur dd {
  margin: 0;
  font-family: var(--chiffres);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--encre);
  font-variant-numeric: lining-nums tabular-nums;
}
.cinema-compteur dd.negatif {
  color: var(--grave);
}
.cinema-treso-etat {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  margin-top: 2px;
  width: fit-content;
}
.cinema-treso-etat.bon {
  background: var(--bon-voile);
  color: var(--bon);
}
.cinema-treso-etat.alerte {
  background: var(--alerte-voile);
  color: var(--alerte);
}
.cinema-treso-etat.negatif {
  background: var(--grave-voile);
  color: var(--grave);
}

/* Grille Scène + Journal des jalons */
.cinema-scene-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 960px) {
  .cinema-scene-layout {
    grid-template-columns: 1fr;
  }
}
.cinema-cadre {
  position: relative;
}
.cinema-scene {
  display: block;
  width: 100%;
  height: 330px;
  border-radius: var(--rayon-s);
  border: 1px solid var(--filet-fort);
  background: var(--surface);
  box-shadow: var(--ombre);
  cursor: ew-resize;
  touch-action: none;
}
.cinema-rail {
  position: absolute;
  top: 10px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 44%;
}
.cinema-carte {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  box-shadow: var(--ombre-haute, var(--ombre));
  padding: 7px 11px;
  font-size: 0.8rem;
  animation: cinemaSurgit 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards, cinemaFond 0.8s ease 4.2s forwards;
}
.cinema-carte strong { display: block; font-size: 0.82rem; }
.cinema-carte span { font-variant-numeric: tabular-nums; opacity: 0.8; font-size: 0.78rem; }
.cinema-carte.teinte-bon { border-left-color: var(--bon); }
.cinema-carte.teinte-alerte { border-left-color: var(--alerte); }
@keyframes cinemaSurgit { from { opacity: 0; transform: translateY(10px); } }
@keyframes cinemaFond { to { opacity: 0; transform: translateY(-8px); } }

/* Journal des jalons & échéances */
.cinema-journal-cadre {
  background: var(--surface);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-s);
  padding: 12px;
  display: flex;
  flex-direction: column;
  max-height: 330px;
}
.cinema-journal-tete {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--filet);
}
.cinema-journal-tete .micro-titre {
  margin: 0 0 2px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--encre-2);
}
.cinema-journal-tete small {
  font-size: 11px;
  color: var(--encre-3);
}
.cinema-journal-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding-right: 4px;
}
.cinema-journal-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--filet);
  border-radius: 6px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: inherit;
}
.cinema-journal-item:hover {
  border-color: var(--encre-3);
  background: var(--surface-2);
}
.cinema-journal-item.actif {
  border-color: var(--accent);
  background: var(--accent-voile);
}
.cinema-journal-item.passe {
  opacity: 0.65;
}
.journal-mois-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--encre-2);
  white-space: nowrap;
}
.journal-texte {
  flex: 1;
  min-width: 0;
}
.journal-titre {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--encre);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.journal-date {
  display: block;
  font-size: 10.5px;
  color: var(--encre-3);
}
.journal-montant {
  font-family: var(--chiffres);
  font-size: 11px;
  font-weight: 700;
  color: var(--bon);
  white-space: nowrap;
}

/* Chronologie & Commandes de transport */
.cinema-chronologie {
  background: var(--surface);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-s);
  padding: 12px 18px;
  margin-top: 12px;
}
.cinema-chronologie-barre {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cinema-chronologie-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--encre);
  min-width: 85px;
}
.cinema-chronologie-fin {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--encre-3);
}
.cinema-scrubber {
  flex: 1;
  accent-color: var(--accent);
  cursor: pointer;
}
.cinema-commandes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.cinema-boutons-transport {
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-transport {
  background: var(--surface-2);
  border: 1px solid var(--filet);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--encre);
  transition: all 0.12s ease;
}
.btn-transport:hover {
  background: var(--filet);
  border-color: var(--filet-fort);
}
.cinema-vitesses { display: flex; gap: 4px; }
.cinema-vitesses button {
  border: 1px solid var(--filet);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--encre);
}
.cinema-vitesses button.actif {
  background: var(--encre);
  color: var(--surface);
  border-color: var(--encre);
}
.cinema-raccourci-note {
  font-size: 11px;
  color: var(--encre-3);
}

/* Panel Et-Si */
.cinema-et-si-panel {
  background: var(--surface);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-s);
  padding: 14px 18px;
  margin-top: 12px;
}
.cinema-et-si-tete {
  margin-bottom: 10px;
}
.cinema-et-si-tete .micro-titre {
  margin: 0 0 2px;
  font-size: 11px;
  text-transform: uppercase;
}
.cinema-et-si-tete small {
  color: var(--encre-3);
  font-size: 12px;
}

@media print {
  .cinema-commandes, .cinema-rail, .cinema-chronologie, .cinema-et-si-panel { display: none; }
}

/* Le simulateur dans le temps : timeline, KPI, trois vues, curseurs. */
.tempo-controles { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.tempo-controles .tempo-timeline { flex: 1; }
.tempo-lecture {
  background: var(--accent); color: var(--sur-accent); border: none;
  border-radius: 50%; width: 34px; height: 34px; cursor: pointer; font-size: 0.8rem;
}
.tempo-annee { font-weight: 700; min-width: 74px; text-align: right; font-variant-numeric: tabular-nums; }
.tempo-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-top: 14px;
}
.tempo-kpi {
  background: var(--surface); border-radius: var(--rayon); padding: 12px 14px;
  box-shadow: var(--ombre);
}
.tempo-kpi dt { font-size: 0.78rem; opacity: 0.75; margin: 0; }
.tempo-kpi dd { margin: 2px 0 0; font-weight: 700; font-size: 1.05rem; font-variant-numeric: lining-nums tabular-nums; }
.tempo-kpi dd.negatif { color: var(--grave); }
.tempo-vues { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
.tempo-vue { background: var(--surface); border-radius: var(--rayon); padding: 14px; box-shadow: var(--ombre); }
.tempo-vue h4 { margin: 0 0 8px; font-size: 0.95rem; }
.tempo-curseurs {
  display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin-top: 14px;
  background: var(--surface); border-radius: var(--rayon); padding: 14px; box-shadow: var(--ombre);
}
.tempo-curseur { flex: 1; min-width: 170px; display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; }
.tempo-curseur output { font-weight: 700; float: right; }
.viz-treso .viz-ligne-treso { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.viz-treso .viz-aire-treso { fill: var(--accent); opacity: 0.12; stroke: none; }
.viz-treso .viz-zero { stroke: var(--texte, currentColor); opacity: 0.35; stroke-dasharray: 3 4; }
.viz-treso .viz-zone-negative { fill: var(--grave); opacity: 0.07; }
.viz-treso .viz-point { fill: var(--accent); }
.viz-treso .viz-point.negatif { fill: var(--grave); }
.viz-treso .viz-point.actif { stroke: var(--surface); stroke-width: 2; }
@media (min-width: 900px) {
  .tempo-vues { grid-template-columns: 1fr 1fr; }
  .tempo-vues .tempo-vue:first-child { grid-column: 1 / -1; }
}
@media print {
  .tempo-controles, .tempo-curseurs { display: none; }
}

/* Bootstrap ou levée : deux cartes sobres, mêmes codes que le reste. */
.financement-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px; margin-top: 14px;
}
.financement-carte {
  background: var(--surface); border: 1px solid var(--ligne, transparent);
  border-radius: var(--rayon); padding: 20px 22px; box-shadow: var(--ombre);
}
.financement-carte h4 { margin: 0 0 4px; font-size: 1.05rem; }
.financement-pitch { margin: 0 0 12px; color: var(--texte-secondaire, inherit); font-size: 0.92rem; }
.financement-carte dl { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.financement-carte dl > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-bottom: 1px dashed var(--ligne, rgba(127, 127, 127, 0.25)); padding-bottom: 6px;
}
.financement-carte dt { font-size: 0.88rem; opacity: 0.8; }
.financement-carte dd { margin: 0; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.financement-carte .note { margin-top: 12px; }
.financement-honnete { margin-top: 12px; }
@media (max-width: 760px) {
  .financement-grille { grid-template-columns: 1fr; }
}
@media print {
  .financement-grille { grid-template-columns: repeat(2, 1fr); }
}

.carte-statut {
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--rayon); padding: 22px; position: relative;
  margin-bottom: 12px; box-shadow: var(--ombre);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  animation: monte 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  cursor: pointer;
}
.carte-statut:hover { box-shadow: var(--ombre-haute); transform: translateY(-2px); z-index: 2; border-color: var(--accent); }
.carte-statut.selectionnee {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-voile), var(--ombre);
}
.carte-statut.gagnant { border-color: var(--bon); box-shadow: var(--ombre); }
.carte-statut.gagnant.selectionnee { border-color: var(--bon); box-shadow: 0 0 0 2px var(--bon-voile), var(--ombre); }
.carte-statut.non-viable { border-color: var(--grave); opacity: 0.72; }
.carte-statut.non-viable.selectionnee { border-color: var(--grave); box-shadow: 0 0 0 2px var(--grave-voile), var(--ombre); }

.carte-statut-action {
  margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--filet);
  display: flex; justify-content: flex-end; align-items: center;
}
.carte-action-texte {
  font-size: 11.5px; font-weight: 600; color: var(--encre-3);
  letter-spacing: 0.01em; transition: all 0.12s ease;
  padding: 3px 7px; border-radius: var(--rayon-s);
}
.carte-statut:hover .carte-action-texte {
  color: var(--accent);
  background: var(--surface-2);
}
.carte-statut.selectionnee .carte-action-texte {
  color: var(--accent);
  background: var(--accent-voile);
  font-weight: 700;
}

.section-detail-comptable {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--filet-fort);
}

.carte-statut-entete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 2px;
}
.carte-statut h4 { font-family: var(--titre); font-size: 18px; font-weight: 650; letter-spacing: -0.026em; line-height: 1.22; }
/* Le chiffre héros : gras et serré, à la manière d'Air. */
.carte-statut .montant {
  font-family: var(--chiffres); font-size: 23px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.035em; white-space: nowrap;
}
.carte-statut .montant.positif { color: var(--bon); }
/* `raye` et non `barre` : `.barre` est déjà la jauge de progression, qui porte
   un fond coloré. Réutiliser ce nom peignait le montant en rouge sur rouge. */
.montant.raye { color: var(--grave); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.carte-statut .sous { font-size: 15px; color: var(--encre-3); margin-bottom: 18px; line-height: 1.4; }

.carte-corps { display: flex; align-items: center; gap: 12px; }
.barre-fond { flex: 1; height: 5px; background: var(--surface-2); border-radius: 1px; overflow: hidden; }
.barre {
  height: 100%; background: var(--accent); border-radius: 0 1px 1px 0;
  transform-origin: left; animation: pousse 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes pousse { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.carte-statut.gagnant .barre { background: var(--bon); }
.carte-statut.non-viable .barre { background: var(--grave); }
.sparkline { width: 66px; height: 22px; flex-shrink: 0; overflow: visible; }
.spark-trait { fill: none; stroke-width: 1.5; }
.spark-aire { opacity: 0.1; stroke: none; }
.spark-point { stroke: var(--surface); stroke-width: 1.5; }

/* Grille plutôt que flex-wrap : les libellés ont des longueurs très inégales
   et s'échelonnaient en escalier. */
.mini-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px 8px; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--filet);
}
.mini-stats span {
  font-size: 11px; color: var(--encre-3); text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; min-width: 0; line-height: 1.35;
}
.mini-stats b {
  display: block; color: var(--encre); font-family: var(--chiffres);
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14.5px;
  letter-spacing: -0.015em; text-transform: none; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ruban {
  position: absolute; top: -10px; left: 14px;
  background: var(--bon); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 0.07em;
}
.ruban-alerte { background: var(--grave); }

.alerte-carte {
  margin-top: 11px; padding: 9px 10px; background: var(--alerte-voile);
  border-left: 2px solid var(--alerte); border-radius: 0 2px 2px 0;
  font-size: 12px; color: var(--encre-2); line-height: 1.5;
}
.alerte-carte.grave { background: var(--grave-voile); border-left-color: var(--grave); }

/* ---------- Sélecteur de statut ---------- */
.selecteur-statut {
  display: flex; gap: 4px; overflow-x: auto; margin: 16px 0 18px;
  scrollbar-width: none; background: var(--surface-2); border-radius: var(--rayon); padding: 4px;
}
.selecteur-statut::-webkit-scrollbar { display: none; }
.onglet-statut {
  background: none; border: none; border-radius: var(--rayon-s);
  color: var(--encre-2); padding: 8px 13px; font-size: 12.5px; font-family: var(--corps);
  cursor: pointer; white-space: nowrap; flex-shrink: 0; font-weight: 550;
  transition: background 0.12s, color 0.12s;
}
.onglet-statut:hover { color: var(--encre); }
.onglet-statut.actif { background: var(--surface); color: var(--encre); box-shadow: var(--ombre); font-weight: 620; }

/* ==================================================================
   Visualisations
   ================================================================== */

.viz-figure { margin: 0 0 18px; position: relative; }
.viz { width: 100%; height: auto; display: block; overflow: visible; }

.viz-axe { stroke: var(--filet-fort); stroke-width: 1; }
.viz-segment { transition: opacity 0.15s; }
.viz-contour { stroke: none; }
.viz-colonne { cursor: pointer; outline: none; }
.viz-colonne.attenue { opacity: 0.45; }
.viz-colonne:focus-visible .viz-contour { stroke: var(--accent); stroke-width: 2; }

.viz-tick {
  font-family: var(--mono); font-size: 10px; fill: var(--encre-3);
  letter-spacing: 0.04em;
}
.viz-tick-note {
  font-family: var(--corps); font-size: 7.5px; fill: var(--alerte);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
}
.viz-etiquette-interne {
  font-family: var(--chiffres); font-size: 9.5px; font-weight: 600;
  fill: #fff; letter-spacing: -0.02em; pointer-events: none;
}

.viz-legende {
  display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 12px;
  padding-top: 11px; border-top: 1px solid var(--filet);
}
.viz-cle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--encre-2); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.viz-cle i { width: 9px; height: 9px; border-radius: 1.5px; flex-shrink: 0; }

.viz-infobulle {
  position: absolute; transform: translate(-50%, -100%);
  /* La bascule haut/bas est calculée dans charts.js, pas de transition sur
     `transform`, qui ferait glisser l'infobulle à travers le graphique. */
  background: var(--surface); border: 1px solid var(--filet-fort);
  border-radius: var(--rayon); padding: 9px 11px; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); z-index: 5;
  min-width: 214px; max-width: min(258px, calc(100vw - 32px));
}
.viz-infobulle strong {
  display: block; font-size: 11px; margin-bottom: 7px; padding-bottom: 6px;
  border-bottom: 1px solid var(--filet); font-family: var(--chiffres);
  letter-spacing: -0.02em; white-space: nowrap;
}
.viz-ligne-bulle {
  display: grid; grid-template-columns: 9px 1fr auto auto; align-items: center;
  gap: 7px; font-size: 11px; color: var(--encre-2); margin-bottom: 3px;
  white-space: nowrap;
}
.viz-ligne-bulle i { width: 9px; height: 9px; border-radius: 1.5px; }
.viz-ligne-bulle b {
  font-family: var(--chiffres); font-variant-numeric: tabular-nums;
  color: var(--encre); letter-spacing: -0.015em; font-weight: 600;
}
.viz-ligne-bulle em {
  font-style: normal; font-family: var(--chiffres); font-size: 9.5px;
  color: var(--encre-3); min-width: 30px; text-align: right;
}
.viz-note-bulle {
  display: block; margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--filet);
  font-size: 10px; color: var(--alerte); font-weight: 600;
}

/* ---------- Frise ZFRR ---------- */
.frise-piste {
  display: flex; gap: 3px; border: 1px solid var(--filet);
  border-radius: var(--rayon); padding: 10px; background: var(--surface);
}
.frise-case {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 0;
}
.frise-case.hors-horizon { opacity: 0.4; }
.frise-jauge {
  width: 100%; height: 42px; background: var(--surface-2);
  border-radius: 1px; display: flex; align-items: flex-end; overflow: hidden;
}
/* Rampe séquentielle : une seule teinte, plus c'est exonéré, plus c'est foncé. */
.frise-jauge span {
  width: 100%; border-radius: 1px 1px 0 0;
  background: color-mix(in oklab, var(--serie-1) calc(30% + var(--part) * 70%), var(--surface-2));
  animation: pousseH 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes pousseH { from { height: 0 !important; } }
.frise-case b {
  font-family: var(--chiffres); font-size: 11.5px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--encre);
}
.frise-case b small { font-size: 8px; color: var(--encre-3); }
.frise-an {
  font-family: var(--mono); font-size: 9px; color: var(--encre-3); letter-spacing: 0.04em;
}
.viz-figure figcaption {
  font-size: 11.5px; color: var(--encre-3); margin-top: 9px; line-height: 1.5;
}

/* ---------- Tableaux : le grand livre ---------- */
.tableau-scroll {
  overflow-x: auto; border: 1px solid var(--filet); border-radius: var(--rayon);
  margin-bottom: 18px; background: var(--surface); -webkit-overflow-scrolling: touch;
}
table { border-collapse: collapse; width: 100%; font-size: 13.5px; min-width: 540px; }
caption {
  text-align: left; padding: 14px 16px; font-family: var(--titre);
  font-size: 15.5px; font-weight: 700; color: var(--encre); letter-spacing: -0.015em;
  border-bottom: 1.5px solid var(--filet-fort);
}
th, td {
  padding: 9px 15px; text-align: right;
  font-family: var(--chiffres); font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em; border-bottom: 1px solid var(--filet); white-space: nowrap;
}
th:first-child, td:first-child {
  text-align: left; position: sticky; left: 0; background: var(--surface);
  font-family: var(--corps); letter-spacing: 0; font-variant-numeric: normal;
}
thead th {
  font-family: var(--chiffres); font-size: 11.5px; letter-spacing: 0.05em;
  color: var(--encre-3); font-weight: 700; background: var(--surface);
  border-bottom: 2px solid var(--filet-fort);
}
tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.018); }
tbody tr:nth-child(even) td:first-child { background: var(--surface); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--accent-voile) !important; }
tbody tr:hover td:first-child { background: var(--accent-voile) !important; }
tr.total td {
  font-weight: 700; background: var(--surface-2) !important;
  border-top: 1.5px solid var(--filet-fort); border-bottom: none;
}
tr.total td:first-child { background: var(--surface-2) !important; }
tr.sous-total td { color: var(--encre-2); font-weight: 550; }
/* Le rouge des montants négatifs, partout, pas seulement dans les tableaux. */
td.neg, .neg { color: var(--grave); }
.ligne-groupe td {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--encre-3); font-weight: 700; padding-top: 15px; padding-bottom: 7px;
  background: var(--surface) !important; font-family: var(--corps);
}
.marque-bascule {
  display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  background: var(--alerte-voile); color: var(--alerte);
  padding: 2px 6px; border-radius: 3px; text-transform: uppercase;
}

/* ---------- Aides ---------- */
.aides {
  display: flex; flex-direction: column; gap: 0; margin-top: 18px;
  border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden;
}
.carte-aide { background: var(--surface); border-bottom: 1px solid var(--filet); }
.carte-aide:last-child { border-bottom: none; }
.carte-aide summary {
  padding: 13px 14px; cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; gap: 12px; transition: background 0.12s;
}
.carte-aide summary:hover { background: var(--surface-2); }
.carte-aide summary::-webkit-details-marker { display: none; }
.carte-aide-titres { flex: 1; min-width: 0; }
.carte-aide h4 { font-family: var(--titre); font-size: 15px; font-weight: 620; letter-spacing: -0.015em; }
.carte-aide .sous { font-size: 11.5px; color: var(--encre-3); }
.verdict {
  font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 3px;
  white-space: nowrap; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.08em;
}
.verdict-oui { background: var(--bon-voile); color: var(--bon); }
.verdict-peut-etre { background: var(--alerte-voile); color: var(--alerte); }
.verdict-non { background: var(--surface-2); color: var(--encre-3); }
.carte-aide-corps { padding: 13px 14px; border-top: 1px solid var(--filet); background: var(--fond); }
.carte-aide-corps ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.carte-aide-corps li {
  font-size: 13px; color: var(--encre-2); padding-left: 14px; position: relative; line-height: 1.55;
}
.carte-aide-corps li::before {
  content: " : "; position: absolute; left: 0; color: var(--filet-fort);
}
.montant-aide {
  font-family: var(--chiffres); font-size: 19px; font-weight: 600; color: var(--bon);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin-bottom: 10px;
}
.liens-aide {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px;
  padding-top: 11px; border-top: 1px solid var(--filet);
}
.liens-aide a { font-size: 12px; color: var(--accent); text-underline-offset: 2px; }

/* ---------- Hypothèses ---------- */
.bloc-hypothese { padding: 12px 14px; border-bottom: 1px solid var(--filet); }
.bloc-hypothese:last-child { border-bottom: none; }
.bloc-hypothese h5 {
  font-size: 12.5px; font-weight: 700; margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.bloc-hypothese p { font-size: 12.5px; color: var(--encre-2); line-height: 1.5; }
.bloc-hypothese a { color: var(--accent); font-size: 11.5px; }

.sources {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--filet);
  font-size: 12px; color: var(--encre-3);
}
.sources h4 {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  margin-bottom: 10px; color: var(--encre-3); font-weight: 700;
}
.sources ol {
  padding-left: 0; list-style: none; display: grid; gap: 5px;
  counter-reset: src;
}
.sources li { counter-increment: src; padding-left: 24px; position: relative; }
.sources li::before {
  content: counter(src, decimal-leading-zero); position: absolute; left: 0;
  font-family: var(--mono); font-size: 9.5px; color: var(--filet-fort); top: 2px;
}
.sources a { color: var(--encre-2); text-underline-offset: 2px; }
.sources a:hover { color: var(--accent); }

/* ---------- Pied ---------- */
.pied {
  max-width: var(--largeur); margin: 34px auto 0; padding: 20px 16px 34px;
  border-top: 1px solid var(--filet); text-align: center;
}
.avertissement {
  font-size: 12.5px; color: var(--encre-2); background: var(--alerte-voile);
  border: 1px solid var(--alerte); border-radius: var(--rayon);
  padding: 11px 14px; margin-bottom: 13px; line-height: 1.55; text-align: left;
}
.millesime { font-size: 11px; color: var(--encre-3); margin-bottom: 6px; line-height: 1.5; }
.copyright {
  font-size: 10.5px; color: var(--encre-3); text-transform: uppercase; letter-spacing: 0.08em;
}

/* ---------- Écrans larges ---------- */
@media (min-width: 700px) {
  .comparaison { display: flex; flex-direction: column; gap: 8px; }
  .carte-statut { margin-bottom: 0; }
  .btn-primaire, .btn-secondaire { width: auto; min-width: 180px; }
  .resultats-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
  .resultats-actions { display: flex; align-items: center; gap: 18px; }
  .resultats-actions .btn-lien { font-size: 13px; color: var(--encre-2); text-decoration: none; }
  .resultats-actions .btn-lien:hover { color: var(--accent); text-decoration: underline; }
  .resultats-entete h2 { font-size: 22px; font-weight: 750; letter-spacing: -0.02em; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==================================================================
   Bloc « En clair »
   La première chose lue. Si le fondateur ne lit que ça, il doit déjà
   pouvoir décider.
   NB : ne pas nommer ce bloc `.verdict` : cette classe est déjà celle des
   pastilles d'éligibilité des aides, qui imposent capitales et nowrap.
   ================================================================== */

.enclair {
  background: var(--surface); border: none;
  border-radius: var(--rayon); padding: 26px; margin-bottom: 24px;
  box-shadow: var(--ombre);
}
.enclair-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.enclair-etiquette {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  background: var(--accent); color: var(--sur-accent); padding: 4px 9px; border-radius: 20px;
}
.enclair-tete h3 { font-size: 17px; font-weight: 650; letter-spacing: -0.025em; }
.enclair-corps p {
  font-size: 15px; line-height: 1.62; color: var(--encre-2); margin-bottom: 10px;
}
.enclair-corps p:last-child { margin-bottom: 0; }
.enclair-corps strong { color: var(--encre); font-weight: 650; }
.enclair-alertes {
  list-style: none; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--filet); display: flex; flex-direction: column; gap: 9px;
}
.enclair-alertes li {
  font-size: 13.5px; line-height: 1.55; color: var(--encre-2);
  padding-left: 24px; position: relative;
}
.enclair-alertes li::before {
  content: "!"; position: absolute; left: 0; top: 1px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--alerte-voile); color: var(--alerte);
  font-size: 10px; font-weight: 700; display: grid; place-items: center;
}
.enclair-pied {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--filet);
  font-size: 12px; color: var(--encre-3);
}

/* ==================================================================
   Termes du glossaire
   ================================================================== */

.terme {
  background: none; border: none; padding: 0; cursor: help;
  font: inherit; color: inherit;
  border-bottom: 1px dashed var(--accent);
  transition: background 0.12s;
}
.terme:hover, .terme.ouvert { background: var(--accent-voile); color: var(--accent); }

.bulle-terme {
  position: absolute; z-index: 60; width: 320px;
  background: var(--surface); border: 1px solid var(--filet-fort);
  border-radius: var(--rayon); padding: 15px 16px;
  box-shadow: var(--ombre-haute);
}
.bulle-terme h4 { font-size: 14px; font-weight: 650; margin-bottom: 7px; padding-right: 20px; }
.bulle-def { font-size: 13.5px; line-height: 1.6; color: var(--encre-2); }
.bulle-pour {
  font-size: 12.5px; line-height: 1.55; color: var(--encre-2); margin-top: 9px;
  padding-top: 9px; border-top: 1px solid var(--filet);
}
.bulle-pour strong { color: var(--encre); }
.bulle-fermer {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
  background: none; border: none; border-radius: var(--rayon-s);
  color: var(--encre-3); font-size: 18px; line-height: 1; cursor: pointer;
}
.bulle-fermer:hover { background: var(--surface-2); color: var(--encre); }

/* Panneau bas : le geste attendu sur téléphone. Il reste en place pendant
   le défilement, contrairement à une bulle ancrée à un mot. */
.bulle-terme.panneau-bas {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto;
  width: 100% !important; max-width: none;
  border-radius: 16px 16px 0 0; border-bottom: none;
  padding: 20px 18px calc(22px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
  animation: monteDuBas 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.bulle-terme.panneau-bas::before {
  content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 4px; border-radius: 2px; background: var(--filet-fort);
}
.bulle-terme.panneau-bas h4 { margin-top: 8px; font-size: 16px; }
.bulle-terme.panneau-bas .bulle-def { font-size: 14.5px; }
@keyframes monteDuBas { from { transform: translateY(100%); } }

/* Libellé de tableau avec son explication au survol */
.ligne-aidee { display: inline-flex; align-items: center; gap: 5px; cursor: help; }
.ligne-aidee i {
  width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--filet);
  color: var(--encre-3); font-size: 8px; font-style: normal; font-weight: 700;
  display: inline-grid; place-items: center;
}
.ligne-aidee:hover i { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }

/* ==================================================================
   Personnalisation : un seul repli, groupé par thème
   ================================================================== */

.perso-groupe {
  padding: 16px 0; border-bottom: 1px solid var(--filet);
}
.perso-groupe:first-of-type { padding-top: 4px; }
.perso-groupe:last-of-type { border-bottom: none; padding-bottom: 4px; }
.perso-groupe > .micro-titre {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--encre);
  margin-bottom: 12px;
}
.perso-groupe .champ:last-child { margin-bottom: 0; }

/* Deux champs courts sur une ligne : taux et durée d'emprunt. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Un résumé de repli qui annonce ce qu'il contient : sans cela, replier la
   personnalisation reviendrait à la cacher. */
.avance summary small {
  display: block; font-size: 13px; font-weight: 400; color: var(--encre-3);
  margin-top: 4px; letter-spacing: 0; text-transform: none; line-height: 1.45;
}
.avance.perso > summary { font-size: 16px; font-weight: 700; }
.perso-remun #hoteRemunNetMensuel { padding: 4px 0 16px 0; }
.perso-remun #hoteRemunNetMensuel .f-ligne { padding: 0; border-bottom: none; }
.tableaux-comptables { margin-top: 18px; }
.tableaux-comptables .tableau-scroll:last-child { margin-bottom: 0; }

/* Cadre Financement initial de départ */
.financement-demarrage-cadre {
  background: var(--surface-2);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-s);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.financement-demarrage-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--filet);
  flex-wrap: wrap;
}
.financement-demarrage-tete .micro-titre {
  margin: 0;
  color: var(--encre);
  font-size: 11px;
  text-transform: uppercase;
}
.financement-demarrage-tete small {
  color: var(--encre-3);
  font-size: 11.5px;
}
.financement-demarrage-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}
.financement-demarrage-grille dt {
  font-size: 10.5px;
  color: var(--encre-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.financement-demarrage-grille dd {
  margin: 0;
  font-family: var(--chiffres);
  font-size: 15px;
  font-weight: 700;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.financement-emprunt-case .valeur-emprunt {
  color: var(--accent);
}
.financement-emprunt-case small {
  display: block;
  font-size: 11px;
  color: var(--encre-3);
  margin-top: 3px;
}
.financement-total-case dd {
  color: var(--bon);
  font-size: 16px;
}

/* Déclencheur de l'explication IA, dans le bloc « En clair ». */
.ia-declencheur {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--filet);
  width: 100%; text-align: left;
}

.segments {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--surface-2); border-radius: var(--rayon);
}
/* Les libellés longs ne tiennent pas côte à côte sur 375 px et retombaient
   en escalier : ce groupe-là s'étale sur toute la largeur. */
#choixMode { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
#choixMode .segment { padding: 9px 6px; font-size: 12.5px; }
.segment {
  background: none; border: none; border-radius: var(--rayon-s);
  padding: 8px 15px; font-family: var(--corps); font-size: 13px; font-weight: 550;
  color: var(--encre-2); cursor: pointer; white-space: nowrap;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.segment:hover { color: var(--encre); }
.segment.actif { background: var(--surface); color: var(--encre); box-shadow: var(--ombre); font-weight: 620; }

.strategies { display: grid; grid-template-columns: 1fr; gap: 8px; }
.carte-strategie {
  text-align: left; background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--rayon-s); padding: 12px 14px; cursor: pointer;
  font-family: var(--corps); color: var(--encre); transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.carte-strategie:hover { border-color: var(--accent); background: var(--accent-voile); }
.carte-strategie.actif { border-color: var(--accent); background: var(--accent-voile); }
.carte-strategie b { display: block; font-size: 14px; font-weight: 620; margin-bottom: 2px; }
.carte-strategie small { display: block; font-size: 12px; color: var(--encre-3); line-height: 1.45; }

.table-saisie { min-width: 480px; }
.table-saisie input {
  width: 88px; padding: 6px 8px; font-size: 13px; border-radius: var(--rayon-s);
  font-variant-numeric: tabular-nums; text-align: right;
}
.table-saisie td { padding: 5px 8px; }
.table-saisie input:disabled { background: var(--surface-2); color: var(--encre-3); cursor: not-allowed; }
#tableauAnnees { margin-top: 12px; }

.note-remplace {
  background: var(--alerte-voile); border-left: 2px solid var(--alerte);
  padding: 8px 10px; border-radius: 0 var(--rayon-s) var(--rayon-s) 0; color: var(--encre-2);
}
.note-remplace .btn-lien { font-size: 12px; margin-left: 4px; }

/* ==================================================================
   Fiche statut
   ================================================================== */

.fiche-statut {
  background: var(--surface); border: none; box-shadow: var(--ombre);
  border-radius: var(--rayon); padding: 22px; margin-bottom: 20px;
}
.fiche-phrase { font-size: 14.5px; line-height: 1.6; color: var(--encre-2); margin-bottom: 16px; }
.fiche-colonnes { display: grid; grid-template-columns: 1fr; gap: 16px; }
.fiche-colonnes .micro-titre { margin-bottom: 8px; }
.fiche-oui, .fiche-non { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.fiche-oui li, .fiche-non li {
  font-size: 13px; line-height: 1.5; color: var(--encre-2);
  padding-left: 20px; position: relative;
}
.fiche-oui li::before, .fiche-non li::before {
  position: absolute; left: 0; top: 0; font-weight: 700; font-size: 12px;
}
.fiche-oui li::before { content: "+"; color: var(--bon); }
.fiche-non li::before { content: "−"; color: var(--grave); }

/* ==================================================================
   Scénarios enregistrés
   ================================================================== */

.enregistrer-scenario { display: flex; gap: 8px; margin-bottom: 16px; }
.enregistrer-scenario input {
  flex: 1; font-size: 14px; padding: 10px 12px; min-width: 0;
}
.enregistrer-scenario .btn-secondaire { width: auto; flex-shrink: 0; }

.scenario-nom { display: block; font-weight: 620; font-size: 13.5px; }
.scenario-meta {
  display: block; font-size: 11px; color: var(--encre-3); margin-top: 2px;
  font-variant-numeric: normal;
}
.scenario-barre-fond {
  height: 4px; background: var(--surface-2); border-radius: 2px;
  overflow: hidden; margin-bottom: 4px; min-width: 70px;
}
.scenario-barre { height: 100%; background: var(--accent); border-radius: 2px; }
.scenario-non-viable { opacity: 0.6; }
.scenario-non-viable .scenario-nom { text-decoration: line-through; }
.scenario-non-viable .scenario-barre { background: var(--grave); }
.scenario-actions { white-space: nowrap; }
.scenario-actions .btn-lien { font-size: 12px; margin-left: 8px; }
.btn-lien.danger { color: var(--grave); }
.vide {
  font-size: 13.5px; color: var(--encre-3); padding: 20px; text-align: center;
  border: 1px dashed var(--filet-fort); border-radius: var(--rayon); line-height: 1.55;
}
.plan-actif-tag { font-size: 11px; font-weight: 700; color: var(--bon); margin-right: 8px; }

/* ==================================================================
   Tableau de bord : l'espace de plan
   ================================================================== */

.tb-entete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 8px;
}
.tb-entete h2 { margin: 4px 0 2px; }
.tb-meta { font-size: 14px; color: var(--encre-2); }

/* Bandeau d'indicateurs : le plan retient les chiffres-clés de la simulation. */
.tb-resume {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  margin-top: 22px; background: var(--filet);
  border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden;
}
.tb-resume:empty { display: none; }
.tb-kpi {
  background: var(--surface); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 5px;
}
.tb-kpi-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; color: var(--encre-3);
}
.tb-kpi-val {
  font-size: 20px; font-weight: 800; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--encre);
}
.tb-kpi-bon .tb-kpi-val { color: var(--bon); }
.tb-kpi-alerte .tb-kpi-val { color: var(--grave); }

.tb-modules {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px;
}
.tb-module {
  position: relative; text-align: left; display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: 20px; box-shadow: var(--ombre); cursor: pointer;
  color: inherit; text-decoration: none; font: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.tb-module:hover { border-color: var(--accent); transform: translateY(-1px); }
.tb-module-cat {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: var(--accent);
}
.tb-module-titre { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
.tb-module-desc { font-size: 13.5px; color: var(--encre-2); line-height: 1.45; }
.tb-module-fleche {
  position: absolute; top: 18px; right: 18px; color: var(--encre-3); font-weight: 700;
}
.tb-module-bientot {
  cursor: default; opacity: 0.62; box-shadow: none;
  background: var(--surface-2); border-style: dashed;
}
.tb-module-bientot:hover { border-color: var(--filet-fort); transform: none; }
.tb-module-bientot .tb-module-cat { color: var(--encre-3); }

/* ---------- Feuille de route ---------- */

/* Avancement : barre de progression + prochaine échéance. */
.fr-progres { margin: 6px 0 26px; }
.fr-progres-barre-fond {
  height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden;
}
.fr-progres-barre {
  height: 100%; background: var(--bon); border-radius: 4px;
  transition: width 0.3s ease;
}
.fr-progres-meta {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 8px; font-size: 13px; color: var(--encre-2);
}
.fr-prochaine { color: var(--encre-2); }
.fr-prochaine strong { color: var(--encre); }
.fr-prochaine-ok { color: var(--bon); font-weight: 600; }

.feuille-route { display: flex; flex-direction: column; gap: 26px; margin-top: 8px; }
.fr-groupe-titre {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700;
  color: var(--encre-3); margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--filet);
}
.fr-liste { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.fr-tache {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: 16px 18px; box-shadow: var(--ombre);
}
.fr-fait { opacity: 0.68; }
.fr-fait .fr-titre { text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* Case à cocher accessible : input masqué, coche dessinée. */
.fr-check { position: relative; display: inline-flex; cursor: pointer; margin-top: 2px; }
.fr-check input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; cursor: pointer; }
.fr-coche {
  width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--filet-fort);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); transition: background 0.12s, border-color 0.12s;
}
.fr-coche::after {
  content: "✓"; color: var(--sur-accent); font-size: 15px; font-weight: 800;
  opacity: 0; transform: scale(0.6); transition: opacity 0.12s, transform 0.12s;
}
.fr-check input:checked + .fr-coche { background: var(--bon); border-color: var(--bon); }
.fr-check input:checked + .fr-coche::after { opacity: 1; transform: scale(1); }
.fr-check input:focus-visible + .fr-coche { outline: 2px solid var(--accent); outline-offset: 2px; }

.fr-corps { min-width: 0; }
.fr-tete { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.fr-cat {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent);
}
.fr-cat-social { background: color-mix(in srgb, var(--bon) 14%, transparent); color: var(--bon); }
.fr-cat-fiscal { background: color-mix(in srgb, var(--alerte) 16%, transparent); color: var(--alerte); }
.fr-titre { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.fr-echeance { font-size: 13px; font-weight: 600; color: var(--accent); margin-top: 3px; }
.fr-explication { font-size: 13.5px; color: var(--encre-2); line-height: 1.5; margin-top: 6px; }
.fr-source { font-size: 12.5px; color: var(--encre-3); text-decoration: none; display: inline-block; margin-top: 7px; }
.fr-source:hover { color: var(--accent); }

@media (min-width: 700px) {
  .tb-modules { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tb-module, .fr-coche, .fr-coche::after, .fr-progres-barre { transition: none; }
}

/* ==================================================================
   Glossaire de référence
   ================================================================== */

.glossaire { display: grid; grid-template-columns: 1fr; }
.glossaire-entree { padding: 14px 16px; border-bottom: 1px solid var(--filet); }
.glossaire-entree:last-child { border-bottom: none; }
.glossaire-entree h5 { font-size: 13.5px; font-weight: 650; margin-bottom: 4px; }
.glossaire-entree p { font-size: 13px; line-height: 1.55; color: var(--encre-2); }
.glossaire-pour { margin-top: 6px; font-size: 12.5px; }
.glossaire-pour strong { color: var(--encre); }

/* ==================================================================
   Écrans larges : remis en fin de feuille pour l'emporter
   ================================================================== */

@media (min-width: 700px) {
  /* Apple ne garde ses très grands titres que sur grand écran. */
  h2 { font-size: 46px; letter-spacing: -0.042em; line-height: 1.04; }
  h3 { font-size: 29px; letter-spacing: -0.038em; }
  .aide-texte { font-size: 17px; }
  .titre-section { margin: 72px 0 10px; }
  main { padding: 56px 22px 24px; }
  .carte-statut h4 { font-size: 21px; }
  .carte-statut .montant { font-size: 28px; }

  .fiche-colonnes { grid-template-columns: 1fr 1fr; gap: 28px; }
  .strategies { grid-template-columns: repeat(3, 1fr); }
  .glossaire { grid-template-columns: 1fr 1fr; }
  .glossaire-entree:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  .bulle-terme { width: 360px; }
}

/* ==================================================================
   Fonctions IA
   Tout texte rédigé par un modèle est visuellement distinct du reste :
   le lecteur doit toujours savoir ce qui est calculé et ce qui est rédigé.
   ================================================================== */

#intro { max-width: 760px; }
/* Le cadre (fond, bordure, ombre) est mutualisé avec .widget-outil, plus haut. */
.intro-boite textarea {
  width: 100%; font-family: var(--corps); font-size: 15.5px; line-height: 1.55;
  background: var(--fond); color: var(--encre);
  border: 1px solid var(--filet-fort); border-radius: var(--rayon-s);
  padding: 12px; resize: vertical; min-height: 96px;
}
.intro-boite textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-voile);
}
.intro-actions {
  display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap;
}
.intro-actions .btn-primaire { width: auto; }
.intro-note {
  font-size: 11.5px; color: var(--encre-3); line-height: 1.5;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--filet);
}

/* ---------- Étiquette « rédigé par l'IA » ---------- */
.ia-etiquette {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  background: var(--surface-2); color: var(--encre-2);
  border: 1px solid var(--filet-fort);
  padding: 4px 9px; border-radius: 20px;
}
.ia-etiquette::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}
.ia-entete { margin-bottom: 10px; }
.ia-pied {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--filet);
  font-size: 11.5px; color: var(--encre-3); line-height: 1.5;
}
.ia-chargement {
  font-size: 13.5px; color: var(--encre-3); padding: 6px 0;
}
.ia-chargement::after {
  content: "…"; animation: points 1.2s steps(4, end) infinite; margin-left: 1px;
}
@keyframes points { 0% { opacity: 0.3 } 50% { opacity: 1 } 100% { opacity: 0.3 } }

/* ---------- Verdict rédigé ----------
   Vit à l'intérieur du bloc « En clair » : pas de carte dans la carte, juste
   un filet de séparation. */
.verdict-ia { margin-top: 4px; }
.verdict-ia p { font-size: 14.5px; line-height: 1.62; color: var(--encre-2); margin-bottom: 9px; }
.verdict-ia p:last-of-type { margin-bottom: 0; }
.verdict-ia .ia-entete {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--filet);
}
.verdict-ia .ia-chargement { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--filet); }

/* ---------- Bloc question ---------- */
.question-boite {
  background: var(--surface); border: none; box-shadow: var(--ombre);
  border-radius: var(--rayon); padding: 22px;
}
.question-saisie { display: flex; gap: 8px; }
.question-saisie input { flex: 1; min-width: 0; font-size: 14.5px; padding: 11px 12px; }
.question-saisie .btn-secondaire { width: auto; flex-shrink: 0; }
.question-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.suggestion {
  background: none; border: 1px solid var(--filet); color: var(--encre-2);
  border-radius: 20px; padding: 6px 12px; font-family: var(--corps);
  font-size: 12px; cursor: pointer; transition: border-color var(--transition), background var(--transition), color var(--transition); text-align: left;
}
.suggestion:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-voile); }
.question-reponse {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--filet);
}
.question-posee {
  font-size: 13px; font-weight: 620; color: var(--encre); margin-bottom: 8px;
  padding-left: 12px; border-left: 2px solid var(--accent);
}
.question-reponse p { font-size: 14px; line-height: 1.6; color: var(--encre-2); margin-bottom: 8px; }
.bandeau-extraction { margin-bottom: 16px; }

/* ==================================================================
   Décomposition du total sur les cartes de comparaison
   Le chiffre héros doit se lire, pas se croire : ses composantes sont
   affichées et leur somme tombe juste, à l'euro près.
   ================================================================== */

.decompo {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--filet);
  display: flex; flex-direction: column; gap: 7px;
}
.decompo-ligne {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 12.5px; color: var(--encre-2); line-height: 1.4;
}
/* Les composantes se rattachent visuellement au total au-dessus. */
.decompo-ligne > span { display: flex; flex-direction: column; min-width: 0; }
.decompo-ligne small {
  font-size: 10.5px; color: var(--encre-3); margin-top: 1px; line-height: 1.35;
}
.decompo-ligne b {
  font-family: var(--chiffres); font-variant-numeric: tabular-nums;
  font-weight: 620; color: var(--encre); font-size: 13.5px;
  letter-spacing: -0.015em; white-space: nowrap; flex-shrink: 0;
}
.carte-statut.non-viable .decompo-ligne b { color: var(--encre-2); }

/* ==================================================================
   Accueil : landing « Encre électrique »
   Les blocs marine sont pleine largeur même en thème clair : c'est la
   signature de l'identité. Tout chiffre affiché ici est un fait vérifié
   du projet.
   ================================================================== */

/* Boutons de nav (« Simuler mon projet », « Mon plan ») : toujours visibles :
   il n'y a plus d'écran « landing » séparé où les réserver. #btnNavPlan garde
   son propre attribut `hidden` (posé par rafraichitNavPlan) pour disparaître
   tant qu'aucun plan n'existe ; la règle [hidden] doit gagner sur .btn-nav
   quel que soit l'ordre du cascade (même bug déjà rencontré sur .modal-fond). */
.btn-nav { display: inline-block; width: auto; font-size: 14px; padding: 8px 18px; white-space: nowrap; }
.btn-nav[hidden] { display: none; }
.entete-actions { display: flex; align-items: center; gap: 12px; }

/* Accueil : bandeau compact, façon schwabmoneywise.com : un titre, une
   phrase, l'outil juste en dessous. Se masque tout seul (règle :has() plus
   bas) quand résultats ou tableau de bord sont affichés. */
.bandeau-accueil {
  max-width: none;
  margin: 0;
  padding: 8px 0 20px;
  text-align: left;
}
.bandeau-accueil h2 {
  font-family: var(--titre);
  font-size: clamp(2.1rem, 2.4vw + 1.4rem, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin-bottom: 10px;
  color: var(--encre);
  text-wrap: balance;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 144;
}
.bandeau-accueil p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--encre-2);
  max-width: 72ch;
  margin: 0;
}

/* Ligne discrète sous l'outil : même traitement qu'une note de bas de carte. */
.ligne-apres {
  max-width: var(--largeur); margin: 40px auto 0; padding: 16px 22px 0;
  border-top: 1px solid var(--filet);
  font-size: 13px; line-height: 1.5; color: var(--encre-3);
}

/* Le bandeau et la ligne du bas n'ont de sens que pendant la saisie : une
   fois les résultats (ou le tableau de bord) affichés, ils disparaissent :
   en CSS pur, sans que app.js ait à gérer #accueil comme un écran à part. */
body:has(#resultats:not([hidden])) #accueil,
body:has(#resultats:not([hidden])) .ligne-apres,
body:has(#tableauBord:not([hidden])) #accueil,
body:has(#tableauBord:not([hidden])) .ligne-apres {
  display: none;
}

/* ==================================================================
   Intro : écran d'ouverture animé, façon buzz.xyz
   Champ de couleur PLEIN (cobalt), mot-symbole blanc PULVÉRISÉ par un filtre
   SVG (turbulence + déplacement), nuée dense de petits logos qui volent, grille
   de points. Look unique et assumé. S'auto-efface par animation CSS même sans
   JS ; le JS peuple la nuée, gère le saut, nettoie.
   ================================================================== */

.intro-defs { position: absolute; width: 0; height: 0; }

#introSplash {
  display: none !important;
  position: fixed; inset: 0; z-index: 200; overflow: hidden; color: #fff;
  background:
    radial-gradient(rgba(255, 255, 255, 0.13) 1.3px, transparent 1.7px) 0 0 / 30px 30px,
    #2b4eff;
  animation: introSortie 0.8s var(--easing) 3.4s forwards;
}
#introSplash.parti {
  animation: none; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.6s var(--easing), visibility 0s 0.6s;
}

/* Nuée : le logo (trois barres) en petit, qui vole et tourne, la « mascotte ». */
.intro-essaim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.intro-abeille {
  position: absolute; bottom: -8vh; left: var(--x);
  width: var(--s); height: var(--s);
  background: center / contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='13' y='36' width='9' height='15' rx='2' fill='white'/%3E%3Crect x='27' y='26' width='9' height='25' rx='2' fill='white'/%3E%3Crect x='41' y='14' width='9' height='37' rx='2' fill='white'/%3E%3C/svg%3E");
  opacity: 0; will-change: transform, opacity;
  animation: introVol var(--t) linear var(--d) infinite;
}

/* Coin : petit mot-symbole en haut à gauche. */
.intro-coin { position: absolute; z-index: 3; }
.intro-coin-marque {
  top: clamp(20px, 3vw, 34px); left: clamp(20px, 5vw, 72px);
  font-family: var(--titre); font-size: 16px; font-weight: 800; letter-spacing: -0.04em;
  color: #fff;
}
.intro-coin-marque::after { content: "."; color: #0b1220; }
/* CTA façon buzz : pastille sombre en haut à droite. */
.intro-entrer {
  position: absolute; z-index: 3; top: clamp(16px, 3vw, 28px); right: clamp(20px, 5vw, 72px);
  font-family: var(--corps); font-size: 15px; font-weight: 700;
  color: #fff; background: #0b1220; border: none; border-radius: 999px;
  padding: 12px 24px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 0.15s var(--easing);
}
.intro-entrer:hover { transform: translateY(-1px); }
.intro-entrer span { transition: transform 0.15s var(--easing); }
.intro-entrer:hover span { transform: translateX(3px); }
.intro-entrer:focus-visible { outline: 2px solid #0b1220; outline-offset: 3px; }

/* Composition : mot géant à gauche, accroche à droite (comme buzz.xyz). */
.intro-contenu {
  position: absolute; inset: 0; z-index: 2;
  display: grid; align-content: center; gap: clamp(22px, 3vw, 34px);
  padding: 0 clamp(24px, 6vw, 84px); max-width: 1360px; margin: 0 auto;
}
.intro-mot {
  margin: 0; font-family: var(--titre); font-weight: 800;
  font-size: clamp(58px, 13vw, 172px); line-height: 0.84;
  letter-spacing: -0.055em; color: #fff;
  opacity: 0; animation: introMotIn 1s var(--easing) 0.15s forwards;
}
.intro-mot-fuzz { display: inline-block; filter: url(#introFuzz); }
.intro-slogan {
  margin: 0; font-size: clamp(17px, 2vw, 25px); line-height: 1.4; font-weight: 500;
  color: rgba(255, 255, 255, 0.92); max-width: 24ch;
  opacity: 0; animation: introApparait 0.7s var(--easing) 0.7s forwards;
}

@keyframes introMotIn {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: none; }
}
@keyframes introApparait {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes introVol {
  0% { transform: translate3d(0, 12vh, 0) rotate(0deg); opacity: 0; }
  10% { opacity: var(--o); }
  88% { opacity: var(--o); }
  100% { transform: translate3d(var(--dx), -116vh, 0) rotate(var(--r)); opacity: 0; }
}
@keyframes introSortie {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (min-width: 900px) {
  .intro-contenu {
    grid-template-columns: minmax(0, auto) 1fr; align-items: center;
    gap: clamp(34px, 4vw, 64px);
  }
}
@media (prefers-reduced-motion: reduce) {
  #introSplash { animation: introSortie 0.4s var(--easing) 1.6s forwards; }
  .intro-mot, .intro-slogan { animation: none; opacity: 1; transform: none; }
  .intro-mot-fuzz { filter: none; }
  .intro-essaim { display: none; }
}

/* ==================================================================
   Section expert sur les résultats + modal de réservation
   ================================================================== */

.expert-bloc {
  background:
    radial-gradient(700px 380px at 85% -10%, rgba(43, 78, 255, 0.30), transparent 60%),
    var(--bloc-encre);
  color: var(--bloc-encre-texte);
  border-radius: calc(var(--rayon) + 6px);
  padding: 40px 28px;
  margin-top: 64px;
}
.expert-bloc h3 { color: var(--bloc-encre-texte); margin: 8px 0 12px; max-width: 24ch; }
.expert-sous { color: var(--bloc-encre-sourdine); font-size: 16px; line-height: 1.55; max-width: 58ch; margin-bottom: 20px; }
.expert-sous em { font-style: normal; color: var(--bloc-encre-texte); font-weight: 650; }
.expert-points { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 28px; }
.expert-points li {
  font-size: 15px; color: var(--bloc-encre-sourdine);
  padding-left: 26px; position: relative;
}
.expert-points li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--bloc-encre-accent); font-weight: 700;
}
.expert-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.expert-cta .btn-primaire { width: auto; }
.expert-prix { display: flex; align-items: baseline; gap: 7px; }
.expert-prix b {
  font-size: 32px; font-weight: 800; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.expert-prix span { font-size: 13.5px; opacity: 0.75; }
.expert-mention {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bloc-encre-filet);
  font-size: 12.5px; line-height: 1.55; color: var(--bloc-encre-sourdine);
}

/* ---------- Modal ---------- */
/* `display: grid` l'emporterait sur l'attribut hidden : sans cette règle,
   le modal s'affichait ouvert dès le chargement de la page. */
.modal-fond[hidden] { display: none; }
.modal-fond {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(7, 10, 20, 0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: grid; place-items: center; padding: 18px;
  overflow-y: auto;
}
.modal {
  background: var(--surface); border-radius: calc(var(--rayon) + 4px);
  box-shadow: 0 30px 80px rgba(3, 6, 16, 0.45);
  width: 100%; max-width: 560px; padding: 28px 24px;
  position: relative; margin: auto;
  animation: monte 0.28s var(--easing);
}
.modal h3 { margin: 6px 0 20px; }
.modal-fermer {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  background: var(--surface-2); border: none; border-radius: 50%;
  color: var(--encre-2); font-size: 20px; line-height: 1; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.modal-fermer:hover { background: var(--filet); color: var(--encre); }
.modal-etiquette { font-size: 13.5px; font-weight: 650; margin-bottom: 10px; }

.creneaux { margin-bottom: 22px; }
.creneaux-jours {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px;
  scrollbar-width: none; margin-bottom: 12px;
}
.creneaux-jours::-webkit-scrollbar { display: none; }
.jour-puce {
  flex-shrink: 0; background: var(--surface-2); border: 1px solid transparent;
  border-radius: var(--rayon-s); padding: 9px 13px; cursor: pointer;
  font-family: var(--corps); text-align: center; min-width: 76px;
  transition: border-color var(--transition), background var(--transition);
}
.jour-puce small { display: block; font-size: 11px; color: var(--encre-3); text-transform: capitalize; }
.jour-puce b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -0.02em; }
.jour-puce.choisi { border-color: var(--accent); background: var(--accent-voile); }
.creneaux-heures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.heure-puce {
  background: var(--surface-2); border: 1px solid transparent;
  border-radius: var(--rayon-s); padding: 10px 6px; cursor: pointer;
  font-family: var(--corps); font-size: 14.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--encre);
  transition: border-color var(--transition), background var(--transition);
}
.heure-puce.choisi { border-color: var(--accent); background: var(--accent-voile); color: var(--accent); }

.optionnel { font-weight: 400; color: var(--encre-3); }
.modal-pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 24px; flex-wrap: wrap;
}
.modal-pied .btn-primaire { width: auto; flex: 1; min-width: 200px; }
.modal-mention {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filet);
  font-size: 12.5px; line-height: 1.55; color: var(--encre-3);
}
.confirmation-ref {
  font-size: 17px; margin-bottom: 12px;
}
.confirmation-ref b {
  font-family: var(--mono); letter-spacing: 0.04em; color: var(--accent);
}
#modalConfirmation .btn-secondaire { width: auto; margin-top: 20px; }
#resaRecap { font-size: 15px; line-height: 1.55; color: var(--encre-2); }

/* ---------- Pied de page en colonnes ---------- */
.pied-colonnes {
  display: grid; grid-template-columns: 1fr; gap: 34px;
  padding-bottom: 34px; margin-bottom: 26px;
  border-bottom: 1px solid var(--filet);
  text-align: left;
}
.pied-wordmark {
  font-size: 21px; font-weight: 800; letter-spacing: -0.045em;
}
.pied-wordmark::after { content: "."; color: var(--accent); }
.pied-slogan { font-size: 13.5px; color: var(--encre-3); margin-top: 5px; }
.pied-col { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.pied-col .micro-titre { margin-bottom: 3px; }
.pied-lien {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--corps); font-size: 14px; color: var(--encre-2);
  text-decoration: none; letter-spacing: -0.01em; text-align: left;
}
.pied-lien:hover { color: var(--accent); }

/* ---------- Écrans larges ---------- */
@media (min-width: 700px) {
  .expert-bloc { padding: 52px 48px; }
}
@media (min-width: 900px) {
  .pied-colonnes { grid-template-columns: 1.4fr 1fr 1fr; }
  .modal { padding: 34px 32px; }
}


/* ==================================================================
   Formulaire : Sections comptables (I, II, III)
   ================================================================== */
.f-section {
  border: none;
  padding: 0;
  margin: 0 0 32px 0;
}
.f-section-legend {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  font-family: var(--titre);
  font-size: 19px;
  font-weight: 700;
  color: var(--encre);
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1.5px solid var(--filet-fort);
}
.f-section-num {
  font-family: var(--corps);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
}

/* Postes de charges : sommaire compact + dépliant sobre */
.q-postes-sommaire {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.q-postes-toggle {
  align-self: flex-start;
  font-size: 13px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.q-postes-toggle:hover {
  color: var(--accent-fonce);
}
.q-postes-toggle .toggle-signe {
  font-family: var(--mono);
  font-weight: 700;
  margin-right: 2px;
}
.q-postes-detail-conteneur {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--filet-fort);
}

/* ==================================================================
   Modèles types de projet (remplissage 1 clic)
   ================================================================== */
/* ==================================================================
   Sélecteur de mode de saisie : Rapide (30s) vs Complet
   ================================================================== */
.mode-saisie-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 22px;
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-s);
}
.btn-mode-saisie {
  flex: 1;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--rayon-s) - 2px);
  font-family: var(--corps);
  font-size: 14px;
  font-weight: 700;
  color: var(--encre-2);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}
.btn-mode-saisie small {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--encre-3);
  margin-top: 2px;
}
.btn-mode-saisie:hover {
  color: var(--encre);
  background: rgba(0, 0, 0, 0.03);
}
.btn-mode-saisie.actif {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--filet-fort);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.btn-mode-saisie.actif small {
  color: var(--encre-2);
  font-weight: 500;
}

.archetypes-bar {
  background: var(--surface-2);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-s);
  padding: 16px 18px;
  margin-bottom: 28px;
}
.archetypes-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.archetypes-entete .micro-titre {
  font-size: 11px;
}
.archetypes-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.carte-archetype {
  background: var(--surface);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-s);
  padding: 11px 13px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.carte-archetype:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateY(-1px);
}
.carte-archetype.actif {
  border-color: var(--accent);
  background: var(--accent-voile);
  box-shadow: 0 0 0 1px var(--accent);
}
.archetype-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.archetype-titre {
  font-family: var(--titre);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--encre);
}
.archetype-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-voile);
  border: 1px solid var(--accent);
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
}
.archetype-resume {
  font-size: 11.5px;
  color: var(--encre-2);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.archetype-action {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  margin-top: 5px;
  letter-spacing: 0.02em;
}
.archetype-feedback {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--bon-voile);
  border: 1px solid var(--bon);
  border-radius: var(--rayon-s);
  color: var(--bon);
  font-size: 13px;
  font-weight: 600;
}

/* Règle d'or : ne pas inclure son salaire dans les charges */
.alerte-charge-remarque {
  font-size: 13.5px;
  line-height: 1.55;
  color: #78350f;
  background: #fffdf0;
  border: 1px solid #fed7aa;
  border-left: 4px solid #f59e0b;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
}
.alerte-charge-remarque strong {
  color: #92400e;
  font-weight: 750;
}

.q-ca-chips {
  margin-top: 10px;
}

/* ==================================================================
   Écran 1 : Prompt direct & suggestions de projet
   ================================================================== */
#ecranPrompt {
  max-width: var(--largeur-outil, 1280px);
  margin: 0 auto 32px;
}
.boite-prompt-hero {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 32px;
  box-shadow: 0 4px 24px rgba(11, 18, 32, 0.05);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.boite-prompt-saisie textarea {
  width: 100%;
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.55;
  background: var(--fond);
  color: var(--encre);
  border: 1.5px solid var(--filet-fort);
  border-radius: var(--rayon-s);
  padding: 16px 18px;
  resize: vertical;
  min-height: 100px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.boite-prompt-saisie textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-voile);
}
.prompt-chips-suggestions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-prompt {
  background: var(--surface-2);
  border: 1px solid var(--filet-fort);
  border-radius: 100px;
  padding: 8px 14px;
  font-family: var(--corps);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--encre);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.chip-prompt small {
  color: var(--encre-3);
  font-weight: 500;
}
.chip-prompt:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.prompt-actions {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}
.btn-lancer-prompt {
  width: 100%;
  max-width: 440px;
  height: 52px;
  font-size: 17px;
  font-weight: 750;
  font-family: var(--titre);
  letter-spacing: -0.01em;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(43, 78, 255, 0.25);
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-lancer-prompt:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(43, 78, 255, 0.35);
}
.prompt-pied-lien {
  text-align: left;
  margin-top: 4px;
}
.prompt-pied-lien .btn-lien {
  font-size: 13.5px;
  color: var(--encre-3);
}
.prompt-pied-lien .btn-lien:hover {
  color: var(--encre);
}
@media (max-width: 768px) {
  .boite-prompt-hero {
    padding: 20px 16px;
  }
}

/* ==================================================================
   Formulaire épuré : 5 questions directes
   ================================================================== */
.widget-simplifie {
  max-width: 840px;
  margin: 0 auto;
  padding: 32px 36px;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  box-shadow: 0 4px 20px rgba(11, 18, 32, 0.04);
}
@media (max-width: 768px) {
  .widget-simplifie {
    padding: 20px 16px;
    border-radius: var(--rayon-s);
  }
}

.champs-5-questions {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 28px;
}
.f-5q-carte {
  background: var(--surface);
  border: 1.5px solid var(--filet);
  border-radius: 10px;
  padding: 22px 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.f-5q-carte:focus-within {
  border-color: var(--filet-fort);
}
.f-5q-entete {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.f-5q-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1.5px solid var(--filet-fort);
  font-family: var(--titre);
  font-weight: 750;
  font-size: 14px;
  color: var(--encre);
  flex-shrink: 0;
}
.f-5q-titre {
  display: block;
  font-family: var(--titre);
  font-size: 18px;
  font-weight: 750;
  color: var(--encre);
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.01em;
}
.f-5q-sous-titre {
  font-size: 14px;
  color: var(--encre-2);
  margin: 4px 0 0;
  line-height: 1.5;
}
.f-5q-activite-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 680px) {
  .f-5q-activite-grille {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
.carte-metier {
  background: var(--surface);
  border: 1.5px solid var(--filet-fort);
  border-radius: 8px;
  padding: 16px 16px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.carte-metier:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.carte-metier.actif {
  border-color: var(--accent);
  background: var(--accent-voile);
  box-shadow: 0 0 0 2px var(--accent);
}
.metier-icone-titre {
  display: flex;
  align-items: center;
  gap: 10px;
}
.metier-icone {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.metier-noms {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.metier-nom {
  font-family: var(--titre);
  font-size: 15px;
  font-weight: 750;
  color: var(--encre);
  line-height: 1.25;
}
.metier-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid rgba(43, 78, 255, 0.25);
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}
.metier-desc {
  font-size: 13px;
  color: var(--encre-2);
  margin: 0;
  line-height: 1.45;
}
.metier-abattement {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--bon);
  margin-top: auto;
  padding-top: 4px;
}

.f-5q-champ-groupe {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.input-euro-grand {
  position: relative;
  max-width: 360px;
  width: 100%;
}
.input-euro-grand input {
  font-family: var(--chiffres);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 750;
  height: 52px;
  padding: 12px 76px 12px 16px;
  width: 100%;
  box-sizing: border-box;
  color: var(--encre);
  background: var(--surface);
  border: 1.5px solid var(--filet-fort);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-euro-grand input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-voile);
}
.input-euro-grand span {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 650;
  color: var(--encre-3);
  pointer-events: none;
}
.q-charges-ratios {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.champ-case-5q {
  background: var(--surface-2);
  border: 1.5px solid var(--filet);
  border-radius: 8px;
  padding: 16px 20px;
  transition: all 0.15s ease;
}
.champ-case-5q:hover {
  border-color: var(--filet-fort);
}
.champ-case-5q:has(input:checked) {
  background: var(--accent-voile);
  border-color: var(--accent);
}
.champ-case-5q label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
}
.champ-case-5q input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.champ-case-5q span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.champ-case-5q strong {
  font-size: 15px;
  font-weight: 750;
  color: var(--encre);
  line-height: 1.35;
}
.champ-case-5q small {
  font-size: 13px;
  color: var(--encre-2);
  line-height: 1.5;
}

.q-commune-saisie-groupe {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#q-commune {
  font-family: var(--corps);
  font-size: 16px;
  font-weight: 500;
  height: 48px;
  padding: 10px 16px;
  border: 1.5px solid var(--filet-fort);
  border-radius: 8px;
  background: var(--surface);
  color: var(--encre);
  width: 100%;
  max-width: 520px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#q-commune:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-voile);
}
.q-commune-suggestions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.q-preset-remarquable {
  border-color: var(--bon);
  color: var(--bon);
  background: var(--bon-voile);
}
.badge-zfrr-gain {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 12px;
  background: var(--bon);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
}

.f-actions-calculette {
  text-align: center;
  margin: 32px 0 16px;
}
.btn-calculer-grand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  height: 56px;
  padding: 14px 32px;
  font-family: var(--titre);
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.01em;
  border-radius: 8px;
  background: var(--accent);
  color: var(--sur-accent);
  border: none;
  box-shadow: 0 4px 14px rgba(43, 78, 255, 0.28);
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-calculer-grand:hover {
  background: var(--accent-fonce);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(43, 78, 255, 0.38);
}

/* Tiroir d'options avancées (Dossier I) */
.tiroir-options-avancees {
  background: var(--surface);
  border: 1.5px solid var(--filet-fort);
  border-radius: 10px;
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.tiroir-options-avancees > summary {
  padding: 16px 22px;
  background: var(--surface-2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: background 0.12s ease;
}
.tiroir-options-avancees > summary:hover {
  background: #e6e9ef;
}
.tiroir-options-avancees[open] > summary {
  border-bottom-color: var(--filet-fort);
}
.tiroir-options-avancees > summary .micro-titre {
  font-size: 15px;
  font-weight: 750;
  color: var(--encre);
}
.tiroir-options-avancees > summary small {
  font-size: 13px;
  color: var(--encre-2);
}
.tiroir-avance-contenu {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.tiroir-section-titre {
  font-family: var(--titre);
  font-size: 16px;
  font-weight: 750;
  color: var(--encre);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--filet);
}

/* ==================================================================
   Cadre de raffinage progressif des résultats
   ================================================================== */
.resultats-raffinage-cadre {
  display: none !important;
}
.raffinage-entete {
  margin-bottom: 12px;
}
.raffinage-entete .micro-titre {
  color: var(--accent);
  margin-bottom: 4px;
}
.raffinage-texte {
  font-size: 13.5px;
  color: var(--encre-2);
  margin: 0;
  line-height: 1.45;
}
.raffinage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.btn-raffinage {
  background: var(--surface);
  border: 1px solid var(--filet-fort);
  border-radius: 100px;
  padding: 7px 14px;
  font-family: var(--corps);
  font-size: 13px;
  font-weight: 600;
  color: var(--encre);
  cursor: pointer;
  transition: all 0.12s ease;
}
.btn-raffinage:hover {
  background: var(--accent-voile);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.btn-raffinage-tout {
  background: var(--accent-voile);
  border-color: var(--accent);
  color: var(--accent);
}

/* ==================================================================
   Widget de Raffinement Progressif (Assistant Interactif & Cockpit)
   ================================================================== */
.widget-raffinage-progressif {
  margin-bottom: 24px;
}
.raffinage-carte {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: 0 2px 10px rgba(11, 18, 32, 0.04);
  overflow: hidden;
  transition: all 0.25s ease;
}
.raffinage-cockpit {
  border: 1.5px solid #0284c7;
  box-shadow: 0 4px 20px rgba(2, 132, 199, 0.09);
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
}
.raffinage-barre-progression {
  position: absolute;
  top: 0;
  left: 0;
  height: 3.5px;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  width: var(--progression, 0%);
  border-radius: 14px 14px 0 0;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stepper horizontal interactif (Plateau des 5 étapes) */
.raffinage-stepper-tray {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #edf2f7;
}
.raffinage-step-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-size: 12px;
  font-family: var(--corps);
  border-radius: 20px;
  border: 1px solid var(--filet-fort);
  background: var(--surface);
  color: var(--encre-2);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.raffinage-step-chip .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 10px;
  font-weight: 750;
  color: var(--encre-3);
}
.raffinage-step-chip .step-icone {
  font-size: 12px;
  line-height: 1;
}
.raffinage-step-chip .step-check {
  color: #059669;
  font-weight: 800;
  font-size: 12px;
}
.raffinage-step-chip.step-complete {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.raffinage-step-chip.step-complete:hover {
  border-color: #059669;
  background: #dcfce7;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.12);
}
.raffinage-step-chip.step-complete strong {
  font-family: var(--chiffres);
  color: #15803d;
  font-weight: 700;
}
.raffinage-step-chip.step-active {
  background: #e0f2fe;
  border-color: #38bdf8;
  color: #0369a1;
  font-weight: 750;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}
.raffinage-step-chip.step-active .step-num {
  background: #0284c7;
  color: #ffffff;
}
.raffinage-step-chip.step-future {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Bandeau de feedback en direct (Live Impact) */
.raffinage-impact-live {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  border: 1.5px solid #86efac;
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.08);
  animation: glisseImpact 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes glisseImpact {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.impact-live-icone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #059669;
  color: #ffffff;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.impact-live-texte {
  flex: 1;
  min-width: 240px;
}
.impact-live-texte p {
  font-size: 13.5px;
  font-weight: 600;
  color: #166534;
  margin: 0;
  line-height: 1.45;
}
.impact-live-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.impact-tag {
  font-size: 12px;
  font-weight: 750;
  font-family: var(--chiffres);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.tag-positif {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}
.tag-negatif {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}
.tag-taux {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #7dd3fc;
}
.tag-statut {
  background: #fef08a;
  color: #854d0e;
  border: 1px solid #fde047;
}

/* Question active mise en vedette */
.raffinage-question-vedette {
  position: relative;
}
.raffinage-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}
.raffinage-titre-bloc {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.raffinage-badge-etape {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0284c7;
  background: #e0f2fe;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0284c7;
  animation: pulseDot 1.4s infinite;
}
@keyframes pulseDot {
  0% { transform: scale(0.8); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.7; }
}
.raffinage-titre {
  font-family: var(--titre);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: var(--encre);
  margin: 0;
  line-height: 1.35;
}
.raffinage-passer {
  font-size: 12.5px;
  color: var(--encre-3);
  text-decoration: none;
  white-space: nowrap;
}
.raffinage-passer:hover {
  color: var(--encre);
  text-decoration: underline;
}
.raffinage-soustitre {
  font-size: 13px;
  color: var(--encre-2);
  margin: 0 0 14px;
  line-height: 1.5;
}
.raffinage-corps {
  margin-top: 4px;
}
.raffinage-options-grille {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.raffinage-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.raffinage-curseur {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 2px 0 0;
}
.raffinage-curseur input[type="range"] {
  width: 100%;
  margin: 10px 0 4px;
  accent-color: var(--accent);
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--valeur, 0%), var(--filet-fort) var(--valeur, 0%), var(--filet-fort) 100%);
}
.raffinage-curseur-bornes {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--encre-3);
  font-variant-numeric: tabular-nums;
}
.btn-raffinage-option {
  background: var(--surface);
  border: 1.5px solid var(--filet-fort);
  border-radius: 20px;
  padding: 7px 15px;
  font-family: var(--corps);
  font-size: 13px;
  color: var(--encre);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-align: left;
  transition: all 0.16s ease;
}
.btn-raffinage-option strong {
  font-family: var(--chiffres);
  font-weight: 750;
  font-size: 14px;
}
.btn-raffinage-desc,
.btn-raffinage-option small {
  font-size: 11.5px;
  color: var(--encre-3);
  font-weight: 500;
}
.btn-raffinage-option:hover {
  border-color: #0284c7;
  background: #f0f9ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12);
}
.btn-raffinage-option.actif {
  border-color: #0284c7;
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
}
.btn-raffinage-option.actif .btn-raffinage-desc,
.btn-raffinage-option.actif small {
  color: #0284c7;
}
.btn-raffinage-option .badge-pill {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 12px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--encre-2);
}
.btn-raffinage-option .badge-gain {
  background: var(--bon-voile);
  color: var(--bon);
  font-weight: 700;
}

/* Écran final du widget */
.raffinage-carte-termine .raffinage-termine-contenu {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}
.raffinage-termine-icone {
  font-size: 32px;
  line-height: 1;
}
.raffinage-termine-texte h4 {
  font-size: 16px;
  font-weight: 750;
  color: var(--encre);
  margin: 0 0 4px;
}
.raffinage-termine-texte p {
  font-size: 13px;
  color: var(--encre-2);
  margin: 0;
  line-height: 1.45;
}
.raffinage-termine-actions {
  margin-left: auto;
}

/* Delta tags en direct sur les KPI de la simulation */
.kpi-live-delta {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 750;
  font-family: var(--chiffres);
  padding: 2px 7px;
  border-radius: 6px;
  margin-left: 8px;
  vertical-align: middle;
  line-height: 1.2;
  animation: popDelta 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes popDelta {
  0% { transform: scale(0.7); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.delta-up {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}
.delta-down {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* Effets de lueur et pulse lors des changements de simulation */
@keyframes lueurVerte {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); border-color: #10b981; }
  50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.15); border-color: #10b981; }
  100% { box-shadow: 0 2px 12px rgba(11, 18, 32, 0.04); border-color: var(--filet); }
}
.resultats-hero-bloc.flash-lueur {
  animation: lueurVerte 1.4s ease-out;
}
@keyframes flashTexteGagnant {
  0% { color: #059669; transform: scale(1.04); }
  50% { color: #0284c7; }
  100% { color: var(--encre); transform: scale(1); }
}
.flash-lueur-texte {
  animation: flashTexteGagnant 1.4s ease-out;
}

/* ==================================================================
   Résultats : Bloc Héro Unifié (Synthèse chiffrée + En clair)
   ================================================================== */
.resultats-hero-bloc {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(11, 18, 32, 0.04);
  margin-bottom: 20px;
  padding: 22px 26px 18px;
  overflow: hidden;
}

/* En-tête de la recommandation */
.hero-recommandation-entete {
  margin-bottom: 10px;
}
.hero-chiffre {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 8px 0 2px;
  line-height: 1.1;
}
.hero-chiffre .synthese-valeur {
  font-family: var(--chiffres);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--encre);
}
.hero-chiffre-unite {
  font-size: 15px;
  font-weight: 500;
  color: var(--encre-3);
}
.hero-secondaires {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--encre-2);
}
.hero-secondaires .synthese-gain { color: #059669; font-weight: 700; }
.hero-sep { color: var(--encre-3); }
.hero-badge-ligne {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.hero-badge-recommande {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  padding: 3px 9px;
  border-radius: 20px;
}
.hero-badge-motif {
  font-size: 12.5px;
  color: var(--encre-3);
  font-weight: 500;
}
.hero-gagnant-nom {
  font-family: var(--titre);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--encre);
  margin: 0;
  line-height: 1.25;
}

/* Verdict épuré */
.resultats-hero-bloc .enclair {
  margin-bottom: 14px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  background: transparent;
}
.enclair-vedette {
  margin-bottom: 6px;
}
.enclair-texte-vedette {
  font-size: 15px;
  line-height: 1.45;
  color: var(--encre-2);
  margin: 0;
  max-width: 52em;
}
.enclair-texte-vedette strong {
  color: var(--encre);
  font-weight: 650;
}
.enclair-lecon {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--encre);
  max-width: 46em;
}
.cascade-lecon {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--encre-2);
}
.classement-didacticiel {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--encre-3);
}

/* Accordéon de détail pour ne pas saturer la vue */
.enclair-accordeon-details {
  border-top: 1px solid var(--filet);
  padding-top: 10px;
  margin-top: 12px;
}
.enclair-accordeon-declencheur {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  user-select: none;
}
.enclair-accordeon-declencheur:hover {
  text-decoration: underline;
}
.enclair-accordeon-tiroir {
  padding-top: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--encre-2);
}
.enclair-accordeon-tiroir p {
  margin-bottom: 8px;
}
.enclair-alertes {
  list-style: none;
  margin: 10px 0;
  padding: 10px 14px;
  background: #fefce8;
  border: 1px solid #fef08a;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.enclair-alertes li {
  font-size: 12.5px;
  color: #854d0e;
  padding-left: 20px;
  position: relative;
  line-height: 1.45;
}
.enclair-alertes li::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ca8a04;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.enclair-pied {
  font-size: 12px;
  color: var(--encre-3);
  margin-top: 10px;
}
.verdict-faits {
  margin: 8px 0 0;
  padding-left: 1.15em;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.verdict-faits li {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--encre-2);
}

/* Bandeau de zone ZFRR discret */
.bandeau-zone-discret {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 13px;
  line-height: 1.4;
  padding: 0;
  margin: 10px 0 0;
  background: none;
  border: none;
  color: var(--encre-2);
  max-width: 100%;
}
.bandeau-zone-ligne {
  margin: 0;
  font-size: 13.5px;
  color: var(--encre-2);
}
.bandeau-zone-detail {
  width: 100%;
}
.bandeau-zone-detail summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--accent);
}
.bandeau-zone-detail .portrait-territoire {
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--filet);
  border-radius: 8px;
}
.bandeau-zone-actif {
  background: none;
  border: none;
  color: var(--encre-2);
}
.bandeau-zone-actif .bandeau-zone-detail .portrait-territoire {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.bandeau-zone-discret a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.resultats-hero-bloc .resultats-synthese-cadre {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

/* ==================================================================
   Résultats : Comparatif des 4 statuts & Dossiers approfondis
   ================================================================== */
.resultats-comparatif-section {
  margin-bottom: 34px;
}
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.expert-ligne {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 8px;
  font-size: 13.5px;
  color: var(--encre-3);
}
.resultats-comparatif-section .aide-texte {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.resultats-comparatif-section .titre-section {
  font-family: var(--titre);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--encre);
}
.resultats-comparatif-section .aide-texte {
  max-width: none;
}
.resultats-dossiers-bloc {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1.5px solid var(--filet-fort);
}
.dossiers-entete-titre {
  margin-bottom: 14px;
}
.dossiers-entete-titre .micro-titre {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--encre-3);
  font-weight: 750;
}
.raffinage-commune-bloc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.raffinage-commune-saisie {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
  max-width: none;
}
.raffinage-commune-saisie input {
  flex: 1;
  min-height: 44px;
  font-family: var(--corps);
  font-size: 15px;
  padding: 10px 12px;
  border: 1.5px solid var(--filet-fort);
  border-radius: 8px;
  background: var(--surface);
  color: var(--encre);
}
.raffinage-commune-saisie input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-voile);
}
.btn-valider-commune {
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 650;
  border-radius: 8px;
  cursor: pointer;
}

/* Carte finale quand toutes les questions sont complétées */
.raffinage-carte-termine {
  background: var(--surface-2);
  border: 1.5px solid var(--bon);
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.raffinage-termine-icone {
  font-size: 28px;
  flex-shrink: 0;
}
.raffinage-termine-texte {
  flex: 1;
}
.raffinage-termine-texte h4 {
  font-family: var(--titre);
  font-size: 15px;
  font-weight: 750;
  color: var(--encre);
  margin: 0 0 2px;
}
.raffinage-termine-texte p {
  font-size: 13px;
  color: var(--encre-2);
  margin: 0;
  line-height: 1.4;
}
.raffinage-termine-actions {
  flex-shrink: 0;
}
.raffinage-termine-actions .btn-lien {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
@media (max-width: 680px) {
  .raffinage-carte {
    padding: 18px 16px;
  }
  .raffinage-commune-saisie {
    flex-direction: column;
  }
  .raffinage-carte-termine {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==================================================================
   Choix d'activité : Tuiles de registre (1 clic)
   ================================================================== */
.q-activite-conteneur {
  width: 100%;
}
.q-activite-tuiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.q-activite-tuile {
  background: var(--surface);
  border: 1.5px solid var(--filet-fort);
  border-radius: var(--rayon-s);
  padding: 14px 15px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: all 0.14s ease;
}
.q-activite-tuile:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}
.q-activite-tuile.actif {
  border-color: var(--accent);
  background: var(--accent-voile);
  box-shadow: 0 0 0 1px var(--accent);
}
.q-tuile-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.q-tuile-radio {
  font-size: 16px;
  line-height: 1;
  color: var(--accent);
}
.q-tuile-badge {
  font-size: 11px;
  font-weight: 700;
  background: var(--surface-2);
  border: 1px solid var(--filet-fort);
  padding: 2px 7px;
  border-radius: 4px;
  color: var(--encre-2);
}
.q-activite-tuile.actif .q-tuile-badge {
  border-color: var(--accent);
  color: var(--accent);
}
.q-tuile-titre {
  font-family: var(--titre);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--encre);
  display: block;
  margin-bottom: 4px;
}
.q-tuile-desc {
  font-size: 12px;
  color: var(--encre-2);
  line-height: 1.4;
  margin: 0 0 10px;
  min-height: 34px;
}
.q-tuile-stats {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11.5px;
  color: var(--encre-3);
  border-top: 1px dotted var(--filet-fort);
  padding-top: 8px;
  font-variant-numeric: tabular-nums;
}
.q-tuile-stats b {
  color: var(--encre);
  font-family: var(--chiffres);
}
@media (max-width: 768px) {
  .q-activite-tuiles {
    grid-template-columns: 1fr;
  }
}

/* ==================================================================
   Boutons repères & presets ergonomiques (1 clic)
   ================================================================== */
.q-montant-conteneur,
.q-plage-conteneur,
.q-date-conteneur {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.q-mini-presets-ligne {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.q-preset-etiquette {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--encre-3);
  margin-right: 4px;
}
.q-mini-preset {
  background: var(--surface);
  border: 1.5px solid var(--filet-fort);
  border-radius: 100px;
  padding: 6px 14px;
  font-family: var(--corps);
  font-size: 13.5px;
  font-weight: 650;
  color: var(--encre);
  cursor: pointer;
  transition: all 0.12s ease;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.q-mini-preset small {
  font-size: 11.5px;
  color: var(--encre-3);
  font-weight: 500;
}
.q-mini-preset:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-2);
  transform: translateY(-1px);
}
.q-mini-preset.actif {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--sur-accent);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(43, 78, 255, 0.25);
}
.q-mini-preset.actif small {
  color: rgba(255, 255, 255, 0.85);
}
.q-preset-remarquable {
  border-color: var(--accent);
  background: var(--accent-voile);
  color: var(--accent);
  font-weight: 700;
}
.q-postes-total-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.q-charges-ratios {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.q-commune-suggestions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==================================================================
   Résultats : Encadré de synthèse (style liasse / registre fiscal)
   ================================================================== */
.resultats-synthese-cadre {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-s);
  margin-bottom: 24px;
  overflow: hidden;
}
.synthese-case {
  padding: 16px 20px;
  border-right: 1px solid var(--filet);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.synthese-case:last-child {
  border-right: none;
}
.synthese-case .micro-titre {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--encre-3);
  margin-bottom: 6px;
}
.synthese-valeur {
  font-family: var(--chiffres);
  font-size: 23px;
  font-weight: 700;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.synthese-gagnant .synthese-valeur {
  color: var(--accent);
}
.synthese-gain {
  color: var(--bon);
}

@media (max-width: 900px) {
  .resultats-synthese-cadre {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .synthese-case:nth-child(2) {
    border-right: none;
  }
  .synthese-case:nth-child(1),
  .synthese-case:nth-child(2) {
    border-bottom: 1px solid var(--filet);
  }
}
@media (max-width: 500px) {
  .resultats-synthese-cadre {
    grid-template-columns: 1fr;
  }
  .synthese-case {
    border-right: none;
    border-bottom: 1px solid var(--filet);
  }
  .synthese-case:last-child {
    border-bottom: none;
  }
}

/* ==================================================================
   Résultats : Onglets style dossier / classeur d'arbitrage
   ================================================================== */
.resultats-onglets {
  display: flex;
  gap: 6px;
  border-bottom: 2px solid var(--filet-fort);
  margin-bottom: 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-left: 2px;
}
.resultats-onglet {
  background: var(--surface-2);
  border: 1px solid var(--filet);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  margin-bottom: -2px;
  padding: 12px 22px 11px;
  font-family: var(--corps);
  font-size: 15px;
  font-weight: 650;
  color: var(--encre-3);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s ease;
}
.resultats-onglet:hover {
  color: var(--encre);
  background: var(--surface);
}
.resultats-onglet.actif {
  color: var(--encre);
  background: var(--surface);
  border-color: var(--filet-fort);
  border-bottom: 2px solid var(--surface);
  font-weight: 750;
  box-shadow: 0 -2px 6px rgba(11, 18, 32, 0.04);
}
.resultats-vue[hidden] {
  display: none !important;
}

/* ==================================================================
   Résultats : Sous-navigation d'approfondissement (Dossier I)
   ================================================================== */
.dossier-sous-nav {
  display: flex;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-s);
  padding: 6px;
  margin: 32px 0 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dossier-sous-onglet {
  flex: 1;
  min-width: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: var(--corps);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--encre-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.14s ease;
}
.dossier-sous-onglet:hover {
  color: var(--encre);
  background: rgba(255, 255, 255, 0.4);
}
.dossier-sous-onglet.actif {
  color: var(--encre);
  background: var(--surface);
  border-color: var(--filet-fort);
  box-shadow: 0 1px 4px rgba(11, 18, 32, 0.08);
  font-weight: 750;
}
.sous-vue-contenu[hidden] {
  display: none !important;
}

/* ==================================================================
   Sélecteur d'états financiers (P&L, Trésorerie, Bilan)
   ================================================================== */
.tableaux-comptables-cadre {
  margin-top: 20px;
}
.etats-switcher-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 16px 0 14px;
  flex-wrap: wrap;
}
.etats-switcher {
  display: inline-flex;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--filet-fort);
  border-radius: 8px;
  padding: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.etat-btn {
  padding: 7px 14px;
  font-family: var(--corps);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--encre-2);
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s ease;
}
.etat-btn:hover {
  color: var(--encre);
}
.etat-btn.actif {
  background: var(--surface);
  color: var(--accent);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(11, 18, 32, 0.08);
}
@media print {
  .tableau-scroll[data-tableau] {
    display: block !important;
  }
}

/* Tiroir d'analyse qualitative du statut */
.analyse-statut-tiroir {
  margin-top: 24px;
}
.analyse-statut-contenu {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.analyse-statut-contenu .fiche-statut {
  margin-bottom: 0;
}

/* Raccourcis de consultation compacts au bas du dossier 1 */
.dossier-raccourcis-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 32px 0 28px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-s);
}
.dossier-raccourcis-liens {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}
.dossier-raccourcis-bar .dossier-raccourci {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--filet-fort);
  border-radius: 6px;
  font-family: var(--corps);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--encre-2);
  cursor: pointer;
  transition: all 0.12s ease;
}
.dossier-raccourcis-bar .dossier-raccourci:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- Tiroir d'estimation TJM Freelance ---------- */
.q-tjm-tiroir {
  background: var(--surface-2);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-s);
  padding: 8px 12px;
  margin: 4px 0 6px;
}
.q-tjm-titre {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.q-tjm-titre::-webkit-details-marker { display: none; }
.q-tjm-puce {
  font-size: 13px;
  font-family: var(--mono);
}
.q-tjm-corps {
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px dashed var(--filet);
}
.q-tjm-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}
.q-tjm-champ label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--encre-2);
  margin-bottom: 4px;
}
.q-tjm-champ .q-saisie-euro input {
  max-width: 140px;
  padding: 6px 36px 6px 10px;
  font-size: 14px;
}
.q-tjm-presets {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.btn-micro {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-s);
  padding: 2px 7px;
  font-family: var(--chiffres);
  font-size: 11px;
  color: var(--encre-2);
  cursor: pointer;
  transition: all 0.1s ease;
}
.btn-micro:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-2);
}
.q-tjm-bilan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-s);
  padding: 8px 12px;
  flex-wrap: wrap;
}
.q-tjm-formule {
  font-size: 13.5px;
  color: var(--encre-2);
}
.q-tjm-total-texte {
  font-family: var(--chiffres);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}
.q-tjm-annee {
  font-size: 12px;
  color: var(--encre-3);
}
.q-tjm-aide {
  display: block;
  font-size: 11px;
  color: var(--encre-3);
  margin-top: 6px;
  line-height: 1.35;
}

/* ---------- Règle à calcul fiscale & Scanner de seuils ---------- */
.section-regle-calcul {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--filet-fort);
}
.regle-calcul-boite {
  background: var(--surface);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  padding: 16px;
  box-shadow: var(--ombre);
}
.regle-corps {
  position: relative;
  background: linear-gradient(to bottom, #f9f6f0, #eae2d1);
  border: 2px solid #8c7653;
  border-radius: var(--rayon-s);
  padding: 24px 16px 28px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  user-select: none;
}
.regle-graduations {
  position: relative;
  height: 18px;
  margin-bottom: 6px;
}
.regle-tick {
  position: absolute;
  transform: translateX(-50%);
  top: 0;
  height: 10px;
  width: 1px;
  background: #7a6344;
}
.regle-tick span {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  color: #635038;
}
.regle-seuils-flags {
  position: relative;
  height: 22px;
}
.regle-flag {
  position: absolute;
  transform: translateX(-50%);
  top: 0;
}
.regle-flag-etiquette {
  background: #3e2714;
  color: #f7eedf;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 2px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.regle-curseur-conteneur {
  position: relative;
  margin-top: 6px;
}
.regle-slider {
  width: 100%;
  height: 24px;
  cursor: ew-resize;
  accent-color: #a82e2e;
  opacity: 0.85;
}
.regle-vernier-hairline {
  position: absolute;
  top: -46px;
  transform: translateX(-50%);
  width: 1px;
  height: 64px;
  background: #c92a2a;
  box-shadow: 0 0 4px rgba(201, 42, 42, 0.6);
  pointer-events: none;
}
.regle-vernier-bulle {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: #c92a2a;
  color: #fff;
  font-family: var(--chiffres);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.regle-cadran {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.regle-cadran-carte {
  background: var(--surface-2);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-s);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  transition: all 0.12s ease;
}
.regle-cadran-carte.gagnant {
  border-color: var(--bon);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--bon-voile);
}
.regle-carte-titre {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--encre-2);
  margin-bottom: 3px;
}
.regle-carte-montant {
  font-family: var(--chiffres);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 700;
  color: var(--encre);
}
.regle-cadran-carte.gagnant .regle-carte-montant {
  color: var(--bon);
}
.regle-carte-taux {
  font-size: 11px;
  color: var(--encre-3);
  margin-top: 2px;
}
.regle-actions-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--filet);
  flex-wrap: wrap;
}
.regle-seuil-diagnostic {
  font-size: 12.5px;
  color: var(--encre-2);
  line-height: 1.35;
}

/* ---------- Bordereau de rapprochement comptable ---------- */
.section-rapprochement {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px dashed var(--filet-fort);
}
.rapprochement-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.rapprochement-controles {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-s);
  padding: 6px 10px;
  flex-wrap: wrap;
}
.rapprochement-duo-select {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--encre-2);
}
.select-vintage {
  background: var(--surface);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-s);
  padding: 4px 8px;
  font-family: var(--corps);
  font-size: 12px;
  font-weight: 600;
  color: var(--encre);
}
.rapprochement-vs {
  font-size: 11px;
  font-weight: 700;
  color: var(--encre-3);
  text-transform: uppercase;
}
.rapprochement-table-conteneur {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
}
.table-rapprochement {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  text-align: right;
}
.table-rapprochement th,
.table-rapprochement td {
  padding: 9px 15px;
  border-bottom: 1px solid var(--filet);
}
.table-rapprochement th:first-child,
.table-rapprochement td:first-child {
  text-align: left;
  font-weight: 500;
}
.table-rapprochement th {
  background: var(--surface-2);
  font-family: var(--titre);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: -0.01em;
  color: var(--encre-2);
  border-bottom: 2px solid var(--encre);
}
.table-rapprochement td {
  font-family: var(--chiffres);
  font-variant-numeric: tabular-nums;
}
.table-rapprochement tr.ligne-remarquable td {
  background: var(--accent-voile);
  font-weight: 600;
}
.table-rapprochement tr.ligne-total-rapprochement td {
  border-top: 2px solid var(--encre);
  border-bottom: 3px double var(--encre);
  font-weight: 700;
  font-size: 15px;
}
.diff-positif { color: var(--bon); }
.diff-negatif { color: var(--grave); }
.diff-neutre { color: var(--encre-3); }
.rapprochement-verdict-synthese {
  margin-top: 12px;
}
.rapprochement-verdict-cadre {
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
}
.rapprochement-verdict-cadre p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--encre);
}

/* ==================================================================
   Calculateur d'accueil, rail de leviers, cascade « pourquoi »
   ================================================================== */
.choix-produit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 16px;
  max-width: none;
}
.carte-produit {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.carte-produit strong {
  font-family: var(--titre);
  font-size: 18px;
  font-weight: 750;
  color: var(--encre);
}
.carte-produit span {
  font-size: 13px;
  line-height: 1.4;
  color: var(--encre-3);
}
.carte-produit:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}
.carte-produit.actif {
  border-color: var(--accent);
  background: var(--accent-voile);
  box-shadow: 0 0 0 2px var(--accent);
}
@media (max-width: 640px) {
  .choix-produit {
    grid-template-columns: 1fr;
  }
}

.calcul-rapide {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 22px 24px 24px;
  margin: 0 0 16px;
  max-width: none;
  box-shadow: 0 2px 12px rgba(11, 18, 32, 0.04);
}
.calcul-champ { margin-bottom: 16px; }
.calcul-champ label {
  display: block;
  font-weight: 650;
  margin-bottom: 6px;
}
.calcul-metiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.calcul-metiers .carte-metier {
  text-align: left;
  padding: 12px 14px;
}
.calcul-metier-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--encre-3);
}
.calcul-metiers .carte-metier span {
  display: block;
  font-size: 12px;
  color: var(--encre-3);
  margin-top: 2px;
}
.calcul-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.boite-prompt-details {
  max-width: none;
  margin: 0 0 8px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-s);
  background: var(--surface);
  padding: 4px 16px 12px;
}
.boite-prompt-details summary {
  cursor: pointer;
  font-weight: 650;
  padding: 10px 0;
  color: var(--encre-2);
}
.boite-prompt-details .boite-prompt-hero {
  box-shadow: none;
  border: 0;
  padding: 0;
  margin: 0;
}

.rail-leviers { margin: 0 0 22px; }
.rail-leviers-carte {
  padding: 14px 18px 16px;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  box-shadow: none;
}
.rail-leviers-entete {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.rail-leviers-entete .titre-section {
  margin: 0;
  font-size: 15px;
}
.rail-leviers-entete p {
  margin: 0;
  color: var(--encre-3);
  font-size: 13px;
}
.rail-stepper {
  display: none;
}
.raffinage-autres {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--filet);
}
.raffinage-autres summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  color: var(--encre-2);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.raffinage-autres summary::-webkit-details-marker { display: none; }
.raffinage-autres summary::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  margin-top: -2px;
}
.raffinage-autres[open] summary::before {
  transform: rotate(45deg);
  margin-top: -4px;
}
.raffinage-autres summary:hover,
.raffinage-autres summary:focus-visible {
  color: var(--encre);
}
.raffinage-autres-compte {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--encre-3);
  font-size: 12px;
}
.raffinage-autres-liste {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}
.raffinage-autres-groupe-titre {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--encre-3);
}
.raffinage-autres-groupe-liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
}
.raffinage-autre {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--filet);
  background: transparent;
  border-radius: 0;
  padding: 7px 0;
  font-family: var(--corps);
  font-size: 13px;
  color: var(--encre-2);
  cursor: pointer;
}
.raffinage-autre:last-child { border-bottom: 0; }
.raffinage-autre:hover,
.raffinage-autre:focus-visible {
  color: var(--encre);
}
.raffinage-autre.actif {
  color: var(--accent);
}
.raffinage-autre-nom {
  font-weight: 600;
}
.raffinage-autre-val {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--encre-3);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}
.raffinage-autre.actif .raffinage-autre-val {
  color: var(--accent);
}
.rail-leviers-entete #btnPasserQuestion {
  margin-left: auto;
}
@media (max-width: 640px) {
  .raffinage-autres-groupe-liste { grid-template-columns: 1fr; }
}
.rail-step {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 1px solid var(--filet-fort);
  background: var(--surface);
  border-radius: 8px;
  padding: 7px 10px;
  font-family: var(--corps);
  font-size: 12.5px;
  color: var(--encre-2);
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
}
.rail-step-num {
  font-weight: 700;
  color: var(--encre-3);
}
.rail-step-actif {
  border-color: var(--accent);
  background: var(--accent-voile);
  color: var(--encre);
}
.rail-step-fait {
  border-color: var(--filet);
  color: var(--encre);
}
.rail-question-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.rail-leviers-grille {
  display: block;
}
.rail-levier {
  background: var(--fond);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-s);
  padding: 16px 18px 18px;
}
.rail-levier-entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.rail-levier-titre {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.rail-levier-valeur {
  font-family: var(--chiffres);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  white-space: nowrap;
}
.rail-levier-sous {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--encre-3);
  line-height: 1.4;
}
.rail-levier .raffinage-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  width: 100%;
}
.rail-levier .btn-raffinage-option {
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 44px;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
}
.rail-levier .btn-raffinage-option strong {
  font-size: 14.5px;
}
.rail-leviers-plus { display: none; }

.portrait-territoire {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--encre-2);
}
.portrait-territoire-lieu { margin: 0 0 6px; color: var(--encre); }
.portrait-territoire ul {
  margin: 0;
  padding-left: 1.1em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.portrait-territoire li { line-height: 1.4; }
.portrait-territoire-eco {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--encre-3);
}

.classement-statuts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.classement-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--encre-3);
  padding: 0 4px;
}
.classement-legende-item { display: inline-flex; align-items: center; gap: 6px; }
.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.swatch-keep { background: var(--bon); }
.swatch-cotis { background: var(--serie-2); }
.swatch-impots { background: var(--serie-3); }

.classement-ligne {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  grid-template-areas:
    "rang identite chiffres"
    "rang course   course";
  gap: 2px 14px;
  align-items: start;
  padding: 12px 16px;
  margin-bottom: 0;
}
.classement-ligne.selectionnee {
  grid-template-areas:
    "rang identite chiffres"
    "rang course   course"
    "rang poche    poche"
    "rang alerte   alerte"
    "rang cascade  cascade";
  padding: 14px 16px 16px;
}
.classement-ligne .classement-par-an,
.classement-ligne .classement-poche,
.classement-ligne .alerte-carte,
.classement-ligne .classement-cascade { display: none; }
.classement-ligne.selectionnee .alerte-carte { display: -webkit-box; }
.classement-ligne.selectionnee .classement-cascade { display: block; }
.classement-rang {
  grid-area: rang;
  font-family: var(--chiffres);
  font-weight: 800;
  font-size: 18px;
  color: var(--encre-3);
  line-height: 1.2;
  padding-top: 2px;
}
.classement-ligne.gagnant .classement-rang { color: var(--bon); }
.classement-identite { grid-area: identite; min-width: 0; }
.classement-identite h4 { font-size: 16px; margin: 0; }
.classement-identite h4 .terme { font-weight: 700; }
.classement-ligne .sous { font-size: 13px; margin: 2px 0 0; color: var(--encre-3); }
.classement-chiffres {
  grid-area: chiffres;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.classement-ligne .montant { font-size: 20px; }
.classement-par-an {
  font-family: var(--chiffres);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--encre-3);
}
.classement-ecart {
  font-family: var(--chiffres);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 700;
}
.classement-ecart-tete { color: var(--bon); }
.classement-ecart-moins { color: var(--grave); }
.classement-ecart-nul { color: var(--encre-3); font-weight: 600; }
.classement-ecart-ko { color: var(--grave); text-transform: none; }

.classement-course { grid-area: course; margin-top: 8px; }
.classement-partage {
  display: flex;
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--surface-2);
}
.classement-cascade { grid-area: cascade; margin-top: 10px; }
.classement-cascade .cascade-euros { margin: 0; }
.classement-ligne:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.partage-keep { background: var(--bon); }
.partage-cotis { background: var(--serie-2); }
.partage-impots { background: var(--serie-3); }

.classement-poche {
  grid-area: poche;
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--encre-2);
}
.classement-ligne .alerte-carte {
  grid-area: alerte;
  margin-top: 8px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.classement-ligne.selectionnee .alerte-carte {
  display: -webkit-box;
}
.classement-ligne .carte-action-texte { display: none; }
.classement-ligne .ruban { display: none; }

@media (max-width: 640px) {
  .classement-ligne {
    grid-template-columns: 28px 1fr;
    grid-template-areas:
      "rang identite"
      "rang chiffres"
      "rang course";
  }
  .classement-ligne.selectionnee {
    grid-template-areas:
      "rang identite"
      "rang chiffres"
      "rang course"
      "rang poche"
      "rang alerte"
      "rang cascade";
  }
  .classement-chiffres { align-items: flex-start; text-align: left; margin-top: 4px; }
}

.pourquoi-classement {
  margin: 8px 0 24px;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 18px 22px 20px;
}
.cascade-euros { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 16px; }
.cascade-ligne {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items: baseline;
  position: relative;
  font-size: 14px;
}
.cascade-ligne b { font-family: var(--chiffres); }
.cascade-barre {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 99px;
  background: var(--serie-1);
  opacity: 0.85;
}
.cascade-charges { background: var(--serie-4); }
.cascade-cotis { background: var(--serie-2); }
.cascade-impots { background: var(--serie-3); }
.cascade-keep { background: var(--bon); }
.cascade-reste { font-weight: 700; }
.pourquoi-forces {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pourquoi-force, .pourquoi-faible {
  font-size: 12.5px;
  padding: 4px 9px;
  border-radius: 99px;
}
.pourquoi-force { background: var(--bon-voile); color: var(--bon); }
.pourquoi-faible { background: var(--alerte-voile); color: var(--alerte); }
.verdict-detail {
  margin: 8px 0 0;
  color: var(--encre-2);
}
.verdict-detail summary {
  cursor: pointer;
  font-weight: 650;
}
.enclair-mecanisme, .enclair-contrepartie {
  margin: 8px 0 0;
  color: var(--encre-2);
  line-height: 1.5;
}

@media (max-width: 720px) {
  .calcul-metiers, .calcul-duo {
    grid-template-columns: 1fr;
  }
  .resultats-actions { gap: 12px; flex-wrap: wrap; }
  #btnImprimer { display: none; }
}

/* `display: grid` du formulaire entreprise (ci-dessous) l'emporterait sur
   l'attribut hidden : sans cette règle les deux calculateurs s'empilent. */
.calcul-rapide[hidden] {
  display: none !important;
}

.classement-statuts {
  container-type: inline-size;
  container-name: classement;
}
@container classement (min-width: 720px) {
  .classement-ligne {
    grid-template-columns: 48px 160px minmax(160px, 1fr) 160px;
    grid-template-areas:
      "rang identite course chiffres";
    align-items: center;
    padding: 14px 20px;
    column-gap: 16px;
  }
  .classement-ligne.selectionnee {
    grid-template-areas:
      "rang identite course chiffres"
      ".    poche    poche  chiffres"
      ".    alerte   alerte chiffres"
      ".    cascade  cascade chiffres";
    padding: 16px 20px 18px;
  }
  .classement-course { margin-top: 0; }
  .classement-partage { height: 8px; }
  .classement-poche { margin-top: 6px; }
  .classement-ligne .montant { font-size: 22px; }
  .classement-par-an, .classement-ecart { font-size: 13px; }
  .classement-ligne .carte-action-texte { display: none; }
}

@media (min-width: 1100px) {
  main { padding-left: 40px; padding-right: 40px; }
  .entete { padding-left: 24px; padding-right: 24px; }
  .rail-question .rail-levier { max-width: none; }
  .resultats-hero-bloc {
    padding: 26px 32px 20px;
  }
  .hero-chiffre .synthese-valeur { font-size: 42px; }
  .pourquoi-classement {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 8px 40px;
    padding: 22px 28px;
  }
  .pourquoi-classement .titre-section,
  .pourquoi-classement .aide-texte { grid-column: 1 / -1; }
}

/* ==================================================================
   Impression : la raison d'être : imprimer ses résultats (ou les
   enregistrer en PDF) pour les apporter à l'expert-comptable.
   Noir sur blanc, tableaux comptables dépliés (voir beforeprint dans
   app.js), et tout ce qui est interactif ou marketing disparaît.
   ================================================================== */

@media print {
  :root {
    --fond: #fff; --surface: #fff; --surface-2: #f2f2f2;
    --encre: #000; --encre-2: #333; --encre-3: #555;
    --filet: #ccc; --filet-fort: #999;
  }
  body { background: #fff; font-size: 12px; }

  /* Déplier tous les dossiers pour impression */
  .resultats-onglets, .dossier-raccourcis, .dossier-raccourcis-bar { display: none !important; }
  .resultats-vue { display: block !important; }

  /* Hors sujet sur papier. */
  #introSplash,
  .entete, .lien-evitement, #accueil, .ligne-apres, .modal-fond, #blocQuestion,
  .expert-bloc, .enregistrer-scenario, .resultats-actions,
  .selecteur-statut, .pied-colonnes, .verdict-ia, #lienExpert,
  .tb-modules, .tb-plans-section, .tb-module-fleche,
  .btn-primaire, .btn-secondaire, .btn-lien,
  /* Commandes du formulaire : sans objet sur papier (pastilles d'aide,
     suppression/ajout de postes, lien vers le raccourci IA). */
  .info-bulle, .q-poste-suppr, .q-poste-ajout, .lien-ia { display: none !important; }

  /* Tout le contenu des résultats, à plat. */
  main { max-width: none; padding: 0; }
  .carte-statut, .enclair, .fiche-statut, .tableau-scroll, .carte-aide,
  .fr-tache, .tb-kpi {
    box-shadow: none; border: 1px solid #ccc;
    break-inside: avoid;
  }
  /* La coche imprimée reste visible (encre, pas fond). */
  .fr-check input:checked + .fr-coche { background: #fff; }
  .fr-check input:checked + .fr-coche::after { color: #000; opacity: 1; }
  .tableau-scroll { overflow: visible; }
  .titre-section { margin: 22px 0 6px; }

  /* Les termes du glossaire redeviennent du texte ordinaire. */
  .terme { border-bottom: none; color: inherit; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9px; color: #555; }
}

/* ==================================================================
   Identité 2026 : papier, segment, grille résultats, grain, page classes
   ================================================================== */
html { color-scheme: light dark; interpolate-size: allow-keywords; }

h1, h2, h3, .hero-gagnant-nom, .entete h1 button, .titre-section {
  font-optical-sizing: auto;
}
.enclair-lecon, .cascade-lecon { text-wrap: pretty; }
.hero-gagnant-nom { text-wrap: balance; }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: repeating-radial-gradient(circle at 12% 18%, #161e2e 0 0.45px, transparent 0.55px 2.8px),
    repeating-radial-gradient(circle at 78% 64%, #161e2e 0 0.35px, transparent 0.5px 3.4px);
}
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  body::after { display: none; }
}

.page-accueil #btnNavSimuler { display: none; }
.entete-kpi {
  font-family: var(--chiffres);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.02em;
}
@media (max-width: 720px) {
  .entete-kpi { display: none; }
}

sf-segment.choix-produit,
.choix-produit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: none;
  margin: 0 0 16px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--surface);
}
.choix-produit .carte-produit {
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 12px 16px;
  background: transparent;
}
.choix-produit .carte-produit.actif {
  background: var(--accent-voile);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.choix-produit .carte-produit strong { font-size: 16px; }
.choix-produit .carte-produit span { font-size: 12.5px; }

.calcul-metiers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.calcul-metiers .carte-metier {
  flex: 1 1 auto;
  min-width: 0;
}
.btn-calculer-grand { width: 100%; }

.resultats-grille {
  display: grid;
  gap: 20px;
  margin-bottom: 22px;
}
@media (min-width: 960px) {
  .resultats-grille {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: start;
  }
  .resultats-grille .rail-leviers {
    position: sticky;
    top: 72px;
    margin-bottom: 0;
  }
}

.resultats-partager > summary {
  display: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  color: var(--accent);
}
@media (max-width: 720px) {
  .resultats-partager > summary { display: list-item; }
  .resultats-partager:not([open]) .resultats-actions { display: none; }
}

.classement-partage {
  transform-origin: left center;
  animation: barre-entre 0.45s var(--easing) both;
}
@keyframes barre-entre {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .classement-partage { animation: none; }
}

.classement-ligne.selectionnee .classement-cascade {
  display: grid;
  grid-template-rows: 1fr;
}
::view-transition-old(hero-chiffre),
::view-transition-new(hero-chiffre) {
  animation-duration: 0.35s;
  animation-timing-function: var(--easing);
}

.resultats-dossiers-bloc {
  font-size: 15px;
}
.resultats-onglet {
  font-size: 13px;
}

.avis-foyer {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--bordure, color-mix(in oklch, var(--encre) 12%, transparent));
  border-radius: 12px;
  overflow: hidden;
}
.avis-foyer li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.9rem;
  border-top: 1px solid color-mix(in oklch, var(--encre) 8%, transparent);
}
.avis-foyer li:first-child { border-top: 0; }
.avis-foyer .avis-total {
  font-weight: 600;
  background: color-mix(in oklch, var(--papier) 80%, var(--encre) 4%);
}
.leviers-foyer { display: grid; gap: 0.75rem; margin-top: 1rem; }
.levier-foyer-delta { font-size: 0.9rem; color: var(--encre-muette, inherit); }