/* ══════════════════════════════════════════════════════════════
   Unibox 360 — Nav + Footer partagés (site marketing)
   Utilisé par : customer-login.html, forgot-password.html
   Contient : nav fixe, mega-dropdown, sélecteur de langue, footer,
   menu mobile (hamburger) et leurs media queries responsive.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   SHARED SITE NAV + FOOTER — copied verbatim from agent-login.html
   (.logo/.logo-icon renamed to .nav-logo/.nav-logo-icon in the nav
   only, to avoid colliding with this page's own .logo class)
══════════════════════════════════════════════════════════════ */
    /* ══════════════════════════════════════
       NAV
    ══════════════════════════════════════ */
    /* Replaces Bootstrap's ".fixed-top" (this nav no longer loads Bootstrap at all) */
    .site-nav {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 9999 !important;
      min-height: 68px;
      background: #0a0f24 !important;
      border-bottom: 1px solid transparent;
      border-image: linear-gradient(90deg, rgba(59,91,255,0), rgba(59,91,255,0.45) 50%, rgba(124,58,255,0)) 1;
      box-shadow: 0 1px 0 rgba(255,255,255,0.04);
      transition: background .3s, border-color .3s;
      padding: 0 !important;
    }
    /* Replaces Bootstrap's ".container-xl" (max-width cap + auto-centering + gutters) for
       both places it's used on this page: the nav bar and the footer, below. */
    .site-nav .container-xl,
    footer .container-xl {
      width: 100%;
      max-width: 1320px;
      margin-left: auto;
      margin-right: auto;
    }
    .site-nav .container-xl {
      display: flex;
      align-items: stretch; /* was center — needed so the 69px bar height cascades all the
                                way down to the <li> the mega-dropdown anchors to (see
                                .navbar-collapse comment below). Children still self-center
                                their own content via their own align-items:center. */
      min-height: 68px;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }

    /* Nav/footer icons are inline SVG now (see markup below), not an icon font — no more
       external Material Icons file to load, and no more "icon shows up as the word 'menu'"
       failure mode if a font 404s. Sizing still goes through font-size + em on purpose, so
       every existing ".xyz .material-icons-round { font-size: ... }" override below still
       works exactly as before without touching a single one of those rules. */
    .material-icons-round {
      display: inline-block;
      width: 1em; height: 1em;
      flex-shrink: 0;
    }
    .nav-logo {
      display: flex; align-items: center; gap: 9px;
      font-family: 'Poppins', sans-serif;
      font-weight: 800; font-size: 1.2rem;
      color: var(--text) !important;
      text-decoration: none; letter-spacing: -.02em;
      flex-shrink: 0;
    }
    .nav-logo-icon {
      width: 34px; height: 34px; border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
    }
    .nav-logo-icon .material-icons-round { font-size: 18px; color: #fff; }

    /* Hamburger — plain <button> reset + margin-left:auto replaces bootstrap's
       ".navbar-toggler" base rule and ".ms-auto" utility (bootstrap no longer loaded) */
    .custom-toggler {
      -webkit-appearance: none; appearance: none;
      cursor: pointer;
      margin-left: auto;
      align-self: center; /* was stretching to the full 68px bar height via the
        container's align-items:stretch, since this button had no own height —
        that's what made it look oversized instead of a compact icon button */
      width: 38px; height: 38px;
      display: flex; align-items: center; justify-content: center;
      border: 1.5px solid var(--border);
      background: var(--surface2);
      border-radius: 10px;
      padding: 0;
      line-height: 1;
      transition: all .2s;
      flex-shrink: 0;
    }
    @media (min-width: 992px) {
      /* Was relying on Bootstrap's ".navbar-expand-lg .navbar-toggler{display:none}" to hide
         this on desktop. Production shows Bootstrap's CSS can fail to apply there (see also
         the .nav-link text-decoration fix above) — so hide it here too, unconditionally. */
      .site-nav .custom-toggler { display: none !important; }
    }
    .custom-toggler:focus { box-shadow: none; }
    .custom-toggler:hover  { border-color: var(--accent); background: rgba(26,86,219,.08); }
    .custom-toggler .material-icons-round { font-size: 22px; color: var(--text2); display: block; }

    /* Desktop: horizontal collapse content */
    .navbar-collapse {
      flex-grow: 1;
      display: flex !important;
      align-items: stretch; /* was center — "center" made .nav-links only as tall as its own
                                content (~35px) inside the 69px bar, so the mega-dropdown's
                                top:calc(100%+4px) (anchored to the <li>) landed ~13px INSIDE
                                the nav bar instead of below it. Stretching makes the <li> the
                                full bar height, so the dropdown starts right at the true bottom
                                edge. Link text itself is unaffected — .nav-link already centers
                                its own content with its own display:flex/align-items:center. */
      gap: 24px; /* minimum breathing room between .nav-links and .nav-right, even when
                    their auto-margins collapse to 0 on narrower desktop widths (~992-1150px) */
    }

    /* Nav links */
    .nav-links { display: flex; gap: 2px; list-style: none; margin: 0 auto; padding: 0; }
    .nav-links .nav-link {
      color: var(--text2) !important;
      font-size: .875rem; font-weight: 500;
      padding: .35rem .7rem;
      border-radius: 8px;
      transition: color .2s, background .2s;
      white-space: nowrap;
      display: flex; align-items: center; gap: 4px;
      text-decoration: none; /* was relying on Bootstrap's reboot for this — don't; see
        .custom-toggler fix below for why that assumption breaks in production */
    }
    .nav-links .nav-link:hover,
    .nav-links .nav-item.has-mega:hover .nav-link { color: var(--accent) !important; background: rgba(26,86,219,.07); }
    .nav-links .nav-link .nav-chevron { font-size: 16px !important; transition: transform .2s; }
    .nav-links .nav-item.has-mega:hover .nav-chevron { transform: rotate(180deg); }

    /* ── Mega dropdown ── */
    .mega-dropdown {
      position: absolute;
      top: calc(100% + 4px);
      left: 50%; transform: translateX(-50%) translateY(-6px);
      background: #0e1523;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 28px 32px;
      box-shadow: 0 24px 80px rgba(0,0,0,0.45);
      display: grid;
      gap: 0 48px;
      opacity: 0; visibility: hidden;
      transition: opacity .2s ease, transform .2s ease, visibility .2s;
      z-index: 500;
      min-width: 480px;
      pointer-events: none;
    }
    .mega-dropdown.cols-2 { grid-template-columns: 1fr 1fr; }
    .mega-dropdown.cols-1 { grid-template-columns: 1fr; min-width: 260px; }
    .nav-links .nav-item { display: flex; align-items: center; } /* li's now stretch to the
      full 69px bar height (see .container-xl/.navbar-collapse above) — this re-centers the
      <a class="nav-link"> inside each taller li so link text doesn't stick to the top */
    .nav-links .nav-item.has-mega { position: relative; }
    .nav-links .nav-item.has-mega:hover .mega-dropdown {
      opacity: 1; visibility: visible;
      transform: translateX(-50%) translateY(0);
      pointer-events: all;
    }
    .mega-col-title {
      font-size: .70rem; font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase; color: var(--accent);
      margin-bottom: 14px; padding-bottom: 8px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .mega-link {
      display: flex; align-items: center; justify-content: space-between;
      padding: 9px 10px; border-radius: 9px;
      color: rgba(255,255,255,0.75); font-size: .86rem; font-weight: 500;
      text-decoration: none; margin-bottom: 2px;
      transition: background .15s, color .15s;
      gap: 8px;
    }
    .mega-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
    .mega-link-arrow { font-size: 16px !important; opacity: 0.4; transition: opacity .15s, transform .15s; }
    .mega-link:hover .mega-link-arrow { opacity: 1; transform: translateX(2px); }
    .mega-col { display: flex; flex-direction: column; }
    /* bridge gap between nav item and dropdown */
    .nav-links .nav-item.has-mega::after {
      content: ''; position: absolute;
      top: 100%; left: 0; right: 0; height: 8px;
    }

    /* Right cluster */
    .nav-right {
      display: flex;
      align-items: center;
      gap: .55rem;
      flex-shrink: 0;
      margin-left: auto; /* restored — was present in agent-login.html, dropped during the
        copy. Currently the page only ends up right-aligned because Bootstrap's .mx-auto
        utility (with !important) centers .nav-links; this makes the layout correct even if
        that utility class is ever unavailable (e.g. a trimmed/purged bootstrap build). */
    }

    /* ─── MOBILE MENU ─── */
    @media (max-width: 991.98px) {

      /* Collapse becomes a full-width dropdown panel */
      .navbar-collapse {
        display: block !important;
        position: fixed;
        top: 68px; left: 0; right: 0;
        background: rgba(6,13,31,.98);
        border-bottom: none;
        box-shadow: none;
        padding: 1.5rem;
        z-index: 198;
        max-height: calc(100vh - 68px);
        overflow-y: auto;
        /* hide when collapsed */
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
        transition: opacity .22s ease, transform .22s ease;
      }
      .navbar-collapse.show {
        opacity: 1;
        transform: translateY(0);
        pointer-events: all;
      }

      /* Nav links stacked */
      .nav-links .nav-item { display: block; } /* undo the desktop-only flex/center rule so the
        has-mega li's link + accordion dropdown stack vertically instead of side-by-side */
      .nav-links {
        flex-direction: column;
        gap: 2px;
        padding-bottom: 1.2rem;
        border-bottom: 1px solid var(--border);
        margin-bottom: 1.2rem;
      }
      .nav-links .nav-link {
        font-size: .95rem !important;
        font-weight: 600 !important;
        padding: .72rem 1rem !important;
        color: var(--text) !important;
        border-radius: 10px;
        display: flex; align-items: center; gap: 10px;
      }
      .nav-links .nav-link::before {
        content: '';
        width: 5px; height: 5px;
        border-radius: 50%;
        background: var(--border);
        display: inline-block;
        flex-shrink: 0;
        transition: background .2s, transform .2s;
      }
      .nav-links .nav-link:hover { background: rgba(26,86,219,.07); }
      .nav-links .nav-link:hover::before { background: var(--accent); transform: scale(1.4); }

      /* Mega dropdown mobile — inline accordion */
      .mega-dropdown {
        position: static !important;
        transform: none !important;
        opacity: 1 !important; visibility: visible !important;
        pointer-events: all !important;
        background: rgba(26,86,219,0.05);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 14px 16px;
        margin: 4px 0 8px 12px;
        min-width: unset !important;
        display: none;
        box-shadow: none;
        grid-template-columns: 1fr !important;
        gap: 0;
      }
      .nav-links .nav-item.has-mega.open .mega-dropdown { display: grid; }
      .mega-link { color: var(--text2) !important; font-size: .85rem; padding: 8px 8px; }
      .mega-link:hover { color: var(--text) !important; }
      .mega-col-title { color: var(--accent); font-size: .68rem; margin-bottom: 8px; }
      .mega-col + .mega-col { margin-top: 14px; }

      /* Right cluster stacked */
      .nav-right {
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
        margin-left: 0;
        width: 100%;
      }

      /* Lang + theme on same row */
      .nav-right .lang-switcher { flex: 1; }
      .nav-right .lang-current { width: 100%; justify-content: space-between; }
      /* Insert a flex row wrapper via CSS trick: position the first two side by side */
      .nav-right > .lang-switcher,
      .nav-right > .theme-toggle {
        display: inline-flex;
      }
      /* Wrap lang + theme in a row */
      .nav-right { flex-wrap: wrap; }
      .nav-right > .lang-switcher { flex: 1 1 auto; }
      .nav-right > .theme-toggle  { flex: 0 0 auto; }
      /* Login + CTA go below, full width */
      .nav-right > .btn-login,
      .nav-right > .btn-primary {
        width: 100%;
        justify-content: center;
        padding: 11px 20px !important;
        font-size: .9rem !important;
        border-radius: 11px !important;
      }
      /* A subtle label above buttons */
      .nav-right::before {
        content: 'Accès rapide';
        display: block;
        width: 100%;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--muted);
        padding: .4rem .2rem 0;
        order: 3;
      }
      .nav-right > .lang-switcher { order: 1; }
      .nav-right > .theme-toggle  { order: 2; }
      .nav-right > .btn-login     { order: 4; }
      .nav-right > .btn-primary   { order: 5; }

      /* lang dropdown goes upward on mobile */
      .lang-dropdown { top: auto; bottom: calc(100% + 8px); }
    }

    .theme-toggle {
      width: 38px; height: 38px; border-radius: 9px;
      border: 1px solid var(--border); background: var(--surface2);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      color: var(--muted); transition: background .2s, border-color .2s, color .2s;
    }
    .theme-toggle:hover { color: var(--text); border-color: var(--accent); }
    .theme-toggle .material-icons-round { font-size: 18px; }

    .btn-primary {
      display: inline-flex; align-items: center; gap: 6px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff; border: none; padding: 9px 20px;
      border-radius: 9px; font-size: .855rem; font-weight: 600;
      cursor: pointer; text-decoration: none; font-family: inherit;
      transition: opacity .2s, transform .15s; white-space: nowrap;
      box-shadow: 0 4px 14px var(--glow);
    }
    .btn-primary:hover { opacity: .88; transform: translateY(-1px); }

    .btn-login {
      display: flex; align-items: center; gap: 6px;
      background: transparent; border: 1.5px solid var(--border);
      color: var(--text2); padding: 8px 18px; border-radius: 9px;
      font-size: .855rem; font-weight: 600; cursor: pointer;
      text-decoration: none; font-family: inherit; white-space: nowrap;
      transition: border-color .2s, color .2s, background .2s;
    }
    .btn-login .material-icons-round { font-size: 16px; }
    .btn-login:hover { border-color: var(--accent); color: var(--accent); background: rgba(61,106,255,.06); }

    /* LANGUAGE SWITCHER */
    .lang-switcher { position: relative; }
    .lang-current {
      display: flex; align-items: center; gap: 7px;
      background: var(--surface2); border: 1px solid var(--border);
      color: var(--text2); padding: 7px 12px; border-radius: 9px;
      font-size: .82rem; font-weight: 600; cursor: pointer;
      font-family: inherit; transition: border-color .2s, background .2s;
      white-space: nowrap;
    }
    .lang-current:hover { border-color: var(--accent); color: var(--text); }
    .lang-flag { width: 20px; height: 14px; border-radius: 3px; object-fit: cover; }
    .lang-chevron { font-size: 16px !important; transition: transform .2s; }
    .lang-switcher.open .lang-chevron { transform: rotate(180deg); }
    .lang-dropdown {
      position: absolute; top: calc(100% + 8px); right: 0;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 6px; min-width: 150px;
      box-shadow: 0 12px 40px var(--shadow);
      opacity: 0; visibility: hidden; transform: translateY(-6px);
      transition: opacity .2s, transform .2s, visibility .2s; z-index: 300;
    }
    .lang-switcher.open .lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
    .lang-option {
      display: flex; align-items: center; gap: 10px;
      width: 100%; padding: 9px 12px; border-radius: 8px;
      background: transparent; border: none;
      font-size: .85rem; font-weight: 500; color: var(--text2);
      cursor: pointer; font-family: inherit;
      transition: background .15s, color .15s; text-align: left;
    }
    .lang-option:hover { background: var(--surface2); color: var(--text); }
    .lang-option.active { background: rgba(26,86,219,.1); color: var(--accent); font-weight: 600; }

  /* ══ FOOTER PREMIUM ══ */
    footer{background:#060d1f;color:rgba(255,255,255,.55);padding:40px 0 0;border-top:1px solid rgba(255,255,255,.07);font-family:'Poppins',sans-serif;}

    /* Align footer content to the same inset as the nav's .container-xl
       (nav uses .site-nav .container-xl { padding-left/right: 1.5rem } —
       this mirrors it so the two never drift apart at any breakpoint) */
    footer .container-xl { padding-left: 1.5rem; padding-right: 1.5rem; }

    .footer-top{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1fr;gap:40px;padding:12px 0 48px;border-bottom:1px solid rgba(255,255,255,.08);}
    .footer-logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-bottom:14px;}
    .footer-logo .logo-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;}
    .footer-logo .logo-icon .material-icons-round{font-size:18px;color:#fff;}
    .footer-logo .logo-text{font-size:1.05rem;font-weight:800;color:#fff;letter-spacing:-.02em;}
    .footer-tagline{font-size:.76rem;line-height:1.7;color:rgba(255,255,255,.40);max-width:230px;margin-bottom:20px;}
    .footer-socials{display:flex;gap:8px;}
    .footer-social {width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;text-decoration:none;color:rgba(255,255,255,.55);transition:background .15s,border-color .15s,color .15s;}
    .footer-social:hover{background:rgba(26,86,219,.35);border-color:var(--accent);color:#fff;}
    .footer-social svg{width:15px;height:15px;}
    .footer-col-title{font-size:.64rem;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:#fff;margin-bottom:14px;}
    .footer-links{display:flex;flex-direction:column;gap:8px;}
    .footer-link{font-size:.78rem;color:rgba(255,255,255,.45);text-decoration:none;transition:color .15s;line-height:1.4;}
    .footer-link:hover{color:#fff;}
    .footer-sub-label{font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.22);margin:12px 0 6px;}
    .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-top:1px solid rgba(255,255,255,.07);gap:16px;flex-wrap:wrap;}
    .footer-copy{font-size:.72rem;color:rgba(255,255,255,.28);}
    .footer-legal{display:flex;gap:18px;flex-wrap:wrap;}
    .footer-legal a{font-size:.72rem;color:rgba(255,255,255,.28);text-decoration:none;transition:color .15s;}
    .footer-legal a:hover{color:rgba(255,255,255,.65);}
    @media(max-width:991px){.footer-top{grid-template-columns:1fr 1fr;gap:28px;}.footer-brand{grid-column:1/-1;}}
    @media(max-width:575px){
      .footer-top{grid-template-columns:1fr;}
      
      .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-top:1px solid rgba(255,255,255,.07);gap:16px;flex-wrap:wrap;}
      .footer-col-title{cursor:pointer;display:flex;align-items:center;justify-content:space-between;}
      .footer-col-title::after{content:'+';font-size:1rem;color:rgba(255,255,255,.28);}
      .footer-col.open .footer-col-title::after{content:'-';}
      .footer-links{display:none;}
      .footer-col.open .footer-links{display:flex;}
    }