/* Variables de couleur et thèmes */
    :root{
      --pink: #ec008c;          /* Rouge principal */
      --pink-dark:#ec1695;    /* Rouge hover */
      --bg:#f7f7f8;          /* Fond doux */
      --text:#1f1f1f;        /* Texte principal */
      --muted:#6b7280;       /* Texte secondaire */
      --card:#ffffff;        /* Fond carte */
      --border:#e5e7eb;      /* Bordure légère */
      --focus:#3863bf;       /* Anneau focus */
      
         --bg:#0b0d10;
        --text:#e5e7eb;
        --muted:#9aa3af;
        --card:#0e1116;
        --border:#20252d;
    }

    /* Reset léger et typographie système */
    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      color:var(--text);
      background:radial-gradient(1200px 800px at 50% -10%, #ffffff, var(--bg));
      -webkit-font-smoothing:antialiased;
      line-height:1.5;
    }

    /* Conteneur principal */
    .wrap{
      min-height:100dvh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
    }

    /* Carte */
    .card{
      width:100%;
      max-width:600px;
      background:var(--card);
      border:1px solid var(--border);
      border-radius:16px;
      overflow:hidden;
      box-shadow:
        0 8px 24px rgba(0,0,0,0.06),
        0 2px 6px rgba(0,0,0,0.04);
    }

    /* Bandeau supérieur rouge (style “hero”) */
    .hero{
      background:var(--pink);
      color:#fff;
      padding:30px 22px 22px;
      text-align:center;
      border-bottom:1px solid var(--border);
      
    }
    .hero h1{
      margin:0;
      font-size:clamp(18px, 3.6vw, 20px);
      font-weight:800;
      letter-spacing:0.2px;
      text-transform:none;
      color:#fff;
      font-weight:800;
      text-align:center;
    }
    .hero p{
      margin:0;
      opacity:0.95;
      font-size:clamp(14px, 2.8vw, 16px);
    }
    

    /* Corps de la carte */
    .body{
      padding:28px;
      text-align:center;
    }
    .body h2{
      margin:0 0 10px;
      font-size:clamp(18px, 3.6vw, 22px);
      font-weight:700;
      color:#fff;
    }
    
    .body .sub{
      margin:0 auto 20px;
      max-width:46ch;
      color:var(--muted);
      font-size:clamp(14px, 2.8vw, 16px);
      text-align: center;
    }
    
   .sub a{
      color:#4477c7;
      text-underline-offset:2px;
     font-size:clamp(14px, 2.8vw, 16px);
    }

     .lead{
      margin:0 0 4px;
      color:var(--text);
      font-size:clamp(16px, 3.6vw, 17px);
      font-weight:600;
    }

      /* Check icon circle */
    .check{
      width:28px; height:28px; 
      margin:0 auto 14px;
      border-radius:50%;
      display:grid; place-items:center;
      background:rgba(75, 181, 67); 
      border:1px solid rgba(16,185,129,0.35);
      color:var(--accent);
    }

     .check svg{ width:20px; height:20px; }

    .icon-err{
      width:28px; height:28px; 
      margin:0 auto 14px;
      border-radius:50%;
      display:grid; place-items:center;
      background:rgb(217,48,37,.10); 
      border:1px solid rgba(217,48,37,.25);
      color: rgb(197, 48, 48); 
    }

    .icon-err svg{ width:15px; height:15px; } 

    /* CTA principal */
    .cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      background:var(--pink);
      color:#fff;
      box-shadow:none;
      border:none;
      padding:14px 22px;
      border-radius:999px;
      font-weight:700;
      font-size:16px;
      cursor:pointer;
      text-decoration:none;
      transition:background 160ms ease, transform 120ms ease, box-shadow 160ms ease;
    }
    .cta:hover{ background:var(--pink-dark); transform:translateY(-1px); }
    .cta:active{ transform:translateY(0); }
    .cta:focus-visible{
      outline:none;
      box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--focus);
    }

    /* Disclaimer pied */
    .footer{
      border-top:1px solid var(--border);
      padding:18px 22px;
      background:#0e1116;
    }
    .footer p{
      margin:0 auto;
      max-width:70ch;
      color:var(--muted);
      font-size:12.5px;
      text-align:center;
    }
    .footer a{
      color:#4477c7;
      text-underline-offset:2px;
    }
    
     .footer a:hover{
      transform:translateY(-1px);
    
      border-color:#ec008c;
      box-shadow:0 6px 14px rgba(0,0,0,0.06);
    }