/* Base styling for Artisan Lunair website */

/* Import Google font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  color: #333;
  /* Fond plus clair pour un aspect plus lumineux */
  background-color: #ffffff;
}

header {
  /* Bleu clair inspiré du site Ets Fontaine */
  background-color: #4a90e2;
  color: #fff;
  padding: 0.5rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Layout the header horizontally to accommodate the logo text and navigation */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Logo styling: display company name instead of an image */
.logo {
  display: flex;
  align-items: center;
  /* Réduire l’espace car le logo image est masqué. */
  gap: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
}

/* Logo image styling */
.logo img {
  /* Masquer complètement l’image du logo sur toutes les pages. La
     suppression de l’image dans le HTML de chaque page serait trop
     lourde, donc on cache simplement l’élément via le CSS. */
  display: none;
}

/* Remove default margin from logo anchor */
.logo:focus,
.logo:visited {
  color: #ffffff;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

nav a:hover {
  color: #f7c41f;
  text-decoration: underline;
}

/* Hero section */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70vh;
  color: #fff;
  text-align: center;
  /* Utilise un bleu clair pour la section héro */
  background-color: #4a90e2;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Overlay plus léger pour conserver la luminosité */
  background-color: rgba(255, 255, 255, 0.2);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 90%;
}

.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.hero-content p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.hero-content .btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: #f7c41f;
  color: #0a4275;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.hero-content .btn:hover {
  background-color: #e5b31b;
}

/* Section styling */
.section {
  padding: 2rem 1rem;
  max-width: 1100px;
  margin: 0 auto;
}

.section h2 {
  margin-top: 0;
  color: #0a4275;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 1rem;
}

.section p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

/* Container for the service cards on the home page. Use flexbox so that cards are
   distributed symétriquement et centrés quelle que soit la taille de l’écran. */
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

/* Individual card. Use flexbox to ensure elements inside are spaced evenly
   and that all cards adopt the same height for a harmonised look. */
.card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex: 1 1 250px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.card i {
  font-size: 2.5rem;
  color: #0a4275;
  margin-bottom: 0.5rem;
}

.card h3 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  color: #0a4275;
  font-size: 1.3rem;
}

.card p {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  color: #555;
}

.card a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #4a90e2;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.card a:hover {
  background-color: #357abd;
}

/* CTA section */
.cta {
  background-color: #4a90e2;
  color: #fff;
  padding: 2rem 1rem;
  text-align: center;
}

.cta h2 {
  margin-top: 0;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.cta p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.cta a {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  /* Bouton en jaune pâle pour contraster sur le bleu */
  background-color: #f7c41f;
  color: #4a90e2;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.cta a:hover {
  background-color: #e5b31b;
}

/* Service pages */
.service-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50vh;
  color: #fff;
  text-align: center;
  /* Solid background colour for service pages */
  background-color: #4a90e2;
}

.service-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Overlay léger pour conserver la lisibilité sur le bleu clair */
  background-color: rgba(255, 255, 255, 0.2);
  z-index: 1;
}

.service-hero h1 {
  position: relative;
  z-index: 2;
  font-size: 2.5rem;
  margin: 0;
}

.service-section {
  padding: 2rem 1rem;
  max-width: 900px;
  margin: 0 auto;
}

.service-section h2 {
  color: #0a4275;
  margin-bottom: 1rem;
}

.service-section ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

.service-section ul li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: #555;
}

/* Styles for the intervention zones page */
.zones-list {
  list-style-type: none;
  padding-left: 0;
}

.zones-list li {
  margin-bottom: 0.4rem;
  font-size: 1rem;
  color: #555;
}

.zones-list a {
  color: #0a4275;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.zones-list a:hover {
  text-decoration: underline;
  color: #f7c41f;
}

/* Floating call button for quick access to the phone number */
/* Call button inside the header navigation */
.call-button {
  display: inline-block;
  background-color: #f7c41f; /* jaune vif */
  color: #4a90e2;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.call-button:hover {
  background-color: #e5b31b;
}

/* Add a small left margin when the call button appears in the navigation */
nav .call-button {
  margin-left: 0.5rem;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}

/* Contact form styles */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 500px;
  margin: 1rem auto;
}

.contact-form label {
  font-weight: 500;
  color: #0a4275;
}

.contact-form input,
.contact-form textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  resize: vertical;
}

.contact-form button {
  padding: 0.75rem;
  background-color: #0a4275;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.contact-form button:hover {
  background-color: #083560;
}

/* Large icons in hero sections */
.hero i,
.service-hero i {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  z-index: 2;
}

/* Nouveau layout pour la page d’accueil. La section héro est
   subdivisée en deux colonnes : un bloc de texte et un bloc d’icônes.
   Utilisation de flexbox pour une répartition équilibrée sur les grands
   écrans et un empilement naturel sur mobile. */
.hero-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Bloc de texte dans la section héro. On limite la largeur pour une
   meilleure lisibilité et on aligne le texte à gauche sur les grands
   écrans. */
.hero-text {
  flex: 1 1 300px;
  max-width: 500px;
  color: #ffffff;
  text-align: left;
}

/* Style du paragraphe et du titre dans la zone de texte de la hero */
.hero-text h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.hero-text p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

/* Style du bouton d’appel à l’action dans la hero. On réutilise les
   couleurs de la charte graphique pour assurer la cohérence. */
.hero-text .btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: #f7c41f;
  color: #0a4275;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.hero-text .btn:hover {
  background-color: #e5b31b;
}

/* Bloc d’icônes dans la section héro. Les icônes se répartissent en
   lignes flexibles et sont centrées. */
.hero-icons {
  flex: 1 1 300px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* Chaque icône est contenue dans un petit panneau semi‑transparent. */
.hero-icon {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 1rem;
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Supprimer la décoration de lien et conserver l’apparence du bouton
     lorsque l’icône est un lien <a>. */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.hero-icon i {
  font-size: 2rem;
  margin-bottom: 0.3rem;
  color: #f7c41f;
}

.hero-icon span {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Effet au survol pour les icônes cliquables : légère translation et
   accentuation de l’arrière‑plan pour souligner l’interactivité. */
.hero-icon:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-4px);
}