/* RENOSAFE — composants de la charte (v1.0). Jetons : tokens.css. Module 8 px, rayons 8/4 px, ombres plates, jamais de flou.
   Source unique des composants : le projet web la recopie à la construction (pas de seconde version). */
@font-face{font-family:RS;src:url(../fonts/Roboto-Regular.ttf);font-weight:400}
@font-face{font-family:RS;src:url(../fonts/Roboto-Medium.ttf);font-weight:500}
@font-face{font-family:RS;src:url(../fonts/Roboto-Bold.ttf);font-weight:700}
@font-face{font-family:RS;src:url(../fonts/Roboto-Black.ttf);font-weight:900}
@font-face{font-family:RSC;src:url(../fonts/Roboto_Condensed-Bold.ttf);font-weight:700}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tx);font:400 16px/1.55 RS,Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;color:var(--tx);font-weight:700;line-height:1.2}
h1{font-size:32px;letter-spacing:-.005em}h2{font-size:22px}h3{font-size:17px}
p{margin:0}a{color:var(--link);text-underline-offset:3px}
.rep{font:700 12px/1.3 RS,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.mono{font-family:"Cascadia Mono","Cascadia Code",Consolas,ui-monospace,"SFMono-Regular",monospace;font-variant-ligatures:none;letter-spacing:.02em}
.num{font-family:RSC,"Roboto Condensed",sans-serif;font-weight:700;font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-s)}
svg.i{width:20px;height:20px;flex:none;vertical-align:-4px}svg.i.l{width:24px;height:24px}svg.i.xl{width:32px;height:32px}

/* boutons : primaire pleine, secondaire contour, discret ; 48 px (44 px minimum de cible) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:2px solid var(--action);border-radius:var(--r);
  background:var(--action);color:#fff;font:700 13px/1 RS,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .18s var(--ease-out)}
.btn:hover{background:var(--profond);border-color:var(--profond)}
.btn.sec{background:transparent;color:var(--link)}.btn.sec:hover{background:var(--brume);border-color:var(--action)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--link);padding:0 12px}.btn.ghost:hover{background:var(--brume)}
.btn.danger{background:var(--danger);border-color:var(--danger)}
.btn.block{display:flex;width:100%}.btn.sm{min-height:44px;padding:0 16px;font-size:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.ib{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--r);background:transparent;color:var(--mu);cursor:pointer}
.ib:hover{background:var(--brume);color:var(--tx)}

/* champs : 48 px, bordure 1,5 px (3,35:1), étiquette au-dessus, aide et erreur sous le champ */
.field{display:grid;gap:6px}
.field label{font:700 13px/1.3 RS,sans-serif;color:var(--tx)}
.field .hint{font-size:13px;color:var(--mu)}
.field .err{font-size:13px;color:var(--danger);display:flex;gap:6px;align-items:center}
.input{display:flex;align-items:center;min-height:48px;border:1.5px solid var(--ctrl);border-radius:var(--r);background:var(--surface);padding:0 4px 0 14px;gap:4px}
.input:focus-within{border-color:var(--action);box-shadow:0 0 0 3px color-mix(in srgb,var(--action) 28%,transparent)}
.input input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--tx);font:400 16px/1.2 RS,sans-serif;min-height:44px}
.input.bad{border-color:var(--danger)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.check .box{flex:none;width:22px;height:22px;border:1.5px solid var(--ctrl);border-radius:var(--r-s);background:var(--surface);display:grid;place-items:center;margin-top:1px}
.check .box.on{background:var(--action);border-color:var(--action);color:#fff}

/* code à 6 chiffres (double authentification) */
.code{display:flex;gap:8px}.code span{width:48px;height:56px;border:1.5px solid var(--ctrl);border-radius:var(--r);background:var(--surface);display:grid;place-items:center;font:700 26px/1 RSC,sans-serif}
.code span.on{border-color:var(--action);box-shadow:0 0 0 3px color-mix(in srgb,var(--action) 28%,transparent)}

/* pastilles de statut : libellé + pictogramme, jamais la couleur seule */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px 0 8px;border-radius:14px;font:700 12px/1 RS,sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.chip svg{width:16px;height:16px}
.chip.ok{background:var(--ok-bg);color:var(--ok)}.chip.warn{background:var(--alerte-bg);color:var(--alerte)}.chip.bad{background:var(--danger-bg);color:var(--danger)}.chip.neutral{background:var(--brume);color:var(--mu)}

/* robustesse : 5 segments + libellé */
.meter{display:flex;gap:4px;align-items:center}.meter i{display:block;width:28px;height:6px;border-radius:3px;background:var(--ln)}
.meter.s1 i:nth-child(-n+1){background:var(--danger)}.meter.s2 i:nth-child(-n+2){background:var(--alerte)}.meter.s3 i:nth-child(-n+3){background:var(--alerte)}
.meter.s4 i:nth-child(-n+4){background:var(--ok)}.meter.s5 i:nth-child(-n+5){background:var(--ok)}

/* mot de passe affiché : lettres = texte, chiffres = action, symboles = alerte (signe visible : chasse fixe, zéro barré ou pointé) */
.pw{font-size:18px}.pw .d{color:var(--link);font-weight:700}.pw .s{color:var(--alerte);font-weight:700}

/* tuile de site (favicon via le proxy, sinon initiale) */
.fav{flex:none;width:40px;height:40px;border-radius:var(--r);background:var(--brume);color:var(--link);display:grid;place-items:center;font:700 17px/1 RS,sans-serif;overflow:hidden}
.fav img{width:24px;height:24px}

/* carte, ligne de liste, bandeau */
.card{background:var(--surface);border:1px solid var(--ln);border-radius:var(--r);padding:24px}
.row{display:flex;align-items:center;gap:16px;min-height:64px;padding:12px 16px;border-bottom:1px solid var(--ln);cursor:pointer}
.row:hover{background:var(--brume)}.row.sel{background:var(--brume);box-shadow:inset 3px 0 0 var(--action)}
.row .t{font-weight:500;color:var(--tx)}.row .s{font-size:14px;color:var(--mu)}
.banner{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);border:1px solid;font-size:15px}
.banner.info{background:var(--brume);border-color:var(--ln)}.banner.warn{background:var(--alerte-bg);border-color:var(--alerte);color:var(--tx)}.banner.bad{background:var(--danger-bg);border-color:var(--danger)}
.toast{display:inline-flex;gap:10px;align-items:center;min-height:48px;padding:0 18px;border-radius:var(--r);background:var(--nuit);color:var(--tx-nuit,#E2EAE9);font-size:15px;box-shadow:4px 4px 0 var(--ln-nuit,#31413F)}

/* navigation latérale : fond Nuit, dossier actif = rail sarcelle */
.nav{background:var(--nuit);color:#E2EAE9;display:flex;flex-direction:column;gap:2px;padding:16px 12px}
.nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--r);color:#E2EAE9;text-decoration:none;font-weight:500}
.nav a:hover{background:#182928}.nav a.act{background:#182928;box-shadow:inset 3px 0 0 var(--marque);color:#fff}
.nav .rep{color:#A8B4B3;padding:16px 12px 6px}
.nav .n{margin-left:auto;font:700 13px RSC,sans-serif;color:#A8B4B3}

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