@font-face{
    font-family: 'identite';
    src: url(../font/Gameplay.ttf)format('truetype');
}
@font-face {
    font-family: 'Portfolioo';
    src: url(../font/Linebeam.ttf)format('truetype');
}

body{
    background-color: #000000;
}


header{
    background-color: black;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;

}
.logo_top{
    height: auto;
    width:50%;
    float: left;
    margin: auto;
    display: block;
}
#Portfolio{
    font-family: 'Portfolioo';
    font-size: 5vw;
    color : #00B3FF;
    width: 50%;
}
#theme{
    font-family: 'identite';
    font-size: 4vw;
    padding-top: 5px;
    color : #00B3FF;
}
header a{
    width: 30%;
}
header a img{
    height: auto;
    width:75%;
    float: left;
    margin: auto;
}
.top_header{
    width: 70%;
    display: flex;
    flex-direction: column;
}
.top_header h1 {
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: row;
}
nav{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 1.5em;
    margin: auto;
    width: 100%;
}
nav a{
    border-color: cyan;
    border-width: 2px;
    border-style: solid;    
    border-radius: 5rem;
    background-color: #1c1c1f;
    padding: 10px;
    color : cyan;
    background-color: black;
    width: 15%;
    min-width: 180px;
    margin: auto;
    margin-top: 5px;
    text-align: center;
    transform: scale(1);
    transition: all 1000ms;
}
nav a:hover{
    border-color: white;
    background-color: #00B3FF;
    color: white;
    transform: scale(1.5);
    transition: all 500ms;  
}


/* TOUT CE QUI SE TROUVE AU-DESSUS CONCERNE L'EN-TÊTE*/
a{
    color :cyan;
    font-family: Verdana, Tahoma, sans-serif;
}
a:hover{
    z-index: 1;
}
h1{
    font-size: 2.5em;
    color: cyan;
}
h2{
    text-decoration: underline;
    font-size: 2em;
    font-family: "identite";
    text-align: left;
    padding-left: 20px;
    height:10%;
    margin-bottom: auto;
}
h3{
    font-size: 1.2vw;
    text-decoration: underline;
}
p{
    text-align:justify;
    padding : 2px;
    font-size: 1.6em;
    /* margin: 5px; */
    margin-right: 5px;
    margin-left: 5px;
}

.ParaBlanc {
    background-color: rgb(239, 239, 239);
    color : #00B3FF ;
    padding: 1px;
    border-radius: 10px;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 10px;

    display: flex;
    flex-direction: column;
    
}
/*Début responsive du para blanc acceuil*/
.ParaBlanc img{
    width: 25%;
    height: auto;
    border-radius: 15px;
    box-shadow: 5px 5px 5px 5px gray;
    margin : auto;
}
.ParaBlanc p{
    width: 100%;
    height: auto;
    margin: auto;
}
.ParaBlanc a{
    color: rgb(5, 113, 163);
}
.ParaBlanc fieldset{
    width:95%;
    height:auto;
    margin: auto;
    padding: 0px;
    padding-left: 15px;
    padding-right: 7px;
    padding-bottom: 10px;
}
.ParaBlanc .para_dans_para_test{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    width: 60%;
    margin: auto;
}
.ParaBlanc .para_dans_para_test fieldset p{
    padding-bottom: 5px;
    margin-bottom: 5px;
}
.ParaBlanc .av-inc{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    /* text-align: center; */
}
.ParaBlanc .av-inc div{
    width: 50%;
    margin: auto;

}
/*fin responsive parablanc*/

.container {
    display: grid;
    /* min-width: 600px; */
    width: 100%;
    height: auto;
    /* aspect-ratio: 1 / 1; */
    gap: 10px;
    grid-template-areas:
      'I H'
      'I P'
      'I P'
      'I P';
    /* background: pink; */
    grid-template-columns: 1fr 2fr;
    margin: auto;
    margin-top: 10px;
  }
  #para1 {
    grid-area: H;
    /* background: cyan; */
    margin: auto;
    margin-right: 15px;
    width: 98%;
    text-align: justify;
  }
  #img1 {
    grid-area: I;
    /* background: magenta; */
    object-fit: cover;
    width: 90%;
    height: auto;
    max-height: 447px;
    max-height: 681.5px;
    border-radius: 15px;
    box-shadow: 5px 5px 5px 5px gray;
    margin : auto;
  }
  #para2 {
    grid-area: P;
    /* background: yellow; */
    width: 97%;
    margin: auto;
  }
  @media (max-width: 800px) {
    .container {
      grid-template-areas:
        'H'
        'I'
        'P';
        margin: auto;
        width: 100%;
        align-items: center;
        text-align: center;
        grid-template-columns: 100%;
    }
    #para1{
        width: 95%;
        text-align: justify;
        margin-right: 0px;
        margin: auto;
    }
    #para2{
        width: auto;
    }
  }
#img_moi{
    float: left;
}

/* Grace au responsive au dessus, cette partie est negligeable
.ParaBlanc table{
    color:00B3FF
}
.ParaBlanc table img{
    scale: 0.75;
}
.ParaBlanc table p{
    color: 00B3FF;
    padding-right: 10px;
}
.ParaBlanc table p em{
    color:rgb(1, 147, 180);
    font-weight: bold;
}*/
.ParaNoir{
    /*background-color: black;*/
    color: #00B3FF;
    padding: 1px;
}
.ParaNoir p{
    color: #00B3FF;
}
fieldset{
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 5px;
}
legend{
    color : black;
    font-size: 1.4em;
}
legend h3{
    font-size: 1.4em;
}
#exp_pro{
    padding: 0px;
    padding-left: 10px;
    padding-right: 10px;
}
.ParaNoir fieldset{
    color : white
}
.ParaNoir legend{
    color : rgb(0, 227, 227);
}
.ParaNoir fieldset h4{
    font-size: 1.3em;
    text-decoration: underline;
}
.ParaNoir fieldset .ent{
    color: rgb(167, 143, 255);
    font-size: 1.3em;
}
.ParaNoir fieldset .duree{
    color: rgb(167, 143, 255);
    font-style: italic;
}
ul{
    font-size: 1.5em;
    color: #7bd7fe;
}
#imgOSI{
    width: 30%;
    height: auto;
    margin: auto;
    margin-left: 10px;
    margin-bottom: 15px;
    box-shadow: slategray 5px 5px 7px 7px;
    border-radius: 15px;
    background-color: white;
    padding: 5px;
    margin-right: 15px;
}
.ParaNoir .Flex_inf_BTS{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 95%;
    margin: auto;
    color: #00B3FF;
    padding: 5px;
    border-color: white;
    border-width: 5px;
    border-radius: 10px;
    border-style: solid;

}
.ParaNoir .Flex_inf_BTS .ele_bts{
    display: flex;
    flex-direction: column;
    width: 45%;
    margin: auto;
} 
.ParaNoir .Flex_inf_BTS .ele_bts h3{
    text-align: center;
    font-size: 1.7em;
    text-decoration: underline;
    font-family: "Portfolioo";
    border-color: aqua;
    color: rgb(0, 227, 227);
}
.ParaNoir .Flex_inf_BTS .ele_bts p{
    text-align: justify;
}
.retour_proj{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
}
.retour{
    border-color: cyan;
    margin: auto;
    border-width: 2px;
    border-style: solid;    
    border-radius: 15px;
    background-color: #000000;
    padding: 7px;
    color : cyan;
    margin-left: 15px;
    font-size: 1.2em;
    margin-top: 20px;
    margin-bottom: 20px;
    transform: scale(1);
    transition: all 500ms;
}
.retour:hover{
    border-color: white;
    background-color: #00B3FF;
    color: white;
    transform: scale(1.5);
    transition: all 500ms;
}
#logo_osi{
    float: right;
    width: 25%;
    height: auto;
    border-radius: 15px;
    box-shadow: 5px 5px 5px black;
    margin: 15px;
}
.forma{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    width: 100%;
}
.forma p{
    width: 70%;
    margin: auto;
}
.forma a{
    width: 375px;
    height: auto;
    background-color: white;
    border-radius: 20px;
    box-shadow: 5px 7px 5px 5px gray;
    padding: 7px;
    margin: auto;
    margin-right: 10px;
    margin-left: 10px;
    text-align: center;
    display: flex;
    align-self: center;
}
.forma a img{
    width: 100%;
    margin: 10px;
    padding: 15px;
    border: none;
    box-shadow: none;
}
#OSI-explication{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
#ele{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
#ele p{
    width: 70%;
    margin: auto;
}
#ele a{
    width: 25%;
    margin: auto;
}
#ele a img{
    width: 100%;
}
.proj{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}
.proj .content_proj{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.proj .content_proj p{
    width: 75%;
    margin: auto;
    /* font-size: 1.3vw; */
}
.proj .content_proj img{
    width: 480px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 5px 7px 5px 5px gray;
    padding: 7px;
    margin: auto;
    margin-right: 10px;
    margin-left: 10px;
    max-height: 280px;
}
#CV{
    margin: auto;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    align-self: center;
    font-size: 2.5vw;
    color: black;
    border-style: solid;
    border-color: #00B3FF;
    border-radius: 10rem;
    border-width: 5px;
    box-shadow: slategray 5px 5px 15px;
    transform: scale(1);
    transition: all 1500ms;

}
#CV:hover{
    color: white ;
    background-color: #00B3FF;
    border-color: black;
    box-shadow: slategray 5px 5px 15px;
    transform: scale(1.5);
    transition: all 500ms;
}

.synth{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.synth a{
    margin: auto;
    margin-top: 20px;
    margin-bottom: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    align-self: center;
    font-size: 2vw;
    color: white;
    border-style: dashed;
    border-color: white;
    border-radius: 10rem;
    border-width: 5px;
    box-shadow: slategray 5px 5px 15px;
    transform: scale(1);
    transition: all 1500ms;
}

.synth a:hover{
    color: #00B3FF;
    border-style: solid;
    border-color: #00B3FF;
    border-radius: 10rem;
    border-width: 5px;
    box-shadow: slategray 5px 5px 15px;
    transform: scale(1.2);
    transition: all 500ms;
}

.Docs{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.Docs a{
    margin: auto;
    margin-top: 20px;
    height: auto;
    width: 40%;
    color: black;
    text-align: center;
    padding: 10px;
    font-size: 1.3vw;
    border-style: solid;
    border-color: #00B3FF;
    border-radius: 10rem;
    border-width: 5px;
    box-shadow: slategray 5px 5px 15px;
    transform: scale(1);
    transition: all 1500ms;
}

.Docs a:hover{
    color: white ;
    background-color: #00B3FF;
    border-color: black;
    box-shadow: slategray 5px 5px 15px;
    transform: scale(1.2);
    transition: all 500ms;
}

.veille{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.veille .para{
    background-color: white;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: auto;
    align-items: center;
    align-self: center;
    width: 45%;
    margin: auto;
    margin-top: 10px;
}

.veille .para img{
    width: 100%;
    height: auto;
    margin: auto;
    border-radius: 15px;
    background-color: white;
    z-index: 1;
    opacity: 100%;
    transition: all 1500ms;
}

.veille .para .txt_veille{
    z-index: 0;
    position: absolute;
    width: inherit;
    height: inherit;
    margin-left: 3%;
    margin-right: 3%;
    text-align: center;
}

.veille .para img:hover{
    width: 100%;
    height: auto;
    border-radius: 15px;
    background-color: white;
    opacity: 5%;
    transition: all 500ms;
}

.veille a{
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    height: auto;
    width: 66%;
    color: black;
    text-align: center;
    padding: 10px;
    font-size: 1.3vw;
    border-style: solid;
    border-color: #00B3FF;
    border-radius: 10rem;
    border-width: 5px;
    box-shadow: slategray 5px 5px 15px;
    transform: scale(1);
    transition: all 1500ms;
}

.veille a:hover{
    color: white ;
    background-color: #00B3FF;
    border-color: black;
    box-shadow: slategray 5px 5px 15px;
    transform: scale(1.2);
    transition: all 500ms;
}

.ResumProj .TXTIMG {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.ResumProj .TXTIMG p{
    width: 65%;
    height: auto;
    margin: auto;
    text-align: justify;
}

.ResumProj .TXTIMG a{
    width: 30%;
    height: auto;
    margin: auto;
    align-items: center;
}
.ResumProj .TXTIMG a img{
    width: 100%;
    height: auto;
    box-shadow: slategray 5px 5px 15px;
}

.DocProj{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
.DocProj a{
    margin: auto;
    margin-top: 20px;
    padding: 15px;
    width: 40%;
    font-size: 1.3vw;
    color: white;
    border-style: solid;
    border-color: #00B3FF;
    border-radius: 10rem;
    border-width: 5px;
    box-shadow: slategray 5px 5px 15px;
    transform: scale(1);
    transition: all 1500ms;
    text-align: center;
    background-color: black;
}
.DocProj a:hover{
    color: white ;
    background-color: #00B3FF;
    border-color: white;
    box-shadow: whitesmoke 5px 5px 15px;
    transform: scale(1.3);
    transition: all 500ms;
}
.proj a{
    margin: auto;
    margin-bottom: 15px;
    padding: 15px;
    font-size: 1.3vw;
    color: white;
    border-style: solid;
    border-color: #00B3FF;
    border-radius: 10rem;
    border-width: 5px;
    box-shadow: slategray 5px 5px 15px;
    transform: scale(1);
    transition: all 1500ms;
}
.proj a:hover{
    color: white ;
    background-color: #00B3FF;
    border-color: white;
    box-shadow: whitesmoke 5px 5px 15px;
    transform: scale(1.5);
    transition: all 500ms;
}
.ParaBlanc .proj a{
    margin: auto;
    margin-bottom: 15px;
    padding: 15px;
    font-size: 1.3vw;
    color: black;
    border-style: solid;
    border-color: #00B3FF;
    border-radius: 10rem;
    border-width: 5px;
    box-shadow: slategray 5px 5px 15px;
    transform: scale(1);
    transition: all 1500ms;
}
.ParaBlanc .proj a:hover{
    color: white ;
    background-color: #00B3FF;
    border-color: Black;
    box-shadow: whitesmoke 5px 5px 15px;
    transform: scale(1.5);
    transition: all 500ms;
}

#pres-med{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
#pres-med #temp{
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    align-items: center;
}
#pres-med #temp img{
    width: 25%;
    margin: auto;
    /* margin-top: 10px; */
    border-radius: 15px;
    box-shadow: slategray 10px 7px 20px 7px;
}
#pres-med #temp p{
    width: 70%;
    margin: auto;
}
#aligne{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
#aligne p{
    width: 65%;
    margin: auto;
}
#aligne a{
    width: 30%;
    margin: auto;
}
#aligne a img{
    width: 100%;
    background-color: white;
    border-radius: 15px;
    box-shadow: slategray 10px 7px 20px 7px;
}
#CDC{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
#CDC img{
    width: 45%;
    margin: auto;
}
#SolutionOSI{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#SolutionOSI .eleSolution{
    background-color: lightgray;
    box-shadow: slategray 5px 5px 10px;
    border-radius: 15px;
    width: 500px;
    margin: auto;
    height: 275px;
    margin-top: 15px;
    align-items: center;
    padding: 5px;
}
#SolutionOSI .eleSolution img{
    border: none;
    box-shadow: none;
    margin-top: 5px;
}
.contenu{
    opacity: 1;
    transition: all 700ms;
    text-align: center;
}
.contenu p{
    text-align: center;
}
.Info_comp{
    position:absolute;
    width: 26%;
    text-align: justify;
    opacity: 0;
    transition: all 500ms;
    margin: auto;
    padding-left: 2px;
    color: #000000;
    z-index: 1;
}
.Info_comp p{
    text-align: justify;
    margin: auto;
    padding-right: 5px;
    font-size: 1.3em;
    height: 275px;
    width: 500px;
}
.Info_comp:hover{
    opacity: 1;
}
.contenu:hover{
    opacity: 0;
}
.Info_comp:hover + .contenu{
    opacity: 0;
}
.apres{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.eleapres{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: rgb(104, 104, 104);
    box-shadow: slategray 5px 5px 10px 7px;
    color: #00B3FF;
    border-radius: 15px;
    width: 500px;
    margin: auto;
    height: auto;
    min-height: 300px;
    margin-top: 15px;
    align-items: center;
    margin-bottom: 40px;
}
.eleapres h3{
    font-size: 1.4vw;
}
.eleapres p{
    color: white;
    text-align: justify;
}
.ent_exp_pro{
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    min-height: 300px;
    align-items: center;
}
.ent_exp_pro a{
    width: 375px;
    min-width: 375px;
    height: 210px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 5px 7px 5px 5px gray;
    padding: 7px;
    margin: auto;
    margin-right: 10px;
    text-align: center;
    display: flex;
}
.ent_exp_pro a img{
    width: 100%;
    height: auto;
    margin: auto;
}
.exp_pro_act{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
}
.exp_pro_act a{
    width: 375px;
    height: 210px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 5px 7px 5px 5px gray;
    padding: 7px;
    margin: auto;
    margin-right: 10px;
    margin-left: 10px;
    text-align: center;
    display: flex;
    align-self: center;
}
.exp_pro_act p{
    width: 70%;
}
.exp_pro_act a img{
    width: auto;
    height: 100%;
    margin: auto;
    box-shadow: none;
}
#formation{
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
#formation a{
    width: 25%;
    height: auto;
    margin: auto;
    margin-right: 15px;
}
#formation a img{
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: slategray 5px 5px 7px 7px;
    margin: auto;
}
#formation .txt_forma{
    width: 70%;
}


footer{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: white;
    align-items: center;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 15px;
}
footer a{
    color: #00B3FF;
    font-size: 1.4em;
    /* transform: scale(1);
    transition: all 1500ms
}
footer a:hover{
    background-color: #000000;
    transform: scale(1.5);
    transition: all 500ms; */
}
footer .liens{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 25%;
    height: 310px;
}
footer .liens a{
    margin: auto;
    width: 80%;
    padding: 5px;
    box-shadow: slategray 5px 5px 5px 5px;
    border-radius: 10rem;
    border: solid black 5px;
    text-align: center;
    transition: all 1500ms;
}
footer .liens a:hover{
    transform: scale(1.5);
    background-color: #000000;
    transition: all 500ms;
}
footer .design{
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    width: 75%;
}
footer .design div{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    width: 50%;
}
footer .design div a{
    width: 60%;
    padding: 5px;
    margin: auto;
    box-shadow: slategray 5px 5px 5px 5px;
    border-radius: 10rem;
    border: solid black 5px;
    text-align: center;
    transition: all 1500ms;
}
footer .design div a:hover{
    transform: scale(1.5);
    background-color: #000000;
    transition: all 500ms;
}
footer .design .logo_bas{
    width: 310px;
    margin-right: 15px;
    border-radius: 20rem;
    background-color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin: auto;
}
footer .design .logo_bas a{
    width: 300px;
    height: 300px;
    margin: auto;
    background-color: white;
    box-shadow: none;
    border: none;
}
footer .design .logo_bas a img{
    width: 300px;
    height: 300px;
    border-radius: 20rem;
    margin: auto;
}
#derriere{
    position: absolute;
    /* margin: auto; */
    background-color: white;
    z-index: 0;
    opacity: 0;
    margin: 0;
    transform: scale(1);
    transition: all 1500ms;
}
#devant{
    margin: 0;
    z-index: 1;
    transform: scale(1);
    transition: all 1500ms;
}
#devant:hover{
    opacity: 0;
    transform: scale(1);
    transition: all 500ms;
}
#devant:hover + #derriere{
    opacity: 100;
    transform: scale(1);
    transition: all 500ms;
    border: none;
    background-color: black;
}
#devant:hover{
    opacity: 0;
}
#devant:hover + a{
    opacity: 100;
    transform: scale(1.5);
    transition: all 500ms;
}




/*Pour faire un dégrader de couleur :
background: rgb(2,0,36);
background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(0,212,200,1) 35%, rgba(0,212,255,1) 100%);
*/


@media screen and (max-width:1000px) {
    header{
        align-items: center;
        flex-direction: column;
    }
    header a{
        width: 50%;
    }
    header a img{
        width: 100%;
    }
    nav a{
        min-width: 42%;
        width: auto;
        margin: auto;
        margin-bottom: 10px;
    }
    .top_header{
        width: 100%;
        align-items: center;
    }
    .top_header h1{
        flex-direction: column;
        width: 95%;
        font-size: 13vw;
        align-items: center;
    }
    .top_header h1 p{
        margin: 0px;
    }
    .logo_top{
        height: auto;
        width:40%;
    }
    .ParaBlanc{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .ParaBlanc img{
        width: 40%;
        height: 40%;
        margin : auto;
        margin-bottom: 20px;
    }
    .ParaBlanc .para_dans_para_test{
        width: 90%;
    }
    .ParaNoir .Flex_inf_BTS{
        flex-direction: column;
    }
    .ParaNoir .Flex_inf_BTS .ele_bts{
        width: 95%;
        margin: auto;
    } 
    #Portfolio{
        font-size: 0.8em;
    }
    #theme{
        font-size: 0.8em;
        flex-wrap: nowrap;
    }
    .ParaNoir fieldset img{
        width: 40%;
        height: auto;
        margin-left: 10px;
    }
    .proj a{
        font-size: 4vw;
        margin: auto;
        margin-top: 15px;
    }
    #pres-med #temp{
        flex-direction: column-reverse;
    }
    #pres-med #temp img{
        width: 75%;
        height: auto;
        margin-bottom: 15px;
    }
    #pres-med #temp p{
        width: 95%;
    }
    .ent_exp_pro{
        flex-direction: column-reverse;
    }
    .ent_exp_pro a{
        margin: auto;
        margin-bottom: 15px;
    }
    .ent_exp_pro a img{
        width: 100%;
        margin: auto;
    }
    .ent_exp_pro div{
        width: 100%;
    }
    .exp_pro_act{
        flex-wrap: wrap;
    }
    .exp_pro_act a{
        margin: auto;
        margin-bottom: 10px;
    }
    .exp_pro_act p{
        width: 100%;
    }
    .forma{
        flex-wrap: wrap;
    }
    .forma p{
        width: 100%;
    }
    .forma a{
        width: 80%;
        height: auto;
        /* max-height: 50%; */
        margin: auto;
        margin-bottom: 10px;
    }
    .forma a img{
        width: 100%;
        height: auto;
        margin: auto;
    }
    #formation{
        flex-direction: column-reverse;
    }
    #formation .txt_forma{
        width: 100%;
    }
    #formation .txt_forma ul{
        font-size: 4vw;
    }
    #formation a{
        width: 100%;
        margin: auto;
        display: flex;
        margin-bottom: 10px;
    }
    #formation a img{
        width: 80%;
        margin: auto;
    }
    .proj .content_proj{
        flex-wrap: wrap;
    }
    .proj .content_proj img{
        margin: auto;
        width: 80%;
        margin-bottom: 10px;
    }
    .proj .content_proj p{
        width: 100%;
    }
    #pres-med #temp img{
        margin-top: 10px;
    }
    #OSI-explication #ele a{
        width: 90%;
    }
    #OSI-explication #ele a img{
        height: auto;
        width: 100%;
        margin-top: 10px;
    }
    .retour{
        margin: auto;
        margin-top: 10px;
    }
    #aligne{
        flex-direction: column;
    }
    #aligne p{
        width: 100%;
    }
    #aligne a{
        width: 85%;
    }
    #SolutionOSI .eleSolution{
        /* height: auto; */
        width: 100%;
        max-width: 360px;
    }
    .Info_comp{
        width: 100%;
        max-width: 360px;
        font-size: 0.8em;
        margin: auto;
        min-height: 285px;

    }
    .Info_comp p{
        width: 100%;
        height: auto;
    }
    #SolutionOSI h3{
        font-size: 1.1em;
    }
    .contenu p{
        font-size: 1.1em;
    }

    footer{
        flex-direction: column;
    }
    footer .liens{
        width: 100%;
        height: auto;
        flex-direction: row;
        margin-top: 10px;
        margin-bottom: 15px;
    }
    footer .liens a{
        width: 40%;
    }
    footer .design{
        width: 100%;
        flex-direction: column;
    }
    footer .design .logo_bas{
        margin: auto;
        min-width: 310px;
    }
    footer .design .logo_bas a{
        display: flex;
        align-items: center;
        width: 310px;
    }
    footer .design .logo_bas a img{
        margin: auto;
    }
    footer .design div{
        width: 100%;
        flex-direction: row;
    }
    footer .design div a{
        width: 40%;
        margin-bottom: 15px ;
    }
}
@media screen and (max-width:600px) {
    #ele{
        flex-direction: column-reverse;
    }
    #ele a{
        width: 75%;
        height: auto;
    }
    #ele p{
        width: 95%;
    }
}