/*
  style.css — Serrurerie Prestige
  Le design utilise des styles inline dans index.html.
  Ce fichier contient les overrides responsives et hover states.
*/

/* Responsive : hero en colonne sur mobile */
@media (max-width: 640px) {
  /* Hero : empiler les colonnes */
  section[style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  section[style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"] > div:last-child {
    min-height: 200px;
  }
  /* Header nav : masquer les liens, garder le CTA */
  header nav {
    display: none !important;
  }
  /* Flèches processus : pivoter en vertical */
  section[style*="display:flex;align-items:flex-start;gap:0"] {
    flex-direction: column;
    align-items: center;
  }
  section[style*="display:flex;align-items:flex-start;gap:0"] > div[style*="font-size:20px"] {
    transform: rotate(90deg);
    padding: 2px 0;
  }
}

/* Hover liens nav */
header nav a:hover {
  color: #bcac75 !important;
  transition: color .15s;
}

/* Hover bouton header tel */
header a[href^="tel"]:hover {
  background: #a89860 !important;
}

/* Hover bouton "Être rappelé" hero */
button#scrollToForm:hover {
  border-color: #bcac75 !important;
}

/* Hover hero tel CTA */
section a[href^="tel"][style*="#111827"]:hover {
  background: #1f2937 !important;
}

/* Hover cartes services */
div[style*="border:1px solid #EAE5DC;border-radius:10px"]:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
  transition: box-shadow .2s;
}