body,h1,h2,h3,h4,h5,h6 {
    color: #e26523;
    font-family: "Lato", sans-serif;
}

h1 {
    color: #e26523;
    font-size: 3em;
}

h2 {
    color: #e26523;
    font-size: 2em;
}

h3 {
    color: #e26523;
    font-size: 1.5em;
}

h2,h3,h4,h5,h6,p {
    margin-left: 5%;
    margin-right: 5%;
}

p {
    text-align: justify;
}

ul {
    margin-left: +40px;
    /* retrait souhaité */
}

a {
    text-decoration: none;
    /* Supprime le soulignement */
    /* Optionnel : définit la couleur du lien */
}

a:hover {
    text-decoration: underline;
    /* Optionnel : ajoute un soulignement au survol */
}

.hr-orange {
    border: none;
    border-top: 4px solid #e26523;
    width: 90%;           /* 100% - 2*5% de marge = largeur des paragraphes */
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 2em;
    margin-bottom: 2em;
}

.logo_navBar {
    max-width: 80px;
}

.logo_sociaux {
    width: 2rem;
    height: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.tarifs {
    color: #1506ba;
}

body,html {
    height: 100%;
    color: #181818;
    line-height: 1.8;
    /*font-size: 1vw; /* 1% de la largeur de l'écran */
}


/* Create a Parallax Effect */
.bgimg-1,.bgimg-2,.bgimg-3,.bgimg-4,.bgimg-5,.bgimg-6,.bgimg-7 {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bgimg-0 {
    background-image: url('../images/BDM_1.jpg');
    background-size: cover; /* L'image couvre 100% de la largeur et de la hauteur */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-position: center; /* Centre l'image, rognant le haut et le bas si nécessaire */
    width: 100%; /* Largeur à 100 % */
    aspect-ratio: 16 / 9; /* Ratio largeur/hauteur de 16:9 */
}
.bgimg-1 {
    background-image: url('../images/waga.jpeg');
    background-size: cover; /* L'image couvre 100% de la largeur et de la hauteur */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-position: center; /* Centre l'image, rognant le haut et le bas si nécessaire */
    width: 100%; /* Largeur à 100 % */
    aspect-ratio: 16 / 9; /* Ratio largeur/hauteur de 16:9 */
}
/* Second image (Formation) */
.bgimg-2 {
    background-image: url("../images/PE_Gonflage3.jpg");
    background-size: cover; /* L'image couvre 100% de la largeur et de la hauteur */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-position: center; /* Centre l'image, rognant le haut et le bas si nécessaire */
    width: 100%; /* Largeur à 100 % */
    aspect-ratio: 16 / 9; /* Ratio largeur/hauteur de 16:9 */
}

/* Third image (Baptèmes) */
.bgimg-3 {
    background-image: url("../images/SeranneDeco.jpeg");
    background-size: cover; /* L'image couvre 100% de la largeur et de la hauteur */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-position: center; /* Centre l'image, rognant le haut et le bas si nécessaire */
    width: 100%; /* Largeur à 100 % */
    aspect-ratio: 16 / 9; /* Ratio largeur/hauteur de 16:9 */
}

/* Fourth image (Club) */
.bgimg-4 {
    background-image: url("../images/ClubHeader.jpg");
    background-size: cover; /* L'image couvre 100% de la largeur et de la hauteur */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-position: center; /* Centre l'image, rognant le haut et le bas si nécessaire */
    width: 100%; /* Largeur à 100 % */
    aspect-ratio: 16 / 9; /* Ratio largeur/hauteur de 16:9 */
}

/* Fith image (Accès) */
.bgimg-5 {
    background-image: url("../images/Coupiac.jpeg");
    background-size: cover; /* L'image couvre 100% de la largeur et de la hauteur */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-position: center; /* Centre l'image, rognant le haut et le bas si nécessaire */
    width: 100%; /* Largeur à 100 % */
    aspect-ratio: 16 / 9; /* Ratio largeur/hauteur de 16:9 */
}

/* sixth image (Contact) */
.bgimg-6 {
    background-image: url("../images/PreCoeur.jpeg");
    background-size: cover; /* L'image couvre 100% de la largeur et de la hauteur */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-position: center; /* Centre l'image, rognant le haut et le bas si nécessaire */
    width: 100%; /* Largeur à 100 % */
    aspect-ratio: 16 / 9; /* Ratio largeur/hauteur de 16:9 */
}

/* seventh image (footer) */
.bgimg-7 {
    background-image: url("../images/footer.jpg");
    min-height: 200px;
}

.w3-wide {
    letter-spacing: 10px;
}

.w3-hover-opacity {
    cursor: pointer;
}


/* définition du menu déroulant d'entete */
.hover-orange:hover,
.hover-orange:focus,
.hover-orange:active {
    background-color: #E44D06 !important;
    color: #1c03fd !important;
    text-decoration: none;
}


.bouton-arrondi {
    display: inline-block; /* Permet de gérer les marges et paddings comme un bouton */
    padding: 10px 20px; /* Ajuste la taille du bouton */
    background-color: darkorange; /* Fond orange */
    color: white; /* Texte en blanc */
    font-weight: bold; /* Texte en gras */
    text-decoration: none; /* Supprime le soulignement du lien */
    border-radius: 25px; /* Arrondit les côtés du bouton */
    transition: background-color 0.3s ease; /* Effet de transition */
}

.bouton-arrondi:hover {
    background-color: darkblue; /* Changer de couleur au survol */
}

.bouton-arrondi-small {
    display: inline-block; /* Permet de gérer les marges et paddings comme un bouton */
    padding: 1px 10px; /* Ajuste la taille du bouton */
    background-color: darkorange; /* Fond orange */
    color: white; /* Texte en blanc */
    font-weight: bold; /* Texte en gras */
    text-decoration: none; /* Supprime le soulignement du lien */
    border-radius: 15px; /* Arrondit les côtés du bouton */
    transition: background-color 0.3s ease; /* Effet de transition */
}

.bouton-arrondi-small:hover {
    background-color: darkblue; /* Changer de couleur au survol */
}

/* Bandeau avec une image de fond */
.bandeau {
    width: 100vw; /* Pleine largeur */
    height: 100px; /* Hauteur fixe */
    background-image: url('../images/bandeau.jpg'); /* Chemin de l'image */
    background-size: cover; /* Ajuste la taille de l'image */
    background-position: center; /* Centrage horizontal et vertical */
    background-repeat: no-repeat; /* Évite la répétition */
}

/* Section sous le bandeau */
.contenu-apres-bandeau {
    background-color: #D5D5D5; /* Couleur d'arrière-plan */
    padding: 20px; /* Ajoute un espace intérieur */
}

.video-centered {
    max-width: 100%;
    /* S'adapte à la largeur de l'écran */
    height: auto;
    /* Conserve le ratio d'aspect */
}

/* Responsive design pour le logo de la page d'acceuil*/
.logo_index {
    width: 280px;
    height: auto;
}

@media (max-width: 768px) {
    .logo_index {
        width: 140px;
    }
}

@media (max-width: 480px) {
    .logo_index {
        width: 120px;
    }
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 800px) {
    .bgimg-1,.bgimg-2,.bgimg-3,.bgimg-4,.bgimg-5,.bgimg-6,.bgimg-7,.img-footer {
        background-attachment: scroll;
        min-height: 400px;
    }
    body {
        font-size: 3vw;
        /* Plus grand texte sur très petits écrans */
    }
}