/* ===========================================================
   DIASPO'ACTIF — Charte graphique institutionnelle
   =========================================================== */
:root{
  /* ── Palette officielle Diaspo'Actif ── */
  --navy:#0D2B4E;          /* Bleu institutionnel */
  --navy-light:#1E4F8A;    /* Bleu profond */
  --blue-clair:#4490E2;    /* Bleu clair */
  --orange:#F26422;        /* Orange impact */
  --orange-light:#FFF0E8;  /* Orange teinté clair */
  --bg:#EEF2F8;            /* Fond page — gris-bleu doux */
  --card:#F9F8F3;          /* Cartes — ivoire doux */
  --text:#0D2B4E;          /* Texte principal */
  --muted:#6C757D;         /* Gris neutre */
  --border:#DCE4EF;        /* Bordures */
  --green:#1A7A52;
  --radius:10px;
  --shadow:0 2px 16px rgba(13,43,78,.10);
}
/* ── Application palette ── */
html,body{background:var(--bg)!important;}
.stat-card,.card,.modal-box,.search-card,.nat-card,.chat-wrap,
.profile-card,.price-card,.po-feed-card,.notif-dropdown,.tooltip-box{
  background:var(--card)!important;
  box-shadow:0 2px 12px rgba(13,43,78,.08)!important;
}
.content{background:var(--bg)!important;}
.topbar{background:var(--navy)!important; color:#fff!important;}
.topbar .nav a,.topbar a{color:rgba(255,255,255,.85)!important;}
.topbar .nav a:hover{color:#fff!important;}
input,select,textarea{background:#F8FAFD!important; border-color:var(--border)!important;}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}

/* ---------- Layout ---------- */
.page{min-height:100vh;display:flex;flex-direction:column;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ---------- Topbar ---------- */
.topbar{
  background:var(--card);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
}
.topbar-inner{
  display:flex;align-items:center;gap:28px;
  max-width:1180px;margin:0 auto;padding:14px 24px;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:.3px;color:#fff;}
.logo .tree{width:32px;height:32px;border-radius:6px;background:var(--orange);display:flex;align-items:center;justify-content:center;font-size:16px;}
.logo-img{width:40px;height:40px;flex:none;}
.logo small{display:block;font-weight:400;font-size:10px;color:rgba(255,255,255,.7);letter-spacing:1px;text-transform:uppercase;}
.nav{display:flex;gap:20px;flex:1;flex-wrap:wrap;}
.nav a{font-size:14px;font-weight:600;color:rgba(255,255,255,.8);padding:6px 0;border-bottom:2px solid transparent;}
.nav a.active,.nav a:hover{color:#fff;border-bottom-color:var(--orange);}
.topbar-right{display:flex;align-items:center;gap:12px;}
.lang-select{border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:6px 10px;font-size:12px;font-weight:700;color:#000;background:rgba(255,255,255,.85);}
.lang-select option{color:#000;}
.role-switch{display:flex;background:rgba(255,255,255,.1);border-radius:30px;padding:3px;gap:2px;border:1px solid rgba(255,255,255,.2);}
.role-switch button{border:none;background:transparent;padding:6px 12px;border-radius:24px;font-size:12px;font-weight:700;color:rgba(255,255,255,.7);}
.role-switch button.active{background:#fff;color:var(--navy);}
.user-chip{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#fff;}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;overflow:hidden;}
.avatar img,.init-logo img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:10px 18px;border-radius:30px;font-weight:700;font-size:14px;border:1px solid transparent;
}
.btn-orange{background:var(--orange);color:#fff;}
.btn-orange:hover{background:#d9650f;}
.btn-outline{background:var(--card);border:1px solid var(--border);color:var(--navy);}
.btn-outline:hover{border-color:var(--orange);color:var(--orange);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:20px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ---------- Hero / world network ---------- */
.hero{
  background:linear-gradient(160deg,#0F2A50 0%,#1B3A6B 60%,#1565C0 100%);
  color:#fff;position:relative;overflow:hidden;
}
.hero-inner{max-width:1180px;margin:0 auto;padding:46px 24px 56px;position:relative;z-index:2;}
.hero h1{font-size:30px;margin:0 0 8px;}
.hero p{color:#C7CBD6;max-width:560px;margin:0 0 22px;font-size:15px;}
.network{position:relative;height:340px;border-radius:var(--radius);background:#10141d;overflow:hidden;border:1px solid #2b3142;}
.network svg{width:100%;height:100%;display:block;}
.dot{fill:#4A90D9;filter:drop-shadow(0 0 5px rgba(69,144,217,.7));}
.dot.dim{fill:#3a4a6b;filter:none;}
.link{stroke:rgba(69,144,217,.3);stroke-width:1;fill:none;}
.tooltip-card{
  position:absolute;background:var(--card);color:var(--text);border-radius:10px;padding:12px 14px;
  box-shadow:var(--shadow);font-size:12.5px;max-width:230px;
}
.callout-onboard{top:14px;right:14px;}
.callout-immersive{bottom:18px;left:18px;}

/* ---------- Section ---------- */
.section{padding:34px 0;}
.section h2{font-size:21px;margin:0 0 4px;}
.section .sub{color:var(--muted);font-size:14px;margin:0 0 20px;}

/* ---------- Cards grid ---------- */
.grid{display:grid;gap:18px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:1040px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr;}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr;}}

.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);
}
.card h3{margin:0 0 6px;font-size:16px;}
.card p{margin:0;color:var(--muted);font-size:13.5px;}
.icon-badge{
  width:42px;height:42px;border-radius:12px;background:var(--orange-light);color:var(--orange);
  display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px;
}

/* ---------- Search bar ---------- */
.search-card{background:var(--card);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);border:1px solid var(--border);}
.search-card h2{margin:0 0 14px;font-size:18px;}
.search-row{display:flex;gap:10px;margin-bottom:14px;}
.search-row input{flex:1;padding:12px 16px;border-radius:30px;border:1px solid var(--border);font-size:14px;}
.filters{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end;}
@media(max-width:980px){.filters{grid-template-columns:repeat(2,1fr);}}
.filters label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;display:block;margin-bottom:4px;}
.filters select{width:100%;padding:10px;border-radius:8px;border:1px solid var(--border);font-size:13px;background:var(--card);}
.checkbox-row{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;font-weight:600;color:var(--navy);}
.checkbox-row input{width:16px;height:16px;}

/* ---------- Initiative list ---------- */
.init-card{
  display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);
}
.init-logo{width:48px;height:48px;border-radius:50%;background:var(--orange-light);color:var(--orange);
  display:flex;align-items:center;justify-content:center;font-weight:800;flex:none;overflow:hidden;}
.init-card .meta{flex:1;}
.init-card .meta h4{margin:0 0 3px;font-size:15px;}
.init-card .meta .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.tag{font-size:11px;background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:3px 10px;color:var(--muted);}
.badge{font-size:11px;font-weight:700;border-radius:20px;padding:3px 10px;}
.badge-ong{background:#E7F4EE;color:var(--green);}
.badge-asso{background:#E8F1FC;color:var(--navy);}
.badge-ent{background:#EAF0FF;color:#3457D5;}
.badge-fond{background:#F4E9FF;color:#8138C2;}
.badge-coop{background:#FFF6DA;color:#B68900;}
.badge-instit{background:#E0ECFF;color:#1A4FBF;}
.badge-unique{background:#E8F1FC;color:#1B3A6B;}

/* ---------- Pricing / abonnement ---------- */
.price-card{background:var(--card);border:2px solid var(--navy);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);text-align:center;}
.price-card .amount{font-size:34px;font-weight:800;color:var(--navy);}
.price-card .amount span{font-size:14px;font-weight:600;color:var(--muted);}
.chip-select{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--navy);margin:3px;}
.simple-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.simple-table th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;border-bottom:1px solid var(--border);}
.simple-table td{padding:10px;border-bottom:1px solid var(--border);}
.modal-overlay{position:fixed;inset:0;background:rgba(20,22,30,.55);display:flex;align-items:center;justify-content:center;z-index:100;}
.modal-box{background:var(--card);border-radius:var(--radius);padding:28px;max-width:380px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25);}

/* ---------- Sidebar layout (dashboards) ---------- */
.with-sidebar{display:flex;flex:1;}
.sidebar{
  width:280px;background:var(--navy);color:#cdd1dc;padding:22px 16px;flex:none;
  position:sticky;top:58px;height:calc(100vh - 58px);overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent;
}
.sidebar .brand{color:#fff;font-weight:800;margin-bottom:26px;padding:0 8px;font-size:16px;}
.sidebar a{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:10px;font-size:15.5px;font-weight:600;margin-bottom:4px;background:#fff;color:#0D2B4E;}
.sidebar a.active{background:var(--navy-light);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);}
.sidebar a:hover{filter:brightness(0.96);}
.sidebar .sb-group-lbl{color:#aeb3c2;}
.sidebar .pill{background:var(--orange);color:#fff;font-size:10px;border-radius:20px;padding:1px 7px;margin-left:auto;}
.form-label{font-weight:600;font-size:12.5px;color:var(--text);display:block;}
.content{flex:1;padding:30px 34px;background:var(--bg);}
.content h1{font-size:22px;margin:0 0 18px;}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px;}
.stat-card{background:var(--card);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);border:1px solid var(--border);}
.stat-card .num{font-size:26px;font-weight:800;}
.stat-card .label{color:var(--muted);font-size:12.5px;}

/* ---------- Messaging ---------- */
.chat-wrap{display:flex;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);height:520px;}
.chat-list{width:280px;border-right:1px solid var(--border);overflow-y:auto;}
.chat-item{padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;}
.chat-item.active{background:var(--orange-light);}
.chat-item h5{margin:0 0 3px;font-size:13.5px;}
.chat-item p{margin:0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-main{flex:1;display:flex;flex-direction:column;}
.chat-head{padding:14px 18px;border-bottom:1px solid var(--border);font-weight:700;font-size:14px;}
.chat-body{flex:1;padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;}
.bubble{max-width:62%;padding:10px 14px;border-radius:16px;font-size:13.5px;}
.bubble.me{background:var(--navy);color:#fff;align-self:flex-end;border-bottom-right-radius:4px;}
.bubble.them{background:var(--bg);align-self:flex-start;border-bottom-left-radius:4px;}
.chat-input{display:flex;gap:10px;padding:14px;border-top:1px solid var(--border);}
.chat-input input{flex:1;padding:10px 14px;border-radius:30px;border:1px solid var(--border);}
.lock-note{font-size:11.5px;color:var(--muted);padding:8px 18px;border-top:1px solid var(--border);display:flex;gap:6px;align-items:center;}

/* ---------- Footer ---------- */
.footer{background:var(--navy);color:#9aa0b0;padding:26px 0;font-size:12.5px;text-align:center;margin-top:auto;}

/* ---------- Misc ---------- */
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.empty{text-align:center;color:var(--muted);padding:40px 0;font-size:14px;}
.hidden{display:none !important;}
.notice{background:var(--orange-light);color:#9a4a0d;border-radius:10px;padding:10px 14px;font-size:12.5px;margin-bottom:16px;}
.profile-cover{height:140px;border-radius:var(--radius) var(--radius) 0 0;background:linear-gradient(120deg,#2C3242,#454C5F);}
.profile-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden;margin-bottom:20px;}
.profile-head{display:flex;gap:16px;padding:0 22px 18px;margin-top:-32px;align-items:flex-end;}
.profile-head .init-logo{width:64px;height:64px;font-size:22px;border:4px solid #fff;}
.timeline-item{display:flex;gap:14px;margin-bottom:16px;}
.date-chip{width:56px;height:56px;border-radius:6px;background:var(--navy);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;flex:none;}
.date-chip span{font-size:10px;font-weight:600;}

/* ---------- Publicités (démo) ---------- */
.ad-banner{display:flex;align-items:center;gap:14px;background:#FAFAFB;border:1px dashed var(--border);border-radius:var(--radius);padding:14px 18px;margin:18px 0;}
.ad-banner .ad-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;flex:none;}
.ad-banner .ad-body{flex:1;}
.ad-banner .ad-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);background:var(--bg);border-radius:6px;padding:2px 6px;display:inline-block;margin-bottom:4px;}
.ad-banner h4{margin:0 0 2px;font-size:14px;}
.ad-banner p{margin:0;font-size:12.5px;color:var(--muted);}
@media(max-width:640px){.ad-banner{flex-wrap:wrap;}}

/* ---------- Vérification de nationalité / localisation (profil utilisateur) ---------- */
.nat-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;}
.nat-flag{width:42px;height:42px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none;}
.nat-card .meta{flex:1;}
.nat-card h4{margin:0 0 2px;font-size:14px;}
.nat-card p{margin:0;font-size:12px;color:var(--muted);}
.statut-pill{font-size:11px;font-weight:700;border-radius:20px;padding:4px 10px;}
.statut-verifiee{background:#E7F4EE;color:var(--green);}
.statut-attente{background:#FFF6DA;color:#B68900;}

/* ---------- Fil d'actualité global ---------- */
/* ===== POST SPONSORISÉ PARTENAIRE OFFICIEL ===== */
.po-feed-card{background:var(--card);border:1.5px solid #bfdbfe;border-radius:14px;padding:16px;margin-bottom:16px;box-shadow:0 2px 12px rgba(30,58,138,.07);cursor:pointer;transition:box-shadow .18s;}
.po-feed-card:hover{box-shadow:0 4px 20px rgba(30,58,138,.13);}
.po-feed-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;}
.po-feed-avatar{width:44px;height:44px;border-radius:50%;background:#1e3a8a;color:#fff;font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.po-feed-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.po-feed-meta{flex:1;min-width:0;}
.po-feed-nom{font-size:13px;font-weight:800;color:#0D1B2A;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.po-feed-badge{display:inline-flex;align-items:center;gap:3px;background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe;border-radius:99px;padding:1px 8px;font-size:10px;font-weight:800;}
.po-feed-dom{font-size:11px;color:#64748b;margin-top:2px;}
.po-feed-sponsored{font-size:10px;color:#64748b;white-space:nowrap;background:#f1f5f9;border-radius:99px;padding:2px 8px;font-weight:600;flex-shrink:0;}
.po-feed-desc{font-size:13px;color:#475569;line-height:1.6;margin:10px 0;}
.po-feed-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.po-feed-btn-primary{background:#1e3a8a;color:#fff;border-radius:8px;padding:7px 16px;font-size:12px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;}
.po-feed-btn-primary:hover{background:#1e40af;color:#fff;}
.po-feed-btn-secondary{background:var(--card);border:1.5px solid #e2e8f0;color:#475569;border-radius:8px;padding:7px 13px;font-size:12px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;}
.po-feed-btn-secondary:hover{border-color:#1e3a8a;color:#1e3a8a;}

.feed-post{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow);}
.feed-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.feed-head .meta{flex:1;}
.feed-head h4{margin:0;font-size:14px;}
.feed-head .sub-meta{font-size:12px;color:var(--muted);}
.feed-cat{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;background:var(--orange-light);color:var(--orange);border-radius:6px;padding:3px 8px;}
.formation-card{min-width:0;}
.fc-media-wrap{position:relative;width:260px;flex-shrink:0;min-height:180px;align-self:stretch;}
.fc-media{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#f1f5f9;}
.fc-media-video{background:#000;}
.fc-media-video video{width:100%;height:100%;object-fit:cover;}
.fc-play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.85);color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:16px;pointer-events:none;}
.fc-media-placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--orange,#ff6b00),#ff9f43);}
.fc-media-placeholder span{font-size:48px;font-weight:800;color:#fff;opacity:.85;}
.fc-logo{position:absolute;left:12px;bottom:-18px;width:52px;height:52px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2);background:#fff;}
@media (max-width:640px){
  .fc-media-wrap{width:100%;min-height:150px;}
}
.feed-body{font-size:13.5px;color:var(--text);margin-bottom:12px;}
.feed-actions{display:flex;gap:18px;border-top:1px solid var(--border);padding-top:10px;font-size:12.5px;color:var(--muted);}
.feed-actions span{display:flex;align-items:center;gap:5px;cursor:pointer;}
.feed-actions span:hover{color:var(--orange);}
.feed-filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.feed-filter-bar button{padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:var(--card);font-size:12.5px;font-weight:600;color:var(--muted);}
.feed-filter-bar button.active{background:var(--navy);color:#fff;border-color:var(--navy);}

/* ---------- Module de paiement (démo, aucune transaction réelle) ---------- */
.payment-option{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--navy);}
.payment-option input{width:15px;height:15px;}
.payment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;}
@media(max-width:700px){.payment-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- Niveaux de confidentialité ---------- */
.conf-card{border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border:1px solid var(--border);background:var(--card);}
.conf-card .conf-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:10px;}
.conf-public .conf-icon{background:#E7F4EE;}
.conf-reseau .conf-icon{background:#FFF6DA;}
.conf-confidentiel .conf-icon{background:#FDE2E2;}
.conf-card ul{margin:10px 0 0;padding-left:18px;font-size:13px;color:var(--text);}
.conf-card li{margin-bottom:4px;}
.conf-tag{font-size:10.5px;font-weight:700;border-radius:6px;padding:2px 7px;display:inline-flex;align-items:center;gap:4px;}
.conf-tag.conf-public{background:#E7F4EE;color:var(--green);}
.conf-tag.conf-reseau{background:#FFF6DA;color:#B68900;}
.conf-tag.conf-confidentiel{background:#FDE2E2;color:#C0392B;}
.footer-link{color:#fff !important;text-decoration:underline;}

/* ---------- Observatoire statistique de la diaspora ---------- */
.obs-stat-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px;}
@media(max-width:900px){.obs-stat-row{grid-template-columns:repeat(2,1fr);}}
.obs-stat-row .stat-card .num{font-size:20px;}

/* ---------- Authentification réelle ---------- */
.auth-area{display:flex;align-items:center;gap:8px;}
.auth-area .role-tag{font-size:10.5px;font-weight:700;background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:2px 8px;color:var(--muted);margin-left:6px;}
.auth-form-card{max-width:440px;margin:40px auto;}
.auth-form-card label{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;margin:14px 0 4px;}
.auth-form-card input,.auth-form-card select{width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--border);font-size:14px;font-family:inherit;}
.auth-error{background:#FFE2E2;color:#B3261E;border-radius:10px;padding:10px 14px;font-size:13px;margin-top:14px;display:none;}
.auth-success{background:#E7F4EE;color:var(--green);border-radius:10px;padding:10px 14px;font-size:13px;margin-top:14px;display:none;}

/* ──────────────── GEO AUTOCOMPLETE ──────────────── */
.geo-wrap{position:relative;display:flex;align-items:center;}
.geo-input{
  width:100%;padding:9px 32px 9px 11px;border:1px solid var(--border);border-radius:8px;
  font-size:13px;font-family:inherit;background:var(--card);color:var(--text);
  outline:none;transition:border-color .15s;
}
.geo-input:focus{border-color:var(--orange);}
.geo-clear{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;font-size:16px;color:var(--muted);
  padding:2px 4px;line-height:1;
}
.geo-clear:hover{color:var(--text);}
.geo-loader{
  position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:300;
  background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:8px 12px;font-size:12px;color:var(--muted);
}
.geo-dropdown{
  position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:300;
  background:var(--card);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.1);
  max-height:220px;overflow-y:auto;overflow-x:hidden;
  list-style:none;margin:0;padding:4px 0;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.geo-dropdown li{
  padding:8px 12px;font-size:13px;cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.geo-dropdown li:hover,.geo-dropdown li.geo-active{background:var(--orange-light);color:var(--orange);}
.geo-dropdown li strong{font-weight:800;color:var(--navy);}

/* ──────────────── RESPONSIVE MOBILE ──────────────── */

/* Bouton hamburger (caché sur desktop) */
.sidebar-toggle{
  display:none;
  background:none;border:none;padding:6px 8px;cursor:pointer;
  font-size:22px;color:var(--navy);flex:none;margin-right:4px;
}
/* Fond sombre derrière le tiroir */
.sidebar-backdrop{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:199;
}
.sidebar-backdrop.open{display:block;}

/* Groupe "Bandeau" de la sidebar : reprend les actions du bandeau du haut, masquées ou
   inaccessibles sur mobile faute de place (nav, langue, comptes test...). Inutile sur desktop
   où le bandeau du haut affiche déjà tout ça. */
.sb-bandeau-group{display:none;}

@media(max-width:768px){
  .sb-bandeau-group{display:block;}
  /* Topbar compact */
  .topbar-inner{padding:10px 14px;gap:10px;flex-wrap:nowrap;}
  .nav{display:none;}
  /* Logo + nom masqués sur mobile : libère la place dans le bandeau pour que le bouton
     Déconnexion reste visible sans avoir à défiler. */
  .logo{display:none;}
  .lang-select{display:none;}
  .sidebar-toggle{display:block;}
  .topbar-right{
    gap:8px;flex-wrap:nowrap;min-width:0;overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    /* Barre de defilement VISIBLE : cette zone deborde volontairement sur petit ecran,
       mais la masquer rendait inatteignable tout ce qui depasse (Deconnexion coupe).
       Une barre visible est le seul moyen d'aller chercher ces elements. */
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.6) rgba(255,255,255,.18);
    padding-bottom:3px;
    mask-image:linear-gradient(to right,transparent,#000 12px);
  }
  .topbar-right::-webkit-scrollbar{height:6px;}
  .topbar-right::-webkit-scrollbar-track{background:rgba(255,255,255,.18);border-radius:99px;}
  .topbar-right::-webkit-scrollbar-thumb{background:rgba(255,255,255,.6);border-radius:99px;}
  /* Apercu multi-appareils : le libelle est CONSERVE sur mobile.
     Essai precedent abandonne : reduit a la seule icone (41px), le bouton devenait
     meconnaissable — signale comme "disparu". Il garde donc son texte a toutes les
     largeurs ; ce qu'il repousse hors du bandeau reste atteignable grace a la barre de
     defilement rendue visible ci-dessus. Compact malgre tout pour limiter le debordement. */
  #apercu-appareils-btn{padding:7px 10px!important;font-size:11.5px!important;gap:4px!important;}
  #apercu-appareils-btn span{font-size:14px!important;}
  /* Sur mobile, la barre du haut ne garde que l'essentiel (connexion/notifs/profil/déconnexion) */
  #demo-test-btn, #premium-topbar-btn, .role-tag, #ia-slots{display:none!important;}
  .topbar-right .user-chip[href="messagerie.html"]{display:none;}
  .topbar-right>*{flex:none;}

  /* Sidebar : tiroir hors-écran */
  .with-sidebar{flex-direction:column;position:relative;}
  .sidebar{
    position:fixed;top:0;left:-260px;width:240px;height:100vh;
    z-index:200;padding-top:14px;
    transition:left .25s cubic-bezier(.4,0,.2,1);
    box-shadow:none;
  }
  .sidebar.open{left:0;box-shadow:6px 0 30px rgba(0,0,0,.3);}

  /* Fermer le tiroir avec un × */
  .sidebar-close{
    display:block;
    color:#aeb3c2;font-size:22px;background:none;border:none;cursor:pointer;
    position:absolute;top:12px;right:12px;padding:4px;line-height:1;
  }

  /* Zone de contenu pleine largeur */
  .content{padding:16px 14px;min-width:0;overflow-x:hidden;}

  /* Stat rows : 2 colonnes max */
  .stat-row{grid-template-columns:repeat(2,1fr);gap:10px;}

  /* Tables défilables horizontalement */
  .card table,.simple-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
  .card table td,.card table th,
  .simple-table td,.simple-table th{white-space:nowrap;}

  /* Grilles inline en 2 colonnes → 1 colonne */
  [style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns: 1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  [style*="grid-template-columns:1fr 1fr 1fr"],[style*="grid-template-columns: 1fr 1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  [style*="grid-template-columns:1fr 1fr 1fr 1fr"]{
    grid-template-columns:1fr 1fr !important;
  }

  /* Modaux : plein écran */
  [id$="-modal"] > div,[id^="modal-"] > div{
    max-width:100% !important;margin:0 !important;
    border-radius:0 !important;min-height:100vh;
  }

  /* Widget admin accréditations : défilable */
  #widget-accred-da{overflow-x:auto;flex-wrap:nowrap !important;
    display:flex !important;gap:10px;padding-bottom:6px;}
  #widget-accred-da .card{min-width:120px;flex:none;}

  /* Chat : empilé */
  .chat-wrap{flex-direction:column;height:auto;}
  .chat-list{width:100%;max-height:180px;border-right:none;border-bottom:1px solid var(--border);}

  /* Formulaires auth */
  .auth-form-card{margin:20px 14px;}

  /* Boutons plein-largeur dans les cards sur mobile */
  .card .btn-block{font-size:13px;}

  /* Widget stat-card admin */
  .flex-between{flex-wrap:wrap;gap:8px;}
}

@media(max-width:420px){
  .stat-row{grid-template-columns:1fr;}
  .content{padding:12px 10px;}
  .card{padding:14px 12px;}
  .topbar-inner{padding:8px 10px;}
  .logo{font-size:13px;}
  .btn{padding:9px 14px;font-size:13px;}
  .sidebar-toggle{font-size:20px;}
}

/* Bouton × dans la sidebar (caché sur desktop) */
.sidebar-close{display:none;}