/* --------------------
       Variables globales
       -------------------- */
    :root {
      --bg: #0b0f14;
      /* fond sombre pour plus de contraste */
      --card-bg: #071124;
      --primary: #D4A017;
      /* accent or chaud — audace & raffinement */
      --muted: #98A0AC;
      /* texte secondaire */
      --accent-2: #7B3FF2;
      /* violet électrique pour éléments créatifs */
      --white: #ffffff;

      --container: 1200px;
      --radius: 14px;
      --gap: 1.25rem;
    }

    /* Reset léger */
    * {
      box-sizing: border-box
    }

    html,
    body {
      height: 100%
    }

    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      background: linear-gradient(180deg, #03060a 0%, #071124 100%);
      color: var(--white);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      line-height: 1.6;
    }

    .container {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 1.25rem
    }

    /* ---------- HEADER ---------- */
    header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: linear-gradient(180deg, rgba(3, 6, 10, 0.6), rgba(3, 6, 10, 0.2));
      backdrop-filter: blur(6px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }

    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 0
    }

    .brand {
      display: flex;
      gap: 1rem;
      align-items: center
    }

    .brand .logo {
      font-family: 'Playfair Display', serif;
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--white)
    }

    .brand .tag {
      font-size: 0.85rem;
      color: var(--muted);
      margin-top: 2px
    }

    nav ul {
      display: flex;
      gap: 1.25rem;
      list-style: none;
      margin: 0;
      padding: 0
    }

    nav a {
      color: var(--muted);
      text-decoration: none;
      font-weight: 600
    }

    nav a:hover {
      color: var(--primary)
    }

    .menu-toggle {
      display: none;
      background: none;
      border: 0;
      color: var(--white);
      font-weight: 700
    }

    /* ---------- HERO ---------- */
    .hero {
      padding: 5.5rem 0 4rem;
      display: grid;
      grid-template-columns: 1fr 480px;
      gap: 2.5rem;
      align-items: center
    }

    .hero .eyebrow {
      display: inline-block;
      padding: 0.25rem 0.6rem;
      border-radius: 999px;
      background: rgba(212, 160, 23, 0.08);
      color: var(--primary);
      font-weight: 700;
      font-size: 0.85rem;
      margin-bottom: 1rem
    }

    .hero h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2rem, 3.6rem, 3.6rem);
      line-height: 1.02;
      margin: 0 0 1rem;
      color: var(--white)
    }

    .hero p {
      color: var(--muted);
      font-size: 1.05rem;
      margin-bottom: 1.75rem
    }

    .cta-row {
      display: flex;
      gap: 1rem;
      align-items: center
    }

    .btn {
      padding: 0.9rem 1.4rem;
      border-radius: 10px;
      font-weight: 700;
      border: 0;
      cursor: pointer
    }

    .btn-primary {
      background: linear-gradient(90deg, var(--primary), #c69315);
      color: #081018;
      box-shadow: 0 12px 30px rgba(212, 160, 23, 0.12);
    }

    .btn-outline {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--white)
    }

    /* Hero visual card */
    .visual {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
      border: 1px solid rgba(255, 255, 255, 0.03);
      padding: 1.5rem;
      border-radius: 18px;
      min-height: 320px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow: hidden
    }

    /* Decorative diagonal svg (subtile) */
    .visual svg {
      position: absolute;
      right: -12%;
      top: -10%;
      opacity: 0.08;
      transform: rotate(8deg)
    }

    .mock-site {
      width: 90%;
      height: 70%;
      background: linear-gradient(180deg, #071124, #0b1422);
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.03);
      display: flex;
      flex-direction: column;
      overflow: hidden
    }

    .mock-site .bar {
      height: 44px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
      display: flex;
      align-items: center;
      padding: 0 0.75rem;
      gap: 0.5rem
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.07)
    }

    .mock-site .hero-block {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-weight: 700
    }

    /* ---------- SERVICES / CARDS ---------- */
    .services {
      padding: 3.5rem 0
    }

    .services h2 {
      font-family: 'Playfair Display', serif;
      font-size: 1.9rem;
      color: var(--white);
      margin-bottom: 1rem
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem
    }

    .card {
      background: var(--card-bg);
      padding: 1.5rem;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.03);
      transition: transform .28s ease, box-shadow .28s ease
    }

    .card:hover {
      transform: translateY(-12px);
      box-shadow: 0 30px 60px rgba(11, 15, 20, 0.6);
      border-color: rgba(123, 63, 242, 0.12)
    }

    .card h3 {
      font-family: 'Playfair Display', serif;
      margin: 0 0 0.5rem;
      color: var(--white)
    }

    .card p {
      color: var(--muted);
      margin: 0
    }

    /* ---------- PROJETS ---------- */
    .works {
      padding: 3.5rem 0
    }

    .works h2 {
      font-family: 'Playfair Display', serif;
      font-size: 1.9rem;
      color: var(--white);
      margin-bottom: 1rem
    }

    .works-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem
    }

    .project {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.02));
      border-radius: 12px;
      padding: 1rem;
      border: 1px solid rgba(255, 255, 255, 0.03);
      position: relative;
      overflow: hidden
    }

    .project .thumb {
      height: 140px;
      border-radius: 8px;
      background: linear-gradient(90deg, rgba(123, 63, 242, 0.18), rgba(212, 160, 23, 0.12));
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: var(--white)
    }

    .project h4 {
      margin: 0.9rem 0 0.45rem
    }

    .project p {
      margin: 0;
      color: var(--muted);
      font-size: 0.95rem
    }

    /* ---------- CONTACT ---------- */
    .contact {
      padding: 3.5rem 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), transparent);
      border-radius: 12px
    }

    .form {
      background: linear-gradient(180deg, #071124, #06101a);
      padding: 1.25rem;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.03)
    }

    .field {
      display: flex;
      flex-direction: column;
      margin-bottom: 0.9rem
    }

    label {
      font-weight: 700;
      font-size: 0.9rem;
      color: var(--muted);
      margin-bottom: 0.35rem
    }

    input,
    textarea {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.06);
      padding: 0.7rem;
      border-radius: 8px;
      color: var(--white);
      resize: vertical
    }

    input:focus,
    textarea:focus {
      outline: none;
      border-color: rgba(123, 63, 242, 0.28);
      box-shadow: 0 8px 30px rgba(123, 63, 242, 0.06)
    }

    /* ---------- FOOTER ---------- */
    footer {
      padding: 2rem 0;
      margin-top: 2.5rem;
      border-top: 1px solid rgba(255, 255, 255, 0.03)
    }

    .foot-grid {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      align-items: center
    }

    .social a {
      color: var(--muted);
      text-decoration: none;
      margin-left: 0.75rem
    }

    /* Responsive */
    @media (max-width:1000px) {
      .hero {
        grid-template-columns: 1fr;
      }

      .grid,
      .works-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media (max-width:700px) {
      nav ul {
        display: none
      }

      .menu-toggle {
        display: block
      }

      .grid,
      .works-grid {
        grid-template-columns: 1fr
      }

      .brand .tag {
        display: none
      }
    }

    /* Petite animation d'entrée */
    .reveal {
      opacity: 0;
      transform: translateY(8px);
      animation: reveal .6s forwards
    }

    @keyframes reveal {
      to {
        opacity: 1;
        transform: none
      }
    }

    /* Styles utilitaires */
    .muted {
      color: var(--muted)
    }

    .accent {
      color: var(--primary)
    }