/* ============================================================
   TOPUP ONLINE AFRICA — DESIGN SYSTEM

   Layout + component layer for the redesigned funnel pages.
   Colours come from tokens.css — nothing new is defined here.

   Loaded AFTER components.css. Deliberately does NOT redefine
   anything components.css already owns (.carrier-badge, .speed-chip,
   .sandbox-banner, .btn-outline, .alert-info), and avoids bare
   .container because Tailwind CDN owns that name.

   Headings are scoped (.hero h1, .section h2, …) rather than global,
   so Tailwind text-* utilities on the account/orders pages keep working.
   ============================================================ */

:root{
  /* Cream-tinted neutral for summary blocks — the only new token.
     A blue-grey panel (the usual choice) fights the cream page. */
  --info-bg:#F3F0E8;
  --info-line:#DFD8C8;

  --success-bg:#E8F5F1; --success-fg:#0A5C4A; --success-line:#B9DED3;
  --warning-bg:#FEF3E2; --warning-fg:#8A5A0A; --warning-line:#F7941D;
  --danger-bg:#FDF0F0;  --danger-fg:#B42318;

  --fs-h1:clamp(2.1rem, 5vw, 3.6rem);
  --fs-h2:clamp(1.5rem, 3vw, 2.15rem);

  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  --shadow-funnel:0 18px 45px rgba(7,64,53,.16);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.oa-container{width:min(1140px,calc(100% - 32px));margin-inline:auto}
.oa-container-narrow{width:min(880px,calc(100% - 32px));margin-inline:auto}
.muted{color:var(--text-secondary)}

/* ============================================================
   REASSURANCE BAR
   ============================================================ */
.reassurance{
  background:var(--green-light);
  color:var(--green-primary);
  text-align:center;
  padding:9px var(--sp-4);
  font-size:14px;
  font-weight:700;
}

/* ============================================================
   BUTTONS
   Primary CTA = orange (brand rule). Teal = structural.
   .btn-orange / .btn-green / .btn-outline stay in components.css.
   ============================================================ */
.btn{
  border:0;
  border-radius:var(--radius-md);
  padding:13px 20px;
  font-weight:700;
  font-size:.95rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  transition:.15s ease;
  background:var(--orange-primary);
  color:#fff;
  box-shadow:var(--shadow-btn);
  text-align:center;
}
.btn:hover:not(:disabled){background:var(--orange-dark);transform:translateY(-1px);box-shadow:0 6px 20px rgba(247,148,29,.45)}
.btn:disabled{background:#D1D5DB;color:#fff;box-shadow:none;transform:none;cursor:not-allowed}
.btn.block{width:100%}

.btn-teal{background:var(--green-primary);box-shadow:none;color:#fff}
.btn-teal:hover:not(:disabled){background:var(--green-dark);box-shadow:none}

.btn-secondary{background:var(--green-light);color:var(--green-primary);box-shadow:none}
.btn-secondary:hover:not(:disabled){background:#D7EDE6;box-shadow:none;transform:translateY(-1px)}

.btn-ghost{background:transparent;color:var(--green-primary);box-shadow:none;padding-inline:0}
.btn-ghost:hover:not(:disabled){background:transparent;color:var(--green-dark);box-shadow:none;transform:none;text-decoration:underline}
/* "← Modifier…" link sitting above a panel heading */
.panel > .btn-ghost{padding-top:0;margin-bottom:var(--sp-3)}

/* ============================================================
   BADGES
   ============================================================ */
.badge{display:inline-flex;font-size:12px;font-weight:700;border-radius:var(--radius-pill);padding:4px 10px}
.badge-teal{background:var(--green-light);color:var(--green-primary)}
.badge-orange{background:var(--orange-light);color:var(--orange-dark)}
.badge-neutral{background:#F3F4F6;color:var(--text-secondary)}

/* ============================================================
   CARDS
   ============================================================ */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--sp-6);
  box-shadow:var(--shadow-sm);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  color:#fff;
  background:
    /* Teal highlight, not orange: orange at any usable opacity over #074035
       mixes to khaki and reads as a dirty smear rather than a glow. */
    radial-gradient(circle at 82% 8%, rgba(20,163,130,.45) 0, transparent 46%),
    linear-gradient(135deg, var(--green-dark) 0%, var(--green-primary) 48%, var(--green-mid) 100%);
  padding:var(--sp-16) 0 var(--sp-12);
}
/* Funnel pages only: the .flow card overlaps the hero by -56px. */
.hero.compact{padding:var(--sp-12) 0 88px}
.hero h1{
  font-size:var(--fs-h1);
  letter-spacing:-.045em;
  line-height:1.06;
  max-width:860px;
  margin:var(--sp-4) 0;
  font-weight:800;
}
.hero h1 em{font-style:normal;color:var(--orange-primary)}
/* Explicit class, NOT a bare `.hero p` — the home hero contains a white
   quick-start card whose paragraphs must stay dark. */
.hero .hero-lead{max-width:660px;color:rgba(255,255,255,.78);font-size:1.06rem;margin:0}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.1);
  border-radius:var(--radius-pill);
  padding:6px 14px;
  font-size:12px;
  font-weight:700;
}
.eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:var(--orange-primary)}
/* Home hero: copy on the left, quick-start card on the right */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-12);align-items:center}
.hero-grid .hero h1,.hero-grid h1{max-width:none}
.hero-card{
  background:#fff;
  color:var(--text-primary);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  padding:var(--sp-6);
}
.hero-card .tabs{display:flex;gap:var(--sp-2);padding:4px;background:#F3F4F6;border-radius:var(--radius-md);margin-bottom:var(--sp-5)}
.hero-card .tabs button{
  flex:1;border:0;background:transparent;border-radius:var(--radius-sm);
  padding:10px 8px;font-weight:700;font-size:.87rem;color:var(--text-secondary);transition:.15s ease;
}
.hero-card .tabs button.active{background:#fff;color:var(--green-primary);box-shadow:var(--shadow-sm)}

/* App Store / Google Play badges */
.store-badges{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-8)}
.store-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:#000;color:#fff;
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-md);
  padding:10px 18px;
  transition:.15s ease;
}
.store-badge:hover{background:#141414;transform:translateY(-1px);color:#fff}
.store-badge .sb-text{display:flex;flex-direction:column;line-height:1.15}
.store-badge .sb-top{font-size:10px;font-weight:500;letter-spacing:.03em;color:rgba(255,255,255,.8)}
.store-badge .sb-name{font-size:17px;font-weight:600}

.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-6)}
.chips span{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius-pill);
  padding:8px 14px;
  font-size:14px;
  font-weight:600;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:var(--sp-16) 0}
.section.tight{padding:var(--sp-12) 0}
.section.on-white{background:#fff}
.section.on-teal{background:var(--green-primary);color:#fff}
.section.on-teal .lead{color:rgba(255,255,255,.72)}
.section h2,.heading-center h2{
  font-size:var(--fs-h2);
  letter-spacing:-.035em;
  line-height:1.1;
  font-weight:800;
  margin:0 0 var(--sp-2);
}
.lead{color:var(--text-secondary);max-width:640px;margin:0}
.heading-center{text-align:center;max-width:640px;margin:0 auto var(--sp-10)}
.heading-center .lead{margin-inline:auto}

/* ============================================================
   GRIDS
   ============================================================ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}

/* ---- Service cards ---- */
.service{display:flex;flex-direction:column;min-height:288px;box-shadow:var(--shadow-md);transition:.18s ease}
.service:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,.13)}
.service .ico{
  width:48px;height:48px;
  border-radius:var(--radius-md);
  display:grid;place-items:center;
  background:var(--green-light);
  margin-bottom:var(--sp-4);
}
.service.accent .ico{background:var(--orange-light)}
.service h3{font-size:1.15rem;font-weight:700;margin:0 0 var(--sp-2)}
.service p{color:var(--text-secondary);font-size:.94rem;margin:0}
.service .tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-4) 0}
.service .btn{margin-top:auto}

/* ---- Steps ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:var(--sp-8)}
.steps.four{grid-template-columns:repeat(4,1fr)}
.step{border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-lg);padding:var(--sp-5)}
.step b{font-size:12px;color:var(--orange-primary);letter-spacing:.06em;text-transform:uppercase}
.step h3{margin:var(--sp-3) 0 var(--sp-2);font-size:1.02rem;font-weight:700}
.step p{color:rgba(255,255,255,.72);font-size:.9rem;margin:0}
.step-light{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-5)}
.step-light .num{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--green-light);color:var(--green-primary);
  font-weight:800;margin-bottom:var(--sp-3);
}
.step-light h3{font-size:1rem;font-weight:700;margin:0 0 var(--sp-2)}
.step-light p{color:var(--text-secondary);font-size:.9rem;margin:0}

/* ============================================================
   FUNNEL — the centred card that replaces .recharge-layout
   ============================================================ */
.funnel{max-width:880px;margin:-56px auto 0;padding:0 16px var(--sp-16);position:relative;z-index:2}
.flow{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-funnel);
  overflow:hidden;
}

/* ---- Stepper ---- */
.progress{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-6);
  border-bottom:1px solid var(--border);
  background:#FCFBF7;
}
.prog{display:flex;align-items:center;gap:var(--sp-2);color:var(--text-muted);font-size:14px;font-weight:700}
.prog .dot{
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  background:#EDEEF0;color:var(--text-secondary);
  font-size:.8rem;font-weight:800;
  transition:.2s ease;
  flex-shrink:0;
}
.prog.active{color:var(--green-primary)}
.prog.active .dot{background:var(--green-primary);color:#fff}
.prog.done{color:var(--green-mid)}
.prog.done .dot{background:var(--green-light);color:var(--green-primary)}

/* ---- Panels ---- */
.panel{padding:var(--sp-8)}
.panel h2{font-size:1.42rem;font-weight:700;letter-spacing:-.02em;margin:0 0 var(--sp-2)}
.help{color:var(--text-secondary);font-size:.93rem;margin:0}
.field{margin-top:var(--sp-6)}
.field label{
  display:block;
  font-weight:700;
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-secondary);
  margin-bottom:var(--sp-2);
}
.hint{font-size:12px;color:var(--text-muted);margin-top:var(--sp-2)}
.input{
  width:100%;
  border:1.5px solid var(--border);
  border-radius:var(--radius-md);
  padding:13px 14px;
  font-size:1rem;
  color:var(--text-primary);
  background:#fff;
  transition:.18s ease;
}
.input:focus{outline:0;border-color:var(--green-primary);box-shadow:0 0 0 4px rgba(10,92,74,.12)}
.input::placeholder{color:var(--text-muted)}

/* Sub-heading inside a funnel panel */
.panel-sub{
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-secondary);margin:var(--sp-8) 0 var(--sp-3);
}

/* ---- Phone input ---- */
.numberbox{
  display:flex;
  align-items:stretch;
  border:1.5px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:#fff;
  transition:.18s ease;
}
.numberbox:focus-within{border-color:var(--green-primary);box-shadow:0 0 0 4px rgba(10,92,74,.12)}
.numberbox .prefix{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:0 14px;
  background:#FAF8F3;
  border-right:1px solid var(--border);
  font-weight:700;
  color:var(--text-primary);
  white-space:nowrap;
}
.numberbox .prefix .flag{font-size:1.1rem;line-height:1}
/* Country picker reuses .flag-btn from components.css so there is one
   source of truth for the button; only the skin is adjusted here. */
.numberbox-wrap{position:relative}
.numberbox .flag-btn{border-right:1px solid var(--border);background:#FAF8F3}
.numberbox .flag-btn:hover{background:#F3EFE6}
.numberbox .flag-btn .dial{font-weight:700;color:var(--text-primary);font-size:.95rem}
.numberbox input{border:0;outline:0;padding:14px;width:100%;font-size:1.05rem;color:var(--text-primary);background:transparent}
.numberbox .clear{
  border:0;background:transparent;color:var(--text-muted);
  padding:0 14px;font-size:1.1rem;line-height:1;
}
.numberbox .clear:hover{color:var(--text-secondary)}

/* ---- Status ---- */
.status{margin-top:var(--sp-4);border-radius:var(--radius-sm);padding:12px 14px;font-size:.88rem}
.status.loading{background:var(--info-bg);color:var(--text-secondary)}
.status.ok{background:var(--success-bg);color:var(--success-fg)}
.status.error{background:var(--danger-bg);color:var(--danger-fg)}

.alert{
  margin-top:var(--sp-5);
  background:var(--warning-bg);
  border-left:4px solid var(--warning-line);
  border-radius:6px;
  padding:11px 14px;
  color:var(--warning-fg);
  font-size:.84rem;
}

/* ---- Recognised number ---- */
.operator{
  margin-top:var(--sp-4);
  background:var(--success-bg);
  border:1px solid var(--success-line);
  border-radius:var(--radius-md);
  padding:13px 15px;
}
.operator small{display:block;color:var(--green-mid);font-size:12px;font-weight:700;letter-spacing:.04em}
.operator b{display:block;margin-top:4px;font-size:1rem}

/* ---- Offer cards ---- */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-5)}
.offers.two{grid-template-columns:repeat(2,1fr)}
.offers.one{grid-template-columns:1fr}
.offer{
  text-align:left;
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:var(--radius-md);
  padding:14px;
  transition:.15s ease;
  cursor:pointer;
  display:block;
  width:100%;
}
.offer:hover{border-color:var(--green-mid);transform:translateY(-1px)}
.offer.selected{border-color:var(--green-primary);background:var(--green-light);box-shadow:0 0 0 3px rgba(10,92,74,.1)}
.offer .offer-badge{display:block;font-size:12px;font-weight:800;color:var(--orange-dark)}
.offer .offer-title{display:block;font-size:1.05rem;font-weight:700;margin:4px 0}
.offer .offer-meta{display:block;color:var(--text-secondary);font-size:12px}
.offer .offer-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.offer .offer-price{display:block;margin-top:8px;font-weight:800;color:var(--green-primary)}

/* ---- Summary ---- */
.summary{
  background:var(--info-bg);
  border-radius:var(--radius-lg);
  padding:var(--sp-5);
  margin-top:var(--sp-5);
}
.summary h3{font-size:1rem;font-weight:700;margin:0 0 var(--sp-3)}
.row{display:flex;justify-content:space-between;gap:var(--sp-3);padding:7px 0;font-size:.9rem}
.row span{color:var(--text-secondary)}
.row b{text-align:right}
.row.total{
  border-top:1px solid var(--info-line);
  margin-top:6px;padding-top:12px;
  font-weight:800;font-size:1.05rem;
}
.row.total b{color:var(--orange-dark)}
.paymethods{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.paymethods span{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:7px 10px;font-size:.75rem;font-weight:700;color:var(--text-secondary);
}

/* ---- Actions ---- */
.actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-3);margin-top:var(--sp-6)}
.actions .back{margin-right:auto}

/* ---- Success ---- */
.success{text-align:center}
.success .check{
  width:64px;height:64px;border-radius:50%;
  background:var(--success-bg);color:var(--green-primary);
  display:grid;place-items:center;
  margin:0 auto var(--sp-4);
  font-size:1.9rem;font-weight:800;
}
.success .summary{text-align:left}

/* ============================================================
   eSIM CATALOG
   ============================================================ */
.quick{margin-top:-40px;position:relative;z-index:30}
.quickbox{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-funnel);
  padding:var(--sp-4);
  display:grid;
  /* Destination / Pays / Durée / Tri / bouton.
     Destination porte des libellés courts ("Afrique", "Asie") : elle cède de la
     place à Pays, dont les valeurs sont les plus longues ("Émirats arabes unis"),
     pour que le bouton reste sur la même ligne. */
  grid-template-columns:.85fr 1.3fr .95fr 1fr auto;
  gap:var(--sp-3);
  align-items:end;
}
.quickfield{display:flex;flex-direction:column;gap:6px}
.quickfield label{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary)}
.quickfield select{
  height:46px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-md);
  padding:0 12px;
  background:#fff;
  color:var(--text-primary);
  font-size:.95rem;
}
.quickfield select:focus{outline:0;border-color:var(--green-primary);box-shadow:0 0 0 3px rgba(10,92,74,.1)}
.quickbox .btn{height:46px;padding-block:0}

.filters{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-6) 0 var(--sp-4)}
.filter{
  background:#fff;
  border:1px solid var(--border);
  color:var(--text-secondary);
  padding:9px 15px;
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:.87rem;
  transition:.15s ease;
}
.filter:hover{border-color:var(--green-mid);color:var(--green-primary)}
.filter.active{border-color:var(--green-primary);background:var(--green-light);color:var(--green-primary)}

.result-count{font-size:.88rem;color:var(--text-secondary);font-weight:600;margin-bottom:var(--sp-4)}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.plan{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--sp-5);
  display:flex;
  flex-direction:column;
  transition:.18s ease;
}
.plan:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.plan.featured{border:2px solid var(--green-primary);box-shadow:var(--shadow-md)}
.plan-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-2)}
.plan h3{margin:var(--sp-3) 0 2px;font-size:1.18rem;font-weight:700}
.plan .coverage{color:var(--text-secondary);font-size:.88rem;margin:0 0 var(--sp-4)}
.plan .details{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:13px 0;margin-bottom:var(--sp-4);
}
.plan .details small{display:block;color:var(--text-muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.plan .details b{font-size:.94rem}
.plan .info{background:var(--green-light);color:var(--green-primary);border-radius:var(--radius-sm);padding:9px 11px;font-size:.78rem;margin:0 0 var(--sp-4)}
.plan .price{font-size:1.5rem;font-weight:800;letter-spacing:-.04em;color:var(--orange-dark);margin:0}
.plan .unit{color:var(--text-muted);font-size:.82rem;margin:2px 0 var(--sp-4)}
.plan .linkbtn{
  border:0;background:transparent;color:var(--green-primary);
  font-weight:700;font-size:.86rem;padding:6px 0;text-align:left;
}
.plan .linkbtn:hover{text-decoration:underline}
.plan .btn{margin-top:auto;width:100%}

/* ---- Trust band ---- */
.trustgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:var(--sp-8)}
.trustcard{border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-lg);padding:var(--sp-5)}
.trustcard strong{font-size:1.02rem}
.trustcard p{color:rgba(255,255,255,.72);font-size:.9rem;margin:var(--sp-2) 0 0}
.trustcard .linkbtn{
  border:0;background:transparent;color:var(--orange-primary);
  font-weight:700;font-size:.88rem;margin-top:var(--sp-3);padding:0;display:inline-block;
}
.trustcard .linkbtn:hover{text-decoration:underline}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-6)}
.faq details{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--sp-4);transition:.15s ease}
.faq details[open]{border-color:var(--green-mid)}
.faq summary{cursor:pointer;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--green-primary);font-weight:800}
.faq details[open] summary::after{content:'\2212'}
.faq p{color:var(--text-secondary);font-size:.9rem;margin:var(--sp-3) 0 0}

/* ============================================================
   MODAL
   ============================================================ */
.modal{
  position:fixed;inset:0;z-index:60;
  background:rgba(7,64,53,.62);
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.dialog{
  position:relative;
  width:min(560px,100%);
  max-height:90vh;overflow:auto;
  background:#fff;border-radius:var(--radius-xl);padding:var(--sp-8);
}
.dialog h2{margin:0 40px var(--sp-2) 0;font-size:1.35rem;font-weight:700}
.dialog .close{
  position:absolute;right:16px;top:16px;
  border:0;background:#F3F4F6;border-radius:50%;
  width:32px;height:32px;font-size:1.1rem;line-height:1;color:var(--text-secondary);
}
.dialog .close:hover{background:var(--border)}
.productline{background:var(--green-light);color:var(--green-primary);border-radius:var(--radius-sm);padding:13px;font-weight:600;font-size:.9rem}
.checks{display:grid;gap:var(--sp-3);margin:var(--sp-5) 0}
.checks > div{border-bottom:1px solid var(--border);padding-bottom:var(--sp-3)}
.checks b{display:block;font-size:.92rem;margin-bottom:2px}
.checks span{color:var(--text-secondary);font-size:.88rem}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--green-dark);color:rgba(255,255,255,.6);padding:var(--sp-10) 0 var(--sp-6)}
.footcols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--sp-8);margin-bottom:var(--sp-8)}
.footer h4{color:rgba(255,255,255,.7);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 var(--sp-3)}
.footer a{display:block;color:rgba(255,255,255,.6);font-size:14px;padding:4px 0;transition:.15s}
.footer a:hover{color:#fff}
.footer .tagline{font-size:14px;line-height:1.6;margin-top:var(--sp-3)}
.footbottom{border-top:1px solid rgba(255,255,255,.1);padding-top:var(--sp-5);text-align:center;font-size:12px;color:rgba(255,255,255,.4)}

.brand{display:inline-flex;align-items:center;gap:var(--sp-3)}
.brand-mark{background:#fff;border-radius:var(--radius-sm);padding:6px 10px;display:flex;align-items:center}
.brand-mark img{height:24px;width:auto;display:block}
.brand-text{color:#fff;font-weight:800;font-size:1.05rem}
/* .footer a sets display:block and outranks .brand — restate it here. */
.footer .brand{display:inline-flex;padding:0}
.footer .brand:hover .brand-text{color:#fff}

/* ============================================================
   WHATSAPP FAB
   ============================================================ */
.wa{
  position:fixed;right:20px;bottom:20px;z-index:40;
  background:var(--green-mid);color:#fff;
  border-radius:var(--radius-pill);padding:13px 18px;
  font-weight:700;font-size:.9rem;
  box-shadow:0 8px 24px rgba(7,64,53,.35);
  display:inline-flex;align-items:center;gap:var(--sp-2);
}
.wa:hover{background:var(--green-primary);color:#fff}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:var(--sp-8)}
  .grid-3,.grid-4,.steps,.steps.four,.plans,.trustgrid,.offers,.offers.two{grid-template-columns:repeat(2,1fr)}
  .quickbox{grid-template-columns:1fr 1fr}
  .quickbox .btn{grid-column:span 2}
  /* Quatre champs = deux lignes pleines, le bouton sur la troisième. */
  .footcols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hero{padding:var(--sp-10) 0 var(--sp-10)}
  .hero.compact{padding:var(--sp-10) 0 76px}
  .section{padding:var(--sp-12) 0}
  .grid-3,.grid-4,.steps,.steps.four,.plans,.trustgrid,.offers,.offers.two,.faq,.footcols,.quickbox{grid-template-columns:1fr}
  .quickbox .btn{grid-column:auto}
  .progress{padding:var(--sp-3)}
  .prog{font-size:11px;gap:6px}
  .prog .dot{width:22px;height:22px;font-size:.7rem}
  .panel{padding:var(--sp-6) var(--sp-4)}
  .funnel{margin-top:-44px}
  .actions{flex-wrap:wrap}
  .actions .btn{width:100%}
  .actions .back{margin-right:0;order:2}
  .wa{right:12px;bottom:12px;font-size:.85rem;padding:11px 15px}
}