/* ============================================================
   OTAF Web — Thème aux couleurs d'OTAF Service International
   Bleu ciel #0099ff · Rouge #d9141c · Argent #b3b4b6 · Bleu nuit
   ============================================================ */
:root{
  --blue:#0099ff; --blue-600:#0a84e0; --blue-700:#0868b8; --blue-50:#eaf6ff; --blue-100:#d3ecff;
  --navy:#0a2342; --navy-2:#0e2f58; --navy-3:#123a6b;
  --red:#d9141c; --red-600:#b70f16; --red-50:#fdeeee;
  --silver:#b3b4b6; --silver-50:#f1f3f6;
  --bg:#f2f6fb; --panel:#fff; --ink:#0f1f33; --muted:#66768c; --line:#e2e9f2;
  --ok:#0f8a4f; --ok-50:#e8f7ef; --err:var(--red);
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(10,35,66,.05),0 8px 24px rgba(10,35,66,.06);
  --shadow-lg:0 18px 48px rgba(10,35,66,.16);
  font-family:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-size:14.5px;line-height:1.45}
a{color:var(--blue-700)}
.ic{flex-shrink:0;vertical-align:middle}
.app{display:flex;min-height:100vh}

/* ---------- Barre latérale ---------- */
.side{width:258px;flex-shrink:0;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  background:linear-gradient(185deg,var(--navy-3) 0%,var(--navy-2) 38%,var(--navy) 100%);color:#c9d6e6;overflow:hidden;z-index:30}
.side::before{content:"";position:absolute;right:-90px;top:120px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(0,153,255,.35),rgba(0,153,255,0) 65%);pointer-events:none}
.brand{display:block;margin:16px 14px 6px;padding:12px 14px;background:#fff;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.brand img{display:block;width:100%;height:auto}
.brand-sub{font-size:11.5px;color:#8fa6c2;text-align:center;margin-bottom:6px;letter-spacing:.02em}
.side nav{flex:1;overflow-y:auto;padding:6px 12px 10px;position:relative}
.nav-titre{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:#6f88a8;margin:16px 10px 6px;font-weight:700}
.side nav a{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:3px;border-radius:10px;
  color:#c9d6e6;text-decoration:none;font-weight:500;transition:background .15s,color .15s}
.side nav a .ic{opacity:.85}
.side nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.side nav a.on{background:linear-gradient(90deg,rgba(0,153,255,.30),rgba(0,153,255,.08));color:#fff;font-weight:600}
.side nav a.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--red)}
.side nav a.on .ic{color:#5cc0ff;opacity:1}
/* Traits de vitesse rouges, rappel du logo */
.vitesse{position:relative;height:34px;margin:0 0 4px}
.vitesse i{position:absolute;left:-10px;height:4px;border-radius:0 6px 6px 0;background:linear-gradient(90deg,rgba(217,20,28,0),var(--red));transform:skewX(-25deg)}
.vitesse i:nth-child(1){top:4px;width:62%}.vitesse i:nth-child(2){top:15px;width:48%}.vitesse i:nth-child(3){top:26px;width:34%}
.me{display:flex;align-items:center;gap:10px;padding:14px 14px 16px;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.12)}
.avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue-700));box-shadow:0 0 0 3px rgba(0,153,255,.25)}
.me-txt{flex:1;min-width:0}
.me-txt b{display:block;color:#fff;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-txt small{color:#8fa6c2;font-size:12px}
.me-btn{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#a9bcd3;transition:.15s}
.me-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.voile{display:none}
/* Défilement visible du menu si l'écran est trop petit */
.side nav{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
.side nav::-webkit-scrollbar{width:6px}
.side nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:6px}
/* Écrans peu hauts (portables 768 px, fenêtres réduites) : menu compact */
@media (max-height:860px){
  .brand{margin:12px 14px 4px;padding:9px 12px}
  .brand-sub{display:none}
  .nav-titre{margin:10px 10px 4px}
  .side nav a{padding:8px 12px;margin-bottom:1px}
  .vitesse{display:none}
  .me{padding:10px 14px 12px}
}
@media (max-height:700px){
  .brand{padding:6px 10px;margin:8px 12px 2px}
  .nav-titre{margin:6px 10px 2px;font-size:9.5px}
  .side nav a{padding:6px 12px;font-size:13.5px}
}

/* ---------- Zone principale ---------- */
.main{flex:1;min-width:0;padding:0 30px 48px}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 -30px 22px;padding:16px 30px;
  background:rgba(242,246,251,.86);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top-titre{flex:1;min-width:200px}
.top h1{font-size:23px;margin:0;color:var(--navy);letter-spacing:-.01em;font-weight:700}
.top small{color:var(--muted);font-size:12.5px}
.burger{display:none;border:0;background:var(--navy);color:#fff;border-radius:10px;width:42px;height:42px;place-items:center;cursor:pointer}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- Cartes ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:20px;box-shadow:var(--shadow)}
.card h2{font-size:15.5px;margin:0 0 16px;color:var(--navy);display:flex;align-items:center;gap:8px;font-weight:700}
.card h2::before{content:"";width:4px;height:16px;border-radius:3px;background:linear-gradient(var(--blue),var(--blue-700))}
.grid{display:grid;gap:16px}
.two{grid-template-columns:1fr 1fr}

/* ---------- Indicateurs ---------- */
.kpis{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:20px}
.kpi{--c:var(--blue);--c2:var(--blue-50);position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 18px 16px 18px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.kpi::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--c)}
.kpi::after{content:"";position:absolute;right:-30px;bottom:-40px;width:120px;height:120px;border-radius:50%;background:var(--c2);opacity:.9}
.kpi > *{position:relative;z-index:1}
.kpi:nth-child(4n+2){--c:var(--navy-2);--c2:#e6edf6}
.kpi:nth-child(4n+3){--c:var(--silver);--c2:var(--silver-50)}
.kpi:nth-child(4n+4){--c:var(--red);--c2:var(--red-50)}
.kpi .kpi-ic{position:absolute;right:16px;top:18px;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--c);box-shadow:0 6px 14px rgba(10,35,66,.15)}
.kpi:nth-child(4n+3) .kpi-ic{background:linear-gradient(135deg,#c9cacc,#8f9195)}
.kpi small{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.kpi b{display:block;font-size:25px;margin:10px 0 4px;white-space:nowrap;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi span{font-size:12.5px;color:var(--muted)}
.kpi b .dev{font-size:13px;color:var(--muted);font-weight:700;margin-left:4px;letter-spacing:.03em}
.kpi small{padding-right:50px;display:block}
.kpi .hausse{color:var(--red);font-weight:600}.kpi .baisse{color:var(--ok);font-weight:600}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;cursor:pointer;font:inherit;font-weight:600;
  padding:9px 16px;border-radius:10px;text-decoration:none;color:#fff;white-space:nowrap;
  background:linear-gradient(180deg,#19a6ff,var(--blue-600));box-shadow:0 2px 6px rgba(0,153,255,.30),inset 0 1px 0 rgba(255,255,255,.2);transition:.15s}
.btn:hover{background:linear-gradient(180deg,var(--blue),var(--blue-700));box-shadow:0 6px 16px rgba(0,153,255,.35)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff;color:var(--blue-700);border-color:var(--blue-100);box-shadow:none}
.btn.ghost:hover{background:var(--blue-50);border-color:#a9d8ff}
.btn.sm{padding:5px 11px;font-size:12.5px;border-radius:8px;font-weight:600}
.btn.del{background:#fff;border-color:#f5c6c8;color:var(--red);box-shadow:none}
.btn.del:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn.rouge{background:linear-gradient(180deg,#ee2a31,var(--red-600));box-shadow:0 2px 6px rgba(217,20,28,.3)}
form.inline{display:inline}

/* ---------- Tableaux ---------- */
.tbl{overflow-x:auto}
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:#4e6380;background:var(--blue-50);font-weight:700;border-bottom:1px solid var(--blue-100)}
thead th:first-child{border-top-left-radius:10px}thead th:last-child{border-top-right-radius:10px}
tbody tr{transition:background .1s}
td a{text-decoration:none;font-weight:600;color:var(--blue-700)}
td a:hover{text-decoration:underline}
td a.btn{font-weight:600}
tbody tr:nth-child(even) td{background:#fafcfe}
tbody tr:hover td{background:#f0f8ff}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.n{font-weight:600;color:var(--navy)}
tfoot td{font-weight:700;background:var(--navy);color:#fff;border:0}
tfoot td.n{color:#fff}
tfoot td:first-child{border-bottom-left-radius:10px}tfoot td:last-child{border-bottom-right-radius:10px}
.muted{color:var(--muted)}
td.muted{font-weight:400}
.tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;background:var(--blue-50);color:var(--blue-700)}
.tag.off{background:var(--red-50);color:var(--red)}
.pastille{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12.5px;background:var(--silver-50);color:#3d4b5e;border:1px solid var(--line)}

/* ---------- Formulaires ---------- */
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.f{display:flex;flex-direction:column;gap:5px;min-width:150px}
.f label{font-size:12.5px;color:#4e6380;font-weight:600}
input,select,textarea{font:inherit;padding:9px 11px;border:1px solid #cdd8e5;border-radius:var(--radius-sm);background:#fff;color:var(--ink);transition:border .15s,box-shadow .15s}
input:hover,select:hover{border-color:#a9c1db}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,153,255,.15)}
input[type=checkbox]{accent-color:var(--blue);width:16px;height:16px;vertical-align:-3px}
.form{max-width:680px}
.form .f{margin-bottom:16px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hint{font-size:12px;color:var(--muted)}

.flash{display:flex;gap:10px;align-items:center;padding:12px 16px;border-radius:12px;margin-bottom:16px;border:1px solid;font-weight:500;box-shadow:var(--shadow)}
.flash::before{font-weight:800;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:13px;flex-shrink:0}
.flash.ok{background:var(--ok-50);border-color:#b5e5cb;color:#0b6b3d}.flash.ok::before{content:"✓";background:var(--ok)}
.flash.err{background:var(--red-50);border-color:#f5c6c8;color:#a10e14}.flash.err::before{content:"!";background:var(--red)}

.pager{display:flex;gap:5px;margin-top:16px;flex-wrap:wrap}
.pager a,.pager span{min-width:36px;text-align:center;padding:6px 10px;border:1px solid var(--line);border-radius:9px;text-decoration:none;background:#fff;color:var(--navy);font-weight:600}
.pager a:hover{border-color:var(--blue);color:var(--blue-700)}
.pager a.on{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ---------- Graphiques ---------- */
.bars{display:flex;align-items:flex-end;gap:8px;height:220px;padding:10px 4px 0;border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(to top,transparent 0,transparent 43px,#eef2f7 43px,#eef2f7 44px)}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0;text-decoration:none;position:relative}
.bar i{display:block;width:100%;max-width:42px;border-radius:7px 7px 2px 2px;min-height:3px;
  background:linear-gradient(180deg,#4dbbff,var(--blue) 45%,var(--blue-700));box-shadow:0 4px 10px rgba(0,153,255,.25);transition:.2s}
.bar.courant i{background:linear-gradient(180deg,#ff5a60,var(--red) 50%,var(--red-600));box-shadow:0 4px 10px rgba(217,20,28,.25)}
.bar:hover i{filter:brightness(1.1);transform:scaleY(1.02);transform-origin:bottom}
.bar small{font-size:11.5px;color:var(--muted);margin:7px 0 -22px;font-weight:600}
.bars-pied{height:22px}
.bar em{position:absolute;bottom:calc(100% + 4px);font-style:normal;font-size:11px;color:var(--navy);font-weight:700;opacity:0;transition:.15s;white-space:nowrap;background:#fff;padding:2px 6px;border-radius:6px;box-shadow:var(--shadow)}
.bar:hover em{opacity:1}
.hbar{height:9px;background:var(--silver-50);border-radius:6px;overflow:hidden;min-width:80px}
.hbar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--blue),#5cc0ff)}
tr:nth-child(1) .hbar i{background:linear-gradient(90deg,var(--red),#ff6b70)}

/* ---------- Connexion / installation ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;background:#fff}
.hero{position:relative;overflow:hidden;color:#fff;padding:48px 56px;display:flex;flex-direction:column;justify-content:flex-start;gap:14vh;
  background:radial-gradient(circle at 78% 30%,rgba(0,153,255,.55),rgba(0,153,255,0) 45%),linear-gradient(160deg,var(--navy-3),var(--navy) 70%)}
.hero::after{content:"";position:absolute;right:-120px;top:66%;width:440px;height:440px;border-radius:50%;transform:translateY(-50%);
  background:radial-gradient(circle at 35% 35%,#8ad6ff,var(--blue) 45%,#0657a0 75%);box-shadow:inset -30px -30px 60px rgba(0,0,0,.25),0 0 120px rgba(0,153,255,.35);opacity:.9}
.hero .vitesse{position:absolute;left:0;top:66%;width:66%;height:120px;margin-top:-60px;z-index:1}
.hero .vitesse i{height:12px;border-radius:0 12px 12px 0;left:-20px}
.hero .vitesse i:nth-child(1){top:8px;width:100%}.hero .vitesse i:nth-child(2){top:52px;width:82%}.hero .vitesse i:nth-child(3){top:96px;width:64%}
.hero > *{position:relative;z-index:2}
.hero h2{font-size:38px;line-height:1.1;margin:0 0 12px;letter-spacing:-.02em;max-width:420px}
.hero p{color:#bcd0e8;max-width:380px;margin:0;font-size:15px}
.hero .hero-pied{font-size:12.5px;color:#8fa6c2}
.hero .hero-pied:last-child{position:absolute;left:56px;bottom:40px}
.login-form{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:linear-gradient(180deg,#fff,var(--bg))}
.login-form .boite{width:100%;max-width:380px}
.login-form .logo-login{display:block;width:100%;max-width:330px;margin:0 auto 26px}
.login-form h1{margin:0 0 4px;font-size:22px;color:var(--navy)}
.login-form .f{margin-bottom:16px}
.login-form .btn{width:100%;padding:12px;font-size:15px}
.seul{max-width:920px;margin:auto;padding:0 20px 48px}
.seul .top{margin:0 -20px 22px;padding:16px 20px}
.seul .top img{height:44px}

/* ---------- Écran simple (erreur, code d'accès) ---------- */
.centre{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 80% 10%,rgba(0,153,255,.18),transparent 40%),var(--bg)}
.centre .card{width:100%;max-width:420px;padding:30px}
.centre img{display:block;width:100%;max-width:300px;margin:0 auto 22px}

/* ---------- Mobile ---------- */
@media (max-width:980px){
  .two{grid-template-columns:1fr}
  .side{position:fixed;left:-270px;transition:left .22s ease;box-shadow:none}
  .side.open{left:0;box-shadow:0 0 60px rgba(0,0,0,.4)}
  .side.open + .voile{display:block;position:fixed;inset:0;background:rgba(10,35,66,.45);z-index:25}
  .burger{display:grid}
  .main{padding:0 16px 40px}
  .top{margin:0 -16px 16px;padding:12px 16px}
  .top h1{font-size:19px}
  .form .row{grid-template-columns:1fr}
  .login{grid-template-columns:1fr}
  .hero{display:none}
}

/* ---------- Impression ---------- */
.print-head,.print-info{display:none}
@media print{
  .side,.voile,.no-print,.filters,.pager,.burger,.actions,.top{display:none!important}
  .main{padding:0}
  body{background:#fff;font-size:12px}
  .card,.kpi{border:1px solid #ddd;box-shadow:none;padding:10px;break-inside:avoid}
  .kpi::after{display:none}
  .print-head{display:flex;align-items:center;gap:16px;border-bottom:3px solid var(--blue);padding-bottom:10px;margin-bottom:14px}
  .print-head img{height:52px}
  .print-info{display:block;margin-bottom:10px;font-weight:600}
  th{background:#eaf6ff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  tfoot td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- Listes déroulantes avec recherche (assets/combo.js) ---------- */
.combo{position:relative;min-width:150px}
.combo-natif{position:absolute!important;left:0;bottom:0;width:100%!important;height:1px;opacity:0;pointer-events:none;padding:0;border:0}
.combo-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;font:inherit;text-align:left;
  padding:9px 11px;border:1px solid #cdd8e5;border-radius:var(--radius-sm);background:#fff;color:var(--ink);cursor:pointer;min-height:40px;transition:border .15s,box-shadow .15s}
.combo-btn:hover{border-color:#a9c1db}
.combo-btn:focus,.combo.ouvert .combo-btn{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,153,255,.15)}
.combo-btn:disabled{background:var(--silver-50);color:var(--muted);cursor:not-allowed}
.combo-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo-placeholder{color:var(--muted)}
.combo-fleche{color:var(--blue);font-size:12px;transition:transform .15s}
.combo.ouvert .combo-fleche{transform:rotate(180deg)}
.combo.combo-erreur .combo-btn{border-color:var(--red);box-shadow:0 0 0 4px rgba(217,20,28,.12)}
.combo-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:60;max-width:min(440px,92vw);background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden;animation:combo-in .12s ease-out}
@keyframes combo-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.combo-pop.haut{top:auto;bottom:calc(100% + 6px)}
.combo-rech{padding:10px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--blue-50),#fff)}
.combo-rech input{width:100%;padding:8px 11px 8px 34px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230099ff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center}
.combo-liste{list-style:none;margin:0;padding:5px;max-height:270px;overflow-y:auto}
.combo-liste li{padding:9px 11px;border-radius:8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo-liste li.actif{background:var(--blue-50);color:var(--blue-700)}
.combo-liste li.sel{font-weight:700;color:var(--blue-700)}
.combo-liste li.sel::after{content:" ✓";color:var(--red)}
.combo-liste li[aria-disabled="true"]{color:var(--muted);cursor:not-allowed}
.combo-liste li[data-vide]{color:var(--muted);font-style:italic}
.combo-vide{padding:14px;color:var(--muted);text-align:center}
@media (max-width:600px){ .combo-pop{position:fixed;left:12px!important;right:12px;top:auto!important;bottom:12px;max-width:none}
  .combo-liste{max-height:50vh} }
@media print{ .combo-pop{display:none!important} .combo-fleche{display:none} .combo-btn{border:0;padding:0;box-shadow:none} }

/* ---------- Fenêtres popup (dialog) ---------- */
dialog.modal{border:0;padding:0;border-radius:16px;width:min(560px,94vw);max-height:92vh;overflow:visible;box-shadow:0 30px 80px rgba(10,35,66,.35);color:var(--ink);background:#fff;font:inherit}
dialog.modal:not([open]){display:none}
/* Secours pour les navigateurs sans <dialog> natif */
dialog.modal.secours[open]{display:block;position:fixed;inset:0;margin:auto;height:fit-content;height:-moz-fit-content;z-index:1001}
#modal-voile{display:none;position:fixed;inset:0;z-index:1000;background:rgba(10,35,66,.55)}
#modal-voile.on{display:block}
dialog.modal.large{width:min(760px,96vw)}
dialog.modal::backdrop{background:rgba(10,35,66,.55);backdrop-filter:blur(3px)}
dialog.modal[open]{animation:modal-in .18s ease-out}
@keyframes modal-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal-tete{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,var(--navy),var(--navy-3));color:#fff;border-radius:16px 16px 0 0;position:relative}
.modal-tete::after{content:"";position:absolute;left:22px;bottom:-2px;width:60px;height:3px;border-radius:2px;background:var(--red)}
.modal-tete h3{margin:0;font-size:17px;flex:1}
.modal-tete .ic-rond{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(0,153,255,.25);color:#7fd0ff}
.modal-fermer{border:0;background:rgba(255,255,255,.1);color:#fff;width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:20px;line-height:1}
.modal-fermer:hover{background:rgba(255,255,255,.2)}
.modal-corps{padding:22px;max-height:calc(92vh - 150px);overflow-y:auto}
.modal-corps .f{margin-bottom:16px}
.modal-corps .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal-pied{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--line);background:#fafcfe;border-radius:0 0 16px 16px}
@media (max-width:600px){ .modal-corps .row{grid-template-columns:1fr} }

/* Barre d'outils de liste (recherche locale) */
.outils{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.recherche{position:relative;flex:1;min-width:220px;max-width:420px}
.recherche input{width:100%;padding-left:36px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366768c' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center}
.compteur{color:var(--muted);font-size:13px}
.verrou{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}