/* =============================================================================
   Fali.ai — habillage partagé (barre de navigation + pied de page).
   Sous-ensemble de site.css destiné aux pages applicatives qui possèdent
   déjà leur propre feuille de style : on n'importe QUE le nécessaire,
   pour ne rien écraser de leur mise en page.
============================================================================= */

/* 1. RÉGLAGES ------------------------------------------------------------- */
:root{
  --navy:#0f172a;
  --navy-2:#1e293b;
  --navy-3:#334155;
  --orange:#f97316;
  --orange-dark:#ea580c;
  --orange-soft:#fff7ed;
  --blue:#2563eb;
  --blue-dark:#1d4ed8;
  --blue-soft:#eff6ff;
  --teal:#0891b2;
  --teal-soft:#ecfeff;
  --violet:#7c3aed;
  --violet-soft:#f5f3ff;
  --green:#16a34a;
  --green-soft:#dcfce7;
  --red:#dc2626;

  --bg:#f8fafc;
  --surface:#ffffff;
  --surface-2:#f1f5f9;
  --border:#e5e7eb;
  --text:#0f172a;
  --text-2:#334155;
  --muted:#64748b;
  --muted-2:#94a3b8;

  --radius:14px;
  --radius-lg:20px;
  --radius-sm:10px;
  --shadow-sm:0 1px 3px rgba(15,23,42,.07);
  --shadow-md:0 8px 24px rgba(15,23,42,.08);
  --shadow-lg:0 24px 60px rgba(15,23,42,.14);
  --shadow-orange:0 12px 28px rgba(249,115,22,.28);

  --shell:1200px;
  --banner-h:38px;
  --nav-h:70px;
  --font:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-ar:"Segoe UI","Tahoma",system-ui,sans-serif;
}


/* Icônes SVG */
.ico{width:20px;height:20px;flex:0 0 auto}
.ico--sm{width:16px;height:16px}
.ico--lg{width:26px;height:26px}

/* 4. NAVIGATION ----------------------------------------------------------- */
.top-banner{
  position:fixed;top:0;left:0;right:0;z-index:120;height:var(--banner-h);
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--navy);color:#e2e8f0;font-size:.82rem;font-weight:500;
  padding:0 16px;text-align:center;transition:top .3s;
}
.top-banner .ico{color:var(--orange);width:15px;height:15px}

.navbar{
  position:fixed;top:var(--banner-h);left:0;right:0;z-index:110;height:var(--nav-h);
  display:flex;align-items:center;gap:20px;
  padding:0 max(24px,calc((100vw - var(--shell)) / 2 + 24px));
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);transition:top .3s,box-shadow .2s;
}
.navbar.is-scrolled{box-shadow:var(--shadow-sm)}

.logo{
  display:flex;align-items:center;gap:.6rem;font-size:1.2rem;font-weight:800;
  color:var(--text);letter-spacing:-.03em;flex:0 0 auto;
}
.logo:hover{text-decoration:none}
.logo__mark{
  width:36px;height:36px;border-radius:11px;background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-orange);
}
.logo__mark .ico{width:21px;height:21px}

.nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-links > a,.dropbtn{
  display:flex;align-items:center;gap:.35rem;padding:.55rem .85rem;border-radius:9px;
  color:var(--text-2);font-size:.92rem;font-weight:600;background:none;border:0;
  font-family:inherit;cursor:pointer;white-space:nowrap;
}
.nav-links > a:hover,.dropbtn:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.nav-links > a.is-active{color:var(--orange-dark);background:var(--orange-soft)}

.nav-dropdown{position:relative}
.dropdown-content{
  position:absolute;top:calc(100% + 10px);inset-inline-start:0;min-width:250px;
  background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.nav-dropdown:hover .dropdown-content,
.nav-dropdown:focus-within .dropdown-content,
.nav-dropdown.is-open .dropdown-content{opacity:1;visibility:visible;transform:none}
.dropdown-content a{
  display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:9px;
  color:var(--text-2);font-size:.9rem;font-weight:500;
}
.dropdown-content a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.dropdown-content .ico{width:18px;height:18px}
.dropdown-content .flag{font-size:1.05rem;line-height:1}

.nav-lang .dropbtn{background:var(--surface-2);color:var(--text-2)}
.nav-lang .dropbtn:hover{background:var(--border)}
.nav-badge{
  display:inline-flex;align-items:center;padding:.4rem .8rem;border-radius:99px;
  background:var(--green-soft);color:#15803d;font-size:.72rem;font-weight:800;letter-spacing:.04em;
}
.nav-cta{
  display:inline-flex;align-items:center;gap:.4rem;height:42px;padding:0 1.1rem;border-radius:10px;
  background:var(--blue);color:#fff !important;font-size:.9rem;font-weight:700;
}
.nav-cta:hover{background:var(--blue-dark);text-decoration:none}

.mobile-toggle{
  display:none;width:44px;height:44px;margin-inline-start:auto;border:1px solid var(--border);
  background:#fff;border-radius:11px;color:var(--text);cursor:pointer;
  align-items:center;justify-content:center;
}
.mobile-toggle:hover{background:var(--surface-2)}
.nav-scrim{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:105;display:none}
.nav-scrim.is-open{display:block}


/* 13. PIED DE PAGE -------------------------------------------------------- */
.footer{background:var(--navy);color:#94a3b8;padding:72px 0 0;font-size:.94rem}
.footer-grid{
  display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:44px;
  padding-bottom:52px;
}
.footer .logo{color:#fff;margin-bottom:16px}
.footer-brand p{color:#94a3b8;line-height:1.7;max-width:38ch}
.footer h3{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.09em;margin-bottom:18px}
.footer-links a{display:block;color:#94a3b8;padding:.35rem 0;font-weight:500}
.footer-links a:hover{color:var(--orange);text-decoration:none}
.social{display:flex;gap:.6rem;margin-top:22px}
.social a{
  width:40px;height:40px;border-radius:11px;background:var(--navy-2);color:#cbd5e1;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--navy-3);
}
.social a:hover{background:var(--orange);border-color:var(--orange);color:#fff;text-decoration:none}
.footer-bottom{
  border-top:1px solid var(--navy-2);padding:24px 0;display:flex;
  justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.87rem;
}
.footer-bottom .ico{color:var(--orange);width:15px;height:15px;vertical-align:-2px}


/* 14. RTL (arabe) --------------------------------------------------------- */
[dir="rtl"]{font-family:var(--font-ar)}
[dir="rtl"] .hero-trust,[dir="rtl"] .benefit,[dir="rtl"] .contact-item,
[dir="rtl"] .step,[dir="rtl"] .tip{text-align:right}
[dir="rtl"] .btn .ico--arrow,[dir="rtl"] .more .ico{transform:scaleX(-1)}
[dir="rtl"] .page-hero__back .ico{transform:scaleX(-1)}
[dir="rtl"] .prose ul{padding-inline-start:22px}


@media (max-width:900px){
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .navbar{gap:12px}
  .mobile-toggle{display:flex}
  .nav-links{
    position:fixed;top:calc(var(--banner-h) + var(--nav-h));inset-inline:0;
    background:#fff;border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg);
    flex-direction:column;align-items:stretch;gap:2px;padding:16px;margin:0;
    max-height:calc(100vh - var(--banner-h) - var(--nav-h));overflow-y:auto;
    transform:translateY(-14px);opacity:0;visibility:hidden;
    transition:opacity .2s,transform .2s,visibility .2s;z-index:106;
  }
  .nav-links.is-open{opacity:1;visibility:visible;transform:none}
  .nav-links > a,.dropbtn{width:100%;padding:.8rem .9rem;font-size:1rem}
  .nav-dropdown{width:100%}
  .dropdown-content{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-inline-start:2px solid var(--border);border-radius:0;
    margin:2px 0 6px .9rem;padding:0 0 0 .4rem;display:none;min-width:0;
  }
  .nav-dropdown.is-open .dropdown-content{display:block}
  .nav-badge,.nav-cta{align-self:flex-start;margin-top:8px}
  .nav-cta{width:100%;justify-content:center}
}