/* =============================================================================
   CONTACT.CSS — Styles spécifiques à la page CONTACT Y.C. Aligator Film
   ============================================================================= */
    body { background: #f0efe9; }

    /* ─── Contenu ─── */
    .contact-page {
      max-width: 1100px;
      margin: 0 auto;
      padding: 5rem 2.5rem 8rem;
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 6rem;
      align-items: start;
    }

    /* ─── Infos ─── */
    .contact-aside h2 {
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: 1rem;
    }

    .contact-aside > p {
      font-size: 0.9rem;
      color: #3a3a3a;
      margin-bottom: 2.5rem;
      max-width: 32ch;
    }

    .contact-block {
      margin-bottom: 2rem;
    }

    .contact-block-label {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--grey);
      margin-bottom: 0.4rem;
    }

    .contact-block-value {
      font-size: 0.92rem;
      color: var(--black);
      line-height: 1.55;
    }

    .contact-block-value a {
      border-bottom: 1px solid var(--lgrey);
      transition: border-color 0.2s;
    }

    .contact-block-value a:hover {
      border-color: var(--black);
    }

    .contact-divider {
      width: 2rem;
      height: 2px;
      background: var(--black);
      margin: 2.5rem 0;
    }

    .contact-note {
      font-size: 0.82rem;
      color: var(--grey);
      font-style: italic;
      line-height: 1.65;
      max-width: 30ch;
    }

    .contact-socials {
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem;
      margin-top: -1.6rem;
    }

    .contact-social-link {
      width: 2.65rem;
      height: 2.65rem;
      display: grid;
      place-items: center;
      color: var(--black);
      border: 1px solid var(--lgrey);
      border-radius: 50%;
      transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
    }

    .contact-social-link:hover,
    .contact-social-link:focus-visible {
      color: var(--white);
      background: var(--black);
      border-color: var(--black);
      transform: translateY(-2px);
      outline: none;
    }

    /* ─── Formulaire ─── */
    .contact-form-wrap {
      background: white;
      border: 1px solid var(--lgrey);
      padding: 2.5rem;
    }

    .contact-form-title {
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      margin-bottom: 0.4rem;
    }

    .contact-form-sub {
      font-size: 0.82rem;
      color: var(--grey);
      margin-bottom: 2rem;
    }

    .cf { display: flex; flex-direction: column; gap: 1.2rem; }

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

    .cf-group { display: flex; flex-direction: column; gap: 0.4rem; }

    .cf-group label {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--grey);
    }

    .cf-group input,
    .cf-group textarea,
    .cf-group select {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.9rem;
      border: 1px solid var(--lgrey);
      padding: 0.8rem 1rem;
      background: #fafaf8;
      color: var(--black);
      outline: none;
      transition: border-color 0.2s, background 0.2s;
      width: 100%;
      -webkit-appearance: none;
    }

    .cf-group input:focus,
    .cf-group textarea:focus,
    .cf-group select:focus {
      border-color: var(--black);
      background: white;
    }

    .cf-group textarea { resize: vertical; min-height: 140px; }

    .cf-submit {
      align-self: flex-start;
      background: var(--black);
      color: var(--white);
      border: none;
      padding: 0.9rem 2.5rem;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.2s, letter-spacing 0.2s;
    }

    .cf-submit:hover { background: #2a2a2a; letter-spacing: 0.32em; }

    /* ─── Succès / Erreur (remplace l'ancien cf-success JS) ─── */
    .cf-success-block {
      padding: 2rem;
      background: rgba(45,106,63,0.06);
      border: 1px solid rgba(45,106,63,0.3);
      text-align: center;
    }

    .cf-success-icon {
      font-size: 2rem;
      color: #2d6a3f;
      margin-bottom: 0.8rem;
    }

    .cf-success-block p {
      font-size: 0.88rem;
      color: #2d6a3f;
      font-weight: 500;
      margin: 0;
    }

    .cf-alert-error {
      padding: 0.85rem 1rem;
      background: rgba(180,40,40,0.07);
      border-left: 2px solid #b42828;
      color: #8a1e1e;
      font-size: 0.82rem;
      line-height: 1.55;
      margin-bottom: 1.2rem;
    }

    /* Turnstile widget */
    .cf-turnstile { margin-top: 0.5rem; }

    /* ─── Responsive ─── */
    @media (max-width: 768px) {
      .contact-page { grid-template-columns: 1fr; gap: 3rem; padding: 4rem 1.5rem 6rem; }
      .cf-row { grid-template-columns: 1fr; }
      .contact-form-wrap { padding: 1.8rem; }
    }