@media screen and (max-width: 650px) {



  #home>header{
     min-height: 45vh;
  }
  header,
  main{
    width: 100%;
  }
  .titre{
     font-size: 1.7em;
  }
  body > a:first-of-type{
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     padding: 2vh 0 0vh 8%; 
     height: calc(3em + 2vh);
     background: white;
     width: 92%;
     box-shadow: 0px 2px 10px rgba(0,0,0,.3);
 }
 body > a:first-of-type img{
     width: 35%;
 }
  #burger{
     display: block;
     position: absolute;
     top: 1.2vh;
     right: 2%;
     padding: 6%;

  }
  nav{
     display: none;
     position: absolute;
     top: 3.75em;
     margin-top: 5%;
     z-index: 1;
     width: 100%;
     height: auto;
     padding: 1vh 0;
     background-color: rgba(255,255,255);
     box-shadow: 2px 6px 8px 8px rgba(0,0,0,.1);
     border-radius: 0px 0px 8px 8px;
}
nav a{
     height: auto;
     display: block;
     width: 80%;
     margin: auto;
     line-height: 2.5em;
     padding: 2% 0;
     text-align: end;
     font-size: 1.3em;
     font-weight: bold;
     color: black;
  }
  nav ul,
  nav ul li,
  nav ul li ol,
  nav ol li,
  nav ol li:first-child,
  nav ol li:last-child,
  nav ol li:nth-child(3){
     margin: 0;
     padding: 0;
     position: static;
     top: 0;
     left: 0;
       display: block;
       height: auto;
       width: 100%;
       background: none;
       color: black;
       line-height: 2em;
       text-transform: none;
  }
  nav ol li a{
     margin: 0;
     padding: 0;
     position: relative;
       display: block;
       height: 2em;
       width: 100%;
       background: none;
       color: black;
       line-height: 2em;
       text-transform: none;
  }
  nav ul li a[href="#"]{
     display: none;
  }
  nav ul li ol li:hover{
     width: 100%;
  }
   nav img:first-of-type{
     display: none;
  }
     /*
  nav a:nth-of-type(2), nav a:nth-of-type(8){
     font-weight: normal;
  }
  nav a:nth-of-type(8){
     border: none;
  } */
  nav a:last-of-type{
     width: 85%;
     margin: 1% auto 0;
     border-radius: 4px !important;
     text-align: center;
     padding: 1% 0;
     font-weight: normal;
}
.display{
     display: block;
     
}
.bouton{
     padding: 1em 1.6em;
}
header{
     margin-top: 7vh;
     min-height: 40vh;
     background-size: cover;
}
header div{
     width: 90%;
     padding: 0 5%;
}
article{
     margin-top: 5vh;
}
.soustitre{
     font-size: 1.2em;
}
header div .soustitre{
     font-size: 1.2em !important;
}
footer{
     display: block;
     width: 90%;
     padding: 0 5% 5%;
     margin: 10vh 0 0;
}
body>footer>img:first-of-type{
     display: block;
}
#mc_footer {
     display: block !important;
     height: 1px;
     background-color: #000;
     margin: 0 0 3vh ;
}
#mc_footer img {
     position: relative;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: white;
     padding: 0 5px; 
     height: 20px; 
}
footer span:first-of-type,
footer span{
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
     font-size: .8em;
     font-weight: 600;
}
footer span:first-of-type{
     margin-bottom: 1em;
     display: flex !important;
     justify-content: space-around;
     font-weight: bold;
     font-size: 1em;
}

footer span:last-of-type{
     justify-content: center;
}

.newsletter {
     width: 96%;
     margin: 0;
     padding: 0 2% 2%;
}

.newsletter form {
     flex-wrap: wrap;
}

.tnp-field-button{
    width: 100%;
}

.tnp-submit {
     margin: 0;
     width: 50%;
     margin: 5% 25%;
     margin-bottom: 10%;
}

  /* #########################

HOMEPAGE

######################### */
#home header{
     margin-top: 30%;
}
#home header h1{
     font-size: 20px;
     margin-top: 2em;
}
#home header h2{
     font-size: 1.8em !important;
     margin: 2% 0 5%;
}
#home header p{
     width: 100%;
}
.plaquette {
     margin: 5% auto;
}
#home main header{
     margin-top: 0;
     height: auto;
     margin-bottom: 10%;
}
#home main header p{
     width: 100%;
}

#home main header p:first-of-type{
     display: none;
}
#home main article{
     width: 90%;
     margin: 4% auto;
     height: auto;
     margin-bottom: 5%;
}
#home main > article{
     height: 30vh;
}
section#confiance article p:last-of-type{
     width: 95%;
     margin-bottom:  5%;
}
section#confiance{
     display: block;
     margin-top: 5vh;
}
section#confiance article:last-of-type{
     width: 100%;
}
section#confiance article:last-of-type img{
     width: 40%;
     height: auto !important;
     margin: 5%;
}

#home #site-internet{
     background-image: url('../images/site-internet-mobile.webp');
}
#home article#print{
     background-image: url('../images/print-mobile.webp');
     
 }
 #home article#marketing{
     background-image: url('../images/marketing-mobile.webp');
     
 }
 #home article#medias{
     background-image: url('../images/medias-mobile.webp');
     
 }

#home main footer{
     width: 100%;
     margin: 5vh auto 0;
}

#home article h3::after{
     font-size: 1em;
     padding-top: 140%;
}

#home main footer h3{
     width: 100%;
     margin: 2% 0;
     font-size: 1.6em;
}

#home #confiance a{
     line-height: 5em;
}

  /* #########################

     SITE INTERNET

######################### */
#siteinternet header{
     background-image: url('../images/header-site-internet-mobile.svg');
     background-size: cover;
     margin-top: 23%;
}

#siteinternet h2{
     font-size: 1.6em;
}
     #typologie{
          flex-wrap: wrap;
     }
     #typologie section{
          width: 90%;
          margin: 5%;
          padding: 0 2vh;
          height: 33vh;
     }
     #services figure{
          width: 42%;
          margin: 5% 2%;
     }

     #conception .soustitre, #extrait-realisations .soustitre{
          font-size: 1em;
     }
     #conception>img{
          display: none !important;
     }

     #conception div img{
          display: block !important;
          width: 19%;
     }
     #conception_mobile{
          display: flex;
          width: 100%;
          flex-wrap: wrap;
          justify-content: center;
     }
     #conception_mobile div{
          width: 70%;
          margin-left: 5%;
     }
     #conception_mobile div section{
          text-align: left;
          margin-bottom: 5%;
     }
     #conception_mobile div section:first-of-type{
          margin-top: 35%;
          margin-bottom: 5%;
     }
     #conception_mobile div section:nth-child(2){
          margin-bottom: 10%;
     }
     #conception_mobile div section:nth-child(3){
          margin-bottom: 15%;
     }
     #conception_mobile div section:nth-child(5){
          margin: 0;
     }

     #conception_mobile h3{
          margin-bottom: 2%;
     }
     #conception_mobile p{
          font-size: .9em;
     }

     #conception{
          margin-bottom: 10vh;
     }
     #extrait-realisations{
          display: block;
     }
     #extrait-realisations div{
          display: block;
          overflow-x: auto;
          margin-left: 10%;
     }
     #extrait-realisations section {
          width: 300%;
          padding-right: 0%;
          justify-content: left;
     }
     #extrait-realisations a{
          margin-bottom: 5vh;
     }
     #extrait-realisations img{
          width: 30%;
          margin-right: 2%;
     }
     #extrait-realisations img:last-of-type{
          margin-right: 0;
     }
     
     /* #########################
     
     PAGE PRINT

     ######################### */
     
     #print header{
          background-image: url("../images/header-print-mobile.svg");
          background-size: cover;
          margin-top: 12%;
     }
     #print main{
          width: 90%;
          margin: 5%;
     }
     #print main>div h2, .visuels>h2{
          font-size: 1.8em ;
     }
     #print article.tiers{
          display: none;
     }
     #print main article.visuels{
          display: block;
          width: 100%;
     }
     #print main article.visuels section{
          width: 100%;
          position: relative;
          color: white;
          height: 40vh;
     }
     #print main article.visuels section h3{
          position: absolute;
          top: 22vh;
          left: 1%;
          font-size: 1.2em;
          color: white;
          text-transform: lowercase;
          background-color: transparent;
     }
     #print main article.visuels section h3::first-letter{
          text-transform: uppercase;
     }
     #print main article.visuels section p{
          position: absolute;
          top: 27vh;
          width: 90%;
          margin: 0 5%;
     }

     /* background spécifiques */
     #print main article.visuels section{
          background-image: url("../images/carte-roxanes-mobile.webp");
     }
     #print main article.visuels section:nth-child(2){
          background-image: url("../images/flyers-dynabuy-mobile.webp");
     }
     #print main article.visuels section:nth-child(3){
          background-image: url("../images/catalogues-eurobougie-mobile.webp");
     }
     #print main article.visuels section:nth-child(4){
          background-image: url("../images/depliants-mf-mobile.webp");
     }
     
     #print main article.partie2 section:nth-child(1){
          background-image: url("../images/panneau-enseigne-eefem-mobile.webp");
     }
     #print main article.partie2 section:nth-child(2){
          background-image: url("../images/rollup-briand-concept-mobile.webp");
     }
     #print main article.partie2 section:nth-child(3){
          background-image: url("../images/kakemono-mc-mobile.webp");
     }
     #print main article.partie2 section:nth-child(4){
          background-image: url("../images/etiquettes-roxanes-mobile.webp");
     }

     #goodies > div{
          width: 100%;
     }
     #goodies section{
          width: 100vw;
          margin: 0 5vw 0 0;
     }
     #goodies section img{
          width: auto;
          height: 30vh;
     }
     #goodies div div{
          overflow-x: scroll;
          overflow-y: hidden;
          width: auto;
          display: flex;
     }
     .fleche{
          display: none;
     }
     #print .bouton{
          margin: auto;
     }


     #goodies section h4{
          font-size: 1.4em;
          margin-left: 1em;
          margin-top: -2.4em;
     }
     /* #########################

     REALISATIONS

     ######################### */

      #realisations header{
          background-image: url("../images/header-realisation-mobile.svg");
     }
     #realisations header .soustitre{
          margin: 5vh 0 0;
          font-size: 1.4em !important;
     }
     #realisations main{
          column-count: 1;
          margin-top: 20%;
     }

     #realisations main img{
          width: 90%;
          margin: 5%;
     }
     
     /* #########################
     
     PAGE MEDIAS

     ######################### */
     #medias header{
          width: 100%;
          margin-top: 0;
          padding: 10vh 0 0;
          background-image: url("../images/header-medias-mobile.webp");
          background-size: cover;
     }
     #medias main{
          margin: 0;
     }
     #medias article,
     #medias article div{
          display: block;
          width: 95%;
          margin: 5% auto ;
     }
     #medias article#materiel img{
          width: 90%;
          border-radius: 0;
          margin-left: 12.6%;
     }
     #medias article img{
          margin-left: 10%;
     }
     #medias #materiel div{
          margin: 16% auto 0;
     }
     #miseensituation{
          background: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.5)),
          url('../images/mise-en-situation-desk.webp');
     }
     #medias article#miseensituation{
          width: 100vw;
          margin: 0;
          left: 0;
          top: -5vh;
          background-size: auto 100%;
          background-position: -80% 20%;
     }
     #medias article#miseensituation div{
          width: 90%;
          position: relative;
          top: 25vh;
          margin-left: 5%;
     }
     #medias article#video img{
          right: 0;
     }
     #medias article#photoproduit{
          position: relative;
          width: 100%;
          margin: 0;
          margin-top: 15%;
     }
     #medias article#photoproduit div{
          position: relative;
          top: -64vh;
     }
     #medias article#photoproduit img{
          position: relative;
          top: 35vh;
          left: 0;
          height: auto;
          width: 100%;
          margin: 0;
          border-radius: 0;
     }
     #medias article#video{
          margin: 15vh 0 0;
          width: 100%;
     }
     #medias article#video img{
          border-radius: 0;
          position: static;
          width: 100%;
          margin: 0;
          outline: none;
     }
     #video div p:last-of-type,#materiel div p:last-of-type{
          padding-bottom: 6vh;
     }
     
     
     
     /* #########################
     
     PAGE CONTACT

     ######################### */
     
     #contact header{
           background-image: url("../images/header-contact-mobile.svg");
     }
     #contact main .soustitre{
          width: 95%;
          margin: 15% auto 2%;
     }
     #contact header p{
          
          text-align: left !important;
     }
     #contact article{
          display: block;
     }
     form,
     #contact article div{
          width: 90%;
          margin: auto;
     }
     form fieldset label{
          width: 100%;
     }
     button{
          width: 100%;
          margin-left: 0;
     }
     form button{
          margin-top: 10%;
          padding: 5% 0 !important;
          font-size: 16px;
     }
     address p{
          font-size: 1.2em;
     }
     form input{
          
          padding: 1.5% 0;
     }
     [name='humain']{
          width: 100%;
          text-align: center;
          margin-top: 5%;
          padding: 5% 0;
     }
     
     /*------------------------------------
     
     ---------------MARKETING--------------
     
     -------------------------------------*/
     
     #marketing header{
          background-image: url("../images/header-marketing-mobile.svg");
          margin-top: 18%;
          background-size: cover;
          min-height: 50vh;
     }
     #marketing .soustitre{
          font-size: 1em;
          margin-bottom: 2%;
     }
     #marketing header div .soustitre{
          margin: 0;
     }
     #marketing div .soustitre{

          margin: 2% 0 6%;
     }
     #plan{
          width: 100%;
          display: flex;
          flex-wrap: wrap;
     }
     #plan section{
          width: 100%;
          margin-bottom: 10%;
     }
     #plan section h2{
          font-size: 1.2em;
          line-height: 2em;
     }
     #plan section p{
          width: 80%;
          margin: auto;
     }

     #plume{
          flex-wrap: wrap;
     }

     #marketing #rs div:last-of-type p:not(.soustitre){
          margin: 0;
     }
     #marketing #plume div{
          width: 90%;
          margin: auto;
     }
     /* #marketing #plan_comm_desk{
          display: none;
     } */
     #marketing #plan_comm_desk{
          display: block !important;
          border-radius: 0;
          width: 100%;
          margin: 20% 0;
     }
     #rs{
          display: flex;
          flex-wrap: wrap;
          flex-direction: column-reverse;
     }
     #rs div{
          width: 90% !important;
          margin: auto;
     }
     #marketing #rs div:first-of-type section img{
          width: 25%;
     }
     #marketing #rs article{
          font-size: .7em;
     }
     #marketing #rs div:last-of-type{
          margin-bottom: 15%;
     }

     #marketing #rs div:first-of-type section{
          margin-bottom: 3vh;
          border-radius: 4px;
          width: 100%;
     }
     #marketing #rs div:first-of-type section:nth-child(2){
          margin-left: 5%;
     }
     #marketing #rs div:first-of-type section h2{
          font-size: 1.25em;
          margin-bottom: 1%;
     }
     
     /*---------------------------------
     -------------- ARTICLE ------------
     -----------------------------------*/

     #articles header {
          background-image: url("../images/header-blog-mobile.svg");
          margin-top: 18%;
          background-size: cover;
          min-height: 50vh;
     }

     #articles header div{
          width: 100%;
     }

     #articles section{
          width: 90%;
          margin: auto;
          margin-top: 3%;
     }

     #articles section article{
          width: 100%;
          height: 60vh; 
     }
     
     #articlespage header{
          width: 90%;
          margin-top: 30%;

     }
     #articlespage header div{
          padding: 0;
     }
     #articlespage main{
          width: 90%;
     }
     .tableaumini{
          width: 100%;
          font-size: .8em;
     }
     .tableaumini tr td:first-of-type{
          padding-left: 2%;
     }
     .imageEtTexte img{
          margin-bottom: 5%;
          width:100%;
     }
     .imageEtTexte p{
          margin: 3% 0;
     }
     
     .imageEtTexte{
          flex-wrap: wrap;
     }
     .imageEtTexte:last-of-type{
          flex-direction: column-reverse;
     }
     #articlespage ul{
          padding-left: 7%;
     }
     #articlespage .soustitre{
          font-size: 1.2em !important;
     }
     #articlespage header div h1{
          font-size: 1.5em;
     }
     #articlespage p{
          line-height: 1.4em;
     }
     .borderorange{
          padding-left: 5%;
     }
     #articlespage .tableaumini td, #articlespage .tableaumini th{
          line-height: 1em;
          padding: .5em;
     }


     #table_dashed{
          display: none;

     }
     #tableau_dashed2{
          display: block;
          width: 100%;
          border-collapse: collapse;
          margin: 10% 0 !important;
     }
     #tableau_dashed2 tr{
          width: 100%;
     }
     #tableau_dashed2 td{
          vertical-align: top;
          width: 48%;
          padding: 1%;
     }
     #tableau_dashed2 tr:nth-child(2) td{
          border-top: dashed 3px #F2991D;
          border-bottom: dashed 3px #F2991D;
     }
     #tableau_dashed2 p{
    text-align: center; margin-top: 10%;
    font-size: .8em;
    padding: 0 0 5%;
    margin: 5% 5% 0;
     }
     #tableau_dashed2 img{
          width: 40%;
          margin: 0 30%;
     }
     #tableau_dashed2 td:first-of-type{
          border-right: dashed 3px #F2991D;
     }

     .imageEtListe{
    display: block;
    align-items:baseline;
}
.imageEtListe img{
    text-align: center;
    margin: 0 0 5% 15%;
    justify-content: center;
}
.cinqimages div{
    width: 45%;
    text-align: center;
    font-weight: bold;
}
.cinqimages div:last-of-type{
     margin: auto;
}

}