:root{
      --brand: #00b894;           /* Menthe Essô */
      --brand-2: #0984e3;         /* Bleu accent */
      --ink: #e6f2ef;             /* Texte clair */
      --glass: rgba(255,255,255,.06);
      --glass-stroke: rgba(255,255,255,.12);
      --shadow-soft: 0 10px 25px rgba(0,0,0,.25);
      --radius-2xl: 18px;
      --radius-xl: 14px;
      --radius-lg: 12px;
      --ring: 0 0 0 2px color-mix(in srgb, var(--brand) 55%, transparent);
    }
    html,body{height:100%}
    body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";}

    /* ====== NAVBAR GLASS ====== */
    .navbar-glass{background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.10))!important; backdrop-filter: blur(10px); border-bottom:1px solid var(--glass-stroke)}
    .nav-logo{display:flex; align-items:center; gap:.6rem}
    .logo-dot{width:34px;height:34px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 35%, #000 65%)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 18px rgba(0,184,148,.35)}
    .logo-dot i{color:white}

    /* ====== SURFACES ====== */
    .surface{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--glass-stroke); border-radius: var(--radius-2xl); box-shadow: var(--shadow-soft)}
    .surface:hover{border-color: color-mix(in srgb, var(--brand) 25%, var(--glass-stroke)); box-shadow: 0 12px 28px rgba(0,184,148,.18)}

    /* ====== TABS (roles) ====== */
    .role-tab .nav-link{border-radius: 999px; border:1px solid transparent}
    .role-tab .nav-link.active{background: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--ink); border-color: color-mix(in srgb, var(--brand) 35%, transparent); box-shadow: var(--ring)}

    /* ====== CARDS ====== */
    .card-min{border:1px solid var(--glass-stroke); border-radius: var(--radius-xl); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease}
    .card-min:hover{transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 30%, var(--glass-stroke)); box-shadow: 0 14px 32px rgba(0,184,148,.15)}
    .card-min .badge{border:1px solid color-mix(in srgb, white 30%, transparent);}

    /* ====== INTERACTIONS: Ripple & Tilt ====== */
    .ripple{position: relative; overflow: hidden}
    .ripple:after{content:""; position:absolute; inset:auto; width:10px;height:10px; background:radial-gradient(circle, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 70%); border-radius:50%; transform: translate(-50%, -50%) scale(1); opacity:0; pointer-events:none}
    .ripple.active:after{animation: ripple .6s ease}
    @keyframes ripple{0%{opacity:.9} 100%{transform: translate(-50%, -50%) scale(16); opacity:0}}

    .tilt{transform-style: preserve-3d; will-change: transform}
    .tilt:hover .tilt-child{transform: translateZ(14px)}
    .tilt-child{transition: transform .2s ease}

    /* ====== LISTS ====== */
    .list-clean .list-group-item{background: transparent; border-color: var(--glass-stroke)}
    .list-clean .list-group-item:hover{background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 12%, transparent), transparent)}

    /* ====== FLOAT ACTION BUTTON ====== */
    .fab{position: fixed; right: 16px; bottom: 84px; z-index: 1040}
    .fab .btn{border-radius: 999px; box-shadow: var(--shadow-soft)}

    /* ====== BOTTOM NAV (mobile) ====== */
    .bottom-nav{position: fixed; bottom:0; left:0; right:0; border-top:1px solid var(--glass-stroke); background: rgba(0,0,0,.45); backdrop-filter: blur(8px); z-index:1030}
    .bottom-nav .nav-link{color:#bcd5cf}
    .bottom-nav .nav-link.active{color:var(--ink)}

    /* ====== UTIL ====== */
    .bg-brand{background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 35%, #000 65%))}
    .text-fade{color:#cfe7e2}
    .btn-brand{--bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 80%, #000 20%); --bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 80%, #000 20%)}
    .btn-ghost{background: rgba(255,255,255,.06); border:1px solid var(--glass-stroke)}

    @media (min-width: 992px){
      .container-tight{max-width: 980px}
    }
	
	
	
	/* ---- largeur du container "serré" ---- */
:root{
  /* ... tes variables existantes ... */
  --container-tight: 1140px; /* ⇐ élargi (980px -> 1140px). Mets 1200px/1280px si tu veux encore plus large */
}

@media (min-width: 992px){
  .container-tight{max-width: var(--container-tight);}
}

/* ---- style du menu desktop dans la topbar ---- */
.topnav-main .nav-link{
  color:#bcd5cf;
  border:1px solid transparent;
  border-radius:12px;
  padding:.4rem .8rem;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.topnav-main .nav-link:hover{
  background: rgba(255,255,255,.06);
  border-color: var(--glass-stroke);
  color: var(--ink);
}
.topnav-main .nav-link.active{
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
  box-shadow: var(--ring);
  color: var(--ink);
}

/* Actions explicitement interdites (ex: principal) */
.btn-muted-disabled {
  /* --bs-btn-color: #9fb3ad; */
  --bs-btn-color: #a6a6a6;
  --bs-btn-border-color: var(--glass-stroke);
 /* --bs-btn-hover-color: #9fb3ad;*/
  --bs-btn-hover-color: #a6a6a6;
  --bs-btn-hover-border-color: var(--glass-stroke);
  opacity: .7;
  cursor: not-allowed !important;
  filter: grayscale(.85);
  pointer-events: none; /* sécurité UI */
}

/* Table scroll “soft” */
.table-scroll{
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-xl);
}

/* scrollbar discrète (WebKit) */
.table-scroll::-webkit-scrollbar{ height: 10px; }
.table-scroll::-webkit-scrollbar-thumb{
  background: var(--glass-stroke);
  border-radius: 999px;
}

/* petit fondu aux bords (navigateurs modernes) */
@supports (mask-image: linear-gradient(#000, #000)){
  .table-scroll{
    mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  }
}

/* éviter le wrap moche des emails */
.col-email{
  max-width: 420px;        /* ajuste si besoin */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}