: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;
    --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;
    display:flex;
    flex-direction:column;
  }
  h1,h2,h3{font-family:var(--ff-display); margin:0;}
  p{margin:0;}
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit;}

  /* ---------- 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);}

  /* ---------- 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);}
  .btn-solid:disabled{opacity:.55; cursor:not-allowed; box-shadow:none;}
  .btn-block{width:100%; padding:11px 18px; font-size:.88rem;}

  /* ---------- 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;}

  .field-stack{display:flex; flex-direction:column; gap:14px; margin-top:clamp(16px,2.4vh,24px);}
  .field{display:flex; flex-direction:column; gap:5px;}
  .field label{font-size:.76rem; font-weight:600; color:#33403c;}
  .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{
    width:100%; border:none; background:transparent; outline:none;
    padding:11px 12px; font-size:.85rem; color:var(--ink); font-family:inherit;
    appearance:none;
  }
  .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;}

  .remember-row{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:14px; font-size:.78rem; color:#33403c;
  }
  .remember-row label{display:flex; align-items:center; gap:7px; cursor:pointer; user-select:none;}
  .remember-row input[type="checkbox"]{
    width:15px; height:15px; accent-color:var(--green-600); cursor:pointer;
  }
  .remember-row .forgot{color:var(--green-700); font-weight:700;}
  .remember-row .forgot:hover{text-decoration:underline;}

  .form-error{
    display:none; align-items:center; gap:8px;
    margin-top:14px; font-size:.76rem; color:#c0492f;
    padding:9px 12px; background:#fdf1ee; border:1px solid #f4d6cc; border-radius:var(--radius-sm);
  }
  .form-error.show{display:flex;}

  .submit-row{margin-top:18px;}

  /* ---------- Lien inscription (bas de la carte) ---------- */
  .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;}

  /* ---------- Succès ---------- */
  .success-pane{display:none; text-align:center; padding:14px 6px 6px; }
  .success-pane.active{display:block; animation:stepIn .4s ease;}
  @keyframes stepIn{
    from{opacity:0; transform:translateX(14px);}
    to{opacity:1; transform:translateX(0);}
  }
  .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 ----------
     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
     provoquait un scroll interne minuscule et coupait le
     formulaire sur mobile/tablette. On désactive ces
     contraintes dès que les panneaux sont empilés, pour que
     la page grandisse naturellement avec son contenu et que
     tout le formulaire reste accessible en scrollant,
     quel que soit l'appareil.
     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){
    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;}
  }

  /* ----- Mobile ----- */
  @media (max-width: 560px){
    main.wrap{padding:60px 14px 20px;}
    .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{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;}
    .btn-block{padding:10px 16px; font-size:.84rem;}
    #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;}
  }

  /* ----- 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;}
    .field-stack{margin-top:12px; gap:10px;}
  }

  /* ----- Écrans tactiles : agrandit un peu les zones cliquables ----- */
  @media (hover: none) and (pointer: coarse){
    .remember-row input[type="checkbox"]{width:17px; height:17px;}
  }