/* ================================
   Clicpay — Styles principaux
   (Séparation claire HTML / CSS / JS)
   ================================ */
:root{
  --bg-from:#f8f5f0;
  --bg-to:#f2efe9;
  --text:#0e1116;
  --muted:#5b6573;
  --border:#e8e2d9;
  --primary:#1f6fd6;
  --primary-dark:#1047a6;
  --card:#ffffff;
  --shadow: 0 10px 30px rgba(16,23,40,.08);
  --radius: 16px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background: linear-gradient(180deg, var(--bg-from), var(--bg-to));
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

.container{
  width:min(1120px, 92vw);
  margin-inline:auto;
}

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

/* ========== Header ========== */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  background:rgba(248,245,240,.75);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; gap:24px;
  padding:14px 0;
}

/* Marque (logo + texte) uniquement dans le header */
.site-header .brand{
  display:inline-flex;
  align-items:center;
  gap:10px;                 /* espace logo/texte */
  text-decoration:none;
  color:inherit;
  padding:2px 0;            /* meilleur alignement vertical */
}
.site-header .brand-logo{
  display:block;
  height: 64px;           /* ajuste 26–32px selon ton header */
  width:auto;
}
.site-header .brand-text{
  font-weight:800;
  font-size:1.125rem;       /* ~18px */
  line-height:1;
  letter-spacing:.2px;
  color:inherit;
  text-decoration:none;
  transform:translateY(1px);/* micro-ajustement visuel */
}

/* Dans le header: jamais de soulignement au hover */
.site-header a,
.site-header a:hover,
.site-header a:focus { text-decoration:none; }

/* Anciennes pastilles/texte (utiles encore dans le footer si besoin) */
.brand-mark{
  width:20px; height:20px; border-radius:6px;
  background:var(--primary);
  box-shadow: inset 0 -6px 10px rgba(0,0,0,.12);
  display:inline-block;
}
.brand-name{ letter-spacing:.2px; }

/* Menu */
.menu{
  display:flex; gap:18px; margin-left:auto;
}
.menu a{ color:var(--muted); font-weight:500; }
.menu a:hover{ color:var(--text); }

/* Boutons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:10px 16px; border:1px solid transparent;
  font-weight:600; text-decoration:none; cursor:pointer;
  box-shadow:var(--shadow);
}
.btn-primary{
  background:var(--primary); color:white;
}
.btn-primary:hover{ background:var(--primary-dark); }
.btn-ghost{
  background:transparent; border-color:var(--border); color:var(--text);
  box-shadow:none;
}
.btn-icon{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:12px; width:36px; height:36px;
  box-shadow:var(--shadow); cursor:pointer;
}

/* ========== Hero ========== */
.hero{ padding:42px 0 12px; }
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:start;
}
.hero-copy h1{
  font-size:clamp(28px,5vw,44px); margin:0 0 10px; letter-spacing:-.3px;
}
.hero-copy .accent{ color:var(--text); }
.lead{ color:var(--muted); font-size:1.05rem; }
.hero-cta{ display:flex; gap:12px; margin:18px 0 8px; }
.bullets{ margin:18px 0 0; padding:0 0 0 20px; color:var(--muted); }
.bullets li{ margin:6px 0; }

/* ========== Simulateur ========== */
.simu-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow);
}
.simu-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.simu-title{ font-weight:700; }
.simu-sub{ color:var(--muted); font-size:.9rem; }

.simu-form .field{ margin:12px 0; }
label{ display:block; font-weight:600; margin-bottom:6px; }
input, select{
  width:100%; padding:12px 14px;
  border-radius:12px; border:1px solid var(--border); outline:none;
  background:#fff;
  font-size:1rem;
}
input:focus, select:focus{ border-color: var(--primary); box-shadow:0 0 0 3px rgba(31,111,214,.12); }
.select-wrap{ position:relative; }

.disclaimer{ color:var(--muted); font-size:.9rem; margin:6px 0; }
.micro{ color:var(--muted); font-size:.85rem; }

/* ========== Pourquoi nous ========== */
.why{ padding:36px 0; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.chip{ border:1px solid var(--border); padding:8px 12px; border-radius:999px; background:#fff; box-shadow:var(--shadow); font-weight:600; }
.cards-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.card h3{ margin:0 0 6px; }

/* ========== Pays ========== */
.countries{ padding:30px 0; }
.countries h2{ margin:0 0 8px; }
.countries .sub{ color:var(--muted); margin:0 0 12px; }
.country-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.country-card{
  background:#fff; border:1px solid var(--border); border-radius:18px;
  padding:14px; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.country-left{ display:flex; align-items:center; gap:12px; }
.flag{ font-size:22px; }
.country-name{ font-weight:700; }
.country-meta{ color:var(--muted); font-size:.95rem; }
.pill{ border:1px solid var(--border); padding:6px 10px; border-radius:999px; background:#fff; }

/* ========== Étapes ========== */
.how{ padding:18px 0 32px; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.step{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.badge{ width:28px; height:28px; border-radius:999px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:8px; }

/* ========== FAQ ========== */
.faq{ padding:18px 0 36px; }
.accordion details{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:10px 12px; box-shadow:var(--shadow); margin:10px 0; }
.accordion summary{ cursor:pointer; list-style:none; font-weight:700; }
.answer{ color:var(--muted); margin-top:6px; }

/* ========== Footer ========== */
.site-footer{ background:#fff; border-top:1px solid var(--border); }
.footer-grid{ display:grid; grid-template-columns:1.2fr .9fr .9fr .9fr; gap:16px; padding:20px 0; }
.foot-title{ font-weight:800; font-size:1.1rem; margin-top:4px; }
.foot-copy{ color:var(--muted); margin:8px 0 12px; }
.foot-head{ font-weight:800; margin-bottom:6px; }
.foot-links{ list-style:none; padding:0; margin:0; }
.foot-links li{ margin:6px 0; }
.socials{ list-style:none; display:flex; gap:10px; padding:0; }

.legal{ border-top:1px solid var(--border); background:#faf9f7; }
.legal-row{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; }
.legal-links{ display:flex; gap:14px; }
.legal a{ color:var(--muted); }

/* ========== Responsive ========== */
@media (max-width: 960px){
  .hero-grid{ grid-template-columns:1fr; }
  .cards-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .country-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .site-header .brand-logo{ height:24px; }
  .site-header .brand-text{ font-size:1rem; transform:translateY(.5px); }
}


/* ===== Header layout ===== */
.site-header .nav{
  display:flex; align-items:center; gap:16px;
}
.brand{ flex:0 0 auto; }
.menu{ display:flex; align-items:center; gap:16px; flex:1 1 auto; min-width:0; }
.menu a{ white-space:nowrap; }

/* ===== Mobile tweaks ===== */
@media (max-width: 768px){
  .brand-logo{ height:56px; width:auto; display:block; }   /* logo + grand */
  .menu a{ font-size:14px; line-height:1.2; }              /* liens + petits */
  .site-header .nav{ gap:10px; }
  .btn.btn-primary{ padding:8px 12px; font-size:14px; }    /* CTA + compact */
}

@media (max-width: 420px){
  .brand-logo{ height:60px; }                               /* encore + grand */
  .menu{ gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .menu a{ font-size:13px; padding:6px 6px; }               /* liens compacts */
  .btn.btn-primary{ display:none; }                         /* cache le gros CTA si très peu d'espace */
}