/* body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
        } */

        .btn{
            display: inline-block;
            padding: 12px 24px;
            font-size: 18px;
            font-weight: bold;
            color: #222; /* Texte foncé */
            background-color: #87CEEB; /* Bleu ciel */
            border: none;
            border-radius: 8px;
            text-decoration: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: #00BFFF; /* Bleu ciel plus intense au survol */
        }

        #section{
            margin-top: 100px;
            padding: 20px;
            background-color: #f1f1f1;
            border-radius: 8px;
        }
        #programme{
           margin-top: 100px;
            padding: 20px;
            background-color: #F0F7FF;
            border-radius: 10px;
            text-align: center;
            list-style: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        #programme ul li{
            margin: 10px 0;
            padding: 10px;
            background-color: #00BFFF;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            list-style: none;
            transition: 1s all;
        }

        #programme ul li:hover{
            transform: scale(1.1);
            cursor: pointer;
            /* margin: 10px 0;
            padding: 10px;
            background-color: #00BFFF;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            list-style: none; */
        }

        #programme ol li{
            margin: 10px 0;
            padding: 10px;
            /* background-color: #00BFFF; */
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            list-style: none;
        }


        #programme img{
            border-radius: 10px;
        }

        #presentation{
            margin-top: 100px;
            padding: 20px;
            background-color: #F0F7FF;
            border-radius: 10px;
            text-align: center;
            list-style: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }


#su {
    color : red;
}
#so{
    color: yellow;
}
#sb{
    color: #1c99ff;
}
#hero{
    position: relative; /* Nécessaire pour le positionnement relatif des enfants */
    width: 100%; /* Ajustez selon votre besoin */
    /* max-width: 600px; Largeur maximale de l'image */
}

.background-image {
    width: 100%; /* L'image s'adapte à la taille du conteneur */
    display: block; /* Enlève l'espace sous l'image */
}
.overlay {
    position: absolute; /* Positionnement absolu pour superposer */
    top: 0; /* Aligne avec le haut du conteneur */
    left: 0; /* Aligne avec la gauche du conteneur */
    width: 100%; /* S'assure que la forme couvre tout le conteneur */
    height: 100%; /* S'assure que la forme couvre tout le conteneur */
    background-color: rgba(223, 17, 17, 0.5); /* Noir avec 50% de transparence */
}
#titre{
    background-color: rgba(0, 153, 255, 0.829);
    padding: 2rem;
    border-radius: 10px 0px;
    opacity: 1; /* état initial */
    animation: fade-in linear forwards; /* l'animation */
    animation-timeline:initial; /* synchroniser avec le scroll */
}
#theme{
    color: rgba(255, 255, 255, 0.719);
}

@media (max-width: 768px), (orientation: portrait) {
    #UOB{
      font-size: 2rem;
      /* color: aqua; */
      margin-bottom: 0;
    }
    #UOB h2{
        font-size: 1.7rem;
        margin-top: 0;
      /* color: aqua; */
    }
    #inscription{
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        #inscription img{
            width: 700px;
            height: 300px;
        }
    #titre{
        background-color: rgba(0, 153, 255, 0.829);
        padding: 1rem;
        margin-left: 15pt;
        /* margin-right: 15pt; */
        border-radius: 10px 0px;
        opacity: 1; /* état initial */
    }
  }
  @media (max-width: 2500px),(min-width: 1024px){
    body{
        font-family: roboto;
        font-size: 16rem;
    }
    @media (max-width: 1024px),(min-width: 768px){
    body{
        font-family: roboto;
        font-size: 16rem;
    }
  }
  }

   .download-btn {
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            color: white;
            background-color: #007bff;
            text-decoration: none;
            border-radius: 5px;
        }
        .download-btn:hover {
            background-color: #0056b3;
        }
  

        .pdf-link {
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            font-size: 18px;
            color: #333;
            border: 2px solid #d32f2f;
            padding: 10px;
            border-radius: 5px;
            background-color: #fff;
        }
        .pdf-link:hover {
            background-color: #d32f2f;
            color: white;
        }
        .pdf-icon {
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }
        #inscription{
            display: flex;
        }