/* ═══════════════════════════════════════════════════════════════════════════
   portail-pro.css — coquille de l'espace professionnel.

   POURQUOI CE FICHIER
   Chaque page de l'espace pro portait sa propre feuille de style, recopiée à
   la main : les mêmes couleurs y étaient redéfinies avec des valeurs
   légèrement différentes, et toute retouche devait être faite quatre fois.
   Tout ce qui suit est partagé ; une page n'ajoute que ce qui lui est propre.

   LES JETONS SUIVENT LA CHARTE FUSIONNÉE (30/08/2026) — MIGRATION DU 31/08
   Le vert #066236 est abandonné : l'accent est l'encre, le corail ne sert
   que le point du wordmark. Les statuts (ambre, rouge) ne bougent pas.
   Neutres, statuts et rayons sont repris tels quels, sans réinterprétation.
   Ne pas introduire ici une couleur qui n'y figure pas.

   TROIS ÉTATS, JAMAIS PLUS
   Normal (gris, discret), à surveiller (ambre), urgent (rouge). La couleur ne
   décore rien : elle signale qu'une décision est attendue. Une information
   agréable — « à jour », « livré » — s'écrit en gris.

   L'ACCENT EST LA SEULE VARIABLE
   Il porte la marque. En marque blanche, on ne redéfinit que --accent et ses
   deux dérivées : rien d'autre n'est coloré, donc rien d'autre ne bouge.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --fond:#F4F4F2; --carte:#FCFCFB; --appui:#EBEBE8; --haute:#FFFFFF;
  --filet:#E4E6E2; --filet-fort:#CDD1CA;
  --t1:#0A0A0A; --t2:#454A50; --t3:#5C6166; --t4:#6E7479; --t5:#9AA0A0;
  --accent:#0A0A0A; --accent-teinte:#EBEBE8; --accent-filet:#D6D6D2; --corail:#FF7D70;
  --sur-accent:#FCFCFB;
  --normal:#5C6166; --normal-f:#EDEEEA; --normal-fi:#D5D8D1;
  --veille:#8A5A00; --veille-f:#FBF0DC; --veille-fi:#EEDAAE;
  --urgent:#B42318; --urgent-f:#FDECEA; --urgent-fi:#F4C7C1;
  --encre:#1B1E22;
  --pierre:#DED9CE; --pierre2:#CFC8B9; --zinc:#9AA3A8; --ciel:#E7E9E6; --ombre:#B9B2A4;
  --r1:4px; --r2:6px; --r3:8px; --r4:10px; --r5:14px;
  --pol:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --barre:248px;
}
/* Trois états de thème : choix explicite clair, choix explicite sombre, et le
   défaut « système » qui ne pose aucun attribut — c'est le cas le plus courant,
   et celui qu'on oublie. Seuls les jetons sont redéfinis, jamais un composant. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fond:#15171A; --carte:#1C1F23; --appui:#22262A; --haute:#24282D;
    --filet:#2B2F34; --filet-fort:#3A4046;
    --t1:#EDEEEB; --t2:#C3C7CB; --t3:#A0A8B1; --t4:#8B9198; --t5:#7C8288;
    --accent:#E8E8E5; --accent-teinte:#26282B; --accent-filet:#3F4348; --corail:#FF7D70;
    --sur-accent:#131312;
    --normal:#A0A8B1; --normal-f:#1F242B; --normal-fi:#333B44;
    --veille:#E8B44A; --veille-f:#2B2211; --veille-fi:#4D3D18;
    --urgent:#FF8A7C; --urgent-f:#311917; --urgent-fi:#5A2823;
    --encre:#0F1113;
    --pierre:#3A3D41; --pierre2:#2E3135; --zinc:#4A5257; --ciel:#212428; --ombre:#24272B;
  }
}
:root[data-theme="dark"]{
  --fond:#15171A; --carte:#1C1F23; --appui:#22262A; --haute:#24282D;
  --filet:#2B2F34; --filet-fort:#3A4046;
  --t1:#EDEEEB; --t2:#C3C7CB; --t3:#A0A8B1; --t4:#8B9198; --t5:#7C8288;
  --accent:#E8E8E5; --accent-teinte:#26282B; --accent-filet:#3F4348; --corail:#FF7D70;
  --sur-accent:#131312;
  --normal:#A0A8B1; --normal-f:#1F242B; --normal-fi:#333B44;
  --veille:#E8B44A; --veille-f:#2B2211; --veille-fi:#4D3D18;
  --urgent:#FF8A7C; --urgent-f:#311917; --urgent-fi:#5A2823;
  --encre:#0F1113;
  --pierre:#3A3D41; --pierre2:#2E3135; --zinc:#4A5257; --ciel:#212428; --ombre:#24272B;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--fond); color:var(--t2);
  font-family:var(--pol); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}
.mono{font-family:var(--mono)}
.cache{display:none !important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ══ Ossature ══ */
.app{display:grid; grid-template-columns:var(--barre) minmax(0,1fr); min-height:100vh}
@media (max-width:900px){.app{grid-template-columns:1fr}}

.barre{
  background:var(--carte); border-right:1px solid var(--filet);
  display:flex; flex-direction:column; min-width:0;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
@media (max-width:900px){
  .barre{position:static; height:auto; border-right:none; border-bottom:1px solid var(--filet)}
}
.marque{display:flex; align-items:center; gap:10px; padding:17px 18px 15px; border-bottom:1px solid var(--filet); text-decoration:none}
.marque:hover{text-decoration:none}
.marque svg{height:26px; width:auto; flex:0 0 auto}
.marque-t{font-size:16px; font-weight:800; letter-spacing:-.018em; color:var(--t1)}
.marque-t b{font-family:'Poppins',var(--pol); font-weight:600; letter-spacing:-.038em}
/* > obligatoire : un descendant simple attraperait aussi le span.tt de l'ı */
.marque-t > span{font-weight:400; color:var(--t4); margin-left:3px}
/* wordmark : « i » sans point (U+0131) + point corail redessiné (charte 30/08/2026) */
.tt{display:inline; position:relative}
.tt::after{content:""; position:absolute; left:50%; bottom:.77em; width:.135em; height:.135em;
  border-radius:50%; background:var(--corail); transform:translateX(-50%)}

.compte{
  display:flex; align-items:center; gap:10px; margin:13px 11px 0; padding:10px 11px;
  background:var(--appui); border-radius:var(--r3); text-align:left;
  width:calc(100% - 22px); transition:background .16s; text-decoration:none;
}
.compte:hover{background:var(--filet); text-decoration:none}
.av{
  width:31px; height:31px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-teinte); color:var(--accent); border:1px solid var(--accent-filet);
  font-size:11px; font-weight:800; letter-spacing:.02em;
}
.compte-n{display:block; font-size:13px; font-weight:700; color:var(--t1); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.compte-r{display:block; font-size:11px; color:var(--t4); line-height:1.3}

.nav{padding:16px 11px 18px; flex:1}
.nav-k{font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--t5); padding:0 8px; margin:16px 0 6px}
.nav-k:first-child{margin-top:0}
.nav-i{
  display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px;
  border-radius:var(--r3); font-size:13.5px; font-weight:600; color:var(--t3);
  text-align:left; text-decoration:none; transition:background .16s, color .16s;
}
.nav-i:hover{background:var(--appui); color:var(--t2); text-decoration:none}
.nav-i[aria-current="page"]{background:var(--accent-teinte); color:var(--accent); font-weight:700}
.nav-i svg{width:15px; height:15px; flex:0 0 auto; opacity:.85}
.nav-i .lab{flex:1; min-width:0}
.cpt{
  font-family:var(--mono); font-size:10.5px; font-weight:500; color:var(--t4);
  background:var(--appui); border-radius:999px; padding:1px 7px; font-variant-numeric:tabular-nums;
}
.nav-i[aria-current="page"] .cpt{background:var(--carte); color:var(--accent)}
.cpt.alerte{background:var(--urgent-f); color:var(--urgent)}
.cpt:empty{display:none}
.barre-pied{padding:12px 19px 16px; border-top:1px solid var(--filet); display:flex; flex-direction:column; gap:7px}
.barre-pied a{font-size:12.5px; color:var(--t4); font-weight:500}
.barre-pied a:hover{color:var(--t2)}

.zone{display:flex; flex-direction:column; min-width:0}
.haut{
  display:flex; align-items:center; gap:14px; padding:13px 22px;
  border-bottom:1px solid var(--filet); background:var(--carte);
  position:sticky; top:0; z-index:10;
}
.rech{flex:1; display:flex; align-items:center; gap:9px; min-width:0; background:var(--fond); border:1px solid var(--filet); border-radius:var(--r3); padding:8px 13px}
.rech svg{width:15px; height:15px; color:var(--t5); flex:0 0 auto}
.rech input{flex:1; min-width:0; border:none; background:none; font-family:inherit; font-size:13.5px; color:var(--t1); outline:none}
.rech input::placeholder{color:var(--t5)}
.rech:focus-within{border-color:var(--accent-filet)}
.bt-cmd{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  background:var(--accent); color:var(--sur-accent); font-size:13.5px; font-weight:700;
  border-radius:var(--r3); padding:9px 16px; transition:opacity .16s; text-decoration:none;
}
.bt-cmd:hover{opacity:.9; text-decoration:none}

/* Le corps garde toute la largeur : le détail d'un immeuble est une consultation
   ponctuelle, pas un troisième panneau permanent. Une colonne fixe de 330 px
   écrasait la liste en continu pour un contenu qu'on ne regarde qu'au clic. */
.corps{display:flex; flex:1; min-height:0}
.vue{padding:24px 26px 40px; min-width:0; flex:1}

/* ── Volet coulissant ─────────────────────────────────────────────────────
   Il entre par la droite, se superpose, et se referme par la croix, le voile
   ou la touche Échap. Fermé, il reste dans le document mais hors d'atteinte
   du clavier (visibility), pour ne pas piéger la tabulation. */
.aside{
  position:fixed; top:0; right:0; bottom:0;
  /* Proportionnel à l'écran, borné des deux côtés : assez large pour que
     les libellés d'obligation ne se coupent pas, jamais au point de
     couvrir toute la page. */
  width:clamp(380px, 36vw, 640px); max-width:100%;
  /* Surface HAUTE, pas la surface de carte : en thème sombre, un panneau qui
     s'élève au-dessus du contenu doit s'éclaircir, sinon il ne se détache pas
     du fond. C'est à cela que sert le jeton --haute. */
  background:var(--haute); border-left:1px solid var(--filet-fort);
  box-shadow:-8px 0 32px rgba(23,25,30,.10);
  overflow-y:auto; z-index:60;
  transform:translateX(102%); visibility:hidden; opacity:.35;
  /* Longue sortie de course : l'essentiel du déplacement se fait tôt, la fin
     s'amortit. C'est ce freinage qui manquait — un glissement linéaire, même
     ralenti, garde toujours l'air sec. */
  transition:transform .58s cubic-bezier(.16,.84,.28,1),
             opacity   .40s ease-out,
             visibility .58s;
}
.aside.ouvert{transform:translateX(0); visibility:visible; opacity:1}
.voile{position:fixed; inset:0; background:rgba(23,25,30,.28); z-index:55; opacity:0; visibility:hidden; transition:opacity .48s ease-out, visibility .48s}
.voile.ouvert{opacity:1; visibility:visible}
.pn-fermer{
  position:absolute; top:11px; right:11px; z-index:3;
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(252,252,251,.94); border:1px solid var(--filet-fort); color:var(--t2);
  box-shadow:0 1px 4px rgba(23,25,30,.14);
}
.pn-fermer:hover{background:var(--carte); color:var(--t1)}

/* ── Contenu du volet ── */
.pn-tete{padding:19px 24px 17px; border-bottom:1px solid var(--filet)}
.pn-h{font-size:20px; font-weight:800; color:var(--t1); letter-spacing:-.026em; line-height:1.2; margin:0}
.pn-s{font-family:var(--mono); font-size:10px; color:var(--t5); letter-spacing:.03em; margin-top:6px}
.pn-b{padding:17px 24px}
.pn-b + .pn-b{border-top:1px solid var(--filet)}
.pn-k{font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--t5); margin-bottom:10px}
.al{display:flex; gap:11px; padding:11px 12px; border-radius:var(--r3); background:var(--urgent-f); border:1px solid var(--urgent-fi)}
.al-t{font-size:13px; font-weight:700; color:var(--urgent); line-height:1.35}
.al-s{font-size:12px; color:var(--t2); line-height:1.5; margin-top:4px}

@media (prefers-reduced-motion:reduce){.aside,.voile{transition:none}}

/* ══ Entêtes ══ */
.vh{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:6px}
.vh-sur{font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--t5)}
.vh-h{font-size:23px; font-weight:800; letter-spacing:-.028em; color:var(--t1); margin:3px 0 0; line-height:1.16}
.vh-p{font-size:14px; color:var(--t3); margin:8px 0 0; max-width:64ch}
.vh-p b{color:var(--t1); font-weight:600}

.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{font-size:12.5px; font-weight:600; color:var(--t3); background:var(--carte); border:1px solid var(--filet); border-radius:999px; padding:5px 13px; transition:.16s}
.chip:hover{border-color:var(--filet-fort); color:var(--t2)}
.chip[aria-pressed="true"]{background:var(--t1); border-color:var(--t1); color:var(--fond)}

/* ══ Listes ══ */
.liste{background:var(--carte); border:1px solid var(--filet); border-radius:var(--r4); overflow:hidden}
.li{display:flex; gap:16px; padding:15px 17px; border-left:2px solid transparent; align-items:flex-start; text-align:left; width:100%}
.li + .li{border-top:1px solid var(--filet)}
.li.est-urgent{border-left-color:var(--urgent)}
.li.est-veille{border-left-color:var(--veille)}
a.li,button.li{transition:background .16s; text-decoration:none; color:inherit}
a.li:hover,button.li:hover{background:var(--appui); text-decoration:none}
button.li{cursor:pointer}
button.li[aria-current="true"]{background:var(--appui); box-shadow:inset 3px 0 0 var(--accent)}
.li-corps{flex:1; min-width:0}
.li-t{font-size:14.5px; font-weight:700; color:var(--t1); letter-spacing:-.014em; line-height:1.35}
.li-s{font-size:12.5px; color:var(--t3); margin-top:4px; line-height:1.55}
.li-d{flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.li-q{font-family:var(--mono); font-size:10.5px; color:var(--t5); letter-spacing:.02em; white-space:nowrap}
.li-m{font-size:14px; font-weight:700; color:var(--t1); font-variant-numeric:tabular-nums; letter-spacing:-.01em; white-space:nowrap}
.li-lots{font-size:13px; color:var(--t3); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.li-lots b{display:block; font-size:15px; font-weight:700; color:var(--t1); letter-spacing:-.01em}
.li-lots span{font-family:var(--mono); font-size:10px; color:var(--t5); letter-spacing:.04em}
.fl{color:var(--t5); font-size:15px; flex:0 0 auto; align-self:center}
.puces{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.puce{font-size:11.5px; font-weight:600; color:var(--t2); background:var(--appui); border:1px solid var(--filet); border-radius:var(--r2); padding:3px 9px; white-space:nowrap}
.puce span{color:var(--t5); font-family:var(--mono); font-size:10px; font-weight:400; margin-left:5px}
button.puce-c{cursor:pointer; font-family:inherit; transition:border-color .16s, background .16s}
button.puce-c:hover{border-color:var(--accent-filet); background:var(--accent-teinte); color:var(--accent)}

/* ══ Les trois états ══ */
.et{display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:11.5px; font-weight:600; padding:2.5px 9px 2.5px 7px; border-radius:var(--r2); border:1px solid transparent}
.et::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:0 0 auto}
.e-urgent{background:var(--urgent-f); border-color:var(--urgent-fi); color:var(--urgent)}
.e-veille{background:var(--veille-f); border-color:var(--veille-fi); color:var(--veille)}
/* L'état normal n'a pas de contenant : ce qui va bien ne doit pas crier. */
.e-muet{font-size:11.5px; color:var(--t5); font-weight:500; white-space:nowrap}
.lien-s{font-size:12.5px; font-weight:600; color:var(--accent); white-space:nowrap}
button.lien-s{font-family:inherit; cursor:pointer; padding:0}
button.lien-s:hover{text-decoration:underline; text-underline-offset:3px}

/* ══ Synthèse ══ */
.synth{display:flex; margin-top:16px; background:var(--carte); border:1px solid var(--filet); border-radius:var(--r4); overflow:hidden; flex-wrap:wrap}
.sy{flex:1; min-width:132px; padding:13px 16px}
.sy + .sy{border-left:1px solid var(--filet)}
.sy-k{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--t5); white-space:nowrap}
.sy-v{font-size:21px; font-weight:800; color:var(--t1); letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.15; margin-top:3px}
.sy.tire .sy-v{color:var(--accent)}

/* ══ Tableaux ══ */
.tab-enrob{overflow-x:auto; margin-top:16px; border-radius:var(--r4)}
.tab{width:100%; border-collapse:collapse; background:var(--carte); border:1px solid var(--filet); border-radius:var(--r4); overflow:hidden}
.tab th{font-family:var(--mono); font-size:8.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--t4); text-align:left; padding:11px 14px; border-bottom:1px solid var(--filet-fort); font-weight:500; white-space:nowrap}
.tab td{padding:12px 14px; border-bottom:1px solid var(--filet); font-size:13.5px; color:var(--t3); vertical-align:middle}
.tab tr:last-child td{border-bottom:none}
.tab tbody tr:hover{background:var(--appui)}
.tab .ref{font-family:var(--mono); font-size:11.5px; color:var(--t4); letter-spacing:.02em; white-space:nowrap}
.tab .pr{font-weight:700; color:var(--t1); letter-spacing:-.01em}
.tab .num{text-align:right; font-variant-numeric:tabular-nums; font-weight:700; color:var(--t1); white-space:nowrap}
.tab .act{text-align:right; white-space:nowrap}

/* ══ Boutons ══ */
.bt{display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:var(--sur-accent); font-size:12.5px; font-weight:700; border-radius:var(--r2); padding:6px 13px; white-space:nowrap; text-decoration:none; transition:opacity .16s}
.bt:hover{opacity:.9; text-decoration:none}
.bt.calme{background:var(--appui); color:var(--t3); border:1px solid var(--filet)}
.bt.inerte{background:var(--appui); color:var(--t5); border:1px solid var(--filet); pointer-events:none}

/* ══ États vides et messages ══ */
.vide{text-align:center; padding:48px 22px; background:var(--carte); border:1px dashed var(--filet-fort); border-radius:var(--r4); margin-top:16px}
.vide-t{font-size:15px; font-weight:700; color:var(--t2); margin-bottom:6px}
.vide-s{font-size:13.5px; color:var(--t3); max-width:52ch; margin:0 auto; line-height:1.6}
.souci{margin-top:16px; padding:14px 17px; border-radius:var(--r4); background:var(--urgent-f); border:1px solid var(--urgent-fi); color:var(--t2); font-size:13.5px; line-height:1.6}
.souci b{color:var(--urgent); font-weight:700}
.attente{margin-top:16px; padding:14px 17px; border-radius:var(--r4); background:var(--appui); border:1px solid var(--filet); color:var(--t4); font-size:13.5px}

/* ══ Fiches ══ */
.grille2{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:12px; margin-top:16px}
.fiche{background:var(--carte); border:1px solid var(--filet); border-radius:var(--r4); padding:16px 17px}
.fiche-k{font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--t5); margin-bottom:10px}
.fiche-h{display:flex; align-items:center; gap:11px}
.fiche-n{display:block; font-size:14px; font-weight:700; color:var(--t1); letter-spacing:-.012em}
.fiche-r{display:block; font-size:12px; color:var(--t4)}
.fiche-l{margin-top:12px; padding-top:11px; border-top:1px solid var(--filet)}
.lg{display:flex; align-items:baseline; justify-content:space-between; gap:11px; padding:7px 0}
.lg + .lg{border-top:1px solid var(--filet)}
.lg-k{font-size:12.5px; color:var(--t3)}
.lg-v{font-size:12.5px; font-weight:700; color:var(--t1); text-align:right; font-variant-numeric:tabular-nums}

/* ══ Bascule de thème — trois états, dont « suivre le système » ══ */
.th{padding:11px 15px 13px; border-top:1px solid var(--filet); display:flex; flex-direction:column; gap:7px}
.th-k{font-family:var(--mono); font-size:8.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--t5)}
.th-b{display:flex; gap:3px; padding:3px; background:var(--appui); border-radius:999px}
.th-b button{flex:1; font-size:11.5px; font-weight:600; color:var(--t4); border-radius:999px; padding:4px 0; transition:background .16s, color .16s}
.th-b button:hover{color:var(--t2)}
.th-b button[aria-pressed="true"]{background:var(--carte); color:var(--t1); box-shadow:0 1px 2px rgba(0,0,0,.06)}

/* ══ Volet de droite : la fiche d'un immeuble ══ */
.pn-vign{position:relative; aspect-ratio:3/2; background:var(--appui);
  border-bottom:1px solid var(--filet); overflow:hidden}
.pn-vign img{width:100%; height:100%; object-fit:cover; display:block}
.pn-credit{font-size:10.5px; color:var(--t5); line-height:1.5; margin:0}
.pn-credit a{color:var(--t4); text-decoration:none}
.pn-credit a:hover{color:var(--t2); text-decoration:underline; text-underline-offset:2px}
.pn-vign svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.pn-vign::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 46%,rgba(23,25,30,.30) 100%)}
.pn-vign .tg{position:absolute; left:9px; bottom:9px; z-index:2; font-family:var(--mono); font-size:8.5px; letter-spacing:.09em; text-transform:uppercase; color:#F4F5F2; background:rgba(23,25,30,.55); border-radius:var(--r1); padding:2px 7px}
.pn-vide{font-size:12.5px; color:var(--t5); margin:0; line-height:1.55}
.pn-note{font-size:11.5px; color:var(--t5); margin:0; line-height:1.55}
.pn-sel{width:100%; font-family:inherit; font-size:13px; color:var(--t1);
  background:var(--carte); border:1px solid var(--filet-fort); border-radius:var(--r3);
  padding:9px 11px; cursor:pointer}
.pn-sel:disabled{opacity:.6; cursor:default}
.pn-msg{font-size:12px; margin-top:8px; color:var(--t4); min-height:1.2em}
.pn-msg.ok{color:var(--accent); font-weight:600}
.pn-msg.ko{color:var(--urgent); font-weight:600}
.pn-compl{font-family:var(--mono); font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); background:var(--accent-teinte);
  border:1px solid var(--accent-filet); border-radius:var(--r1); padding:2px 6px}

/* ══ Modale — le wizard sans quitter le portail ═════════════════════════
   Un clic sur « Chiffrer » renvoyait vers la page de devis : le professionnel
   perdait sa barre, son parc, et le fil de ce qu'il regardait. Le wizard vit
   désormais dans un cadre, au-dessus du portail, et se referme sans rien
   perdre. Il reste joignable en pleine page pour qui préfère. */
.mod{position:fixed; inset:0; z-index:80; visibility:hidden; opacity:0;
     transition:opacity .3s ease, visibility .3s}
.mod.ouvert{visibility:visible; opacity:1}
.mod-boite{transform:translateY(14px) scale(.985); transition:transform .46s cubic-bezier(.16,.84,.28,1)}
.mod.ouvert .mod-boite{transform:none}
.mod-voile{position:absolute; inset:0; background:rgba(23,25,30,.42)}
.mod-boite{
  position:absolute; inset:3vh 3vw; max-width:1180px; margin:0 auto;
  background:var(--haute); border:1px solid var(--filet-fort); border-radius:var(--r5);
  box-shadow:0 24px 64px rgba(23,25,30,.26);
  display:flex; flex-direction:column; overflow:hidden;
}
@media (max-width:760px){.mod-boite{inset:0; border-radius:0; border:none}}
.mod-tete{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 16px; border-bottom:1px solid var(--filet); background:var(--carte); flex:0 0 auto;
}
.mod-t{font-size:14px; font-weight:700; color:var(--t1); letter-spacing:-.014em; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mod-t span{font-weight:400; color:var(--t4)}
.mod-act{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.mod-lien{font-size:12.5px; font-weight:600; color:var(--t4)}
.mod-lien:hover{color:var(--t2)}
.mod-x{
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--appui); border:1px solid var(--filet); color:var(--t2);
}
.mod-x:hover{background:var(--filet); color:var(--t1)}
.mod-corps{flex:1; min-height:0; background:var(--fond)}
.mod-corps iframe{width:100%; height:100%; border:0; display:block}


/* ══ Visite guidée — un cadre qui suit, une bulle qui explique ═══════════
   Le cadre n'a pas de fond : c'est son OMBRE qui assombrit tout l'écran sauf
   la zone qu'il entoure (« spotlight » par débordement d'ombre portée). Un
   seul élément suffit donc, jamais désynchronisé d'un second calque. Les
   clics le traversent (pointer-events:none) : cliquer ailleurs sur la page
   pendant la visite ne casse rien, la bulle reste la seule chose à cliquer. */
.tour-cadre{
  position:fixed; z-index:90; border-radius:var(--r3);
  box-shadow:0 0 0 4000px rgba(15,17,19,.58), 0 0 0 2px var(--accent);
  pointer-events:none; opacity:0; visibility:hidden;
  transition:top .34s cubic-bezier(.22,.61,.36,1), left .34s cubic-bezier(.22,.61,.36,1),
             width .34s cubic-bezier(.22,.61,.36,1), height .34s cubic-bezier(.22,.61,.36,1),
             opacity .28s ease, visibility .34s;
}
.tour-cadre.ouvert{opacity:1; visibility:visible}
.tour-bulle{
  position:fixed; z-index:91; width:320px; max-width:calc(100vw - 24px);
  background:var(--haute); border:1px solid var(--filet-fort); border-radius:var(--r5);
  box-shadow:0 18px 44px rgba(15,17,19,.26); padding:17px 20px;
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:top .34s cubic-bezier(.22,.61,.36,1), left .34s cubic-bezier(.22,.61,.36,1),
             opacity .28s ease, transform .28s ease, visibility .34s;
}
.tour-bulle.ouvert{opacity:1; visibility:visible; transform:translateY(0)}
.tour-pas{font-family:var(--mono); font-size:9px; letter-spacing:.11em; text-transform:uppercase; color:var(--accent)}
.tour-t{font-size:15.5px; font-weight:800; color:var(--t1); letter-spacing:-.017em; margin:6px 0 0}
.tour-p{font-size:13px; color:var(--t3); line-height:1.55; margin:8px 0 0}
.tour-act{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px}
.tour-passer{font-family:inherit; font-size:12.5px; color:var(--t4); font-weight:600; cursor:pointer}
.tour-passer:hover{color:var(--t2)}
.tour-suiv{font-family:inherit; background:var(--accent); color:var(--sur-accent); font-size:12.5px; font-weight:700;
  border-radius:var(--r2); padding:7px 15px; cursor:pointer; transition:opacity .16s}
.tour-suiv:hover{opacity:.9}
@media (prefers-reduced-motion:reduce){.tour-cadre,.tour-bulle{transition:none}}

/* ══ Squelette de chargement — une page qui attend ne doit pas paraître vide ══ */
.sq{background:var(--carte); border:1px solid var(--filet); border-radius:var(--r4); overflow:hidden; margin-top:16px}
.sq-l{display:flex; gap:16px; padding:16px 17px; align-items:center}
.sq-l + .sq-l{border-top:1px solid var(--filet)}
.sq-b{height:11px; border-radius:var(--r1); background:var(--appui); animation:pulse 1.5s ease-in-out infinite}
.sq-b.large{flex:1} .sq-b.moyen{width:88px} .sq-b.court{width:52px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

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