/* ═══════════════════════════════════════════════════════════════════
   Africomed — common.css
   Styles PARTAGÉS entre les 3 fichiers HTML (index, admin, delegate)
   
   Ce fichier contient :
   - Reset CSS
   - Variables globales (couleurs, tailles, ombres, fonts)
   - Typography de base
   - Animations
   - Boutons génériques
   - Badges
   - Formulaires (fields, inputs, tel, checkbox)
   - Toolbars et tableaux
   - Modales
   - Overlays (doublons, contact card)
   - Notifications
   - Cartes
   - Utilitaires
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ RESET ══════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}

/* ═══ VARIABLES GLOBALES ═════════════════════════════════════════════ */
:root{
  --navy:#0a1628;
  --navy-2:#152238;
  --navy-soft:#eef2f9;
  --accent:#2563eb;
  --accent-2:#3b82f6;
  --accent-soft:#eff6ff;
  --green:#059669;
  --green-soft:#ecfdf5;
  --red:#dc2626;
  --red-soft:#fef2f2;
  --amber:#d97706;
  --amber-soft:#fffbeb;

  --ink:#0f172a;
  --ink-2:#1e293b;
  --ink-3:#64748b;
  --ink-4:#94a3b8;
  --line:#e2e8f0;
  --line-2:#cbd5e1;

  --bg:#f4f6fa;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#f1f5f9;

  --r-sm:6px;--r:10px;--r-lg:14px;--r-xl:18px;
  --sh-sm:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.04);
  --sh:0 2px 8px rgba(15,23,42,.06),0 1px 4px rgba(15,23,42,.04);
  --sh-lg:0 8px 32px rgba(15,23,42,.10),0 2px 8px rgba(15,23,42,.05);
  --sh-xl:0 20px 60px rgba(15,23,42,.15),0 4px 16px rgba(15,23,42,.08);

  --font-display:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

/* ═══ BASE ═══════════════════════════════════════════════════════════ */
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{font-family:var(--font-body);font-weight:700;line-height:1.25;letter-spacing:-.02em}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}

/* ═══ ANIMATIONS ═════════════════════════════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.8)}
}
.anim{animation:fadeUp .22s ease}

/* ═══ VIEWS ══════════════════════════════════════════════════════════ */
.view{display:none;min-height:100vh;flex-direction:column}
.view.active{display:flex}

/* ═══ TOPBAR (admin + délégué) ══════════════════════════════════════ */
.topbar{
  background:white;height:56px;
  display:flex;align-items:center;
  padding:0 1.5rem;gap:12px;flex-shrink:0;
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(15,23,42,.04)
}
.tb-brand{display:flex;align-items:center;gap:9px}
.tb-mark{
  width:28px;height:28px;border-radius:7px;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.tb-mark svg{width:15px;height:15px;stroke:white}
.tb-title{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.tb-spacer{flex:1}
.tb-role{font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.06em}
.tb-del{background:var(--accent-soft);color:var(--accent)}
.tb-adm{background:var(--amber-soft);color:var(--amber)}
.tb-name{font-size:13px;color:var(--ink-3);font-weight:500}
.btn-logout{
  height:30px;padding:0 11px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--ink-3);font-size:12px;font-weight:500;
  transition:.18s
}
.btn-logout:hover{background:var(--red-soft);color:var(--red);border-color:transparent}

/* ═══ NOTIFICATIONS CLOCHE (admin + délégué) ═══════════════════════ */
.notif-bell{
  position:relative;background:none;border:none;
  width:36px;height:36px;border-radius:8px;
  color:var(--ink-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.15s
}
.notif-bell:hover{background:var(--surface-2);color:var(--ink)}
.notif-badge{
  position:absolute;top:3px;right:3px;
  background:var(--red);color:white;
  font-size:9px;font-weight:700;
  min-width:16px;height:16px;border-radius:8px;
  padding:0 4px;display:flex;align-items:center;justify-content:center;
  border:2px solid white;line-height:1
}
.notif-panel{
  position:fixed;top:60px;right:14px;
  width:340px;max-width:calc(100vw - 28px);
  max-height:70vh;overflow-y:auto;
  background:white;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 12px 40px rgba(15,23,42,.18);
  z-index:1000;display:none;
}
.notif-panel.open{display:block;animation:fadeUp .2s ease}
.notif-panel-header{
  padding:.85rem 1rem;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  background:var(--surface-2);
}
.notif-panel-title{font-size:13px;font-weight:700;color:var(--ink)}
.notif-panel-action{font-size:11px;color:var(--accent);cursor:pointer;background:none;border:none;font-weight:600}
.notif-item{
  padding:.85rem 1rem;border-bottom:1px solid var(--line);
  display:flex;gap:10px;cursor:pointer;transition:.12s
}
.notif-item:hover{background:var(--surface-2)}
.notif-item:last-child{border-bottom:none}
.notif-item.unread{background:rgba(37,99,235,.04)}
.notif-item-icon{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  background:var(--green-soft);color:var(--green);
  display:flex;align-items:center;justify-content:center
}
.notif-item-text{flex:1;min-width:0}
.notif-item-title{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px;line-height:1.3}
.notif-item-meta{font-size:11px;color:var(--ink-4)}
.notif-empty{padding:2rem 1rem;text-align:center;color:var(--ink-4);font-size:12.5px}

/* ═══ CARDS ═════════════════════════════════════════════════════════ */
.card{background:white;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh-sm);overflow:hidden}
.card-pad{padding:1.25rem}

/* ═══ BADGES ════════════════════════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:10.5px;font-weight:600;white-space:nowrap;line-height:1.5;letter-spacing:.01em}
.b-blue{background:var(--accent-soft);color:var(--accent)}
.b-navy{background:var(--navy-soft);color:var(--navy)}
.b-green{background:var(--green-soft);color:var(--green)}
.b-red{background:var(--red-soft);color:var(--red)}
.b-amber{background:var(--amber-soft);color:var(--amber)}
.b-gray{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}

/* ═══ BOUTONS ═══════════════════════════════════════════════════════ */
.btn{
  height:36px;padding:0 14px;
  border-radius:var(--r-sm);
  font-size:13px;font-weight:600;
  border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;transition:.15s;white-space:nowrap;letter-spacing:.01em;
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--accent);color:white;border-color:var(--accent)}
.btn-primary:hover{background:#1d4ed8;border-color:#1d4ed8}
.btn-navy{background:var(--navy);color:white}
.btn-navy:hover{background:var(--navy-2)}
.btn-outline{background:white;color:var(--ink-2);border-color:var(--line-2)}
.btn-outline:hover{border-color:var(--ink-3);color:var(--ink);background:var(--surface-2)}
.btn-danger{background:var(--red-soft);color:var(--red);border-color:transparent}
.btn-danger:hover{background:var(--red);color:white}
.btn-success{background:var(--green-soft);color:var(--green);border-color:transparent}
.btn-success:hover{background:var(--green);color:white}
.btn-ghost{background:transparent;color:var(--ink-3);border-color:transparent}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink-2)}
.btn-sm{height:28px;padding:0 10px;font-size:11.5px;border-radius:5px}
.btn-xs{height:24px;padding:0 8px;font-size:11px;border-radius:4px}
.btn-full{width:100%}

/* ═══ TOOLBAR ═══════════════════════════════════════════════════════ */
.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:1rem;flex-wrap:wrap}
.tb-search{
  height:36px;padding:0 12px 0 34px;
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  font-size:13px;color:var(--ink);
  background:white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 11px center;
  min-width:190px;transition:.15s
}
.tb-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.tb-search::placeholder{color:var(--ink-4)}
.tb-sel{
  height:36px;padding:0 28px 0 10px;
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  font-size:13px;
  background:white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M1 1l3.5 3.5L8 1' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance:none;color:var(--ink);transition:.15s;cursor:pointer
}
.tb-sel:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.tb-fill{flex:1}

/* ═══ TABLES ═══════════════════════════════════════════════════════ */
.tbl-wrap{border-radius:var(--r);border:1px solid var(--line);overflow:hidden;background:white;box-shadow:var(--sh-sm)}
.dt{width:100%;border-collapse:collapse;font-size:13px}
.dt th{
  padding:10px 14px;text-align:left;
  font-size:10px;font-weight:700;color:var(--ink-4);
  text-transform:uppercase;letter-spacing:.07em;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);white-space:nowrap
}
.dt td{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;color:var(--ink-2)
}
.dt td strong{color:var(--ink);font-weight:600}
.dt tr:last-child td{border-bottom:none}
.dt tbody tr{transition:background .1s}
.dt tbody tr:hover td{background:#fafbfc}
.dt tbody tr[onclick]{cursor:pointer}
.dt-empty{text-align:center;padding:2.5rem;color:var(--ink-4);font-size:13px}
.dt th.th-num,.dt td.td-num{text-align:right;font-variant-numeric:tabular-nums}
.dt th.th-ctr,.dt td.td-ctr{text-align:center}
.dt th.th-actions,.dt td.td-actions{text-align:right;width:1%;white-space:nowrap}
.dt td.td-actions{padding:8px 14px}
.dt .row-actions{display:inline-flex;gap:5px}
.dt .creds-mono{font-family:var(--font-mono);font-size:11px;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--ink-3)}

/* ═══ FORMULAIRES ═══════════════════════════════════════════════════ */
.field{margin-bottom:.85rem}
.field label{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.req{color:var(--red);font-size:11px;line-height:1}
.opt{font-size:9.5px;font-weight:500;color:var(--ink-4);background:var(--surface-2);border-radius:3px;padding:2px 5px;text-transform:none;letter-spacing:0}
.field input,.field select{
  width:100%;height:40px;padding:0 12px;
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  font-size:13.5px;color:var(--ink);
  background:white;transition:.15s;appearance:none;font-family:inherit
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M1 1l3.5 3.5L8 1' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
  padding-right:32px;cursor:pointer
}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.field input.er,.field select.er{border-color:var(--red)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.em{font-size:11px;color:var(--red);margin-top:4px;display:none;font-weight:500}
.divider{height:1px;background:var(--line);margin:1rem 0}

/* ═══ INPUT TÉLÉPHONE ══════════════════════════════════════════════ */
.tel-wrap{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;background:white;transition:.15s}
.tel-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.tel-wrap .tel-prefix{padding:0 11px;background:var(--surface-2);border-right:1px solid var(--line-2);font-size:13px;color:var(--ink-3);font-weight:500;white-space:nowrap;height:40px;display:flex;align-items:center;flex-shrink:0}
.tel-wrap input{border:none!important;flex:1;height:38px;padding:0 12px;font-size:13.5px;color:var(--ink);background:transparent}
.tel-wrap input:focus{outline:none;box-shadow:none!important}

/* ═══ KOL CHECKBOX (utilisée dans admin + délégué + public) ═══════════ */
.kol-check{
  display:flex;align-items:center;gap:12px;
  padding:.85rem 1rem;
  background:var(--surface-2);border:1.5px solid var(--line-2);
  border-radius:var(--r);cursor:pointer;
  margin-bottom:.5rem;transition:.18s;
  user-select:none
}
.kol-check:hover{border-color:var(--accent);background:var(--accent-soft)}
.kol-check input[type=checkbox]{
  width:18px;height:18px;flex-shrink:0;
  accent-color:var(--accent);cursor:pointer
}
.kol-check input[type=checkbox]:checked ~ .kol-txt .kol-lbl{color:var(--accent)}
.kol-box{display:none}
.kol-txt{display:flex;flex-direction:column;gap:2px}
.kol-lbl{font-size:13.5px;font-weight:600;color:var(--ink)}
.kol-sub{font-size:11.5px;color:var(--ink-3)}

/* Territoire read-only badge */
.terr-readonly{
  height:42px;padding:0 13px;
  background:var(--navy-soft);
  border:1px solid rgba(15,42,74,.15);
  border-radius:var(--r-sm);
  display:flex;align-items:center;
  font-size:14px;font-weight:600;color:var(--navy);
  letter-spacing:.01em
}

/* ═══ BOUTONS EXERCICE (admin + public) ══════════════════════════════ */
.adm-exercice-btns{display:flex;gap:8px;margin-top:4px}
.adm-ex-btn{
  flex:1;padding:9px 8px;
  border:1.5px solid var(--line-2);
  border-radius:var(--r-sm);
  background:white;font-size:13px;font-weight:600;
  color:var(--ink-2);cursor:pointer;transition:.15s;
  font-family:inherit
}
.adm-ex-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.adm-ex-btn.active{border-color:var(--accent);background:var(--accent);color:white}

/* ═══ MODALES ═══════════════════════════════════════════════════════ */
.modal-ov{
  position:fixed;inset:0;
  background:rgba(15,23,42,.4);
  z-index:1000;display:none;
  align-items:center;justify-content:center;padding:1rem;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:fadeIn .15s ease
}
.modal-ov.open{display:flex}
.modal{
  background:white;border-radius:var(--r-lg);
  box-shadow:0 24px 64px rgba(15,23,42,.18),0 4px 16px rgba(15,23,42,.08);
  width:100%;max-width:520px;max-height:90vh;
  overflow-y:auto;animation:fadeUp .2s ease;
  border:1px solid var(--line)
}
.mh{
  padding:1.1rem 1.4rem;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surface-2)
}
.mh h3{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.mh-close{
  background:none;border:none;
  width:28px;height:28px;border-radius:5px;
  font-size:18px;color:var(--ink-4);cursor:pointer;
  transition:.15s;display:flex;align-items:center;justify-content:center
}
.mh-close:hover{background:var(--red-soft);color:var(--red)}
.mb{padding:1.25rem 1.4rem}
.mf{
  padding:.9rem 1.4rem;
  border-top:1px solid var(--line);
  display:flex;gap:8px;justify-content:flex-end;
  background:var(--surface-2)
}

/* Séparateur de section dans les modales */
.adm-section-divider{
  font-size:10px;font-weight:700;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.08em;
  padding:.5rem 0 .75rem;
  border-top:1px solid var(--line);
  margin-top:.5rem
}

/* ═══ TYPE CARDS (sélection type dans modale) ═══════════════════════ */
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:.5rem}
.type-card{
  border:1.5px solid var(--line-2);
  border-radius:var(--r);
  padding:14px 14px;
  cursor:pointer;transition:.18s;
  text-align:left;background:white;
  display:flex;align-items:center;gap:12px;
  font-family:inherit
}
.type-card:hover{border-color:var(--accent);background:var(--accent-soft)}
.type-card.sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.type-card .tc-ico{
  width:36px;height:36px;border-radius:8px;
  background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--ink-3);transition:.18s
}
.type-card .tc-ico svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}
.type-card.sel .tc-ico{background:var(--accent);color:white}
.type-card .tc-lbl{font-size:14px;font-weight:700;color:var(--ink)}
.type-card .tc-sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.type-card.sel .tc-lbl{color:var(--accent)}

/* ═══ ID/PWD PREVIEW BOX (modales) ═════════════════════════════════ */
.id-preview-box{
  background:var(--accent-soft);
  border:1px solid rgba(37,99,235,.12);
  border-radius:var(--r-sm);
  padding:10px 13px;margin-top:5px
}
.id-preview-lbl{font-size:10px;font-weight:700;color:var(--ink-4);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.id-preview-val{font-size:18px;font-weight:700;color:var(--accent);font-family:var(--font-mono);letter-spacing:.04em}
.id-preview-hint{font-size:11px;color:var(--ink-4);margin-top:3px}

/* ═══ ÉTATS VIDES ═══════════════════════════════════════════════════ */
.empty{
  text-align:center;padding:2.5rem 1rem;
  color:var(--ink-4);font-size:13px;
  background:white;border:1px dashed var(--line);
  border-radius:var(--r)
}

/* ═══ CONTACT CARD MODAL ═══════════════════════════════════════════ */
.contact-modal{
  background:white;border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  width:100%;max-width:460px;max-height:88vh;
  overflow-y:auto;animation:fadeUp .22s ease
}
.cm-top{
  padding:1.25rem 1.5rem;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between
}
.cm-top h3{font-size:17px;font-weight:700}
.cm-body{padding:1.4rem 1.5rem}
.cm-row{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:13px
}
.cm-row:last-child{border:none}
.cm-key{
  color:var(--ink-3);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;
  width:100px;flex-shrink:0
}
.cm-val{color:var(--ink);font-weight:500;text-align:right;flex:1}

/* ═══ OVERLAY DOUBLONS ═════════════════════════════════════════════ */
.dup-overlay{
  position:fixed;inset:0;
  background:rgba(13,27,42,.55);
  z-index:2000;display:none;
  align-items:center;justify-content:center;padding:1rem;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)
}
.dup-overlay.open{display:flex}
.dup-box{
  background:white;border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  width:100%;max-width:380px;overflow:hidden;
  animation:fadeUp .22s ease;text-align:center
}
.dup-top{
  background:linear-gradient(135deg,var(--red),#b91c1c);
  padding:1.5rem 1.5rem 1.25rem;color:white
}
.dup-top svg{display:block;margin:0 auto 12px}
.dup-top h3{font-size:18px;font-weight:800;letter-spacing:-.02em}
.dup-top p{font-size:13px;color:rgba(255,255,255,.75);margin-top:5px}
.dup-body{padding:1.4rem 1.5rem}
.dup-contact{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 16px;
  margin-bottom:1.2rem;text-align:left
}
.dup-contact-name{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--ink);margin-bottom:5px}
.dup-contact-meta{font-size:12px;color:var(--ink-3);line-height:1.7}

/* ═══ SUCCESS SCREEN ═══════════════════════════════════════════════ */
.succ{text-align:center;padding:2.5rem 1.5rem}
.succ-ring{
  width:72px;height:72px;border-radius:50%;
  background:var(--green-soft);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.25rem
}
.succ-ring svg{width:34px;height:34px}
.succ h2{font-size:20px;font-weight:800;margin-bottom:8px;letter-spacing:-.02em}
.succ p{font-size:13.5px;color:var(--ink-3);margin-bottom:1.5rem;line-height:1.6}

/* ═══ UTILITAIRES ═══════════════════════════════════════════════════ */
.flex{display:flex}
.gap-7{gap:7px}
.ai{align-items:center}
.jb{justify-content:space-between}
.text-muted{color:var(--ink-3);font-size:12px;line-height:1.5}