/* ================================================================
   Visa Madagascar — feuille de style commune
   Design inspiré d'acte-de-mariage.org, couleurs de Madagascar
   Rouge #E4002B · Vert #007A3D · Blanc
   ================================================================ */
:root{
  --red:#E4002B;--red-dark:#B4001F;--red-soft:#FCE7EA;
  --green:#007A3D;--green-dark:#00602F;--green-soft:#E4F3EA;
  --ink:#1b1d29;--ink-soft:#4b4f5e;--muted:#6b7280;--line:#e8e9ee;
  --bg:#ffffff;--bg-alt:#f7f8fb;--bg-warm:#fbf6ef;--white:#ffffff;
  --radius:18px;--radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(20,22,40,.06),0 1px 3px rgba(20,22,40,.05);
  --shadow:0 10px 30px -12px rgba(20,22,40,.18);
  --shadow-lg:0 24px 60px -24px rgba(20,22,40,.28);
  --max:1160px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
/* font-size explicite : sur les pages hybrides (demande-en-ligne, rapyd-checkout,
   checkout-error, payment-success) qui chargent aussi css/bootstrap.css, celui-ci
   met html{font-size:62.5%} — sans ce reset, tout ce qui est dimensionné en rem
   dans cette feuille (logo du header, bouton "Faire ma demande", etc.) hériterait
   de cette base réduite et apparaîtrait trop petit. */
html{scroll-behavior:smooth;font-size:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;font-size:16.5px}
/* Pages a contenu court (payment-success.php, application-relance-success.php) :
   sans ca, le contenu reste colle en haut du <main> avec un grand vide blanc avant
   le footer sur les ecrans hauts. Centre le contenu dans l'espace vraiment
   disponible entre header et footer plutot que de le laisser en haut. Scope via
   cette classe (pas de regle globale sur main) pour ne pas affecter les pages a
   contenu long (accueil, FAQ...) ou un centrage vertical casserait la mise en page. */
body.center-main{display:flex;flex-direction:column;min-height:100vh}
body.center-main main{flex:1 0 auto;display:flex;align-items:center;justify-content:center}
body.center-main main>.container{width:100%}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:1.2;color:var(--ink);margin:0 0 .5em}
h1{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.015em}
h3{font-size:1.18rem;font-weight:700}
/* Même rendu visuel qu'un h3, sans être un titre de section — pour les
   libellés de carte/widget qui apparaissent avant le premier vrai h2 de
   la page (évite de casser l'ordre des titres, cf. audit accessibilité). */
.text-h3{font-size:1.18rem;font-weight:700;line-height:1.2;color:var(--ink);margin:0 0 .5em}
.checker .text-h3{font-size:1.35rem;margin-bottom:.2em}
p{margin:0 0 1rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.section{padding:76px 0}
.section--tight{padding:52px 0}
.bg-alt{background:var(--bg-alt)}
.bg-warm{background:var(--bg-warm)}
.center{text-align:center}
.lead{font-size:1.12rem;color:var(--ink-soft);max-width:720px}
.center .lead{margin-left:auto;margin-right:auto}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green);background:var(--green-soft);padding:6px 14px;border-radius:999px;margin-bottom:18px}
.eyebrow--red{color:var(--red-dark);background:var(--red-soft)}
.flagbar{height:5px;display:flex}
.flagbar i{flex:1}
.flagbar i:nth-child(1){background:#fff;border-bottom:1px solid var(--line)}
.flagbar i:nth-child(2){background:var(--red)}
.flagbar i:nth-child(3){background:var(--green)}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:1rem;padding:14px 26px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .12s ease,box-shadow .18s ease,background .18s ease}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 8px 22px -8px rgba(228,0,43,.6)}
.btn-red:hover{background:var(--red-dark)}
.btn-green{background:var(--green);color:#fff;box-shadow:0 8px 22px -8px rgba(0,122,61,.55)}
.btn-green:hover{background:var(--green-dark)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-lg{padding:16px 32px;font-size:1.06rem}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:72px;position:relative}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.12rem;letter-spacing:-.01em}
.brand .dot{width:30px;height:30px;border-radius:8px;background:linear-gradient(180deg,#fff 0 33%,var(--red) 33% 66%,var(--green) 66% 100%);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.brand span b{color:var(--red)}
.nav-links{display:flex;gap:22px;margin-left:14px;flex-wrap:wrap}
.nav-links a{font-size:.93rem;font-weight:600;color:var(--ink-soft);padding:6px 2px;border-bottom:2px solid transparent}
.nav-links a:hover,.nav-links a.active{color:var(--ink);border-color:var(--red)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.2s}
.hero{background:radial-gradient(1200px 500px at 82% -10%,var(--green-soft),transparent 60%),radial-gradient(900px 460px at 8% 110%,var(--red-soft),transparent 55%),var(--bg)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center;padding:72px 0 64px}
.hero h1 span{color:var(--red)}
.hero .note{font-size:.9rem;color:var(--muted);margin-top:14px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero-illus{background:linear-gradient(160deg,#fff,var(--bg-alt));border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lg);padding:30px;position:relative;overflow:hidden}
.hero-illus .passport{background:var(--green);color:#fff;border-radius:16px;padding:22px 22px 26px;position:relative}
.hero-illus .passport small{letter-spacing:.14em;font-size:.66rem;text-transform:uppercase}
.hero-illus .passport .passport-title{color:#fff;margin:.3em 0 1.4em;font-size:1.15rem;font-weight:700}
.hero-illus .passport .seal{position:absolute;right:18px;bottom:18px;width:58px;height:58px;border-radius:50%;border:2px dashed rgba(255,255,255,.6);display:grid;place-items:center;font-size:1.5rem}
.hero-illus .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chip{font-size:.78rem;font-weight:600;padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink-soft)}
.chip b{color:var(--green)}
.trust{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;padding:22px 0}
.trust .item{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:600;color:var(--ink-soft)}
.trust .item svg{color:var(--green)}
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card .num{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;font-weight:800;background:var(--red-soft);color:var(--red-dark);margin-bottom:14px}
.card.green .num{background:var(--green-soft);color:var(--green)}
.card .price{font-size:1.7rem;font-weight:800;color:var(--ink);margin:.2em 0}
.card .price small{font-size:.85rem;font-weight:600;color:var(--muted)}
.card ul{margin:.6em 0 0;padding-left:1.1em;color:var(--ink-soft);font-size:.95rem}
.card ul li{margin:.35em 0}
.featlist{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.featlist li{display:flex;gap:14px;align-items:flex-start}
.featlist .ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-weight:800}
.featlist li b{display:block;color:var(--ink)}
.featlist li span{color:var(--ink-soft);font-size:.96rem}
.checker{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:30px;max-width:760px;margin:0 auto}
.checker h3{font-size:1.35rem;margin-bottom:.2em}
.checker .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.checker select,.checker input{flex:1;min-width:220px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;font-size:1rem;font-family:inherit;background:#fff;color:var(--ink)}
.checker select:focus,.checker input:focus{outline:none;border-color:var(--green)}
.result{margin-top:22px;border-radius:16px;padding:22px;display:none;border:1.5px solid}
.result.show{display:block;animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.result.ok{background:var(--green-soft);border-color:#b7e0c6}
.result.warn{background:#fff7e6;border-color:#f2d99a}
.result .tag{display:inline-block;font-weight:800;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:10px}
.result.ok .tag{background:var(--green);color:#fff}
.result.warn .tag{background:#c98a00;color:#fff}
.result h4{font-size:1.25rem;margin:.1em 0 .4em}
.result p{margin:.2em 0 .6em;color:var(--ink-soft)}
.result .cta{margin-top:8px}
.steps{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:24px;width:36px;height:36px;border-radius:10px;background:var(--red);color:#fff;font-weight:800;display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.step h3{margin-top:8px}
.faq{max-width:820px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--red);transition:.2s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 20px;margin:0;color:var(--ink-soft)}
.pricing{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;text-align:center;position:relative}
.tier.pop{border-color:var(--green);box-shadow:var(--shadow)}
.tier .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:999px}
.tier h3{font-size:1.05rem;color:var(--ink-soft)}
.tier .amt{font-size:2rem;font-weight:800;margin:.1em 0}
.tier .amt small{font-size:.8rem;color:var(--muted);font-weight:600}
.tier .sub{font-size:.85rem;color:var(--muted)}
.cta-banner{background:linear-gradient(120deg,var(--green),var(--green-dark));color:#fff;border-radius:24px;padding:48px;text-align:center;box-shadow:var(--shadow-lg)}
.cta-banner h2{color:#fff}
.cta-banner p{color:rgba(255,255,255,.9);max-width:620px;margin:0 auto 22px}
.cta-banner .btn-red{box-shadow:0 10px 26px -8px rgba(0,0,0,.4)}
.notice{background:var(--bg-warm);border:1px solid #efe4d2;border-radius:var(--radius);padding:28px}
.notice h2{font-size:1.4rem}
.notice p{color:var(--ink-soft)}
.notice a{color:var(--red);font-weight:600;text-decoration:underline}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{border-collapse:collapse;width:100%;min-width:520px}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:.96rem}
th{background:var(--bg-alt);font-weight:700;color:var(--ink)}
tr:last-child td{border-bottom:0}
/* Le table{width:100%;min-width:520px} ci-dessus vise les tableaux de contenu (tarifs...),
   mais s'appliquait aussi au mini-calendrier du datepicker jQuery UI (application_form.php /
   application-relance.php), l'elargissant fortement au lieu de sa taille compacte normale. */
.ui-datepicker table{min-width:0}
.ui-datepicker td{padding:0}
.pill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:.8rem;font-weight:700}
.pill.g{background:var(--green-soft);color:var(--green-dark)}
.pill.r{background:var(--red-soft);color:var(--red-dark)}
.site-footer{background:#12131b;color:#c7cad6;padding:56px 0 28px;margin-top:8px}
/* !important : sur les pages hybrides, css/application_form.css force un h3
   noir/gras/32px (pour le formulaire lui-même) qui écraserait sinon ce titre de
   footer malgré la sélectivité de `.site-footer h3` (une règle !important gagne
   toujours face à une règle non-!important, quelle que soit la spécificité). */
.site-footer h3{color:#fff!important;font-size:.95rem!important;margin-bottom:14px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px}
.site-footer a{color:#aab0c0;font-size:.92rem;display:block;padding:4px 0}
.site-footer a:hover{color:#fff}
.foot-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:1.1rem;margin-bottom:12px}
.foot-brand .dot{width:28px;height:28px;border-radius:8px;background:linear-gradient(180deg,#fff 0 33%,var(--red) 33% 66%,var(--green) 66% 100%)}
.legal{border-top:1px solid #262838;margin-top:34px;padding-top:22px;font-size:.82rem;color:#8a90a2}
.legal a{display:inline;color:#aab0c0;text-decoration:underline}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.stack>*+*{margin-top:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media (max-width:960px){
  .hero-grid,.split{grid-template-columns:1fr;gap:34px}
  .grid-3,.grid-4,.steps,.pricing{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav-links{display:none}
  .nav-toggle{display:block;margin-left:auto}
  .nav.open .nav-links{display:flex;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;padding:16px 24px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);margin:0}
  .grid-2,.grid-3,.grid-4,.steps,.pricing{grid-template-columns:1fr}
  .cta-banner{padding:34px 22px}
  .section{padding:54px 0}
}
/* Header : logo à gauche, CTA + sélecteur de langue groupés à droite */
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.nav-actions{display:flex;align-items:center;gap:18px;margin-left:auto}
.nav-cta-btn{padding:13px 30px;font-size:1.05rem;font-weight:800;box-shadow:0 10px 26px -8px rgba(228,0,43,.6)}
.langsel{display:flex;gap:8px;align-items:center;padding-left:16px;border-left:1px solid var(--line)}
.langsel .flag{display:block;width:28px;height:20px;border-radius:4px;overflow:hidden;border:1px solid var(--line);opacity:.55;transition:opacity .15s,box-shadow .15s;box-shadow:var(--shadow-sm)}
.langsel .flag svg{width:100%;height:100%;display:block}
.langsel .flag:hover{opacity:1}
.langsel .flag.active{opacity:1;box-shadow:0 0 0 2px var(--red)}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .nav{min-height:58px;flex-wrap:wrap;row-gap:8px;padding:8px 0}
  .brand span{font-size:1rem}
  .nav-actions{gap:8px}
  .nav-cta-btn{padding:9px 16px;font-size:.85rem}
  .langsel{gap:5px;padding-left:8px}
  .langsel .flag{width:22px;height:16px}
  .hero-grid{padding-top:36px;padding-bottom:32px;gap:28px}
  .hero-grid>div:first-child{text-align:center}
  .hero-cta{justify-content:center}
  .hero-illus{padding:22px}
}
@media (max-width:420px){
  /* Espace restreint : garder le CTA et le sélecteur de langue visibles
     (priorité produit), réduire le logo à son icône seule. */
  .brand span:not(.dot){display:none}
}
@media (max-width:380px){
  .nav-cta-btn{padding:8px 13px;font-size:.78rem}
  .langsel{gap:4px;padding-left:6px}
  .langsel .flag{width:20px;height:14px}
}