/*nécéssite normalize.css*/
 @import url('https://fonts.googleapis.com/css2?family=Bangers&family=Changa+One&family=Red+Hat+Text:wght@300;400&display=swap');

:root {
  --rouge: #EF2346;
  --jaune:#FFCC00;
  --bleu:#19A4F9;
  --beige:#CBAB94;
  --blanc:#FCFAF6;
  --noir:#202020;

}

img, video{max-width:100%; height:auto;}
video{  padding-left: 0px;}
figure{margin: 0}
li {list-style: none;}


*{
  font-family: 'Bangers', cursive;
	color :var(--blanc);
	font-size: 26px;
  box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 1.4em;
  letter-spacing: 0.02em;
}

body{
/*  background-image: url('../assets/img/background-site.png');*/
  background-image: url('../assets/img/15136.jpg');
  background-repeat:  no-repeat;
background-size:   cover;
background-position: top center;
background-attachment: fixed;
  margin: 0px auto;
}

/*a{text-decoration: none;}*/
h1 {
    font-family: 'Changa One', cursive;
    color:var(--rouge);
    font-size:100px;

  }
h2 {   font-size: 34px; }
 p, input {
/*  font-family: 'Red Hat Text', sans-serif;*/
  font-size: 20px;
  color:var(--noir);
}

span{
    color:var(--blanc);
}

/**FLEX POSITION*/
  .flex {display:flex;}
  .wrap {flex-wrap: wrap;}
  .reverse {flex-direction:row-reverse;}
  .justify-center {justify-content :center;}
  .justify-between {justify-content: space-between;}
  .justify-end{  justify-content:flex-end;}
  .space-around {justify-content: space-around;}
  .align-center {align-items: center}
  .align-baseline {align-items: baseline}
  .row {flex-direction: row}
  .col {flex-direction: column;}
  .f-direction{flex-direction: row}  /* classe pour modifier dans le queries la direction*/
  /*colonnage à 50%*/
  .item-50{flex-basis: 50%}


  .p60 { padding:60px; }
  .p30 { padding:30px; }

  .m30{ margin:30px;}
  .center { margin: 0px auto;}

/***********/
 .texte-noir{
  	color :var(--noir);
 }

 .background-noir{
   background-color :var(--noir);
 }

.content{
  width:1440px;
  margin:0 auto;
}
/**********************/
/******HEADER****/

.logo{
  max-width: 7vw;
  background-color:var(--blanc);
  border: 2px solid var(--noir);
    border-top: 2px solid var(--blanc);
  position: absolute;
  margin-left:10vw;
  z-index: 2;
}

.logo figure img {
  width:100%;
  padding:5px 10px;
}

.vol-titre{
  width:100%;
  background-color:var(--noir);
  text-align: center;
  padding:10px;
}

.vol-date{
  text-align: center;
  padding:10px;

}


header{
background-color: var(--bleu);
border-bottom:3px solid var(--noir);

}


header .container { padding-right:20vw;}
header nav{
margin-left: auto;
}

header .subtitles{
  background-color: var(--noir);
  width:100vw;
  text-align: center;
  padding:10px;
}

header h3::before,
header h3::after
{

  content: "";
 display:inline-block;
 height: 20px;
 width: 20px;
 margin:0px 5px;
 background-size:  20px  20px;
 background-image: url('../assets/img/etoile-rouge.svg');
 background-repeat: no-repeat;

}

  .speech{
    width:300px;
   background-image: url('../assets/img/speech-bubble.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin:15px !important;
}

.speech span {
  color:  var(--noir);
  font-family: 'Bangers', cursive;
  font-size: 20px;
  line-height: 22px;
  display:block;
  position: relative;
  top:10%;
  left:-7%;
text-align:center; /* centrage horizontal */ }
}

#menu {
  width:30vw;
}

#menu li {
display: inline;
margin:10px;
}

#menu li a:hover {
 color:var(--rouge);
 text-shadow: -2px 0px var(--noir),
               2px -2px var(--noir),
               2px 2px var(--noir),
               -2px 0px var(--noir)  ;
}

#menu li a:active {
 color:var(--rouge);
 text-shadow:2px 2px 4px var(--noir), 1px 1px 0px var(--bleu);
}

/**********MAIN************/

main {
  background-image:  url('../assets/photoshop/background-body.png');
  margin :0 auto;
  max-width : 1440px;
  width:100%;

}



#intro{
display: flex;
  margin :0 auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#intro .parent {
  display: flex;
  position: relative;
  flex-direction: column;
  margin :0 auto;
  width:90px;
}

#intro article{
  margin:auto 10px;
}

#intro article .texte-intro {
  background:url('../assets/img/background-vert.png') top center no-repeat;
  background-size:cover;
margin:0 auto;
padding:20px;
border:5px solid #F8F1DC;
box-shadow: 3px 3px 3px #000
}


  article.fond-neutre {
  background:url('../assets/img/background-neutre.png') top center no-repeat;
  background-size:cover;
margin:0 auto;
padding:20px;
border:5px solid #F8F1DC;
box-shadow: 3px 3px 3px #000
}

article.fond-gris{
background:url('../assets/img/background-gris.png') top center no-repeat;
background-size:cover;
margin:0 auto;
padding:20px;
border:5px solid #F8F1DC;
box-shadow: 3px 3px 3px #000
}



button{
    background-color: var(--bleu);
    border: solid 3px  var(--noir);
    border-radius: 15px;
    max-width: 250px;
    min-width:200px;
    padding:10px 18px;
    margin: 20px auto;
    z-index: 50;
    transition: 0.1s linear;
}
button:active{
  transform: scale(0.8);
}


/******projets*****/

body.projet{
color:var(--noir);

}


#projets {
  position: relative;
  margin: 30px 10px;
}


#projets   {cursor: url("../assets/img/btn-click100.png") 15 15,    auto;}
.grid-wrapper > div > a:hover ,  #monster a:hover {cursor: url("../assets/img/btn-clickover.png") ,  auto;}
#monster {margin-left: -50px;}
#monster a {   cursor: url("../assets/img/btn-click100.png") ,   auto;}
#projets > * {
  z-index: 60;

}

.etoiles{
  position: absolute;
  top: 2em;
  left: 1em;
  z-index: 80 !important; /* car tous les éléments de projets sont en z index 60, les étoiles doivent passer devant*/
  transform: scaleX(-1);
}


.comic {
  padding: 1rem;
  margin: 2rem 0;
  background-color: #fff;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.2);
    border: solid 2px  var(--noir);
  position: relative;
  z-index:-2;
  margin: 0 auto;
  background-image:url('../assets/img/background-page-comic.jpg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.wide.titre-projets, .big.titre-projets{
  flex-direction: column;
  align-items:  flex-start !important;
}

.titre-projets h2{
  color:  var(--rouge);
}
.titre-projets h3{
  color:  var(--noir);
}


#boutonProjet{
  display: flex;
  padding: 30px;
}

#boutonProjet #click{
  position: absolute;
  top:0;
  left:-3em;
  z-index:1;
 }


.bg-thumb {
  background-image:url('../assets/img/background-bleu.jpg');
  background-size: cover;
  background-position: center;
}

div.bg-thumb:hover{

 background-color:var(--rouge); /*crimson;*/
 transition: all 0.5s;
 box-shadow:   0 0 5px 5px #ffffff;
 border-radius: 5px;

}
.projet-label{
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  height: 1.5em;

}
.titre-projet{
  position: absolute;
  z-index: 3;
  top: -3px;
  left: 1em;
  display: inline;
  width: 100%;
  color: var(--noir);

}
.description{
position: absolute;
z-index: 3;
top:10px;
left:10px;
display: none;

}



/***GRID ***/

.label {
  position:absolute;
  color: var(--noir);
  border: 1px solid black;
background-color: white;
padding: 0.5em;
}
 img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	display: inline-block;
}
/* Main CSS */
.grid-wrapper > div {
	display: flex;
	justify-content: center;
	align-items: center;
  position: relative;
}
.grid-wrapper > div > a {
   width: 100%;
   height: 100%;
   border-radius: 5px;
/*   border:1px solid black;*/
   display:flex;justify-content:center;align-items:center;
   transition: .3s ease-in-out;

}
.grid-wrapper > div > a > img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.grid-wrapper > div > a:hover {
 /*transform: scale(1.0125);*/
 transform:translate(10% )  ;


}



.grid-wrapper {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-auto-rows: 200px;
	grid-auto-flow: dense;
}
.grid-wrapper .wide {
	grid-column: span 2;
}
.grid-wrapper .wide img {

}
.grid-wrapper .tall {
	grid-row: span 2;
}
.grid-wrapper .big {
	grid-column: span 2;
	grid-row: span 2;
}
.grid-wrapper .bouton {
  grid-column: span 2;
  grid-row: span 2;
}


/******CONTACT****/



#contact{
  background-image:url('../assets/img/background-contact.png');
  background-color:red;
  background-repeat: no-repeat;
  background-position: center;
  margin: 30px 10px;
  border:2px solid  var(--noir);
  position: relative;
  display: flex;
            justify-content: center;
            align-items: center;
padding :15px;
overflow: hidden;
}

.telephone{
 position: absolute;
  z-index:80;
top: -2em;
right: -3em;
width: 50%;
}

.telephone figure img {
  width:80%
}
.eclairs{
 position: absolute;
  z-index:80;
bottom: 0;
left: 0;
}
.eclairs  figure img {
  width:60%
}

form   div{
  width:80%;
}

#formulaire{
  border:3px solid  var(--noir);
  background-color:  var(--blanc);
  display: flex;
  flex-direction: column;
  color: var(--noir );
  width:100%;
  position:relative;
  margin-top:40px;
  align-content: center;
}


.labelSection{
  background-image:url('../assets/img/titreH2.png');
  background-repeat: no-repeat;
  background-position-x:2em;
  height: 60px;
  display: flex;
  align-items: center;
  padding-left: 3.5em;
  position: relative;
  top:-1.5em;
}

#formulaire h2{
  color:  var(--noir);
  margin-left: 1em;
}


form  {
  z-index: 60;
  padding:60px 10px 10px 20px;
}


form label {
color : var(--noir);
width:30%;
display:block;
}


input[type=text], textarea{
  color : var(--noir);
  font-size:16px;
  background-color: transparent;
  border-bottom: 2px solid var(--noir);
  width:80%;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  margin-right: 0px;
  margin-left: 0px;

}
textarea{
  border : 2px solid var(--noir);
}
input[type=button], input[type=submit], input[type=reset] {

font-family: 'Bangers', cursive;
  background-color:  var(--bleu);
  border: none;
  color : var(--noir);
  padding: 0.5em 1em;
  text-decoration: none;

  cursor: pointer;
}

 button:hover {
  color:var(--bleu);
  background-color: var(--blanc);
}

/**********************************extras******/


#extras{
height: 120px;;
position: relative;
}

#monster{
  z-index: 99;
  position: absolute;
  top: -5px;
  width: 25em;
  margin-left: -50px;
}



#clickextras{
    position: absolute;
    height: :250px;
    width:250px;
   top:-5em;
}

/******FOOTER*****/

footer {
  background-color:  var(--noir);
  min-height: 150px;
  margin: 0 auto;
  padding: 10px;
  align-items: end;
  flex-direction: column;
 }

footer h3::before,
footer h3::after
{
 content: "";
 display:inline-block;
 height: 20px;
 width: 20px;
 margin:0px 5px;
 background-size:  20px  20px;
 background-image: url('../assets/img/etoile-rouge.svg');
 background-repeat: no-repeat;
}

footer h3{
  display: inline-block;
  height: 24px;
}

footer .subtitles{
  margin: auto auto;
}

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


.error{
  display: flex;
  flex-direction: column;
}

.error > *:not(button){
  margin: 0 auto;
  padding-bottom: 2em;
}

.error img {
  width:400px;
}

/**********************************************************************page projet**/
/**********************************************************************page projet**/
/**********************************************************************page projet**/



main.projet {
  /*  width:100vw;*/
    color:var(--noir);
     width: 100%;
}

main.projet h2{
    color:var(--noir);
    margin-bottom: 60px;
    position: relative;

}


main.projet h2.nuage{
  padding:50px 0px;
}
main.projet h2.nuage::before {
content:'';
    background-image: url('../assets/img/bubbleH2.png');
    background-repeat: no-repeat;
    height: 202px;
    width: 287px;
    display: block;
    z-index: -6;
    position: absolute;
    top: -60px;
    left: -60px;
}

main.projet section{
  margin-bottom: 100px;
}

main.projet article{
    width:80vw;
    margin-bottom: 30px;
}

main.projet #intro article {
  margin-bottom:30px;

}
.titre-page-projet{
  padding: 3.5em 0;

}


img.bloc{
  display: block;
}
.containt{
  margin: 0 auto;
  max-width: 1440px;
}

.etapes{
  display: flex;
  flex-direction: column;
align-items: center;
}
#userflow {
  display: flex;

}
.userflow{
padding: 2em 0;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
margin: 0;
}
.etapes article  img {
  margin : 0 auto;
  display: block;
}

.ui {
  margin: 0 auto;
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
}



.maquettes{

}
.demo {
  display: flex;
  justify-content: center;
}
.elements{
  position: absolute;
  z-index: 5  ;
  width:100%;
  justify-content: space-between;
}
.elements img {
  max-width: 50%;
}

.elements figure:last-child {
  display: flex;
justify-content: end;
}


.mockups{
   display:flex;
   flex-direction:column;
   margin:30px;

}

.mockups img{
  padding: 10px;
}

.mockup-img{

  max-height: 90vh;
  display: block;
  margin: 0 auto;
  padding-bottom: 30px;
}


.bg-rouge   {
  display: none;
}

.rouge {
  position: relative;

}
.rouge::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url('../assets/img/background-maquettes.png')  center center no-repeat;
  -webkit-clip-path: polygon(0 78%, 0 0, 100% 20%, 100% 100%);
  clip-path: polygon(0 78%, 0 0, 100% 20%, 100% 100%);
  background-color: var(--rouge);
  background-size: 100% auto;
}


.img-rouge{
  background: url('../assets/img/background-maquettes.png')  center center no-repeat;

  background-size: 100% auto;
}

.maquettes-solo img:last-child {
  display: none;
}

 /****navigation projets****/

nav.projets{
  margin:50px auto;

}

nav.projets ul.menu-projets {
  display: flex;              /* Transformation en flexbox */
  padding:0;
  justify-content: center;     /* Alignements des liens dans le menu */
  flex-direction:column;   /* Alignement vertical du menu pour le  mobile */
}
ul.menu-projets li {
    list-style-type: none ;       /* Suppression des puces */
}
.menu-projets  a {
    display:block;                /* Transformation en block */
    min-width: 120px;             /* Largeur minimale des liens */
    margin: 0.5rem;               /* Marges externes (1 valeurs = 4 directions) */
    padding: 0.6rem;            /* Marges internes (2 valeurs = haut/bas et gauche/droite)*/
    text-align: center;           /* Centrage du texte */
    background-color:  var(--bleu);  ;    /* Couleur d'arrière-plan */
    color: #fff;                  /* Couleur du texte */
    text-decoration: none;        /* Suppression du soulignement */
    border: 1px solid #fff;       /* Ajout d'une bordure */
    border-radius: 4px;           /* Arrondis des bordures */
    transition: all 0.5s ;          /* Ajout des effets de transition */
}
.menu-projets  a:hover,
.menu-projets  a:hover.actif
 {
  background-color:  var(--rouge);
  color: #ffe843;
  border-color: #ffe843;
}
.menu-projets a.actif {
    background-color: var(--rouge);
    color: var(--jaune);
    border-color:  var(--noir);
}

/*****************************************bouton rouge*/
#click {position: relative;
        width:200px;
        height:200px;}
#btnflash{position: absolute;
     transition: all 0.1s ease;
     z-index: -3;
     opacity:0;
       transform:scale(0.5);
 }
 #btntexte{position: absolute;
      transition: all 0.1s ease;
      z-index: -3;
      opacity:0;
      transform:scale(0.5);
  }
.btn-base {position: absolute;}
.btn-rouge {position: absolute;
  transition: all 0.1s ease;
  z-index: -2 }

.btn-rouge.down{
  transform:translate(-6px,  15px);
}
#btnflash.flashy,
#btntexte.flashy{
opacity:1;
  transform:scale(1);
}


/**XS**/
@media screen and (max-width:576px) {

*{
font-size: 18px;
}

#intro{
  flex-wrap: wrap;
  padding:0px;
  background-position:center;
}

#intro .parent img{
display: none;
}

#intro div{
  display: block;
    margin:0 auto;

}
#footer img{
  width:100%;
}
footer.f-direction{
  flex-direction: column;
  justify-content: space-around;
}

header {
  height:70px;
}

 h2{
  padding:10px !important;

}

.logo{
    max-width:70px;
    top:-5px;
    margin-left:15px;
}

.vol-titre {
      padding:5px;

}

.vol-date{
      padding:5px;
}

.grid-wrapper .bouton {
  grid-row: span 1;
  grid-column: span 2;
}
.maquettes h2{
  margin-left: 1em;
}

footer {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


}

/**S**/
@media screen  and (min-width:577px)  and (max-width:800px)    {
  *{
  font-size: 18px;
  }
/*  #intro,main{
    width:95vw;
  }*/
  #intro div{
    display: block;
    margin:0 auto;

  }
  #intro  {
    position: relative;
    flex-direction: column;
  }


  .logo{
      max-width:80px;
      top:-5px;
  }

  .vol-titre {
        padding:5px;

  }

  .vol-date{
          padding:5px;
  }
    .item-50{flex-basis: 100%}

    #monster {
    display: none;
    z-index: 99;
    position: absolute;
    top: -150px;
    width: 25em;
    margin-left: -50px;
  }

 .telephone {
   top: -1em;
   width: 40%;
    }


    .maquettes h2{
      margin-left: 2em;
    }

footer{
  flex-direction: row;
  justify-content: space-between;

}

}



@media screen and (min-width:801px)  and (max-width:1439px) {
  *{
  font-size: 24px;
  }
  #intro,main{
    width:95vw;
  }

  #intro .parent {
    position: relative;
    flex-basis: 70%;
    flex-direction: row;
  }



  .logo{
      max-width:100px;
      top:-5px;
  }

  .vol-titre {
        padding:5px;

  }

  .vol-date{
          padding:5px;
  }



  .ui {
    display:flex;
    flex-wrap:  wrap;
    flex-direction: row;

  }
  video{ padding: 50px 0px;}

  #monster {
  display: none;
  z-index: 99;
  position: absolute;
  top: -150px;
  width: 25em;
  margin-left: 0;
}

  div.ui article{
   width: 37vw;
   margin:30px;

  }

      .maquettes{
        position: relative;
      }



      .maquettes h2{
        margin-left: 4em;
      }


      .img-rouge{
      background-size: 0;  /* on rend le background mobile invisible*/
      }

      .maquette-img{
        width: auto;
         height: auto;
         display: inline-block;
      }

      .rouge{
      }

      .rouge::before{
        content:'';
        position: relative;
      }

    .bg-rouge{
      display: inline-block;
      position: absolute;
      width: 100%;
      min-height: 800px;
      background: black;
      box-sizing: border-box;
      -webkit-clip-path: polygon(0 78%, 0 0, 100% 20%, 100% 100%);
      clip-path: polygon(0 78%, 0 0, 100% 20%, 100% 100%);
      z-index:-5;

    }

    .bg-rouge img {
      position: absolute;
      top: 0.6%; /* equal to border thickness */
      left: 0.6%; /* equal to border thickness */
      width: 99%; /* container height - (border thickness * 2) */
      height: 788px; /* container height - (border thickness * 2) */
      -webkit-clip-path: polygon(0 78%, 0 0, 100% 20%, 100% 100%);
      clip-path: polygon(0 78%, 0 0, 100% 20%, 100% 100%);
     }

.bleu{
  margin: 15px;
}

     .mockups{
        flex-direction: column;
     }

     .mockup-img{

       max-height: 90vh;
       display: block;
       margin: 0 auto;
       padding-bottom: 30px;
     }


     main.projet h2.nuage{
       padding:50px 0px;
     }
     main.projet h2.nuage::before {
     content:'';
         background-image: url('../assets/img/bubbleH2.png');
         background-repeat: no-repeat;
         height: 202px;
         width: 287px;
         display: block;
         z-index: -6;
         position: absolute;
         top: -35px;
         left: -60px;
     }



#contact{
  flex-direction: row;
}
form{flex-basis: 50%; width: auto; }

     .telephone {
       top: -1em;
       width: 30%;
        }


 form div{
          width:70%;
        }

   footer{
          flex-direction: row;
            justify-content: space-around;
        }





}



@media (min-width:1440px)  {
  main{
    width:95vw;
  }

  #intro   {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  #interface  {
    width: 100%;

  }
  #userflow.ui article {
    flex-basis:70%;
  }

  #userflow.ui {
    align-items: flex-start;
  }

  #monster {
  display: none;
  z-index: 99;
  position: absolute;
  top: -150px;
  width: 25em;
  margin-left:0;
}

article.fond-neutre{
  margin:0;
}

  #intro article  {
      flex-basis: 50%;

  }

.ui{
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin:0;

}

.ui article {
  margin-left:10px;
}

div.ui article{
/*  width: auto;*/
}


main.projet h2.nuage{
  padding:50px 0px;
}
main.projet h2.nuage::before {
content:'';
    background-image: url('../assets/img/bubbleH2.png');
    background-repeat: no-repeat;
    height: 202px;
    width: 287px;
    display: block;
    z-index: -6;
    position: absolute;
    top: -37px;
    left: -77px;
}


    .maquettes{
      position: relative;
    }

          .img-rouge{
          background-size: 0;  /* on rend le background mobile invisible*/
          }

.maquette-img {
  width: auto;
  height: auto;
}

/* on cache la dernière ligne d'images du mode mobile  on affiche en pleine page*/
.end{
  display: none;
}
/* on affiche le dernier mockup caché en pleine page*/

.maquettes-solo{
  display:flex;
}
.maquettes-solo img:last-child {
  display: block;
}


    .rouge::before{
      content:'';
      position: relative;
    }

  .bg-rouge{
    display: inline-block;
    position: absolute;
    width: 100%;
    min-height: 800px;
    background: black;
    box-sizing: border-box;
    -webkit-clip-path: polygon(0 78%, 0 0, 100% 20%, 100% 100%);
    clip-path: polygon(0 78%, 0 0, 100% 20%, 100% 100%);
    z-index:-5;

  }

  .bg-rouge img {
    position: absolute;
    top: 0.6%; /* equal to border thickness */
    left: 0.6%; /* equal to border thickness */
    width: 99%; /* container height - (border thickness * 2) */
    height: 788px; /* container height - (border thickness * 2) */
    -webkit-clip-path: polygon(0 78%, 0 0, 100% 20%, 100% 100%);
    clip-path: polygon(0 78%, 0 0, 100% 20%, 100% 100%);
   }

   .mockups{

      flex-direction: column;
   }

   #formulaire{
     width:50%;
   }
   .telephone   {
  width: auto;
  right:-4em;

}


main.projet #intro article {
  margin-bottom:30px;
  /*width:50%;*/
}

#userflow{

    margin:10px;
}
#userflow article{
width:auto;
flex-basis: 50%;
}
.content-video{
  display: flex;
  justify-content: center;

padding: 30px ;
background: url('../assets/img/background-maquettes.png') top center no-repeat;
background-size:cover;
width: 50vw;
box-shadow: 3px 3px 3px #000;
}
video{  padding-left: 15px;}

.maquettes h2, .mockups h2{
  margin-left: 4.5em;
}
.mockup-img{

  max-height: 90vh;
}

.reseaux-img {
  max-height:40vh;
}
nav.projets ul.menu-projets {

   flex-direction:row;   /* Alignement horizontal du menu pour le  mobile */
}

footer{
  flex-direction: row;
  justify-content: space-around;
}


}



// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }