/* ===========================================================
   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:not(.active),.topbar a:not(.active){color:rgba(255,255,255,.85)!important;}
.topbar .nav a:hover:not(.active){color:#fff!important;}
.topbar .nav a.active{color:var(--navy)!important;}
/* :not([type=checkbox]):not([type=radio]) — sans cette exclusion, la règle ci-dessous
   (pensée pour les champs texte) s'appliquait aussi aux cases à cocher/radios natives :
   fond quasi blanc + bordure très pâle (var(--border), ex. #DCE4EF) sans reset d'apparence,
   ce qui les rend quasiment invisibles (cercles pâles) plutôt que des cases nettes. Trouvé
   en vérifiant l'écran de création d'un administrateur junior (dashboard-administrateur.html),
   mais la règle d'origine touchait TOUTES les cases à cocher du site. */
input:not([type=checkbox]):not([type=radio]),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{
  /* space-between : logo à gauche, compte à droite, rail de nav entre les deux — l'espace
     libéré par l'élargissement de max-width (ci-dessous) va dans ces deux entrefers
     plutôt que d'étirer le rail lui-même (qui garde flex:0, épouse son contenu). */
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  /* Valeur de base (<1024px, où le plafond ne joue de toute façon aucun rôle : la largeur
     réelle de l'écran reste toujours la vraie limite) + comble l'écart 1024-1279px, seule
     tranche sans palier dédié dans assets/responsive.v2.css. Les écrans plus larges sont
     élargis palier par palier là-bas — voir le correctif apporté au palier 1536-2559px,
     qui laissait jusqu'ici un vide visible de part et d'autre du bandeau bleu. */
  max-width:1400px;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;}
/* Rail en onglets segmentés — repris/surchargé en !important par design-upgrade.v2.css sur
   les pages qui le chargent (l'ordre gagnant réel), ces règles servent de base cohérente
   pour les quelques pages qui ne le chargeraient pas. flex-wrap:nowrap + overflow-x:auto :
   le rail défile dans son propre espace plutôt que de casser sur une 2e ligne, quelle que
   soit la largeur (desktop et tablette) — jamais de dépassement, jamais de lien supprimé. */
.nav{
  display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.08);border-radius:12px;
  /* flex:0 (jamais grow) : le rail épouse son contenu plutôt que de s'étirer dans tout
     l'espace flex disponible — sur .topbar-inner élargi, sinon la pastille arrondie
     laissait un grand vide navy à droite des liens. Espace libéré redistribué par
     .topbar-inner (justify-content:space-between, ci-dessous). */
  padding:4px;flex:0 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.nav::-webkit-scrollbar{display:none;}
.nav a{
  font-size:14px;font-weight:600;color:rgba(255,255,255,.8);padding:8px 15px;border-radius:9px;
  border-bottom:none;white-space:nowrap;flex:none;
}
.nav a.active{background:#fff;color:var(--navy);font-weight:700;}
.nav a:hover:not(.active){color:#fff;background:rgba(255,255,255,.08);}
.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;}

/* ── Topbar : boutons icône + pastille de compte (refonte "onglets segmentés") ──
   Même langage visuel que le rail de nav : fond blanc translucide, bordure discrète,
   coins arrondis. Messagerie/notifications restent des boutons icône seuls ; l'identité
   (avatar + nom + rôle) fusionne en une seule pastille cliquable vers le tableau de bord. */
.topbar-icon-btn{
  width:34px;height:34px;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:#fff;text-decoration:none;position:relative;
}
.topbar-icon-btn:hover{background:rgba(255,255,255,.16);}
.acc-chip{
  display:flex;align-items:center;gap:9px;flex:none;text-decoration:none;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:99px;padding:4px 6px 4px 4px;
}
.acc-chip:hover{background:rgba(255,255,255,.14);}
.acc-chip-text{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.15;}
.acc-chip-name{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;}
.acc-chip .role-tag{margin:0!important;}

/* ---------- 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) ---------- */
/* Repliable sur tous les formats (ordinateur, tablette, téléphone) : masquée par défaut
   (tiroir hors-écran via transform), rappelée par le petit bouton rond fixe à gauche.
   Se replie automatiquement à la sélection d'un module (voir assets/app.js). */
.with-sidebar{display:flex;flex:1;}
.sidebar{
  width:280px;background:var(--navy);color:#cdd1dc;padding:22px 16px;flex:none;
  position:fixed;top:58px;left:0;height:calc(100vh - 58px);overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent;
  z-index:200;transform:translateX(-100%);box-shadow:none;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.sidebar.open{transform:translateX(0);box-shadow:6px 0 30px rgba(0,0,0,.3) !important;}
.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 ──────────────── */

/* Sur PC (par défaut) : un simple bouton icône DANS le bandeau du haut, au même endroit que
   dans le HTML (.topbar-right) et dans le même langage visuel que les autres icônes du bandeau
   (messagerie, notifications — voir .topbar-icon-btn). Le style "rond flottant" ci-dessous,
   pensé pour le mobile où la nav horizontale disparaît, ne s'applique plus qu'en dessous de
   768px (règle déplacée dans la media query plus bas) : avant ce correctif, il s'appliquait
   à TOUS les formats et le bouton flottait par-dessus le contenu même sur grand écran. */
.sidebar-toggle{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;flex:none;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:#fff;cursor:pointer;font-size:18px;
  transition:background .15s;
}
.sidebar-toggle:hover{background:rgba(255,255,255,.16);}
/* 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;}
/* Fermer le tiroir avec un × — toujours visible, en haut de la sidebar */
.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;
}

/* 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){
  /* Sur mobile uniquement : le bouton redevient le rond flottant orange avec son libellé
     "Menu" — la nav horizontale disparaît (.nav{display:none} plus bas), ce bouton est donc le
     seul accès à la sidebar et doit rester repérable en permanence, quel que soit le défilement. */
  .sidebar-toggle{
    position:fixed;left:14px;top:74px;z-index:210;
    width:50px;height:50px;border-radius:50%;
    background:var(--orange);border:3px solid #fff;color:#fff;
    font-size:22px;box-shadow:0 4px 16px rgba(0,0,0,.35),0 0 0 2px rgba(242,100,34,.25);
    transition:background .15s,transform .15s;
  }
  .sidebar-toggle:hover{background:#d9551a;transform:scale(1.06);}
  .sidebar-toggle::after{
    content:"Menu";
    position:absolute;top:100%;left:50%;transform:translateX(-50%);
    margin-top:5px;font-size:10.5px;font-weight:800;color:var(--navy);
    background:#fff;padding:1px 6px;border-radius:6px;white-space:nowrap;
    box-shadow:0 1px 4px rgba(0,0,0,.15);
  }
  /* Repli du bouton menu (assets/app.js:initSidebarMobile) sur les pages sans tiroir #sidebar
     dédié : affiche la nav existante du topbar comme un menu déroulant plutôt que de la
     laisser purement invisible (.nav{display:none} ci-dessous). */
  .nav.nav-mobile-open{
    display:flex!important;flex-direction:column;gap:4px;
    position:fixed;top:60px;left:0;right:0;z-index:209;
    background:var(--card,#fff);border-bottom:1px solid var(--border,#e5e7eb);
    padding:12px 16px;box-shadow:0 10px 26px -12px rgba(0,0,0,.25);
    max-height:calc(100vh - 60px);overflow-y:auto;
  }
  .nav.nav-mobile-open a{padding:10px 4px;border-bottom:1px solid var(--border,#e5e7eb);}
  .nav.nav-mobile-open a:last-child{border-bottom:none;}
  .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;}
  .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 (largeur réduite sur mobile — position/transition dans
     la règle de base, identiques à tous les formats) */
  .with-sidebar{flex-direction:column;position:relative;}
  .sidebar{width:240px;}

  /* 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;}
}