/* ── Styles spécifiques : contact.html ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

    :root {
      --bg:     #0c0c0e;
      --surf:   #0f0f12;
      --border: rgba(255,255,255,0.07);
      --acc:    #c8f135;
      --text:   #e8e8e2;
      --muted:  #5a5a60;
      --muted2: #8a8a90;
    }

    html { scroll-behavior:smooth; }
    body {
      background:var(--bg); color:var(--text);
      font-family:'DM Mono',monospace; overflow-x:hidden;
      min-height:100vh;
    }

    /* noise */
    body::before {
      content:''; position:fixed; inset:0;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events:none; z-index:998; opacity:.5;
    }

    /* ── NAV ── */
    nav {
      position:fixed; top:0; left:0; right:0; z-index:200;
      display:flex; justify-content:space-between; align-items:center;
      padding:1.8rem 4rem;
      border-bottom:1px solid transparent;
      transition:border-color .4s, background .4s, backdrop-filter .4s;
    }
    nav.scrolled { border-color:var(--border); background:rgba(12,12,14,.88); backdrop-filter:blur(20px); }
    .logo { font-family:'DM Serif Display',serif; font-size:1.25rem; letter-spacing:-.02em; color:var(--text); text-decoration:none; }
    .logo span { color:var(--acc); }
    nav ul { list-style:none; display:flex; gap:2.5rem; }
    nav ul li a { text-decoration:none; color:var(--muted2); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; transition:color .2s; }
    nav ul li a:hover { color:var(--text); }
    nav ul li a.active { color:var(--acc); }
    .nav-cta { background:var(--acc)!important; color:#0c0c0e!important; padding:.5rem 1.2rem; border-radius:2px; font-weight:500!important; }

    /* ── PAGE WRAPPER ── */
    .page {
      min-height:100vh;
      display:grid;
      grid-template-columns:1fr 1fr;
      padding-top:0;
    }

    /* ════════════════════════
       LEFT PANEL — fixed info
    ════════════════════════ */
    .left-panel {
      position:sticky;
      top:0;
      height:100vh;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      padding:9rem 4rem 4rem;
      border-right:1px solid var(--border);
      background:var(--bg);
      overflow:hidden;
    }

    /* Big decorative grid */
    .left-panel::before {
      content:''; position:absolute; inset:0;
      background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
      background-size:55px 55px;
      opacity:.4;
      mask-image:radial-gradient(ellipse 80% 80% at 20% 60%, black 20%, transparent 80%);
    }

    /* Accent glow */
    .left-panel::after {
      content:''; position:absolute;
      width:500px; height:500px;
      background:radial-gradient(circle, rgba(200,241,53,.055) 0%, transparent 65%);
      border-radius:50%;
      bottom:-100px; left:-150px;
      pointer-events:none;
    }

    .left-top { position:relative; z-index:2; }

    .l-eyebrow {
      display:flex; align-items:center; gap:.8rem;
      font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--acc);
      margin-bottom:2rem;
      opacity:0; animation:fadeUp .6s .15s ease forwards;
    }
    .l-eyebrow::before { content:''; width:28px; height:1px; background:var(--acc); }

    .l-title {
      font-family:'DM Serif Display',serif;
      font-size:clamp(3rem,5vw,5.5rem);
      line-height:.92;
      letter-spacing:-.04em;
      opacity:0; animation:fadeUp .8s .28s ease forwards;
    }
    .l-title em { font-style:italic; color:var(--muted2); display:block; }
    .l-title .acc-word { color:var(--acc); }

    .l-desc {
      margin-top:2.5rem;
      font-size:.8rem; color:var(--muted2); line-height:1.95; max-width:40ch;
      opacity:0; animation:fadeUp .7s .4s ease forwards;
    }
    .l-desc strong { color:var(--text); font-weight:500; }

    /* Availability chip */
    .avail-chip {
      display:inline-flex; align-items:center; gap:.7rem;
      margin-top:2rem;
      background:rgba(200,241,53,.06);
      border:1px solid rgba(200,241,53,.2);
      border-radius:30px;
      padding:.55rem 1.1rem;
      font-size:.68rem; letter-spacing:.06em; color:var(--acc);
      opacity:0; animation:fadeUp .6s .52s ease forwards;
    }
    .avail-dot { width:6px; height:6px; border-radius:50%; background:var(--acc); animation:pulse 2s infinite; }

    /* Contact info cards */
    .contact-cards {
      position:relative; z-index:2;
      display:flex; flex-direction:column; gap:.8rem;
      opacity:0; animation:fadeUp .7s .62s ease forwards;
    }

    .c-card {
      display:flex; align-items:center; gap:1rem;
      padding:.9rem 1.2rem;
      background:rgba(255,255,255,.02);
      border:1px solid var(--border);
      border-radius:4px;
      text-decoration:none;
      transition:border-color .25s, background .25s, transform .25s;
      position:relative; overflow:hidden;
    }
    .c-card::after {
      content:''; position:absolute; left:0; top:0; bottom:0;
      width:2px; background:var(--acc);
      transform:scaleY(0); transform-origin:bottom;
      transition:transform .3s cubic-bezier(.22,1,.36,1);
    }
    .c-card:hover { border-color:rgba(200,241,53,.2); background:rgba(200,241,53,.03); transform:translateX(4px); }
    .c-card:hover::after { transform:scaleY(1); }

    .c-icon {
      width:36px; height:36px; border-radius:3px;
      background:var(--surf); border:1px solid var(--border);
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0; transition:border-color .25s;
    }
    .c-card:hover .c-icon { border-color:rgba(200,241,53,.3); }
    .c-icon svg { width:14px; height:14px; }

    .c-info { flex:1; }
    .c-label { font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.2rem; }
    .c-val { font-size:.74rem; color:var(--text); }

    .c-arrow { color:var(--muted); opacity:0; transform:translateX(-4px); transition:opacity .2s, transform .2s; }
    .c-card:hover .c-arrow { opacity:1; transform:translateX(0); }

    /* Social links */
    .social-row {
      position:relative; z-index:2;
      display:flex; gap:.8rem;
      opacity:0; animation:fadeUp .6s .72s ease forwards;
    }
    .soc-btn {
      display:flex; align-items:center; gap:.5rem;
      font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
      color:var(--muted2); text-decoration:none;
      padding:.5rem .9rem;
      border:1px solid var(--border); border-radius:3px;
      transition:border-color .25s, color .25s;
    }
    .soc-btn svg { width:13px; height:13px; }
    .soc-btn:hover { border-color:rgba(200,241,53,.25); color:var(--text); }

    /* ════════════════════════
       RIGHT PANEL — form
    ════════════════════════ */
    .right-panel {
      padding:9rem 4rem 5rem;
      display:flex;
      flex-direction:column;
    }

    /* Step indicator */
    .form-steps {
      display:flex; align-items:center; gap:.6rem;
      margin-bottom:3rem;
      opacity:0; animation:fadeUp .6s .2s ease forwards;
    }
    .step-dot {
      width:8px; height:8px; border-radius:50%;
      background:var(--border); border:1px solid var(--muted);
      transition:background .3s, border-color .3s, transform .3s;
    }
    .step-dot.active { background:var(--acc); border-color:var(--acc); transform:scale(1.2); }
    .step-dot.done { background:rgba(200,241,53,.3); border-color:rgba(200,241,53,.4); }
    .step-line { flex:1; max-width:40px; height:1px; background:var(--border); }
    .step-label { font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-left:.4rem; }

    /* Form header */
    .form-header {
      margin-bottom:2.5rem;
      opacity:0; animation:fadeUp .7s .3s ease forwards;
    }
    .form-header h2 { font-family:'DM Serif Display',serif; font-size:clamp(1.8rem,2.8vw,2.6rem); letter-spacing:-.03em; line-height:1.05; }
    .form-header h2 em { font-style:italic; color:var(--muted2); }
    .form-header p { margin-top:.8rem; font-size:.77rem; color:var(--muted2); line-height:1.8; }

    /* ── FORM ── */
    .contact-form {
      display:flex; flex-direction:column; gap:1.4rem;
      opacity:0; animation:fadeUp .8s .42s ease forwards;
      flex:1;
    }

    .field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

    .field {
      display:flex; flex-direction:column; gap:.5rem;
      position:relative;
    }

    .field label {
      font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
      transition:color .25s;
    }
    .field:focus-within label { color:var(--acc); }

    .field input,
    .field select,
    .field textarea {
      background:rgba(255,255,255,.025);
      border:1px solid var(--border);
      border-radius:3px;
      padding:.85rem 1rem;
      font-size:.78rem;
      font-family:'DM Mono',monospace;
      color:var(--text);
      outline:none;
      transition:border-color .25s, background .25s, box-shadow .25s;
      resize:none;
      -webkit-appearance:none;
      appearance:none;
    }
    .field input::placeholder,
    .field textarea::placeholder { color:var(--muted); }
    .field select { cursor:pointer; color:var(--muted2); }
    .field select option { background:#111114; color:var(--text); }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      border-color:rgba(200,241,53,.4);
      background:rgba(200,241,53,.025);
      box-shadow:0 0 0 3px rgba(200,241,53,.06);
    }

    /* Valid state */
    .field.valid input,
    .field.valid textarea { border-color:rgba(200,241,53,.25); }
    .field-check {
      position:absolute; right:.8rem; bottom:.88rem;
      opacity:0; transition:opacity .2s;
      pointer-events:none;
    }
    .field.valid .field-check { opacity:1; }

    .field textarea { min-height:120px; line-height:1.7; }

    /* Budget selector */
    .budget-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
    .budget-option { display:none; }
    .budget-label {
      display:flex; flex-direction:column; align-items:center;
      padding:.75rem .5rem;
      border:1px solid var(--border); border-radius:3px;
      cursor:pointer; font-size:.68rem; color:var(--muted2);
      text-align:center; line-height:1.4;
      transition:border-color .2s, color .2s, background .2s;
    }
    .budget-label span.bl-val { font-family:'DM Serif Display',serif; font-size:1rem; letter-spacing:-.02em; color:var(--text); margin-bottom:.15rem; }
    .budget-option:checked + .budget-label {
      border-color:var(--acc); color:var(--acc); background:rgba(200,241,53,.05);
    }
    .budget-label:hover { border-color:rgba(200,241,53,.3); color:var(--muted2); }

    /* Service checkboxes */
    .services-checks { display:flex; flex-direction:column; gap:.5rem; }
    .svc-check-item { display:flex; align-items:center; gap:.8rem; cursor:pointer; }
    .svc-check-item input { display:none; }
    .check-box {
      width:18px; height:18px; border-radius:2px;
      border:1.5px solid var(--border); background:transparent;
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0; transition:border-color .2s, background .2s;
    }
    .check-box svg { width:10px; height:10px; opacity:0; transition:opacity .2s; }
    .svc-check-item input:checked ~ .check-box { border-color:var(--acc); background:rgba(200,241,53,.12); }
    .svc-check-item input:checked ~ .check-box svg { opacity:1; }
    .check-label { font-size:.74rem; color:var(--muted2); transition:color .2s; }
    .svc-check-item:hover .check-label { color:var(--text); }
    .svc-check-item input:checked ~ .check-box + .check-label { display:none; }
    /* fix: label is sibling of input in DOM */

    /* Submit */
    .form-submit {
      display:flex; align-items:center; justify-content:space-between;
      margin-top:.5rem;
      gap:1rem;
    }
    .submit-note { font-size:.66rem; color:var(--muted); line-height:1.6; max-width:26ch; }
    .submit-note strong { color:var(--muted2); font-weight:400; }

    .btn-submit {
      display:inline-flex; align-items:center; gap:.8rem;
      background:var(--acc); color:#0c0c0e;
      font-family:'DM Mono',monospace;
      font-size:.74rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
      padding:.95rem 2rem; border-radius:2px; border:none;
      cursor:pointer; transition:opacity .2s, gap .25s, transform .1s;
      white-space:nowrap;
    }
    .btn-submit:hover { opacity:.88; gap:1.2rem; }
    .btn-submit:active { transform:scale(.98); }
    .btn-submit svg { width:14px; height:14px; transition:transform .25s; }

    /* ── SUCCESS STATE ── */
    .success-state {
      display:none;
      flex-direction:column; align-items:flex-start;
      padding:4rem 0; gap:1.5rem;
    }
    .success-state.show { display:flex; }
    .contact-form.hide { display:none; }

    .success-icon {
      width:64px; height:64px; border-radius:50%;
      background:rgba(200,241,53,.1);
      border:1px solid rgba(200,241,53,.3);
      display:flex; align-items:center; justify-content:center;
      animation:scaleIn .5s cubic-bezier(.22,1,.36,1);
    }
    .success-icon svg { width:28px; height:28px; }
    .success-state h3 { font-family:'DM Serif Display',serif; font-size:2rem; letter-spacing:-.025em; line-height:1.1; }
    .success-state h3 em { font-style:italic; color:var(--muted2); }
    .success-state p { font-size:.8rem; color:var(--muted2); line-height:1.9; max-width:44ch; }
    .success-state p strong { color:var(--text); font-weight:500; }
    .success-back {
      display:inline-flex; align-items:center; gap:.6rem;
      font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
      color:var(--muted2); text-decoration:none; margin-top:.5rem;
      transition:color .2s, gap .2s; cursor:pointer; background:none; border:none;
    }
    .success-back:hover { color:var(--text); gap:.9rem; }

    /* ── BOTTOM STRIP ── */
    .bottom-strip {
      border-top:1px solid var(--border);
      padding:3rem 4rem;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:2rem;
      background:var(--surf);
    }

    .bs-item { display:flex; align-items:center; gap:1rem; }
    .bs-icon {
      width:40px; height:40px; border-radius:3px;
      background:var(--bg); border:1px solid var(--border);
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
    }
    .bs-icon svg { width:16px; height:16px; }
    .bs-label { font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.2rem; }
    .bs-val { font-size:.76rem; color:var(--text); }

    /* ── FOOTER ── */
    footer {
      border-top:1px solid var(--border); padding:2.5rem 4rem;
      display:flex; justify-content:space-between; align-items:center;
      grid-column:1 / -1;
    }
    .footer-logo { font-family:'DM Serif Display',serif; font-size:1.1rem; color:var(--text); }
    .footer-logo span { color:var(--acc); }
    footer p { font-size:.62rem; color:var(--muted); letter-spacing:.08em; }
    .fl { display:flex; gap:1.5rem; }
    .fl a { font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .2s; }
    .fl a:hover { color:var(--text); }

    /* ── KEYFRAMES ── */
    @keyframes fadeUp { from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;} }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.75);} }
    @keyframes scaleIn { from{opacity:0;transform:scale(.5);}to{opacity:1;transform:scale(1);} }

    /* character counter */
    .char-count { font-size:.58rem; color:var(--muted); text-align:right; margin-top:.25rem; }

    /* select arrow */
    .select-wrap { position:relative; }
    .select-wrap::after {
      content:''; position:absolute; right:1rem; top:50%; transform:translateY(-50%);
      width:0; height:0;
      border-left:4px solid transparent; border-right:4px solid transparent;
      border-top:5px solid var(--muted); pointer-events:none;
    }

    /* ── RESPONSIVE ── */
    @media(max-width:1000px) {
      nav { padding:1.5rem 2rem; }
      nav ul { display:none; }
      .page { grid-template-columns:1fr; }
      .left-panel { position:static; height:auto; padding:8rem 2rem 3rem; border-right:none; border-bottom:1px solid var(--border); }
      .right-panel { padding:3rem 2rem 5rem; }
      .field-row { grid-template-columns:1fr; }
      .budget-grid { grid-template-columns:repeat(2,1fr); }
      .bottom-strip { padding:2.5rem 2rem; }
      footer { padding:2rem; flex-direction:column; gap:.8rem; text-align:center; }
      .fl { justify-content:center; }
      .form-submit { flex-direction:column; align-items:flex-start; }
    }