:root{
    color-scheme: light;
    --ink:#0F2F3C;
    --ink-soft:#3E6270;
    --paper:#F6F5F0;
    --paper-raised:#FFFFFF;
    --sea:#149A8C;
    --sea-dark:#0E7268;
    --sea-light:#D9F2EE;
    --sea-bg:#D9F2EE;
    --blue:#2452A0;
    --blue-light:#DDE7F7;
    --orange:#E8890E;
    --orange-light:#FCE6C2;
    --line:#DDE1DA;
    --green:#12A24E;
    --green-bg:#CCF2DC;
    --amber:#E8890E;
    --amber-bg:#FCE6C2;
    --red:#E23B34;
    --red-bg:#FAD2CE;
    --grey:#6E7B82;
    --grey-bg:#DEE2E1;
    --purple:#8E3FBF;
    --purple-light:#EFDEF7;
    --gold:#C79A1E;
    --gold-light:#F6ECC8;
    --copper:#A85D2E;
    --copper-light:#F0DECB;
    --radius:14px;
    --radius-sm:9px;
    --shadow:0 1px 2px rgba(15,47,60,.05), 0 8px 24px rgba(15,47,60,.08);
    --shadow-sm:0 1px 2px rgba(15,47,60,.05), 0 2px 6px rgba(15,47,60,.06);
    --ease:180ms cubic-bezier(.2,.7,.3,1);
  }
  /* Mode plein soleil : fonds quasi noirs, texte blanc, couleurs en aplats francs et saturés —
     plus d'ombres subtiles ni de teintes pâles, qui disparaissent complètement en usage extérieur
     réel. Comme tout le reste de l'appli s'appuie déjà sur ces variables, ce seul bloc retourne
     l'essentiel de l'interface sans avoir à retoucher chaque écran un par un. */
  .sun-mode{
    --ink:#FFFFFF;
    --ink-soft:#E4E4E4;
    --paper:#050505;
    --paper-raised:#161616;
    --sea:#00E5C7;
    --sea-dark:#00B8A0;
    --sea-light:#00332C;
    --sea-bg:#00332C;
    --blue:#5AA6FF;
    --blue-light:#0B2A4D;
    --orange:#FFB300;
    --orange-light:#4D3300;
    --line:#3A3A3A;
    --green:#00E676;
    --green-bg:#00381A;
    --amber:#FFB300;
    --amber-bg:#4D3300;
    --red:#FF453A;
    --red-bg:#4D0F0C;
    --grey:#C4C4C4;
    --grey-bg:#2A2A2A;
    --purple:#CE93FF;
    --purple-light:#2E1548;
    --gold:#FFD60A;
    --gold-light:#4D3D00;
    --copper:#FF9E5C;
    --copper-light:#4D2A15;
    --shadow:none;
    --shadow-sm:none;
  }
  .sun-mode body, .sun-mode{ background:#000; }
  .sun-mode h1.page-title, .sun-mode .card h3, .sun-mode .list-item .name{ color:#FFFFFF; }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:#E4E7E1;
    font-family:'Inter',system-ui,sans-serif;
    color:var(--ink);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:20px 10px 60px;
  }
  @media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important;} }

  .toolbar{
    width:100%;
    max-width:980px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
    padding:10px 14px;
    background:var(--paper-raised);
    border:1px solid var(--line);
    border-radius:var(--radius);
    font-size:13px;
  }
  .toolbar .label{color:var(--grey); font-weight:600; letter-spacing:.02em; text-transform:uppercase; font-size:11px;}
  .toolbar select, .toolbar button{
    font-family:'Inter',sans-serif; font-size:13px; padding:6px 10px; border-radius:7px;
    border:1px solid var(--line); background:var(--paper); color:var(--ink); cursor:pointer;
  }
  .toolbar button.active{background:var(--sea); color:#fff; border-color:var(--sea-dark);}
  .toolbar-group{display:flex; align-items:center; gap:8px;}
  .disclaimer{
    width:100%; max-width:980px; font-size:12px; color:var(--ink-soft);
    background:var(--amber-bg); border:1px solid #E3C79A; border-radius:8px;
    padding:8px 12px; margin-bottom:16px; line-height:1.5;
  }
  .disclaimer b{color:var(--amber);}

  .phone{
    width:100%;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:var(--shadow);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:max-width .25s ease;
  }
  .phone.w360{max-width:360px;}
  .phone.w420{max-width:420px;}
  .phone.wfull{max-width:820px;}

  @media (max-width:480px){
    body{ padding:8px 6px; }
    .toolbar .toolbar-group:nth-child(2), .toolbar .toolbar-group:nth-child(3){ display:none; } /* réglages d'aperçu desktop uniquement, on garde le sélecteur de compte */
    .disclaimer{ display:none; }
    .toolbar{ padding:8px 10px; }
    .phone, .phone.w360, .phone.w420, .phone.wfull{
      max-width:100%; width:100%; border-radius:0; border:none; box-shadow:none;
      overflow:visible; /* ne jamais rogner le contenu réel sur un vrai téléphone */
    }
    main.screen{ padding:14px 10px 24px; overflow-x:hidden; }
  }

  header.app-header{
    background:var(--paper-raised); color:var(--ink); border-bottom:1px solid var(--line);
    padding:10px 14px; display:flex; flex-direction:column; gap:5px;
  }
  header.app-header .brand-row{ display:flex; align-items:center; gap:9px; }
  header.app-header .brand-logo-sm{
    width:30px; height:30px; border-radius:7px; object-fit:contain; flex-shrink:0;
    box-shadow:0 1px 3px rgba(0,0,0,.15); border:1px solid var(--line);
  }
  header.app-header .club-name{
    font-family:'Oswald',sans-serif; font-weight:700; font-size:15.5px; letter-spacing:.01em; color:var(--ink);
  }
  header.app-header .who-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  header.app-header .registre-label{ font-size:11px; color:var(--grey); white-space:nowrap; }
  header.app-header .role-chip{
    display:inline-flex; align-items:center; gap:5px; background:var(--sea); color:#fff;
    font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap;
  }
  .brand-logo{
    width:42px; height:42px; border-radius:10px; background:#fff; padding:2px;
    box-shadow:0 2px 6px rgba(0,0,0,.25); flex-shrink:0; object-fit:contain;
  }
  .burgee{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid var(--orange);display:inline-block;}
  .notif-bell{
    position:relative; background:var(--paper); border:1px solid var(--line); border-radius:8px;
    padding:6px; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; margin-left:auto;
    z-index:27;
  }
  .sun-toggle{
    background:var(--paper); border:1px solid var(--line); border-radius:8px;
    padding:5px 8px; font-size:15px; cursor:pointer; line-height:1;
  }
  .sun-mode .sun-toggle{ background:#2A2A00; border-color:#FFD60A; }
  .notif-badge{
    position:absolute; top:-6px; right:-6px; background:var(--red); color:#fff; font-size:10px; font-weight:700;
    border-radius:10px; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; padding:0 3px;
    box-shadow:0 0 0 2px var(--ink);
  }
  .notif-backdrop{
    display:none; position:fixed; inset:0; background:rgba(20,26,30,.35); z-index:24;
  }
  .notif-backdrop.open{display:block;}
  .notif-panel{
    display:none; position:fixed; top:64px; right:16px; width:300px; max-width:calc(100vw - 32px); max-height:360px; overflow-y:auto;
    background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; padding:12px 14px;
    box-shadow:var(--shadow); z-index:26;
  }
  .notif-panel.open{display:block;}
  .notif-panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
  .notif-panel-head h4{margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);}
  .notif-close{
    background:none; border:none; cursor:pointer; color:var(--ink-soft); font-size:16px; line-height:1;
    padding:6px; margin:-6px; border-radius:6px;
  }
  .notif-close:hover{background:var(--paper);}
  .notif-line{padding:8px 0; border-bottom:1px solid var(--line); font-size:12.5px; line-height:1.4;}
  .notif-line:last-child{border-bottom:none;}
  .notif-line .t{color:var(--grey); font-size:10.5px; margin-top:2px;}
  .role-pill{
    font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; font-weight:700;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
    border-radius:20px; padding:4px 10px; white-space:nowrap;
  }

  main.screen{
    flex:1; overflow-y:auto; padding:18px 16px 28px; min-height:420px;
  }
  h1.page-title{font-family:'Oswald',sans-serif; font-size:21px; font-weight:600; margin:0 0 4px; letter-spacing:.01em;}
  p.page-sub{margin:0 0 18px; color:var(--ink-soft); font-size:13px; line-height:1.5;}

  .card{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
    padding:16px; margin-bottom:14px; box-shadow:var(--shadow-sm); transition:box-shadow var(--ease), transform var(--ease);
  }
  .card h3{margin:0 0 10px; font-size:14.5px; font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.005em;}
  .row{display:flex; justify-content:space-between; align-items:center; gap:10px;}
  .muted{color:var(--grey); font-size:12.5px;}
  .mono{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-soft);}

  .flag{width:0;height:0;display:inline-block; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid; margin-right:6px; vertical-align:middle;}
  .badge{
    display:inline-flex; align-items:center; font-size:11.5px; font-weight:700;
    padding:4px 10px 4px 7px; border-radius:20px; letter-spacing:.01em; box-shadow:0 1px 3px rgba(0,0,0,.12);
  }
  .badge.badge-alert{ font-size:13.5px; font-weight:800; padding:7px 16px 7px 11px; box-shadow:0 2px 8px rgba(0,0,0,.22); }
  .list-item.alert-row .name{ font-size:15.5px; font-weight:800; }
  .list-item.alert-row .meta{ font-size:12.5px; font-weight:600; color:var(--ink); }
  .badge.green{background:var(--green); color:#fff;} .badge.green .flag{border-left-color:#fff;}
  .badge.amber{background:var(--amber); color:#fff;} .badge.amber .flag{border-left-color:#fff;}
  .badge.orange{background:var(--orange); color:#fff;} .badge.orange .flag{border-left-color:#fff;}
  .badge.red{background:var(--red); color:#fff;} .badge.red .flag{border-left-color:#fff;}
  .badge.grey{background:var(--grey); color:#fff;} .badge.grey .flag{border-left-color:#fff;}
  .badge.sea{background:var(--blue); color:#fff;} .badge.sea .flag{border-left-color:#fff;}
  .badge.purple{background:var(--purple); color:#fff;} .badge.purple .flag{border-left-color:#fff;}
  .badge.gold{background:var(--gold); color:#fff;} .badge.gold .flag{border-left-color:#fff;}
  .badge.copper{background:var(--copper); color:#fff;} .badge.copper .flag{border-left-color:#fff;}
  .badge.teal{background:var(--sea); color:#fff;} .badge.teal .flag{border-left-color:#fff;}

  .btn{
    font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px; border-radius:var(--radius-sm);
    padding:12px 16px; border:1px solid transparent; cursor:pointer; text-align:center;
    transition:transform var(--ease), background var(--ease), border-color var(--ease), box-shadow var(--ease);
  }
  .btn:active{transform:scale(.97);}
  .btn:focus-visible, select:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2.5px solid var(--sea); outline-offset:2px;
  }
  .btn-primary{background:var(--sea); color:#fff; box-shadow:0 2px 8px rgba(14,110,122,.28);}
  .btn-primary:hover{background:var(--sea-dark);}
  .btn-outline{background:transparent; border-color:var(--line); color:var(--ink);}
  .btn-outline:hover{border-color:var(--sea); background:var(--sea-light);}
  .btn-danger{background:var(--red); color:#fff;}
  .btn-block{display:block; width:100%; margin-top:10px;}
  .btn[disabled]{opacity:.45; cursor:not-allowed;}
  .btn[disabled]:active{transform:none;}
  .btn-sm{padding:8px 12px; font-size:12.5px; border-radius:8px;}

  .fam-badge{
    display:inline-flex; align-items:center; justify-content:center; border-radius:10px; flex-shrink:0;
  }
  .list-item{
    display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px;
    padding:13px 10px; margin:0 -6px; border-radius:10px; border-bottom:1px solid var(--line); cursor:pointer;
    transition:background var(--ease), border-color var(--ease);
  }
  .list-item .info{flex:1; min-width:0; display:flex; align-items:flex-start; gap:11px;}
  .list-item:last-child{border-bottom:none;}
  .list-item:hover{background:var(--sea-light); border-radius:10px;}
  .list-item:active{background:#CDEBE6;}
  .list-item .name{font-weight:600; font-size:13.5px;}
  .list-item .meta{font-size:11.5px; color:var(--grey); margin-top:2px;}
  /* Le badge de droite passe systématiquement sous le contenu plutôt qu'à côté — de façon
     permanente, pas seulement sur petit écran. Une media query sur la largeur ne suffit pas ici :
     elle réagit à la largeur réelle du navigateur, pas à celle d'un cadre d'aperçu rétréci
     artificiellement, où le chevauchement peut survenir même sur un écran large. Limité aux lignes
     à contenu potentiellement haut (alert-row) — les lignes simples gardent leur mise en page
     compacte habituelle, elles n'ont jamais ce problème. */
  .list-item.alert-row{ flex-direction:column; align-items:stretch; }
  .list-item.alert-row > *:not(.info){ align-self:flex-start; margin-top:10px; }
  .list-item.alert-row .info > div > div[style*="display:inline-block"]{ margin-top:6px; }
  .list-item.alert-row .info > div > div[style*="display:inline-block"] + div[style*="display:inline-block"]{ margin-top:8px; }

  .progress-track{background:var(--grey-bg); border-radius:20px; height:10px; overflow:hidden;}
  .progress-fill{background:var(--sea); height:100%; border-radius:20px; transition:width .3s ease;}
  .search-input{position:relative; margin-bottom:12px;}
  .search-input input.field{padding-left:34px;}
  .search-input svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--grey); pointer-events:none;}

  .toggle-group{display:flex; gap:7px; flex-wrap:wrap; margin-top:9px;}
  .toggle{
    flex:1; min-width:70px; text-align:center; font-size:12px; font-weight:600; padding:9px 6px;
    border:1.5px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; background:var(--paper-raised);
    transition:transform var(--ease), background var(--ease), border-color var(--ease);
  }
  .toggle:active{transform:scale(.96);}
  .toggle.sel-CONFORME.selected{background:var(--green-bg); border-color:var(--green); color:var(--green);}
  .toggle.sel-SURVEILLANCE.selected{background:var(--amber-bg); border-color:var(--amber); color:var(--amber);}
  .toggle.sel-ANOMALIE.selected{background:var(--red-bg); border-color:var(--red); color:var(--red);}
  .toggle.sel-NA.selected{background:var(--grey-bg); border-color:var(--grey); color:var(--grey);}

  textarea, select.field, input.field{
    width:100%; font-family:'Inter',sans-serif; font-size:13px; padding:10px 11px;
    border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper-raised); color:var(--ink);
    transition:border-color var(--ease);
  }
  label.field-label{font-size:11.5px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; display:block; margin:10px 0 4px;}

  .empty{
    text-align:center; padding:34px 10px; color:var(--grey);
  }
  .empty .flag{border-left-color:var(--grey);}

  nav.bottom-nav{
    display:flex; gap:3px; border-bottom:1px solid var(--line); background:var(--paper-raised);
    padding:8px 8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  nav.bottom-nav::-webkit-scrollbar{display:none;}
  nav.bottom-nav button{
    flex:0 0 auto; min-width:82px; background:color-mix(in srgb, var(--tab-color, var(--grey)) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--tab-color, var(--grey)) 28%, transparent); padding:9px 11px; font-family:'Inter'; font-size:13px;
    font-weight:700; color:var(--tab-color, var(--grey)); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px;
    border-radius:var(--radius-sm); transition:background var(--ease), color var(--ease); opacity:1;
  }
  /* Tablette et desktop : la barre a de la place, les onglets en profitent au lieu de rester
     collés à gauche avec du vide à droite — ils s'élargissent, se centrent, et gagnent en confort. */
  @media (min-width:560px){
    nav.bottom-nav{ justify-content:center; gap:10px; padding:10px 16px; }
    nav.bottom-nav button{ flex:0 1 200px; min-width:110px; padding:12px 18px; font-size:14px; gap:7px; }
    nav.bottom-nav button svg{ width:22px; height:22px; }
  }
  @media (min-width:900px){
    nav.bottom-nav{ gap:14px; padding:12px 26px; }
    nav.bottom-nav button{ flex:0 1 240px; padding:14px 22px; font-size:14.5px; gap:8px; }
    nav.bottom-nav button svg{ width:23px; height:23px; }
  }
  nav.bottom-nav button svg{transition:transform var(--ease); width:24px; height:24px; stroke-width:2;}
  nav.bottom-nav button.active{background:var(--tab-color, var(--sea)); border-color:var(--tab-color, var(--sea)); color:#fff; opacity:1; box-shadow:0 2px 6px rgba(0,0,0,.15);}
  nav.bottom-nav button.active svg{transform:scale(1.1);}
  nav.bottom-nav button{position:relative;}
  .nav-blink{animation:urgentBlink 1.1s ease-in-out infinite;}
  @keyframes urgentBlink{
    0%, 100% { background:var(--red-bg); border-color:var(--red); color:var(--red); }
    50% { background:var(--red); border-color:var(--red); color:#fff; }
  }
  .nav-freq-badge{
    position:absolute; top:2px; right:6px; width:14px; height:14px; border-radius:50%;
    background:var(--paper-raised); border:1px solid currentColor; color:inherit;
    font-size:8.5px; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1;
  }
  nav.bottom-nav button:hover{opacity:1;}
  nav.bottom-nav button:active{transform:scale(.95);}

  .audit-toggle{
    position:fixed; right:16px; bottom:16px; background:var(--ink); color:#fff; border:none;
    border-radius:22px; padding:9px 14px; font-size:12px; font-weight:600; cursor:pointer; box-shadow:var(--shadow); z-index:20;
  }
  .audit-panel{
    position:fixed; right:16px; bottom:60px; width:340px; max-height:440px; overflow-y:auto;
    background:var(--ink); color:#DCE6EA; border-radius:12px; padding:12px 14px; font-size:11.5px;
    box-shadow:var(--shadow); z-index:20; display:none; font-family:'Inter',sans-serif; line-height:1.5;
  }
  .audit-panel.open{display:block;}
  .audit-panel h4{margin:0 0 8px; color:#fff; font-family:'Inter'; font-size:12px; text-transform:uppercase; letter-spacing:.04em;}
  .audit-line{border-bottom:1px solid rgba(255,255,255,.08); padding:5px 0;}
  .audit-line b{color:#8FD1D9;}
  .historique-day-label{margin:10px 0 4px; color:#8FD1D9; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
  .historique-day-label:first-child{margin-top:0;}
  .historique-card{display:flex; align-items:flex-start; gap:8px; padding:7px 6px; border-radius:8px; cursor:pointer; margin-bottom:2px;}
  .historique-card:hover{background:rgba(255,255,255,.08);}
  .historique-card .fam-badge{flex:none;}
  .historique-card-body{min-width:0; flex:1;}
  .historique-card-title{color:#fff; font-weight:600; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .historique-card-meta{color:#9FB0B8; font-size:10.5px; margin-top:1px;}
  .historique-type{font-weight:700;}
  .historique-type-red{color:var(--red, #E05252);}
  .historique-type-orange{color:var(--copper, #C97A3D);}
  .historique-type-yellow{color:var(--amber, #D8A93B);}
  .historique-type-green{color:var(--green, #4E9E6F);}
  .historique-empty, .historique-error{color:#9FB0B8; font-size:11.5px; padding:8px 2px;}
  .historique-more{display:block; width:100%; margin-top:8px; background:rgba(255,255,255,.08); color:#DCE6EA; border:1px solid rgba(255,255,255,.2); border-radius:6px; padding:6px; font-size:11px; cursor:pointer;}
  .historique-more:hover{background:rgba(255,255,255,.15);}

  /* Refonte UX fiche/maintenance (15/08/2026) : bandeau d'action, liste d'anomalies, frise
     historique locale à la fiche — surfaces claires (carte), contrairement au panneau Historique
     global ci-dessus qui reste sur fond sombre. */
  .fiche-action-banner{display:flex; align-items:center; gap:10px; background:var(--blue-light); border:1px solid var(--blue); border-radius:var(--radius); padding:10px 14px; margin-top:10px;}
  .fiche-action-banner.quiet{background:var(--paper); border-color:var(--line);}
  .fiche-action-banner p{flex:1; margin:0; font-size:12.5px; color:var(--ink);}
  .fiche-action-banner .banner-icon{font-style:normal; font-size:17px; flex:none;}
  .fiche-anomaly-row{display:flex; align-items:flex-start; gap:10px; padding:8px 2px; border-bottom:1px solid var(--line);}
  .fiche-anomaly-row:last-child{border-bottom:none;}
  .fiche-anomaly-dot{width:8px; height:8px; border-radius:50%; margin-top:5px; flex:none;}
  .fiche-anomaly-body{min-width:0; flex:1;}
  .fiche-anomaly-title{font-size:13px; font-weight:600; color:var(--ink);}
  .fiche-anomaly-meta{font-size:11px; color:var(--ink-soft); margin-top:2px;}
  .fiche-anomaly-action{flex:none; padding-top:1px;}
  .fiche-timeline{position:relative;}
  .fiche-timeline-day{margin:10px 0 4px; color:var(--ink-soft); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
  .fiche-timeline-day:first-child{margin-top:0;}
  .fiche-timeline-item{display:flex; align-items:flex-start; gap:9px; padding:5px 2px;}
  .fiche-timeline-dot{width:8px; height:8px; border-radius:50%; margin-top:6px; flex:none; background:var(--line);}
  .fiche-timeline-dot.historique-type-red{background:var(--red, #E05252);}
  .fiche-timeline-dot.historique-type-orange{background:var(--copper, #C97A3D);}
  .fiche-timeline-dot.historique-type-yellow{background:var(--amber, #D8A93B);}
  .fiche-timeline-dot.historique-type-green{background:var(--green, #4E9E6F);}
  .fiche-timeline-body{min-width:0; flex:1;}
  .fiche-timeline-title{font-size:12.5px; color:var(--ink);}
  .fiche-timeline-meta{font-size:11px; color:var(--ink-soft); margin-top:1px;}

  .toast{
    position:fixed; top:14px; left:50%; transform:translateX(-50%);
    background:var(--ink); color:#fff; padding:10px 18px; border-radius:30px; font-size:13px; font-weight:600;
    box-shadow:var(--shadow); z-index:30; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(6px);}

  .confirm-overlay{
    position:fixed; inset:0; background:rgba(11,34,51,.55); z-index:40;
    display:none; align-items:center; justify-content:center; padding:20px;
  }
  .confirm-overlay.show{display:flex;}
  .confirm-modal{
    background:var(--paper-raised); border-radius:var(--radius); padding:20px;
    max-width:340px; width:100%; box-shadow:var(--shadow);
  }
  .confirm-modal p{font-size:14px; line-height:1.5; margin:0; color:var(--ink);}

  .fiche-overlay{
    position:fixed; inset:0; background:rgba(11,34,51,.55); z-index:45;
    display:none; align-items:flex-start; justify-content:center; padding:24px 16px; overflow-y:auto;
  }
  .fiche-overlay.show{display:flex;}
  .fiche-modal{
    background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow);
    max-width:420px; width:100%; margin-top:20px; overflow:hidden;
  }
  .fiche-modal-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 16px; background:var(--sea); position:sticky; top:0; z-index:1;
  }
  .fiche-modal-title{color:#fff; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.03em;}
  .fiche-modal-close{
    background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); color:#fff;
    border-radius:8px; padding:6px 12px; font-size:12.5px; font-weight:600; cursor:pointer;
  }
  .fiche-modal-close:hover{background:rgba(255,255,255,.3);}
  #ficheModalBody{padding:16px; max-height:80vh; overflow-y:auto;}

  .kpi-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .kpi{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:12px; text-align:left;}
  .kpi .n{font-family:'Oswald',sans-serif; font-size:22px; font-weight:600;}
  .kpi .l{font-size:11px; color:var(--grey); text-transform:uppercase; letter-spacing:.03em;}

  .status-hero{
    border-radius:var(--radius); padding:18px; margin-bottom:14px; color:#fff;
  }
  .status-hero.green{background:linear-gradient(135deg, var(--green), #16572F);}
  .status-hero.amber{background:linear-gradient(135deg, var(--amber), #7A4712);}
  .status-hero.red{background:linear-gradient(135deg, var(--red), #7A2622);}
  .status-hero.sea{background:linear-gradient(135deg, var(--sea), var(--sea-dark));}
  .status-hero .flag{border-left-color:#fff;}
  .status-hero .h{font-family:'Oswald',sans-serif; font-size:20px; font-weight:600; margin:6px 0 4px;}
  .status-hero .s{font-size:12.5px; opacity:.9;}