/* Palette ADL (déduite du visuel) */
:root{
  --blue:#0a4a78;        /* bleu bandeau */
  --blue-dark:#082f4e;   /* bleu foncé */
  --gold:#f4a300;        /* doré/orange */
  --red:#e53935;
  --green:#2e7d32;
  --text:#0f1222;
  --text-inv:#ffffff;
  --bg:#ffffff;
  --muted:#6b7280;
  --card:#f7f8fb;
  --border:#e5e7eb;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

.container{width:min(1120px,92%); margin:0 auto}

/* Top bar */
.topbar{background:var(--blue-dark); color:var(--text-inv); font-size:14px}
.topbar .container{display:flex; gap:18px; padding:6px 0; flex-wrap:wrap; justify-content:flex-end}

/* Header / Nav */
.header{background:var(--blue); color:var(--text-inv); box-shadow:var(--shadow)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px; color:var(--text-inv); text-decoration:none}
.logo{width:48px; height:48px; border-radius:50%; background:#fff; object-fit:cover}
.brand-text strong{display:block; letter-spacing:.5px}
.brand-text small{opacity:.9; font-weight:600}
.menu a{color:#eaf3ff; text-decoration:none; margin-left:18px; font-weight:600}
.menu a:hover{color:#fff}

/* Hero */
.hero-adl{
  background:
    linear-gradient(180deg, rgba(10,74,120,.95), rgba(8,47,78,.95)),
    url("../img/hero.jpg") center/cover no-repeat;
  color:#fff;
}
.hero-inner{padding:80px 0; text-align:center}
.hero-inner h1{font-size:clamp(32px,5vw,56px); margin:0 0 6px 0}
.subtitle{font-size:clamp(16px,2.2vw,22px); opacity:.95}
.pill-row{margin:12px 0 18px}
.pill{display:inline-block; padding:6px 12px; border-radius:999px; font-weight:800; margin:0 6px; background:#fff; color:#0a2240}
.pill.red{color:#fff; background:var(--red)}
.pill.orange{color:#fff; background:var(--gold)}
.pill.green{color:#fff; background:var(--green)}
.cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:12px}
.btn{display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; cursor:pointer; font-weight:700}
.btn.primary{background:var(--gold); color:#1b1200}
.btn.ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.6)}
.special{margin-top:10px; font-weight:700}

/* Sections */
.section{padding:64px 0}
.section h2{font-size:clamp(24px,3vw,32px); margin:0 0 18px 0}
.section.muted{background:#f9fbff; border-block:1px solid #eef2ff}

/* Cards grid */
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
.card{grid-column:span 12; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.card .icon{font-size:28px; margin-bottom:8px}
.card h3{margin:4px 0 6px 0}
.card p{color:#4b5563; margin:0}
@media(min-width:720px){ .card{grid-column:span 6} }
@media(min-width:1024px){ .card{grid-column:span 3} }

/* Money transfer */
.money-grid{display:grid; grid-template-columns:1fr; gap:24px}
.brands{list-style:none; padding:0; margin:10px 0 0 0; display:flex; gap:10px; flex-wrap:wrap}
.badge{display:inline-block; padding:10px 14px; border-radius:12px; color:#fff; font-weight:800}
.badge.ria{background:#f36c21}
.badge.om{background:#ff7900}
.hint{color:#374151; margin-top:8px}
.flag-box{display:flex; align-items:center; gap:14px}
.flag-gn{width:36px; height:24px; background:linear-gradient(90deg,#ce1126 33%, #fcd116 33% 66%, #009460 66%)}
.flag-fr{width:36px; height:24px; background:linear-gradient(90deg,#0055a4 33%, #fff 33% 66%, #ef4135 66%)}
.arrows{font-size:24px; color:#111827}
@media(min-width:900px){
  .money-grid{grid-template-columns:1.2fr .8fr; align-items:center}
}

/* Contact */
.contact{display:grid; grid-template-columns:1fr; gap:20px}
.contact-list{list-style:none; padding:0; margin:10px 0 0 0; color:#374151}
.contact-form{background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--shadow)}
.contact-form .row{display:flex; gap:10px; flex-wrap:wrap}
.contact-form input, .contact-form textarea{
  width:100%; padding:12px; border-radius:10px; border:1px solid var(--border); background:#fff; color:#0f1222
}
.contact-form button{margin-top:10px}
.muted-note{display:block; color:#6b7280; margin-top:8px}
@media(min-width:840px){ .contact{grid-template-columns:1.1fr .9fr} }

/* Footer */
.footer{padding:22px 0; background:var(--blue-dark); color:#cfe6ff}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:12px}
.footer a{color:#cfe6ff; text-decoration:none; margin-left:12px}
.footer a:hover{color:#fff}