/* =========================
       Variables & Base
    ========================== */
    :root{
      --bg:#0B2643;
      --text:#ffffff;
      --muted:#cbd5e1;
      --card:#ffffff;
      --container:1100px;
      --radius:14px;
      --shadow:0 10px 30px rgba(0,0,0,.25);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    html,body{margin:0}
    body{
      font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.5;
    }

    /* =========================
       Layout (page & container)
    ========================== */
    .page{
      min-height:100dvh;             /* footer collé en bas */
      display:flex; flex-direction:column;
    }
    .container{
      width:100%;
      max-width:var(--container);
      margin-inline:auto;
      padding:24px;
    }
    main{flex:1}

    /* =========================
       Header (logo à droite)
    ========================== */
    header{
      position:relative;
    }
    .brand{
      display:flex;
      justify-content:center;      
      align-items:center;
    }
    .brand img{
      height:48px;
      width:auto;
      object-fit:contain;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.2));
    }

    /* =========================
       Wording (H1 + sous-titre)
    ========================== */
    .hero{
      text-align:center;
      margin:32px 0 20px;
    }
    h1{
      margin:0 0 10px;
      font-size:clamp(28px, 4vw, 44px);
      letter-spacing:.2px;
    }
    .subtitle{
      margin:0 auto;
      max-width:800px;
      color:var(--muted);
      font-size:clamp(16px, 1.8vw, 18px);
    }

    /* =========================
       Formulaire (centré)
    ========================== */
    .form-wrap{
      display:grid;
      place-items:center;            /* centre le bloc */
      margin:26px auto 32px;
      width:100%;
    }
    .form-card{
      width:min(820px, 100%);
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:0;                     /* l’iframe gère sa propre hauteur */
      overflow:hidden;               /* évite les débordements */
    }

    /* conteneur d’auto-hauteur (sera mis à jour par le script du formulaire) */
    #edi_scroll_iframe{
      width:100%;
      overflow:hidden;
      /* Hauteur de secours avant que le script ne la corrige automatiquement */
      min-height:420px;
      background:transparent;
    }

    /* =========================
       Footer
    ========================== */
    footer{
      border-top:1px solid rgba(255,255,255,.12);
      color:var(--muted);
      font-size:14px;
      text-align: center;
      padding: 10px
    }
    footer .container{
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding-top:18px; padding-bottom:22px;
    }

    /* =========================
       Responsive petits écrans
    ========================== */
    @media (max-width:520px){
      .brand img{height:40px}
      .hero{margin:24px 0 16px}
      #edi_scroll_iframe{min-height:360px}
    }

    #edi_scroll_iframe {
    padding: 15px 20px; !important
}