/**
 * articles-common.css
 * Styles partages pour le header (nav) et footer des pages articles paiemap.fr.
 * Repris de index_tousev2.css — seules les classes nav + footer + modal + base.
 */

/* ── VARIABLES ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --blue:#0052CC;
  --blue-hover:#0065FF;
  --blue-light:#0747A6;
  --navy:#091E42;
  --navy-light:#253858;
  --text:#091E42;
  --text-sub:#42526E;
  --text-muted:#6B778C;
  --bg:#FFFFFF;
  --bg-light:#F4F5F7;
  --border:#DFE1E6;
  --shadow:0 1px 3px rgba(9,30,66,.08),0 0 1px rgba(9,30,66,.08);
  --radius:8px;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.25,.8,.25,1);
  --green:#36B37E;
}
html{scroll-behavior:smooth;font-size:16px}
a{color:var(--blue);text-decoration:none;transition:color .2s}
a:hover{color:var(--blue-hover)}
ul{list-style:none}
.container{max-width:1140px;margin:0 auto;padding:0 2rem}

/* ── NAV ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:9999;background:var(--bg);transition:box-shadow .3s var(--ease);min-height:64px;display:flex;align-items:center}
.nav.scrolled{box-shadow:0 2px 8px rgba(9,30,66,.08)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav-logo{font-family:var(--font);font-weight:800;font-size:1.35rem;color:var(--navy);letter-spacing:-0.02em}
.nav-logo span{color:var(--blue)}
.nav-links{display:flex;gap:1.75rem;align-items:center}
.nav-links a{font-size:.875rem;font-weight:500;color:var(--text-sub);transition:color .2s}
.nav-links a:hover{color:var(--blue)}
.nav-cta{background:var(--blue)!important;color:#fff!important;padding:.5rem 1.25rem;border-radius:4px;font-weight:600;font-size:.875rem;transition:all .2s var(--ease)!important}
.nav-cta:hover{background:var(--blue-hover)!important;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,82,204,.25)}
.nav-login{padding:.5rem 1rem!important;border:1.5px solid var(--border)!important;border-radius:4px;color:var(--text-sub)!important;font-weight:600!important;font-size:.82rem!important;transition:all .2s var(--ease)!important}
.nav-login:hover{border-color:var(--blue)!important;color:var(--blue)!important;background:rgba(0,82,204,.04)!important}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
.hamburger span{width:22px;height:2px;background:var(--navy);transition:all .3s var(--ease)}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.mobile-menu{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;z-index:10000;opacity:0;pointer-events:none;transition:opacity .3s}
.mobile-menu.active{opacity:1;pointer-events:all}
.mobile-menu a{font-size:1.25rem;font-weight:600;color:var(--navy)}

/* ── FOOTER ── */
.footer{padding:3.5rem 0 1.5rem;background:var(--navy);color:#B3BAC5}
.footer h2,.footer h3,.footer h4{color:#fff}
.footer-inner{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem}
.footer-brand .nav-logo{font-size:1.25rem;margin-bottom:.75rem;display:inline-block;color:#fff}
.footer-brand p{font-size:.82rem;color:#8993A4;line-height:1.6;max-width:280px}
.footer-col h4{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#8993A4;margin-bottom:.85rem}
.footer-col a{display:block;font-size:.82rem;color:#B3BAC5;padding:.25rem 0;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-bottom{padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:#5E6C84}

/* ── NAV DROPDOWN ── */
.nav-dropdown{position:relative}
.nav-dropdown-toggle{display:inline-flex;align-items:center;font-size:.875rem;font-weight:500;color:var(--text-sub);cursor:pointer;padding-bottom:.75rem;margin-bottom:-.75rem}
.nav-dropdown-toggle:hover{color:var(--blue)}
.nav-dropdown-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(9,30,66,.12);min-width:210px;padding:.5rem 0;z-index:10001}
.nav-dropdown:hover .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{display:block;padding:.5rem 1.25rem;font-size:.84rem;font-weight:500;color:var(--text-sub);white-space:nowrap}
.nav-dropdown-menu a:hover{background:var(--bg-light);color:var(--blue)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.75rem;border-radius:4px;font-family:var(--font);font-size:.9rem;font-weight:600;cursor:pointer;border:none;transition:all .2s var(--ease)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-hover);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,82,204,.3)}
.btn-white{background:#fff;color:var(--blue);font-weight:700}
.btn-white:hover{background:rgba(255,255,255,.92);color:var(--blue);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.btn-outline-w{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35)}
.btn-outline-w:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(9,30,66,.6);z-index:10001;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.modal-overlay.active{opacity:1;pointer-events:all}
.modal{background:#fff;border-radius:12px;padding:2rem;position:relative;width:90%;box-shadow:0 20px 50px rgba(9,30,66,.2)}
.modal-close{position:absolute;top:.75rem;right:1rem;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-muted)}

/* ── ARTICLE BODY SPACING ── */
/* Compense la nav fixe en haut */
#site-header + *,
#site-header ~ main,
#site-header ~ article,
#site-header ~ .hero-wrap,
#site-header ~ section:first-of-type{padding-top:80px}
/* Breadcrumb directement apres le header (pas dans hero-wrap) */
#site-header ~ nav.breadcrumb,
#site-header ~ .breadcrumb{padding-top:96px}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-dropdown-menu{position:static;transform:none;box-shadow:none;border:none;padding:0;margin:0}
  .nav-dropdown-menu a{padding:.75rem 0}
  .footer-inner{grid-template-columns:1fr 1fr}
  .container{padding:0 1.2rem}
}
@media(max-width:480px){
  .footer-inner{grid-template-columns:1fr;gap:1.75rem}
  .footer-bottom{flex-direction:column;gap:.5rem;text-align:center}
}