/* Règle générale qui s'applique à tous les éléments (*) de la page */
* {
    font-family: "Grechen Fuemen", serif; /* Définit la police d'écriture pour tout le site */
    box-sizing: border-box; /* Permet d'inclure les marges et les bordures dans la largeur totale des éléments */
}

/* S'assure que toutes les images ne dépassent pas leur conteneur */
img{
    max-width: 100%;
}

/* Classe pour définir une taille de police de 20px */
.fs-30{
    font-size: 20px;
}

/* Classe pour définir une taille de police de 100px (pour les grands titres) */
.fs-100{
    font-size:100px;
}

/* Style de l'en-tête (header) du site */
header{
    position: absolute; /* Position absolue par rapport à la fenêtre du navigateur */
    width: 100%; /* Prend toute la largeur disponible */
    top: 0; /* Aligné tout en haut */
    left: 0; /* Aligné tout à gauche */
    z-index:1; /* Niveau de superposition - permet au header d'être au-dessus des autres éléments */
    padding: 1rem 0; /* Espace intérieur: 1rem en haut et en bas, 0 à gauche et à droite */
}

/* Style de la liste de navigation */
header nav ul{
    list-style: none; /* Supprime les puces de la liste */
}

/* Style des liens dans la navigation */
header nav ul li a{
 font-weight: 800; /* Épaisseur de la police (très gras) */
 color: #FFF; /* Couleur du texte en blanc */
 text-decoration: none; /* Supprime le soulignement des liens */
 transition: all 0.3s ease; /* Animation douce lors des changements (comme au survol) */
}

/* Style des liens au survol de la souris */
header nav ul li a:hover{
    color: #22f2e1; /* Change la couleur du texte au survol */
}

/* Style de la section titre d'accueil */
.homeTitle{
    background-image: url("../images/Dojo.jpg"); /* Image d'arrière-plan */
    background-size: cover; /* L'image couvre tout l'espace disponible */
    width: 100%; /* Prend toute la largeur disponible */
    height: 100vh; /* Prend toute la hauteur de la fenêtre (viewport height) */
    background-position: center; /* Centre l'image d'arrière-plan */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    display: flex; /* Utilise le modèle de disposition flexible */
    flex-direction: column; /* Organise les éléments en colonne */
    align-items: center; /* Centre les éléments horizontalement */
    justify-content: center; /* Centre les éléments verticalement */
}

/* Crée un effet d'assombrissement sur l'image d'arrière-plan */
.homeTitle::after{
    content: ""; /* Contenu vide nécessaire pour que le pseudo-élément s'affiche */
    background-color: rgba(0, 0, 0, 0.5); /* Couleur noire semi-transparente (0.5 = 50% d'opacité) */
    position: absolute; /* Position absolue par rapport à son parent */
    top: 0; /* Aligné tout en haut */
    left: 0; /* Aligné tout à gauche */
    width: 100%; /* Prend toute la largeur */
    height: 100%; /* Prend toute la hauteur */
}

/* Style du contenu texte sur l'image d'arrière-plan */
.homeTitle div{
    position: relative; /* Position relative pour que z-index fonctionne */
    z-index: 1; /* Niveau de superposition - permet au texte d'être au-dessus de l'assombrissement */
    color:#FFFFFF; /* Couleur du texte en blanc */
    font-weight: 800; /* Épaisseur de la police (très gras) */
    text-align: center; /* Centre le texte horizontalement */
}

/* Style des boîtes avec ombre pour les infos judo */
.boxShadow{
    box-shadow: 11px 10px 35px -10px rgba(0,0,0.5,0.75); /* Ajoute une ombre portée: décalage horizontal, décalage vertical, flou, étalement, couleur */
    -webkit-box-shadow: 11px 10px 35px -10px rgba(0,0,0,0.75); /* Version pour les navigateurs Safari/Chrome */
    -moz-box-shadow: 11px 10px 35px -10px rgba(0,0,0,0.75); /* Version pour les navigateurs Firefox */
    border-bottom-left-radius: 16px; /* Arrondit le coin inférieur gauche */
    border-bottom-right-radius: 16px; /* Arrondit le coin inférieur droit */
}

/* Style des images d'arrière-plan pour les infos judo */
.backImg{
    width: 100%; /* Prend toute la largeur disponible */
    height: 300px; /* Hauteur fixe de 300 pixels */
    background-position: center; /* Centre l'image d'arrière-plan */
    background-size: cover; /* L'image couvre tout l'espace disponible */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-image: url("../images/Inscription.jpeg"); /* Image d'arrière-plan par défaut */
}

/* Sélectionne l'image d'arrière-plan du premier infos judo */
.col-lg-4:nth-child(1) .backImg{
    background-image: url("../images/stage.jpg"); /* Remplace l'image par défaut par celle-ci */
}

/* Sélectionne l'image d'arrière-plan du deuxième infos judo */
.col-lg-4:nth-child(2) .backImg{
    background-image: url("../images/Compétition.jpeg"); /* Remplace l'image par défaut par celle-ci */
}

/* Style de la zone de texte pour les infos judo */
.backColor{
    background-color: black; /* Fond noir */
    color: white; /* Texte blanc */
    padding: 20px; /* Espace intérieur de 20px tout autour */
    border-bottom-left-radius: 16px; /* Arrondit le coin inférieur gauche */
    border-bottom-right-radius: 16px; /* Arrondit le coin inférieur droit */
}
footer {
    background-color: #f8f9fa;
    padding: 40px 0;
    border-top: 3px solid #ddd;
    color: #000;
}

footer h2 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
}

footer p {
    margin-bottom: 10px;
    font-size: 16px;
}

footer a {
    color: #000;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
    color: #22f2e1;
}

footer .fa-brands {
    font-size: 24px;
}

footer .d-flex {
    gap: 20px;
}
.custom-inscription-btn {
    background-color: #6610f2;
    color: #fff;
    border: none;
    padding: 12px 25px;
    font-size: 1.1rem;
    border-radius: 50px;
    transition: background-color 0.3s ease;
  }
  
  .custom-inscription-btn:hover {
    background-color: #520dc2;
    color: #fff;
  }
  .hidden {
    display: none;
  }

  .cta-section {
    background: url('images/bg-inscription.jpg') center/cover no-repeat;
    position: relative;
    color: white;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  .cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(33, 37, 41, 0.6); /* assombrit l’image */
    z-index: 0;
  }
  
  .cta-section .container {
    position: relative;
    z-index: 1;
  }