/* Apogemo — thème « Laiton » (brique 34).
   Concept : un outil d'agence, calme et précis. Fond pierre, texte graphite, une seule couleur — le laiton, celui des
   plaques et des poignées de porte — pour ce que fait Apogemo : l'IA, les liens, le focus, et Apo, le petit robot guide.
   Aucun motif ni dégradé de fond. Une police (Inter). Contrastes vérifiés AA (4,5:1 minimum pour le texte).
   Clair et sombre suivent le réglage de l'appareil ; toutes les animations s'arrêtent si le système demande moins de
   mouvement. */

@font-face { font-family: "Inter"; src: url("/static/polices/Inter-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/polices/Inter-SemiBold.woff") format("woff"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("/static/polices/InterDisplay-SemiBold.woff") format("woff"); font-weight: 500 700; font-display: swap; }

:root {
  color-scheme: light dark;
  --fond: #F2F2EF;           /* pierre */
  --surface: #FFFFFF;
  --surface-2: #EAEAE6;
  --ligne: #E0DFDA;
  --ligne-forte: #C9C8C1;
  --texte: #1B1C1E;          /* graphite */
  --texte-2: #3A3B3E;
  --discret: #64655F;
  --encre: #1B1C1E;          /* boutons principaux */
  --encre-texte: #FFFFFF;
  --iris: #86672C;           /* laiton : l'IA, les liens, le focus, Apo */
  --iris-fort: #6B511F;
  --iris-voile: rgba(134, 103, 44, .10);
  --iris-trait: rgba(134, 103, 44, .38);
  --calcul: #4E5D6B;         /* ardoise : calculé par le programme */
  --calcul-voile: rgba(78, 93, 107, .08);
  --vigilance: #B4420A;      /* à compléter, à vérifier */
  --vigilance-voile: rgba(180, 66, 10, .08);
  --ok: #2D6E45;
  --ok-voile: rgba(45, 110, 69, .08);
  --erreur: #B42318;
  --erreur-voile: rgba(180, 35, 24, .07);
  --points: rgba(27, 28, 30, .07);
  --halo: transparent;
  --surface-pleine: #FFFFFF;
  --cyan: #4E5D6B;
  --aurore-1: transparent;
  --aurore-2: transparent;
  --bord-1: #E0DFDA;
  --bord-2: #E0DFDA;
  --reflet: transparent;
  --ombre: 0 1px 2px rgba(27, 28, 30, .05), 0 10px 28px -18px rgba(27, 28, 30, .22);
  --voile-attente: rgba(242, 242, 239, .78);
  --apo-corps: #2A2B2E;
  --apo-rebord: #1B1C1E;
  --apo-ecran: #121513;
  --apo-lueur: #F3DCA6;
  --dpe-A: #009A6E; --dpe-B: #4FB253; --dpe-C: #A6CC3A; --dpe-D: #F2D51C;
  --dpe-E: #F2A81C; --dpe-F: #EB6E2B; --dpe-G: #D72A21;
  --police: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --titre: "Inter Display", "Inter", ui-sans-serif, system-ui, sans-serif;
  --rayon: 14px;
  --rayon-petit: 10px;
  --vite: 160ms;
  --doux: cubic-bezier(.2, .7, .2, 1);
}

/* Sombre : soit choisi par l'agent (bouton de la barre), soit demandé par l'appareil en mode automatique. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --fond: #141413;
    --surface: #1C1C1B;
    --surface-pleine: #1C1C1B;
    --surface-2: #242422;
    --ligne: rgba(255, 255, 255, .09);
    --ligne-forte: rgba(255, 255, 255, .17);
    --texte: #EDECE8;
    --texte-2: #CAC8C1;
    --discret: #9B998F;
    --encre: #EDECE8;
    --encre-texte: #141413;
    --iris: #D4B47A;
    --iris-fort: #E6CD9E;
    --iris-voile: rgba(212, 180, 122, .12);
    --iris-trait: rgba(212, 180, 122, .45);
    --cyan: #A9B6C2;
    --calcul: #A9B6C2;
    --calcul-voile: rgba(169, 182, 194, .09);
    --vigilance: #F0A066;
    --vigilance-voile: rgba(240, 160, 102, .10);
    --ok: #82C99A;
    --ok-voile: rgba(130, 201, 154, .09);
    --erreur: #F28B82;
    --erreur-voile: rgba(242, 139, 130, .09);
    --points: rgba(255, 255, 255, .06);
    --bord-1: rgba(255, 255, 255, .09);
    --bord-2: rgba(255, 255, 255, .09);
    --ombre: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 20px 40px -26px rgba(0, 0, 0, .85);
    --voile-attente: rgba(20, 20, 19, .78);
    --apo-corps: #3A3B3F;
    --apo-rebord: rgba(255, 255, 255, .22);
    --apo-ecran: #0C0E0D;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
      color-scheme: dark;
      --fond: #141413;
      --surface: #1C1C1B;
      --surface-pleine: #1C1C1B;
      --surface-2: #242422;
      --ligne: rgba(255, 255, 255, .09);
      --ligne-forte: rgba(255, 255, 255, .17);
      --texte: #EDECE8;
      --texte-2: #CAC8C1;
      --discret: #9B998F;
      --encre: #EDECE8;
      --encre-texte: #141413;
      --iris: #D4B47A;
      --iris-fort: #E6CD9E;
      --iris-voile: rgba(212, 180, 122, .12);
      --iris-trait: rgba(212, 180, 122, .45);
      --cyan: #A9B6C2;
      --calcul: #A9B6C2;
      --calcul-voile: rgba(169, 182, 194, .09);
      --vigilance: #F0A066;
      --vigilance-voile: rgba(240, 160, 102, .10);
      --ok: #82C99A;
      --ok-voile: rgba(130, 201, 154, .09);
      --erreur: #F28B82;
      --erreur-voile: rgba(242, 139, 130, .09);
      --points: rgba(255, 255, 255, .06);
      --bord-1: rgba(255, 255, 255, .09);
      --bord-2: rgba(255, 255, 255, .09);
      --ombre: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 20px 40px -26px rgba(0, 0, 0, .85);
      --voile-attente: rgba(20, 20, 19, .78);
      --apo-corps: #3A3B3F;
      --apo-rebord: rgba(255, 255, 255, .22);
      --apo-ecran: #0C0E0D;
  }
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background-color: var(--fond);
  color: var(--texte-2); font-family: var(--police); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { color: var(--texte); margin: 0; line-height: 1.12; text-wrap: balance; font-weight: 600; }
h1 { font-family: var(--titre); font-size: clamp(1.9rem, 3.6vw, 2.6rem); letter-spacing: -0.035em; }
h2 { font-family: var(--titre); font-size: 1.15rem; letter-spacing: -0.02em; }
h3 { font-size: .9rem; font-weight: 600; letter-spacing: -0.005em; color: var(--texte); margin-bottom: 8px; }
p { margin: 0; }
a { color: var(--iris); text-underline-offset: 3px; }
a:hover { color: var(--iris-fort); }
:focus-visible { outline: 2px solid var(--iris); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--iris-trait); color: var(--texte); }
input, select, textarea, button { font-family: inherit; }

/* ---------- Barre du haut et signal de l'IA ---------- */
.barre { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--fond) 78%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--ligne); }
.barre-dedans { max-width: 1200px; margin: 0 auto; padding: 10px max(16px, 3vw); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.marque { display: inline-flex; align-items: center; gap: 10px; color: var(--texte); text-decoration: none; font-family: var(--titre); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.02em; }
.marque:hover { color: var(--texte); }
.logo { width: 26px; height: 26px; color: var(--texte); }
.logo-astre { fill: var(--iris); }
.onglets { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--ligne); border-radius: 12px; overflow-x: auto; scrollbar-width: none; }
.onglets a { color: var(--discret); text-decoration: none; font-weight: 500; font-size: .9rem; padding: 6px 13px; border-radius: 9px; white-space: nowrap; transition: color var(--vite) ease, background-color var(--vite) ease, box-shadow var(--vite) ease; }
.onglets a:hover { color: var(--texte); }
.onglets a[aria-current="page"] { color: var(--texte); background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--ligne); }
.barre-compte { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.barre-compte form { margin: 0; }
.marque + .theme { margin-left: auto; }
/* Téléphone : barre sur une seule ligne, onglets en bas de l'écran, sous le pouce. */
@media (max-width: 860px) {
  .barre { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--fond); }
  .barre-dedans { flex-wrap: nowrap; gap: 12px; }
  .barre-compte { gap: 10px; }
  .barre .statut-ia, .barre .statut-demo { font-size: 0; gap: 0; padding: 8px; }
  .barre .statut-ia::before, .barre .statut-demo::before { width: 8px; height: 8px; }
  .barre .lien-discret { white-space: nowrap; }
  .onglets {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; border-radius: 0; border: 0; border-top: 1px solid var(--ligne);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); gap: 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  }
  .onglets a { white-space: normal; text-align: center; font-size: .76rem; line-height: 1.2; min-height: 48px; display: grid; place-items: center; padding: 6px 4px; }
  body { padding-bottom: 72px; }
}

/* La ligne de signal : fine et immobile au repos, elle s'anime quand l'IA travaille. */
.ligne-ia { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; background: var(--ligne); }
.ligne-ia::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 18%; background: linear-gradient(90deg, transparent, var(--iris), transparent); opacity: .55; transform: translateX(-20%); }
.ia-travaille .ligne-ia { height: 2px; }
.ia-travaille .ligne-ia::after { opacity: 1; width: 30%; animation: signal 1.4s var(--doux) infinite; }
@keyframes signal { from { transform: translateX(-110%); } to { transform: translateX(380%); } }

.statut { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 500; padding: 4px 11px 4px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--ligne); background: var(--surface); color: var(--texte-2); }
.statut::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.statut-ia::before { background: var(--iris); box-shadow: 0 0 0 0 var(--iris-trait); animation: respire 3.2s ease-in-out infinite; }
.statut-demo { color: var(--vigilance); }
.statut-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, var(--ligne)); }
.statut-alerte { color: var(--vigilance); border-color: color-mix(in srgb, var(--vigilance) 35%, var(--ligne)); }
@keyframes respire { 0%, 100% { box-shadow: 0 0 0 0 var(--iris-trait); } 50% { box-shadow: 0 0 0 5px transparent; } }

.lien-discret, .lien-danger { font: inherit; font-size: .88rem; background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--discret); }
.lien-discret:hover { color: var(--texte); }
.lien-danger { color: var(--erreur); }
.lien-danger:hover { text-decoration: underline; }

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; text-decoration: none; font: inherit; font-weight: 600; font-size: .95rem; border: 1px solid var(--ligne-forte); border-radius: 11px; padding: 10px 18px; cursor: pointer; background: var(--surface); color: var(--texte); transition: transform var(--vite) var(--doux), background-color var(--vite) ease, border-color var(--vite) ease, box-shadow var(--vite) ease; }
.bouton:hover { border-color: var(--texte); color: var(--texte); }
.bouton:active { transform: scale(.98); }
.bouton:disabled { opacity: .55; cursor: progress; }
.bouton-principal { background: var(--encre); color: var(--encre-texte); border-color: var(--encre); padding: 11px 22px; box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 6px 16px -10px rgba(27, 28, 30, .6); }
.bouton-principal:hover { color: var(--encre-texte); border-color: var(--encre); box-shadow: 0 0 0 4px var(--iris-voile), 0 6px 16px -10px rgba(27, 28, 30, .6); }

/* ---------- Pages ---------- */
.page { max-width: 1200px; margin: 0 auto; padding: 36px max(16px, 3vw) 64px; }
.pied { text-align: center; color: var(--discret); font-size: .8rem; padding: 0 16px 40px; }
.indice { color: var(--discret); font-size: .85rem; }
.vide { color: var(--discret); font-size: .92rem; }

/* Apparition douce des blocs, un à un */
.colonne-principale > *, .colonne-historique > *, .colonne-controles > *, .page-tableau .page > * { animation: entree 420ms var(--doux) both; }
.colonne-principale > :nth-child(2), .colonne-controles > :nth-child(2), .page-tableau .page > :nth-child(2) { animation-delay: 60ms; }
.colonne-principale > :nth-child(3), .colonne-controles > :nth-child(3), .page-tableau .page > :nth-child(3) { animation-delay: 120ms; }
.colonne-principale > :nth-child(n+4), .colonne-controles > :nth-child(n+4) { animation-delay: 180ms; }
@keyframes entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.mise-en-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.colonne-principale { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.colonne-historique, .colonne-controles { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.colonne-historique h2, .colonne-controles h2 { font-size: 1rem; }
@media (max-width: 980px) {
  .mise-en-page { grid-template-columns: minmax(0, 1fr); }
  .colonne-historique, .colonne-controles { position: static; }
}

/* ---------- Connexion ---------- */
.page-connexion .page { display: grid; place-items: center; min-height: calc(100vh - 150px); }
.connexion { max-width: 420px; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.connexion h1 { font-size: clamp(1.8rem, 5vw, 2.3rem); }
.connexion-texte { color: var(--discret); }
.connexion-form { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 22px; box-shadow: var(--ombre); }
.connexion-form .bouton { margin-top: 6px; background: var(--encre); color: var(--encre-texte); border-color: var(--encre); }
.message-erreur { color: var(--erreur); font-weight: 600; font-size: .9rem; }

/* ---------- Tableau de bord ---------- */
.accueil-hero { padding: 24px 0 34px; max-width: 720px; display: flex; flex-direction: column; gap: 12px; }
.accueil-hero h1 { font-size: clamp(2.2rem, 5.4vw, 3.4rem); }
.accueil-hero p { color: var(--discret); font-size: 1.05rem; max-width: 56ch; }
.hero-orbites { display: none; }

.outils { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-bottom: 44px; }
.outil { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 18px; text-decoration: none; color: var(--texte-2); background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); transition: border-color var(--vite) ease, transform var(--vite) var(--doux); }
.outil::after { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; background: var(--iris); opacity: 0; transition: opacity var(--vite) ease; }
.outil:hover { border-color: var(--ligne-forte); transform: translateY(-2px); color: var(--texte-2); }
.outil:hover::after { opacity: 1; }
.outil h2 { font-size: 1.1rem; }
.outil p { color: var(--discret); font-size: .92rem; flex: 1; }
.outil-compte { font-family: var(--titre); font-size: 2.4rem; line-height: 1; color: var(--texte); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.outil-action { color: var(--iris); font-weight: 600; font-size: .9rem; margin-top: 6px; }
.outil-action::after { content: " →"; }

.recents h2 { margin-bottom: 12px; }
.liste-recents { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; }
.liste-recents li + li { border-top: 1px solid var(--ligne); }
.liste-recents a { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 13px 16px; text-decoration: none; color: var(--texte-2); transition: background-color var(--vite) ease; }
.liste-recents a:hover { background: var(--surface-2); }
.recent-genre { font-size: .76rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--discret); display: inline-flex; align-items: center; gap: 7px; }
.recent-genre::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.genre-annonce { color: var(--iris); }
.genre-visite { color: var(--calcul); }
.genre-diagnostic { color: var(--ok); }
.recent-titre { color: var(--texte); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-date { color: var(--discret); font-size: .84rem; font-variant-numeric: tabular-nums; }
.recent-etat { font-size: .74rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor; }
.etat-ok { color: var(--ok); }
.etat-alerte { color: var(--vigilance); }
@media (max-width: 640px) {
  .liste-recents a { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .recent-genre { grid-column: 1 / -1; }
  .recent-date { display: none; }
}

/* ---------- En-tête des pages d'outil ---------- */
.intro { display: flex; flex-direction: column; gap: 8px; }
.intro > p { color: var(--discret); max-width: 64ch; }
.essais { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: .86rem; color: var(--discret); }
.essai { color: var(--texte-2); text-decoration: none; padding: 5px 12px; border-radius: 999px; border: 1px dashed var(--ligne-forte); font-weight: 500; transition: border-color var(--vite) ease, color var(--vite) ease; }
.essai:hover { border-style: solid; border-color: var(--iris); color: var(--iris); }

/* ---------- Formulaires ---------- */
.fiche { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); }
.bloc { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; padding: 24px; }
.bloc + .bloc { border-top: 1px solid var(--ligne); }
.bloc-titre h2 { font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.bloc-titre p { color: var(--discret); font-size: .84rem; margin-top: 4px; }
.bloc-champs { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 720px) { .bloc { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 16px; } }

.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ-large { grid-column: span 2; }
@media (max-width: 520px) { .champ-large { grid-column: auto; } }
label, .libelle { font-size: .82rem; font-weight: 500; color: var(--texte-2); }
input[type=text], input[type=password], select, textarea {
  font: inherit; font-size: .95rem; color: var(--texte); background: var(--surface); border: 1px solid var(--ligne-forte); border-radius: var(--rayon-petit);
  padding: 9px 12px; width: 100%; min-height: 42px; transition: border-color var(--vite) ease, box-shadow var(--vite) ease, background-color var(--vite) ease;
}
input::placeholder, textarea::placeholder { color: var(--discret); opacity: .8; }
input[type=text]:hover, select:hover, textarea:hover { border-color: var(--discret); }
input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus { outline: none; border-color: var(--iris); box-shadow: 0 0 0 4px var(--iris-voile); }
select option { background: var(--surface); color: var(--texte); }
textarea { resize: vertical; line-height: 1.55; }
.texte-long { font-size: .9rem; }

.case { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; font-size: .92rem; color: var(--texte-2); min-height: 32px; }
.case input { width: 18px; height: 18px; accent-color: var(--iris); margin: 0; }

.bascule { display: inline-flex; background: var(--surface-2); border: 1px solid var(--ligne); border-radius: 11px; padding: 3px; width: fit-content; }
.bascule input { position: absolute; opacity: 0; pointer-events: none; }
.bascule label { padding: 6px 16px; border-radius: 8px; cursor: pointer; font-weight: 500; color: var(--discret); transition: background-color var(--vite) ease, color var(--vite) ease; }
.bascule input:checked + label { background: var(--surface); color: var(--texte); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--ligne); }
.bascule input:focus-visible + label { outline: 2px solid var(--iris); outline-offset: 2px; }

.echelle-dpe { display: flex; gap: 4px; flex-wrap: wrap; }
.echelle-dpe input { position: absolute; opacity: 0; pointer-events: none; }
.echelle-dpe label { width: 36px; height: 32px; display: grid; place-items: center; border-radius: 8px; font-weight: 700; cursor: pointer; color: #0F1A3A; opacity: .28; transition: opacity var(--vite) ease, transform var(--vite) var(--doux); }
.echelle-dpe label:hover { opacity: .7; }
.echelle-dpe input:checked + label { opacity: 1; transform: scale(1.1); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--texte); }
.echelle-dpe input:focus-visible + label { outline: 2px solid var(--iris); outline-offset: 3px; }
.dpe-vide { background: var(--surface-2); color: var(--discret) !important; opacity: .9 !important; }
.dpe-A { background: var(--dpe-A); } .dpe-B { background: var(--dpe-B); } .dpe-C { background: var(--dpe-C); }
.dpe-D { background: var(--dpe-D); } .dpe-E { background: var(--dpe-E); } .dpe-F { background: var(--dpe-F); } .dpe-G { background: var(--dpe-G); }
.echelle-dpe .dpe-A, .echelle-dpe .dpe-F, .echelle-dpe .dpe-G { color: #FFFFFF; }

.envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 20px 24px 24px; border-top: 1px solid var(--ligne); }

/* ---------- Historique latéral ---------- */
.historique { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.historique a { display: flex; gap: 12px; align-items: flex-start; padding: 10px; margin: 0 -10px; border-radius: 12px; text-decoration: none; transition: background-color var(--vite) ease; }
.historique a:hover { background: var(--surface); }
.historique-texte { display: flex; flex-direction: column; min-width: 0; }
.historique-titre { color: var(--texte); font-weight: 500; line-height: 1.35; font-size: .93rem; }
.historique-meta { font-size: .78rem; color: var(--discret); display: flex; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.manque { color: var(--erreur); font-weight: 600; }
.complet { color: var(--ok); }
.dpe-pastille { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-weight: 700; font-size: .8rem; color: #0F1A3A; }
.dpe-pastille.dpe-A, .dpe-pastille.dpe-F, .dpe-pastille.dpe-G { color: #FFFFFF; }
.dpe-pastille.dpe-vide { background: var(--surface-2); color: var(--discret); border: 1px solid var(--ligne); }

/* ---------- Encarts ---------- */
.encart { border-radius: var(--rayon); padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
.encart-attention { background: var(--vigilance-voile); border: 1px solid color-mix(in srgb, var(--vigilance) 35%, transparent); color: var(--texte); }

/* ---------- Documents produits ---------- */
.entete-annonce { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.retour { font-weight: 500; text-decoration: none; font-size: .92rem; color: var(--discret); }
.retour::before { content: "← "; }
.retour:hover { color: var(--texte); }
.apercu { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.apercu-tete { padding: 28px 28px 22px; border-bottom: 1px solid var(--ligne); display: flex; flex-direction: column; gap: 12px; }
.apercu-tete-compacte { padding: 18px 28px 14px; gap: 4px; }
.apercu-lieu { color: var(--iris); font-weight: 600; font-size: .84rem; letter-spacing: .02em; }
.en-bref { color: var(--texte-2); font-size: 1.03rem; max-width: 66ch; }
.faits { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.faits li { background: var(--surface-2); border: 1px solid var(--ligne); color: var(--texte); font-weight: 500; font-size: .84rem; padding: 4px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.fait-dpe .dpe-pastille { width: 20px; height: 20px; font-size: .72rem; border-radius: 6px; }
.interet-fort { border-color: color-mix(in srgb, var(--ok) 45%, transparent) !important; color: var(--ok) !important; }
.interet-reserve, .interet-nul { border-color: color-mix(in srgb, var(--vigilance) 45%, transparent) !important; color: var(--vigilance) !important; }
.apercu-corps { padding: 24px 28px; display: flex; flex-direction: column; gap: 22px; }
.description { display: flex; flex-direction: column; gap: 12px; max-width: 68ch; font-size: 1.02rem; color: var(--texte); line-height: 1.7; }
.points-forts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.points-forts li, .liste-plus li { position: relative; padding-left: 24px; color: var(--texte); font-weight: 500; }
.points-forts li::before, .liste-plus li::before { content: ""; position: absolute; left: 3px; top: .52em; width: 10px; height: 6px; border-left: 2px solid var(--iris); border-bottom: 2px solid var(--iris); transform: rotate(-45deg); }
.liste-plus, .liste-moins, .liste-suite { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.liste-moins li { position: relative; padding-left: 24px; color: var(--texte); }
.liste-moins li::before { content: ""; position: absolute; left: 3px; top: .75em; width: 10px; height: 2px; background: var(--vigilance); }
.liste-suite li { position: relative; padding-left: 24px; color: var(--texte); }
.liste-suite li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--calcul); }
.colonnes-cr { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.a-lire { background: var(--surface-2); border: 1px solid var(--ligne); border-radius: var(--rayon-petit); padding: 18px 20px; }
.mentions { border-top: 1px solid var(--ligne); padding-top: 16px; display: flex; flex-direction: column; gap: 6px; font-size: .84rem; color: var(--discret); }
.mentions .mention-forte { font-size: 1.02rem; font-weight: 600; color: var(--texte); }
.apercu-pied { padding: 16px 28px; border-top: 1px solid var(--ligne); background: var(--surface-2); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
@media (max-width: 600px) { .apercu-tete, .apercu-corps, .apercu-pied, .apercu-tete-compacte { padding-left: 18px; padding-right: 18px; } }

/* ---------- Contrôles ---------- */
.controles-intro { color: var(--discret); font-size: .84rem; }
.controles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.controle { position: relative; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 14px 12px 32px; display: flex; flex-direction: column; gap: 4px; font-size: .88rem; }
.controle::before { content: ""; position: absolute; left: 13px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--discret); }
.controle strong { color: var(--texte); font-weight: 600; }
.controle ul { margin: 4px 0 0; padding-left: 16px; }
.controle-ok::before { background: var(--ok); }
.controle-info::before { background: var(--iris); }
.controle-attention { border-color: color-mix(in srgb, var(--vigilance) 35%, var(--ligne)); background: var(--vigilance-voile); }
.controle-attention::before { background: var(--vigilance); }
.controle-erreur { border-color: color-mix(in srgb, var(--erreur) 40%, var(--ligne)); background: var(--erreur-voile); }
.controle-erreur::before { background: var(--erreur); }
.controles-source { color: var(--discret); font-size: .76rem; }
.source { font-size: .85rem; color: var(--discret); }
.source summary { cursor: pointer; font-weight: 500; color: var(--texte-2); }
.source pre { white-space: pre-wrap; word-break: break-word; font-family: inherit; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon-petit); padding: 12px; max-height: 320px; overflow: auto; margin: 10px 0 0; }
.appels { font-size: .78rem; margin-top: -4px; font-variant-numeric: tabular-nums; }

/* ---------- Import d'une fiche : ce que l'IA a lu, calculé, ce qui manque ---------- */
.import { margin-bottom: 0; }
.encart-import { background: var(--surface); border: 1px solid var(--ligne); color: var(--texte); gap: 10px; box-shadow: var(--ombre); }
.legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .8rem; color: var(--discret); }
.badge { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 6px; font-size: .68rem; font-weight: 600; letter-spacing: .02em; vertical-align: 1px; line-height: 1.6; }
.legende .badge { margin-left: 0; }
.badge-ia { color: var(--iris); background: var(--iris-voile); box-shadow: inset 0 0 0 1px var(--iris-trait); }
.badge-calcule { color: var(--calcul); background: var(--calcul-voile); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--calcul) 40%, transparent); }
.badge-manque { color: var(--vigilance); background: var(--vigilance-voile); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vigilance) 45%, transparent); }
.etat-ia input[type=text], .etat-ia select, .etat-ia textarea, .etat-ia .echelle-dpe, .etat-ia .bascule { border-color: var(--iris-trait); background-color: var(--iris-voile); }
.etat-calcule input[type=text], .etat-calcule select { border-color: var(--calcul); border-style: dashed; background-color: var(--calcul-voile); }
.etat-manque input[type=text], .etat-manque select, .etat-manque textarea, .etat-manque .echelle-dpe { border-color: var(--vigilance); box-shadow: 0 0 0 4px var(--vigilance-voile); }
.etat-ia .echelle-dpe, .etat-manque .echelle-dpe { border: 1px solid; border-radius: 11px; padding: 4px; width: fit-content; }
.etat-ia .echelle-dpe { border-color: var(--iris-trait); }
.etat-manque .echelle-dpe { border-color: var(--vigilance); }
/* Les cases remplies par l'IA s'allument l'une après l'autre, comme si les valeurs arrivaient. */
.etat-ia input[type=text], .etat-ia select, .etat-ia textarea, .etat-calcule input[type=text] { animation: allumage 900ms var(--doux) both; }
.grille > :nth-child(2) input, .grille > :nth-child(2) select { animation-delay: 70ms; }
.grille > :nth-child(3) input, .grille > :nth-child(3) select { animation-delay: 140ms; }
.grille > :nth-child(4) input, .grille > :nth-child(4) select { animation-delay: 210ms; }
.grille > :nth-child(5) input, .grille > :nth-child(5) select { animation-delay: 280ms; }
.grille > :nth-child(n+6) input, .grille > :nth-child(n+6) select { animation-delay: 350ms; }
@keyframes allumage { 0% { box-shadow: 0 0 0 0 var(--iris-trait); } 40% { box-shadow: 0 0 0 6px var(--iris-voile); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- Info-bulles ---------- */
.t { font: inherit; font-size: .66rem; font-weight: 700; width: 17px; height: 17px; line-height: 15px; padding: 0; border-radius: 50%; border: 1px solid var(--ligne-forte); color: var(--discret); background: var(--surface); cursor: help; vertical-align: middle; flex: none; transition: border-color var(--vite) ease, color var(--vite) ease; }
.t:hover { border-color: var(--iris); color: var(--iris); }
.t[aria-expanded="true"] { background: var(--iris); border-color: var(--iris); color: #FFFFFF; }
#bulle { position: absolute; z-index: 30; max-width: min(320px, calc(100vw - 24px)); background: var(--encre); color: var(--encre-texte); font-size: .85rem; font-weight: 400; line-height: 1.5; padding: 10px 12px; border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45); animation: entree 160ms var(--doux) both; }

/* ---------- Attente : l'IA travaille ---------- */
.attente { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: var(--voile-attente); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 16px; animation: entree 200ms ease both; }
.attente-carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: 18px; padding: 28px 30px; max-width: 380px; width: 100%; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .45); }
.attente-signal { position: relative; height: 2px; border-radius: 2px; background: var(--ligne); overflow: hidden; margin-bottom: 8px; }
.attente-signal::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; background: linear-gradient(90deg, transparent, var(--iris), transparent); animation: signal 1.3s var(--doux) infinite; }
.attente-titre { font-family: var(--titre); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; color: var(--texte); display: flex; align-items: center; gap: 10px; }
.attente-titre::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--iris); animation: respire 1.6s ease-in-out infinite; }
.attente-texte { color: var(--discret); font-size: .9rem; }
.attente-chrono { font-family: var(--titre); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 2rem; letter-spacing: -0.03em; color: var(--texte); margin-top: 4px; }
.attente-alerte { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; color: var(--texte-2); font-size: .9rem; }
.attente-alerte strong { color: var(--vigilance); }

/* ================= Signal+ : la couche futuriste =================
   Tout ce qui suit est décoratif ou d'ambiance, et s'éteint avec « moins de mouvement ». */

/* Transitions fondues entre les pages (navigateurs récents ; ignoré ailleurs). Jamais si l'agent a demandé moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
}

/* Aurore : deux halos qui dérivent lentement derrière le contenu. Dégradés seuls, aucun flou coûteux. */
.aurore { display: none; }
.aurore span { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; }
.aurore span:first-child { left: -20vmax; top: -30vmax; background: radial-gradient(closest-side, var(--aurore-1), transparent); animation: derive-1 38s ease-in-out infinite alternate; }
.aurore span:last-child { right: -25vmax; top: 10vmax; background: radial-gradient(closest-side, var(--aurore-2), transparent); animation: derive-2 46s ease-in-out infinite alternate; }
@keyframes derive-1 { to { transform: translate(18vmax, 12vmax) scale(1.1); } }
@keyframes derive-2 { to { transform: translate(-16vmax, 18vmax) scale(.9); } }

/* La sphère : la présence de l'IA. Petite dans la barre, grande à l'accueil. */
.orbe { --t: 120px; position: relative; width: var(--t); height: var(--t); border-radius: 50%; flex: none; }
.orbe::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--iris), transparent 70%, var(--iris)); animation: tourne 14s linear infinite; -webkit-mask: radial-gradient(circle, #000 52%, transparent 71%); mask: radial-gradient(circle, #000 52%, transparent 71%); }
.orbe::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: var(--iris); animation: respire-orbe 4.5s ease-in-out infinite; }
@keyframes tourne { to { transform: rotate(1turn); } }
@keyframes respire-orbe { 0%, 100% { transform: scale(.94); opacity: .7; } 50% { transform: scale(1.04); opacity: 1; } }
.ia-travaille .orbe::before { animation-duration: 2.4s; }

/* Point d'état de la barre : une mini-sphère. */
.statut-ia::before { width: 8px; height: 8px; background: var(--iris); animation: respire 3.2s ease-in-out infinite; }

/* Accueil */
.accueil-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; max-width: none; }
.accueil-hero > div { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.accueil-hero h1 { color: var(--texte); }
@keyframes reflet { from { background-position: 100% 0; } to { background-position: 0 0; } }
.hero-orbe { --t: 168px; }
.etat-ia-ligne { display: inline-flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--discret); }
.etat-ia-ligne .orbe { --t: 16px; }
@media (max-width: 720px) { .accueil-hero { grid-template-columns: minmax(0, 1fr); } .hero-orbe { --t: 96px; order: -1; } }

/* Cartes à bords dégradés et reflet qui suit le pointeur */
.outil, .apercu, .fiche, .encart-import, .liste-recents, .connexion-form { border: 1px solid var(--ligne); background: var(--surface); }
.apercu { position: relative; }
.outil-icone { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--iris); background: var(--iris-voile); box-shadow: inset 0 0 0 1px var(--iris-trait); }
.outil-icone svg { width: 18px; height: 18px; }
.outil-tete { display: flex; align-items: center; justify-content: space-between; }

/* Bouton principal : dégradé iris → bleu-vert, lueur au survol */


/* Le texte de l'annonce « s'écrit » à l'ouverture, paragraphe après paragraphe. */
.apercu .description > p, .a-lire .description > p { animation: ecrit 900ms var(--doux) both; -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%); mask-image: linear-gradient(90deg, #000 45%, transparent 55%); -webkit-mask-size: 260% 100%; mask-size: 260% 100%; }
.apercu .description > p:nth-child(2) { animation-delay: 140ms; }
.apercu .description > p:nth-child(3) { animation-delay: 280ms; }
.apercu .description > p:nth-child(4) { animation-delay: 420ms; }
.apercu .description > p:nth-child(n+5) { animation-delay: 560ms; }
@keyframes ecrit { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: .2; } to { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: 1; } }

/* Sélecteur de thème */
.theme { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--ligne); background: var(--surface); color: var(--texte-2); cursor: pointer; transition: border-color var(--vite) ease, color var(--vite) ease; }
.theme:hover { border-color: var(--iris); color: var(--iris); }
.theme svg { width: 17px; height: 17px; }
.theme .ico-soleil, .theme .ico-lune, .theme .ico-auto { display: none; }
:root:not([data-theme]) .theme .ico-auto, :root[data-theme="light"] .theme .ico-soleil, :root[data-theme="dark"] .theme .ico-lune { display: block; }

/* Attente : la sphère au centre, qui tourne plus vite pendant le travail */
.attente-carte { align-items: center; text-align: center; }
.attente-orbe { --t: 84px; margin: 4px 0 6px; }
.attente-titre { justify-content: center; }
.attente-titre::before { display: none; }
.attente-alerte { align-items: center; }

/* Surfaces pleines là où la transparence gênerait */
select option, #bulle { background-color: var(--surface-pleine); }
#bulle { background: var(--encre); }
.onglets a[aria-current="page"] { background: var(--surface-pleine); }
.bascule input:checked + label { background: var(--surface-pleine); }

/* ================= Brique 13 : Bureau, Créer, Documents, Assistant ================= */
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.encart-info { background: var(--iris-voile); border: 1px solid var(--iris-trait); color: var(--texte); margin-top: 18px; }

/* Bureau : deux piles, « À reprendre » puis « Prêts » */
.pile { margin-top: 34px; }
.pile-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pile-tete h2 { font-size: 1.15rem; display: inline-flex; align-items: center; gap: 10px; }
.pastille { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pastille-vigilance { background: var(--vigilance); box-shadow: 0 0 0 4px var(--vigilance-voile); }
.pastille-ok { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-voile); }
.lien-voir { color: var(--iris); font-weight: 600; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.lien-voir::after { content: " →"; }
.lien-voir:hover { text-decoration: underline; }
.pile-vide { padding: 18px; border: 1px dashed var(--ligne-forte); border-radius: var(--rayon); }

.liste-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.doc { position: relative; display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 13px 16px; text-decoration: none; color: var(--texte-2); background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; transition: border-color var(--vite) ease, transform var(--vite) var(--doux), background-color var(--vite) ease; }
.doc:hover { border-color: var(--ligne-forte); transform: translateX(2px); color: var(--texte-2); }
.doc-alerte { border-left: 3px solid var(--vigilance); padding-left: 14px; }
.doc-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-titre { color: var(--texte); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-raison { font-size: .84rem; color: var(--discret); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-alerte .doc-raison { color: var(--vigilance); }
@media (max-width: 640px) {
  .doc { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .doc .recent-genre { grid-column: 1 / -1; }
  .doc-raison { white-space: normal; }
}

/* Téléphone : les trois raccourcis deviennent trois tuiles, pour que « À reprendre » arrive vite sous le pouce. */
@media (max-width: 640px) {
  .page-tableau .outils { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
  .page-tableau .outil { padding: 14px 12px 12px; gap: 4px; }
  .page-tableau .outil p, .page-tableau .outil-action, .page-tableau .outil-icone { display: none; }
  .page-tableau .outil h2 { font-size: .8rem; line-height: 1.25; }
  .page-tableau .outil-compte { font-size: 1.7rem; }
  .page-tableau .accueil-hero { padding-bottom: 20px; }
  .page-tableau .hero-orbe { display: none; }
}

/* Créer : trois portes, mêmes trois étapes */
.portes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 26px; }
.porte { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--rayon); border: 1px solid transparent; box-shadow: var(--ombre);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(140deg, var(--bord-1), var(--ligne) 30%, var(--ligne) 70%, var(--bord-2)) border-box; }
.porte h2 { font-size: 1.15rem; }
.porte .bouton { margin-top: auto; align-self: flex-start; }
.porte .essai { align-self: flex-start; font-size: .84rem; }
.etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--texte-2); font-size: .92rem; }
.etapes li::before { content: counter(etape); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .74rem; font-weight: 600; color: var(--iris); background: var(--iris-voile); box-shadow: inset 0 0 0 1px var(--iris-trait); }
.colonne-guide { gap: 14px; }
.colonne-guide .lien-voir { margin-top: 4px; }

/* Documents : filtres en puces, recherche, sélection */
.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 24px 0 16px; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puces a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ligne); background: var(--surface); color: var(--texte-2); text-decoration: none; font-size: .86rem; font-weight: 500; min-height: 34px; transition: border-color var(--vite) ease, color var(--vite) ease; }
.puces a:hover { border-color: var(--ligne-forte); color: var(--texte); }
.puces a > span:last-child:not(.pastille) { color: var(--discret); font-variant-numeric: tabular-nums; font-size: .8rem; }
.puces a[aria-current="true"] { border-color: var(--iris); color: var(--iris); background: var(--iris-voile); }
.puces .pastille { width: 7px; height: 7px; box-shadow: none; }
.recherche { flex: 1 1 220px; display: block; }
.recherche input { width: 100%; min-height: 40px; padding: 8px 14px 8px 36px; border-radius: 999px; border: 1px solid var(--ligne-forte); background: var(--surface) no-repeat 13px 50% / 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6474' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); color: var(--texte); font-size: .92rem; }
.recherche input:focus { outline: 2px solid var(--iris); outline-offset: 1px; }
.selection-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 10px; }
.ligne-doc { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 4px; }
.case-doc { display: grid; place-items: center; min-height: 44px; cursor: pointer; }
.case-doc input { width: 18px; height: 18px; accent-color: var(--iris); margin: 0; }
.ligne-doc:has(input:checked) .doc { border-color: var(--iris); background: var(--iris-voile); }

/* Onglet Assistant dans le menu */
.onglet-assistant { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 500; font-size: .9rem; color: var(--discret); background: none; border: 0; padding: 6px 13px; border-radius: 9px; cursor: pointer; white-space: nowrap; transition: color var(--vite) ease; }
.onglet-assistant:hover, .onglet-assistant[aria-expanded="true"] { color: var(--iris); }
.onglet-assistant .orbe { --t: 14px; }
@media (max-width: 860px) {
  .onglet-assistant { justify-content: center; gap: 5px; font-size: .76rem; line-height: 1.2; min-height: 48px; padding: 6px 4px; }
  .onglet-assistant .orbe { --t: 11px; }
}

/* Le tiroir de l'assistant */
.assistant { position: fixed; z-index: 40; right: 16px; bottom: 16px; width: min(400px, calc(100vw - 32px)); height: min(600px, calc(100vh - 100px)); display: flex; flex-direction: column; border-radius: 18px; border: 1px solid transparent; overflow: hidden;
  background: linear-gradient(var(--surface-pleine), var(--surface-pleine)) padding-box, linear-gradient(150deg, var(--bord-1), var(--ligne) 35%, var(--ligne) 70%, var(--bord-2)) border-box;
  box-shadow: 0 24px 60px -20px rgba(11, 13, 18, .35), 0 0 0 1px rgba(0, 0, 0, .02); animation: tiroir 260ms var(--doux) both; }
.assistant[hidden] { display: none; }
@keyframes tiroir { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.assistant-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 14px 12px 16px; border-bottom: 1px solid var(--ligne); }
.assistant-tete .orbe { --t: 30px; }
.assistant-tete h2 { font-size: 1rem; }
.assistant-tete p { font-size: .76rem; color: var(--discret); line-height: 1.35; }
.assistant-fermer { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--ligne); background: var(--surface); color: var(--texte-2); cursor: pointer; }
.assistant-fermer:hover { color: var(--texte); border-color: var(--ligne-forte); }
.assistant-fermer svg { width: 16px; height: 16px; }
.assistant-fil { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.message { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: .92rem; line-height: 1.5; white-space: pre-line; animation: entree 260ms var(--doux) both; }
.message-ia { align-self: flex-start; background: var(--surface-2); color: var(--texte); border-bottom-left-radius: 5px; }
.message-agent { align-self: flex-end; background: var(--encre); color: var(--encre-texte); border-bottom-right-radius: 5px; }
.message-note { display: block; margin-top: 6px; font-size: .78rem; color: var(--vigilance); }
.message-detail { display: block; margin-top: 6px; font-size: .72rem; color: var(--discret); }
.message-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.message-actions a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: .84rem; font-weight: 600; text-decoration: none; color: var(--iris); background: var(--surface-pleine); border: 1px solid var(--iris-trait); }
.message-actions a::after { content: "→"; }
.message-actions a:hover { border-color: var(--iris); }
.message-attente { display: inline-flex; gap: 5px; align-items: center; }
.message-attente span { width: 6px; height: 6px; border-radius: 50%; background: var(--iris); animation: point 1s ease-in-out infinite; }
.message-attente span:nth-child(2) { animation-delay: .15s; }
.message-attente span:nth-child(3) { animation-delay: .3s; }
@keyframes point { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.assistant-suggestions[hidden] { display: none; }
.assistant-suggestions { display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; scrollbar-width: none; }
.assistant-suggestions button { flex: none; font: inherit; font-size: .8rem; padding: 6px 11px; border-radius: 999px; border: 1px dashed var(--ligne-forte); background: none; color: var(--texte-2); cursor: pointer; }
.assistant-suggestions button:hover { border-style: solid; border-color: var(--iris); color: var(--iris); }
.assistant-saisie { display: flex; gap: 8px; padding: 12px 14px 6px; border-top: 1px solid var(--ligne); }
.assistant-saisie input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--ligne-forte); background: var(--surface); color: var(--texte); font-size: .95rem; }
.assistant-saisie input:focus { outline: 2px solid var(--iris); outline-offset: 1px; }
.assistant-saisie .bouton { padding: 8px 14px; }
.assistant-quota { padding: 0 16px 10px; font-size: .72rem; color: var(--discret); min-height: 1em; }
.assistant-ouvert .assistant-tete .orbe::before { animation-duration: 6s; }
.assistant.reflechit .assistant-tete .orbe::before { animation-duration: 1.6s; }
@media (max-width: 860px) {
  .assistant { left: 0; right: 0; bottom: 0; width: auto; height: min(78vh, 640px); border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); }
}

/* ================= Brique 14 : le dossier du bien =================
   Couleurs d'état, toujours les mêmes : gris = pas encore, encre = en cours, vert = prêt, orange = à reprendre.
   L'iris reste réservé à l'IA : le dossier est tenu par le programme. */
.pastille-bien { background: var(--texte); box-shadow: 0 0 0 4px var(--points); }
.chip-etape { display: inline-flex; align-items: center; flex: none; font-size: .72rem; font-weight: 600; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--ligne-forte); color: var(--texte-2); background: var(--surface); white-space: nowrap; }
.chip-compromis { color: var(--calcul); border-color: color-mix(in srgb, var(--calcul) 45%, transparent); background: var(--calcul-voile); }
.chip-vendu { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-voile); }

/* Cartes des dossiers (Bureau, Vos biens) */
.grille-biens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.carte-bien { position: relative; height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; text-decoration: none; color: var(--texte-2); border-radius: var(--rayon); border: 1px solid transparent; box-shadow: var(--ombre);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(140deg, var(--ligne-forte), var(--ligne) 40%, var(--ligne) 70%, var(--ligne-forte)) border-box;
  transition: transform var(--vite) var(--doux), box-shadow var(--vite) ease; }
.carte-bien:hover { transform: translateY(-2px); color: var(--texte-2); box-shadow: 0 0 0 1px var(--ligne-forte), var(--ombre); }
.carte-bien-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.carte-bien-nom { color: var(--texte); font-family: var(--titre); font-weight: 600; font-size: 1.05rem; line-height: 1.25; letter-spacing: -0.015em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.carte-bien-tete .chip-etape { margin-top: 1px; }
.mini-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.mini { height: 4px; border-radius: 4px; background: var(--ligne-forte); }
.mini-cours { background: var(--texte); }
.mini-pret { background: var(--ok); }
.mini-reprendre { background: var(--vigilance); }
.carte-bien-suite { color: var(--texte); font-weight: 500; font-size: .92rem; line-height: 1.4; }
.carte-alerte .carte-bien-suite { color: var(--vigilance); }
.carte-bien-compte { color: var(--discret); font-size: .8rem; margin-top: auto; font-variant-numeric: tabular-nums; }

/* La page du dossier */
.dossier { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.dossier > * { animation: entree 420ms var(--doux) both; }
.dossier > :nth-child(n+3) { animation-delay: 60ms; }
.dossier > :nth-child(n+5) { animation-delay: 120ms; }
.dossier .encart-info, .encart-dossier { margin-top: 0; }
.dossier-tete { display: flex; flex-direction: column; gap: 10px; }

/* Le rail : les quatre étapes de la vente */
.rail { list-style: none; margin: 0; padding: 6px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); }
.rail-etape { position: relative; min-width: 0; }
.rail-etape > a { display: flex; flex-direction: column; gap: 9px; padding: 12px; border-radius: 10px; text-decoration: none; color: inherit; height: 100%; transition: background-color var(--vite) ease; }
.rail-etape > a:hover { background: var(--surface-2); }
.rail-etape:not(:last-child)::after { content: ""; position: absolute; top: 26px; left: 50px; right: 2px; height: 2px; border-radius: 2px; background: var(--ligne); pointer-events: none; }
.rail-pret:not(:last-child)::after { background: color-mix(in srgb, var(--ok) 55%, var(--ligne)); }
.rail-actuelle > a { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--ligne-forte); }
.rail-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rail-nom { color: var(--texte); font-weight: 600; font-size: .9rem; line-height: 1.25; }
.rail-etat { font-size: .8rem; color: var(--discret); line-height: 1.35; }
.rail-reprendre .rail-etat { color: var(--vigilance); font-weight: 500; }
.rail-pret .rail-etat { color: var(--ok); }
.rail-cours .rail-etat { color: var(--texte-2); }
.rail-point, .etape-num { position: relative; z-index: 1; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--discret); background: var(--surface-pleine); border: 1.5px dashed var(--ligne-forte); }
.rail-point svg, .etape-num svg { width: 15px; height: 15px; }
.rail-cours .rail-point, .etape-num.rail-cours { background: var(--texte); color: var(--surface-pleine); border: 0; }
.rail-pret .rail-point, .etape-num.rail-pret { background: var(--ok); color: var(--surface-pleine); border: 0; }
.rail-reprendre .rail-point, .etape-num.rail-reprendre { background: var(--vigilance); color: var(--surface-pleine); border: 0; }
.rail-actuelle .rail-point { box-shadow: 0 0 0 4px var(--points); }
@media (max-width: 640px) {
  .rail { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail-etape > a { flex-direction: row; align-items: center; gap: 12px; padding: 9px 10px; }
  .rail-etape:not(:last-child)::after { top: 38px; bottom: -8px; left: 23px; right: auto; width: 2px; height: auto; }
}

/* La prochaine action */
.suite { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 20px 22px; border-radius: var(--rayon); border: 1px solid transparent; box-shadow: var(--ombre);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, var(--texte), var(--ligne) 35%, var(--ligne) 75%, var(--ligne-forte)) border-box; }
.suite-alerte { background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, var(--vigilance), var(--ligne) 35%, var(--ligne) 75%, var(--ligne-forte)) border-box; }
.suite-texte { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 320px; }
.suite-sur { font-size: .74rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--discret); }
.suite-alerte .suite-sur { color: var(--vigilance); }
.suite h2 { font-size: 1.25rem; }
.suite-texte > p:last-child { color: var(--texte-2); font-size: .93rem; max-width: 62ch; }

/* Les quatre sections */
.etape-dossier { scroll-margin-top: 84px; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); }
.etape-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--ligne); }
.etape-tete h2 { font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.etape-tete p { color: var(--discret); font-size: .86rem; margin-top: 2px; }
.etape-etat { font-size: .78rem; font-weight: 600; color: var(--discret); white-space: nowrap; }
.etape-etat.rail-reprendre { color: var(--vigilance); }
.etape-etat.rail-pret { color: var(--ok); }
.etape-etat.rail-cours { color: var(--texte); }
.etape-corps { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.etape-corps h3 { margin: 4px 0 -2px; display: flex; align-items: center; gap: 8px; }
.etape-corps > p:not(.vide):not(.indice) { color: var(--texte-2); }
@media (max-width: 600px) {
  .etape-tete { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; }
  .etape-etat { grid-column: 2; }
  .etape-corps { padding: 14px 16px 16px; }
}
.actions-etape { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 2px 0 0; }
.actions-etape form { margin: 0; }
.versions summary { font-size: .86rem; }
.versions .liste-docs { margin-top: 8px; }

/* Les outils qui arrivent : visibles à leur place, jamais cliquables */
.bientot { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--ligne-forte); display: flex; flex-direction: column; gap: 8px; }
.bientot li { display: flex; align-items: baseline; gap: 10px; color: var(--discret); font-size: .86rem; line-height: 1.45; }
.bientot strong { color: var(--texte-2); font-weight: 600; }
.badge-bientot { flex: none; margin-left: 0; color: var(--discret); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--ligne-forte); }

/* Suivi vendeur : les repères comptés par le programme */
.chiffres { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.chiffres > div { background: var(--surface-2); border: 1px solid var(--ligne); border-radius: var(--rayon-petit); padding: 10px 14px; }
.chiffres dt { font-size: .78rem; color: var(--discret); display: flex; align-items: center; gap: 6px; }
.chiffres dd { margin: 2px 0 0; font-family: var(--titre); font-size: 1.55rem; font-weight: 600; letter-spacing: -0.03em; color: var(--texte); font-variant-numeric: tabular-nums; }
.faits .interet strong { margin-left: 2px; font-variant-numeric: tabular-nums; }

/* Pied du dossier, petits formulaires */
.dossier-pied { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding-top: 4px; }
.dossier-pied form { margin: 0; }
.petit-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-width: 520px; }
.petit-form-ligne { display: flex; gap: 8px; }
.petit-form-ligne input { flex: 1; min-width: 0; }
.biens-pied { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 28px; }
.filtres-biens { margin: 22px 0 14px; }

/* « Dossier du bien » sur la page d'un document, et dans le formulaire d'annonce */
.ranger { border-top: 1px solid var(--ligne); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.ranger h2 { font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.ranger-lien { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: var(--rayon-petit); background: var(--surface); color: var(--texte); text-decoration: none; transition: border-color var(--vite) ease; }
.ranger-lien:hover { border-color: var(--ligne-forte); color: var(--texte); }
.ranger-nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranger-nom::after { content: " →"; color: var(--discret); }
.ranger-form { display: flex; gap: 8px; }
.ranger-changer summary { cursor: pointer; font-size: .84rem; color: var(--discret); font-weight: 500; }
.ranger-changer summary:hover { color: var(--texte); }
.ranger-changer .ranger-form { margin-top: 8px; }
.ranger-form select { flex: 1; min-width: 0; }
.ranger-form .bouton { min-height: 42px; padding: 8px 14px; }
.champ-dossier { flex: 1 1 100%; max-width: 440px; }

/* ================= Brique 15 : déposer un fichier =================
   La lecture se fait sur le serveur, sans IA : couleurs neutres (encre), l'iris reste à l'IA. */
.depot { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.depot-zone { font-size: 1rem; font-weight: 400; color: var(--texte-2); position: relative; display: flex; align-items: center; gap: 16px; padding: 22px 22px; border-radius: var(--rayon); border: 1.5px dashed var(--ligne-forte); background: var(--surface); cursor: pointer; transition: border-color var(--vite) ease, background-color var(--vite) ease, transform var(--vite) var(--doux); }
.depot-zone:hover { border-color: var(--texte-2); }
.depot-survol { border-style: solid; border-color: var(--texte); background: var(--surface-2); transform: scale(1.005); }
.depot:focus-within .depot-zone { outline: 2px solid var(--iris); outline-offset: 3px; }
.depot-icone { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--texte); background: var(--surface-2); border: 1px solid var(--ligne); }
.depot-icone svg { width: 22px; height: 22px; }
.depot-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.depot-titre { color: var(--texte); font-weight: 600; font-size: 1rem; }
.depot-sous { color: var(--texte-2); font-size: .9rem; }
.depot-choisir { color: var(--iris); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.depot-formats { color: var(--discret); font-size: .8rem; }
.depot-fichier { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.depot-pied { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.depot-pied:has(.depot-etat:empty) { display: none; }
.depot:not(.depot-js) .depot-pied { display: flex; }
.depot-js .depot-envoyer { display: none; }
.depot-compacte .depot-zone { padding: 14px 16px; gap: 12px; }
.depot-compacte .depot-icone { width: 36px; height: 36px; border-radius: 10px; }
.depot-compacte .depot-icone svg { width: 18px; height: 18px; }
.depot-compacte .depot-titre { font-size: .95rem; }
.depot-compacte .depot-sous { font-size: .85rem; }
.depot-accueil { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.depot-accueil .depot-zone { padding: 28px 26px; }
.depot-essais { margin-top: 0; }
.etape-corps .depot { margin-top: 4px; }
@media (max-width: 600px) {
  .depot-zone { padding: 16px; gap: 12px; align-items: flex-start; }
  .depot-accueil .depot-zone { padding: 18px 16px; }
}

/* Ce qui a été lu */
.encart-depot { background: var(--surface); border: 1px solid var(--ligne-forte); color: var(--texte); gap: 8px; margin-top: 0; }
.encart-depot p { color: var(--texte-2); font-size: .92rem; }
.encart-depot p strong { color: var(--texte); }
.encart-depot ul { margin: 0; padding-left: 18px; color: var(--texte-2); font-size: .9rem; }
.encart-depot-ocr { border-color: color-mix(in srgb, var(--vigilance) 40%, var(--ligne)); }
.depot-alerte { color: var(--vigilance) !important; font-weight: 500; }
.depot-changer { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 2px 0 0; }
.lien-action { font: inherit; font-size: .86rem; font-weight: 600; color: var(--iris); background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lien-action:hover { color: var(--iris-fort); }
.mise-en-page .encart-depot, .colonne-principale > .encart-attention { margin-top: 0; }

/* ================= Brique 17 : ◆ Diamant et étude de marché ================= */
:root { --serie-1: #2a78d6; --serie-2: #1baf7a; }
:root[data-theme="dark"] { --serie-1: #3987e5; --serie-2: #199e70; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --serie-1: #3987e5; --serie-2: #199e70; } }

/* La marque Diamant : la couche avancée, signalée par un losange */
.diamant { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; letter-spacing: 0; text-transform: none;
  padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; color: var(--texte);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, var(--bord-1), var(--bord-2)) border-box; }
.bouton-diamant::before { content: "◆"; color: var(--iris); font-size: .85em; }
.diamant-zone { margin-top: 34px; }
.diamant-zone .pile-tete { flex-direction: column; align-items: flex-start; gap: 4px; }
.diamant-zone .pile-tete p { color: var(--discret); font-size: .92rem; }
.diamant-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.diamant-carte { position: relative; height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--rayon); text-decoration: none; color: var(--texte-2);
  border: 1px solid transparent; box-shadow: var(--ombre); transition: transform var(--vite) var(--doux);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(140deg, var(--bord-1), var(--ligne) 35%, var(--ligne) 70%, var(--bord-2)) border-box; }
a.diamant-carte:hover { transform: translateY(-2px); color: var(--texte-2); }
.diamant-carte h3 { margin: 0; text-transform: none; letter-spacing: -0.01em; font-size: 1.02rem; color: var(--texte); font-family: var(--titre); }
.diamant-carte p { font-size: .9rem; color: var(--discret); flex: 1; }
.diamant-carte .outil-action { margin-top: 2px; }
.diamant-bientot { background: var(--surface-2); border: 1px dashed var(--ligne-forte); box-shadow: none; }
.diamant-bientot .badge-bientot { align-self: flex-start; }

/* La page de l'étude */
.marche { display: flex; flex-direction: column; gap: 20px; }
.marche > * { animation: entree 420ms var(--doux) both; }
.marche .encart-info, .marche .encart-attention { margin-top: 0; }
.marche code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .9em; background: var(--surface-2); border: 1px solid var(--ligne); border-radius: 6px; padding: 1px 6px; }
.estimation { font-size: clamp(1.5rem, 3vw, 2rem); }
.perimetre { line-height: 1.5; }
.limites-marche { margin: 0; }

/* La courbe : deux traits de 2 px, points cerclés de la couleur du fond, grille fine, axe unique */
.courbe-carte .apercu-tete-compacte { gap: 8px; }
.legende-courbe { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .86rem; color: var(--texte-2); }
.legende-courbe li { display: inline-flex; align-items: center; gap: 8px; }
.cle-ligne { display: inline-block; width: 16px; height: 2px; border-radius: 2px; flex: none; }
.cle-ligne.serie-1 { background: var(--serie-1); }
.cle-ligne.serie-2 { background: var(--serie-2); }
.courbe { position: relative; margin: 0; padding: 12px 18px 6px 8px; }
.courbe-svg { display: block; width: 100%; height: auto; overflow: visible; outline-offset: 4px; touch-action: pan-y; }
.courbe-svg .grille { stroke: var(--ligne); stroke-width: 1; }
.courbe-svg .axe { fill: var(--discret); font-size: 13px; font-family: var(--police); font-variant-numeric: tabular-nums; }
.courbe-svg .fin { fill: var(--texte-2); font-size: 13px; font-weight: 600; font-family: var(--police); font-variant-numeric: tabular-nums; }
.courbe-svg .trace { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.courbe-svg .trace.serie-1 { stroke: var(--serie-1); }
.courbe-svg .trace.serie-2 { stroke: var(--serie-2); }
.courbe-svg .point { stroke: var(--surface-pleine); stroke-width: 2; }
.courbe-svg .point.serie-1 { fill: var(--serie-1); }
.courbe-svg .point.serie-2 { fill: var(--serie-2); }
.courbe-svg .viseur { stroke: var(--discret); stroke-width: 1; opacity: 0; pointer-events: none; }
.courbe-svg.survol .viseur { opacity: .7; }
.courbe-bulle { position: absolute; top: 8px; z-index: 2; min-width: 190px; padding: 10px 12px; border-radius: 10px; pointer-events: none;
  background: var(--surface-pleine); border: 1px solid var(--ligne-forte); box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .4); font-size: .82rem; color: var(--texte-2); }
.bulle-titre { display: block; color: var(--texte); font-size: .8rem; margin-bottom: 6px; }
.bulle-ligne { display: grid; grid-template-columns: 16px auto minmax(0, 1fr); align-items: center; gap: 8px; }
.bulle-ligne strong { color: var(--texte); font-variant-numeric: tabular-nums; }
.bulle-ligne + .bulle-ligne { margin-top: 4px; }
.courbe-tableau { padding: 0 22px 18px; }

/* Tableaux de valeurs */
.tableau-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.marche table, .pour-agent table { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.marche th, .marche td, .pour-agent th, .pour-agent td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--ligne); white-space: nowrap; }
.marche thead th, .pour-agent thead th { color: var(--discret); font-weight: 600; font-size: .78rem; letter-spacing: .03em; }
.marche tbody th { font-weight: 500; color: var(--texte-2); }
.table-ventes td { color: var(--texte-2); }
.table-ventes td strong { color: var(--texte); }
.table-ventes { margin: 0 0 6px; }
.table-ventes th:first-child, .table-ventes td:first-child { padding-left: 28px; }
@media (max-width: 600px) { .table-ventes th:first-child, .table-ventes td:first-child { padding-left: 18px; } .courbe { padding: 10px 8px 4px 0; } }
/* Téléphone : la courbe garde une taille lisible et défile de côté plutôt que de rapetisser ses textes. */
@media (max-width: 760px) { .courbe { overflow-x: auto; -webkit-overflow-scrolling: touch; } .courbe-svg { min-width: 680px; } }

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

/* ---------- Brique 18 : onglet ◆ Marché, avis de valeur ---------- */
.onglet-diamant .diamant-signe { color: var(--iris); font-size: .78em; margin-right: 6px; }
@media (max-width: 860px) {
  .onglets { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding-left: 4px; padding-right: 4px; }
  .onglets a.onglet-diamant { grid-auto-flow: column; justify-content: center; align-items: center; gap: 4px; }
  .onglet-diamant .diamant-signe { margin: 0; }
  .onglets .onglet-assistant { flex-direction: column; gap: 3px; padding: 4px 2px; }
}
.genre-avis { color: var(--texte-2); }
.genre-bilan { color: var(--ok); }
.bilan-reco { font-family: var(--titre); font-size: 1.25rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--texte); }
.bilan-nouveau-libelle { margin-top: 10px; }
.bilan-doc .faits { margin: 0; }

/* ---------- Brique 27 : dossier vendeur ---------- */
.liste-pieces { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.liste-pieces .case { align-items: flex-start; font-weight: 400; color: var(--texte); }
.liste-pieces .case input { margin-top: 3px; flex: none; }
.liste-pieces .case > span { display: flex; flex-direction: column; gap: 2px; }
.piece-pourquoi { color: var(--discret); font-size: .88rem; }
.piece-recue strong { color: var(--discret); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ok) 60%, transparent); }
.pieces-resume { margin-bottom: 8px; }
.genre-pieces { color: var(--ok); }

/* ---------- Brique 26 : résumé de copropriété ---------- */
.table-decisions th:first-child { width: 16%; } .table-decisions th:last-child { width: 22%; }
.table-decisions td:nth-child(2) { text-align: left; white-space: normal; color: var(--texte-2); }
.table-decisions td:first-child { color: var(--discret); }
.chip-decision { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid var(--ligne-forte); color: var(--texte-2); }
.decision-adoptee .chip-decision { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--ligne)); }
.decision-rejetee .chip-decision { color: var(--vigilance); border-color: color-mix(in srgb, var(--vigilance) 45%, var(--ligne)); }
.genre-copro { color: var(--calcul); }

/* ---------- Brique 25 : dossier quartier ---------- */
.quartier-encadre { grid-template-columns: minmax(220px, 300px) 1fr; align-items: center; }
.quartier-schema { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.quartier-schema svg { width: 100%; height: auto; border-radius: 50%; background: var(--surface); border: 1px solid var(--ligne); }
.quartier-schema figcaption { font-size: .78rem; color: var(--discret); text-align: center; }
.schema-cercle { fill: none; stroke: var(--ligne-forte); stroke-dasharray: 3 4; }
.schema-texte { fill: var(--discret); font-size: 9px; font-family: inherit; }
.schema-bien { fill: var(--texte); stroke: var(--surface); stroke-width: 3; }
.schema-point, .pastille-schema { fill: var(--discret); background: var(--discret); }
.point-transports { fill: #2a78d6; background: #2a78d6; }
.point-ecoles { fill: #d97706; background: #d97706; }
.point-commerces { fill: #1baf7a; background: #1baf7a; }
.point-sante { fill: #d6336c; background: #d6336c; }
.point-loisirs { fill: #6d6bff; background: #6d6bff; }
.point-services { fill: #8a8f9c; background: #8a8f9c; }
.schema-point { opacity: .9; stroke: var(--surface); stroke-width: 1; }
.quartier-resume { font-size: 1.05rem; color: var(--texte); line-height: 1.5; margin-bottom: 12px; }
.legende-schema { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 14px; }
.legende-schema li { display: flex; align-items: center; gap: 8px; color: var(--texte-2); font-size: .92rem; }
.pastille-schema { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.table-quartier { width: 100%; border-collapse: collapse; font-size: .93rem; table-layout: fixed; }
.table-quartier th:first-child { width: 60%; }
.table-quartier th { text-align: left; font-size: .78rem; color: var(--discret); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--ligne); }
.table-quartier td { padding: 7px 8px; border-bottom: 1px solid var(--ligne); color: var(--texte-2); font-variant-numeric: tabular-nums; }
.table-quartier td:first-child { color: var(--texte); }
.table-quartier td:not(:first-child), .table-quartier th:not(:first-child) { text-align: right; white-space: nowrap; }
.quartier-genre { color: var(--discret); }
.quartier-lignes { font-size: .85em; color: var(--discret); white-space: normal; }
.quartier-lignes::before { content: "· "; }
.quartier-doc .table-quartier { break-inside: auto; }
@media (max-width: 760px) { .quartier-encadre { grid-template-columns: 1fr; } .quartier-schema { max-width: 280px; margin: 0 auto; } }

/* ---------- Brique 24 : vérifications officielles ---------- */
.verifications { margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--ligne); display: flex; flex-direction: column; gap: 12px; }
.verifications h2 { font-size: 1rem; display: flex; align-items: center; gap: 6px; }
.verifications .diamant-signe { color: var(--iris); font-size: .8em; }
.verifications .petit-form-ligne input { font-family: var(--mono, ui-monospace, monospace); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Brique 23 : profil d'agence ---------- */
.agence-apercu { white-space: pre-line; }
.tons .case span small { display: block; color: var(--discret); font-size: .84rem; }

/* ---------- Brique 22 : pack réseaux sociaux ---------- */
.reseaux-tete { gap: 10px; }
.reseaux-tete .bouton { align-self: flex-start; }
.reseaux-source { font-size: clamp(1.1rem, 2vw, 1.4rem); }
.reseau { margin-top: 18px; }
.reseaux-formulaire input[type=file] { width: 100%; padding: 14px; border: 1.5px dashed var(--ligne-forte); border-radius: var(--rayon-petit);
  background: var(--surface-2); color: var(--texte-2); font-size: .92rem; cursor: pointer; }
.reseaux-formulaire input[type=file]:hover, .reseaux-formulaire input[type=file]:focus-visible { border-color: var(--iris); outline: none; }
.reseaux-formulaire input[type=file]::file-selector-button { margin-right: 14px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--ligne-forte);
  background: var(--surface); color: var(--texte); font: inherit; font-weight: 600; cursor: pointer; }
.carrousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 12px; overflow-x: auto; padding: 18px 22px 6px;
  scroll-snap-type: x mandatory; }
.carrousel-image { margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; }
.carrousel-image img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: var(--rayon-petit); border: 1px solid var(--ligne); background: var(--surface-2); }
.carrousel-image figcaption { font-size: .82rem; }
.texte-publication { white-space: pre-wrap; overflow-wrap: anywhere; padding: 14px 16px; border-radius: var(--rayon-petit); background: var(--surface-2);
  border: 1px solid var(--ligne); color: var(--texte-2); line-height: 1.55; font-size: .95rem; }
.reel { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 10px; }
.reel li { display: flex; flex-direction: column; gap: 2px; color: var(--texte-2); }
.reel li strong { color: var(--texte); }
.reseau .apercu-corps h3 { margin-top: 6px; }
@media (max-width: 760px) {
  .carrousel { grid-auto-columns: 62%; padding-left: 16px; padding-right: 16px; }
}
.genre-avis::before { content: "◆ "; color: var(--iris); }

fieldset.champ { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.champ legend { padding: 0; margin-bottom: 8px; }
.cases-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 18px; }
.cases-grille .case { color: var(--texte); font-weight: 400; align-items: flex-start; }
.cases-grille .case input { margin-top: 2px; flex: none; }
.avis-formulaire .resultat-marche details.source { margin-top: 0; }
.avis-formulaire .resultat-marche details.source .fiche { margin-top: 14px; }

.avis-doc { color: var(--texte); }
.avis-tete { padding: 30px 32px 20px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--ligne); }
.avis-sur { font-size: .78rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--iris); }
.avis-tete h1 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.avis-date { color: var(--discret); font-size: .92rem; }
.avis-encadre { padding: 22px 32px; display: grid; grid-template-columns: minmax(200px, .8fr) 2fr; gap: 18px; align-items: stretch; border-bottom: 1px solid var(--ligne); background: var(--surface-2); }
.avis-prix { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 18px; border-radius: var(--rayon-petit); background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 35%, var(--ligne)); }
.avis-prix-libelle { font-size: .8rem; color: var(--discret); }
.avis-prix strong { font-family: var(--titre); font-size: 2rem; letter-spacing: -0.03em; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--texte); line-height: 1.1; }
.avis-prix-nature { font-size: .84rem; color: var(--texte-2); }
.avis-chiffres { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.avis-chiffres > div { background: var(--surface); }
.avis-chiffres dd { font-size: 1.15rem; }
.avis-corps { padding: 26px 32px 8px; display: flex; flex-direction: column; gap: 14px; max-width: 78ch; }
.avis-corps h2 { margin-top: 12px; }
.avis-corps h3 { font-size: .95rem; margin-top: 4px; }
.avis-corps p { color: var(--texte-2); line-height: 1.62; }
.avis-corps .courbe { padding: 4px 0; }
.avis-methode { font-size: .86rem; color: var(--discret) !important; }
.avis-mentions { margin: 18px 32px 28px; padding-top: 16px; border-top: 1px solid var(--ligne); display: flex; flex-direction: column; gap: 8px; font-size: .82rem; color: var(--discret); line-height: 1.5; }
.avis-signature { margin-top: 8px; font-weight: 600; color: var(--texte); font-size: .95rem; }
.avis-signature-lignes { white-space: pre-line; color: var(--texte-2); font-size: .88rem; margin-top: -4px; }
.avis-actions { border: 1px solid var(--ligne); border-radius: var(--rayon); margin-top: 14px; }
.pour-agent { margin-top: 20px; border-style: dashed; }
.colonne-controles > .bouton-diamant { margin: 4px 0 14px; }
@media (max-width: 760px) {
  .avis-encadre { grid-template-columns: 1fr; padding: 18px; }
  .avis-tete, .avis-corps { padding-left: 18px; padding-right: 18px; }
  .avis-mentions { margin-left: 18px; margin-right: 18px; }
}

/* Impression (ou « Enregistrer au format PDF ») : le document seul, en clair, quel que soit le thème choisi. */
@media print {
  @page { size: A4; margin: 16mm 14mm; }
  html, body { background: #fff !important; }
  body { padding: 0 !important; }
  .aurore, .barre, .pied, .assistant, .pas-imprime, .encart { display: none !important; }
  .page { max-width: none; padding: 0; }
  .mise-en-page { display: block; }
  .avis-doc {
    --texte: #0B0D12; --texte-2: #343B49; --discret: #5B6474; --ligne: #D9DDE3; --surface: #FFFFFF; --surface-2: #F4F5F8;
    --surface-pleine: #FFFFFF; --iris: #86672C; --ok: #2D6E45; --vigilance: #B4420A; --serie-1: #2a78d6; --serie-2: #1baf7a;
    border: 0; box-shadow: none; border-radius: 0; background: #fff; color: #0B0D12;
  }
  .avis-doc * { animation: none !important; }
  .avis-encadre { break-inside: avoid; }
  .avis-corps { max-width: none; }
  .avis-corps h2, .avis-corps h3 { break-after: avoid; }
  .avis-doc .courbe { break-inside: avoid; }
  .avis-doc .courbe-svg { overflow: visible; }
  .avis-doc .viseur, .avis-doc .courbe-bulle { display: none !important; }
  .avis-mentions { break-inside: avoid; }
}

/* ---------- Brique 19 : réglages de l'étude de marché, ventes triables ---------- */
.reglages-recherche .bloc-champs { gap: 16px; }
.reglages { align-items: end; }
.curseur-double { display: flex; flex-direction: column; gap: 4px; }
.curseur-valeurs { margin: 0; font-weight: 600; color: var(--texte); font-variant-numeric: tabular-nums; }
.curseur-valeurs output { font: inherit; }
.curseur-pistes { position: relative; height: 30px; }
.curseur-pistes::before { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--ligne-forte); }
.curseur-pistes input[type=range] { position: absolute; inset: 0; width: 100%; height: 30px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none;
  pointer-events: none; -webkit-appearance: none; appearance: none; }
.curseur-pistes input[type=range]::-webkit-slider-runnable-track { background: none; height: 30px; }
.curseur-pistes input[type=range]::-moz-range-track { background: none; }
.curseur-pistes input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: 4px;
  border-radius: 50%; background: var(--surface-pleine); border: 2px solid var(--iris); cursor: grab; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.curseur-pistes input[type=range]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-pleine);
  border: 2px solid var(--iris); cursor: grab; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.curseur-pistes input[type=range]:focus { outline: none; box-shadow: none; }
.curseur-pistes input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--iris-voile); }
.curseur-pistes input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px var(--iris-voile); }

.compte-ventes { font-size: .85rem; font-weight: 600; color: var(--discret); background: var(--surface-2); border: 1px solid var(--ligne); border-radius: 999px; padding: 1px 9px; margin-left: 6px; vertical-align: middle; }
.table-ventes th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
.table-ventes th button:hover { color: var(--texte); }
.table-ventes th button:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }
.table-ventes th button::after { content: "↕"; opacity: .35; font-size: .9em; }
.table-ventes th[aria-sort="ascending"] button::after { content: "↑"; opacity: 1; color: var(--iris); }
.table-ventes th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; color: var(--iris); }
.table-ventes td:first-child, .table-ventes th:first-child { width: 1%; }
.table-ventes input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--vigilance); margin: 0; vertical-align: middle; }
.table-ventes tr:has(input[type=checkbox]:checked) td { text-decoration: line-through; color: var(--discret); }
.form-ventes .apercu-pied { border-top: 1px solid var(--ligne); }
.ventes-ecartees { padding: 16px 28px 20px; border-top: 1px solid var(--ligne); display: flex; flex-direction: column; gap: 8px; }
.ventes-ecartees h3 { font-size: .9rem; }
.ventes-ecartees ul { margin: 0; padding-left: 18px; color: var(--discret); font-size: .88rem; display: flex; flex-direction: column; gap: 4px; }

/* « Signaler » : une remarque notée avec la page où l'on se trouve. */
.signaler { display: inline-flex; align-items: center; gap: 6px; color: var(--discret); text-decoration: none; font-size: .9rem; font-weight: 500; white-space: nowrap; }
.signaler svg { width: 16px; height: 16px; }
.signaler:hover { color: var(--vigilance); }
@media (max-width: 860px) { .signaler span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .signaler svg { width: 20px; height: 20px; } }
dialog.remarque { width: min(520px, calc(100vw - 32px)); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 22px; background: var(--surface-pleine); color: var(--texte); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45); }
dialog.remarque::backdrop { background: rgba(7, 8, 12, .45); }
dialog.remarque form { display: flex; flex-direction: column; gap: 12px; }
dialog.remarque textarea { width: 100%; }
.remarque-actions { display: flex; justify-content: flex-end; gap: 10px; }
.encart-remarque { margin: 0 0 18px; }
.liste-remarques { margin: 0; padding: 8px 28px 16px 48px; display: flex; flex-direction: column; gap: 12px; }
.liste-remarques p { margin: 2px 0 0; color: var(--texte); }

/* ---------- Outils rangés par étape (brique 29) ---------- */
.outils-etapes { display: flex; flex-direction: column; gap: 26px; margin-top: 30px; }
.outils-etape { display: flex; flex-direction: column; gap: 12px; }
.outils-etape-tete { display: flex; align-items: center; gap: 12px; }
.outils-etape-tete h2 { font-size: 1.1rem; }
.outils-etape-tete p { color: var(--discret); font-size: .88rem; margin-top: 2px; }
.outils-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.outils-grille > li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.outil-carte { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: var(--rayon); text-decoration: none; color: var(--texte-2);
  background: var(--surface); border: 1px solid var(--ligne); box-shadow: var(--ombre); transition: transform var(--vite) var(--doux), border-color var(--vite) ease; }
a.outil-carte:hover { transform: translateY(-2px); border-color: var(--ligne-forte); color: var(--texte-2); }
.outil-carte h3 { margin: 0; font-size: 1rem; color: var(--texte); font-family: var(--titre); display: flex; align-items: center; gap: 7px; text-transform: none; letter-spacing: -0.01em; }
.outil-carte .diamant-signe { color: var(--iris); font-size: .8em; }
.outil-carte p { font-size: .88rem; color: var(--discret); }
.outils-grille .essai { align-self: flex-start; font-size: .82rem; }
.pour-quel-bien { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; }
.choix-bien { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: .9rem; }
.choix-bien label { color: var(--discret); }
.choix-bien select { max-width: 100%; min-width: 0; }

/* Étapes du bien repliables (brique 29) : seule l'étape en cours est ouverte. */
details.etape-dossier > summary { list-style: none; cursor: pointer; }
details.etape-dossier > summary::-webkit-details-marker { display: none; }
details.etape-dossier:not([open]) > summary { border-bottom: 0; }
details.etape-dossier > summary .etape-etat::after { content: "›"; display: inline-block; margin-left: 10px; color: var(--discret); transition: transform var(--vite) ease; }
details.etape-dossier[open] > summary .etape-etat::after { transform: rotate(90deg); }
details.etape-dossier > summary:focus-visible { outline: 2px solid var(--iris); outline-offset: -2px; border-radius: var(--rayon); }

/* Bureau : nouveau bien (brique 29, à la place des trois compteurs) */
.nouveau-bien { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: center; margin-top: 26px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); }
.nouveau-bien-texte { display: flex; flex-direction: column; gap: 10px; }
.nouveau-bien h2 { font-size: 1.15rem; }
.nouveau-bien p { color: var(--discret); font-size: .92rem; }
.nouveau-bien .depot { margin: 0; }
@media (max-width: 760px) { .nouveau-bien { grid-template-columns: minmax(0, 1fr); padding: 16px; } }
/* Contrôles repliés (brique 29) */
.tous-controles { margin: 10px 0 0; }
.tous-controles > summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--discret); padding: 6px 0; }
.tous-controles > summary:hover { color: var(--texte); }
.tous-controles > .controles { margin-top: 6px; }

/* ---------- ◆ Mode rendez-vous (brique 30) : un écran par idée, lisible sur une tablette ---------- */
.page-presentation .barre, .page-presentation .pied, .page-presentation .aurore, .page-presentation .ligne-ia { display: none; }
.presentation-manque { max-width: 640px; margin: 40px auto; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.presentation { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.presentation:fullscreen { max-width: none; padding: 24px 6vw; background: var(--fond); overflow: auto; }
.presentation-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.presentation-commandes { display: flex; gap: 8px; }
.presentation-compte { color: var(--discret); font-size: .9rem; font-variant-numeric: tabular-nums; }
.diapo { min-height: min(72vh, 680px); display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: clamp(24px, 5vw, 64px);
  background: var(--surface); border: 1px solid var(--ligne); border-radius: calc(var(--rayon) * 1.6); box-shadow: var(--ombre); }
.presentation.js .diapo:not(.diapo-active) { display: none; }
.presentation.js .diapo-active { animation: diapo-entree .35s var(--doux); }
@keyframes diapo-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .presentation.js .diapo-active { animation: none; } }
.diapo-sur { font-size: .85rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--iris); }
.diapo h1 { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.05; }
.diapo h2 { font-size: clamp(2rem, 5.5vw, 3.6rem); line-height: 1.08; font-variant-numeric: tabular-nums; }
.diapo h3 { font-size: 1.05rem; margin-bottom: 8px; }
.diapo-texte { font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.5; color: var(--texte-2); max-width: 46ch; }
.diapo-note { font-size: .9rem; color: var(--discret); max-width: 70ch; }
.diapo-faits { font-size: 1.05rem; }
.diapo-couverture h1 { color: var(--texte); }
.diapo-conseil h2 { color: var(--iris); font-size: clamp(2.6rem, 8vw, 5rem); }
.diapo-nature { font-size: 1.15rem; color: var(--discret); }
.diapo-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 36px; font-size: 1.1rem; }
.diapo-quartier { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 32px; }
.diapo-quartier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.diapo-quartier li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ligne); padding-bottom: 6px; }
.diapo-quartier small { color: var(--discret); }
.diapo-quartier strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.diapo-signature { white-space: pre-line; color: var(--texte-2); }
.diapo .courbe { max-width: min(680px, 100%); }
.diapo .legende-courbe { margin: 0; }
.fourchette { width: 100%; max-width: 980px; height: auto; overflow: visible; }
.fourchette-axe { fill: var(--ligne-forte); }
.fourchette-zone { fill: var(--iris-voile); stroke: var(--iris-trait); stroke-width: 2; }
.fourchette-borne { fill: var(--discret); font-size: 26px; font-variant-numeric: tabular-nums; }
.fourchette-etiquette { fill: var(--texte); font-size: 28px; font-weight: 700; }
.fourchette-etiquette.discret { fill: var(--discret); font-weight: 500; font-size: 24px; }
.repere-prix { stroke: var(--iris); stroke-width: 6; stroke-linecap: round; }
.repere-estimation { stroke: var(--texte-2); stroke-width: 3; stroke-dasharray: 6 6; }
@media print { .presentation .diapo { display: flex !important; break-after: page; min-height: auto; box-shadow: none; } }
.bouton-rdv { align-self: flex-start; margin-top: 4px; }

/* ---------- Offres (brique 31) ---------- */
.table-defile { overflow-x: auto; }
.table-offres { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 720px; }
.table-offres th, .table-offres td { text-align: left; vertical-align: top; padding: 10px 10px; border-bottom: 1px solid var(--ligne); }
.table-offres thead th { font-size: .78rem; color: var(--discret); font-weight: 600; }
.table-offres td { font-variant-numeric: tabular-nums; }
.table-offres small { color: var(--discret); }
.offre-meilleure { background: var(--ok-voile); }
.offre-expiree { opacity: .6; }
.alerte-texte { color: var(--vigilance) !important; font-weight: 600; }
.badge-ok { background: var(--ok-voile); color: var(--ok); }
.offre-statut { font-weight: 600; }
.offre-statut.statut-acceptee { color: var(--ok); }
.offre-statut.statut-refusee { color: var(--discret); }
.offre-statut.statut-attente, .offre-statut.statut-contre { color: var(--vigilance); }
.offre-repondre summary { cursor: pointer; font-size: .85rem; color: var(--iris); margin-top: 4px; }
.offre-form-reponse { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.offre-contre { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .85rem; }
.offre-contre input { width: 110px; }

/* ---------- Cette semaine (brique 32) ---------- */
.pastille-iris { background: var(--iris); }
.liste-taches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tache { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--ligne); border-left: 3px solid var(--ligne-forte); border-radius: var(--rayon-petit); }
.tache-2 { border-left-color: var(--vigilance); }
.tache-1 { border-left-color: var(--iris); }
.tache-bien { font-size: .8rem; font-weight: 600; color: var(--discret); text-transform: none; letter-spacing: 0; }
.tache-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tache-texte span { color: var(--discret); font-size: .88rem; }
.tache-2 .tache-texte strong { color: var(--vigilance); }
@media (max-width: 640px) { .tache { grid-template-columns: minmax(0, 1fr); gap: 6px; } .tache .bouton { justify-self: start; } }
.table-offres td:nth-child(3), .table-offres td:nth-child(4), .table-offres td:nth-child(6) { white-space: nowrap; }
@media (max-width: 640px) {
  .fourchette-etiquette { font-size: 46px; }
  .fourchette-etiquette.discret, .fourchette-borne { font-size: 40px; }
  .fourchette { margin-block: 12px; }
}

/* Brique 32.2 : le prix de l'annonce face à l'avis de valeur (calculé par le programme, pour l'agent seulement) */
.ecart-ligne { margin: 2px 0 0; font-size: .86rem; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; }
.ecart-ligne::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vigilance); flex: none; }
.ecart-ligne a { color: var(--vigilance); text-decoration: none; }
.ecart-ligne a:hover { text-decoration: underline; }
.ecart-ok::before { background: var(--ok); }
.ecart-ok a { color: var(--ok); }
.etape-corps .ecart-prix { margin: 12px 0 4px; }
.ecart-prix p { margin: 0; }

/* Brique 33 : comptes d'essai */
.bandeau-essai { margin: 0 0 14px; padding: 8px 14px; border-radius: var(--rayon-petit); background: var(--calcul-voile); color: var(--texte-2); font-size: .86rem; }
.bandeau-essai strong { color: var(--texte); }
.encart-espace { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.encart-espace form { margin: 0; }
.encart-haut { margin: 0 0 14px; }
.table-comptes { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 880px; margin: 6px 0 18px; }
.table-comptes th, .table-comptes td { text-align: left; vertical-align: middle; padding: 10px; border-bottom: 1px solid var(--ligne); }
.table-comptes thead th { font-size: .78rem; color: var(--discret); font-weight: 600; }
.table-comptes td { font-variant-numeric: tabular-nums; }
.compte-inactif th, .compte-inactif td { color: var(--discret); }
.gestes-compte { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.compte-nouveau .texte-publication { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon-petit); padding: 10px 12px; }

/* ---------- Apo, le guide (brique 34) ----------
   Un petit robot original : tête-écran graphite, yeux de lumière chaude, anneau de laiton comme l'orbite du logo.
   Il flotte doucement et cligne des yeux ; quand l'IA travaille, ses yeux cherchent et son antenne clignote. */
.apo { display: block; overflow: visible; }
.apo .apo-ombre { fill: var(--texte); opacity: .12; transform-box: fill-box; transform-origin: center; }
.apo .apo-tete { fill: var(--apo-corps); stroke: var(--apo-rebord); stroke-width: 1.2; }
.apo .apo-ecran { fill: var(--apo-ecran); stroke: var(--iris-trait); stroke-width: .8; }
.apo .apo-oeil { fill: var(--apo-lueur); }
.apo .apo-bouche { fill: none; stroke: var(--apo-lueur); stroke-width: 1.8; stroke-linecap: round; }
.apo .apo-tige { stroke: var(--apo-corps); stroke-width: 2.4; stroke-linecap: round; }
.apo .apo-ampoule, .apo .apo-oreille, .apo .apo-astre { fill: var(--iris); }
.apo .apo-orbite { fill: none; stroke: var(--iris); stroke-width: 2; stroke-linecap: round; }
.apo .apo-orbite-arriere { opacity: .45; }
.apo .apo-yeux { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .apo .apo-flotte { animation: apo-flotte 4.2s ease-in-out infinite; }
  .apo .apo-ombre { animation: apo-ombre 4.2s ease-in-out infinite; }
  .apo .apo-yeux { animation: apo-cligne 6.5s infinite; }
  .apo .apo-ampoule { animation: apo-ampoule 3s ease-in-out infinite; }
  .ia-travaille .apo .apo-yeux, .apo-attente .apo-yeux { animation: apo-cherche 1.2s ease-in-out infinite; }
  .ia-travaille .apo .apo-ampoule, .apo-attente .apo-ampoule { animation-duration: .7s; }
}
@keyframes apo-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes apo-ombre { 0%, 100% { transform: scaleX(1); opacity: .12; } 50% { transform: scaleX(.82); opacity: .07; } }
@keyframes apo-cligne { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes apo-cherche { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }
@keyframes apo-ampoule { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.guide { position: fixed; right: max(16px, 2vw); bottom: 18px; z-index: 38; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.guide > * { pointer-events: auto; }
.guide-robot { width: 68px; height: 74px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; border-radius: 18px; color: var(--texte); }
.guide-robot .apo { width: 68px; height: 74px; transition: transform 280ms var(--doux); }
.guide-robot:hover .apo { transform: translateY(-2px); }
.guide-robot[aria-expanded="true"] .apo { transform: rotate(-7deg); }
.guide-nouveau .guide-robot::after { content: ""; position: absolute; top: 7px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--iris); box-shadow: 0 0 0 3px var(--fond); }
@media (prefers-reduced-motion: no-preference) {
  .guide-nouveau .guide-robot { animation: apo-saut 900ms var(--doux) 700ms 1 both; }
  .guide-bulle:not([hidden]) { animation: apo-bulle 220ms var(--doux) both; }
}
@keyframes apo-saut { 0%, 100% { transform: none; } 30% { transform: translateY(-10px); } 55% { transform: none; } 75% { transform: translateY(-4px); } }
@keyframes apo-bulle { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.guide-bulle { width: min(340px, calc(100vw - 32px)); margin-right: 10px; background: var(--surface-pleine); border: 1px solid var(--ligne); border-radius: 16px; padding: 16px 18px 12px; position: relative; display: flex; flex-direction: column; gap: 8px; transform-origin: 90% 100%;
  box-shadow: 0 2px 6px rgba(27, 28, 30, .06), 0 28px 56px -28px rgba(27, 28, 30, .40); }
.guide-bulle::after { content: ""; position: absolute; right: 30px; bottom: -7px; width: 12px; height: 12px; background: var(--surface-pleine); border-right: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); transform: rotate(45deg); }
.guide-etape { font-size: .78rem; font-weight: 600; color: var(--iris); }
.guide-titre { font-size: 1rem; }
.guide-texte { font-size: .92rem; color: var(--texte-2); }
.guide-lien { font-size: .9rem; }
.guide-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 14px; margin-top: 4px; }
.guide-actions [data-guide-fermer] { margin-right: auto; }
.guide-actions .bouton { min-height: 36px; padding: 6px 14px; font-size: .88rem; }
.guide-cible { outline: 2px solid var(--iris) !important; outline-offset: 4px; box-shadow: 0 0 0 8px var(--iris-voile) !important; border-radius: 12px; position: relative; z-index: 35; }
.assistant-ouvert .guide, .ia-travaille .guide, .page-presentation .guide, .page-connexion .guide { display: none; }
@media (max-width: 860px) {
  .guide { right: 10px; bottom: calc(80px + env(safe-area-inset-bottom)); }
  .guide-robot, .guide-robot .apo { width: 54px; height: 59px; }
}
@media print { .guide { display: none !important; } }
.apo-attente { width: 92px; height: 99px; margin: 0 auto 6px; }
.apo-assistant { width: 36px; height: 39px; flex: none; }

/* Testeur : son identifiant et la mention « essai » en haut à droite ; sa page « Espace d'essai ». */
.pastille-essai { font-size: .7rem; font-weight: 600; line-height: 1; padding: 3px 7px; border-radius: 999px; background: var(--iris-voile); color: var(--iris); }
.essai-bloc { max-width: 68ch; margin: 22px 0 0; display: flex; flex-direction: column; gap: 6px; }
.essai-bloc ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.essai > p:last-child { margin-top: 24px; }

/* Barre du haut (brique 34) : tient sur une ligne. Sous 1360 px, « Agence » et « Comptes » passent en icônes (leur nom
   reste lu par les lecteurs d'écran et affiché au survol) ; sur téléphone, la déconnexion aussi. */
.deconnexion-icone { display: none; width: 18px; height: 18px; }
@media (max-width: 1360px) {
  .barre .lien-icone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .barre .lien-icone { gap: 0; }
  .barre .statut-ia, .barre .statut-demo { font-size: 0; gap: 0; padding: 8px; }
  .barre-dedans { gap: 16px; }
  .barre-compte { gap: 12px; }
}
@media (max-width: 860px) {
  .barre .deconnexion-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .deconnexion-icone { display: block; }
  .barre .compte-essai > span:not(.pastille-essai) { display: none; }
}

/* Conseils du moment (brique 35) : ce qu'Apo propose selon où en est l'agent. */
.guide-agir { margin: 2px 0 0; }
.guide-agir .bouton { min-height: 38px; padding: 7px 16px; font-size: .9rem; }
.guide-plus { list-style: none; margin: 4px 0 0; padding: 10px 0 0; border-top: 1px solid var(--ligne); display: flex; flex-direction: column; gap: 8px; font-size: .88rem; color: var(--texte-2); }
.guide-plus strong { color: var(--texte); font-weight: 600; }
.guide-plus a { font-weight: 600; white-space: nowrap; }
.guide-plus .guide-urgent strong { color: var(--vigilance); }
.guide-astuce { font-size: .82rem; color: var(--discret); padding-top: 8px; border-top: 1px solid var(--ligne); }
.guide-apercu { max-width: min(260px, calc(100vw - 100px)); margin-right: 14px; padding: 7px 12px; border-radius: 12px 12px 4px 12px; border: 1px solid var(--iris-trait); background: var(--surface-pleine); color: var(--texte); font: inherit; font-size: .84rem; font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer; box-shadow: 0 12px 28px -18px rgba(27, 28, 30, .45); }
.guide-apercu:hover { border-color: var(--iris); }
.guide-apercu-urgent { border-color: color-mix(in srgb, var(--vigilance) 55%, transparent); }
@media (prefers-reduced-motion: no-preference) { .guide-apercu:not([hidden]) { animation: apo-bulle 260ms var(--doux) both; } }