/* Style global */
body {
  background-color: #ffffff; /* Fond général en blanc */
  color: #001f3f; /* Texte foncé pour le contraste sur fond blanc */
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Liens */
a, a:hover {
  color: #66b3ff;
}

/* Header en fond blanc */
.header {
  /* Le header utilise déjà le bg-white de Bootstrap */
}

/* Sections en fond blanc */
.hero-section,
.about-section,
.services-section {
  background-color: #ffffff;
}

/* Vous pouvez ajuster le style spécifique à chaque section si nécessaire */

/* Exemple : Pour la section Hero, vous pouvez conserver un effet différent 
   ou ajouter une image de fond si besoin */
.hero-section {
  height: 100vh;
  /* Si vous souhaitez conserver le gradient pour la section hero, 
     commentez la ligne ci-dessous et configurez la couleur souhaitée */
  /* background: linear-gradient(135deg, #001f3f, #003366); */
  background: radial-gradient(circle, #001f3f 10%, #003366 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-section .logo {
  max-width: 400px;
}

/* Pour la section Qui sommes-nous */
.about-section {
  padding: 50px 0;
  text-align: center;
}

/* Pour la section Services */
.services-section {
  padding: 50px 0;
}

/* Styles pour les cartes avec effet flip */
.flip-card {
  perspective: 1000px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 300px; /* Hauteur ajustable selon vos besoins */
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.flip-card-front {
  position: relative;
}
.flip-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flip-card-front .learn-more-btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
.flip-card-back {
  background-color: #ffffff; /* Fond blanc pour la face arrière */
  color: #001f3f; /* Texte foncé pour un bon contraste */
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
}

/* Footer en dégradé bleu nuit */
.footer {
  background: linear-gradient(135deg, #001f3f, #003366);
}