/* =========================================================
   CEN V142 — MOBILE STABLE + CONTRASTE + NAVIGATION FIABLE
   Couche finale prioritaire.
   ========================================================= */
:root{
  --cen142-blue:#0b66b2;
  --cen142-blue-dark:#063b68;
  --cen142-blue-deep:#042d50;
  --cen142-gold:#f4c62d;
  --cen142-ink:#102f49;
  --cen142-muted:#536b7f;
  --cen142-line:#c9d9e6;
}

/* 1. Header public mobile : logo, identité et drapeau vraiment alignés. */
@media(max-width:980px){
  body.public-layout .public-mobile-bar{
    position:fixed!important;top:0!important;left:0!important;right:0!important;
    height:62px!important;min-height:62px!important;max-height:62px!important;
    padding:7px 14px!important;grid-template-columns:52px 1fr auto!important;
    background:#0b4f8a!important;border-bottom:3px solid var(--cen142-gold)!important;
    z-index:5100!important;transform:none!important;transition:none!important;
  }
  body.public-layout .public-menu-toggle{
    width:46px!important;height:46px!important;border-radius:13px!important;background:#fff!important;
    color:var(--cen142-blue-dark)!important;border:1px solid #d7e3ed!important;font-size:24px!important;pointer-events:auto!important;
  }
  body.public-layout .public-mobile-brand{color:#fff!important;font-size:19px!important;line-height:1!important;font-weight:950!important;pointer-events:auto!important}
  body.public-layout .public-mobile-login{
    min-height:46px!important;padding:0 17px!important;background:var(--cen142-gold)!important;color:#17384d!important;
    border-radius:13px!important;font-size:15px!important;font-weight:950!important;pointer-events:auto!important;
  }
  body.public-layout .site-header.public-header.cen-institutional-header{
    position:fixed!important;top:62px!important;left:0!important;right:0!important;
    height:76px!important;min-height:76px!important;max-height:76px!important;
    grid-template-columns:56px minmax(0,1fr) 56px!important;gap:10px!important;padding:7px 16px!important;
    background:linear-gradient(110deg,#0b66b2,#078bc4)!important;border-bottom:4px solid var(--cen142-gold)!important;
    z-index:5000!important;transform:none!important;transition:none!important;
  }
  body.public-layout .cen-institutional-header .logo-box{
    width:52px!important;height:52px!important;justify-self:start!important;border-radius:13px!important;padding:4px!important;background:#fff!important;
  }
  body.public-layout .cen-institutional-header .logo-box img{width:100%!important;height:100%!important;object-fit:contain!important}
  body.public-layout .cen-institutional-header .brand-block{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-width:0!important;text-align:center!important}
  body.public-layout .cen-institutional-header .institution-country{display:none!important}
  body.public-layout .cen-institutional-header .brand-block strong{display:block!important;color:#fff!important;font-size:14px!important;line-height:1.15!important;white-space:normal!important;text-align:center!important}
  body.public-layout .cen-institutional-header .brand-block em{display:block!important;color:#eaf7ff!important;font-size:8px!important;line-height:1.2!important;margin-top:3px!important;letter-spacing:.04em!important}
  body.public-layout .cen-institutional-header .flag-real{
    width:54px!important;height:42px!important;justify-self:end!important;align-self:center!important;border:2px solid #fff!important;border-radius:10px!important;padding:2px!important;background:#fff!important;overflow:hidden!important;
  }
  body.public-layout .cen-institutional-header .flag-real img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}
  body.public-layout .main-content.public-content{padding-top:154px!important}

  /* 2. Drawer : opaque, au-dessus du voile, chaque lien est vraiment cliquable. */
  body.public-layout .top-nav.public-nav.cen-public-nav{
    position:fixed!important;top:0!important;left:0!important;bottom:0!important;
    width:min(360px,86vw)!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
    z-index:5300!important;padding:82px 16px 28px!important;background:#fff!important;color:var(--cen142-ink)!important;
    overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;
    transform:translateX(-105%)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    box-shadow:16px 0 44px rgba(3,30,53,.22)!important;border-right:1px solid #d7e4ee!important;
  }
  body.public-layout .top-nav.public-nav.cen-public-nav.is-open{
    transform:translateX(0)!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;
  }
  body.public-layout .cen-public-nav a,
  body.public-layout .cen-public-nav .public-language-wrap,
  body.public-layout .cen-public-nav select{pointer-events:auto!important;position:relative!important;z-index:1!important}
  body.public-layout .cen-public-nav a{
    display:flex!important;align-items:center!important;min-height:54px!important;padding:13px 16px!important;margin:0 0 7px!important;
    background:#f7fbfe!important;border:1px solid #dce8f1!important;border-radius:14px!important;
    color:#173b55!important;font-size:16px!important;font-weight:850!important;text-decoration:none!important;
  }
  body.public-layout .cen-public-nav a:active{background:#e8f4fc!important}
  body.public-layout .cen-public-nav .public-login-link{background:linear-gradient(135deg,#f4c62d,#ffd95c)!important;color:#17384d!important;justify-content:center!important}
  body.public-layout .cen-public-nav .public-language-wrap{display:block!important;margin-top:12px!important;color:#173b55!important;font-weight:850!important}
  body.public-layout .cen-public-nav .public-language{width:100%!important;height:50px!important;background:#fff!important;color:#173b55!important;border:1px solid #c9d9e6!important;border-radius:14px!important;padding:0 14px!important;font-size:16px!important}
  body.public-layout .public-menu-backdrop{z-index:5200!important;background:rgba(4,28,49,.52)!important;pointer-events:none!important}
  body.public-layout .public-menu-backdrop.is-open{display:block!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}

  /* Éviter que les contrôles flottants couvrent des actions administratives. */
  body.admin-layout .floating-help,body.admin-layout .install-pwa-button{display:none!important}
}

/* 3. Profil membre : aucun texte sombre/pâle sur le hero bleu. */
body.admin-layout .member-profile-hero,
body.admin-layout .member-profile-hero *{text-shadow:none!important}
body.admin-layout .member-profile-hero h1,
body.admin-layout .member-profile-hero p,
body.admin-layout .member-profile-hero .eyebrow,
body.admin-layout .member-profile-hero .member-profile-rank span,
body.admin-layout .member-profile-hero .member-profile-rank small{
  color:#fff!important;opacity:1!important;
}
body.admin-layout .member-profile-hero .eyebrow{color:#cfeeff!important;font-weight:950!important;letter-spacing:.1em!important}
body.admin-layout .member-profile-hero h1{font-weight:950!important;line-height:1.04!important}
body.admin-layout .member-profile-hero p{color:#eaf7ff!important;font-weight:700!important}
body.admin-layout .member-profile-rank{background:rgba(1,43,72,.28)!important;border-color:rgba(255,255,255,.35)!important}
body.admin-layout .member-profile-rank strong{color:#ffd43b!important;text-shadow:0 2px 12px rgba(0,0,0,.14)!important}
body.admin-layout .profile-badges .badge{color:#fff!important;background:rgba(255,255,255,.18)!important;border-color:rgba(255,255,255,.30)!important}
body.admin-layout .profile-badges .badge.active{background:#fff!important;color:#0a4c79!important}
body.admin-layout .profile-badges .badge.executive{background:#ffd43b!important;color:#16384e!important}

/* 4. Menu admin : textes et titres toujours nets sur fond bleu. */
body.admin-layout .side-dashboard,
body.admin-layout .side-dashboard :is(a,span,strong,small,summary,b){color:#fff!important;opacity:1!important}
body.admin-layout .side-menu>a,
body.admin-layout .side-menu-group>summary{font-weight:850!important;text-shadow:0 1px 0 rgba(0,0,0,.08)!important}
body.admin-layout .side-menu>a.active,
body.admin-layout .side-menu-group[open]>summary{background:rgba(255,255,255,.16)!important;color:#fff!important}
body.admin-layout .side-menu-search-empty{color:#e8f4fc!important}

/* 5. Réseaux sociaux : couleurs explicites, même si un ancien footer force le blanc. */
body.public-layout .cen-footer-v137 .cen-social-icons a,
body.page-login .cen-footer-v137 .cen-social-icons a{
  width:46px!important;height:46px!important;background:#fff!important;border:2px solid rgba(255,255,255,.45)!important;
  box-shadow:0 7px 18px rgba(0,0,0,.12)!important;opacity:1!important;visibility:visible!important;
}
body.public-layout .cen-footer-v137 .cen-social-icons a svg,
body.page-login .cen-footer-v137 .cen-social-icons a svg{width:25px!important;height:25px!important;display:block!important}
body.public-layout .cen-footer-v137 .cen-social-icons .social-whatsapp,
body.page-login .cen-footer-v137 .cen-social-icons .social-whatsapp{color:#16a966!important}
body.public-layout .cen-footer-v137 .cen-social-icons .social-whatsapp svg,
body.page-login .cen-footer-v137 .cen-social-icons .social-whatsapp svg{fill:#16a966!important}
body.public-layout .cen-footer-v137 .cen-social-icons .social-facebook,
body.page-login .cen-footer-v137 .cen-social-icons .social-facebook{color:#1877f2!important}
body.public-layout .cen-footer-v137 .cen-social-icons .social-facebook svg,
body.page-login .cen-footer-v137 .cen-social-icons .social-facebook svg{fill:#1877f2!important}
body.public-layout .cen-footer-v137 .cen-social-icons .social-youtube,
body.page-login .cen-footer-v137 .cen-social-icons .social-youtube{color:#e62117!important}
body.public-layout .cen-footer-v137 .cen-social-icons .social-youtube svg,
body.page-login .cen-footer-v137 .cen-social-icons .social-youtube svg{fill:#e62117!important}
body.public-layout .cen-footer-v137 .cen-social-icons .social-instagram,
body.page-login .cen-footer-v137 .cen-social-icons .social-instagram{color:#c13584!important}
body.public-layout .cen-footer-v137 .cen-social-icons .social-x,
body.page-login .cen-footer-v137 .cen-social-icons .social-x{color:#111!important}

/* 6. Contraste global des zones bleues : les couches de lisibilité génériques ne doivent pas assombrir. */
body.admin-layout :is(.workspace-topbar,.member-profile-hero,.dashboard-welcome.is-dark,.production-welcome.is-dark) :is(h1,h2,h3,p,span,small,strong,label){opacity:1!important}
body.admin-layout .workspace-topbar :is(strong,span,small){color:#fff!important}

/* 7. Mobile profil membre : proportions et lecture. */
@media(max-width:680px){
  body.admin-layout .member-profile-breadcrumb{gap:6px!important;font-size:15px!important;margin-bottom:12px!important}
  body.admin-layout .member-profile-hero{padding:20px 16px!important;border-radius:22px!important;gap:18px!important}
  body.admin-layout .member-profile-identity{display:grid!important;grid-template-columns:118px minmax(0,1fr)!important;gap:16px!important;align-items:start!important}
  body.admin-layout .member-profile-photo{width:118px!important;height:142px!important;border-radius:20px!important}
  body.admin-layout .member-profile-hero h1{font-size:clamp(28px,8.5vw,42px)!important;overflow-wrap:anywhere!important}
  body.admin-layout .member-profile-rank{width:100%!important;padding:18px!important}
  body.admin-layout .member-profile-rank strong{font-size:3.5rem!important}
  body.admin-layout .member-profile-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;padding:10px!important}
  body.admin-layout .member-profile-actions .btn{width:100%!important;margin:0!important;min-width:0!important}
}
@media(max-width:430px){
  body.admin-layout .member-profile-identity{grid-template-columns:96px minmax(0,1fr)!important;gap:12px!important}
  body.admin-layout .member-profile-photo{width:96px!important;height:118px!important}
  body.admin-layout .member-profile-hero h1{font-size:29px!important}
  body.admin-layout .member-profile-actions{grid-template-columns:1fr!important}
}