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

 /* Section principale */
        .comment-ca-marche {
            padding: 60px 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .comment-ca-marche__title {
            text-align: center;
            font-size: 28px;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 50px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .comment-ca-marche__container {
            display: flex;
            justify-content: center;
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
            flex-wrap: wrap;
        }

        .comment-ca-marche__card {
            background: #ffffff;
            border-radius: 20px;
            padding: 40px 30px;
            text-align: center;
            flex: 1;
            min-width: 280px;
            max-width: 350px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .comment-ca-marche__card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        }

        .comment-ca-marche__icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 25px;
        }

        .comment-ca-marche__icon svg {
            width: 100%;
            height: 100%;
        }

        .comment-ca-marche__text {
            font-size: 16px;
            font-weight: 600;
            color: #1a3a5c;
            line-height: 1.5;
        }

        /* CTA Button */
        .cta-section {
            padding: 40px 20px 60px;
            text-align: center;
        }

        .cta-button {
            background-color: #FF8011;
            color: #ffffff;
            font-size: 18px;
            font-weight: 600;
            padding: 18px 50px;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 15px rgba(91, 188, 179, 0.4);
            letter-spacing: 0.5px;
        }

        .cta-button:hover {
            background-color: #FF8011;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(91, 188, 179, 0.5);
        }

        .cta-button:active {
            transform: translateY(0);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .comment-ca-marche__title {
                font-size: 22px;
                margin-bottom: 35px;
            }

            .comment-ca-marche__container {
                flex-direction: column;
                align-items: center;
            }

            .comment-ca-marche__card {
                width: 100%;
                max-width: 400px;
                padding: 30px 25px;
            }

            .cta-button {
                font-size: 16px;
                padding: 16px 40px;
            }
        }