/* Importation de la police "Noto Sans" depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* Style général du corps */
body {
    font-family: "Noto Sans", sans-serif;
}

/* Fond de la page d'accueil */
#bodyIndex {
    background-image: linear-gradient(to left, #85c3f2, #6bb8f6, #4facfa, #319ffd, #0092ff);
}

/* Style du titre "Qui sommes-nous ?" */
#titreQuiSommesNous {
    font-size: 2.5rem;
}

/* Taille des images du logo */
.tailleGVEM {
    height: 50px;
    width: 50px;
}

/* Section avec une image de fond principale */
.fontImage1 {
    background-image: url("../images/mountains-4387209_1920.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 250px;  
}

/* Taille des icônes de logo */
.tailleLogo {
    font-size: 40px;
}

.fa-brands:hover  {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Style des images en pleine largeur */
.tailleImage {
    width: 100%;      
    height: 100%;
}

/* Annulation des marges sur les côtés */
.tailleEcranMax {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Style des titres principaux */
.titre {
    font-size: calc(1rem + 2vw);
    color: white;
}

/* Style du texte avec un fond blanc */
.fontTexte {
    background-color: white;
    color: black;
    font-size: 30px;
}

/* Style du pied de page */
.fontFooter {
    background-color: black;
    color: white;
}

/* Style des cases d'affichage */
.case {
    border-radius: 7px;
    background-color: rgb(229, 240, 247);
    border-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;  /* Centre le contenu horizontalement */
    text-align: center;  
}

/* Style des titres (h1) */
h1 {
    font-size: 30px;
    color: white;
}

/* Alignement centré */
.centree {
    text-align: center;
}

/* Style des cases contenant des logos */
.caseLogo {
    background-color: #85c3f2;
    border-radius: 5px;
    font-size: 50px;
    display: flex;
    justify-content: center;  /* Centrage horizontal */
    align-items: center;      /* Centrage vertical */
    width: 70px;              /* Taille de la case */
    height: 70px;            
}

/* Effet au survol des cases contenant des logos */
.case:hover .caseLogo {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Style général des icônes */
i {
    font-size: 40px;
}

/* Style des sous-titres (h3) */
h3 {
    color: #0092ff;
    height: 50px;
}

/* Liens sans soulignement*/
a {
    text-decoration: none;
}

/* Couleur blanc*/
.blanc {
    color :white !important;
}

/* Bouton qui permet d'aller a la tête de la page */
.btnRemonterEnHaut {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: #fff;
    border: double white 2px;
    background-color: #0092ff;
    padding: 10px 15px;
    cursor: pointer;
    box-shadow: -3px 5px 25px black;
    transform: scale(0.85);
    
    /* Superposition du bouton en mode prioritaire */
    /* Règle un mal fonctionnement en mode smartphone */
    z-index: 1000;
}

/* Styles pour le bouton "btnRemonterEnHaut" lorsqu'il est survolé */
.btnRemonterEnHaut:hover {
    transform: scale(1);
    transition: transform 0.3s ease;

    /* Animation de survol avec une durée de 0.5s et le nom "retourSelection" */
    animation-duration: 0.5s;
    animation-name: retourSelection;
    animation-fill-mode: both;
}

/* Animation "retourSelection" */
@keyframes retourSelection {
  to {
      background-color: #85c3f2; /* Fond vert lors du survol */
      border: dotted white 3px; /* Bordure en pointillés blanche avec une épaisseur de 3px */
      opacity: 0.8; /* Opacité à 80% */
      font-size: 18px; /* Taille de la police à 18px */
  }
}