/* ═══════════════════════════════════════════════════════════
   PENICOM GROUP — CSS Global (nav + footer + utils)
   Chaque page a son propre style inline unique
═══════════════════════════════════════════════════════════ */

/* Google Fonts chargées dynamiquement par chaque page */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font,'Plus Jakarta Sans',sans-serif);
       background:var(--page-bg,#fff); color:var(--page-tx,#111);
       line-height:1.65; overflow-x:hidden; }
body { -webkit-user-select:none; -moz-user-select:none; user-select:none; }
img  { -webkit-user-drag:none; pointer-events:none; }
a    { color:inherit; }

.wrap { max-width:1220px; margin:0 auto; padding:0 28px; }

/* ── TOPBAR ── */
.topbar { background:#071a3e; padding:8px 0; font-size:.79rem; }
.topbar .wrap { display:flex; justify-content:space-between;
                align-items:center; flex-wrap:wrap; gap:6px; }
.topbar a { color:#f5c400; text-decoration:none; font-weight:600; transition:.2s; }
.topbar a:hover { opacity:.8; }
.topbar span { color:rgba(255,255,255,.4); margin:0 6px; }

/* ── NAV ── */
.navbar { background:var(--nb, #1a4ba8); position:sticky; top:0; z-index:1000;
          box-shadow:0 3px 20px rgba(0,0,0,.3); transition:background .3s; }
.nav-w  { max-width:1220px; margin:0 auto; padding:0 28px;
          height:68px; display:flex; align-items:center; justify-content:space-between; }
.logo   { display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo img { height:50px; width:auto; }
.logo-txt { border-left:3px solid #f5c400; padding-left:12px; }
.logo-txt strong { display:block; color:#fff; font-size:.92rem; font-weight:800;
                   letter-spacing:.5px; line-height:1.2; }
.logo-txt span   { display:block; color:rgba(255,255,255,.55); font-size:.68rem;
                   font-weight:500; letter-spacing:.5px; }

.nm { display:flex; list-style:none; align-items:center; gap:2px; }
.nm > li { position:relative; }
.nm > li > a { display:block; padding:8px 12px; color:rgba(255,255,255,.82);
               text-decoration:none; font-size:.83rem; font-weight:600;
               border-radius:6px; transition:.2s; white-space:nowrap; }
.nm > li > a:hover { color:#f5c400; background:rgba(255,255,255,.08); }
.nm .ncta { background:#f5c400 !important; color:#071a3e !important;
            font-weight:800 !important; border-radius:6px !important;
            box-shadow:0 3px 14px rgba(245,196,0,.35) !important; }
.nm .ncta:hover { background:#ffe033 !important; transform:translateY(-1px); }

.drop { position:absolute; top:calc(100% + 8px); left:0;
        background:#071a3e; border-top:3px solid #f5c400;
        border-radius:0 0 12px 12px;
        box-shadow:0 20px 50px rgba(0,0,0,.6);
        min-width:226px; opacity:0; visibility:hidden;
        transform:translateY(6px); transition:.22s; z-index:200; padding:8px; }
.has-drop:hover .drop { opacity:1; visibility:visible; transform:translateY(0); }
.drop a { display:flex; align-items:center; gap:10px; padding:10px 14px;
          color:rgba(255,255,255,.72); text-decoration:none; font-size:.84rem;
          font-weight:500; border-radius:8px; transition:.17s; }
.drop a:hover { background:rgba(245,196,0,.1); color:#f5c400; }

.hbg { display:none; flex-direction:column; gap:5px; background:none;
       border:none; cursor:pointer; padding:6px; }
.hbg span { display:block; width:24px; height:2px; background:#f5c400;
            border-radius:2px; transition:.3s; }
.hbg.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hbg.open span:nth-child(2) { opacity:0; }
.hbg.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.mob-menu { display:none; position:fixed; inset:68px 0 0 0; background:#071a3e;
            overflow-y:auto; z-index:999; padding:16px 24px 60px;
            border-top:3px solid #f5c400; }
.mob-menu.open { display:block; }
.mob-menu .mcat { font-size:.7rem; font-weight:700; text-transform:uppercase;
                  letter-spacing:2px; color:#f5c400; padding:18px 0 8px;
                  border-top:1px solid rgba(255,255,255,.07); margin-top:10px; }
.mob-menu a { display:block; padding:12px 0; color:rgba(255,255,255,.72);
              text-decoration:none; font-size:.91rem; font-weight:500;
              border-bottom:1px solid rgba(255,255,255,.06); }
.mob-menu a:hover { color:#f5c400; }

/* Barre animée */
.topbar-line { height:3px; background:linear-gradient(90deg,#f5c400,#ffe033,#f5c400);
               background-size:200%; animation:tla 3s linear infinite; }
@keyframes tla { 0%{background-position:0%}100%{background-position:200%} }

/* ── FOOTER ── */
footer { background:#071a3e; }
.ft    { max-width:1220px; margin:0 auto; padding:60px 28px 40px;
         display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
.fb img { height:54px; margin-bottom:16px; }
.fb p   { color:rgba(255,255,255,.45); font-size:.84rem; line-height:1.9; max-width:260px; }
.fb-c   { margin-top:14px; display:flex; flex-direction:column; gap:7px; }
.fb-c a { color:#f5c400; text-decoration:none; font-size:.82rem; font-weight:600; }
.fc h5  { color:#f5c400; font-size:.8rem; font-weight:700; text-transform:uppercase;
          letter-spacing:1.5px; margin-bottom:16px; padding-bottom:10px;
          border-bottom:1px solid rgba(245,196,0,.2); }
.fc a, .fc span { display:block; color:rgba(255,255,255,.42); text-decoration:none;
                  font-size:.83rem; padding:4px 0; font-weight:500; transition:.2s; }
.fc a:hover { color:#f5c400; padding-left:6px; }
.fbot { border-top:1px solid rgba(255,255,255,.07); padding:18px 28px;
        max-width:1220px; margin:0 auto; display:flex; justify-content:space-between;
        align-items:center; font-size:.77rem; color:rgba(255,255,255,.25);
        flex-wrap:wrap; gap:8px; }
.fbot strong { color:#f5c400; }

/* WhatsApp float */
.wa-btn { position:fixed; bottom:28px; right:28px; width:58px; height:58px;
          background:#25d366; border-radius:50%; display:flex; align-items:center;
          justify-content:center; color:#fff; font-size:1.75rem; z-index:999;
          text-decoration:none; box-shadow:0 6px 24px rgba(37,211,102,.5);
          animation:wap 2.5s infinite; }
@keyframes wap {
  0%,100% { box-shadow:0 6px 24px rgba(37,211,102,.5); }
  50% { box-shadow:0 6px 32px rgba(37,211,102,.8), 0 0 0 10px rgba(37,211,102,.1); }
}

/* ── BREADCRUMB ── */
.bc { padding:11px 0; font-size:.79rem; color:rgba(255,255,255,.5);
      border-bottom:1px solid rgba(255,255,255,.1); }
.bc a { color:#f5c400; text-decoration:none; font-weight:600; }
.bc.light { color:var(--mu,#5a6e8a); border-color:var(--br,#dde4f5); }
.bc.light a { color:var(--b2,#1a4ba8); }

/* ── ANIMATIONS ── */
.fi { opacity:0; transform:translateY(28px); transition:opacity .75s,transform .75s; }
.fi.v { opacity:1; transform:none; }
.fl { opacity:0; transform:translateX(-28px); transition:opacity .75s,transform .75s; }
.fl.v { opacity:1; transform:none; }
.fr { opacity:0; transform:translateX(28px); transition:opacity .75s,transform .75s; }
.fr.v { opacity:1; transform:none; }

/* ── RESPONSIVE ── */
@media(max-width:960px) {
  .nm { display:none; } .hbg { display:flex; }
  .ft { grid-template-columns:1fr 1fr; }
}
@media(max-width:620px) {
  .ft { grid-template-columns:1fr; }
  .fbot { flex-direction:column; text-align:center; }
}