/* Couleurs et Typographie basées sur le thème 'cmv.html' */
:root {
  --color-primary: #5c3d2e; /* Brun foncé (Titres/Logo) */
  --color-secondary: #7b5e50; /* Brun moyen (Détails) */
  --color-text: #5c4a41; /* Brun taupe (Corps de texte) */
  --color-background: #fdfaf7; /* Beige très clair */
  --color-accent: #8d6e63; /* Brun chaud (Boutons/Détails ophtalmologie) */
  --color-light: #efebe9; /* Fond clair pour certaines sections */
}

body {
  font-family: "Roboto", sans-serif;
  background-color: var(--color-background);
  color: var(--color-text);
  margin: 0;
  padding-top: 5rem; /* Espace pour la barre de navigation fixe */
}

/* Styles des sections */
section {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Titres spécifiques */
.logo-text,
h1,
h2 {
  font-family: "Playfair Display", serif;
  color: var(--color-primary);
}

/* Logo dans la barre de navigation */
.logo-text {
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 700;
}

/* Bouton principal personnalisé */
.btn-primary-custom {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
  padding: 10px 25px;
  border-radius: 50px;
  transition: all 0.3s ease;
  font-weight: 500;
}
.btn-primary-custom:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Nav & Footer */
.nav-link-custom {
  color: var(--color-secondary);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}
.nav-link-custom:hover,
.nav-link-custom.active {
  color: var(--color-primary);
}

/* Section Héros */
#home {
  min-height: 70vh;
  display: flex;
  align-items: center;
}
#home h1 {
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.slogan {
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: var(--color-accent);
  font-style: italic;
  margin-bottom: 2rem;
  font-weight: 500;
}

/* Cartes de l'équipe */
.team-card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  text-align: center;
  height: 100%;
}
.team-card:hover {
  transform: translateY(-5px);
}
.doctor-name {
  color: var(--color-primary);
  font-family: "Playfair Display", serif;
  font-weight: 700;
}
.doctor-title {
  color: var(--color-accent);
  font-weight: 500;
}

/* Info de Contact dans la section contact */
.contact-info-item {
  color: var(--color-text);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}
.contact-icon {
  color: var(--color-accent);
  margin-right: 15px;
  font-size: 1.5rem;
  min-width: 30px;
}

/* Style des formulaires */
.form-control,
.form-select {
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid #ccc;
}

/* Pied de page */
footer {
  background-color: var(--color-primary);
  color: var(--color-background);
}
footer a {
  color: var(--color-background);
  transition: color 0.3s ease;
}
footer a:hover {
  color: var(--color-accent);
}

/* ================================================= */
/* AJUSTEMENTS RESPONSIVES (MEDIA QUERIES)           */
/* ================================================= */

/* Pour les appareils très petits (moins de 576px, ex: iPhone SE, anciens mobiles) */
@media (max-width: 575.98px) {
  /* Général */
  body {
    padding-top: 4.5rem; /* Ajuste l'espace pour une barre de nav plus petite */
  }
  section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Section Héros */
  #home h1 {
    font-size: 2.5rem; /* Réduit la taille du titre principal */
  }
  .slogan {
    font-size: 1.2rem;
  }
  /* Les boutons s'étendent sur toute la largeur */
  #home .btn-lg {
    display: block;
    width: 100%;
    margin-bottom: 15px !important;
  }

  /* Navigation: Maintient l'alignement centré pour les éléments empilés */
  .navbar-nav {
    text-align: center;
    padding-top: 10px;
  }

  /* Quick Contact / Horaires: Ajuste le padding et les marges */
  #quick-contact {
    padding: 2rem 1rem;
  }

  /* Titres de sections */
  h2 {
    font-size: 2rem;
  }
}

/* Pour les petits appareils (smartphones en mode portrait, jusqu'à 767.98px) */
@media (max-width: 767.98px) {
  /* Section "À Propos" et "Services" */
  #about .col-lg-6 {
    text-align: center; /* Centre les paragraphes et les éléments */
  }

  /* Cartes de l'équipe et des services: Assure un espacement suffisant */
  .team-card {
    margin-bottom: 1.5rem;
  }

  /* Colonnes des formulaires s'empilent naturellement (grâce à Bootstrap) */
}