:root{
    --green-950:#062820;
    --green-900:#0a3a2c;
    --green-800:#0d4a38;
    --green-700:#0f5c45;
    --green-600:#12805c;
    --green-500:#159a6e;
    --green-400:#2fbf8a;
    --green-300:#6ee7b3;
    --mint-50:#f2faf6;
    --cream:#fbfbf8;
    --ink:#0d1e19;
    --muted:#5b6b66;
    --line:#e3e9e5;
    --orange:#ff6600;
    --mtn:#ffcc00;
    --radius-lg:20px;
    --radius-md:14px;
    --radius-sm:10px;
    --shadow-card: 0 20px 50px -20px rgba(6,40,32,.25);
    --ff-display:'Sora', sans-serif;
    --ff-body:'Inter', sans-serif;
  }

  *{box-sizing:border-box;}
  html, body{height:100%;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--ff-body);
    color:var(--ink);
    background:
      radial-gradient(1200px 600px at 85% -10%, rgba(21,154,110,.08), transparent 60%),
      var(--cream);
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
    overflow-x:hidden;
    display:flex;
    flex-direction:column;
  }

  /* ---------- Bulle retour au site ---------- */
  .back-bubble{
    position:fixed; top:20px; left:20px; z-index:100;
    width:42px; height:42px; border-radius:999px;
    background:#fff; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 20px -8px rgba(6,40,32,.35);
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s;
  }
  .back-bubble:hover{
    transform:translateX(-2px);
    border-color:var(--green-500);
    box-shadow:0 10px 24px -8px rgba(6,40,32,.45);
  }
  .back-bubble svg{color:var(--green-700);}

  /* ---------- Emplacement logo (haut de page) ---------- */
  .top-logo{
    flex:0 0 auto;
    display:flex; align-items:center; justify-content:center; gap:9px;
    padding:clamp(14px,2.6vh,26px) 20px clamp(6px,1vh,10px);
  }
  .top-logo .mark{
    width:32px; height:32px; border-radius:9px;
    background:linear-gradient(155deg, var(--green-500), var(--green-800));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:800; font-size:.95rem;
    box-shadow:0 6px 14px -6px rgba(15,92,69,.6);
  }
  .top-logo span.name{font-family:var(--ff-display); font-weight:700; font-size:1.05rem; color:var(--ink);}

  /* ---------- Lien connexion (bas de la carte formulaire) ---------- */
  .card-login-link{
    margin-top:auto;
    padding-top:clamp(10px,1.8vh,18px);
    text-align:center;
    font-size:.82rem;
    color:var(--muted);
    border-top:1px solid var(--line);
  }
  .card-login-link a{color:var(--green-700); font-weight:700;}
  .card-login-link a:hover{text-decoration:underline;}
  h1,h2,h3{font-family:var(--ff-display); margin:0;}
  p{margin:0;}
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit;}

  /* ---------- Boutons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:10px 18px; border-radius:999px; font-weight:600; font-size:.9rem;
    border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn:active{transform:scale(.97);}
  .btn-solid{background:var(--green-600); color:#fff; box-shadow:0 10px 20px -8px rgba(15,92,69,.55);}
  .btn-solid:hover{background:var(--green-700); box-shadow:0 12px 24px -8px rgba(15,92,69,.65);}

  /* ---------- Layout ---------- */
  main.wrap{
    flex:1 1 auto; min-height:0;
    width:100%; max-width:900px; margin:0 auto;
    padding:0 clamp(20px,5vw,32px) clamp(16px,3vh,32px);
    display:flex; align-items:center; justify-content:center;
  }
  .panel-grid{
    width:100%; max-height:100%;
    display:grid; grid-template-columns:0.72fr 1fr;
    gap:0; align-items:stretch;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
    overflow:hidden;
  }

  /* ---------- Left / hero panel ---------- */
  .hero-panel{
    position:relative; overflow:hidden;
    background:
      radial-gradient(500px 300px at 100% 0%, rgba(110,231,179,.18), transparent 60%),
      linear-gradient(165deg, var(--green-900) 0%, var(--green-950) 55%, #041c16 100%);
    color:#fff;
    padding:clamp(20px,2.4vh,32px) clamp(20px,2.6vw,30px);
    display:flex; flex-direction:column; gap:clamp(10px,1.6vh,18px);
    height:100%;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    align-self:flex-start;
    padding:5px 12px; border-radius:999px;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
    font-size:.72rem; font-weight:600; letter-spacing:.02em; color:var(--green-300);
  }
  .hero-panel h1{
    font-size:clamp(1.35rem,2.4vw,1.7rem);
    line-height:1.16; font-weight:700; letter-spacing:-.01em;
  }
  .hero-panel h1 .accent{color:var(--green-300);}
  .hero-desc{color:rgba(255,255,255,.72); font-size:.84rem; line-height:1.5; max-width:34ch;}

  .feature-list{display:flex; flex-direction:column; gap:8px; margin-top:2px;}
  .feature-list li{list-style:none; display:flex; align-items:center; gap:9px; font-size:.8rem; color:rgba(255,255,255,.88);}
  .feature-list .tick{
    width:17px; height:17px; border-radius:999px; flex:0 0 auto;
    background:rgba(110,231,179,.16); border:1px solid rgba(110,231,179,.4);
    display:flex; align-items:center; justify-content:center;
  }
  .feature-list svg{width:9px; height:9px;}

  /* signature illustration */
  .illustration{
    margin-top:auto; position:relative; height:clamp(60px,10vh,130px);
  }
  .illustration svg{width:100%; height:100%; display:block; overflow:visible;}
  .float-slow{animation:floaty 6s ease-in-out infinite;}
  .float-slow.d2{animation-delay:1.1s;}
  .float-slow.d3{animation-delay:2.2s;}
  @keyframes floaty{
    0%,100%{transform:translateY(0px);}
    50%{transform:translateY(-10px);}
  }
  .social-proof{
    display:flex; align-items:center; gap:10px;
    padding-top:12px; border-top:1px solid rgba(255,255,255,.12);
    font-size:.72rem; color:rgba(255,255,255,.65);
  }
  .avatar-stack{display:flex;}
  .avatar-stack span{
    width:20px; height:20px; border-radius:999px; margin-left:-7px;
    border:2px solid var(--green-900);
    background:linear-gradient(135deg,var(--green-400),var(--green-600));
  }
  .avatar-stack span:first-child{margin-left:0;}

  /* ---------- Right / form card ---------- */
  .card{
    background:#fff;
    padding:clamp(16px,2.2vh,30px) clamp(20px,2.6vw,32px);
    display:flex; flex-direction:column;
    height:100%; overflow-y:auto;
  }
  .card-brand{font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--green-600);}
  .card h2{font-size:1.25rem; margin-top:4px;}
  .card-sub{color:var(--muted); font-size:.82rem; margin-top:4px; line-height:1.4;}

  .progress-row{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:clamp(10px,1.6vh,16px); font-size:.76rem; font-weight:600; color:var(--muted);
  }
  .progress-track{
    margin-top:6px; height:6px; border-radius:999px; background:#eef2f0; overflow:hidden;
  }
  .progress-fill{
    height:100%; border-radius:999px; width:25%;
    background:linear-gradient(90deg, var(--green-500), var(--green-400));
    transition:width .45s cubic-bezier(.65,0,.35,1);
  }

  .step-panes{position:relative; margin-top:clamp(14px,2.4vh,26px);}
  .step-pane{
    display:none;
    animation:stepIn .38s cubic-bezier(.2,.7,.3,1);
  }
  .step-pane.active{display:block;}
  @keyframes stepIn{
    from{opacity:0; transform:translateX(14px);}
    to{opacity:1; transform:translateX(0);}
  }

  .step-title{font-size:.92rem; font-weight:700;}
  .step-caption{color:var(--muted); font-size:.78rem; margin-top:3px; line-height:1.45;}

  .field-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:clamp(10px,1.6vh,16px);}
  .field{display:flex; flex-direction:column; gap:5px;}
  .field label{font-size:.76rem; font-weight:600; color:#33403c;}
  .field .optional{font-weight:500; color:var(--muted); font-size:.7rem;}
  .input-wrap{
    position:relative; display:flex; align-items:center;
    border:1.5px solid var(--line); border-radius:var(--radius-sm);
    background:var(--mint-50);
    transition:border-color .15s, box-shadow .15s, background .15s;
  }
  .input-wrap:focus-within{
    border-color:var(--green-500); background:#fff;
    box-shadow:0 0 0 4px rgba(21,154,110,.12);
  }
  .input-wrap.valid{border-color:var(--green-400);}
  .input-wrap.error{border-color:#e0725a;}
  .input-wrap svg.icon{flex:0 0 auto; margin-left:11px; color:#8ba39a;}
  .input-wrap input, .input-wrap select{
    width:100%; border:none; background:transparent; outline:none;
    padding:9px 12px; font-size:.85rem; color:var(--ink); font-family:inherit;
    appearance:none;
  }
  .input-wrap select{padding-right:34px;}
  .select-caret{position:absolute; right:14px; pointer-events:none; color:#8ba39a;}
  .toggle-eye{background:none; border:none; cursor:pointer; padding:0 11px; color:#8ba39a; display:flex;}
  .field-msg{font-size:.68rem; color:var(--muted); min-height:12px;}
  .field-msg.error{color:#c0492f;}

  .hint-box{
    margin-top:clamp(10px,1.6vh,16px); padding:10px 12px; border-radius:var(--radius-sm);
    background:var(--mint-50); border:1px solid #dcefe6;
    font-size:.74rem; color:#3d5951; line-height:1.45;
    display:flex; gap:8px; align-items:flex-start;
  }
  .hint-box svg{flex:0 0 auto; margin-top:2px; color:var(--green-600);}

  /* payment step */
  .pay-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px;}
  .pay-card{
    position:relative; text-align:left; cursor:pointer;
    border:1.5px solid var(--line); border-radius:var(--radius-md);
    padding:12px; background:#fff;
    display:flex; flex-direction:column; gap:8px;
    transition:border-color .15s, box-shadow .15s, transform .15s;
  }
  .pay-card:hover{transform:translateY(-2px); box-shadow:0 10px 22px -12px rgba(6,40,32,.25);}
  .pay-card.selected{border-color:var(--green-500); box-shadow:0 0 0 4px rgba(21,154,110,.12);}
  .pay-card-top{display:flex; align-items:center; justify-content:space-between;}
  .pay-badge{
    display:inline-flex; align-items:center; gap:7px;
    padding:6px 10px; border-radius:10px; font-weight:800; font-size:.76rem; letter-spacing:-.01em;
  }
  .pay-badge.orange{background:#fff1e6; color:#c74e00;}
  .pay-badge.mtn{background:#fff9db; color:#7a6400;}
  .pay-badge .dot{width:8px; height:8px; border-radius:999px;}
  .pay-badge.orange .dot{background:var(--orange);}
  .pay-badge.mtn .dot{background:#b89500;}
  .radio-dot{
    width:17px; height:17px; border-radius:999px; border:2px solid #cbd6d1; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center; transition:border-color .15s;
  }
  .radio-dot::after{content:""; width:9px; height:9px; border-radius:999px; background:var(--green-500); transform:scale(0); transition:transform .15s;}
  .pay-card.selected .radio-dot{border-color:var(--green-500);}
  .pay-card.selected .radio-dot::after{transform:scale(1);}
  .pay-card p{font-size:.7rem; color:var(--muted); line-height:1.4;}
  .pay-error{
    display:none; align-items:center; gap:8px;
    margin-top:10px; font-size:.76rem; color:#c0492f;
    padding:8px 11px; background:#fdf1ee; border:1px solid #f4d6cc; border-radius:var(--radius-sm);
  }
  .pay-error.show{display:flex;}

  .step-actions{display:flex; justify-content:space-between; align-items:center; margin-top:clamp(12px,2vh,20px);}
  .btn-back{color:var(--muted); background:none; border:none; font-size:.8rem; font-weight:600; display:flex; align-items:center; gap:6px; cursor:pointer; padding:6px 4px;}
  .btn-back:hover{color:var(--ink);}
  .btn-back:disabled{opacity:0; pointer-events:none;}
  .btn-next{padding:9px 18px; font-size:.85rem;}
  .btn-next:disabled{opacity:.5; cursor:not-allowed; box-shadow:none;}
  .btn-next .arrow{transition:transform .15s;}
  .btn-next:not(:disabled):hover .arrow{transform:translateX(3px);}

  /* success */
  .success-pane{display:none; text-align:center; padding:14px 6px 6px; }
  .success-pane.active{display:block; animation:stepIn .4s ease;}
  .success-check{
    width:58px; height:58px; margin:0 auto 16px; border-radius:999px;
    background:radial-gradient(circle at 30% 30%, var(--green-300), var(--green-600));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 30px -12px rgba(21,154,110,.55);
  }
  .success-pane h2{font-size:1.15rem;}
  .success-pane p{color:var(--muted); font-size:.8rem; margin-top:8px; line-height:1.5; max-width:34ch; margin-inline:auto;}
  .success-pane .btn{margin-top:16px;}

  /* ---------- 14. logo ---------- */
  #nav-logo{
              width: 75px;
              height: 64px;
  }

  /* =========================================================
     ---------- Responsive ----------
     Section enrichie : plusieurs paliers pour couvrir
     desktop, tablette, mobile large et petit mobile,
     ainsi que le mode paysage sur petit écran.
     Aucune règle ci-dessus n'a été modifiée : uniquement
     ajout/ajustement des media queries.
     ========================================================= */

  /* ----- Grand écran / petit desktop : resserre un peu le ratio des panneaux ----- */
  @media (max-width: 1100px){
    .panel-grid{grid-template-columns:0.85fr 1fr;}
  }

  /* ----- Tablette : on empile les deux panneaux ----- */
  @media (max-width: 980px){
    /* En dessous de 980px les deux panneaux ne peuvent plus tenir côte à côte
       sur une seule hauteur d'écran. Le design desktop enferme la carte dans
       une hauteur de 100% du viewport (html,body{height:100%} + .panel-grid
       {max-height:100%} + .card{overflow-y:auto}), ce qui provoque un scroll
       interne minuscule et coupe le formulaire. On désactive donc toutes ces
       contraintes de hauteur ici pour laisser la page grandir naturellement
       avec son contenu et scroller normalement, afin que rien ne soit jamais
       rogné, quel que soit l'appareil. */
    html, body{height:auto; min-height:100%;}
    body{overflow:visible; overflow-x:hidden;}
    main.wrap{
      height:auto; padding:64px 20px 24px;
      align-items:flex-start; justify-content:flex-start;
    }
    .panel-grid{grid-template-columns:1fr; height:auto; max-height:none;}
    .hero-panel{height:auto; padding:28px;}
    .illustration{height:150px;}
    .card{height:auto; max-height:none; overflow-y:visible;}
  }

  /* ----- Tablette portrait / grand mobile ----- */
  @media (max-width: 768px){
    main.wrap{padding:60px 16px 22px;}
    .hero-panel{padding:24px;}
    .hero-desc{max-width:none;}
    .card{padding:20px;}
    .field-grid, .pay-grid{gap:10px;}
  }

  /* ----- Mobile : formulaire en une colonne, éléments réduits ----- */
  @media (max-width: 560px){
    main.wrap{padding:60px 14px 20px;}
    .field-grid, .pay-grid{grid-template-columns:1fr;}
    .card{padding:22px;}
    .hero-desc{max-width:none;}
    .back-bubble{top:14px; left:14px; width:38px; height:38px;}
    .top-logo{padding:12px 16px 6px;}
    .illustration{height:120px;}
    /* Empêche le zoom automatique iOS Safari sur les champs (police < 16px) */
    .input-wrap input, .input-wrap select{font-size:16px;}
  }

  /* ----- Petit mobile (ex : iPhone SE, ~375px et moins) ----- */
  @media (max-width: 400px){
    main.wrap{padding:56px 10px 16px;}
    .card{padding:16px;}
    .hero-panel{padding:18px;}
    .hero-panel h1{font-size:1.2rem;}
    .hero-desc{font-size:.8rem;}
    .feature-list li{font-size:.75rem;}
    .illustration{display:none;}
    .step-title{font-size:.86rem;}
    .step-caption{font-size:.74rem;}
    .btn-next{padding:9px 14px; font-size:.82rem;}
    #nav-logo{width:56px; height:48px;}
  }

  /* ----- Très petit mobile (≤ 340px) ----- */
  @media (max-width: 340px){
    .card-brand{font-size:.64rem;}
    .card h2{font-size:1.08rem;}
    .card-sub{font-size:.76rem;}
    .pay-card{padding:10px;}
    .pay-badge{font-size:.7rem; padding:5px 8px;}
  }

  /* ----- Mode paysage sur petit écran (hauteur réduite) ----- */
  @media (max-height: 480px) and (orientation: landscape){
    html, body{height:auto; min-height:100%;}
    body{overflow:visible; overflow-x:hidden;}
    main.wrap{height:auto; padding:56px 16px 16px; align-items:flex-start; justify-content:flex-start;}
    .panel-grid{grid-template-columns:1fr 1fr; height:auto; max-height:none;}
    .hero-panel{padding:16px;}
    .illustration, .social-proof{display:none;}
    .feature-list{gap:5px;}
    .card{height:auto; max-height:none; overflow-y:visible; padding:16px;}
    .step-panes{margin-top:10px;}
  }

  /* ----- Écrans tactiles : agrandit un peu les zones cliquables ----- */
  @media (hover: none) and (pointer: coarse){
    .pay-card{padding:14px;}
    .radio-dot{width:19px; height:19px;}
    .btn-back{padding:8px 6px;}
  }