:root{
  --bg:#0b1622; --bg-2:#0f1e2e; --panel:#0f1c2b; --card:#0f1e2ebb;
  --border:#1a314b; --primary:#49c0ff; --primary-2:#9be6ff; --accent:#7fe3d2;
  --text:#dff4ff; --muted:#9bb6c9; --shadow:0 16px 48px rgba(0,0,0,.35);
  --x:50vw; --y:50vh;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0; line-height:1.45;
  font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:radial-gradient(1400px circle at 30% -10%, #11253a 0%, #08121d 40%, #050f19 100%);
  color:var(--text);
}
a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline}

/* Lueur souris */
.cursor-glow{position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(700px circle at var(--x) var(--y), rgba(73,192,255,.12), transparent 45%);
  transition: background .1s ease-out;
}

/* Header + menu pro */
.site-header{
  position:sticky; top:0; z-index:30;
  backdrop-filter:saturate(120%) blur(10px);
  background:linear-gradient(90deg,#0f1c2b, #0b1723);
  border-bottom:1px solid #14263a; box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.header-inner{
  max-width:1400px; margin:0 auto; padding:.6rem 1.2rem;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:.75rem}
.logo{font-weight:800;font-size:1.3rem;color:var(--primary)}
.logo span{color:var(--primary-2)}
.burger{display:none;background:none;border:none;font-size:1.25rem;color:var(--text)}

.main-nav{display:flex;gap:.35rem}
.main-nav a{
  position:relative; padding:.65rem .9rem; border-radius:12px; font-weight:600;
  color:#caecff; text-decoration:none; transition:background .15s ease, transform .1s ease;
}
.main-nav a:hover{background:#13263d; transform:translateY(-1px)}
.main-nav a::after{
  content:''; position:absolute; left:10px; right:10px; bottom:6px; height:2px;
  background:linear-gradient(90deg,var(--primary),var(--accent)); transform:scaleX(0);
  transform-origin:left; transition:transform .2s ease;
}
.main-nav a:hover::after{transform:scaleX(1)}
.main-nav .cta{
  margin-left:.35rem; background:linear-gradient(90deg,var(--primary),var(--accent));
  color:#001827; font-weight:800; box-shadow:0 10px 26px rgba(73,192,255,.28);
}

/* ===== Layout (sidebar plus fine, contenu élargi) ===== */
.container{
  position:relative; z-index:1;
  display:grid; grid-template-columns:300px 1fr; gap:2.2rem;
  max-width:1400px; margin:2.2rem auto; padding:0 1.2rem;
}
.sidebar{position:sticky; top:94px; align-self:start}

/* ===== Sidebar rail ===== */
.sidebar-rail{
  position:relative;
}
.sidebar-rail::before{
  /* Liseré lumineux à gauche du rail */
  content:''; position:absolute; left:-10px; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, rgba(73,192,255,.45), rgba(127,227,210,.2) 60%, transparent);
  filter:blur(.5px);
}
.sidebar-stack{
  display:flex; flex-direction:column; gap:1rem;
  /* Donne une impression de colonne longue jusqu’en bas de page */
  min-height: calc(100vh - 140px);
}



/* Cartes de la sidebar */
.side-card{
  background:linear-gradient(180deg, rgba(24,41,62,.82), rgba(15,30,46,.82));
  border:1px solid var(--border);
  border-radius:18px; box-shadow:var(--shadow); padding:1rem 1.1rem;
}
.side-title{
  margin:.1rem 0 .6rem; font-size:1rem; font-weight:800; color:#dff4ff;
}
.side-links{display:flex; flex-direction:column; gap:.4rem}
.side-links a{
  display:block; padding:.55rem .7rem; border-radius:10px; text-decoration:none; color:#caecff;
  border:1px solid transparent; transition:background .15s ease, border-color .15s ease, transform .08s ease;
}
.side-links a:hover{background:#13263d; border-color:#294a69; transform:translateY(-1px)}

/* Statut serveur */
.server-line{
  display:flex; justify-content:space-between; align-items:center; margin:.1rem 0 .55rem;
}
.server-name{font-weight:800; color:#9be6ff}
.server-pill{
  font-size:.8rem; padding:.25rem .55rem; border-radius:999px; border:1px solid #2a4a67;
  background:#12314a; color:#cfeeff;
}
.server-pill.online{
  background:linear-gradient(90deg,var(--primary),var(--accent));
  color:#001827; font-weight:800;
}
.server-kpis{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem;
}
.server-kpis > div{
  background:#0d1b2a; border:1px solid #20364d; border-radius:12px; padding:.5rem .6rem; text-align:center;
}
.server-kpis strong{display:block; font-size:.8rem; color:#9bb6c9}
.server-kpis span{display:block; font-weight:800; color:#dff4ff; margin-top:.15rem}

.side-placeholder{
  border:1px dashed #28435d; border-radius:16px; padding:.9rem 1rem; text-align:center;
}

/* Login (réutilise tes styles existants, avec ajustements subtils) */
.login-card{padding:1.1rem}
.login-form input{border-radius:12px}
.btn-grad.full{display:block; width:100%}

/* ===== Responsive ===== */
@media (max-width: 1200px){
  .container{grid-template-columns:1fr; gap:1.5rem}
  .sidebar{order:2}
  .content{order:1}
  .sidebar-rail::before{display:none}
  .sidebar-stack{min-height:initial}
}

/* ===== FIN BARRE DE GAUCHE ===== */




/* Login premium (plus aéré) */
.login-card{padding:1.4rem; overflow:hidden; position:relative;}
.login-card::before{
  content:''; position:absolute; inset:-1px; border-radius:22px;
  background:linear-gradient(135deg, rgba(73,192,255,.35), rgba(127,227,210,.15), transparent 60%);
  z-index:-1; filter:blur(6px);
}
.login-head{display:flex;align-items:center;gap:1rem;margin-bottom:.9rem}
.login-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(73,192,255,.25),rgba(127,227,210,.25));
  border:1px solid #2a4a67; box-shadow:inset 0 0 24px rgba(73,192,255,.15);
}
.login-form label{display:block;margin:.6rem 0 .25rem;font-weight:600}
.login-form input{
  width:100%;padding:.78rem .95rem;border-radius:14px;
  border:1px solid #274363;background:#0c1a28;color:var(--text)
}
.btn-grad{
  margin-top:.8rem;width:100%;padding:.9rem;border-radius:14px;border:none;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  color:#001827;font-weight:900;cursor:pointer;letter-spacing:.2px;
  box-shadow:0 10px 28px rgba(73,192,255,.25); transition:transform .08s ease;
}
.btn-grad:active{transform:translateY(1px)}
.btn-muted{
  width:100%;padding:.85rem;border-radius:14px;border:1px solid #2a415a;background:#13263a;color:var(--text);cursor:pointer
}
.login-foot{display:flex;justify-content:space-between;align-items:center;margin-top:.6rem}
.muted{color:var(--muted)}

/* Hero slider — plus haut sur desktop */
.hero{
  position:relative; border-radius:22px; overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow);
  background:linear-gradient(180deg,#0f1e2e,#0b1622);
  margin:.25rem 0 1.5rem;
}
.hero-track{display:flex; transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.slide{min-width:100%; height:440px; display:grid; place-items:center; background-size:cover; background-position:center}
.slide-overlay{position:absolute; inset:0;
  background: radial-gradient(1200px circle at 15% -10%, rgba(73,192,255,.18), transparent 40%),
              linear-gradient(180deg, rgba(5,15,25,.0), rgba(5,15,25,.55));
}
.slide-content{position:relative; text-align:left; width:min(95%,1400px); padding:0 1.2rem; margin:0 auto}
.slide-content h2{font-size:2.25rem; margin:.2rem 0 .35rem}
.slide-content p{color:#bed5e6; max-width:780px}
.btn-cta{
  display:inline-block;margin-top:.9rem;padding:.95rem 1.2rem;border-radius:14px;
  background:linear-gradient(90deg,var(--primary),var(--accent));color:#001827;font-weight:900;text-decoration:none;
  box-shadow:0 10px 28px rgba(73,192,255,.25);
}
.hero-nav{position:absolute; top:50%; transform:translateY(-50%); width:46px;height:46px;border-radius:14px;
  border:1px solid #264766; background:#0f1e2eaa; color:#cfeeff; font-size:26px; cursor:pointer; display:grid; place-items:center}
.hero-nav.prev{left:10px} .hero-nav.next{right:10px}
.hero-dots{position:absolute; left:0; right:0; bottom:14px; display:flex; gap:8px; justify-content:center}
.hero-dots button{width:10px;height:10px;border-radius:50%;border:none;background:#2a4b68;cursor:pointer;opacity:.9}
.hero-dots button.active{background:linear-gradient(90deg,var(--primary),var(--accent))}

/* Conteneur */
.hero { position: relative; overflow: hidden; border-radius: 16px; }

/* Slides */
.hero .slide {
  position: relative;
  min-height: 360px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  transition: opacity .35s ease, visibility .35s ease;
}

/* Overlay grisant qui n'intercepte pas les clics */
.hero .slide .slide-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  pointer-events: none; /* 🔑 */
}

/* Contenu au-dessus */
.hero .slide .slide-content { position: relative; z-index: 1; padding: 2rem; max-width: 720px; }
.hero .slide h2 { margin: 0 0 .4rem; font-size: 2rem; }
.hero .slide p  { margin: 0 0 1rem; opacity: .95; }

/* CTA */
.hero .btn-cta {
  display: inline-block;
  padding: .6rem 1rem;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-weight: 700;
  text-decoration: none;
}

/* Nav */
.hero .hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: #fff; font-size: 22px; line-height: 40px;
  cursor: pointer;
}
.hero #heroPrev { left: 10px; }
.hero #heroNext { right: 10px; }

/* Dots */
.hero .hero-dots {
  position: absolute; left: 0; right: 0; bottom: 12px;
  display: flex; gap: 6px; justify-content: center;
}
.hero .hero-dots button {
  width: 10px; height: 10px; border-radius: 50%;
  border: 0; background: #ffffff66; cursor: pointer;
}
.hero .hero-dots button.active { background: #fff; transform: scale(1.15); }

/* Visibilité des slides */
.hero .slide:not(.active) { opacity: 0; visibility: hidden; pointer-events: none; }
.hero .slide.active      { opacity: 1; visibility: visible; }

/* Petit effet à l’arrivée */
@keyframes hsFade { from { opacity: .6; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hero .slide.fade-in { animation: hsFade .35s ease; }



/* ===== News (magazine) ===== */
.news-section{position:relative; z-index:1; margin-top:.2rem}
.news-header{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin:0 0 1.2rem}
.news-header h1{font-size:2.1rem; margin:0}
.news-sub{color:#9bb6c9; margin:0}

.news-grid{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(12, minmax(0,1fr));
}

/* Carte de news */
.news-card{
  display:grid; grid-template-rows:auto 1fr;
  border:1px solid var(--border); border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg,#112134,#0c1725);
  box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, filter .12s ease;
  grid-column: span 4;   /* 3 cartes par ligne (12 / 4) */
  min-height: 340px;
}
.news-card:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 48px rgba(73,192,255,.16);
  border-color:#2b4f71; filter:saturate(1.05);
}

/* Featured (1ère carte plus grande) */
.news-card.featured{
  grid-column: span 8;   /* occupe 2/3 */
  min-height: 420px;
}

/* Zone image de couverture */
.news-cover{
  position:relative; display:block; width:100%; height: 190px;
  background-size:cover; background-position:center;
}
.news-card.featured .news-cover{ height: 260px; }
.news-cover::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(1000px circle at 15% -10%, rgba(73,192,255,.16), transparent 38%),
    linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(5,15,25,.55) 100%);
}

/* Badge de catégorie */
.news-chip{
  position:absolute; left:14px; top:14px; z-index:2;
  display:inline-block; padding:.35rem .6rem; border-radius:999px;
  font-size:.8rem; font-weight:700; letter-spacing:.2px; color:#001827;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  border:1px solid #2a4a67; box-shadow:0 10px 20px rgba(73,192,255,.25);
}

/* Corps */
.news-body{padding:1.1rem 1.2rem 1.2rem}
.news-title{
  display:block; font-weight:800; font-size:1.25rem; line-height:1.25; color:#dff4ff; text-decoration:none; margin:.1rem 0 .45rem;
}
.news-title:hover{text-decoration:underline}
.news-excerpt{
  color:#a7c1d5; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  font-size:1rem;
}

/* Méta */
.news-meta{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  margin-top:.95rem; color:#89a9bf;
}
.meta-author{display:flex; align-items:center; gap:.6rem}
.avatar{
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:#12314a; border:1px solid #2a4a67; color:#9be6ff; font-weight:800; font-size:.9rem;
}
.meta-date{opacity:.95}

/* Responsive */
@media (max-width: 1200px){
  .news-card{grid-column: span 6}         /* 2 par ligne */
  .news-card.featured{grid-column: span 12}
}
@media (max-width: 720px){
  .news-header{flex-direction:column; align-items:flex-start}
  .news-card, .news-card.featured{grid-column: span 12}
  .news-card{min-height:320px}
  .news-card.featured .news-cover{height:220px}
}


/* Footer */
.site-footer{border-top:1px solid #1e3550;margin-top:2.2rem;padding:1.2rem;text-align:center;color:#9ec7e3}

/* Responsive */
@media (max-width: 1200px){
  .container{grid-template-columns:1fr; gap:1.5rem}
  .sidebar{order:2}
  .content{order:1}
  .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slide{height:360px}
}
@media (max-width: 720px){
  .burger{display:inline-block}
  .main-nav{display:none;flex-direction:column;gap:.25rem; padding:.6rem 1rem}
  .main-nav.open{display:flex}
  .slide{height:260px}
  .news-grid{grid-template-columns:1fr}
}




/* test */

/* ===== FOND plus premium (aurora + vignette) ===== */
html, body{
  background:
    radial-gradient(1400px circle at 20% -10%, #0e2438 0%, rgba(10,18,32,.0) 45%),
    radial-gradient(1200px circle at 85% 10%, rgba(73,192,255,.10), rgba(5,15,25,.0) 50%),
    linear-gradient(180deg, #08121d 0%, #050f19 100%);
}

/* renforce la lueur qui suit la souris */
.cursor-glow{
  background: radial-gradient(800px circle at var(--x) var(--y), rgba(73,192,255,.14), transparent 45%);
}

/* ===== BLOCS FROSTED (login + news + sidebar) ===== */
/* base commune (même rendu que le login-card) */
.news-card,
.side-card,
.login-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(24,41,62,.85), rgba(15,30,46,.85));
  border: 1px solid #23415d;
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
}

/* halo/bordure lumineuse (comme le login) */
.news-card::before,
.side-card::before,
.login-card::before{
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(600px circle at 15% -10%, rgba(73,192,255,.28), transparent 55%),
    linear-gradient(135deg, rgba(73,192,255,.22), rgba(127,227,210,.12), transparent 60%);
  filter: blur(6px);
  z-index: -1;
}

/* survol cohérent */
.news-card:hover,
.side-card:hover{
  transform: translateY(-2px);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, filter .12s ease;
  box-shadow: 0 22px 50px rgba(73,192,255,.18);
  border-color: #2b4f71;
  filter: saturate(1.04);
}

/* ===== NEWS plus grandes & aérées (reprend le nouveau skin) ===== */
.news-grid{
  display:grid;
  gap: 1.6rem;
  grid-template-columns: repeat(12, minmax(0,1fr));
}
.news-card{
  grid-column: span 4;        /* 3 par ligne */
  min-height: 360px;
  padding: 0;                 /* géré par cover/body */
}
.news-card.featured{
  grid-column: span 8;        /* 2/3 pour la une */
  min-height: 460px;
}
.news-cover{
  height: 210px;
  background-size: cover; background-position: center;
  position: relative; display:block;
}
.news-card.featured .news-cover{ height: 280px; }
.news-cover::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(1000px circle at 15% -10%, rgba(73,192,255,.16), transparent 38%),
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(5,15,25,.55) 100%);
}
.news-chip{
  position:absolute; left:14px; top:14px; z-index:2;
  padding:.38rem .65rem; border-radius:999px; font-size:.8rem; font-weight:800; letter-spacing:.2px;
  background: linear-gradient(90deg, var(--primary), var(--accent)); color:#001827;
  border:1px solid #2a4a67; box-shadow:0 10px 22px rgba(73,192,255,.25);
}
.news-body{ padding: 1.2rem 1.25rem 1.3rem; }
.news-title{
  display:block; font-weight:900; font-size:1.28rem; line-height:1.24; color:#e6f7ff;
  margin:.15rem 0 .5rem; text-decoration:none;
}
.news-title:hover{text-decoration:underline}
.news-excerpt{
  color:#a7c1d5; margin:0; font-size:1rem;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.news-meta{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:1rem; color:#89a9bf; }
.meta-author{ display:flex; align-items:center; gap:.6rem; }
.avatar{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#12314a; border:1px solid #2a4a67; color:#9be6ff; font-weight:800; font-size:.9rem; }

/* ===== SIDEBAR rail (mêmes effets que login) ===== */
.side-card .btn-grad{ box-shadow:0 12px 28px rgba(73,192,255,.25); }
.server-kpis > div{
  background: #0d1b2a;
  border: 1px solid #274363;
  border-radius: 14px;
}

/* ===== Responsive ===== */
@media (max-width: 1200px){
  .news-card{ grid-column: span 6; min-height: 340px; }   /* 2 par ligne */
  .news-card.featured{ grid-column: span 12; }
}
@media (max-width: 720px){
  .news-card, .news-card.featured{ grid-column: span 12; min-height: 320px; }
  .news-card.featured .news-cover{ height: 230px; }
}




/* ===== Pages Auth (login / register) ===== */
.auth-page{
  max-width: 560px;
  margin: 1rem auto 2rem;
}
.auth-page h1{ margin:.2rem 0 .6rem; }
.auth-form label{ display:block; margin:.6rem 0 .25rem; font-weight:600 }
.auth-form input{
  width:100%; padding:.85rem 1rem; border-radius:14px;
  border:1px solid #274363; background:#0c1a28; color:var(--text)
}
.auth-form .check{ display:flex; align-items:center; gap:.6rem; margin:.7rem 0 }
.field-error{ display:block; margin-top:.25rem; color:#ff9aa4; font-size:.85rem }

/* ===== Page d'inscription moderne ===== */
.auth-grid{
  display:grid; gap:1.6rem; align-items:stretch;
  grid-template-columns: 1.2fr 1fr;
  max-width:1200px; margin:1.6rem auto 2.2rem; padding:0 1.2rem;
}
.auth-aside{
  position:relative; border-radius:22px; overflow:hidden; min-height:560px;
  border:1px solid #1a314b; box-shadow:var(--shadow);
  background-size:cover; background-position:center;
}
.auth-aside-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1100px circle at 15% -10%, rgba(73,192,255,.18), transparent 38%),
    linear-gradient(180deg, rgba(5,15,25,.15), rgba(5,15,25,.75));
}
.auth-aside-inner{
  position:relative; z-index:1; padding:2rem; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end; gap:1rem;
}
.auth-aside h2{font-size:2.2rem; margin:0}
.auth-aside h2 span{color:var(--primary-2)}
.auth-bullets{list-style:none; padding:0; margin:0; color:#cfe6f7}
.auth-bullets li{margin:.2rem 0}
.auth-aside-note{
  background:linear-gradient(180deg, rgba(24,41,62,.75), rgba(15,30,46,.75));
  border:1px solid #274363; border-radius:14px; padding:.8rem 1rem; color:#bfe7ff;
}

.auth-main.card{
  border-radius:22px; padding:1.5rem 1.6rem 1.4rem;
}
.auth-head h1{margin:.2rem 0 .2rem; font-size:1.8rem}
.auth-head .muted{margin:0 0 .8rem}

/* Alertes de retour */
.alert{
  border:1px solid #2a415a; border-radius:14px; padding:.8rem 1rem; margin:.6rem 0 1rem;
  background:linear-gradient(180deg, rgba(18,42,62,.8), rgba(12,26,40,.8));
}
.alert .alert-title{font-weight:800; margin:0 0 .15rem}
.alert.success{border-color:#2f8f5b; background:linear-gradient(180deg, #11331f, #0f281b)}
.alert.error{border-color:#8f2f4e; background:linear-gradient(180deg, #33111a, #2a0f18)}

/* Form layout */
.form-grid{
  display:grid; gap:1rem; grid-template-columns:1fr 1fr; margin:.6rem 0 1.2rem;
}
.form-grid .span-2{grid-column:span 2}
.input-group label{display:block; font-weight:700; margin:.2rem 0 .35rem}
.input-wrap{
  position:relative; display:flex; align-items:center; gap:.5rem;
  background:linear-gradient(180deg, #0c1a28, #0a1622);
  border:1px solid #274363; border-radius:14px; padding:.2rem .6rem .2rem .5rem;
}
.input-icon{color:#9bd8ff; opacity:.9}
.input-wrap input{
  flex:1; border:none; outline:none; background:transparent; color:var(--text);
  padding:.8rem .8rem; font-size:1rem; border-radius:12px;
}
.field-hint{color:#89a9bf}
.field-error{display:block; margin-top:.25rem; color:#ff9aa4; font-size:.9rem}

/* Show/hide password */
.show-pass{
  border:1px solid #274363; background:#13263a; color:#cfeeff;
  border-radius:10px; padding:.4rem .6rem; cursor:pointer;
}

/* Password meter + requirements */
.pass-meter{display:flex; align-items:center; gap:.6rem; margin:.6rem 0 .2rem}
.meter-bar{
  height:8px; flex:1; border-radius:999px; background:#1b2e41;
  position:relative; overflow:hidden;
}
.meter-bar::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg, #ff6b6b, #ffd166, #7ee787);
  transition:width .2s ease;
}
.meter-label{font-size:.9rem; color:#cfe6f7}
.meter-0 .meter-bar::after{width:10%}
.meter-1 .meter-bar::after{width:30%}
.meter-2 .meter-bar::after{width:60%}
.meter-3 .meter-bar::after{width:85%}
.meter-4 .meter-bar::after{width:100%}

.req-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem .8rem; padding:0; list-style:none; margin:.2rem 0 .2rem}
.req-list li{
  position:relative; padding-left:22px; color:#9fb6c9;
}
.req-list li::before{
  content:'•'; position:absolute; left:6px; top:0; color:#789bb5;
}
.req-list li.checked{color:#b7f7c6}
.req-list li.checked::before{content:'✓'; color:#7ee787; left:4px}

/* CTA */
.btn-grad.big{padding:1rem 1.2rem; font-size:1.05rem; border-radius:14px}
.auth-alt{margin:.8rem 0 0}

/* Responsive */
@media (max-width: 1100px){
  .auth-grid{grid-template-columns:1fr; max-width:900px}
  .auth-aside{min-height:300px}
}


/* ===== Page de connexion (réutilise le layout auth moderne) ===== */
.auth-actions{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:.2rem;
}
.auth-actions .link{color:#9bd8ff; text-decoration:none}
.auth-actions .link:hover{text-decoration:underline}

/* Feedback visuel champs (utilisé par JS) */
input.is-valid{ outline:2px solid rgba(126,231,135,.35); border-color:#3b7a57 }
input.is-invalid{ outline:2px solid rgba(255,107,107,.25); border-color:#8f2f4e }



/* ===== Boutons : hovers améliorés ===== */
.btn-grad{
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-grad:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(73,192,255,.30);
  filter: saturate(1.05) brightness(1.03);
}

.btn-muted{
  transition: transform .12s ease, box-shadow .2s ease, background .15s ease, border-color .15s ease;
}
.btn-muted:hover{
  transform: translateY(-1px);
  background: #18304a;
  border-color: #365b7e;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* Nouveau bouton outline (lien secondaire) */
.btn-outline{
  display:inline-block;
  padding:.8rem 1rem;
  border-radius:12px;
  border:1px solid #2a415a;
  background:transparent;
  color:#cfeeff;
  font-weight:700;
  text-decoration:none;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn-outline:hover{
  transform: translateY(-1px);
  background:#13263a;
  border-color:#3a5f82;
}

/* Groupe d’actions du panel login */
.login-actions{
  display:flex; gap:.6rem; align-items:center; margin-top:.8rem;
}

/* Focus inputs + micro hover liens */
.input-wrap input:focus{
  outline:none;
  box-shadow: inset 0 0 0 2px rgba(73,192,255,.18);
  border-color:#3b6f9a;
}
.side-links a:hover{ text-decoration:none }


/* ===== Mon espace ===== */
.account-page{display:grid; gap:1.2rem}
.account-hero{
  display:flex; align-items:center; gap:1rem; justify-content:space-between; flex-wrap:wrap;
}
.account-avatar{
  width:64px;height:64px;border-radius:16px;display:grid;place-items:center;
  background:#12314a;border:1px solid #2a4a67;color:#9be6ff;font-weight:900;font-size:1.6rem;
}
.account-info h1{margin:.2rem 0 .2rem}
.account-actions{display:flex; gap:.6rem}
.account-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1000px){
  .account-grid{grid-template-columns: 1fr}
}


.account-page{display:grid; gap:1.2rem}
.account-grid{display:grid; gap:1rem; grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width: 1000px){ .account-grid{grid-template-columns:1fr} }



/* ===== Mini stats compte ===== */
.account-stats{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-bottom: .5rem;
}
.account-stats .stat{
  background:linear-gradient(180deg, rgba(24,41,62,.85), rgba(15,30,46,.85));
  border:1px solid #23415d; border-radius:16px; padding:.9rem 1rem;
}
.stat-label{color:#9bb6c9; font-size:.95rem; margin-bottom:.2rem}
.stat-value{font-size:1.4rem; font-weight:800; color:#e6f7ff}
@media (max-width: 700px){
  .account-stats{grid-template-columns:1fr}
}


/* ===== Mon espace ===== */

/* ===== Panel "Changer mot de passe" pro & responsive ===== */
.pass-grid{
  display:grid; gap:1.2rem; align-items:stretch;
  grid-template-columns: 1.1fr 1fr;
  max-width:1200px; margin:1.6rem auto 2.2rem; padding:0 1.2rem;
}
.pass-aside{
  position:relative; border-radius:22px; overflow:hidden; min-height:520px;
  border:1px solid #1a314b; box-shadow:var(--shadow);
  background-size:cover; background-position:center;
}
.pass-aside-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1100px circle at 15% -10%, rgba(73,192,255,.18), transparent 38%),
    linear-gradient(180deg, rgba(5,15,25,.15), rgba(5,15,25,.75));
}
.pass-aside-inner{
  position:relative; z-index:1; padding:2rem; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end; gap:.8rem;
}
.pass-badge{
  align-self:flex-start;
  padding:.35rem .6rem; border-radius:999px; border:1px solid #2a4a67;
  background:linear-gradient(90deg,var(--primary),var(--accent)); color:#001827; font-weight:900;
  box-shadow:0 10px 22px rgba(73,192,255,.25);
}
.pass-aside h2{margin:.2rem 0 .4rem; font-size:1.8rem}
.pass-bullets{list-style:none; padding:0; margin:0; color:#cfe6f7}
.pass-bullets li{margin:.15rem 0}

/* Carte/formulaire */
.pass-main.card{ border-radius:22px; padding:1.4rem 1.5rem }
.pass-head h1{ margin:.2rem 0 .2rem }
.pass-actions{ display:flex; gap:.6rem; align-items:center; margin-top:.6rem }

/* Champs avec icônes + hover/focus animés */
.input-group{ margin:.7rem 0 }
.input-group label{ display:block; font-weight:700; margin:.2rem 0 .35rem }
.input-wrap{
  position:relative; display:flex; align-items:center; gap:.5rem;
  background:linear-gradient(180deg, #0c1a28, #0a1622);
  border:1px solid #274363; border-radius:14px; padding:.2rem .4rem .2rem .45rem;
  transition:border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.input-wrap:hover{ transform: translateY(-1px) }
.input-wrap:focus-within{
  border-color:#3b6f9a;
  box-shadow: 0 0 0 2px rgba(73,192,255,.18) inset;
}
.input-icon{ color:#9bd8ff; opacity:.92; transition: transform .15s ease, color .15s ease }
.input-wrap:hover .input-icon,
.input-wrap:focus-within .input-icon{
  transform: translateY(-1px) scale(1.04);
  color:#bde8ff;
}
.input-wrap input{
  flex:1; border:none; outline:none; background:transparent; color:var(--text);
  padding:.82rem .8rem; font-size:1rem; border-radius:12px;
}
.show-pass{
  border:1px solid #274363; background:#13263a; color:#cfeeff;
  border-radius:10px; padding:.38rem .55rem; cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.show-pass:hover{ transform: translateY(-1px); background:#17314a; border-color:#3a5f82 }

/* Meter + requirements (cohérent avec inscription) */
.pass-meter{ display:flex; align-items:center; gap:.6rem; margin:.6rem 0 .2rem }
.meter-bar{ height:8px; flex:1; border-radius:999px; background:#1b2e41; position:relative; overflow:hidden }
.meter-bar::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg, #ff6b6b, #ffd166, #7ee787);
  transition:width .2s ease;
}
.meter-0 #pwdMeter::after{width:10%}
.meter-1 #pwdMeter::after{width:30%}
.meter-2 #pwdMeter::after{width:60%}
.meter-3 #pwdMeter::after{width:85%}
.meter-4 #pwdMeter::after{width:100%}
.meter-label{ font-size:.9rem; color:#cfe6f7 }

.req-list{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem .8rem; padding:0; list-style:none; margin:.2rem 0 .4rem
}
.req-list li{ position:relative; padding-left:22px; color:#9fb6c9 }
.req-list li::before{ content:'•'; position:absolute; left:6px; top:0; color:#789bb5 }
.req-list li.checked{ color:#b7f7c6 }
.req-list li.checked::before{ content:'✓'; color:#7ee787; left:4px }

/* Responsive */
@media (max-width: 1100px){
  .pass-grid{ grid-template-columns:1fr; max-width:900px }
  .pass-aside{ min-height:300px }
}

/* ===== Toast PAGE PROFIL (messages flash dans le panneau) ===== */
.toast{
  display:flex; align-items:center; gap:.6rem;
  padding:.75rem .9rem; border-radius:14px; margin-bottom:.8rem;
  border:1px solid transparent; position:relative;
  animation: toastIn .18s ease-out;
}
@keyframes toastIn{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
.toast-success{
  background:linear-gradient(180deg, rgba(10,40,22,.9), rgba(6,24,16,.9));
  border-color:#1f5a3b; box-shadow:0 10px 22px rgba(25, 200, 120, .15);
}
.toast-error{
  background:linear-gradient(180deg, rgba(45,12,12,.9), rgba(30,8,8,.9));
  border-color:#6b2a2a; box-shadow:0 10px 22px rgba(250, 90, 90, .15);
}
.toast-icon{ font-size:1.2rem }
.toast-content{ display:flex; flex-direction:column; line-height:1.2 }
.toast-content strong{ font-weight:800; color:#e6f7ff }
.toast-content span{ color:#cfe6f7 }
.toast-close{
  position:absolute; right:.5rem; top:.3rem; border:none; background:transparent; color:#b7cde0; font-size:1.2rem; cursor:pointer;
  transition: transform .12s ease, color .15s ease;
}
.toast-close:hover{ transform:scale(1.05); color:#eaf6ff }


/* ===== Toast (messages flash dans le panneau) ===== */
.toast{
  display:flex; align-items:center; gap:.6rem;
  padding:.75rem .9rem; border-radius:14px; margin-bottom:.8rem;
  border:1px solid transparent; position:relative;
  animation: toastIn .18s ease-out;
}
@keyframes toastIn{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
.toast-success{
  background:linear-gradient(180deg, rgba(10,40,22,.9), rgba(6,24,16,.9));
  border-color:#1f5a3b; box-shadow:0 10px 22px rgba(25, 200, 120, .15);
}
.toast-error{
  background:linear-gradient(180deg, rgba(45,12,12,.9), rgba(30,8,8,.9));
  border-color:#6b2a2a; box-shadow:0 10px 22px rgba(250, 90, 90, .15);
}
.toast-icon{ font-size:1.2rem }
.toast-content{ display:flex; flex-direction:column; line-height:1.2 }
.toast-content strong{ font-weight:800; color:#e6f7ff }
.toast-content span{ color:#cfe6f7 }
.toast-close{
  position:absolute; right:.5rem; top:.3rem; border:none; background:transparent; color:#b7cde0; font-size:1.2rem; cursor:pointer;
  transition: transform .12s ease, color .15s ease;
}
.toast-close:hover{ transform:scale(1.05); color:#eaf6ff }

/* ===== Carte de consentement (CGU) ===== */
.consent-card{
  display:grid; grid-template-columns:auto 1fr auto; gap:.8rem; align-items:center;
  border:1px solid #2a415a; border-radius:14px; padding:.9rem 1rem;
  background:linear-gradient(180deg, rgba(24,41,62,.65), rgba(15,30,46,.65));
  cursor:pointer; user-select:none; transition:border-color .15s ease, background .15s ease, transform .08s ease;
}
.consent-card:hover{ transform:translateY(-1px); border-color:#3b6f9a; background:rgba(20,36,56,.6) }
.consent-card input[type="checkbox"]{
  width:18px; height:18px; accent-color:#49c0ff; cursor:pointer;
}
.consent-content{ display:flex; flex-direction:column; gap:.2rem }
.consent-title{ font-weight:800; color:#e6f7ff }
.consent-text{ color:#bcd3e5; font-size:.95rem }
.consent-text a{ color:#9bd8ff; text-decoration:underline dotted }
.consent-check{
  width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  border:1px solid #2a415a; background:#102133; color:#7ee787; opacity:0; transform:scale(.85); transition:opacity .12s ease, transform .12s ease;
}
.consent-card input:checked ~ .consent-check{ opacity:1; transform:scale(1) }

/* Bouton submit désactivé */
#regSubmit[disabled]{ opacity:.6; cursor:not-allowed; filter:grayscale(.2) }

/* (Le reste de tes styles auth-grid / input-group / pass-meter / req-list existe déjà) */


/* ===== Profil (mise à niveau) ===== */
.profile-grid{
  display:grid; gap:1.2rem; align-items:stretch;
  grid-template-columns: .9fr 1.1fr;
  max-width:1200px; margin:1.6rem auto 2.2rem; padding:0 1.2rem;
}
.profile-aside.card, .profile-main.card{ border-radius:22px; padding:1.4rem 1.5rem }
.profile-header{ display:flex; align-items:center; gap:1rem; margin-bottom:.6rem }
.profile-avatar.big{
  width:96px; height:96px; border-radius:20px; overflow:hidden; background:#0d2233; border:1px solid #2a4a67; box-shadow:var(--shadow);
}
.profile-avatar.big img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .2s ease;
}
.profile-avatar.big:hover img{ transform: scale(1.02); }
.profile-avatar.ring{ box-shadow:0 0 0 2px #183b55, 0 0 0 6px rgba(73,192,255,.15); }
.profile-tips{ list-style:none; padding:0; margin:.3rem 0 1rem; color:#9bb6c9 }
.profile-tips li{ margin:.15rem 0 }

.uploader-row{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap }
.uploader{
  display:flex; align-items:center; justify-content:center; gap:.8rem;
  border:2px dashed #2a415a; border-radius:16px; padding:1.1rem 1.2rem;
  background:linear-gradient(180deg, rgba(24,41,62,.65), rgba(15,30,46,.65));
  transition:border-color .15s ease, background .15s ease, transform .08s ease;
  cursor:pointer; min-width:260px; flex:1;
}
.uploader:hover, .uploader:focus{ border-color:#3b6f9a; background:rgba(20,36,56,.6); transform: translateY(-1px) }
.uploader.dragging{ border-color:#4fb1ff; background:rgba(30,54,80,.7) }
.uploader-icon{ font-size:1.4rem }
.uploader .small{ font-size:.85rem }

.profile-actions{ display:flex; gap:.6rem; margin-top:.6rem }

/* Inputs déjà stylés (réutilise .input-group / .input-wrap / .btn-*) */

/* Responsive */
@media (max-width: 1100px){
  .profile-grid{ grid-template-columns:1fr; max-width:900px }
  .profile-avatar.big{ width:84px; height:84px }
}



/* ===== Toast PAGE PROFIL FINNNNNNNN(messages flash dans le panneau) ===== */



/* ===== Sidebar login avatar & layout ===== */
.login-head.logged{ display:flex; align-items:center; gap:.7rem }
.login-avatar{
  width:42px; height:42px; border-radius:50%; overflow:hidden;
  border:1px solid #2a4a67; box-shadow:var(--shadow); background:#0d2233;
  flex:0 0 auto;
}
.login-avatar img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .2s ease }
.login-avatar:hover img{ transform: scale(1.04) }

.login-actions{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:.6rem;
}
.login-actions .btn-grad:hover,
.login-actions .btn-outline:hover,
.login-actions .btn-muted:hover{ transform: translateY(-1px) }

/* ===== Sidebar login: alignement avatar ===== */
.login-head.logged{ display:flex; align-items:center; gap:.7rem }
.login-avatar{
  width:42px; height:42px; border-radius:50%; overflow:hidden;
  border:1px solid #2a4a67; box-shadow:var(--shadow); background:#0d2233;
  flex:0 0 auto;
}
.login-avatar img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .2s ease }
.login-avatar:hover img{ transform: scale(1.04) }

/* ===== Actions: boutons mêmes tailles & full width ===== */
.login-actions{
  display:grid; grid-template-columns:1fr; gap:.5rem; margin-top:.6rem;
}
.login-actions .btn-grad,
.login-actions .btn-outline,
.login-actions .btn-muted{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; min-height:44px; padding:.68rem .9rem;
  border-radius:12px; line-height:1; text-align:center;
  transition: transform .12s ease, box-shadow .15s ease;
}
.login-actions .btn-grad:hover,
.login-actions .btn-outline:hover,
.login-actions .btn-muted:hover{
  transform: translateY(-1px);
}

/* le form de déconnexion ne doit pas casser la grille */
.login-actions .login-logout{ margin:0; }
.login-actions .login-logout .btn-muted{ width:100%; }

/* Option: si tu veux les 3 boutons sur une ligne quand la sidebar est large */
@media (min-width: 900px){
  .sidebar-wide .login-actions{ grid-template-columns: repeat(3, 1fr); }
}


/* ===== Account hero (compact & responsive) ===== */
.account-hero{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1.1rem 1.2rem; border-radius:22px;
}
.account-hero .account-avatar{
  width:72px; height:72px; border-radius:50%;
  border:1px solid #2a4a67; background:#0d2233; box-shadow:var(--shadow);
  overflow:hidden; flex:0 0 72px;
}
.account-hero .account-avatar img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .2s ease;
}
.account-hero .account-avatar:hover img{ transform: scale(1.02); }

.account-hero .account-info{ min-width:220px; flex:1 1 auto }
.account-hero .account-actions{
  margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap;
}
.account-hero .account-actions .btn-grad,
.account-hero .account-actions .btn-outline{
  min-height:42px; padding:.6rem .9rem; border-radius:12px;
}

/* Stats */
.account-stats{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.7rem;
  margin: .9rem 0 1.1rem;
}
.account-stats .stat{
  background:linear-gradient(180deg, rgba(24,41,62,.65), rgba(15,30,46,.65));
  border:1px solid #2a415a; border-radius:16px; padding:.8rem 1rem;
}
.stat-label{ color:#9bb6c9; font-size:.95rem }
.stat-value{ font-size:1.4rem; font-weight:800; color:#e6f7ff }

/* Grid secondaire (une seule carte ici) */
.account-grid{ display:grid; grid-template-columns:1fr; gap:.8rem }

/* Toast (si pas déjà en place dans ton CSS global) */
.toast{
  display:flex; align-items:center; gap:.6rem; padding:.75rem .9rem; border-radius:14px; margin-bottom:.8rem;
  border:1px solid transparent; position:relative; animation: toastIn .18s ease-out;
}
@keyframes toastIn{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
.toast-success{ background:linear-gradient(180deg, rgba(10,40,22,.9), rgba(6,24,16,.9)); border-color:#1f5a3b; box-shadow:0 10px 22px rgba(25,200,120,.15) }
.toast-error{ background:linear-gradient(180deg, rgba(45,12,12,.9), rgba(30,8,8,.9)); border-color:#6b2a2a; box-shadow:0 10px 22px rgba(250,90,90,.15) }
.toast-icon{ font-size:1.2rem }
.toast-content{ display:flex; flex-direction:column; line-height:1.2 }
.toast-content strong{ font-weight:800; color:#e6f7ff }
.toast-content span{ color:#cfe6f7 }
.toast-close{ position:absolute; right:.5rem; top:.3rem; border:none; background:transparent; color:#b7cde0; font-size:1.2rem; cursor:pointer; transition: transform .12s ease, color .15s ease }
.toast-close:hover{ transform:scale(1.05); color:#eaf6ff }

/* Responsive */
@media (max-width: 720px){
  .account-hero .account-actions{ width:100%; margin-left:0 }
  .account-hero .account-actions .btn-grad,
  .account-hero .account-actions .btn-outline{ flex:1 1 auto; width:100% }
  .account-stats{ grid-template-columns:1fr }
}



/* Ligne options email/pass */
.form-row.between{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin:.4rem 0 .6rem }

/* Lien oublié discret */
.link-muted{ color:#9bb6c9; text-decoration:none; font-size:.95rem }
.link-muted:hover{ color:#cfe6f7; text-decoration:underline }

/* Toggle 'Se souvenir de moi' */
.toggle{ display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; user-select:none }
.toggle input{ position:absolute; opacity:0; pointer-events:none }
.toggle-track{
  width:44px; height:24px; border-radius:999px; border:1px solid #2a415a;
  background:linear-gradient(180deg, #0f2233, #0b1a28);
  box-shadow: inset 0 0 0 2px rgba(73,192,255,.05);
  display:inline-flex; align-items:center; padding:2px; transition:all .16s ease;
}
.toggle-thumb{
  width:18px; height:18px; border-radius:50%;
  background:#9bb6c9; box-shadow:0 2px 6px rgba(0,0,0,.35);
  transform: translateX(0); transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.toggle:hover .toggle-thumb{ box-shadow:0 3px 10px rgba(0,0,0,.45) }
.toggle input:focus-visible + .toggle-track{ outline:2px solid #49c0ff44; outline-offset:2px }
.toggle input:checked + .toggle-track{ background:linear-gradient(180deg, #0e2f44, #0c2a3d); border-color:#3b6f9a }
.toggle input:checked + .toggle-track .toggle-thumb{
  transform: translateX(20px); background:#49c0ff;
}
.toggle-label{ color:#cfe6f7; font-weight:600; font-size:.95rem }

/* Œil mot de passe (si pas déjà stylé) */
.input-wrap{ position:relative }
.input-wrap .show-pass{
  position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  border:none; background:transparent; cursor:pointer; font-size:1rem; line-height:1;
  opacity:.8; transition:opacity .14s ease, transform .12s ease;
}
.input-wrap .show-pass:hover{ opacity:1; transform:translateY(-50%) scale(1.06) }

/* Boutons unifiés pleine largeur dans la sidebar */
.login-actions{
  display:grid; grid-template-columns:1fr; gap:.5rem; margin-top:.6rem;
}
.login-actions .btn-grad,
.login-actions .btn-outline,
.login-actions .btn-muted{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; min-height:44px; padding:.68rem .9rem; border-radius:12px;
  transition: transform .12s ease, box-shadow .15s ease;
}
.login-actions .btn-grad:hover,
.login-actions .btn-outline:hover,
.login-actions .btn-muted:hover{ transform: translateY(-1px) }
.login-actions .login-logout{ margin:0 }





/* === Comptes liés — table stylée sur palette dark/bleu =================== */

/* Conteneur du tableau */
.table-wrap{
  margin-top:.75rem;
  border:1px solid var(--border,#1a314b);
  border-radius:18px;
  background: linear-gradient(180deg, rgba(24,41,62,.85), rgba(15,30,46,.85));
  box-shadow: var(--shadow, 0 16px 48px rgba(0,0,0,.35));
  overflow:auto;
}

/* Tableau (on cible explicitement un <table>) */
table.data-table{
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0;
  color:var(--text,#dff4ff);
  font-size:.95rem;
}

/* En-tête collant avec fond glacé */
table.data-table thead th{
  position:sticky; top:0; z-index:2;
  background:
    radial-gradient(800px circle at 8% -20%, rgba(73,192,255,.12), transparent 40%),
    linear-gradient(180deg, #0f1c2b, #0d1a27);
  color:var(--text,#dff4ff);
  padding:12px 14px;
  text-align:left;
  font-weight:800;
  letter-spacing:.01em;
  border-bottom:1px solid rgba(73,192,255,.12);
  white-space:nowrap;
}

/* Séparateur lumineux sous l’en-tête */
table.data-table thead tr::after{
  content:''; display:block; height:1px;
  background:linear-gradient(90deg, var(--primary,#49c0ff), var(--accent,#7fe3d2));
}

/* Lignes & cellules */
table.data-table tbody td{
  padding:12px 14px;
  border-bottom:1px solid rgba(42,65,90,.65);
  vertical-align:middle;
}

/* Zébrage très discret + hover froid */
table.data-table tbody tr:nth-child(odd){ background:rgba(18,34,52,.35); }
table.data-table tbody tr:hover{
  background: rgba(24,41,62,.55);
  box-shadow: inset 0 0 0 1px rgba(73,192,255,.10);
}

/* Colonne actions compacte */
.th-actions, .row-actions{ width:1%; white-space:nowrap; text-align:right; }

/* “code” pour le login */
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:.92rem;
  background: rgba(18,49,74,.35);
  padding:.18rem .45rem;
  border-radius:8px;
  border:1px solid rgba(73,192,255,.18);
}

/* Bouton icône “copier” */
.icon-btn{
  border:0; background:transparent;
  margin-left:.45rem; cursor:pointer;
  color:#cfeeff; opacity:.75;
  transition:opacity .15s, transform .15s, color .15s;
}
.icon-btn:hover{ opacity:1; transform:translateY(-1px); color:var(--primary,#49c0ff); }
.icon-btn.copied{ color:var(--accent,#7fe3d2); opacity:1; }

/* Chips & badges au style du thème */
.chip{
  display:inline-block;
  padding:.25rem .6rem;
  border-radius:999px;
  background:rgba(18,49,74,.35);
  border:1px solid rgba(73,192,255,.18);
  font-weight:700; font-size:.85rem; color:#dff4ff;
}

.badge{
  display:inline-block;
  padding:.22rem .5rem; border-radius:9px;
  font-weight:800; font-size:.8rem;
  background: linear-gradient(90deg, var(--primary,#49c0ff), var(--accent,#7fe3d2));
  color:#001827; border:1px solid #2a4a67;
  box-shadow: 0 6px 16px rgba(73,192,255,.18);
}
.badge-admin{
  background:linear-gradient(180deg, #4a0f1a, #3a0d16);
  color:#ffd7dc; border-color:#6b2a2a;
}
.badge-mod{
  background:linear-gradient(180deg, #3a2a0d, #2f220b);
  color:#ffe8b8; border-color:#7a5b1a;
}
.badge-user{
  background:linear-gradient(180deg, #0e2f44, #0b2436);
  color:#cfeeff; border-color:#2a4a67;
}

/* Header de la carte + compteur */
.card-head.between{ display:flex; align-items:center; justify-content:space-between; }
.card-head .small{ color:var(--muted,#9bb6c9); }

/* Empty state harmonisé */
.empty-state{ display:flex; gap:.8rem; align-items:center; padding:16px 6px; }
.empty-ico{ font-size:1.35rem; }
.empty-title{ font-weight:900; color:#e6f7ff; }
.empty-text{ color:#9bb6c9; }

/* Responsive : paddings plus serrés */
@media (max-width: 820px){
  table.data-table{ min-width:100%; }
  table.data-table thead th, table.data-table tbody td{ padding:10px 12px; }
}

.btn-grad[disabled],
.btn-outline[disabled],
.btn-muted[disabled]{
  opacity:.6;
  cursor:not-allowed;
  filter:grayscale(.2);
}


/* ======  NEWS POPUP ECT */

/* ===== Popup News premium ======================================= */
.hidden{display:none !important}

.news-popup{
  position:fixed; inset:0; z-index:70;
  display:none; /* contrôlé en JS */
}
.news-popup.open{ display:block }

.news-popup-backdrop{
  position:absolute; inset:0;
  background:rgba(6,15,25,.65);
  backdrop-filter: blur(6px) saturate(120%);
}

.news-popup-panel{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.98);
  width:min(900px, 92vw); max-height:min(88vh, 820px);
  border:1px solid var(--border);
  border-radius:22px; overflow:hidden;
  background:linear-gradient(180deg, rgba(24,41,62,.92), rgba(15,30,46,.92));
  box-shadow:0 40px 120px rgba(0,0,0,.45), 0 0 0 1px rgba(73,192,255,.06) inset;
  animation: popupIn .18s ease-out forwards;
}
@keyframes popupIn{
  from{ transform:translate(-50%,-52%) scale(.96); opacity:.8 }
  to  { transform:translate(-50%,-50%) scale(1);   opacity:1 }
}

.news-popup-close{
  position:absolute; right:10px; top:10px;
  width:40px; height:40px; border-radius:12px;
  border:1px solid #2a415a; background:#0f1e2e; color:#cfeeff;
  font-size:22px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
  z-index:2;
}
.news-popup-close:hover{ transform:translateY(-1px); background:#132a41; border-color:#396089 }

/* Contenu scrollable */
.news-popup-body{
  max-height:min(88vh, 820px);
  overflow:auto;
  padding:1.1rem 1.2rem 1.2rem;
}

/* ===== Article dans la popup ==================================== */
.news-article{ display:block }
.na-head{
  padding: .6rem .2rem .8rem;
}
.na-title{
  margin:.25rem 0 .35rem; font-size:1.9rem; line-height:1.15; font-weight:900; color:#e6f7ff;
}
.na-meta{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem; color:#9bb6c9;
}
.na-meta .meta-left{ display:flex; align-items:center; gap:.6rem }
.na-hero{
  margin:.8rem 0 0; border-radius:16px; overflow:hidden;
  border:1px solid #23415d; box-shadow:0 12px 36px rgba(0,0,0,.35);
}
.na-hero img{ display:block; width:100%; height:auto }

.na-divider{
  height:1px; margin:1rem 0 1rem;
  background:
    linear-gradient(90deg, transparent, rgba(73,192,255,.35), rgba(127,227,210,.28), transparent);
  border-radius:999px;
}

.na-body{ color:#cfe6f7; font-size:1rem; line-height:1.6 }
.na-body .prose, .na-body.prose{ color:inherit }
.na-body p{ margin:.6rem 0 }
.na-body h3{ margin:1rem 0 .4rem; font-size:1.25rem }
.na-body ul{ margin:.5rem 0 .8rem .9rem }
.na-body a{ color:var(--primary) }
.na-body strong{ color:#eaf6ff }

/* ===== Skeleton (chargement) ===================================== */
.news-skel{
  padding:1rem 1.2rem;
}
.skel-line{
  height:14px; border-radius:10px; margin:.5rem 0;
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  animation: skel 1.2s linear infinite;
}
.skel-hero{
  height:220px; border-radius:16px; margin:.8rem 0; border:1px solid #23415d;
  background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.1), rgba(255,255,255,.04));
  animation: skel 1.2s linear infinite;
}
@keyframes skel{
  0%{ filter:brightness(1) } 50%{ filter:brightness(1.05) } 100%{ filter:brightness(1) }
}


/* ===== News toolbar / filtres ===== */
.news-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem; margin:.6rem 0 1rem;
}
.news-toolbar .filters{ display:flex; gap:.4rem; flex-wrap:wrap }
.chip{ display:inline-block; padding:.28rem .7rem; border-radius:999px; border:1px solid #2a415a; background:rgba(24,41,62,.5); color:#dff4ff; font-weight:700; font-size:.9rem; }
.chip:hover{ background:#13263a; border-color:#3a5f82; text-decoration:none }
.chip-active{ background:linear-gradient(90deg, var(--primary), var(--accent)); color:#001827; border-color:#2a4a67; }

/* ===== Pagination ===== */
.pager{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  margin:1.1rem 0 0;
}
.page-btn, .page-num, .gap{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 .6rem;
  border-radius:10px; border:1px solid #2a415a; background:#0f1e2e; color:#cfeeff; text-decoration:none; font-weight:700;
}
.page-num.active{ background:linear-gradient(90deg, var(--primary), var(--accent)); color:#001827; border-color:#2a4a67; }
.page-btn.disabled{ opacity:.6; pointer-events:none }

/* ===== Popup (structure déjà en place) – enrichissements ===== */
.news-popup-panel{ max-width:min(920px,95vw); }
.news-article .na-head .na-title{ margin:.2rem 0 .2rem; font-size:1.6rem; }
.na-meta{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; color:#9bb6c9; }
.na-lead{ margin:.35rem 0 .8rem; color:#cfe6f7; font-size:1.05rem; line-height:1.55 }
.na-hero img{ width:100%; height:auto; border-radius:14px }
.na-divider{ height:1px; margin:1rem 0; background:linear-gradient(90deg, rgba(73,192,255,.25), rgba(127,227,210,.12)) }

/* Prose dans la popup */
.prose p{ margin:.45rem 0 }
.prose ul, .prose ol{ padding-left:1.2rem; margin:.45rem 0 }
.prose blockquote{
  margin:.6rem 0; padding:.6rem .8rem; border-left:3px solid var(--primary);
  background:linear-gradient(180deg, rgba(24,41,62,.45), rgba(15,30,46,.45));
  border-radius:10px;
}
.prose pre, .prose code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: rgba(18,49,74,.35); border:1px solid rgba(73,192,255,.18); border-radius:8px;
}
.prose pre{ padding:.6rem .8rem; overflow:auto }

/* ===== Overlay zoom image ===== */
.img-zoom-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(5,15,25,.6); backdrop-filter: blur(4px);
}
.img-zoom-overlay.hidden{ display:none }
.img-zoom-overlay .zoom-img{
  max-width:92vw; max-height:92vh; border-radius:16px; border:1px solid #23415d;
  box-shadow:0 24px 64px rgba(0,0,0,.45);
}
.img-zoom-overlay .zoom-backdrop{ position:absolute; inset:0 }