:root {
      --bg: #09090b;
      --panel: rgba(18, 18, 21, .94);
      --panel-2: #141417;
      --line: rgba(255,255,255,.09);
      --text: #f5f5f6;
      --muted: #99999f;
      --red: #e21d2f;
      --red-light: #ff3547;
      --danger: #ff6471;
      --success: #6ee7a0;
    }
    * { box-sizing: border-box; }
    html { min-height: 100%; background: var(--bg); }
    body {
      zoom: 1.05;
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      background:
        radial-gradient(ellipse at 77% 14%, rgba(226,29,47,.15), transparent 34%),
        radial-gradient(ellipse at 10% 90%, rgba(226,29,47,.08), transparent 30%),
        var(--bg);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      display: grid;
      grid-template-rows: auto 1fr auto;
    }
    .topbar {
      width: min(1160px, calc(100% - 48px));
      margin: 0 auto;
      height: 86px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
    .brand-mark {
      width: 39px; height: 39px; border-radius: 11px;
      display: grid; place-items: center;
      background: linear-gradient(145deg, #ff3447, #a90d1d);
      box-shadow: 0 7px 25px rgba(226,29,47,.22);
    }
    .brand-mark svg { width: 24px; height: 24px; }
    .brand-name { font-size: 19px; font-weight: 850; letter-spacing: -.8px; }
    .brand-name span { color: var(--red-light); }
    .top-note { color: var(--muted); font-size: 13px; }
    .top-note a { color: #f1f1f3; text-decoration: none; font-weight: 650; margin-left: 5px; }
    .top-note a:hover { color: var(--red-light); }

    main {
      width: min(1160px, calc(100% - 48px));
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(370px, .9fr);
      align-items: center;
      gap: clamp(44px, 7vw, 100px);
      padding: 54px 0 64px;
    }
    .visual { position: relative; min-height: 510px; display: flex; flex-direction: column; justify-content: center; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 9px;
      color: #ff6471; font-size: 11px; font-weight: 800;
      letter-spacing: 2.6px; text-transform: uppercase; margin-bottom: 22px;
    }
    .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--red); }
    h1 {
      max-width: 590px; margin: 0;
      font-size: clamp(43px, 5.1vw, 70px);
      line-height: .99; letter-spacing: -3.5px; font-weight: 850;
    }
    h1 span { color: var(--red-light); }
    .intro { max-width: 440px; color: #a9a9af; line-height: 1.75; font-size: 15px; margin: 25px 0 0; }
    .car-art {
      position: relative; width: 100%; max-width: 580px; margin-top: 30px;
      filter: drop-shadow(0 20px 30px rgba(0,0,0,.3));
    }
    .car-art svg { display: block; width: 100%; height: auto; }
    .visual-caption {
      display: flex; align-items: center; gap: 11px; margin-top: 13px;
      color: #77777e; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    }
    .visual-caption::before { content: ""; width: 30px; height: 1px; background: #4a4a50; }
    .form-card {
      width: 100%; max-width: 460px; justify-self: end;
      padding: clamp(26px, 3.2vw, 39px);
      background: linear-gradient(150deg, rgba(24,24,28,.97), rgba(14,14,17,.98));
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 22px;
      box-shadow: 0 28px 90px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.025);
    }
    .form-heading { margin-bottom: 25px; }
    .form-heading h2 { margin: 0 0 9px; font-size: 28px; letter-spacing: -1px; }
    .form-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
    .google-btn {
      width: 100%; height: 48px; display: flex; justify-content: center; align-items: center; gap: 11px;
      border: 1px solid #36363c; border-radius: 10px; background: #f5f5f6; color: #17171a;
      font-weight: 700; font-size: 13px; cursor: pointer; transition: transform .18s, background .18s;
    }
    .google-btn:hover { background: #fff; transform: translateY(-1px); }
    .google-btn svg { width: 18px; height: 18px; }
    .separator { display: flex; align-items: center; gap: 13px; margin: 22px 0; color: #77777e; font-size: 11px; }
    .separator::before, .separator::after { content: ""; flex: 1; height: 1px; background: var(--line); }
    .field { margin-bottom: 16px; }
    label { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 700; color: #e7e7e9; }
    .input-wrap { position: relative; }
    input {
      width: 100%; height: 48px; padding: 0 14px;
      color: var(--text); background: #0d0d10; border: 1px solid #333339;
      border-radius: 9px; outline: none; font: inherit; font-size: 13px;
      transition: border-color .18s, box-shadow .18s;
    }
    input::placeholder { color: #65656c; }
    input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(226,29,47,.12); }
    input[aria-invalid="true"] { border-color: var(--danger); }
    .password-input { padding-right: 70px; }
    .toggle-password {
      position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
      border: 0; background: transparent; color: #a4a4ab; font-size: 11px; font-weight: 700; cursor: pointer;
    }
    .toggle-password:hover { color: white; }
    .hint { margin: 7px 0 0; color: #77777e; font-size: 11px; line-height: 1.45; }
    .terms { display: flex; gap: 10px; align-items: flex-start; margin: 5px 0 19px; }
    .terms input { appearance: none; flex: 0 0 15px; width: 15px; height: 15px; margin: 2px 0 0; padding: 0; border-radius: 4px; cursor: pointer; }
    .terms input:checked { background: var(--red); border-color: var(--red); }
    .terms input:checked::after { content: "✓"; display: block; text-align: center; line-height: 13px; color: white; font-size: 11px; }
    .terms label { color: #929299; font-weight: 450; line-height: 1.55; font-size: 11px; margin: 0; cursor: pointer; }
    .terms a, .login-link a { color: #ff6875; text-decoration: none; }
    .terms a:hover, .login-link a:hover { text-decoration: underline; }
    .submit-btn {
      width: 100%; height: 49px; border: 0; border-radius: 10px;
      background: linear-gradient(105deg, #f12a3d, #c70e22); color: white;
      font-weight: 800; font-size: 13px; letter-spacing: .2px; cursor: pointer;
      box-shadow: 0 8px 24px rgba(226,29,47,.18); transition: transform .18s, box-shadow .18s;
    }
    .submit-btn:hover { transform: translateY(-1px); box-shadow: 0 11px 28px rgba(226,29,47,.28); }
    .submit-btn:active { transform: translateY(0); }
    .message { display: none; padding: 11px 12px; border-radius: 8px; font-size: 12px; line-height: 1.5; margin: 0 0 15px; }
    .message.error { display: block; color: #ffb5bc; background: rgba(226,29,47,.1); border: 1px solid rgba(226,29,47,.3); }
    .message.success { display: block; color: #a7f3c4; background: rgba(47,180,104,.09); border: 1px solid rgba(47,180,104,.25); }
    .login-link { margin: 21px 0 0; text-align: center; color: #8d8d94; font-size: 12px; }
    footer {
      width: min(1160px, calc(100% - 48px)); margin: 0 auto;
      min-height: 58px; border-top: 1px solid rgba(255,255,255,.06);
      display: flex; justify-content: space-between; align-items: center; gap: 15px;
      color: #68686f; font-size: 11px;
    }
    .footer-right { display: flex; gap: 18px; }
    .footer-right a { color: #85858c; text-decoration: none; }
    .footer-right a:hover { color: #eee; }
    @media (max-width: 850px) {
      main { grid-template-columns: 1fr; gap: 34px; padding-top: 36px; }
      .visual { min-height: 0; text-align: center; align-items: center; }
      .eyebrow { margin-bottom: 17px; }
      h1 { font-size: clamp(42px, 10vw, 62px); letter-spacing: -2.5px; }
      .intro { margin-top: 18px; }
      .car-art { max-width: 440px; margin-top: 13px; }
      .visual-caption { margin-top: 0; }
      .form-card { justify-self: center; max-width: 500px; }
    }
    @media (max-width: 520px) {
      .topbar, main, footer { width: calc(100% - 32px); }
      .topbar { height: 72px; }
      .brand-name { font-size: 17px; }
      .top-note { font-size: 11px; }
      main { padding: 28px 0 42px; }
      .visual { gap: 0; }
      .intro { font-size: 13px; }
      .collection-art { transform:scale(.88); transform-origin:top center; margin-bottom:-25px; }
      .form-card { padding: 24px 20px; border-radius: 17px; }
      .form-heading h2 { font-size: 25px; }
      footer { align-items: flex-start; flex-direction: column; justify-content: center; padding: 17px 0; }
    }


    /* Présentation premium : voiture sportive animée en SVG, sans image externe */
    .car-showcase { position:relative; width:100%; max-width:590px; height:285px; margin-top:18px; overflow:hidden; isolation:isolate; }
    .showcase-glow { position:absolute; width:72%; height:48%; left:14%; top:31%; background:radial-gradient(ellipse,rgba(221,22,43,.24),transparent 70%); filter:blur(18px); animation:glowPulse 4s ease-in-out infinite; }
    .showcase-label { position:absolute; top:8px; left:4px; z-index:2; display:flex; align-items:center; gap:9px; color:#a9a9af; font-size:9px; letter-spacing:1.7px; }
    .live-dot { width:6px; height:6px; border-radius:50%; background:#f03448; box-shadow:0 0 12px #f03448; }
    .label-line { width:38px; height:1px; background:#45454a; margin-left:5px; }
    .hero-car { position:absolute; inset:20px 0 0; width:100%; height:calc(100% - 20px); overflow:visible; animation:carFloat 5s ease-in-out infinite; }
    .car-body { transform-origin:390px 245px; animation:carHover 5s ease-in-out infinite; }
    .wheel { transform-box:fill-box; transform-origin:center; animation:wheelTurn 12s linear infinite; }
    .headlight { animation:headlightPulse 3.5s ease-in-out infinite; }
    .taillight { animation:tailPulse 3.5s ease-in-out infinite; }
    .shine { animation:paintShine 6s ease-in-out infinite; }
    .showcase-specs { position:absolute; bottom:0; left:4px; right:4px; display:flex; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid #303034; }
    .showcase-specs div { display:flex; flex-direction:column; gap:4px; }
    .showcase-specs strong { color:#f1f1f3; font-size:13px; letter-spacing:.4px; }
    .showcase-specs span { color:#77777e; font-size:8px; letter-spacing:1px; }
    @keyframes carFloat { 0%,100% { transform:translateY(0) rotate(-.25deg); } 50% { transform:translateY(-7px) rotate(.25deg); } }
    @keyframes carHover { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
    @keyframes wheelTurn { to { transform:rotate(360deg); } }
    @keyframes glowPulse { 0%,100% { opacity:.65; transform:scale(.92); } 50% { opacity:1; transform:scale(1.08); } }
    @keyframes headlightPulse { 0%,100% { opacity:.7; filter:drop-shadow(0 0 1px #fff); } 50% { opacity:1; filter:drop-shadow(0 0 7px #fff); } }
    @keyframes tailPulse { 0%,100% { opacity:.7; } 50% { opacity:1; filter:drop-shadow(0 0 7px #ff233e); } }
    @keyframes paintShine { 0%,18% { opacity:0; transform:translateX(-80px); } 35%,48% { opacity:.75; transform:translateX(30px); } 65%,100% { opacity:0; transform:translateX(90px); } }
    @media (prefers-reduced-motion: reduce) { .car-showcase *, .car-showcase { animation:none !important; } }
    @media (max-width:850px) { .car-showcase { max-width:500px; height:260px; margin-top:14px; } .showcase-specs span { font-size:7px; } }
    @media (max-width:520px) { .car-showcase { height:220px; } .showcase-label { font-size:8px; } .showcase-specs { gap:6px; } .showcase-specs strong { font-size:11px; } }

        /* Variante plus sobre et réaliste : moins d'effets décoratifs */
    body { background: #101010; }
    .topbar { height: 74px; border-bottom-color: #292929; }
    .brand-mark { border-radius: 5px; box-shadow: none; background: #d7192d; }
    .brand-name { letter-spacing: -.3px; font-weight: 750; }
    main { gap: clamp(32px, 5vw, 70px); padding-top: 38px; padding-bottom: 42px; }
    .visual { min-height: 440px; }
    .eyebrow { color: #e64b58; letter-spacing: 1.2px; font-size: 10px; margin-bottom: 16px; }
    .eyebrow::before { width: 18px; }
    h1 { font-size: clamp(36px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -1.8px; font-weight: 760; }
    h1 span { color: #e32a3d; }
    .intro { color: #b0b0b0; margin-top: 18px; line-height: 1.65; }
    .collection-art { position:relative; height:300px; max-width:560px; width:100%; margin-top:22px; }
    .collect-card { position:absolute; width:205px; height:270px; padding:14px; border:1px solid #45454b; border-radius:8px; background:#19191d; box-shadow:0 12px 24px #0008; display:flex; flex-direction:column; overflow:hidden; }
    .collect-card small { font-size:9px; letter-spacing:1.1px; color:#c9c9ce; display:flex; justify-content:space-between; }
    .collect-card b { font-size:12px; letter-spacing:.3px; }
    .collect-card > span { font-size:9px; letter-spacing:1px; color:#b6b6bd; margin-top:6px; }
    .collect-card .card-car { flex:1; display:grid; place-items:center; margin:12px 0; background:linear-gradient(145deg,#4c1119,#18181c 65%); border:1px solid #63212a; color:#f4f4f5; font-size:48px; font-weight:900; font-style:italic; letter-spacing:-4px; }
    .collect-card .card-car.porsche { background:linear-gradient(145deg,#3d3d42,#151518 70%); border-color:#55555d; }
    .collect-card i { color:#f14b5c; font-style:normal; }
    .card-front { left:36%; top:8px; z-index:3; transform:rotate(5deg); border-color:#a92b38; }
    .card-mid { left:13%; top:22px; z-index:2; transform:rotate(-8deg); }
    .card-back { left:53%; top:20px; z-index:1; transform:rotate(13deg); background:#242429; color:#f04a5a; justify-content:space-between; }
    .card-back b { font-size:24px; line-height:1.1; margin-top:40px; }
    .card-back i { font-size:24px; }
    .card-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:10px; border-top:1px solid #38383e; color:#9b9ba3; font-size:10px; }
    .card-bottom strong { color:#ed3347; font-size:17px; }
    .visual-caption { font-size:10px; }
    .visual-caption { letter-spacing: .7px; }
    .form-card { background: #181818; border: 1px solid #303030; border-radius: 10px; box-shadow: none; padding: clamp(24px, 3vw, 34px); }
    .form-heading h2 { letter-spacing: -.4px; font-size: 26px; }
    input, .field input { border-radius: 5px !important; }
    button, .submit-btn, .google-btn { border-radius: 5px !important; box-shadow: none !important; }
    footer { color: #777; }
    @media (max-width: 800px) { main { padding-top: 28px; } .visual { min-height: auto; } }

    

/* Affichage des formulaires d'inscription et de connexion */
[hidden] { display: none !important; }