/* =========================================================================
   AsfaManager — feuille de style unique. Thème clair uniquement.

   Pas de build, pas de node_modules : le fichier est servi tel quel.

   COULEURS — trois familles qui ne se mélangent jamais :

   1. La marque      teal #2F6E6B et or #B0830F, tirés du logo Asfalys.
                     Boutons principaux, liens, logo.

   2. Les domaines   une teinte par section : teal (actifs), indigo
                     (employés), magenta (licences), corail (à corriger).
                     Purement décoratives : elles disent OÙ l'on se trouve,
                     jamais ce que vaut une donnée. Toujours accompagnées
                     d'un libellé — la couleur ne porte jamais seule
                     l'information.

   3. Les statuts    vert / ambre / rouge / gris. Réservés aux données :
                     état de garantie, statut d'un actif, sévérité d'un
                     signalement. Ne servent jamais de décor.

   Mélanger 2 et 3 rendrait l'interface illisible : on ne saurait plus si
   une couleur signale une alerte ou simplement une rubrique.
   ========================================================================= */

:root{
  color-scheme: light;

  /* Neutres — légèrement biaisés vert-froid, jamais un gris pur */
  --ground:#F6F8F7;
  --surface:#FFFFFF;
  --surface-2:#F2F6F5;
  --hairline:#E4EBE9;
  --hairline-strong:#D2DDDA;
  --ink:#15211F;
  --ink-2:#3B4F4D;
  --muted:#5E706E;
  --faint:#8A9C99;

  /* Marque */
  --brand:#2F6E6B;
  --brand-deep:#1F4E4C;
  --gold:#B0830F;

  /* Domaines — remplacés par page via body[data-domain] */
  --accent:#2F6E6B;
  --accent-soft:#E6F0EF;

  /* Statuts — réservés aux données */
  --st-crit:#D03B3B; --st-warn:#FAB219; --st-good:#0CA30C; --st-none:#9AA8A6;
  --st-crit-bg:#FCEDEC; --st-warn-bg:#FDF4E0; --st-good-bg:#E7F5E7; --st-none-bg:#EFF3F2;
  --st-warn-ink:#8A6104;

  --shadow-sm:0 1px 2px rgba(21,33,31,.04);
  --shadow:0 1px 3px rgba(21,33,31,.05), 0 10px 26px -14px rgba(21,33,31,.18);
  --radius:12px;

  --f-display:"Bahnschrift","Segoe UI Variable Display","Archivo Narrow",system-ui,sans-serif;
  --f-body:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"Cascadia Mono",Consolas,ui-monospace,"SF Mono",monospace;
}

/* Une teinte par section. Le corps porte l'attribut, tout le reste hérite. */
body[data-domain="dashboard"],
body[data-domain="assets"]  { --accent:#2F6E6B; --accent-soft:#E6F0EF; }
body[data-domain="people"]  { --accent:#4A56A6; --accent-soft:#ECEEF9; }
body[data-domain="licenses"]{ --accent:#8E4585; --accent-soft:#F8ECF5; }
body[data-domain="quality"] { --accent:#C2553F; --accent-soft:#FCEEEA; }

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;text-wrap:balance}
a{color:var(--brand)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}
[hidden]{display:none!important}

/* ---------- structure ---------- */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}

.rail{background:var(--surface);border-right:1px solid var(--hairline);display:flex;flex-direction:column;gap:3px;padding:18px 12px;position:sticky;top:0;height:100vh}
.rail nav{display:flex;flex-direction:column;gap:2px}
.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 20px;text-decoration:none}
.brand-name{font-family:var(--f-display);font-size:20px;letter-spacing:.03em;color:var(--ink);font-weight:600}
.brand-sub{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);font-family:var(--f-display)}

.nav-label{font-family:var(--f-display);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding:16px 10px 6px}
.nav-item{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:8px;color:var(--ink-2);text-decoration:none;font:inherit;position:relative;transition:background .12s,color .12s}
.nav-item:hover{background:var(--surface-2);color:var(--ink)}
.nav-item .ico{width:17px;height:17px;flex:none;opacity:.7}
.nav-count{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--faint);align-self:center}

/* Le libellé dit où l'on va, la phrase dessous dit ce qu'on y trouve. Elle
   reste en retrait : c'est une aide à la première visite, pas une seconde
   étiquette qui concurrencerait la première. */
.nav-txt{min-width:0;line-height:1.25}
.nav-txt b{display:block;font-weight:500}
.nav-hint{display:block;font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-item[aria-current="page"] .nav-hint{color:inherit;opacity:.72}

/* L'élément actif prend la couleur de son domaine — mais garde son libellé
   et son icône : la couleur est un renfort, pas le seul repère. */
.nav-item[aria-current="page"] .nav-txt b{font-weight:600}
.nav-item[data-dom="dashboard"][aria-current="page"],
.nav-item[data-dom="assets"][aria-current="page"]  {background:#E6F0EF;color:#2F6E6B}
.nav-item[data-dom="people"][aria-current="page"]  {background:#ECEEF9;color:#4A56A6}
.nav-item[data-dom="licenses"][aria-current="page"]{background:#F8ECF5;color:#8E4585}
.nav-item[data-dom="quality"][aria-current="page"] {background:#FCEEEA;color:#C2553F}
.nav-item[aria-current="page"] .ico{opacity:1}
.nav-item[aria-current="page"] .nav-count{color:inherit;opacity:.75}

.rail-foot{margin-top:auto;border-top:1px solid var(--hairline);padding-top:13px;font-size:11px;color:var(--faint);display:flex;flex-direction:column;gap:3px}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:12px 24px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline)}
.search{flex:1;max-width:440px;position:relative}
.search input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--hairline-strong);border-radius:9px;background:var(--surface-2);color:var(--ink);font:inherit;transition:border-color .12s,background .12s}
.search input:focus{background:var(--surface);border-color:var(--accent)}
.search svg{position:absolute;left:11px;top:9px;color:var(--faint)}
.scope{display:flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--hairline-strong);border-radius:9px;background:var(--surface);font-size:12.5px}
.scope .hint{color:var(--faint);font-size:11px;border-left:1px solid var(--hairline-strong);padding-left:8px}
.who{display:flex;align-items:center;gap:10px;margin-left:auto}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--f-display);font-size:13px;flex:none}
.who-txt{line-height:1.25}
.who-txt b{display:block;font-size:12.5px}
.who-txt span{font-size:10.5px;color:var(--muted);display:flex;align-items:center;gap:4px}
/* Le contenu occupe la largeur disponible. Le plafond précédent (1380 px)
   laissait un tiers d'écran vide à droite sur un 27 pouces et tassait
   l'inventaire à gauche ; la seule vraie limite est la longueur de ligne
   confortable, qui ne concerne que les paragraphes — traités plus bas. */
.content{padding:24px 28px 34px;max-width:2000px;width:100%}
/* Un texte suivi ne se lit plus au-delà d'une certaine largeur. */
.note span,.issue p{max-width:98ch}

/* ---------- fil d'Ariane ---------- */
.crumbs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:-2px 0 16px;font-size:12px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none;border-radius:5px;padding:1px 4px;margin:0 -4px}
.crumbs a:hover{color:var(--accent);background:var(--accent-soft)}
.crumbs b{color:var(--ink-2);font-weight:600}
.crumbs .sep{color:var(--faint);font-size:13px;line-height:1}

/* ---------- sous-navigation de section ---------- */
/* Les coupes qu'on demande le plus souvent, à un clic. Le compteur fait
   partie du libellé : « Archivés 0 » évite d'ouvrir un onglet pour rien. */
.subnav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:14px;border-bottom:1px solid var(--hairline);padding-bottom:0}
.subnav-item{display:inline-flex;align-items:center;gap:7px;padding:8px 12px 9px;font-size:13px;color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s,border-color .12s}
.subnav-item:hover{color:var(--ink)}
.subnav-item .n{font-family:var(--f-mono);font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.subnav-item.is-on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.subnav-item.is-on .n{color:var(--accent);opacity:.8}
.subnav-search{margin-left:auto;padding-bottom:6px}
.subnav-search input{padding:6px 11px;font-size:12.5px;min-width:210px}

/* ---------- en-tête de page ---------- */
.page-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{font-family:var(--f-display);font-size:28px;font-weight:600;letter-spacing:-.005em;display:flex;align-items:center;gap:11px}
/* Le trait coloré est le repère de section le plus discret possible */
.page-head h1::before{content:"";width:4px;height:26px;border-radius:3px;background:var(--accent);flex:none}
.page-head p{margin:3px 0 0;color:var(--muted);font-size:13px;padding-left:15px}
.page-head .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- contrôles ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:9px;border:1px solid var(--hairline-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;cursor:pointer;text-decoration:none;transition:background .12s,border-color .12s,box-shadow .12s}
.btn:hover{background:var(--surface-2);border-color:var(--faint)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;box-shadow:var(--shadow-sm)}
.btn-primary:hover{filter:brightness(.92);background:var(--accent);border-color:var(--accent)}
.btn-danger{color:var(--st-crit);border-color:#EFC9C6}
.btn-danger:hover{background:var(--st-crit-bg);border-color:var(--st-crit)}
.btn-sm{padding:5px 10px;font-size:12px}

input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--hairline-strong);border-radius:9px;padding:8px 11px;transition:border-color .12s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
textarea{resize:vertical;min-height:74px}
label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px}
.field{margin-bottom:12px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}

/* ---------- cartes ---------- */
.grid{display:grid;gap:16px}
.grid.top{align-items:start}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}
.card-h{display:flex;align-items:baseline;gap:10px;padding:16px 18px 0}
.card-h h2{font-family:var(--f-display);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.card-h .sub{margin-left:auto;font-size:11.5px;color:var(--faint)}
.card-b{padding:15px 18px 18px}

/* ---------- tuiles de synthèse ---------- */
/* Chaque tuile porte la couleur de son domaine : un bandeau en haut et un
   intitulé teinté. Le chiffre lui-même reste en encre neutre — c'est une
   valeur, pas un statut. */
.tiles{grid-template-columns:repeat(4,1fr)}
.tile{padding:0;overflow:hidden;position:relative}
.tile::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--tile-c,var(--accent))}
.tile-in{padding:17px 18px 18px}
.tile .lab{font-family:var(--f-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tile-c,var(--accent));font-weight:600}
.tile .val{font-family:var(--f-display);font-size:42px;line-height:1.02;margin-top:9px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.tile .val small{font-size:17px;color:var(--faint);font-weight:400;letter-spacing:0}
.tile .foot{margin-top:8px;font-size:12px;color:var(--muted)}

.tile--assets  {--tile-c:#2F6E6B}
.tile--people  {--tile-c:#4A56A6}
.tile--licenses{--tile-c:#8E4585}
/* La tuile des garanties est la seule à porter une couleur de STATUT :
   ce qu'elle affiche est une alerte, pas une rubrique. */
.tile--warranty{--tile-c:#C2553F}
.tile--warranty .val{color:var(--st-crit)}

/* ---------- graphiques ---------- */
.bars{display:flex;flex-direction:column;gap:10px}
.bar-row{display:grid;grid-template-columns:100px 1fr auto;align-items:center;gap:12px}
.bar-row .k{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{height:16px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;background:var(--accent);border-radius:0 5px 5px 0;transition:width .5s cubic-bezier(.22,1,.36,1)}
.bar-row .v{font-family:var(--f-mono);font-size:12.5px;font-variant-numeric:tabular-nums;min-width:24px;text-align:right;color:var(--ink)}

.stack{display:flex;height:28px;border-radius:5px;overflow:hidden;gap:2px;background:var(--surface)}
.seg:first-child{border-radius:5px 0 0 5px}
.seg:last-child{border-radius:0 5px 5px 0}
.stack-key{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:14px}
.key-item{display:flex;align-items:center;gap:8px;font-size:12.5px;text-decoration:none;color:inherit;padding:2px 4px;border-radius:5px}
.key-item:hover{background:var(--surface-2)}
.key-dot{width:10px;height:10px;border-radius:3px;flex:none}
.key-item .n{margin-left:auto;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.key-item .t{color:var(--ink-2)}

/* ---------- tableaux ---------- */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
thead th{font-family:var(--f-display);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:600;padding:10px 14px;border-bottom:1px solid var(--hairline-strong);white-space:nowrap;position:sticky;top:0;background:var(--surface)}
tbody td{padding:10px 14px;border-bottom:1px solid var(--hairline);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .1s}
tbody tr:hover{background:var(--accent-soft)}
.row-click{cursor:pointer}

/* En-têtes triables : la flèche n'apparaît que sur la colonne active,
   pour ne pas transformer la ligne d'en-tête en sapin de Noël. */
.th-sort{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none;font:inherit}
.th-sort:hover{color:var(--accent)}
.th-sort.is-sorted{color:var(--accent)}
.th-arrow{font-size:11px;line-height:1}

/* Actifs sortis du parc : présents, consultables, mais visuellement en
   retrait. Sans cela ils occupent le tableau au même titre que le matériel
   en service. */
.is-archived td{opacity:.55}
.is-archived:hover td{opacity:1}

/* Largeurs de l'inventaire. Sans elles le navigateur serre tout à gauche et
   laisse le vide à droite : les colonnes se calaient sur leur contenu le plus
   court au lieu de se répartir l'écran. Exprimées en pourcentage pour rester
   justes quelle que soit la taille de la fenêtre. */
.col-tag{width:12%}
.col-hw{width:24%}
.col-serial{width:16%}
.col-holder{width:20%}
.col-status{width:12%}
.col-warranty{width:16%}
.col-actions{width:1%;white-space:nowrap;text-align:right}

/* Le numéro de série se dicte au support : il doit rester sélectionnable et
   lisible caractère par caractère, d'où la chasse fixe. */
.serial{letter-spacing:.02em}
/* Un GUID fait 36 caractères : affiché en entier il passe sur deux lignes et
   fait respirer le tableau au rythme de la donnée la plus fausse. On le
   tronque — c'est de toute façon une valeur inexploitable, signalée comme
   telle, et l'infobulle donne la chaîne complète. */
.serial.bad{display:inline-block;max-width:20ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;
  color:var(--st-warn-ink);border-bottom:1px dotted var(--st-warn-ink);cursor:help}

/* Deuxième ligne d'une cellule « personne » : fonction, département… */
.sub-line{display:block;font-size:11px;color:var(--faint);margin-top:1px}

/* ---------- résultats de recherche ---------- */
.res{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--hairline);text-decoration:none;color:inherit}
.res:last-child{border-bottom:0}
.res:hover{background:var(--accent-soft)}
.res-txt{min-width:0;flex:1;line-height:1.3}
.res-txt b{display:block;font-size:13px}
.res-txt>span{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res .avatar{width:28px;height:28px;font-size:11px;background:var(--accent-soft);color:var(--accent);font-weight:600}

/* Donnée manquante annoncée franchement plutôt que remplie de bruit. */
.todo{color:var(--faint);font-style:italic;font-size:12.5px;border-bottom:1px dotted var(--hairline-strong);cursor:help}
.mono{font-family:var(--f-mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.tag{font-family:var(--f-mono);font-size:12.5px;background:var(--surface-2);border:1px solid var(--hairline-strong);padding:2px 7px;border-radius:6px;white-space:nowrap;display:inline-block;text-decoration:none;color:var(--ink)}
a.tag:hover{border-color:var(--accent);color:var(--accent)}
.tag.bad{border-color:#EFC9C6;background:var(--st-crit-bg);color:var(--st-crit)}
.hw b{font-weight:600;display:block}
.hw span{font-size:11.5px;color:var(--faint);display:block;max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Pastilles de STATUT — données uniquement, jamais décoratives */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap}
.p-good{background:var(--st-good-bg);color:#0A7D0A}
.p-warn{background:var(--st-warn-bg);color:var(--st-warn-ink)}
.p-crit{background:var(--st-crit-bg);color:var(--st-crit)}
.p-none{background:var(--st-none-bg);color:var(--muted)}

.who-cell{display:flex;align-items:center;gap:8px}
.who-cell .avatar{width:26px;height:26px;font-size:11px;background:var(--accent-soft);color:var(--accent);font-weight:600}
.unassigned{color:var(--faint);font-style:italic}
.dept-tag{font-size:11.5px;padding:2px 8px;border-radius:6px;background:var(--surface-2);border:1px solid var(--hairline);color:var(--muted)}
.dept-tag.todo{background:var(--st-warn-bg);border-color:#EFDCAE;color:var(--st-warn-ink)}

.filters{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:15px}
.filters .grow{flex:1;min-width:190px}
.chipcount{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- signalements ---------- */
.issue{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--hairline);align-items:flex-start}
.issue:last-child{border-bottom:0;padding-bottom:0}
.issue .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none}
.issue b{display:block;font-size:13px}
.issue p{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.issue .n{margin-left:auto;font-family:var(--f-display);font-size:23px;font-weight:600;font-variant-numeric:tabular-nums}
.taglist{display:flex;flex-wrap:wrap;gap:7px}

/* ---------- fiche actif ---------- */
.detail{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:start}
.kv{display:grid;grid-template-columns:135px 1fr;gap:10px 16px;font-size:13px;margin:0}
.kv dt{color:var(--muted);font-size:12.5px}
.kv dd{margin:0;font-weight:500}
.gauge{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden;margin:10px 0 8px}
.gauge i{display:block;height:100%;border-radius:5px;transition:width .5s cubic-bezier(.22,1,.36,1)}
.timeline{position:relative;padding-left:22px}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--hairline-strong);border-radius:1px}
.tl-item{position:relative;padding-bottom:17px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-21px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--accent)}
.tl-item.maint::before{border-color:var(--gold)}
.tl-date{font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.tl-item b{display:block;font-size:13px;margin-top:2px}
.tl-item p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.qr{display:grid;place-items:center;gap:11px}
.qr img{width:172px;height:172px;background:#fff;padding:10px;border-radius:10px;box-shadow:0 0 0 1px var(--hairline)}

/* ---------- messages ---------- */
.note{display:flex;gap:10px;padding:13px 15px;border-radius:10px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);font-size:12.5px;color:var(--ink-2);margin-bottom:16px}
.note svg{flex:none;color:var(--accent);margin-top:1px}
.flash{padding:12px 15px;border-radius:10px;margin-bottom:16px;font-size:13px;display:flex;gap:9px;align-items:flex-start}
.flash-ok{background:var(--st-good-bg);color:#0A7D0A;border:1px solid #BEE3BE}
.flash-err{background:var(--st-crit-bg);color:var(--st-crit);border:1px solid #EFC9C6}
.empty{padding:38px 16px;text-align:center;color:var(--muted)}

/* ---------- pagination ---------- */
.pagination{display:flex;gap:5px;list-style:none;padding:0;margin:16px 0 0;flex-wrap:wrap;font-size:13px}
.pagination a,.pagination span{display:block;padding:6px 11px;border:1px solid var(--hairline);border-radius:8px;text-decoration:none;color:var(--ink);background:var(--surface)}
.pagination a:hover{border-color:var(--accent);color:var(--accent)}
.pagination .active span{background:var(--accent);color:#fff;border-color:var(--accent)}
.pagination .disabled span{color:var(--faint);background:transparent}

/* ---------- connexion ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1200px 500px at 50% -8%, #E6F0EF 0%, var(--ground) 62%)}
.login-card{background:var(--surface);border:1px solid var(--hairline);border-radius:18px;box-shadow:0 2px 6px rgba(21,33,31,.05),0 24px 60px -30px rgba(21,33,31,.3);padding:42px 36px;max-width:410px;width:100%;text-align:center}
.login-card h1{font-family:var(--f-display);font-size:27px;margin:18px 0 6px}
.login-card p{color:var(--muted);font-size:13px;margin:0 0 26px}
.btn-ms{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;padding:12px;border:1px solid var(--hairline-strong);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:border-color .12s,box-shadow .12s}
.btn-ms:hover{border-color:var(--brand);box-shadow:0 0 0 3px #E6F0EF}
.login-foot{margin-top:24px;font-size:11.5px;color:var(--faint)}

@media (max-width:1080px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;border-right:0;border-bottom:1px solid var(--hairline)}
  /* En bandeau horizontal, la phrase d'aide ferait une deuxième ligne sous
     chaque entrée et doublerait la hauteur : seul l'intitulé subsiste. */
  .rail .nav-label,.rail-foot,.nav-hint{display:none}
  .rail nav{flex:1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:3px}
  .brand{padding:0 14px 0 4px}
  .subnav-search{margin-left:0;width:100%}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .detail,.grid-2{grid-template-columns:1fr}
}
@media (max-width:620px){
  .tiles{grid-template-columns:1fr}
  .scope,.who-txt{display:none}
  .content{padding:16px 14px}
  .page-head h1{font-size:23px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}