/* Mise en forme du menu */
.mon-menu {
  background-color: #de0f57 !important; /* couleur du menu respectant la charte graphique */
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

/* Mise en forme de l'heure dans le menu */
#clock {
  text-align: center;
  font-weight: bold;
  color: white;
  background-color: #de0f57;
  box-shadow: none; /* pour retirer l'ombre bleu de bootstrap */
}

/* Mise en forme du corps de la page */
body {
  background-color: #f7f7f7; /* couleur de fond de la page gris clair */
}

/*Pour modifier la présentation de l'entreprise*/
.presentation {
  text-align: center;
  margin: 2em auto;
  width: 80%;
}

/*Pour modifier la taille de l'image de présentation*/
.presentation img {
  width: 100%;
}

/*Pour modifier le texte de présentation*/
.presentation-texte {
  text-align: center;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.8;
  color: #555555;
  margin: 35px auto;
  width: 85%;
  padding: 20px;
}

/*Pour modifier le titre de présentation*/
.presentation-texte h1 {
  font-size: 32px;
  margin-bottom: 30px;
}

/*Pour modifier la mise en page de la vidéo */
.video-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.video-container iframe {
  width: 640px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/*Pour modifier la présentation des témoignages*/
.temoignages {
  text-align: center;
  margin: 3em auto;
  width: 70%;
}

/*Pour modifier le titre des témoignages*/
.temoignages h1 {
  font-size: 32px;
  margin-bottom: 30px;
}

/*Pour modifier les cartes des témoignages*/
.temoignage-card {
  background-color: #FCE8EF;
  border-radius: 15px;
  padding: 20px;
  min-height: 180px;
}

/*Pour modifier le nom des personnes*/
.temoignage-card h5 {
  color: #DE0F57;
  font-size: 22px;
  font-weight: normal !important;
}

/*Pour modifier le texte des témoignages*/
.temoignage-card .card-text {
	font-size: 16px;
	color: #444444;
}

/*Pour modifier les étoiles*/
.etoiles {
  color: #DE0F57;
  font-size: 22px;
}

/* Pour afficher les flèches du carrousel */
#carouselTemoignages .carousel-control-prev,
#carouselTemoignages .carousel-control-next {
  width: 10%;
  opacity: 1;
}

/* Pour modifier l'apparence des flèches */
#carouselTemoignages .carousel-control-prev-icon,
#carouselTemoignages .carousel-control-next-icon {
  background-color: #DE0F57;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-size: 50%;
}

/* Conteneur plein écran en arrière-plan */
#balloon-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1; /* pour que les ballons passent au 1er plan */
  pointer-events: none; /* Permet de cliquer à travers les ballons */
}

/* Style de base du ballon */
.balloon {
  position: absolute;
  bottom: -150px; /* Démarre en dessous de l'écran */
  width: 60px;
  height: 75px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; /* Forme des ballons */
  animation: flyUp 8s linear infinite;
}

/* La petite attache au bas du ballon */
.balloon::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 26px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid rgba(0, 0, 0, 0.2); /* coloré par le JS */
}

/* La ficelle du ballon */
.string {
  position: absolute;
  bottom: -45px;
  left: 29px;
  width: 1px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.2);
}

/* Animation d'envol et de balancement */
@keyframes flyUp {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }

  50% {
    transform: translateY(-50vh) translateX(30px) rotate(5deg);
  }

  100% {
    transform: translateY(-120vh) translateX(-20px) rotate(-5deg);
    opacity: 0;
    /* Disparaît en haut */
  }
}

/* Pour modifier le footer et la mise en forme de ce qu'il comporte*/
footer {
  background-color: #DE0F57;
  color: white;
  text-align: center;
  padding: 20px;
  margin-top: 30px;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

footer a {
  color: white;
  text-decoration: none;
  margin: 10px;
}

footer a:hover {
  text-decoration: none;
  font-weight: bold;
  color: inherit;
}

/* Mise en forme des cards selon la charte graphique */
.body-biography-bleu {
  background-color: #10162F; /* couleur de fond bleu foncé */
  color: white; /* texte blanc */
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

/* Mise en forme des boutons bleus lorsqu'ils ne sont pas survolés */
.mon-bouton-bleu,
.mon-bouton-bleu:focus,
.mon-bouton-bleu:active {
  background-color: #10162F !important; /* bouton bleu foncé */
  color: white !important;
  box-shadow: none; /* pour retirer l'ombre bleu de bootstrap */
  text-decoration: none; /* pour retirer le soulignement par défaut */
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

.body-biography-rose {
  background-color: #de0f57; /* couleur de fond rose */
  color: white;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

/* Mise en forme des boutons roses lorsqu'ils ne sont pas survolés */
.mon-bouton-rose,
.mon-bouton-rose:focus,
.mon-bouton-rose:active {
  background-color: #de0f57 !important; /* couleur de fond rose */
  color: white !important; /* texte blanc */
  box-shadow: none;
  text-decoration: none;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  border: 0 !important;
}

.body-biography-bordeaux {
  background-color: #4A0218; /* couleur de fond bordeaux */
  color: white;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

/* Mise en forme des boutons bordeaux lorsqu'ils ne sont pas survolés */
.mon-bouton-bordeaux,
.mon-bouton-bordeaux:focus,
.mon-bouton-bordeaux:active {
  background-color: #4A0218 !important;
  color: white !important;
  box-shadow: none;
  text-decoration: none;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

/* Mettre les titres des cards en gras */
.card-title {
  font-weight: bold !important;
}

/* Arrondir les angles des cards */
.card-custom {
  border-radius: 15px !important;
  overflow: hidden !important;
  /* force l'image et le contenu à suivre l'arrondi sans déborder */
  width: 100%;
}


/* Effet visuel au survol des boutons des cards */
.btn-zoom {
  transition: transform 0.2s ease;
}

.btn-zoom:hover {
  transform: scale(1.05); /* Grossit le bouton de 5% */
  font-weight: bold !important; /* passe le texte en gras au survol */
}

/*Mise en forme titre popup */
.modal-title {
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

/* Mise en forme des titres 1 */
h1 {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  text-align: center;
}

.h1-rose {
  color: #de0f57; /* Texte rose */
  font-weight: bold !important; /* texte gras*/
}

.h1-bleu {
  color: #10162F; /* Texte bleu */
  font-weight: bold !important; /* texte gras*/
}

.h1-bordeaux {
  color: #4A0218; /* Texte bordeaux */
  font-weight: bold !important; /* texte gras*/
}

/* Mise en forme des titres 2 */
h2 {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

.h2-rose {
  color: #de0f57; /* Texte rose */
}

.h2-bleu {
  color: #10162F; /* Texte bleu */
}

.h2-bordeaux {
  color: #4A0218; /* Texte bordeaux */
}

/* Mise en forme des titres 3 */
h3 {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

.h3-bleu {
  color: #10162F; /* Texte bleu */
}

/* Mise en forme paragraphe */
p, ul, li {
	font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
}

/* Mise en forme de la FAQ */
/* Etat replié par défaut */
.card-header .btn.collapsed {
  background-color: #10162F !important; /* couleur de fond bleu foncé */
  color: white !important; /* couleur du texte blanc */
  text-decoration: none !important;
  padding: 1rem 1.5rem; /* marge interne du header */
  border-top-left-radius: 15px !important; /* por arrondir les angles du haut du header */
  border-top-right-radius: 15px !important;
}

.card-header .btn.collapsed:hover {
  color: white !important; /* Maintient la couleur du texte au survol */
  font-weight: bold;
  text-decoration: none !important;
  opacity: 0.9; /* effet visuel au survol */
}

.card-header .btn:not(.collapsed) {
  background-color: #de0f57 !important; /* couleur de fond rose */
  color: white !important; /* couleur de texte blanc */
  text-decoration: none !important; /* Enlève le soulignement du bouton */
  padding: 1rem 1.5rem; /* Ajoute une marge autour entre le texte et le bord du header */
  border-top-left-radius: 15px !important;
  border-top-right-radius: 15px !important;
}

/* Change les couleurs lors du survol du bouton ouvert dans la FAQ */
.card-header .btn:not(.collapsed):hover {
  background-color: #cd044a !important; /* Un rose légèrement plus foncé au survol */
  color: white !important;
  text-decoration: none !important;
}

/* Mise en forme des questions de la FAQ quand elles ne sont pas ouvertes */
.card-header .btn:focus,
.card-header .btn.focus {
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Mise en forme des réponses de la faq */
.card-body-faq {
  padding: 1.5rem !important;
  margin: 0 !important;
  background-color: #de0f57 !important; /* couleur du fond des réponses la FAQ */
  color: white !important; /* couleur du texte */
  text-align: justify;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
}

/* Retirer les bordures et l'ombre bleue des headers des questions de la FAQ */
.accordion-clean > .card {
  border: 0 !important;
  box-shadow: none !important;
}

/* Pour mettre en forme le formulaire de contact */

.contact {
	font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
}

.formulaire {
	border: solid 1px #de0f57;
}

/* Pour mettre en forme les informations de l'entreprise */
.informations {
	border: solid 1px #de0f57;
}