/* ===================================================================
   Barre de navigation de la landing page — extraite de login.php.
   Ce fichier existe pour que contact_sales.php ait EXACTEMENT le même
   entête que la landing, SANS modifier login.php (dont le CSS reste
   inline). Si tu retouches la nav de la landing, reporte ici.
   =================================================================== */

/* -------------------------------------------------------------------
   Règles GLOBALES de la landing, indispensables à l'entête.
   Sans « a { color: inherit; text-decoration: none } », tous les liens
   de la navigation s'affichent en bleu souligné par défaut : c'était
   la différence visuelle avec la landing.
   ------------------------------------------------------------------- */
* { box-sizing: border-box; }

a { color: inherit; text-decoration: none; }


  :root {
    --orange: #FF5A1F;
    --orange-soft: #FFEDE3;
    --orange-deep: #D9430E;
    --ink: #0B0B0C;
    --ink-2: #1A1A1C;
    --paper: #FAFAF7;
    --paper-2: #F2F1EC;
    --line: #E4E3DD;
    --grey-1: #6B6B6B;
    --grey-2: #9A9A95;
    --grey-3: #C7C6C0;
    --green: #2E8C5A;
  }

  html, body { margin: 0; padding: 0; }

  body {
    font-family: 'Inter', sans-serif;
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
  }


  /* ============== NAV ============== */
  .nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(250, 250, 247, 0.85);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--line);
  }

  .nav-inner {
    max-width: 1280px; margin: 0 auto;
    padding: 14px 32px;
    display: flex; align-items: center; gap: 32px;
  }

  .logo {
    display: flex; align-items: center; gap: 10px;
    font-weight: 800; font-size: 22px; letter-spacing: -0.025em;
  }

  .logo .o-accent, .dash-side .logo-mini .o-accent,
  .logo .g-accent, .dash-side .logo-mini .g-accent { color: var(--orange); }

  .logo .logo-text, .dash-side .logo-mini .logo-text { display: inline; }

  .logo .g-accent, .logo .o-accent { display: inline; }


  /* Icon mark hidden — logo is now text-only, slightly larger */
  .logo-mark, .dash-side .logo-mini .logo-mark { display: none !important; }

  .nav-links {
    display: flex; gap: 24px; font-size: 14px; font-weight: 500;
    color: var(--grey-1);
    flex-wrap: nowrap;
  }

  .nav-links a {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .nav-links a:hover { color: var(--ink); }

  .nav-spacer { flex: 1; }

  .nav-burger {
    display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
    background: var(--cream); border: 1px solid var(--ink-line); border-radius: 10px;
    cursor: pointer; transition: background 0.2s;
  }

  .nav-burger:hover { background: var(--orange-soft); border-color: var(--orange); }

  .nav-burger span {
    display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
    position: relative; transition: transform 0.25s, opacity 0.2s;
  }

  .nav-burger span::before, .nav-burger span::after {
    content: ""; position: absolute; left: 0; width: 18px; height: 2px;
    background: var(--ink); border-radius: 2px; transition: transform 0.25s, top 0.2s;
  }

  .nav-burger span::before { top: -6px; }

  .nav-burger span::after { top: 6px; }

  .nav.open .nav-burger span { background: transparent; }

  .nav.open .nav-burger span::before { top: 0; transform: rotate(45deg); }

  .nav.open .nav-burger span::after { top: 0; transform: rotate(-45deg); }

  .mobile-drawer {
    position: fixed; top: 64px; left: 12px; right: 12px;
    background: #FAFAF7; border: 1px solid var(--ink-line); border-radius: 16px;
    padding: 18px; box-shadow: 0 24px 60px rgba(0,0,0,0.18);
    flex-direction: column; gap: 4px; z-index: 999;
    transform: translateY(-8px); opacity: 0;
    visibility: hidden; pointer-events: none;
    transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
    display: none;
  }

  .nav.open .mobile-drawer {
    display: flex; transform: translateY(0); opacity: 1;
    visibility: visible; pointer-events: auto;
    transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0s;
  }

  .mobile-drawer a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 12px; border-radius: 10px;
    font-size: 16px; font-weight: 600; color: var(--ink);
    border-bottom: 1px solid rgba(34,34,34,0.06);
  }

  .mobile-drawer a:last-of-type { border-bottom: none; }

  .mobile-drawer a:hover { background: var(--orange-soft); color: var(--orange); }

  .mobile-drawer a .arrow { color: var(--grey-2); transition: transform 0.2s; }

  .mobile-drawer a:hover .arrow { transform: translateX(3px); color: var(--orange); }

  .mobile-drawer .drawer-cta {
    margin-top: 10px; background: var(--orange); color: white !important;
    justify-content: center; padding: 14px; border-radius: 12px;
    font-weight: 700; border-bottom: none;
  }

  .mobile-drawer .drawer-cta:hover { background: #E84510; color: white !important; }

  .mobile-drawer .drawer-tag {
    background: var(--orange); color: white; font-size: 9px; font-weight: 700;
    padding: 2px 7px; border-radius: 999px; letter-spacing: 0.04em;
  }

  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px; font-weight: 600;
    border: 1px solid transparent; cursor: pointer;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    font-family: inherit;
  }

  .btn-ghost { color: var(--ink); }

  .btn-ghost:hover { background: var(--paper-2); }

  .btn-primary {
    background: var(--ink); color: var(--paper);
  }

  .btn-primary:hover { background: var(--orange); }

  .btn-orange {
    background: var(--orange); color: white;
    box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 8px 20px -8px rgba(255,90,31,.6);
  }

  .btn-orange:hover { background: var(--orange-deep); transform: translateY(-1px); }

  .btn-lg { padding: 14px 24px; font-size: 15px; }


  /* Login button (next to language toggle) — discreet but distinctive */
  .btn-login {
    color: var(--ink);
    border: 1px solid var(--line);
    background: white;
    gap: 6px;
    padding: 9px 16px;
  }

  .btn-login:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }

  .btn-login svg { flex-shrink: 0; }


  /* Language toggle (global, in nav) */
  .lang-toggle {
    display: inline-flex; background: rgba(11,11,12,0.04);
    border: 1px solid var(--ink-line); border-radius: 999px;
    padding: 3px; gap: 2px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.04em;
    margin-right: 8px;
  }

  .lang-toggle button {
    background: transparent; border: none; cursor: pointer;
    padding: 5px 11px; border-radius: 999px;
    color: var(--grey-1); font: inherit;
    transition: background 0.15s, color 0.15s;
  }

  .lang-toggle button:hover { color: var(--ink); }

  [data-lang="fr"] .lang-toggle button.fr,
  [data-lang="ar"] .lang-toggle button.ar {
    background: var(--ink); color: var(--paper);
  }

  .dash-side .logo-mini {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 800;
    padding: 4px 8px 18px;
  }

  .dash-side .logo-mini .logo-mark { width: 22px; height: 22px; border-radius: 7px; }

  .dash-side .logo-mini .logo-mark::before { width: 5px; height: 5px; inset: 4px 4px auto auto; }

    .nav-inner .btn-ghost, .nav-inner .btn-orange { display: none; }


    /* Garder le bouton login visible en mobile, en version icône compacte */
    .nav-inner .btn-login {
      display: inline-flex !important;
      padding: 8px 10px;
      gap: 0;
    }

    .nav-inner .btn-login span { display: none; }

    .nav-inner .btn-login svg { width: 16px; height: 16px; }

/* -------------------------------------------------------------------
   Deux variables sont utilisées par les règles ci-dessus mais ne sont
   définies NULLE PART dans login.php : --cream et --ink-line. Sur la
   landing, les propriétés concernées sont donc ignorées par le
   navigateur (fond et bordure du bouton burger). On les définit ici
   pour que l'entête soit correctement rendu sur cette page.
   ------------------------------------------------------------------- */
:root {
  --cream: #FAFAF7;
  --ink-line: #E4E3DD;
}

/* -------------------------------------------------------------------
   Adaptations mobile de l'entête, reprises telles quelles de la landing
   (login.php, @media max-width: 900px).

   Elles y étaient à l'origine hors de la media query à cause d'une
   accolade orpheline ; celle-ci a été corrigée le 2026-07-30, donc les
   deux pages se comportent désormais de la même façon :
   liens visibles sur ordinateur, burger à partir de 900 px.
   ------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-inner .btn-ghost, .nav-inner .btn-orange { display: none; }

  /* Bouton de connexion conservé en mobile, en version icône compacte */
  .nav-inner .btn-login {
    display: inline-flex !important;
    padding: 8px 10px;
    gap: 0;
  }
  .nav-inner .btn-login span { display: none; }
  .nav-inner .btn-login svg { width: 16px; height: 16px; }
  .nav-inner { padding: 0 16px; }
}