#main-btssio {
    flex: 1 0 auto; /* Pousse le footer vers le bas */
    padding: 100px 10%; /* Ajusté pour centrer le contenu */
    text-align: center;
}

#title-btssio {
    color: #475465;
    text-align: left;
    font-size: xx-large;
    text-decoration: underline;
}

#desc-btssio {
    color: #475465;
    text-align: justify;
    margin: 25px auto;
}

.option {
    display: flex;
    justify-content: center; /* Centre les deux blocs horizontalement */
    gap: 40px;               /* Espace entre les deux blocs */
    margin-top: 50px;
    align-items: stretch;    /* Force les blocs à avoir la même hauteur */
}

#slam, #sisr {
    flex: 1;                 /* Les deux blocs prennent la même largeur */
    max-width: 600px;        /* Empêche qu'ils deviennent trop larges */
    min-height: 525px;
    border: 2px solid #475465;
    background-color: #475465;
    padding: 40px;
    text-align: left;
    box-sizing: border-box;  /* Crucial pour que le padding ne casse pas la ligne */
}

#title-slam, #title-sisr {
    text-align: center;
    color:  #B6CDE8;
    margin-bottom: 40px;
    font-size: xx-large;
    border-bottom: 5px solid  rgba(182, 205, 232, 0.7);
}

#slam p, #sisr p {
    margin: 10px;
    color:#B6CDE8;
}

#slam ul, #sisr ul {
    display: block;
    padding-left: 50px;
    color:#B6CDE8;
}

#slam li, #sisr li {
    color:#B6CDE8;
}

#slam span, #sisr span {
    font-weight: bold;
    color:#B6CDE8;
}

/* Responsive */

@media screen and (max-width: 1850px) {
    #title-btssio{
        font-size: x-large;
    }
    
    #desc-btssio{
        font-size: medium;
    }

    .paragraphe, .list, .paragraphe span{
        font-size: medium;
    }

    #title-slam, #title-sisr{
        font-size: large !important;
    }

}

@media screen and (max-width: 1330px) {
    .paragraphe, .list, .paragraphe span{
        font-size: small;
    }

    #title-slam, #title-sisr{
        font-size: medium !important;
    }

}

@media screen and (max-width: 1200px) {
    body{
        letter-spacing: 1px;
    }

    .option {
        flex-direction: column; /* Aligne les blocs verticalement sur tablette/mobile */
        align-items: center;
    }
    
    #slam, #sisr {
        width: 100%; /* Prend toute la largeur disponible */
        max-width: 100%;
        min-height: auto; /* Laisse le bloc s'adapter au texte */
    }

    #main-btssio {
        padding: 50px 20px;
    }
}

@media screen and (max-width: 1024px) {
    #title-btssio{
        font-size: large;
    }
    
    #desc-btssio{
        font-size: small;
    }
    .paragraphe, .list, .paragraphe span{
        font-size: x-small;
    }

    #title-slam, #title-sisr{
        font-size: small !important;
    }
    .ul-list{
        padding-left: 25px;
    }

}

@media screen and (max-width: 768px) {
    #slam, #sisr {
        padding: 15px;
    }

    #slam ul, #sisr ul {
        padding-left: 25px;
    }
}

@media screen and (max-width: 425px) {    
    
    #desc-btssio{
        font-size: x-small;
    }
    
    .paragraphe, .list, .paragraphe span{
        font-size: xx-small;
    }    

    #title-slam, #title-sisr{
        margin-bottom: 0;
    }
}

@media screen and (max-width: 375px) {  
    #desc-btssio{
        font-size: xx-small;
    }  
    .paragraphe, .list, .paragraphe span{
        font-size: 7px;
    }
}