/* =============================================================================
   ALGOREL · Remontée des besoins — feuille de style des maquettes
   Charte dérivée du logo Algorel (couleurs échantillonnées sur le fichier fourni).

   Marine Algorel     #0E326A   barre latérale, boutons primaires, titres, liens
   Marine foncé       #0A2450   survol des boutons primaires
   Marine pâle        #E9EEF7   fonds d'encart, ligne de menu active
   Or Algorel         #EFC342   accent d'identité, puce du statut « à traiter »
   Encre              #14203A   texte principal
   Gris texte         #5A6580 / #8A93A8      secondaire / tertiaire
   Filets             #DCE0E9 / #EDEFF4      cartes / lignes de tableau
   Fond applicatif    #F4F6FA
   Statut « déjà disponible »   texte #0F6B4A  fond #EAF4F0  filet #C4E1D5
   Statut « à traiter »         texte #7A5A0B  fond #FDF6E4  filet #F0DFA8
   Statut « anomalie »          texte #C0182B  fond #FCECEE  filet #F4CBD1

   Typographie : Outfit (interface) et IBM Plex Mono (codes G0, références, nombres),
   chargées depuis Google Fonts. Sans connexion, le repli s'applique.
   ============================================================================= */
*{box-sizing:border-box}
  body{margin:0}
  .root{width:1440px;height:900px;overflow:hidden;display:flex;flex-direction:column;
    background:#F4F6FA;font-family:Outfit,'Avenir Next','Segoe UI Variable','Helvetica Neue',system-ui,sans-serif;color:#14203A;
    -webkit-font-smoothing:antialiased}
  a{color:#0E326A;text-decoration:none} a:hover{color:#0A2450}
  .topbar{height:64px;flex:none;background:#fff;border-bottom:1px solid #DCE0E9;
    display:flex;align-items:center;padding:0 24px;gap:20px}
  .topbar img{height:30px;width:auto;display:block}
  .appname{font-size:13px;font-weight:500;color:#5A6580;border-left:1px solid #DCE0E9;padding-left:16px}
  .tbright{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12.5px;color:#5A6580}
  .avatar{width:30px;height:30px;border-radius:3px;background:#0E326A;color:#fff;font-size:11px;font-weight:600;
    display:flex;align-items:center;justify-content:center;letter-spacing:.03em}
  .shell{flex:1;display:flex;min-height:0}
  .side{width:232px;flex:none;background:#0E326A;padding:16px 0;display:flex;flex-direction:column;gap:1px}
  .sidelbl{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.48);
    font-weight:600;padding:12px 20px 7px}
  .nav{display:flex;align-items:center;gap:11px;padding:10px 20px;font-size:13px;color:rgba(255,255,255,.78)}
  .nav.on{background:rgba(255,255,255,.10);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 #EFC342}
  .nav .cnt{margin-left:auto;font-size:11px;font-weight:600;color:rgba(255,255,255,.6);
    font-variant-numeric:tabular-nums}
  .main{flex:1;min-width:0;display:flex;flex-direction:column;background:#F4F6FA}
  .head{flex:none;background:#fff;border-bottom:1px solid #DCE0E9;padding:18px 28px 0}
  .crumb{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:#8A93A8;font-weight:600;margin:0 0 7px}
  h1{font-size:21px;font-weight:600;margin:0;letter-spacing:-.015em}
  .sub{font-size:13px;color:#5A6580;margin:6px 0 0;line-height:1.45}
  .headrow{display:flex;align-items:flex-start;gap:20px}
  .headrow .acts{margin-left:auto;display:flex;gap:8px;padding-top:4px}
  .tabs{display:flex;margin-top:16px}
  .tab{padding:11px 2px;margin-right:26px;font-size:13px;color:#5A6580;font-weight:500}
  .tab.on{color:#0E326A;font-weight:600;box-shadow:inset 0 -2px 0 #0E326A}
  .content{flex:1;min-height:0;padding:20px 28px;display:flex;flex-direction:column;gap:16px;overflow:hidden}
  .card{background:#fff;border:1px solid #DCE0E9;border-radius:4px;display:flex;flex-direction:column;
    min-height:0;overflow:hidden}
  .cardhd{flex:none;display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid #EDEFF4}
  .cardhd h2{font-size:13px;font-weight:600;margin:0}
  .cardhd .acts{margin-left:auto;display:flex;align-items:center;gap:8px}
  .btn{font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:3px;
    border:1px solid #0E326A;background:#0E326A;color:#fff;display:inline-flex;align-items:center;gap:8px}
  .btn.sec{background:#fff;color:#0E326A}
  .btn.ghost{background:#fff;border-color:#DCE0E9;color:#4A5568;font-weight:500}
  .btn.sm{padding:5px 11px;font-size:11.5px}
  table{width:100%;border-collapse:collapse;font-size:12.5px}
  th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#5A6580;font-weight:600;
    padding:9px 12px;border-bottom:1px solid #DCE0E9;background:#F7F9FC;white-space:nowrap}
  td{padding:8px 12px;border-bottom:1px solid #EDEFF4;vertical-align:middle}
  tr:last-child td{border-bottom:none}
  .mono{font-family:'IBM Plex Mono','SF Mono',Menlo,Consolas,ui-monospace,monospace;font-size:11.5px;font-variant-numeric:tabular-nums}
  .num{text-align:right;font-variant-numeric:tabular-nums}
  .chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;padding:3px 8px;
    border-radius:2px;border:1px solid;white-space:nowrap}
  .dot{width:6px;height:6px;border-radius:50%;flex:none}
  .muted{color:#5A6580}
  .tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;flex:none}
  .tile{background:#fff;border:1px solid #DCE0E9;border-radius:4px;padding:14px 16px;
    display:flex;flex-direction:column;gap:6px}
  .tile .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:#5A6580;font-weight:600}
  .tile .v{font-size:27px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1.05}
  .tile .h{font-size:11.5px;color:#8A93A8;line-height:1.4}
  .field{display:flex;flex-direction:column;gap:6px}
  .field label{font-size:11px;font-weight:600;color:#4A5568}
  .input{border:1px solid #DCE0E9;border-radius:3px;padding:8px 11px;font-size:12.5px;background:#fff;color:#4A5568}
  .search{display:flex;align-items:center;gap:8px;border:1px solid #DCE0E9;border-radius:3px;padding:7px 11px;
    background:#fff;font-size:12.5px;color:#8A93A8;min-width:260px}
  .bar{height:6px;border-radius:2px;background:#EDEFF4;overflow:hidden;display:flex}
  .note{background:#E9EEF7;border:1px solid #C6D4EA;border-radius:3px;padding:11px 14px;font-size:12.5px;
    color:#12305F;display:flex;gap:10px;align-items:flex-start;line-height:1.45}
  .note.warn{background:#FDF6E4;border-color:#F0DFA8;color:#6E4F08}

  .clk{cursor:pointer}
  .nav,.tab,.btn,.errcard,.filt{cursor:pointer}
  .nav:hover{background:rgba(255,255,255,.07)}
  .btn:hover{filter:brightness(1.08)}
  .errcard{border:1px solid #DCE0E9;border-radius:3px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
  .errcard:hover{border-color:#0E326A}
  .filt{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:12.5px}
  .filt:hover{background:#F7F9FC}
  .step{display:flex;align-items:center;gap:10px;flex:1;min-width:0}

/* ---- chrome du visualiseur (n'appartient pas à la maquette) ---- */
html,body.viewer{margin:0;background:#E7EAF0;font-family:Outfit,'Helvetica Neue',system-ui,sans-serif}
.viewer .wrap{width:1440px;margin:0 auto;padding:0 0 32px}
.viewer .vbar{display:flex;align-items:center;gap:16px;height:46px;font-size:12.5px;color:#5A6580}
.viewer .vbar b{color:#14203A;font-weight:600}
.viewer .vbar a{color:#0E326A;font-weight:600;text-decoration:none}
.viewer .vbar a:hover{text-decoration:underline}
.viewer .vbar .sp{margin-left:auto}
.viewer .frame{width:1440px;height:900px;box-shadow:0 2px 14px rgba(14,50,106,.14);overflow:hidden}
.viewer .scroll{overflow-x:auto}
/* liens de navigation dans la barre latérale des pages statiques */
.side a.nav{color:rgba(255,255,255,.78);text-decoration:none}
.side a.nav.on{color:#fff}
.side a.nav:hover{background:rgba(255,255,255,.07);text-decoration:none}
.side .nav.dead{opacity:.6}
td a.lnk{color:#0E326A;font-weight:600;font-size:12px;text-decoration:none}
td a.lnk:hover{text-decoration:underline}
.crumb a{color:#0E326A;text-decoration:none}
.crumb a:hover{text-decoration:underline}
/* ---- index ---- */
.idx{width:1000px;margin:0 auto;padding:48px 0 64px}
.idx img{height:38px;display:block;margin-bottom:28px}
.idx h1{font-size:26px;margin:0 0 8px;color:#14203A;letter-spacing:-.02em}
.idx p.lead{font-size:14px;color:#5A6580;margin:0 0 32px;line-height:1.55;max-width:720px}
.idx h2{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#8A93A8;margin:36px 0 14px}
.idx .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.idx .it{display:block;background:#fff;border:1px solid #DCE0E9;border-radius:4px;padding:16px 18px;
  text-decoration:none;border-left:3px solid #0E326A}
.idx .it:hover{border-color:#0E326A;box-shadow:0 2px 10px rgba(14,50,106,.08)}
.idx .it.live{border-left-color:#EFC342}
.idx .it .t{font-size:14px;font-weight:600;color:#14203A;display:flex;align-items:center;gap:9px}
.idx .it .d{font-size:12.5px;color:#5A6580;margin-top:5px;line-height:1.45}
.idx .tag{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;
  border-radius:2px;background:#FDF6E4;color:#7A5A0B;border:1px solid #F0DFA8}
.idx .foot{margin-top:40px;padding-top:20px;border-top:1px solid #D3D8E2;font-size:12px;color:#8A93A8;line-height:1.6}