/* Suivi EPI — DSC Paris 9 Plongée
   Thème "eaux peu profondes" dérivé du logo du club :
   marine #2D1F78 · lagon #A8D0D8 · jaune #F0E048
*/
:root{
  /* Identité */
  --marine:#2d1f78;        /* bleu profond du logo */
  --marine-d:#231860;      /* marine assombri (hover, header) */
  --marine-l:#4936a8;      /* marine éclairci */
  --lagon:#a8d0d8;         /* bleu clair du logo */
  --lagon-pale:#e8f3f5;    /* fond très pâle */
  --lagon-mid:#cfe6ea;     /* surfaces secondaires */
  --jaune:#f0e048;         /* accent signature */
  --jaune-d:#d9c92e;       /* jaune assombri pour contraste texte */

  /* Surfaces & texte */
  --bg:#eef6f8;            /* fond page */
  --card:#ffffff;          /* cartes */
  --line:#d4e6ea;          /* filets clairs */
  --line2:#bcd8de;         /* filets marqués */
  --ink:#1c2541;           /* texte principal (marine très foncé) */
  --ink-soft:#4a5680;      /* texte secondaire */
  --ink-mute:#8a96b4;      /* texte discret */

  /* Statuts (lisibles sur fond clair) */
  --ok:#1f9d6b;   --ok-bg:#e2f5ec;
  --warn:#c8860a; --warn-bg:#fdf2da;
  --danger:#d6453f; --danger-bg:#fce8e7;
  --neutral:#6b7aa0; --neutral-bg:#eef1f7;

  --radius:14px;
  --shadow:0 1px 3px rgba(45,31,120,.06), 0 6px 20px rgba(45,31,120,.06);
  --shadow-lg:0 12px 40px rgba(45,31,120,.18);
  --touch:44px;            /* cible tactile minimale */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(900px 500px at 100% -5%, #d8edf1 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);min-height:100vh;line-height:1.5;
  -webkit-tap-highlight-color:transparent;
}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
button{font-family:inherit}
h2{color:var(--marine)}

/* ───────── En-tête ───────── */
header{
  background:linear-gradient(180deg,var(--marine) 0%,var(--marine-d) 100%);
  position:sticky;top:0;z-index:50;
  box-shadow:0 2px 16px rgba(35,24,96,.25);
}
.hd{display:flex;align-items:center;gap:14px;padding:12px 0}
.logo{
  width:54px;height:54px;flex:0 0 auto;
  display:grid;place-items:center;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.logo img{width:54px;height:54px;object-fit:contain}
.brand h1{font-size:18px;font-weight:800;letter-spacing:.2px;color:#fff;line-height:1.1}
.brand p{font-size:11px;color:var(--lagon);letter-spacing:1.6px;text-transform:uppercase;font-weight:600;margin-top:2px}
.hd .spacer{flex:1}

/* statut connexion + utilisateur */
.netbox{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.net{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:6px 11px;border-radius:20px;background:rgba(255,255,255,.14);color:#fff;white-space:nowrap}
.net .dot{width:8px;height:8px;border-radius:50%;background:var(--lagon)}
.net.online .dot{background:#7ee0a8;box-shadow:0 0 8px #7ee0a8}
.net.offline .dot{background:var(--jaune)}
.net.syncing .dot{background:#fff;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.3}}
.pending{font-size:11px;background:var(--jaune);color:var(--marine-d);font-weight:800;padding:3px 9px;border-radius:20px}
.pending.zero{display:none}

.userbox{display:flex;align-items:center;gap:8px}
.user-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:7px 12px;border-radius:20px;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;white-space:nowrap;min-height:34px}
.user-chip:hover{background:rgba(255,255,255,.26)}
.user-dot{width:8px;height:8px;border-radius:50%;background:var(--lagon)}
.user-dot.admin{background:var(--jaune);box-shadow:0 0 8px var(--jaune)}
.btn-link{background:none;border:none;color:var(--lagon);font-size:12px;cursor:pointer;text-decoration:underline;padding:6px}
.btn-link:hover{color:#fff}

/* ───────── Onglets ───────── */
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:13px 20px;font-size:14px;font-weight:600;color:var(--lagon);
  background:none;border:none;cursor:pointer;position:relative;white-space:nowrap;
  border-bottom:3px solid transparent;min-height:var(--touch);
}
.tab:hover{color:#fff}
.tab.active{color:#fff}
.tab.active::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--jaune);border-radius:3px 3px 0 0}
.tab .cnt{font-size:11px;background:rgba(255,255,255,.18);color:#fff;padding:1px 8px;border-radius:20px;margin-left:6px;font-weight:700}
.tab.active .cnt{background:var(--jaune);color:var(--marine-d)}

/* ───────── KPIs ───────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:24px 0}
.kpi{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;position:relative;overflow:hidden;box-shadow:var(--shadow);
}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--marine)}
.kpi.ok::before{background:var(--ok)}
.kpi.warn::before{background:var(--warn)}
.kpi.danger::before{background:var(--danger)}
.kpi .v{font-size:30px;font-weight:800;letter-spacing:-1px;color:var(--marine)}
.kpi .l{font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px;margin-top:2px;font-weight:600}
.kpi.ok .v{color:var(--ok)}.kpi.warn .v{color:var(--warn)}.kpi.danger .v{color:var(--danger)}

/* ───────── Contrôles ───────── */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.search{flex:1;min-width:200px;display:flex;align-items:center;gap:9px;background:var(--card);border:1.5px solid var(--line2);border-radius:11px;padding:0 14px;min-height:var(--touch)}
.search:focus-within{border-color:var(--marine-l);box-shadow:0 0 0 3px rgba(73,54,168,.12)}
.search input{flex:1;background:none;border:none;color:var(--ink);padding:11px 0;font-size:15px;outline:none}
.search svg{width:18px;height:18px;color:var(--ink-mute)}
.search input::placeholder{color:var(--ink-mute)}
.filter{background:var(--card);border:1.5px solid var(--line2);border-radius:11px;color:var(--ink);padding:0 14px;font-size:14px;cursor:pointer;outline:none;min-height:var(--touch);font-weight:500}
.filter:focus{border-color:var(--marine-l)}

.chip{padding:9px 15px;border-radius:22px;font-size:13px;font-weight:600;cursor:pointer;background:var(--card);border:1.5px solid var(--line2);color:var(--ink-soft);transition:.15s;min-height:38px}
.chip:hover{border-color:var(--marine-l);color:var(--marine)}
.chip.active{background:var(--marine);color:#fff;border-color:var(--marine)}

/* ───────── Boutons ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:11px;padding:12px 18px;font-size:15px;font-weight:700;cursor:pointer;transition:.15s;min-height:var(--touch)}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--jaune);color:var(--marine-d);box-shadow:0 2px 8px rgba(217,201,46,.4)}
.btn-primary:hover{background:#f5e85f;transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-marine{background:var(--marine);color:#fff}
.btn-marine:hover{background:var(--marine-l)}
.btn-ghost{background:var(--card);color:var(--marine);border:1.5px solid var(--line2)}
.btn-ghost:hover{border-color:var(--marine-l)}
.btn-danger{background:var(--danger-bg);color:var(--danger);border:1.5px solid #f3c4c1}
.btn-danger:hover{background:#f9d9d7}
.btn-sm{padding:9px 14px;font-size:13px;min-height:38px}

/* ───────── Tableau ───────── */
.tbl-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.tbl-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:820px}
thead th{text-align:left;padding:13px 16px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-soft);background:var(--lagon-pale);border-bottom:2px solid var(--line2);white-space:nowrap;cursor:pointer;user-select:none;font-weight:700}
thead th:hover{color:var(--marine);background:var(--lagon-mid)}
thead th .ar{opacity:.5;font-size:9px}
tbody td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--lagon-pale)}
.num-cell{font-weight:800;color:var(--marine);width:46px}
.marque{font-weight:700;color:var(--ink)}
.sub{font-size:12px;color:var(--ink-mute);margin-top:2px}
.mono{font-family:'Consolas','SF Mono',monospace;font-size:12.5px;color:var(--ink-soft)}

/* badges statut */
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:8px;font-size:12px;font-weight:700;white-space:nowrap}
.b-ok{background:var(--ok-bg);color:var(--ok)}
.b-warn{background:var(--warn-bg);color:var(--warn)}
.b-danger{background:var(--danger-bg);color:var(--danger)}
.b-neutral{background:var(--neutral-bg);color:var(--neutral)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.tag{display:inline-block;padding:3px 9px;border-radius:6px;font-size:12px;font-weight:700;background:var(--lagon-mid);color:var(--marine)}
.sortie-yes{color:var(--ok);font-weight:700}
.sortie-no{color:var(--ink-mute)}
.cmt{font-size:13px;color:var(--ink-soft);max-width:220px}

.row-actions{display:flex;gap:7px;white-space:nowrap}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;border:1.5px solid var(--line2);background:var(--card);color:var(--marine);cursor:pointer;transition:.15s}
.icon-btn:hover{border-color:var(--marine);background:var(--lagon-pale)}
.icon-btn svg{width:17px;height:17px}

.empty{padding:56px 20px;text-align:center;color:var(--ink-mute)}
.empty svg{width:44px;height:44px;opacity:.5;margin-bottom:12px;color:var(--lagon)}
.empty .big{font-size:15px;font-weight:600;color:var(--ink-soft);margin-bottom:4px}

.legend{display:flex;flex-wrap:wrap;gap:16px;margin:14px 0 6px;font-size:12.5px;color:var(--ink-soft)}
.legend span{display:inline-flex;align-items:center;gap:6px;font-weight:500}

footer{margin:44px 0 30px;text-align:center;font-size:12.5px;color:var(--ink-mute);line-height:1.7}
footer b{color:var(--ink-soft)}

/* ───────── Modale ───────── */
.overlay{position:fixed;inset:0;background:rgba(28,37,65,.5);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;z-index:100;padding:5vh 16px;overflow:auto}
.overlay.show{display:flex;animation:fade .15s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--card);border-radius:18px;width:100%;max-width:620px;box-shadow:var(--shadow-lg);animation:rise .2s ease}
@keyframes rise{from{transform:translateY(12px);opacity:.6}to{transform:translateY(0);opacity:1}}
.modal-hd{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}
.modal-hd h3{font-size:18px;color:var(--marine);font-weight:800}
.modal-bd{padding:24px}
.modal-ft{display:flex;gap:10px;justify-content:flex-end;padding:18px 24px;border-top:1px solid var(--line);background:var(--lagon-pale);border-radius:0 0 18px 18px}
.close-x{background:none;border:none;color:var(--ink-mute);cursor:pointer;font-size:26px;line-height:1;width:36px;height:36px;border-radius:9px}
.close-x:hover{background:var(--lagon-pale);color:var(--marine)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;color:var(--ink-soft);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.field input,.field select,.field textarea{background:var(--card);border:1.5px solid var(--line2);border-radius:10px;color:var(--ink);padding:12px 13px;font-size:15px;outline:none;font-family:inherit;min-height:var(--touch)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--marine-l);box-shadow:0 0 0 3px rgba(73,54,168,.12)}
.field textarea{resize:vertical;min-height:64px}
.switch{display:flex;align-items:center;gap:10px;min-height:var(--touch)}
.switch input{width:22px;height:22px;accent-color:var(--marine);cursor:pointer}
.switch span{font-size:15px;color:var(--ink-soft)}
.form-hint{font-size:13.5px;color:var(--ink-soft);margin-top:8px;line-height:1.5;background:var(--lagon-pale);padding:11px 13px;border-radius:9px}

/* ───────── Historique ───────── */
.hist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.hist-item{display:flex;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line)}
.hist-item:last-child{border-bottom:none}
.hist-item:hover{background:var(--lagon-pale)}
.hist-ic{width:36px;height:36px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;font-weight:800;font-size:14px}
.hi-create{background:var(--ok-bg);color:var(--ok)}
.hi-update{background:var(--lagon-mid);color:var(--marine)}
.hi-delete{background:var(--danger-bg);color:var(--danger)}
.hist-main{flex:1;min-width:0}
.hist-top{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.hist-top b{font-size:14.5px;color:var(--ink)}
.hist-time{font-size:12px;color:var(--ink-mute)}
.hist-author{font-size:12px;color:var(--marine);font-weight:600}
.hist-changes{font-size:13px;color:var(--ink-soft);margin-top:4px}
.hist-changes em{color:var(--marine);font-style:normal;font-weight:700}

/* ───────── Toast ───────── */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--marine);color:#fff;padding:13px 22px;border-radius:12px;font-size:14.5px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:200;box-shadow:var(--shadow-lg);max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--danger)}

.hidden{display:none}

/* ───────── Responsive ───────── */
@media(max-width:680px){
  .wrap{padding:0 14px}
  .brand h1{font-size:16px}.brand p{display:none}
  .logo{width:44px;height:44px}.logo img{width:38px;height:38px}
  .kpis{grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}
  .kpi{padding:14px}.kpi .v{font-size:26px}
  .grid2{grid-template-columns:1fr}
  .modal-bd{padding:18px}.modal-ft{padding:14px 18px}
  .hd{flex-wrap:wrap}
  .netbox{order:3;width:100%;justify-content:flex-start;margin-top:4px}
  table{font-size:13.5px}
  tbody td,thead th{padding:12px 13px}
  .btn{width:100%}
  .controls .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}