/* ============================================================
   RIAD VENDÔME & SPA — FORMULAIRE CONTACT
   Fichier unique — ne pas dupliquer dans les PHP
   ============================================================ */

/* ── MASQUER ancienne image cal.gif ───────────────────────── */
img[src*="cal.gif"],
img[src*="calendar.gif"],
img[alt="Ouvrir le calendrier"],
img[alt*="calendrier"] { display: none !important; }

/* ── DESIGN DESKTOP (≥769px) ───────────────────────────────── */
@media (min-width: 769px) {

  .form-contact {
    background: linear-gradient(145deg, #1e1e1e, #272727);
    border: 1px solid rgba(212,175,55,0.25);
    border-radius: 12px;
    padding: 26px 30px 22px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    max-width: 680px;
  }

  .form-contact h3 {
    font-size: 15px !important;
    margin: 0 0 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(212,175,55,0.15) !important;
  }

  .form-contact table {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse !important;
  }

  .form-contact table td.Style3 { width: 93px !important; }

  /* Tous les champs */
  .form-contact input[type="text"],
  .form-contact input[type="tel"],
  .form-contact input[type="date"],
  .form-contact textarea,
  .form-contact select {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 9px 12px !important;
    background-color: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.13) !important;
    border-radius: 7px !important;
    color: #fff !important;
    font-size: 13px !important;
    outline: none !important;
  }

  /* Champs date : bordure dorée pour les distinguer, pas d'icône CSS */
  .form-contact input[type="date"] {
    border: 1px solid rgba(212,175,55,0.45) !important;
    color-scheme: dark !important;
  }

  .form-contact input[type="text"]:focus,
  .form-contact input[type="tel"]:focus,
  .form-contact input[type="date"]:focus,
  .form-contact textarea:focus,
  .form-contact select:focus {
    border-color: rgba(212,175,55,0.65) !important;
    background-color: rgba(255,255,255,0.09) !important;
  }

  .form-contact td.Style3 div {
    color: rgba(255,255,255,0.55) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
  }

  .form-contact textarea {
    min-height: 88px !important;
    resize: vertical !important;
  }

  .form-contact input[type="button"] {
    padding: 11px 28px !important;
    background: linear-gradient(135deg, #b8860b, #d4af37) !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 7px !important;
    cursor: pointer !important;
  }

  .form-contact input[type="button"]:hover {
    background: linear-gradient(135deg, #d4af37, #f0d060) !important;
  }

}

/* ── DESIGN MOBILE (≤768px) ────────────────────────────────── */
@media (max-width: 768px) {

  .form-contact {
    width: 100% !important;
    padding: 15px !important;
    box-sizing: border-box !important;
  }

  .form-contact table { display: block !important; width: 100% !important; }
  .form-contact tr    { display: block !important; width: 100% !important; }
  .form-contact td    { display: none  !important; }

  .form-contact tr > td:nth-child(2),
  .form-contact tr > td:nth-child(4) {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 !important;
    box-sizing: border-box !important;
  }

  .form-contact input[type="text"],
  .form-contact input[type="tel"],
  .form-contact input[type="date"],
  .form-contact textarea,
  .form-contact select {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 13px 14px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    background-color: rgba(255,255,255,0.07) !important;
    color: #fff !important;
    display: block !important;
  }

  /* Champs date mobile : bordure dorée, icône native du navigateur */
  .form-contact input[type="date"] {
    border: 1px solid rgba(212,175,55,0.45) !important;
    color-scheme: dark !important;
  }

  .form-contact input[type="text"]::placeholder,
  .form-contact input[type="tel"]::placeholder,
  .form-contact textarea::placeholder { color: #888 !important; font-style: italic !important; }
  .form-contact textarea  { min-height: 80px !important; }
  .form-contact select    { color: #fff !important; }

  .form-contact input[type="button"] {
    width: 100% !important;
    padding: 15px !important;
    font-size: 16px !important;
    background: linear-gradient(135deg, #b8860b, #d4af37) !important;
    color: #1a1a1a !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    margin-top: 8px !important;
    cursor: pointer !important;
    letter-spacing: 1px !important;
  }

}