/* ═══════════════════════════════════════════════════════════════════════════
   PASSERELLE 2.0 — le squelette commun à toutes les pages
   ═══════════════════════════════════════════════════════════════════════════

   Design System « KW Passerelle 2.0 » (direction artistique de septembre 2026).
   Ce fichier porte les JETONS et l'ENVELOPPE : barre latérale, barre du haut,
   en-tête de page, zone de contenu. Les composants partagés (boutons, badges,
   cartes, tableaux, champs, états vides, squelettes, toasts) vivent dans
   `ds.css`, chargé en DERNIER par chaque page pour que tout le produit ait la
   même allure, quelle que soit la feuille du module.

   Principes : densité maîtrisée, hiérarchie avant décoration, l'exception
   d'abord, le rouge KW avec parcimonie (navigation active, action principale,
   alerte critique, identité), et une cohérence absolue d'une page à l'autre.

   À charger AVANT les feuilles de module. */

:root{
  /* ── MARQUE — le rouge officiel de KW, déjà celui du projet ── */
  --kw-red:#B40101;
  --kw-red-hover:#8E0101;
  --kw-red-soft:#FDF2F2;
  --kw-red-border:#F3D4D4;

  /* ── BARRE LATÉRALE ── */
  --sidebar-bg:#14161B;
  --sidebar-bg-hover:rgba(255,255,255,.055);
  --sidebar-border:#272A32;
  --sidebar-text:#C5C8D0;
  --sidebar-muted:#7E838E;

  /* ── FONDS ── */
  --bg-app:#F6F7F9;
  --bg-surface:#FFFFFF;
  --bg-subtle:#F9FAFB;
  --bg-hover:#F4F5F7;
  --bg-rangee:#F7F8FB;   /* une ligne sur deux des listes, comme Modelo (17/10/2026) */

  /* ── TEXTE ── */
  --text-primary:#16181D;
  --text-secondary:#677080;
  --text-tertiary:#646A76;   /* 5,0:1 sur blanc et 4,6:1 sur le fond de l’application. Était #707683 (4,25:1 sur le fond, audit du 02/10/2026), et avant lui #9299A6 (2,9:1 : illisible au soleil) */
  --text-inverse:#FFFFFF;

  /* ── BORDURES ── */
  --border-default:#E3E6EB;
  --border-subtle:#EDF0F3;
  --border-strong:#D3D7DE;
  --border-input:#DDE1E7;

  /* ── ÉTATS MÉTIER — rouge critique, orange attention, bleu information,
        vert succès, violet léger pour l'IA. Jamais la couleur seule. ── */
  --green:#12724E;  --green-soft:#EDF9F3;  --green-border:#C9EAD9;   /* 5,6:1 sur --green-soft (audit du 15/10/2026, F-10) */
  --orange:#D97706; --orange-text:#B45309; --orange-soft:#FFF7ED; --orange-border:#FED7AA;
  --blue:#2563EB;   --blue-soft:#EFF6FF;   --blue-border:#DBEAFE;
  --purple:#6D5DFC; --purple-soft:#F3F1FF; --purple-border:#E2DDFF;

  /* ── GÉOMÉTRIE ── */
  --radius-sm:7px;
  --radius-md:10px;
  --radius-lg:16px;   /* 22/10/2026 : des cartes plus rondes, sur le modèle de la console AWS (était 14) */
  --radius-xl:20px;

  /* ── OMBRES — toujours très légères ── */
  --shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --shadow-sm:0 2px 8px rgba(16,24,40,.05);
  --shadow-md:0 8px 24px rgba(16,24,40,.08);

  /* ── MISE EN PAGE ── */
  --sidebar-width:272px;
  --sidebar-collapsed:72px;
  --topbar-height:64px;
  --content-max-width:1600px;
  --page-x:32px;

  /* ── TYPOGRAPHIE — Geist, Inter à défaut ── */
  --font:"Geist",Inter,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ── LES ANCIENS NOMS, branchés sur les nouveaux. Toutes les feuilles de
        module s'en servent : c'est ce qui fait passer tout le portail à la
        nouvelle palette sans réécrire chaque règle. ── */
  --kw-red-dark:var(--kw-red-hover);
  --kw-red-line:var(--kw-red-border);
  --ink:var(--text-primary);
  --ink-1:var(--text-primary);
  --ink-2:#3D4350;
  --ink-3:var(--text-secondary);
  --ink-4:#6B7280;
  --ink-5:var(--text-tertiary);
  --icon:var(--text-tertiary);
  --bg:var(--bg-app);
  --surface:var(--bg-surface);
  --line:var(--border-default);
  --line-2:var(--border-subtle);
  --ok:var(--green);       --ok-soft:var(--green-soft);
  --warn:var(--orange-text); --warn-soft:var(--orange-soft);
  --info:var(--blue);      --info-soft:var(--blue-soft);
  --r-sm:var(--radius-sm); --r:var(--radius-md); --r-lg:var(--radius-lg);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --rail:var(--sidebar-width);
  --shadow:var(--shadow-xs);
  --shadow-lg:var(--shadow-md);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:14px/1.55 var(--font);
  background:var(--bg-app); color:var(--text-primary);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"tnum" 0;
}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{margin:0;letter-spacing:-.015em}
:focus-visible{outline:2px solid var(--kw-red);outline-offset:2px;border-radius:4px}

/* ═══════════════════════════ L'ENVELOPPE ═══════════════════════════ */
.portail{display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);min-height:100vh;
  transition:grid-template-columns .18s ease}
.main{min-width:0;display:flex;flex-direction:column}

/* ═══════════════════════════ BARRE LATÉRALE ═══════════════════════════ */
.rail{
  background:var(--sidebar-bg); color:#fff; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow:hidden; border-right:1px solid #0E1014;
}
.rail__brand{display:flex;align-items:center;gap:12px;padding:18px 18px 14px;flex:0 0 auto}
.rail__brand-lien{display:flex;align-items:center;gap:12px;border-radius:var(--radius-sm);outline-offset:3px;text-decoration:none;min-width:0}
.rail__logo{height:40px;width:auto;display:block;flex:0 0 auto}
/* Le logo de l'agence (12/10/2026, rail.js `logoAgence`) : à la place du logo KW et de la mention
   de l'outil, bandeau déplié ; le bandeau replié garde le logo KW (le logo de l'agence, en
   longueur, n'y tiendrait pas). */
.rail__logo-agence{display:none;height:48px;width:auto;max-width:calc(var(--sidebar-width) - 40px);object-fit:contain;object-position:left center;flex:0 1 auto}
.rail__brand--agence .rail__logo-agence{display:block}
.rail__brand--agence .rail__logo,
.rail__brand--agence .rail__marque{display:none}
body.rail-reduit .rail__brand--agence .rail__logo-agence{display:none}
body.rail-reduit .rail__brand--agence .rail__logo{display:block}
.rail__marque{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.rail__marque b{font-size:14px;font-weight:650;color:#fff;letter-spacing:-.005em}
.rail__marque span{font-size:11.5px;color:var(--sidebar-muted);margin-top:2px}

/* La recherche du bandeau : elle ouvre la palette de commande (⌘K). */
.rail__cherche{display:flex;align-items:center;gap:9px;margin:4px 12px 6px;height:38px;padding:0 10px;
  border:1px solid var(--sidebar-border);border-radius:9px;background:rgba(255,255,255,.03);
  color:var(--sidebar-muted);font-size:13px;width:calc(100% - 24px);text-align:left;transition:background .16s,border-color .16s}
.rail__cherche:hover{background:var(--sidebar-bg-hover);border-color:#343843;color:var(--sidebar-text)}
.rail__cherche svg{width:16px;height:16px;flex:0 0 auto;stroke-width:1.8}
.rail__cherche span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail__cherche kbd,.tb__search kbd{font:600 11px/1 var(--font);padding:3px 6px;border-radius:5px;
  border:1px solid var(--sidebar-border);color:var(--sidebar-muted);background:transparent}

.rail__scroll{flex:1;overflow-y:auto;padding:0 12px 12px;scrollbar-width:thin;scrollbar-color:#30343D transparent}
.rail__scroll::-webkit-scrollbar{width:6px}
.rail__scroll::-webkit-scrollbar-thumb{background:#30343D;border-radius:3px}
.rail__sect{display:flex;align-items:center;gap:10px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8B909B;padding:16px 4px 8px}
.rail__sect::before,.rail__sect::after{content:"";flex:1;height:1px;background:#2A2D35}
.rail__sect::before{max-width:10px}
/* Sur le bandeau sombre, le contour rouge ne se voit pas (2,5:1) : blanc. */
.rail :focus-visible{outline-color:#fff}
/* LES BOUTONS EN RELIEF (03/10/2026, demande de Divy BARTRA, d'après son
   visuel) : chaque entrée est une touche sombre légèrement bombée — un dégradé
   vertical, une arête claire en haut, une ombre portée en bas — qui s'enfonce
   au clic ; l'entrée ouverte est la même touche en rouge KW. Les sous-entrées
   restent plates : c'est la touche qui porte le relief, pas sa liste. */
.navi{display:flex;align-items:center;gap:11px;width:100%;min-height:42px;padding:8px 12px;margin:0 0 7px;
  background:linear-gradient(180deg,#2A2D35 0%,#1E2026 100%);
  border:1px solid #30343D;border-top-color:#3E434D;border-bottom-color:#111318;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 3px rgba(0,0,0,.45),0 1px 0 rgba(0,0,0,.35);
  color:#E4E6EC;border-radius:10px;text-align:left;font-size:13.5px;font-weight:550;
  transition:background .16s ease,color .16s ease,transform .08s ease,box-shadow .08s ease;text-decoration:none;position:relative}
.navi svg{width:17px;height:17px;flex:0 0 auto;stroke-width:1.8;color:#C9CCD4}
.navi:hover{background:linear-gradient(180deg,#333740 0%,#25282F 100%);border-top-color:#4A505B;color:#fff}
.navi:hover svg{color:#fff}
.navi:active{transform:translateY(1px);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.navi[aria-current="page"],.navgrp--actif > summary.navi{
  background:linear-gradient(180deg,#D81616 0%,#A30202 100%);
  border-color:#7D0000;border-top-color:#F25050;border-bottom-color:#4A0000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 8px rgba(180,1,1,.45),0 1px 0 rgba(0,0,0,.4);
  color:#fff;font-weight:650}
.navi[aria-current="page"] svg,.navgrp--actif > summary.navi svg{color:#fff}
.navi[aria-current="page"] .navi__chev,.navgrp--actif > summary.navi .navi__chev{color:rgba(255,255,255,.85)}
.navi__lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navi__soon{width:6px;height:6px;border-radius:50%;background:#4C515C;flex:0 0 auto;margin-right:2px}
.navi:hover .navi__soon{background:#8B909B}
.navi__count{font-size:11px;font-weight:650;background:#fff;color:var(--kw-red);border-radius:6px;padding:1px 6px;flex:0 0 auto;
  min-width:20px;text-align:center}
.navi[aria-current="page"] .navi__count{background:rgba(255,255,255,.95)}
.navi__chev{width:14px;height:14px;transition:transform .18s ease;color:#6B7079;flex:0 0 auto}
.navgrp[open] .navi__chev{transform:rotate(90deg)}
.navgrp summary{list-style:none}
.navgrp summary::-webkit-details-marker{display:none}
.navgrp--actif > summary.navi{color:#fff}
.subnav{padding:0 0 10px 30px;display:flex;flex-direction:column;gap:1px}
.subnav a{color:#9CA1AB;font-size:13px;text-decoration:none;padding:7px 12px;border-radius:8px;transition:color .16s,background .16s}
.subnav a:hover{color:#fff;background:var(--sidebar-bg-hover)}
.subnav a[aria-current="page"]{background:var(--kw-red);color:#fff;font-weight:600}
.rail__legend{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:10px 24px;
  font-size:11px;color:#6B7079;border-top:1px solid var(--sidebar-border)}
.pill--ia{background:var(--purple-soft);color:var(--purple)}
.navi__tag{font-size:10px;font-weight:650;letter-spacing:.03em;text-transform:uppercase;color:#E8B4B4;
  border:1px solid rgba(232,180,180,.35);border-radius:5px;padding:1px 5px;flex:0 0 auto}

.rail__foot{flex:0 0 auto;border-top:1px solid var(--sidebar-border);padding:10px 12px;display:flex;align-items:center;gap:6px}
.rail__foot .me{flex:1 1 auto;min-width:0}
.rail__foot--avec-roue{display:flex;align-items:center;gap:6px}
.rail__reglages,.rail__reduire{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border:0;background:none;
  border-radius:8px;color:#8B909B;transition:background .16s,color .16s}
.rail__reglages svg,.rail__reduire svg{width:17px;height:17px}
.rail__reglages:hover,.rail__reduire:hover{background:var(--sidebar-bg-hover);color:#fff}
.rail__reglages[aria-current="page"]{background:var(--kw-red);color:#fff}
.me{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;width:100%;border:0;background:none;transition:background .16s}
.me:hover{background:var(--sidebar-bg-hover)}
/* Les initiales sont du TEXTE dans une pastille : `place-items:center` les
   recentre pour de bon, au lieu de les laisser flotter sur la ligne de base. */
.me__av{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#2F333C;
  display:grid;place-items:center;font-size:11.5px;font-weight:650;color:#fff;line-height:1;
  letter-spacing:.02em;text-transform:uppercase}
.me__t{flex:1;min-width:0;text-align:left}
.me__n{display:block;font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me__r{display:block;font-size:11px;color:#8B909B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── LE BANDEAU RÉDUIT : les icônes seules, 72 px. Le libellé passe en
      infobulle (`title`, posé par rail.js). ── */
body.rail-reduit .portail{grid-template-columns:var(--sidebar-collapsed) minmax(0,1fr)}
body.rail-reduit .rail__marque,
body.rail-reduit .rail__cherche span,
body.rail-reduit .rail__cherche kbd,
body.rail-reduit .navi__lbl,
body.rail-reduit .navi__chev,
body.rail-reduit .navi__soon,
body.rail-reduit .subnav,
body.rail-reduit .me__t,
body.rail-reduit .navgrp .pill,
body.rail-reduit .rail__reglages{display:none}
body.rail-reduit .rail__brand{justify-content:center;padding:18px 0 12px}
body.rail-reduit .rail__logo{height:30px}
body.rail-reduit .rail__cherche{width:44px;margin:4px auto 6px;justify-content:center;padding:0}
body.rail-reduit .rail__scroll{padding:0 12px 12px}
body.rail-reduit .rail__sect{font-size:0;padding:14px 0 6px;border-top:1px solid var(--sidebar-border);margin:10px 6px 0}
body.rail-reduit .navi{justify-content:center;padding:9px 0}
body.rail-reduit .navi__count{position:absolute;top:2px;right:2px;font-size:9.5px;padding:0 4px;min-width:16px}
body.rail-reduit .rail__foot{flex-direction:column;padding:10px 0}
body.rail-reduit .me{justify-content:center;padding:6px 0}
body.rail-reduit .rail__reduire svg{transform:rotate(180deg)}

/* ═══════════════════════════ BARRE DU HAUT ═══════════════════════════ */
.tb{position:sticky;top:0;z-index:30;height:var(--topbar-height);display:flex;align-items:center;gap:16px;
  padding:0 var(--page-x);background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border-default)}
.tb__burger{display:none;width:40px;height:40px;border:1px solid var(--border-default);background:#fff;border-radius:9px;
  place-items:center;color:var(--text-primary)}
.tb__burger svg{width:18px;height:18px}
.tb__crumb{display:flex;align-items:center;gap:8px;min-width:0;font-size:13.5px;color:var(--text-secondary);flex:0 1 auto}
.tb__crumb a{color:var(--text-secondary);text-decoration:none;white-space:nowrap}
.tb__crumb a:hover{color:var(--text-primary)}
.tb__crumb .sep{color:var(--text-tertiary)}
.tb__crumb [aria-current]{color:var(--text-primary);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb__search{margin-left:auto;display:flex;align-items:center;gap:9px;height:40px;width:min(380px,32vw);padding:0 10px 0 12px;
  border:1px solid var(--border-default);border-radius:9px;background:var(--bg-subtle);color:var(--text-tertiary);
  font-size:13.5px;text-align:left;transition:border-color .16s,background .16s}
.tb__search:hover{border-color:var(--border-strong);background:#fff}
.tb__search svg{width:16px;height:16px;flex:0 0 auto;stroke-width:1.8}
.tb__search span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb__search kbd{border-color:var(--border-default);color:var(--text-secondary);background:#fff}
.tb__actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
/* Le miroir de Modelo (phase 5a) : fraîcheur et « Actualiser ». Orange, jamais rouge. */
.tb__miroir{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px;border:1px solid var(--border-subtle,#e6e6ea);border-radius:9px;font-size:12.5px;color:var(--text-secondary,#6e6e75);background:var(--bg-subtle,#f6f6f8)}
.tb__miroir--orange{border-color:var(--orange-border,#f3c98a);background:var(--orange-soft,#fff4e5);color:var(--orange-text,#9a5b00)}
.tb__miroir-btn{height:26px;padding:0 9px;border:1px solid var(--border-subtle,#e6e6ea);border-radius:7px;background:#fff;font:inherit;font-size:12px;font-weight:600;color:var(--text-primary,#1d1d1f);cursor:pointer}
.tb__miroir-btn:disabled{opacity:.6;cursor:default}
@media (max-width:900px){.tb__miroir-etat{display:none}}
.tb__ico{position:relative;width:40px;height:40px;display:grid;place-items:center;border:0;background:none;border-radius:9px;
  color:var(--text-secondary);text-decoration:none;transition:background .16s,color .16s}
.tb__ico:hover{background:var(--bg-hover);color:var(--text-primary)}
.tb__ico svg{width:18px;height:18px;stroke-width:1.8}
.tb__ico b{position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--kw-red);
  color:#fff;font-size:10.5px;font-weight:650;line-height:17px;text-align:center;border:2px solid #fff;box-sizing:content-box}
.tb__me{display:flex;align-items:center;gap:9px;height:40px;padding:0 8px 0 4px;border:0;background:none;border-radius:9px;
  color:var(--text-primary);transition:background .16s}
.tb__me:hover{background:var(--bg-hover)}
.tb__me .me__av{width:30px;height:30px;background:#2F333C}
.tb__me span{font-size:13.5px;font-weight:600;white-space:nowrap}
.tb__menu{position:absolute;right:var(--page-x);top:calc(var(--topbar-height) - 6px);min-width:220px;background:#fff;
  border:1px solid var(--border-default);border-radius:10px;box-shadow:var(--shadow-md);padding:6px;z-index:40}
.tb__menu[hidden]{display:none}
.tb__menu a,.tb__menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;
  border-radius:7px;font-size:13.5px;color:var(--text-primary);text-decoration:none;text-align:left}
.tb__menu a:hover,.tb__menu button:hover{background:var(--bg-hover)}
.tb__menu svg{width:16px;height:16px;color:var(--text-secondary)}
.tb__menu hr{border:0;border-top:1px solid var(--border-subtle);margin:6px 0}
.tb__menu .tb__qui{padding:8px 10px 10px;font-size:12px;color:var(--text-secondary);border-bottom:1px solid var(--border-subtle);margin-bottom:6px}
.tb__menu .tb__qui b{display:block;color:var(--text-primary);font-size:13.5px}

/* ═══════════════════════════ EN-TÊTE DE PAGE ═══════════════════════════
   L'ancienne barre du haut de chaque page (`.top`) devient l'en-tête : le titre
   de la page, sa ligne d'explication, et l'action principale à droite. */
.top{position:static;background:transparent;border:0;padding:24px var(--page-x) 0;display:flex;align-items:flex-start;
  gap:16px;backdrop-filter:none;-webkit-backdrop-filter:none;max-width:var(--content-max-width);width:100%}
.top__t{flex:1;min-width:0}
.top__t h1{font-size:28px;line-height:1.2;font-weight:700;letter-spacing:-.022em}  /* 22/10/2026 : le titre de la page, net et franc (était 24 px, 650) */
.top__t p{margin:4px 0 0;font-size:13.5px;color:var(--text-secondary);line-height:1.5}
.top > .btn,.top > a.btn,.top > .icobtn,.top > .mk__terr,.top > div:not(.top__t){margin-top:2px}
.burger{display:none;width:40px;height:40px;border:1px solid var(--border-default);background:#fff;border-radius:9px;place-items:center}
.burger svg{width:19px;height:19px}

.body{padding:20px var(--page-x) 48px;max-width:var(--content-max-width);width:100%}

/* ── Les pièces de l'enveloppe encore employées par les modules ── */
.search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border-input);
  border-radius:8px;padding:0 12px;height:40px;width:260px;transition:border-color .16s,box-shadow .16s}
.search:focus-within{border-color:var(--kw-red);box-shadow:0 0 0 3px rgba(180,1,1,.08)}
.search svg{width:16px;height:16px;color:var(--text-tertiary);flex:0 0 auto}
.search input{border:0;outline:0;background:none;font:inherit;font-size:13.5px;width:100%;color:var(--text-primary)}
.icobtn{width:40px;height:40px;border:1px solid var(--border-default);background:#fff;border-radius:9px;
  display:grid;place-items:center;position:relative;transition:border-color .16s,background .16s;color:var(--text-primary)}
.icobtn:hover{border-color:var(--border-strong);background:var(--bg-hover)}
.icobtn svg{width:18px;height:18px;stroke-width:1.8}
.icobtn__dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--kw-red);border:2px solid #fff}
.pill{display:inline-flex;align-items:center;font-size:12px;font-weight:600;border-radius:7px;padding:3px 8px;flex:0 0 auto;line-height:1.35}
.pill--red{background:var(--kw-red);color:#fff}
.pill--mut{background:var(--border-subtle);color:var(--ink-2)}
.veil{display:none;position:fixed;inset:0;background:rgba(20,22,27,.45);z-index:45}
.veil.on{display:block}
.avert{margin:0 0 var(--s4);padding:10px 14px;border:1px solid var(--kw-red-border);background:var(--kw-red-soft);
  border-radius:var(--radius-md);font-size:13px;color:var(--kw-red-hover);display:flex;gap:9px;align-items:flex-start}
.avert svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px}
.tel{color:inherit;text-decoration:none}
.tel:hover{text-decoration:underline}

/* ═══════════════════════════ PALETTE DE COMMANDE (⌘K) ═══════════════════════════ */
.cmdk{position:fixed;inset:0;z-index:80;display:grid;place-items:start center;padding-top:12vh;background:rgba(20,22,27,.38)}
.cmdk[hidden]{display:none}
.cmdk__boite{width:min(620px,calc(100vw - 32px));background:#fff;border:1px solid var(--border-default);border-radius:14px;
  box-shadow:0 24px 64px rgba(16,24,40,.22);overflow:hidden}
.cmdk__champ{display:flex;align-items:center;gap:10px;padding:0 16px;height:54px;border-bottom:1px solid var(--border-subtle)}
.cmdk__champ svg{width:18px;height:18px;color:var(--text-tertiary);flex:0 0 auto}
.cmdk__champ input{flex:1;border:0;outline:0;font:inherit;font-size:15px;color:var(--text-primary);background:none;height:100%}
.cmdk__champ kbd{font:600 11px/1 var(--font);padding:3px 6px;border-radius:5px;border:1px solid var(--border-default);color:var(--text-secondary)}
.cmdk__liste{max-height:min(420px,60vh);overflow-y:auto;padding:6px}
.cmdk__sect{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);padding:10px 10px 4px}
.cmdk__opt{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;color:var(--text-primary);text-decoration:none;font-size:14px;cursor:pointer}
.cmdk__opt svg{width:16px;height:16px;color:var(--text-secondary);flex:0 0 auto}
.cmdk__opt small{margin-left:auto;color:var(--text-tertiary);font-size:12px}
.cmdk__opt[aria-selected="true"]{background:var(--bg-hover)}
.cmdk__vide{padding:22px 14px;color:var(--text-secondary);font-size:13.5px;text-align:center}
.cmdk__pied{display:flex;gap:14px;padding:9px 14px;border-top:1px solid var(--border-subtle);font-size:12px;color:var(--text-tertiary)}

/* ═══════════════════════════ ADAPTATION AUX ÉCRANS ═══════════════════════════ */
@media (max-width:1439px){
  :root{--sidebar-width:256px;--page-x:28px}
}
/* Tablette : le bandeau se réduit aux icônes, sauf si l'agent l'a déplié. */
@media (max-width:1023px) and (min-width:768px){
  body:not(.rail-deplie) .portail{grid-template-columns:var(--sidebar-collapsed) minmax(0,1fr)}
  body:not(.rail-deplie) .rail__marque,
  body:not(.rail-deplie) .rail__cherche span,
  body:not(.rail-deplie) .rail__cherche kbd,
  body:not(.rail-deplie) .navi__lbl,
  body:not(.rail-deplie) .navi__chev,
  body:not(.rail-deplie) .navi__soon,
  body:not(.rail-deplie) .subnav,
  body:not(.rail-deplie) .me__t,
  body:not(.rail-deplie) .navgrp .pill,
  body:not(.rail-deplie) .rail__reglages{display:none}
  body:not(.rail-deplie) .rail__brand{justify-content:center;padding:18px 0 12px}
  body:not(.rail-deplie) .rail__logo{height:30px}
  body:not(.rail-deplie) .rail__brand--agence .rail__logo-agence{display:none}
  body:not(.rail-deplie) .rail__brand--agence .rail__logo{display:block}
  body:not(.rail-deplie) .rail__cherche{width:44px;margin:4px auto 6px;justify-content:center;padding:0}
  body:not(.rail-deplie) .rail__sect{font-size:0;padding:14px 0 6px;border-top:1px solid var(--sidebar-border);margin:10px 6px 0}
  body:not(.rail-deplie) .navi{justify-content:center;padding:9px 0}
  body:not(.rail-deplie) .navi__count{position:absolute;top:2px;right:2px;font-size:9.5px;padding:0 4px;min-width:16px}
  body:not(.rail-deplie) .rail__foot{flex-direction:column;padding:10px 0}
  body:not(.rail-deplie) .me{justify-content:center;padding:6px 0}
  .tb__search{width:auto;flex:0 1 260px}
  .tb__me span{display:none}
}
/* Téléphone : le bandeau devient un tiroir. */
@media (max-width:767px){
  :root{--page-x:16px;--topbar-height:58px}
  .portail{grid-template-columns:1fr !important}
  .rail{position:fixed;left:0;top:0;z-index:50;width:min(300px,86vw);transform:translateX(-100%);
        transition:transform .2s cubic-bezier(.4,0,.2,1)}
  .rail.on,.rail.rail--ouvert{transform:none}
  .rail__reduire{display:none}
  .tb{gap:8px}
  .tb__burger{display:grid}
  .tb__crumb a,.tb__crumb .sep,.tb__crumb > span:not([aria-current]){display:none}
  .tb__crumb{flex:1 1 auto}
  .tb__search{width:40px;flex:0 0 40px;padding:0;justify-content:center;margin-left:auto}
  .tb__search span,.tb__search kbd{display:none}
  .tb__me span{display:none}
  /* 22/10/2026 : au téléphone, l'état du miroir Modelo ne garde la barre que s'il alerte (orange) — il ne laissait
     au nom de la page qu'une lettre. « Actualiser » reste à l'ordinateur et à la tablette. */
  .tb__miroir:not(.tb__miroir--orange){display:none}
  .top{padding:16px var(--page-x) 0}
  .top__t h1{font-size:23px}
  .body{padding:16px var(--page-x) 40px}
  .search{display:none}
  .burger{display:none !important}
}
@media (pointer:coarse){
  .subnav a{padding:11px 10px}
  .navi{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* LES CHAMPS À RENSEIGNER (02/10/2026, rail.js : KWChamps) : encadrés en rouge,
   leur libellé en gras rouge, une phrase dessous. Partagé par les parcours
   d'estimation et de documents. */
.kw-champ-manquant{border:2px solid var(--kw-red,#B40101)!important;box-shadow:0 0 0 3px rgba(180,1,1,.12)!important}
.kw-champ-manquant__boite{color:var(--kw-red,#B40101)!important;font-weight:700!important}
.kw-champ-manquant__boite > label,.kw-champ-manquant__boite > span,.kw-champ-manquant__boite .pt-l{color:var(--kw-red,#B40101)!important;font-weight:700!important}
.kw-champ-manquant--groupe{outline:2px solid var(--kw-red,#B40101);outline-offset:4px;border-radius:8px}
.kw-champ-manquant__boite input,.kw-champ-manquant__boite select,.kw-champ-manquant__boite textarea{color:var(--text-primary,#16181D);font-weight:400}
.kw-champ-manquant__msg{display:block;margin-top:4px;font-size:12px;font-weight:700;color:var(--kw-red,#B40101);line-height:1.35}
/* LE CADRE D'UN GROUPE D'OPTIONS (05/10/2026, Divy BARTRA : « le cadre rouge déborde »,
   point 2 du bail et du mandat de location). Un contour (outline) ne prend aucune place :
   décalé de 4 px et épais de 2, il mordait de 6 px sur ce qui suit — l'encart « Bail non
   qualifié », collé sous les options —, et « À renseigner », rangé DANS le groupe,
   devenait une case de plus de sa grille, contre le bord. Le groupe se donne désormais
   la marge de son contour (10 px de chaque côté, le contour en prend 6), et la phrase
   passe SOUS le cadre (rail.js, `marquer`), comme sous une case. Rien ne bouge dans le
   groupe : pas de bordure ni de rembourrage, donc pas de calcul de `box-sizing`. */
.kw-champ-manquant--groupe{margin-top:10px;margin-bottom:10px}
.kw-champ-manquant--groupe + .kw-champ-manquant__msg{margin:0 0 10px}
/* Un conteneur encore vide (les honoraires du mandat de location tant que le loyer
   manque) : pas de cadre plat autour de rien, la phrase seule. */
.kw-champ-manquant--groupe:empty{outline:0;margin:0}
/* Les petits caractères restent petits : l'aide d'une case encadrée héritait du gras
   de sa boîte. */
.kw-champ-manquant__boite .aide{font-weight:400}

/* Un libellé pour le lecteur d'écran seulement (champ de connexion, audit du
   02/10/2026) : hors de l'écran, jamais hors de l'arbre d'accessibilité. */
.visuellement-cache{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}