/*CSS UFO - Outils*/

   

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    background-image: url("../../Images/FondUfo1.jpeg");
    font-family: Tahoma, sans-serif;
    background-size: cover;  
    background-attachment: fixed;
    margin: 5px;
}

a{
    text-decoration: none;
    color: rgb(21, 138, 99);
}

/*block main*/


.Chapitre{
    border-radius: 15px;
    border: 2px solid rgb(147, 67, 223); 
    box-shadow: rgb(147, 67, 223) 1px 1px 12px;
    background-color: rgb(232, 213, 252);
    color: rgb(71, 11, 128);
    font-size: 30px;
    text-align: center;

    padding: 10px 20px;
    margin: 40px 25%
}




/* Partie Conseils*/

.RépartitionPartieConseils{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 0 5%;
}

        /* Blocks*/

.Block1{
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-direction: row;
    flex-wrap: nowrap;

    overflow: hidden;

    border: 2px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px;
    background-color: rgb(1, 48, 43);
    border-radius: 12px;
    
    padding: 20px;

    width: 960px;  
    height: auto; 
}

.Block2{
    display: flex;
    justify-content: center;
    gap: 20px;

    border: 2px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px;
    background-color: rgb(1, 48, 43);
    border-radius: 12px;
    
    padding: 20px;
    margin: 0 15%;

    width: 960px;  
    height: auto;
  
}

.Block3{
    display: flex;
    justify-content: center;
    gap: 20px;

    overflow: hidden;

    border: 2px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px;
    background-color: rgb(1, 48, 43);
    border-radius: 12px;
    
    padding: 20px;
    margin: 0 15%;

    width: 960px;  
    height: auto; 
}


        /* Images*/

.BlockImgConseils{
    border-radius: 12px; 
    border: 2px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px;

    padding: 2px;

    width: 100%;
    overflow: hidden;
    width: 100%;
}

.ImgConseils{
    
    display: block;
    border-radius: 10px;
    width: 100%;
    height: 100%;
}

.ImgConseils1{
    display: block;

    border-radius: 5px;
    margin-bottom: 10px;
    border: 2px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px;
    border-radius: 12px;
    padding: 2px;

    width: 100%;
    height: 100%;
}



.ImgConseils2{
    display: block;

    border-radius: 5px;
    margin-bottom: 10px;
    border: 2px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px;
    border-radius: 12px;
    padding: 2px;

    width: 100%;
    height: 100%;
}

.ImgConseils3{
    display: block;

    border-radius: 5px;
    margin-bottom: 10px;
    border: 2px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px;
    border-radius: 12px;
    padding: 2px;

    width: 100%;
}



.ImgSens{
    display: block;

    border-radius: 5px;
    margin-bottom: 10px;
    border: 2px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px;
    border-radius: 12px;
    padding: 2px;

    width: 100%;
    height: 100%;
}

.ImgSensgMédiaQ{
    visibility: hidden;
    display: none

}


        /* Infos*/


.Infos1{
    display: flex;

    justify-content: center;
    align-items: center;
    text-align: justify;

    background-color: white;
    border: 3px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px ;
    border-radius: 12px;
    color: rgb(21, 138, 99);

    line-height: 150%;
    font-size: 20px;

    width: 100%;
    height: auto;

    padding: 20px;


}

.Infos2{
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;
    text-align: justify;

    background-color: white;
    border: 3px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px ;
    border-radius: 12px;
    color: rgb(21, 138, 99);

    line-height: 150%;
    font-size: 20px;

    padding: 20px;

    width: 100%;
    height: auto;
}


/* Partie liens Structures */

.Annonce{   
    text-align: center;
    background-color:rgb(209, 243, 252);
    border: 2px solid rgb(28, 148, 179);
    box-shadow: rgb(88, 202, 230) 1px 1px 12px;
    border-radius: 12px;
    color: rgb(11, 87, 105);

    font-size: 25px;

    padding: 15px 25px;
    margin: 50px 15%;
}


.répartitionStructures{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15%;
}


.blockStructures{
    display: flex;  
    flex-wrap: wrap;
    text-align: center;

    background-color: white;
    border: 3px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px inset;
    border-radius: 12px;
    
    gap: 10px;

    padding: 10px;

    width: 380px;
    height: auto;
}

.NomStructure{
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: white;
    border: 3px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px ;
    border-radius: 12px;
    color: rgb(21, 138, 99);

    font-size: 18px;
    line-height: 150%;

    padding: 10px;

    width: 100%;
    height: 80px;
}

.BlockImgStructure{
    border-radius: 12px; 
    border: 2px solid rgb(28, 148, 179);
    box-shadow: rgb(88, 202, 230) 1px 1px 12px;

    padding: 2px;

    width: 100%;
    overflow: hidden;
    height: 280px;

}

.ImgStructure{
    display: block;
    border-radius: 10px;
    width: 100%;
    height: 100%;
}

.BlockLienStructure{
    display: block;

    background-color: white;
    border: 3px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px ;
    border-radius: 12px;
    font-size: 17px;
    color: rgb(21, 138, 99);

    padding: 10px;
    margin-bottom: 10px;

    width: 100%;
    height: 50px;  
}



/* Partie liens outils*/

.répartitionOutils{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 50px;
}



.BlockOutils{
    display: flex;
    flex-wrap: wrap;

    background-color: white;
    border: 3px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px inset;
    border-radius: 12px;
    text-align: center;

    gap: 10px;

    padding: 10px;

    width: 320px;
    height: auto;
}

.TitreOutils{
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: white;
    border: 3px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px ;
    border-radius: 12px;
    font-size: 18px;
    color: rgb(21, 138, 99);

    padding: 10px;

    width: 100%;
    height: 80px;
}

.BlockImgOutils{  
    border-radius: 12px;
    border: 4px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px;

    width: 100%;
    overflow: hidden;
    height: 190px;

}

.ImgOutils{
    display: block;
    border-radius: 9px;
    width: 100%;
    height: 100%;
}

.LienOutils{
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: white;
    border: 3px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px ;
    border-radius: 12px;
    color: rgb(21, 138, 99);

    font-size: 17px;

    padding: 10px;

    width: 100%; 
    height: 45px;
}


/* Partie liens outils*/


.répartitionOutilsVisuels{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 50px;
    margin-bottom: 40px;
}



.BlockVisuels{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

    background-color: white;
    border: 3px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px inset;
    border-radius: 12px;
    text-align: center;

    padding: 10px;

    width: 320px;
    height: auto;
}

.TitreVisuels{
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: white;
    border: 3px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px ;
    border-radius: 12px;
    font-size: 18px;
    color: rgb(21, 138, 99);

    padding: 10px;

    width: 100%;
    height: 90px;
}

.NomVisuels{
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: white;
    border: 3px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px ;
    border-radius: 12px;
    font-size: 18px;
    color: rgb(21, 138, 99);

    padding: 10px;

    width: 100%;
    height: 50px;
}

.BlockImgVisuels{  
    border-radius: 15px;
    border: 4px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px;

    width: 100%;
    overflow: hidden;
    height: 220px;

}

.ImgVisuels{
    display: block;
    width: 100%;
    height: 100%;
}

.LienVisuels{
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: white;
    border: 3px solid rgb(88, 230, 182);
    box-shadow: rgb(88, 230, 182) 1px 1px 12px ;
    border-radius: 12px;
    color: rgb(21, 138, 99);

    font-size: 17px;

    padding: 10px;

    width: 100%; 
    height: 45px;
}