/*===================== Structure =====================*/

#conteneur {
    display: flex; /* Utilisation de flexbox pour aligner horizontalement les éléments */
    align-items: auto; /* Permet à #centrale de s'adapter en hauteur au contenu */
}

.cote {
    background-color: #ffffff;
    flex: 1; /* Les éléments .cote prennent un espace égal */
}

#centrale {
    background-color: #f9f9f9;
    flex: 9; /* L'élément #centrale prend plus d'espace */
    padding: 20px; /*espacement interne */
    display: flex; /* Utilisation de flexbox pour aligner verticalement les éléments */
    flex-direction: column; /*éléments disposés en colonne */
}

#bandeau{
    background-image: url("../IMAGES/vue_html.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 300px;
}

/*===================== Horizontales =====================*/

.divHorizontale{
    border-radius: 20px; /*arrondir les coins */
    background-color: #f8f8f8;
    display: inline-block; /* Pour aligner horizontalement */
    width: 90%; /* Largeur de chaque petite div */
    height: auto; /* Hauteur de chaque petite div */
    margin: 20px; /* Espacement entre chaque petite div */
    border-left: 2px solid #000; /* Bordure gauche de 2 pixels de largeur, couleur noire */
    border-right: 2px solid #000; /* Bordure droite de 2 pixels de largeur, couleur noire */
}

hr{
    width: 90%;
    color: black;
}

/*===================== Contenu Textuel =====================*/

h1{
    text-align: center;
}

h2{
    text-align: center;
}

p{
    font-size: 1.5em;
    text-align: justify;
    padding-left: 10%; /* Ajoute de l'espace à gauche */
    padding-right: 10%; /* Ajoute de l'espace à droite */
    max-width: 80%;
}

.titre{
    border-radius: 20px; /*arrondir les coins */
    background-color: #FFFFFF;
    width: 60%; /* Largeur de chaque petite div */
    height: auto; /* Hauteur de chaque petite div */
    margin: 20px; /* Espacement entre chaque petite div */
    position: relative;
    top: 25%;
    left: 20%;
}

/*===================== Autre contenu =====================*/

.bouttonAcceuil{
    text-align: center;
}
 
/*===================== Shemas =====================*/

.divClaire{
    border-radius: 10px; /*arrondir les coins */
    background-color: #DDDDDD;
    height: auto;
    width: 300px;
    margin: 50px; /*marge autour de chaque divClaire */
    display: inline-block; /* aligner horizontalement */
}

.divShema{
    border-radius: 20px; /*arrondir les coins */
    background-color: #f8f8f8;
    display: inline-block; /* Pour aligner horizontalement */
    width: 90%; /* Largeur de chaque petite div */
    height: auto; /* Hauteur de chaque petite div */
    margin: 20px; /* Espacement entre chaque petite div */
    border-left: 2px solid #000; /* Bordure gauche de 2 pixels de largeur, couleur noire */
    border-right: 2px solid #000; /* Bordure droite de 2 pixels de largeur, couleur noire */
    text-align: center; /* Pour aligner le contenu au centre */
}

#veille{
    background-image: url("../IMAGES/Veille.JPG");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 250px;
    width: 400px;
    border-radius: 20px;
}

#site{
    background-image: url("../IMAGES/Logo_Final.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 250px;
    width: 400px;
    border-radius: 20px;
}

#pdf{
    background-image: url("../IMAGES/Logo_C_sharp.svg.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 250px;
    width: 400px;
    border-radius: 20px;
}

#C{
    background-image: url("../IMAGES/C.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 125px;
    width: 200px;
    border-radius: 20px;
}

#Cpp{
    background-image: url("../IMAGES/C++.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 125px;
    width: 200px;
    border-radius: 20px;
}

#pdf2{
    background-image: url("../IMAGES/Logo_C_sharp.svg.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 125px;
    width: 200px;
    border-radius: 20px;
}

#java{
    background-image: url("../IMAGES/Logo_Java.GIF");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 125px;
    width: 200px;
    border-radius: 20px;
}

#php{
    background-image: url("../IMAGES/PHP.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 125px;
    width: 200px;
    border-radius: 20px;
}

#vs{
    background-image: url("../IMAGES/VS.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 125px;
    width: 200px;
    border-radius: 20px;
}

#xaml{
    background-image: url("../IMAGES/XAML.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 125px;
    width: 200px;
    border-radius: 20px;
}

#eclipse{
    background-image: url("../IMAGES/eclipse.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 125px;
    width: 200px;
    border-radius: 20px;
}

#python{
    background-image: url("../IMAGES/python.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 125px;
    width: 200px;
    border-radius: 20px;
}

#gms{
    background-image: url("../IMAGES/GMS.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 125px;
    width: 200px;
    border-radius: 20px;
}

#html{
    background-image: url("../IMAGES/HTML_CSS_JS.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 125px;
    width: 200px;
    border-radius: 20px;
}

#php{
    background-image: url("../IMAGES/PHP.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 125px;
    width: 200px;
    border-radius: 20px;
}

#appli1{
    background-image: url("../IMAGES/CaptureAppli1.PNG");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 250px;
    width: 400px;
    border-radius: 20px;
}

#appli2{
    background-image: url("../IMAGES/Appli2-3.PNG");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 250px;
    width: 400px;
    border-radius: 20px;
}

#looping{
    background-image: url("../IMAGES/Looping.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 125px;
    width: 200px;
    border-radius: 20px;
}

#mysql{
    background-image: url("../IMAGES/MySQL.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 125px;
    width: 200px;
    border-radius: 20px;
}

#packettracer{
    background-image: url("../IMAGES/PacketTracer.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 125px;
    width: 200px;
    border-radius: 20px;
}

#sql{
    background-image: url("../IMAGES/SQL.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 125px;
    width: 200px;
    border-radius: 20px;
}